.hidden {
   display: none;
}

body {
   background-color: rgb(255, 255, 255);
   margin: 0;
}

img {
   width: 100%;
   display: block;
}

 #mobile-outline {
    outline: 20px solid #008cff;
    max-width: 412px;
    margin: 20px auto 20px auto;
    border-radius: 10px;
 }
 
 a {
    text-decoration: none;
    transition: all .5s ease-in-out;
 }
 
 input, textarea {
    display: block;
    margin: 0;
    padding: 0;
 }
 

 
 /* NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV */
 
#main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* for centering logo */
  padding: 0 20px;
  max-height: 150px;
}

#logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: 280px;
}

#logo img {
  display: block;
  width: 100%; /* scales logo properly */
}

#main-nav {
  flex: 1;
}
 
#sticky-nav-con {
   width: 100vw; 
   margin-left: calc(-50vw + 50%);
}

#burger-con {
 
   display: none;
}

#burger-con ul li a  {
    font-size: 27px;
    color: #00c3ff;
    margin-right: 0px;
 }
   
#burger-con.slide-toggle {
    display: block;
 }

#main-nav button {
   width: 20px;
   height: 20px;
   background: url(../images/menu.svg) no-repeat center;
   
   transition: all .5s ease;
   margin-bottom: 20px;
   border: 0;
   cursor: pointer;
}

#main-nav button.expanded {
   transform: rotate(90deg);
}
 
 #main-nav ul li a:hover {
    color: #00aeff;
 }
 
 #main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
 }
 
#main-nav ul li a {
   display: block;
   padding: 10px 0 10px 0;
   text-align: center;
   color: #ffffff;
   font-family: "Lilita One", sans-serif;
   font-weight: 400;
   font-style: normal;
 }
 
 #main-nav ul li {
    border-bottom: 1px solid #efefef;
 }
 
 #main-nav ul li:first-child {
    border-top: 1px solid #efefef;
 }
 
 #main-nav ul li:last-child {
    margin-bottom: 10px;
 }
 
 
 
 #get-burple {
    display: none;
 }
 
 #hero-main {
   height: 220px;
   object-fit: cover;
}
 
 #hero img {
    grid-column: 1/-1;
    grid-row: 1/1;
    justify-self: center;
 }
 

 
 #hero .grid-con {
    grid-column: 2/3;
    grid-row:1/1;
    margin: 0;
 }

 .get-burple {
   background-color: #678dad;
   color: #fff;
   font-size: 90px;
   
   display: flex;
   align-items: center;
   transition: all 0.3s ease-in-out;
}
 
 .get-burple {
    background-color: #ffffff00;
    color: #ffffff;
    
    width: 180px;
    height: 90px;
    font-size: 27px;
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
 }

 .get-burple a button {
   font-family: 'Lilita One';
   color: #ffffff;
   background-color: rgba(255, 255, 255, 0);
   font-size: 25px;
 }
 
 .get-burple:hover {
    box-shadow: inset 0px -120px 0px #00afe5;
 }

 /* Tablet Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet  Tablet   */
 
 @media screen and (min-width: 768px) {
 
    /* Main Nav */
 
    #sticky-nav-con {
       position: sticky;
       top: 0px;
       background-color: #00c3ff;
       border-bottom: solid 3px #10acdb;
       z-index: 1;
    }
 
    #main-nav {
       margin-top: 4%;
       margin-bottom: 4%;
    }
 
    #main-nav ul li a {
       display: inline;
    }
 
    #button {
       display: none;
    }
 
    #burger-con {
       display: block;
       font-size: 12px;
    }
 
    #burger-con ul li, #burger-con ul li:first-child {
       border: none;
       display: inline;
    }
 
    #burger-con ul li {
       margin-right: 10px;
    }
 
    #burger-con ul li:last-child {
       margin-right: 0px;
    }
 
    #logo {
       margin-top: 0;
    }
 
    #get-burple {
       display: flex;
       margin-right: -16px;
    }
   }


/* VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO VIDEO  */

.hero {
   position: relative;
   min-height: 78vh;
   color: #fff;
   overflow: hidden;
 }

.hero  button {
   margin-top: 700px;
   font-size: 50px;
   border-radius: 20px;
   font-family: 'lilita one';
}

 .hero-video {
   position: absolute; inset: 0;
   width: 100%; height: 100%;
   object-fit: cover; object-position: center;
 }
 .hero-content {
   position: relative; z-index: 1;
   display: grid; place-items: center;
   min-height: inherit;
   padding: 4rem 1rem;

 }
 @media (prefers-reduced-motion: reduce) {
   .hero-video { display: none; }
   .hero { background: url('fallback.jpg') center/cover no-repeat; }
 }
 


/* HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME */

#iconic  {
display: flex;
justify-content: center;
}

#pic1 {
   width: 100vw; 
   position: relative;
 background: url(../images/Comp\ 1\ \(0-00-hgjh03-01\)_1.png) no-repeat;
 background-size: contain;
 aspect-ratio: 2.125; 
}



#pic1 button {
   
   height: 54px;
   background-color: white;
   color: #00c3ff;
   font-family: 'lilita one';
   border-radius: 30px;

   position: absolute;
   bottom: 20px;      /* distance from bottom */
   left: 50%;
   transform: translateX(-50%); /* perfectly centers horizontally */
   padding: 10px 20px;
   font-size: 30px;
}

#newflavours {
   background-color:  rgb(255, 255, 255);
   margin-bottom: 80px;
}

#new-flav-title h1 {
   display: flex;
   justify-content: center;
   font-family: 'Lilita One';
   color: #00c3ff;
   font-size: 120px;
   -webkit-text-stroke: .1px #00abdf;
}

#featured-flav  {
   display: flex ;
   justify-content: center;
   height: 700px;
}

#featured-flav div h3 {
   color: #d6f5ff;
}

#featured-flav div {
   max-width: 460px;
 
}

#newflav1-all h2 {
   padding-left: 20px;
   font-family: helvetica;
   font-size: 30px;
   color: #00a3ee;
}

#newflav1-all h2:nth-of-type(2) {
   font-size: 45px;
   margin-top: -25px;
   font-family: 'lilita one';
}

#newflav1 {
   max-width: 466px;
   min-height: 620px;
   background:  url(../images/lime-shiny\ \(1\).png) no-repeat;
   background-size: cover; 
   position: relative;
   margin: 20px;
   border: 3.5px solid #0095db;
   border-radius: 45px;
}

#newflav1 h3 {
 padding: 200px;
}

#newflav1 img {
   width: 90px;
   position: absolute;
  top: 0;
  right: 0;
  
}

#newflav2-all h2 {
   padding-left: 20px;
   font-family: helvetica;
   font-size: 30px;
   color: #00a3ee;
}

#newflav2-all h2:nth-of-type(2) {
   font-size: 45px;
   margin-top: -25px;
   font-family: 'lilita one';
   
}

#newflav2 {
   max-width: 466px;
   min-height: 620px;
   background:  url(../images/grape-shiny\ \(1\).png) no-repeat;
   background-size: cover; 
   position: relative;
   margin: 20px;
   border: 3.5px solid #0095db;
   border-radius: 45px;
}

#newflav2 h3 {
   padding: 200px;
  }

  #newflav2 img {
   width: 90px;
   position: absolute;
  top: 0;
  right: 0;
  
}

#newflav3-all h2 {
   padding-left: 20px;
   font-family: helvetica;
   font-size: 30px;
   color: #00a3ee;
   
}

#newflav3-all h2:nth-of-type(2) {
   font-size: 45px;
   margin-top: -25px;
   font-family: 'lilita one';
   
}

#newflav3 {
   max-width: 466px;
   min-height: 620px;
   background:  url(../images/strawberry-shiny\ \(1\).png) no-repeat;
   background-size: cover; 
   position: relative;
   margin: 20px;
   border: 3.5px solid #0095db;
   border-radius: 45px;
}

#newflav3 h3 {
   padding: 200px;
}

  #newflav3 img {
   width: 90px;
   position: absolute;
  top: 0;
  right: 0;
  
}

#summer {
   background: url(../images/yes.png) no-repeat;
   background-size: cover;
   height: 1000px;
}

#summer h3 {
   font-family: 'Lilita One';
   color: white;
   font-size: 140px;
}
 
#more-btn-home {
   display: flex;
   justify-content: center;
}

#more-btn-home button {
   padding: 30px;
   padding-left: 60px;
   padding-right: 60px;
   color: #00c3ff;
   font-family: 'Lilita One';
   font-size: 30px;
   background-color: white;
   box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.4);
}

/* ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT */

.about-main {
   background: url(../images/ice1920.png) no-repeat;
   background-size: cover;
   background-position: center;

   padding-top: 400px; /* pushes the content down, but background stays in place */
   padding-bottom: 400px; 
 }


#about p {
   justify-content: center;
   display: flex;
   color: white;
   font-family: 'lilita one';
}

#about div {
   background-color: #00c3ff;
   padding-left: 30px;
   padding-top: 9px;
   padding-right: 30px;
   padding-bottom: 30px;
   border-radius: 10px;
 
}

#about div h2 {
   color: white;
   font-size: 40px;
   justify-content: center;
   display: flex;
   font-family: 'lilita one';
}

#about div p {
   font-size: 30px;
   justify-content: center;
   display: flex;
}

#about-nav nav a {
   display: flex;
   justify-content: center;
}


#home-link a {
   text-decoration: none;
   color:rgb(0, 160, 252);
   font-size: 50px;
}

/* CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT CONTACT */

.contact-main {
   background: url(../images/ice1920.png) no-repeat;
   background-size: cover;
 }
 

#home-link a {
   text-decoration: none;
   color:rgb(0, 160, 252);
   font-size: 50px;
}

#home-link a:hover {
   text-decoration: none;
   color:rgb(0, 117, 167);
   font-size: 50px;
}

form {
   text-align: left;
}

button {
   background-color: #00c3ff;
   color: white;
   border: none;
   cursor: pointer;
   margin-top: 1rem;
   border-radius: 5px;
}

button:hover {
   background-color: #154625;
}

.socials a {
   text-decoration: none;
   color:rgb(0, 160, 252);
   font-size: 30px;
}
   
.socials a:hover {
   text-decoration: none;
   color:rgb(1, 15, 3);
}

label {
   display: block;
   margin-top: 0.5rem;
   color: #00b3ea;
}  

label h3 {
   color: black;
}

input {
   border-radius: 5px;
}

textarea {
   border-radius: 5px;
}

form {
   margin: 0 auto;
}

input::placeholder {
   font-size: 24px;   
   color: gray;       
   text-align: center;
   font-family: 'Lilita One';
   color: #00c3ff;
 }

#contact-title  {
   display: flex;
   justify-content: center;
   font-size: 60PX;
   color: #ffffff;
   -webkit-text-stroke: .1px #52d7ff;
   font-family: 'Lilita One';
}

#send-btn {
   padding: 30px;
   padding-left: 60px;
   padding-right: 60px;
   color: #00c3ff;
   font-family: 'Lilita One';
   font-size: 37px;
   background-color: white;
   box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.4);
}

#message_input {
   width: 500px;
   height: 400px;
   border-radius: 50px;
   background-color: #98ecff;
}

#name_input {
   width: 500px;
   height: 70px;
   border-radius: 50px;
   background-color: #98ecff;
}

#email_input {
   width: 500px;
   height: 70px;
   border-radius: 50px;
   background-color: #98ecff;
}

#contactform {
   display: flex;
  justify-content: center; 
  align-items: center;  
}

form {
   margin: 0 auto;
   text-align: center;
}




/* =============================================
   PROJECT PAGE — MENDEL
   ============================================= */

.project-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px 100px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.project-title {
  font-family: "League Spartan", sans-serif;
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  color:#00c3ff;
  margin: 0;
  letter-spacing: -0.01em;
}

.hero-videos-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 32px;
}

.hero-videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.hero-video-card {
  /* border: 1px solid #e0e0e0; */
  background: #efefef00;
  border-radius: 18px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.205);
}

.hero-video-card video {
  width: 100%;
  display: block;
  height: auto;
  border-radius: 18px 18px 0 0;
 
}

.hero-video-note {
  margin: 0;
  padding: 14px 16px 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #222;
  /* border-top: 1px solid #e0e0e0; */
}

/* Section label shared */
.section-label {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 20px;
}

/* Tools Used */
.tools-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 32px;
}

.tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tools-list li {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #000;
  padding: 6px 16px;
  letter-spacing: 0.05em;
}

/* Overview */
.overview-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 32px;
}

.overview-section p,
.process-section p,
.impact-section p {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #222;
  max-width: 720px;
  margin: 0;
}

/* Image Showcase */
.showcase-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.showcase-carousel {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.showcase-viewport {
  overflow: visible;
  border-radius: 18px;
}

.showcase-track {
  display: flex;
  gap: 18px;
  transition: transform 0.35s ease;
}

.showcase-item {
  flex: 0 0 100%;
  opacity: 0.45;
  transform: scale(0.95);
  transform-origin: center center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.showcase-item.is-active {
  opacity: 1;
  transform: scale(1);
}

.showcase-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.205);
}

.showcase-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.showcase-arrow--left {
  left: -22px;
}

.showcase-arrow--right {
  right: -22px;
}

.showcase-arrow:hover {
  background: #f5f5f5;
}

.showcase-arrow:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* logo */

.logo-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 32px;
}

.logo-layout {
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  gap: 28px;
  align-items: center;
}

.logo-layout__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

.logo-layout__text p {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #222;
  margin: 0;
}

.instagram-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 32px;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.instagram-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.205);
}

/* Process */
.process-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 32px;
}

/* Impact & Outcomes */
.impact-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 32px;
}

/* Responsive — stack single column on mobile */
@media (max-width: 600px) {
  .showcase-carousel {
    padding: 0 16px;
  }

  .showcase-track {
    gap: 0;
  }

  .showcase-item {
    flex-basis: 100%;
  }

  .showcase-arrow {
    display: none;
  }

  .instagram-grid {
    grid-template-columns: 1fr;
  }

  .logo-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .project-main {
    gap: 48px;
    padding: 40px 16px 80px;
  }
}

/* FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER */
footer {
  min-height: 600px;
  background-color: rgba(199, 199, 199, 0.168);
  padding-top: 30px;
}

@media (min-width: 1200px) {
  footer.grid-con {
    width: 100%;
    max-width: none;
    padding-left: max(15px, calc((100vw - min(90vw, 1200px)) / 2));
    padding-right: max(15px, calc((100vw - min(90vw, 1200px)) / 2));
  }
}

#footer-text {
  display: flex;
  color: rgb(129, 129, 129);
  flex-direction: column;
  font-size: 23px;
  font-family: "League Spartan";
}

#footer-logo {
  width: 120px;
}

#x-icon {
  width: 60px;
}

#insta-icon {
  width: 60px;
}

#linkedin-icon {
  width: 67px;
}

#youtube-icon {
  width: 64px;
  margin-left: 10px;
}

#socials {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

#socials img {
  margin-right: 20px;
}

#footer-buttons button {
  background-color: #00000000;
  color: rgb(129, 129, 129);
  margin-right: 20px;
  max-width: 450px;
  padding: 20px 47px;
  border-radius: 70px;
  font-size: 30px;
  cursor: pointer;
  border: 2px solid rgb(129, 129, 129);
  margin-top: 7px;
  font-family: "League Spartan";
}

#footer-buttons h2 {
  color: rgb(129, 129, 129);
  font-size: 30px;
  margin-top: 45px;
  font-family: "League Spartan";
  font-weight: 500;
}

#footer-contact p {
  color: rgb(129, 129, 129);
  font-size: 30px;
  font-family: "League Spartan";
}

#footer-contact-button {
  
  
  font-family: "League Spartan";
  margin-right: 40px;
  max-width: 450px;
  padding: 20px 137px;
  border-radius: 70px;
  font-size: 30px;
  cursor: pointer;
  
  margin-top: 50px;
  list-style: none;
  margin-top: 30px;
border-radius: 12px;

   box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.121);
    border: none;
}

#footer-contact a {
  text-decoration: none;
 color: rgb(129, 129, 129);
 
}