body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    /* navv */

    .nav{
    display: flex;
   justify-content: space-between;
   background-color:greenyellow;
   padding: 0 20px;
   width: 90%;
   margin: auto;
   border-radius: 20px;
   align-items: center;
   
   font-family: sans-serif;
   box-shadow: 
        0 0 20px red,
        0 0 40px orange,
        0 0 60px yellow,
        0 0 80px green,
        0 0 100px blue,
        0 0 120px violet;
   }
   .navbar-brand{
    margin-top: -32px;
   }
   .navbar-brand>h1{
    font-size: xx-large;
    margin-top: 20px; 

   }
   .nav-link:hover{
    background-color: #8accda;
    box-shadow: 2px 2px 10px cadetblue;
    border-radius: 20px;

   }
.nav11 p{
    margin: 8px;

    
}

.nav11{
    display: flex;

}
.nav12{
    display: flex;
   
}
.nav12 p{
    margin: 15px;

}
.nav p:hover{
    cursor: pointer;
    color: brown;
    text-decoration: underline gold;
    
}
.nav2{
    display: flex;
   justify-content:space-between;
   background-color:azure;
   width: 100%;
   align-items: center;
   height: 20vh ;
   
   font-family: sans-serif;
   
}
/* body{
overflow-x: hidden;
} */

.navbar{
   position: sticky;
  
    top: 0px;
    width: 100%;
    height: 15vh;
    z-index: 10;
}
.navbar-brand{

color: rgb(26, 155, 26);
font-family: fantasy;
width: 200px;
margin-left: 65px;

}
.navbar-nav{
    margin-left:300px;
}
.nav-item a{
    margin-left: 40px;
}
.d-flex{
    margin-right: 65px;
    display: flex;
    justify-items: space-evenly;
}
.d-flex img{
    margin-left: 15px;

}
.page img{
    height: 72vh;
    width: 100%;
}

.navbar {
  display: flex;
  justify-content: start;
  align-items: center;
  background: linear-gradient(270deg, white, rgb(47, 203, 255),red,greenyellow,blue);
  background-size: 600% 600%;
  animation: gradientAnimation 12s ease infinite;
  padding: 10px 20px;
  font-family: Arial, sans-serif;
}

/* Animation keyframes */
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
} 

/* pages */
.page{
    background: url(../images/main\ bac2.jpg) no-repeat center center/cover;
    height: 80vh;
    width: 100%;
    display: grid;
    justify-content: center;
 

    
}
.page14{
    
    width: 500px;
    height:40vh;
    box-shadow:0,100px 100vh  #00f431,cornflowerblue;

    
}
.page14 img{
    height:40vh ;
    width: 100px;
}
.page11{
    color: green;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size:xx-large;
    justify-items: center;
    align-items: center;
}
.flex{
    display: flex;
  
    
    
}
.page12{
  
    box-shadow: 2px -10px 10px cornflowerblue;
    background-color: #f7f7f7;
    height: 1vh;
}
.page12 input{
    border-radius: 20px;
    width:500px;
    height: 8vh;
    
}
.page14{
  box-shadow: 
        300 300 300px red,
        0 0 40px orange,
        0 0 60px yellow,
        0 0 80px green,
        0 0 100px blue,
        0 0 120px violet;
}
.page13 button{
    margin-left: -63px;
    background-color: rgb(0, 255, 21);
    border-radius: 20%;
    height: 8vh;
}
.carousel-control-prev-icon{
    background-color: rgb(200, 212, 208);
     border-radius: 100%;

}
.carousel-control-prev-icon:hover{
    background-color:green;
     border-radius: 100%;
    width: 40px;
    height:50px;

}
.carousel-control-next-icon{
    background-color: rgb(200, 212, 208);
     border-radius: 100%;

}
.carousel-control-next-icon:hover{
    background-color:green;
     border-radius: 100%;
    width: 40px;
    height:50px;

}


/* features */

.features{
 display:flex;
 justify-content: space-evenly;
 margin:200px;


}
.features img{
    height: 25vh;
    width: 200px;
    justify-self: center;
}
.f1{
    border: 2px solid grey;
    box-shadow: 
        0 0 20px red,
        0 0 40px orange,
        0 0 60px yellow,
        0 0 80px green,
        0 0 100px blue,
        0 0 120px violet;

}
.f1 h4,p{
    justify-self: center;
    
}
.f2{
    border: 2px solid grey;
    box-shadow: 
        0 0 20px red,
        0 0 40px orange,
        0 0 60px yellow,
        0 0 80px green,
        0 0 100px blue,
        0 0 120px violet;
}
.f2 h4,p{
    justify-self: center;
    
}
.f3{
    border: 2px solid grey;
    box-shadow: 
        0 0 20px red,
        0 0 40px orange,
        0 0 60px yellow,
        0 0 80px green,
        0 0 100px blue,
        0 0 120px violet;
}
.f3 h4,p{
    justify-self: center;
    
}
.f4{
    border: 2px solid grey;
    box-shadow: 
        0 0 20px red,
        0 0 40px orange,
        0 0 60px yellow,
        0 0 80px green,
        0 0 100px blue,
        0 0 120px violet;
}
.f4 h4,p{
    justify-self: center;
    

}
/* proucts */
.products{
    display: flex;
   justify-content: space-between;
   background-color:rgb(223, 231, 211);
   padding: 0 20px;
   width: 90%;
   margin: auto;
   border-radius: 20px;
   align-items: center;
   margin-bottom: 50px;
   box-shadow: 
        0 0 15px rgba(66, 133, 215, 0.7),
        0 0 25px rgba(88, 173, 88, 0.7),
        0 0 35px rgba(167, 102, 205, 0.7),
        0 0 45px rgba(117, 72, 117, 0.7); 
       



   

   
   font-family:Verdana, Geneva, Tahoma, sans-serif;
    
}
.slider{
  box-shadow: 
        0 0 15px rgba(207, 7, 7, 0.7),
        0 0 25px rgba(0, 255, 0, 0.7),
        0 0 35px rgba(96, 42, 127, 0.7),
        0 0 45px rgba(255, 0, 255, 0.7) !important;

}
.scroll{
  box-shadow: 
        0 0 20px rgb(75, 157, 115),
        0 0 40px rgb(59, 181, 193),
        0 0 60px yellow,
        0 0 80px green,
        0 0 100px blue,
        0 0 120px violet;
}
.p2>button{
    justify-content: space-evenly;
    border-radius: 20%;
    height: 5vh;
    width: 100px;
    background-color: rgb(47, 227, 255);

    text-decoration: none;
    margin-left: 15px;
    border:2px solid aqua;
    
    
}
.p2 button a{
    text-decoration: none;
    color: white;
}
.p2 button:hover{
    background-color: orange;
}
.all{
    margin:auto;
    width: 80%;


}

.all1{
    display: flex;
    gap: 20px;
    margin-bottom: 105px;

}
.card:hover,.card img:hover{
    transform: scale(1.05);

}
.all2{
    display: flex;
    gap: 20px;
}
iframe{
    height: 100vh;
    width: 100%;
    border: none;
}
.card{
  box-shadow: 
        0 0 15px rgba(255, 0, 0, 0.7),
        0 0 25px rgba(0, 255, 0, 0.7),
        0 0 35px rgba(0, 0, 255, 0.7),
        0 0 45px rgba(255, 0, 255, 0.7) !important;
}
.page14{
  box-shadow: 
        0 0 15px rgba(255, 0, 0, 0.7),
        0 0 25px rgba(0, 255, 0, 0.7),
        0 0 35px rgba(0, 0, 255, 0.7),
        0 0 45px rgba(255, 0, 255, 0.7) !important;
}

/* three */

.three{
    display: flex;
    margin: auto;
    width: 90%;
    justify-content: space-around;
    margin: 200px 100px;
  
    
}

.t1{
    border: 2px solid brown;
    width: 25%;
    height: 60vh;
    position: relative;

   box-shadow: 
        0 0 15px rgba(207, 7, 7, 0.7),
        0 0 25px rgba(0, 255, 0, 0.7),
        0 0 35px rgba(96, 42, 127, 0.7),
        0 0 45px rgba(255, 0, 255, 0.7);


}
.t11 img{
    width: 100%;
    height: 42vh;

}
.t12{
 background-color: brown;
 height:130px;
 width: 100%;
}
.t13{
position:absolute;
bottom: 80px;
left: 50px;
background-color: green;
color: aliceblue;
width: 200px;
text-align: center;
}


.t2{
    border: 2px solid blueviolet;
    width: 25%;
    height: 60vh;
    position: relative;
box-shadow: 
        0 0 15px rgba(207, 7, 7, 0.7),
        0 0 25px rgba(0, 255, 0, 0.7),
        0 0 35px rgba(96, 42, 127, 0.7),
        0 0 45px rgba(255, 0, 255, 0.7);


}
.t21 img{
    width: 100%;
    height: 42vh;

}
.t22{
 background-color: blueviolet;
 height:130px;
 width: 100%;
}
.t23{
position:absolute;
bottom: 80px;
left: 50px;
background-color: green;
color: aliceblue;
width: 200px;
text-align: center;
}



.t3{
    border: 2px solid  gray;
    width: 25%;
    height: 60vh;
    position: relative;
    box-shadow: 
        0 0 15px rgba(207, 7, 7, 0.7),
        0 0 25px rgba(0, 255, 0, 0.7),
        0 0 35px rgba(96, 42, 127, 0.7),
        0 0 45px rgba(255, 0, 255, 0.7);



}
.t31 img{
    width: 340px;
    height: 42vh;

}
.t32{
 background-color: gray;
 height:130px;
 width: 100%;
}
.t33{
position:absolute;
bottom: 80px;
left: 50px;
background-color: green;
color: aliceblue;
width: 200px;
text-align: center;
}


/* our fresh */
.our{
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 100;

  color: #142016;
}












    .basket {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      background: #fcbf1e; /* yellow background */
      padding: 60px 80px;
      color: white;
      height: 100vh;
      box-sizing: border-box;
    }

    .b1 {
      max-width: 50%;
    
    }

    .b1 h2 {
      font-size: 55px;
      line-height: 1.2;
      margin-bottom: 20px;
      color: #fff;
     box-shadow: 
        0 0 25px 5px aqua,
        0 0 50px 10px pink,
        0 0 75px 15px purple,
        0 0 100px 20px gold,
        0 0 125px 25px cyan;
    }
    

    .b1 p {
      font-size: 25px;
      margin-bottom: 40px;
      color: #333;
    }

    .b1 button {
      background: transparent;
      border: 2px solid #fff;
      padding: 10px 20px;
      border-radius: 20px;
      color: #fff;
      cursor: pointer;
      font-size: 30px;
      width: 250px;
    }
     .b1 button:hover{
         background-color: aquamarine;
     }
    .b2 {
      position: relative;
    }

    .b2 img {
      width: 500px;
    }

    .price-tag {
      position: absolute;
      top: 20px;
      left: -40px;
      background: #fff;
      color: #333;
      font-weight: bold;
      font-size: 40px;
      padding: 20px;
      border-radius: 50%;
      text-align: center;
      line-height: 1.2;
    }

    .price-tag span {
      display: block;
      font-size: 14px;
      font-weight: normal;
    }
/* best seller products */
    .best {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-top: 150px ;
}

.best1 {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-bottom:40px;
}

.s1{
    display: flex;
    border: 2px solid gray;
    width:400px ;
    height: 25.5vh;
    background-color: #dedede;
    border-radius: 5%;
    box-shadow: 
        0 0 25px 5px aqua,
        0 0 50px 10px pink,
        0 0 75px 15px purple,
        0 0 100px 20px gold,
        0 0 125px 25px cyan;
    }
    


.s11 img{
    height: 25vh;
    border-radius: 100px;

}

.s12 button:hover{
    background-color: #fcbf1e;
    border-radius: 20%;
    cursor: pointer;

}
.s2{
    display: flex;
    border: 2px solid gray;
    width:400px ;
    height: 25.5vh;
    background-color: #dedede;
    border-radius: 5%;
    box-shadow: 
        0 0 25px 5px aqua,
        0 0 50px 10px pink,
        0 0 75px 15px purple,
        0 0 100px 20px gold,
        0 0 125px 25px cyan;
    }
    


.s21 img{
    height: 25vh;
    border-radius: 100px;
}
.s22 button:hover{
    background-color: #fcbf1e;
    border-radius: 20%;
    cursor: pointer;

}

.s3{
    display: flex;
    border: 2px solid gray;
    width:400px ;
    height: 25.5vh;
    background-color: #dedede;
    border-radius: 5%;
    box-shadow: 
        0 0 25px 5px aqua,
        0 0 50px 10px pink,
        0 0 75px 15px purple,
        0 0 100px 20px gold,
        0 0 125px 25px cyan;
    }
    


.s31 img{
    height: 25vh;
    border-radius: 100px;
}
.s32 button:hover{
    background-color: #fcbf1e;
    border-radius: 20%;
    cursor: pointer;

}
.s4{
    display: flex;
    border: 2px solid gray;
    width:400px ;
    height: 25.5vh;
    background-color: #dedede;
    border-radius: 5%;
    box-shadow: 
        0 0 25px 5px aqua,
        0 0 50px 10px pink,
        0 0 75px 15px purple,
        0 0 100px 20px gold,
        0 0 125px 25px cyan;
    }
    


.s41 img{
    height: 25vh;
    border-radius: 100px;
}
.s42 button:hover{
    background-color: #fcbf1e;
    border-radius: 20%;
    cursor: pointer;

}
.s5{
    display: flex;
    border: 2px solid gray;
    width:400px ;
    height: 25.5vh;
    background-color: #dedede;
    border-radius: 5%;
    box-shadow: 
        0 0 25px 5px aqua,
        0 0 50px 10px pink,
        0 0 75px 15px purple,
        0 0 100px 20px gold,
        0 0 125px 25px cyan;
    }
    


.s51 img{
    height: 25vh;
    border-radius: 100px;
}
.s52 button:hover{
    background-color: #fcbf1e;
    border-radius: 20%;
    cursor: pointer;

}
.s6{
    display: flex;
    border: 2px solid gray;
    width:400px ;
    height: 25.5vh;
    background-color: #dedede;
    border-radius: 5%;
    box-shadow: 
        0 0 25px 5px aqua,
        0 0 50px 10px pink,
        0 0 75px 15px purple,
        0 0 100px 20px gold,
        0 0 125px 25px cyan;
    }
    


.s61 img{
    height: 25vh;
    border-radius: 100px;
}
.s62 button:hover{
    background-color: #fcbf1e;
    border-radius: 20%;
    cursor: pointer;

}

.sell1{
    display: flex;
    justify-content: space-evenly;
    margin: 60px 0;
    


}

.sell2{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 200px;
}



/* group services */


    .group {
      display: flex;
      justify-content: center;
      gap: 50px;
      font-family: Arial, sans-serif;
      background-color: #fdf3f3;
      width: 90%;
      margin: auto;
      padding: 30px;
      margin-bottom: 200px;
    
    }
    .g {
      background: #f8f9fa;
      padding: 30px;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      width: 250px;
    
    }
    .g img{
      font-size: 40px;
      color: #f4b400;
      margin-bottom: 10px;
      color: aquamarine;
    }
    .g h4 {
      color: #5c7a29;
      margin: 10px 0;
      font-size: 16px;
    }
    .g p {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      margin: 0;
    }


    /* test monials */

    .testmonials{
      display: flex;
      margin-top: 100px ;
      margin-bottom: 100px;
      gap: 30px;
    }
    .Test1{
        border: 2px solid rgb(220, 212, 212);
        width: 40%;
        height: 30vh;
        padding: 20px;
        /* box-shadow: 0 100px 100vh rgb(30, 103, 162),chartreuse; */
    box-shadow: 
        0 0 25px 5px aqua,
        0 0 50px 10px pink,
        0 0 65px 15px purple,
        0 0 80px 20px gold,
        0 0 125px 25px cyan;
    }

    .m2{
      display: flex;
      justify-content: space-evenly;
  
    
      
    }

    .m21 img{
      width: 150px;
      height: 15vh;
    }
    .m23 img{
  
      height: 10vh;
    }
    .Test2{
        border: 2px solid rgb(220, 212, 212);
        width: 40%;
        height: 30vh;
        padding: 20px;
        box-shadow: 
        0 0 15px 3px aqua,
        0 0 25px 5px pink,
        0 0 15px 4px purple,
        0 0 50px 10px gold,
        0 0 65px 15px cyan;
    }
      
    
    
    .m4{
      display: flex;
      justify-content: space-evenly;
  
    
      
    }

    .m41 img{
      width: 150px;
      height: 15vh;
    }
    .m43 img{
  
      height: 10vh;
    }

    .Test3{
        border: 2px solid rgb(220, 212, 212);
        width: 40%;
        height: 30vh;
        padding: 20px;
         box-shadow: 
        0 0 15px 3px aqua,
        0 0 25px 5px pink,
        0 0 15px 4px purple,
        0 0 50px 10px gold,
        0 0 65px 15px cyan;
      
    }
    
    .m6{
      display: flex;
      justify-content: space-evenly;
  
    
      
    }

    .m61 img{
      width: 150px;
      height: 15vh;
    }
    .m63 img{
  
      height: 10vh;
   }
  
 
    /* .testmonials{
      animation-name: nani;

      animation-duration:15s;
      animation-iteration-count: infinite;
      position: relative;
      animation-timing-function: linear;
     
    }
    @keyframes nani{
      from{
        left:0px;
        height: 200px;
        /* transform: translateX(0); */

      
      /* } */
      /* to{ */
        /* left: 1500px; */
        /* transform: translateX(-50%); */
        

      /* } */
    /* } */ 


/* testmonialsssss */
.testmonialss{
      display: flex;
      margin: 100px 0;
      gap: 30px;
    }
    .Testt1{
        border: 2px solid rgb(220, 212, 212);
        width: 40%;
        height: 30vh;
        padding: 20px;
         box-shadow: 
        0 0 15px 3px aqua,
        0 0 25px 5px pink,
        0 0 15px 4px purple,
        0 0 50px 10px gold,
        0 0 65px 15px cyan;
      
    }

    .mm2{
      display: flex;
      justify-content: space-evenly;
  
    
      
    }

    .mm21 img{
      width: 150px;
      height: 15vh;
    }
    .mm23 img{
  
      height: 10vh;
    }
    .Testt2{
        border: 2px solid rgb(220, 212, 212);
        width: 40%;
        height: 30vh;
        padding: 20px;
         box-shadow: 
        0 0 15px 3px aqua,
        0 0 25px 5px pink,
        0 0 15px 4px purple,
        0 0 50px 10px gold,
        0 0 65px 15px cyan;
      
    }
    
    .mm4{
      display: flex;
      justify-content: space-evenly;
  
    
      
    }
.our{
  font-weight: bolder;
  font-size: 30px;
  text-decoration: underline gray;

}
    .mm41 img{
      width: 150px;
      height: 15vh;
    }
    .mm43 img{
  
      height: 10vh;
    }

    .Testt3{
        border: 2px solid rgb(220, 212, 212);
        width: 40%;
        height: 30vh;
        padding: 20px;
         box-shadow: 
        0 0 15px 3px aqua,
        0 0 25px 5px pink,
        0 0 15px 4px purple,
        0 0 50px 10px gold,
        0 0 65px 15px cyan;
      
    }
    
    .mm6{
      display: flex;
      justify-content: space-evenly;
  
    
      
    }

    .mm61 img{
      width: 150px;
      height: 15vh;
    }
    .mm63 img{
  
      height: 10vh;
    }

    /* .testmonialss{
      animation-name: nanii;

      animation-duration:15s;
      animation-iteration-count: infinite;
      position: relative;
    } */
    /* @keyframes nanii{
       from{
        right:0px; 
         height: 200px;
        /* transform: translateX(0); */
      
      /* } */
      /* to{ */
        /* right: 1500px; */
        /* transform: translateX(-50%); */

      /* } */
    /* }  */


    /* footer  */



    .footer{
      width: 100%;
      height: 80vh;
      border: 2px solid greenyellow;
      background-color: #425952;
    
      
    }

    .foot{
     display: flex;
     width: 100%;
     height: 20vh;
    
     margin: auto;
     justify-content: space-evenly;
     align-items: center;
    
     
    
    }

    .foot1>h1{
      
      font-size:65px;;
      font-weight: bolder;
      color: yellowgreen;

    }
    
    .foot1>p{
    
      font-size:20px;;
      font-weight: bolder;
      color:orange;

    }
    .foot2>input{
      
      width: 600px;
      height: 8vh;
      border-radius:25px;
      position: relative;
    }
    .foot2>button{
    
      position: absolute;
      right: 380px;
    
      height: 8vh;
      border-radius:25px;
      background-color: yellowgreen;
    }
    .foot2>button:hover{
      background-color: orange;
    }
    .foot3{
      display: flex;
      justify-content: space-evenly;
      height: 15vh;
      width: 200px;
      align-items: end;
    
      gap: 15px;
    }
   .foot3>a{
  
    width: 100px;
    height: 6vh;
  
   }

   .foott{
    display: flex;

    height: 45vh;
    justify-content: space-evenly;
    width: 90%;
    margin: auto;
    gap: 20px;
    text-align: center;
   }
   .foott1{
  
    width: 25%;
    height: 45vh;
    padding: 30px;

   }
   .foott1>h2{
    color:rgb(194, 200, 205);
   }
     .foott2{
  
    width: 15%;
    height: 45vh;
    padding: 40px;
    text-align: center;
    }
    .foott2 a{

    
    text-decoration: none;
    color: #dedede;

   }
   .foott2>h2{
    color:rgb(194, 200, 205);
   }

    
     .foott3{
  
    width: 15%;
    height: 45vh;
    padding: 40px;
    text-align: center;
     }
      

     .foott3 a{

    
    text-decoration: none;
    color: #dedede;

   }
   .foott1 p{
    color: #dedede;
   }
   .foott4 p{
    color: #dedede;
   }
   .foott3>h2{
    color:rgb(194, 200, 205);
   }

   .foott4{
    
    width: 25%;
    height: 45vh;
    padding: 40px;
    text-align: center;

   }
   .foott4>h2{
    color:rgb(194, 200, 205);
   }
   .foott4 img{
    width: 100px;
    height: 10vh;
   }

   .footername{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: auto;
    
    padding: 30px;
    height:5vh;
    color: aliceblue ;
     }
     .foot2:hover{
      box-shadow: 
        0 0 25px 5px violet,
        0 0 50px 10px blue,
        0 0 75px 15px red,
        0 0 100px 20px black,
        0 0 125px 25px white;
     }
     .foot3 a:hover {
box-shadow: 
        0 0 25px 5px aqua,
        0 0 50px 10px pink,
        0 0 75px 15px purple,
        0 0 100px 20px gold,
        0 0 125px 25px cyan;
    }
     
    .d-flex a:hover{
      box-shadow: 
        0 0 25px 5px aqua,p
        0 0 50px 10px pink,
        0 0 75px 15px purple,
        0 0 100px 20px gold,
        0 0 125px 25px cyan;
    }
    


    /* scroll bar */

    .scroll{
      font-family: Arial, sans-serif;
      background: #f7f7f7;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60vh;
      margin-bottom: 100px;
  
    }
    .slider:hover{
      transform: scale(1.1);
      background-color:#8accda;
      box-shadow: #8accda;

    }

    .slider {
      margin: 0 auto;
      display: grid;
      grid-auto-flow: column;
      gap: 1rem;
      height: calc(380px + 2rem);
      padding: 1rem;
      max-width: 320px;
      background-color: #333;
    
      

      /* Only horizontal scroll */
      overflow-x: auto;
      overflow-y: hidden;

      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;

      /* Smooth scroll */
      scroll-behavior: smooth;

      border-radius: 1rem;
      background: #fff;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

    .slider > a {
      scroll-snap-align: center;
      display: inline-block;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .slider img {
      height: 130px;
      width: 180px;
      max-width: none;
      object-fit: cover;
      border-radius: 1rem;
      display: block;

      /* Base box shadow */
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Hover animation */
    .slider > a:hover img {
      transform: scale(1.08);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
    }

    /* Different box shadows per child */
    .slider > a:nth-child(1) img {
      box-shadow: 0 6px 14px rgba(255, 0, 100, 0.3);
    }
    .slider > a:nth-child(2) img {
      box-shadow: 0 6px 14px rgba(0, 150, 255, 0.3);
    }
    .slider > a:nth-child(3) img {
      box-shadow: 0 6px 14px rgba(0, 200, 100, 0.3);
    }
    .slider > a:nth-child(4) img {
      box-shadow: 0 6px 14px rgba(255, 180, 0, 0.3);
    }
    .slider > a:nth-child(5) img {
      box-shadow: 0 6px 14px rgba(150, 0, 255, 0.3);
    }

  .veg{
    text-align: center;
  }
  .veg>img{
    width:280px;
    height: 28vh;
  }
  .vegbody>h5{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #00f431;
    font-size: xx-large;
  }

  
  /* recent reviews */
  .reviews-section {
      background: #fff;
      padding: 40px 0;
      overflow: hidden;
      position: relative;
       font-family: Arial, sans-serif;

    }

    .reviews-track {
      display: flex;
      width: max-content;
      animation: scrollLeft 30s linear infinite;
    }

    .review-card {
      flex: 0 0 300px;
      background: #fafafa;
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin: 0 10px;
      text-align: center;
      transition: transform 0.3s ease;
    }

    .review-card:hover {
      transform: translateY(-10px);
    }

    .review-img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-bottom: 10px;
      object-fit: cover;
    }

    .review-name {
      font-weight: bold;
      font-size: 16px;
      margin: 5px 0;
    }

    .review-message {
      font-size: 14px;
      color: #555;
      margin: 10px 0;
    }

    .stars {
      color: #FFD700;
      font-size: 16px;
      margin-bottom: 8px;
    }

    @keyframes scrollLeft {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    .reviews-section{
      margin-bottom: 100px;
    }
  /* body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #f0f5f0; /* light background */
      /* overflow: hidden;
    }

    h1 {
      font-size: 4rem;
      font-family: 'Arial', sans-serif;
      color: #2e8b57;
      opacity: 0;
      transform: scale(0.5);
      animation: nani 2s ease forwards;
    }

    @keyframes nani{
      0% {
        opacity: 0;
        transform: scale(0.5);
      }
      50% {
        opacity: 1;
        transform: scale(1.1);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    } */
    .card {
      box-shadow: 2px 2px 20px rebeccapurple;
    }


.th{
  background-image: url(../images/bg-img\ mq.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
margin-top: 100px;
margin-bottom: 70px;

}
/*Yellow*/
#ad{
  margin-top: 100px;
}
.ad{
  background-color: #fcbf1e;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  height: 80vh;
}
.ad-r,.ad-l{
  height: 60vh;
}
.ad-l{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40%;
  margin-top: 60px;
}
.ad-l h2{
  color: white;
  font-size: 65px;
  font-weight: bold;
  box-shadow: 0 0 10px #ff3c3c,
            0 0 20px #ff9933,
            0 0 30px #ffff33,
            0 0 40px #33ff77,
            0 0 50px #3399ff,
            0 0 60px #9933ff;
            background-color: rgb(164, 73, 213);
}
.ad-l h2 span{
  color: rgb(31, 31, 31);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 60px;
  font-weight: lighter;
}
.ad-l button{
  border: 2px white solid;
  padding: 10px 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  background-color:  #fcbf1e;
  border-radius: 20px;
}
.ad-l button:hover{
  cursor: pointer;
  background-color: rgb(81, 229, 81);
}
.ad-r{
    position: relative;
}
.ad-r img{
  width: 100%;
}
.ad-r p{
  border-radius: 50%;
  background-color: white;
  font-size: 20px;
  height: 25vh;
  width: 30%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
}
.ad-r p span{
  font-size: 30px;
}
.price-tagg{
      position: absolute;
      top: 20px;
      left: -40px;
      background: #fff;
      color: #333;
      font-weight: bold;
      font-size: 40px;
      padding: 20px;
      border-radius: 50%;
      text-align: center;
      line-height: 1.2;
}
.price-tagg:hover{
  cursor: pointer;
  background-color: rgb(77, 231, 77);
}