@import url('https://fonts.googleapis.com/css2?family=Smooch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
body{
 margin: 0;
}

.navText{
    font-weight: 300;
    font-size: 1.25em;
    font-family: montserrat;
}

.cont{
  font-size: 1.5em;
  }


  @media screen and (max-width: 1380px) {
    .cont{
      font-size: 1.25em;
      } 
     }



@media screen and (max-width: 880px) {
  .cont{
    font-size: 0em;
    } 
   }

   
   

  .aV{
    font-size: 1.75em;
    font-family: 'montserrat';
   }
  



  @media screen and (max-width: 880px) {
    .aV{
      font-size: 1.25em;
     }
    }


.navText--plat{
  font-weight: 300;
  font-size: 2.25em;
  font-family: montserrat;
}

@media screen and (max-width: 920px) {
  .navText--plat{
    font-weight: 300;
    font-size: 1em;
    font-family: montserrat;
  }
  }




.navText--Home{
  font-weight: 300;
  font-size: 1.75em;
  font-family: montserrat;
}


@media screen and (max-width: 1680px){
  .navText--Home{
    font-weight: 300;
    font-size: 2em;
    font-family: montserrat;
  }
}


@media screen and (max-width: 880px){
  .navText--Home{
    font-weight: 300;
    font-size: 1em;
    font-family: montserrat;
  }
}


@media screen and (max-width: 680px){
  .navText--Home{
    font-weight: 300;
    font-size: 1.75em;
    font-family: montserrat;
  }
}




@media screen and (max-width: 320px){
  .navText--Home{
    font-weight: 300;
    font-size: 0.75em;
    font-family: montserrat;
  }
}




header{
 position: fixed ;
 width: 100% ;
 top: 0 ;
 height: 10% ;
 display: flex ;
 justify-content: space-evenly;
 place-items: center;
 background-color: rgb(72 0 0 / 65%);
 z-index: 2 ;
 transition: 0.3s ease ;  
}


@media screen and (max-width: 1680px){
  header{
    height: 8%;
  }
}




.logo{
 font-family: smooch;
 color: white;
 font-size: 2.2em;
 margin-top: 1.75em;
}


.about--Nav{
  font-size: 17pt;
}



.logo--Com{
  font-family: smooch;
  color: white;
  font-size: 2.2em;
  margin-top: 0.5em;
  margin-right: 1.5em;
 }


.logo--Home{
  font-family: smooch;
  color: white;
  font-size: 2.2em;
  margin-top: 0.75em;
 }

header nav button{
 background-color: transparent;
 border: 0;
 font-family: quicksand;
 color: white;
 transform: uppercase;
 font-size: 1em;
 cursor: pointer;
 transition-delay: 0s;
 transition-duration: .6s;
 padding: 1em;
}
header nav button:hover{
 color: rgb(252, 252, 252);
 transform: translate(0px, -4px);
 text-shadow: 0 6px 6px rgba(0, 0, 0, 0.363);
 padding: 1.25em;
 font-size: 1em;
}



@media screen and (max-width: 880px) {
  header nav button{
    background-color: transparent;
    border: 0;
    font-family: quicksand;
    color: white;
    transform: uppercase;
    font-size: 1em;
    cursor: pointer;
    transition-delay: 0s;
    transition-duration: 0s;
    padding: 0.65em;
   }
   header nav button:hover{
    background-color: transparent;
    border: 0;
    font-family: quicksand;
    color: white;
    transform: uppercase;
    font-size: 1em;
    cursor: pointer;
    transition-delay: 0s;
    transition-duration: 0s;
    padding: 0.65em;
   }

  }












.order-online{
 width: 15em;
 height: 3.5em;
 border-radius: 20px;
 border: 0;
 background-color: rgba(0, 0, 0, 0.322);
 color: rgb(255, 0, 0);
 font-family: montserrat;
 cursor: pointer;
 transition: .6s;
 font-style: initial;
    font-variant-ligatures: initial;
    font-variant-caps: initial;
    font-variant-numeric: initial;
    font-variant-east-asian: initial;
    font-weight: initial;
    font-stretch: initial;
    font-size: initial;
    line-height: initial;
}


.order-online:hover{
 transform: translate(0px, -4px);
 box-shadow: 0 6px 6px rgba(0, 0, 0, 0.096);
}

.order-onlinet{
  font-size: 1.5em;
}

@media screen and (max-width: 1380px) {
  .order-online{
    width: 15em;
    height: 3em;
    border-radius: 20px;
    border: 0;
    background-color: rgba(0, 0, 0, 0.322);
    color: rgb(255, 0, 0);
    font-family: montserrat;
    cursor: pointer;
    transition: .6s;
    font-style: initial;
       font-variant-ligatures: initial;
       font-variant-caps: initial;
       font-variant-numeric: initial;
       font-variant-east-asian: initial;
       font-weight: initial;
       font-stretch: initial;
       font-size: initial;
       line-height: initial;
   }
   
   
   .order-online:hover{
    transform: translate(0px, -4px);
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.096);
   }
   
   .order-onlinet{
     font-size: 1.5em;
   }
  }




@media screen and (max-width: 920px) {
  .order-online{
    width: 0em;
    height: 0em;
    border-radius: 20px;
    border: 0;
    background-color: rgba(0, 0, 0, 0.322);
    color: rgb(255, 0, 0);
    font-family: montserrat;
    cursor: pointer;
    transition: .6s;
    font-style: initial;
       font-variant-ligatures: initial;
       font-variant-caps: initial;
       font-variant-numeric: initial;
       font-variant-east-asian: initial;
       font-weight: initial;
       font-stretch: initial;
       font-size: initial;
       line-height: initial;
   }
   
   
   .order-online:hover{
    transform: translate(0px, -4px);
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.096);
   }
   
   .order-onlinet{
     font-size: 0em;
   }
  }




.waves {
 transform: rotate(180deg) scale(1, 0.2);
  position:relative;
  width: 100%;
  height:11vh;
  margin-bottom:-7px; 
  min-height:100px;
  max-height:150px;
 margin-top: 50px;
}
.parallax > use {
  animation: move-forever 25s cubic-bezier(1.55,1.5,1.45,1.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -12s;
  animation-duration: 14s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 7s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 10s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 17s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

@media screen and (max-width: 1380px){
  header{
    height: 10%;
  }
}


@media screen and (max-width: 880px){
  header{
    width: 100%;
    height: 6%;
  }
}



  @media screen and (max-width: 880px){
    .about-header{
      width: 100%;
      height: 6%;
    }
  }

  


  
@media screen and (max-width: 880px) {
  .logo--Home{
    font-size: small;
   }
  }

@media screen and (max-width: 880px) {
  .navText{
    font-weight: 300;
    font-size: 0.65em;
    font-family: montserrat;
}
}


.order-onlineA{
  width: 15em;
  height: 3.5em;
  border-radius: 20px;
  border: 0;
  background-color: rgba(0, 0, 0, 0.322);
  color: rgb(255, 0, 0);
  font-family: montserrat;
  cursor: pointer;
  transition: .6s;
  font-style: initial;
     font-variant-ligatures: initial;
     font-variant-caps: initial;
     font-variant-numeric: initial;
     font-variant-east-asian: initial;
     font-weight: initial;
     font-stretch: initial;
     font-size: initial;
     line-height: initial;
 }
 
 
 .order-onlineA:hover{
  transform: translate(0px, -4px);
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.096);
 }
 
 
 
 @media screen and (max-width: 1380px) {
   .order-onlineA{
     width: 13.5em;
     height: 3em;
     border-radius: 20px;
     border: 0;
     background-color: rgba(0, 0, 0, 0.322);
     color: rgb(255, 0, 0);
     font-family: montserrat;
     cursor: pointer;
     transition: .6s;
     font-style: initial;
        font-variant-ligatures: initial;
        font-variant-caps: initial;
        font-variant-numeric: initial;
        font-variant-east-asian: initial;
        font-weight: initial;
        font-stretch: initial;
        font-size: initial;
        line-height: initial;
    }
    
    
    .order-onlineA:hover{
     transform: translate(0px, -4px);
     box-shadow: 0 6px 6px rgba(0, 0, 0, 0.096);
    }

   }
 
  
   @media screen and (max-width: 880px) {
    .order-onlineA{
      width: 0em;
      height: 0em;
      border-radius: 0px;
      border: 0;
      background-color: rgba(0, 0, 0, 0.322);
      color: rgb(255, 0, 0);
      font-family: montserrat;
      cursor: pointer;
      transition: .6s;
      font-size: 0em;
      font-style: initial;
         font-variant-ligatures: initial;
         font-variant-caps: initial;
         font-variant-numeric: initial;
         font-variant-east-asian: initial;
         font-weight: initial;
         font-stretch: initial;
         font-size: initial;
         line-height: initial;
     }
     
     
     .order-onlineA:hover{
      transform: translate(0px, -4px);
      box-shadow: 0 6px 6px rgba(0, 0, 0, 0.096);
     }
 
    }