styles.css

@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');

body {
   font-family: "Wix Madefor Text", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
 }
 
*{
    margin:0;
    padding:0;

}

/*Css Variables*/
:root{
    --navbar-height: 59px;

}
.logo{
   margin-left: 20px;
   font-size: 32px;
   color: black;
   text-decoration: none;
}

body{
  
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}
#navbar{
    display:flex;
    align-items: center;
    position:fixed;
    padding: 20px;
    justify-content: space-between;
    top:0px;
    width: 100%;
   

}
.header{
   margin-right: 20px;
}
#image{
    height: 56px;
    margin: 3px 5px;
}

 
 #navbar ul{
    display: flex;
    width: 100%;
    font-family: 'Fira Sans', sans-serif;
    
   
 }

 #navbar{
    background-color:#ADE0C8;
    position: fixed;
    z-index: 9999;
    height: 9%;
    width:100%;
    top:0px;
    left:0px;
    opacity: 1;

   
 }

 #navbar ul li{
    list-style: none;
    font-size: 1.3 rem;
 }

 #navbar ul li a{
    color: white;
    display: inline-block;
    padding: 3px 32px;
    border-radius: 20px;
    text-decoration: none;
 }

 #navbar ul li a:hover {
    color: black;
    background-color: white;
    
 }

 #section h1{
    display:contents;
    padding-left: 20px;
 }
  /*home*/
  #home{
    display: contents ;
    flex-direction: column;
    padding: 3px 200px ;
    height: 690px;
    justify-content:flex-start,left;
    align-items:flex-start,left;
 }


  .scroll{
   position: relative;
   top: 22%;
   width: 80%;
   padding: 50px;
   margin: auto;
   align-items: center;
   display: grid;
   gap: 8rem;
   grid-auto-flow: column;
   grid-auto-columns: 21%;
   overflow-x: auto;
   overscroll-behavior-inline: contain;
}
.element{
   margin-top: 70px;
   background: rgb(89 55 55 / 44%);
   text-decoration: none;
   min-height: 200px;
   width: 200px;
   padding: 20px;
   border: 2px solid rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(10px);
   text-align: center;
   transition: transform 0.3s;
   cursor: pointer;
   overflow: hidden;
}
.element:hover{
   transform: translateY(-10px);
}
.element1:hover{
   transform: translateY(-10px);
}
.drink{
   width: 90%;
   cursor: pointer;
   position: relative;
}
.element .content h1{
   padding-top: 30px;
   font-size: 20px;
   color: rgb(255, 255, 255);
   padding: 5px;
   width: 130px;
   height: 27px;
   border-radius: 25px;
   background-color: #000000;
   color: white;
   border: none;
   cursor:pointer;
   position: relative;
   margin-left: 30px;
   margin-bottom:5px;
}
.next{
   position: relative;
   width: 70px;
}
.next:hover{
   cursor: pointer;
}
.scroll::-webkit-scrollbar{
   -webkit-appearance: none;
}
.icon{
   position: relative;
   top:30%;
   background-color: black;
   width: 0px;
   outline: none;
   border: none;
   cursor: pointer;
}
.scrolll{
   display: grid;
   grid-auto-flow: column;
   padding-right: 68px;
}

@media(max-width:700px){
.logo{
   padding-left: 40px;
}

.icon{
   display: none;
}



.banner{
   background: none;
}
.scroll{
   width: 90%;
   display: flex;
   flex-direction: column;

}
.element{
   width:90%;
}
}
.drinks{
   text-decoration: none;
   color: #fff;
}
.soups{
   text-decoration: none;
   color: #fff;
}
.snacks{
   text-decoration: none;
   color: #fff;
}
.desserts{
   text-decoration: none;
   color: #fff;
}
.instantmixes{
   text-decoration: none;
   color: #fff;
}
.maincourse{
   text-decoration: none;
   color: #fff;
}
.heading{
   margin-left: 150px;
}
.add{
   color: white;
   text-decoration: none;
   position: absolute;
   top: 114px;
   right: 60px;
   font-size: 21px;
}
a{
   text-decoration: none;
}
.add1 {
   top: 550px;
   left: 50%;
   transform: translate(-50%, -50%);
   height: 22px;
   padding: 10px;
   border-radius: 25px;
   background-color: #fffffffc;
   color: #000000;
   border: none;
   cursor: pointer;
   position: absolute;
   font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   z-index: 999; /* Ensure a high z-index */
   pointer-events: auto; /* Enable pointer events */
}
.filtericon{
   position: relative;
   width: 40px;
}
.icon1{
   width:20px
}
.icon1:hover svg{
   fill: black;
}

.search {
   position: absolute;
   top: 114px;
   right: 60px;
}

.search input[type="text"] {
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 16px;
}

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh; /* Ensure body covers the entire viewport height */
}

footer {
   background-color: #000000;
   padding: 20px 0;
   text-align: center;
   margin-top: auto; /* Push footer to the bottom */
}

.divide {
   margin-top: 10px;
}

.ft {
   color: #ffffff;
   font-size: 14px;
}

/* vlab box */
#box{
   height: 550px;
   width: 1250px;
   background-color: #ffdeb4;
   text-decoration: none;
   text-align: center;
   font-family: 'Poppins', sans-serif;
   margin: auto; 
   padding-top: 215px;
}

#pbox{
   text-decoration: none;
   text-align: center;
   font-family: 'Poppins', sans-serif;
   display: inline;
}

.boxd{
   text-decoration: none;
   text-align: center;
   font-family: 'Poppins', sans-serif;
   display: inline; 
   font-size: 40px;  
   font-weight: 380; 
}

/* About us information */
.info{
   margin-left: 28px;
   color: black;
   margin-right: 28px;
   text-decoration: none;
   font-family: 'Poppins', sans-serif;
   text-align: justify;
   }
   
   .ap{
       color: black;
       text-decoration: none;
       font-family: 'Poppins', sans-serif;
       font-weight: 500;
   }
   
   /* .ul1{
   margin-left: 14px;
   color: #9B2928;
   text-decoration: none;
   font-family: 'Poppins', sans-serif;
   } */
   
   .ul1{
       margin: 0.75em 0;
       padding: 0 1em;
       list-style: none;
       color: white;
     }
     li::before { 
       content: "";
       border-color: transparent #000000;
       border-style: solid;
       border-width: 0.35em 0 0.35em 0.45em;
       display: block;
       height: 0;
       width: 0;
       left: -1em;
       top: 0.9em;
       position: relative;
     }
   
     .our-team {
      width: 315px;
        left: 19%;
        display:flex;
    border: 2px solid rgb(0, 0, 0);
    padding: 34px;
    margin: 55px 6px;
    border-radius:23px;
    background: rgb(220, 213, 213);
      padding: 30px 0 40px;
      margin-bottom: 30px;
      background-color: #f7f5ec;
      text-align: center;
      overflow: hidden;
      position: relative;
    }
    
    
    .our-team .picture {
      display: inline-block;
      height: 130px;
      width: 130px;
      margin-left: 20px;
      margin-bottom: 50px;
      z-index: 1;
      position: relative;
    }
    
    .our-team .picture::before {
      content: "";
      width: 100%;
      height: 0;
      border-radius: 50%;
      background-color: #1369ce;
      position: absolute;
      bottom: 135%;
      right: 0;
      left: 0;
      opacity: 0.9;
      transform: scale(3);
      transition: all 0.3s linear 0s;
    }
    
    .our-team:hover .picture::before {
      height: 100%;
    }
    
    .our-team .picture::after {
      content: "";
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #1369ce;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    
    .our-team .picture img {
      width: 100%;
      height: auto;
      border-radius: 50%;
      transform: scale(1);
      transition: all 0.9s ease 0s;
    }
    
    .our-team:hover .picture img {
      box-shadow: 0 0 0 14px #f7f5ec;
      transform: scale(0.7);
    }
    
    .our-team .title {
      display: block;
      font-size: 15px;
      color: #4e5052;
      text-transform: capitalize;
    }
    
    .our-team .social {
      width: 100%;
      padding: 0;
      margin: 0;
      background-color: #1369ce;
      position: absolute;
      bottom: -100px;
      left: 0;
      transition: all 0.5s ease 0s;
      display: flex; /* Change display property to flex */
      justify-content: center; /* Horizontally center the items */
    }
    
    .our-team:hover .social {
      bottom: 0;
    }
    
    .our-team .social li {
      display: inline-block;
    }
    
    .our-team .social li a {
      display: block;
      padding: 10px;
      font-size: 17px;
      color: white;
      transition: all 0.3s ease 0s;
      text-decoration: none;
    }
    
    .our-team .social li a:hover {
      color: #000000;
      background-color: #f7f5ec;
    }
    .row{
      display:flex;
      border: 2px solid rgb(255, 255, 255);
      padding: 34px;
      margin: 25px 6px;
      border-radius:23px;
      flex-wrap: wrap;
     }