* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root{
  --green-dark:#273A00;
  --green-light:#96DC02;
  --text-light:#FFFFFF;
}
@font-face{
  src: url("./fonts/Inter_18pt-Light.ttf");
  font-weight: 100;
  font-style: normal;
  font-family: Inter-regular;
}
@font-face{
  src: url("./fonts/Inter_24pt-Regular.ttf");
  font-weight: 400;
  font-style: normal;
  font-family: Inter-semiregular;
}
@font-face{
  src: url("./fonts/Inter_24pt-SemiBold.ttf");
  font-weight:800;
  font-style: normal;
  font-family: Inter-semibold;
}
@font-face{
  src: url("./fonts/Inter_28pt-Bold.ttf");
  font-weight:bold;
  font-style: normal;
  font-family: Inter-bold;
}
body{
  font-family: Inter, sans-serif;
}
.main-container{
  max-width: 1360px;
  margin: auto;
}
/* bandeau vert */
.top-div{
  height: 50px;
  width: 100%;
  background-color: var(--green-dark);
  color: var(--text-light);
  position: relative;
  overflow: hidden;     
  padding-left: 10px;  
  padding-right: 10px; 
}

.top-div-car{
  transform: rotateY(180deg);
  animation: 1s ease infinite scale;
  display: inline-block;
}
.top-rotator p span {
    margin: 0 6px;
    position: relative;
    top: -2px;
}
/* SECTION HEADER */
.section1{
  margin: 0px 80px 40px;
}

.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* pas de height fixe -> laisse le contenu décider */
  padding: 16px 0px;
}

/* NAVBAR */
.navbar{
  display: flex;
  align-items: center;
  height: 70px;
  gap: 32px;
}

/* enlève les marges/paddings par défaut du ul */
.navbar ul{
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.link{
  cursor: pointer;
  font-size: 17px;
}

/* zone de recherche style “pilule” */
.search-box{
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 999px;
  background-color: #f4f4f4;
}

.search-box input{
  border: none;
  outline: none;
  background: transparent;
  min-width: 290px;
  max-width: 490px;
  font-size: 16px;
}

.search-box img{
  margin-left: 8px;
  height: 20px;
}
.product1{
  cursor: pointer;
}
.shop-div{
  background-color: #F1F1F1;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 60px;
  cursor: pointer;
  width: 60px;
  border-radius: 50%;
}

/* icône panier */
.cart-icon{
  width: 25px;
  height: 25px;
}

/* bouton LOGIN vert */
.login-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 17.5px 60px;
  border-radius: 999px;
  border: none;
  background-color: var(--green-light);
  font-weight: 600;
  cursor: pointer;
  font-family: Inter-semibold;
  font-size: 17px;
}
/* Slider vertical des phrases dans le bandeau */
.top-rotator{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  animation: slideText 12s infinite;
}

.top-rotator p{
  height: 50px;                      /* même hauteur que .top-div */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.top-div-car2{
  transform: rotateY(180deg);
  animation: 1s ease infinite scale;
}
.top-div-car3{
  animation: 1s ease infinite scale;
}
@keyframes scale{
  0%{
    scale: 1;
  }
  100%{
    scale: 1.2;
  }
}
/* Animation des 3 phrases */
@keyframes slideText{
  /* Phrase 1 visible */
  0%, 20%{
    transform: translateY(0);        /* 1ère phrase */
  }

  /* transition vers phrase 2 */
  20%, 33%{
    transform: translateY(-50px);    /* 2ème phrase */
  }

  /* Phrase 2 visible */
  33%, 53%{
    transform: translateY(-50px);
  }

  /* transition vers phrase 3 */
  53%, 66%{
    transform: translateY(-100px);   /* 3ème phrase */
  }

  /* Phrase 3 visible */
  66%, 86%{
    transform: translateY(-100px);
  }

  /* retour à la phrase 1 */
  86%, 100%{
    transform: translateY(0);
  }
}

/* .hero-top{
   background: linear-gradient(94.23deg, #A9D053 3.37%, #EBF0E1 60.11%, #D4EE9D 97.76%);
   height: 400px;
   border-radius: 40px;
   align-items: center;
   align-content: center;
   display: flex;
   overflow: hidden;
   position: relative;
   text-align: start;
} */
.hero-top {
    background-image: url('./assets/homepage/banner-img-desktop.webp');
    border-radius: 40px;
    align-items: center;
    align-content: center;
    display: flex;
    overflow: hidden;
    position: relative;
    text-align: start;
    background-position: center;
    background-size: 100% 100%;
    padding: 55px 20px 60px;
} 
.hero-top-content{
  padding-left : 40px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.hero-top-content-h1 {
    font-family: 'Inter-bold';
    font-size: 50px;
}
.hero-top-content-h3 {
    font-family: Inter-regular;
    font-style: italic;
    font-size: 26px;
    margin: 6px 0 30px;
}
.order {
    background-color: #000000;
    color: #96DC02;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    outline: none;
    border: none;
    cursor: pointer;
    width: 240px;
    height: 60px;
    font-family: Inter-regular;
    border-radius: 100vh;
    font-size: 20px;
    font-weight: 800;
}

.righthomepage{
  position: absolute;
  right: 0;
  width: 100%;
}
.lefthomepage1 {
    position: absolute;
    top: 0;
    left: 0;
    height: 116px;
    width: 111px;
}
.lefthomepage2{
  position: absolute;
  bottom: -10px;
  left: -10px;
  transform: scaleX(-1)
}
.righthomepagecopy1 {
    position: absolute;
    height: 150px;
    width: 150px;
    right: 25%;
    bottom: -22px;
    z-index: 1;
}
.righthomepagecopy2 {
    position: absolute;
    height: 37px;
    width: 57px;
    right: 21px;
    top: 12px;
}

.hero-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0px 50px;
    gap: 20px;
    max-width: 84%;
    margin-inline: auto;
}
.hero-bottom div{
  border-radius: 20px;
  padding: 10px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  text-align: center;
  flex-basis: 20%;
}
.hero-bottom div:nth-child(1){
  border: 1px solid #CACACA;
}
.hero-bottom div:hover{
  transform: scale(1.1);
  transition:transform 1s ease;

}
.hero-bottom div.active h3{
  color: #000;
  font-family: Inter-semibold;
}
.hero-bottom div h3 {
    text-align: center;
    font-family: Inter-regular;
    font-size: 16px;
    color: #9B9B9B;
}


/*Product section*/


.product{
  margin: 40px 0px;
}
.all-time-best h2{
  font-size: 40px;
  margin-bottom: 10px;
}
.all-time-best h3{
  font-size: 18px;
}


/* Product section - Style Bureau (Desktop) */
.product-div {
  display: grid;
  /* Force toujours 4 colonnes égales */
  grid-template-columns: repeat(4, 1fr); 
  gap: 20px; /* Espace fixe et propre entre les produits */
margin: 40px 0px 20px;
  justify-items: center;
}
.productall {
  position: relative;
  overflow: hidden;
  /* CHANGEMENT ICI : */
  width: 100%;           /* Prend toute la place disponible dans la colonne */
  max-width: 300px;      /* Ne dépasse pas 300px (pour les très grands écrans) */
  background: white;     /* Optionnel : assure un fond propre */
  
  /* Centrer le contenu si la carte rétrécit */
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

/* IMPORTANT : Rendre l'image du produit responsive */
.productall > img:first-child {
  width: 100%;       /* L'image prend toute la largeur de la carte */
  height: auto;      /* Hauteur auto pour garder les proportions */
  aspect-ratio: 1/1; /* Force un ratio carré pour que tout soit aligné */
  object-fit: contain;
}
.productall .love{
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.productall .off{
  position: absolute;
  top: 0px;
  left: 0px;
}
.product-title{
    font-family: Inter-Bold;
    font-size: 18px;
}
.product-review{
  font-size: 15px;
  display: inline;
  font-family: Inter-regular;
}
.price-line{
  margin-left: 5px;
  text-decoration:line-through;
  color: #9B9B9B;
  font-family: Inter-Regular;
  font-size: 18px;
}
.price-line1{
  font-size: 24px;
  font-family: Inter-bold;
}
.rating {
    margin: 4px 0;
}
.ordertoday{
  height: 40px;
  margin-top: 16px;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: #96DC02;
  color: black;
  border-radius: 20px;
  outline: none;
  font-family: Inter-bold;
  font-size: 16px;
  cursor: pointer;
  border: none;
}

.bottom-of-product{
    background-color: #F6FFE4;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: center;
    text-align: center;
    padding: 50px 40px;
    border-radius: 20px;
}
.bottom-of-product > div{
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-basis: 20%; 
}
.bottom-of-product-div-h2{
   font-size: 20px;
   margin-top: 10px;
   font-family: Inter-regular;
}
.bottom-of-product div div{
  background-color: #C4EA75;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 120px;
  width:  120px;
}
.bottom-of-product div div img{
  height: 50px;
  width: 50px;
}



.end-home{
  margin: 44px 0;
  text-align: center;
  min-height: 600px;
 
}

.end-home h2{
  font-family: Inter-bold;
  font-size: 40px;
  margin-bottom: 36px;
}

.end-home-video{
  display: flex;
  gap: 20px;
  margin: 20px 0px;
  justify-content: center;
}

.video-card{
  width: 352px;
  height: 350px;
  max-width: 100%;

}

.video-wrapper{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 548px;
}

.video-wrapper video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-controls-overlay{
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
}

.video-controls-overlay img{
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.bottom {
    width: 100%;
    margin-top: 26px;
}
.bottom-background{
  background: url("./assets/homepage/background/backgroun.png");
  background-position: center;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: end;
  height: 450px;
  width: 100%;
}
.bottom-background-1 img {
  width: 100%;
}
.bottom-background img:nth-child(4){
  position: absolute;
  left: 150px;
  top: 0;
}
.bottom-background img:nth-child(6){
  position: absolute;
  left: 300px;
  top: 0;
}
.bottom-background img:nth-child(5){
  position: absolute;
  left: 540px;
  top: 0;
}
.bottom-background img:nth-child(7){
  position: absolute;
  left: 670px;
  top: 0;
}
.bottom-background img:nth-child(8){
  position: absolute;
  left: 960px;
  top: 0;
}
.bottom-background img:nth-child(9){
  position: absolute;
  left: 1090px;
  top: 0;
}


/* .bottom-green{
   background: linear-gradient(94.23deg, #A9D053 3.37%, #EBF0E1 60.11%, #D4EE9D 97.76%); 
   height: 300px;
   width: 100%;
   position: relative;
   align-items: center;
   overflow: hidden;
   justify-content: center;
   display: flex;
   z-index: 10;
   flex-direction: column;
   text-align: center;
   border-radius: 20px;
} */
.bottom-green {
    background-image: url('./assets/homepage/taste-the-essence-desktop.webp');
    position: relative;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    display: flex;
    z-index: 10;
    flex-direction: column;
    text-align: center;
    border-radius: 40px;
    background-size: 100% 100%;
    background-position: center;
    padding: 40px 0;
}
.bottom-green-h2{
  font-family: Inter-bold;
  font-size: 46px;
}
.bottom-green-h3{
  font-family: Inter-regular;
  font-style: italic;
    font-size: 22px;
    margin-bottom: 14px;
}
.bottom-green-button{
  text-align: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  outline: none;
  display: flex;
  width: 230px;
  font-family: Inter-bold;
  z-index: 11;
  font-size: 18px;
  height: 56px;
  border-radius: 100vh;
  color:#96DC02;
  background-color: black;
}
.bottom-green-img1{
  position: absolute;
  left: 0;
}
.bottom-green-img2{
  position: absolute;
  right: 0;
}.bottom-green-img3{
  position: absolute;
  left:0;
  bottom: 0;
}
.bottom-green-img4{
  position: absolute;
  left:-40px;
  top: 0;
  rotate: 180deg;
}
.bottom-green-img5{
  position: absolute;
  bottom: -50px;
  left: 300px;
  height: 180px;
  width: auto;
  transform: scaleX(-1);
  z-index: 1;
}

.bottom-green-img6{
  position: absolute;
  right: 0;
  height: 30px;
  width: 30px;
  top: 0;
}

.bottom-green-img7{
  position: absolute;
  right: 20px;
  height: 50px;
  width: 50px;
   bottom: 40px;
}

/*Footer*/
footer {
  background-color: black;
  width: 100%;
  align-content: center;
  padding-left: 10px;
  padding-right: 10px;
}
.footer-div{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  color: white;
  gap: 20px;
  font-family: Inter-regular;
  justify-items: end;
  padding: 60px 0px 20px;
}
.footer-div div:nth-child(1) h2{
     font-weight: 600;
     font-size: 22px;
     margin-top: 10px;
}
.footer-div div:nth-child(1) p {
    color: #AFAFAF;
    font-size: 16px;
    cursor: pointer;
    padding-right: 21px;
}
.footer-div2 ul li{
  list-style: none;
  text-decoration: none;
  margin-top: 17px;
  color: #AFAFAF;
  cursor: pointer;
}
.footer-div3 ul li a{
  text-decoration: none;
  color:#AFAFAF ;
}
.footer-div3 ul li{
  text-decoration: none;
  margin-top: 17px;
  cursor: pointer;
  list-style: none;
  list-style: none;
  color: #AFAFAF;
}
.qr-img{
  margin-top: 30px;
}
.footer-copyright{
  height: 100px;
  color: #AFAFAF;
  display: flex;
  /* margin: 0px 80px; */
  justify-content: space-between;
  align-items: center;
}
.footer-copyright h2{
  font-family: Inter-regular;
  font-weight: 400;
  font-size: 17px;
}
/* Version Desktop Normale */
.bottom-background {
  background: url("./assets/homepage/background/backgroun.png");
  background-position: center; /* L'image de fond reste centrée */
  background-size: cover;      /* S'adapte à la taille */
  border-radius: 20px;
  position: relative;
  display: flex;
  align-items: flex-end;       /* "end" n'existe pas, c'est "flex-end" */
  height: 450px;
  width: 100%;
  
  /* IMPORTANT POUR LE SCROLL */
  overflow-x: auto;            /* Permet le scroll horizontal si ça dépasse */
  overflow-y: hidden;          /* Cache le dépassement vertical */
  white-space: nowrap;         /* Empêche les éléments de passer à la ligne */
  
  /* Pour cacher la barre de défilement tout en pouvant scroller */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
}

/* Cache la barre de scroll sur Chrome/Safari */
.bottom-background::-webkit-scrollbar {
  display: none;
}

/* Conteneur interne virtuel pour garder les images en place */
.bottom-background-inner {
    position: relative;
    width: 100%;
    min-width: 1200px; /* FORCE la largeur minimale du contenu */
    height: 100%;
}
/* ============================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ============================================ */
/* Tablettes Large (≤1200px) */
@media screen and (max-width: 1200px) {
  .section1 {
    margin: 10px 40px;
  }

  .righthomepage {
    right: 50px;
    width: 1000px;
  }


  .footer-div,

  .footer-copyright {
    margin: 0px 40px;
  }

  
  .bottom-green-img1,.bottom-green-img2,.bottom-green-img3,.bottom-green-img5{
    opacity: 0.5;
  }
}

/* Tablettes (≤992px) */
@media screen and (max-width: 992px) {
  .section1 {
    margin: 10px 30px;
  }

  .hero-top-content {
    margin: 0px 40px;
  }

  .navbar {
    gap: 20px;
  }

  .search-box input {
    min-width: 200px;
  }

  .login-btn {
    padding: 10px 30px;
  }

  .righthomepage {
    right: 20px;
    width: 800px;
    height: 250px;
  }

  .righthomepagecopy1 {
    right: 280px;
    height: 120px;
    width: 120px;
  }

  .product-div {
    grid-template-columns: repeat(2, 1fr);
  }

  .productall {
    width: 100%;
    max-width: 300px;
  }

  .hero-bottom {
    margin: 20px 20px;
    gap: 15px;
  }

  .hero-bottom div {
    padding: 8px 15px;
  }

  .hero-bottom div img {
    height: 50px;
    width: 50px;
  }

  .hero-bottom div h3 {
    font-size: 14px;
  }


    .bottom-of-product {
    display: flex;
    flex-wrap: wrap !important; /* IMPORTANT: Empêche de passer à la ligne */
    overflow-x: auto;             /* Active le scroll horizontal */
    justify-content: center;  /* Aligne au début pour scroller */
    gap: 20px;
    padding: 30px 20px;
    
    /* Fluidité du scroll tactile */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; /* Arrêt propre sur les éléments */
    
    /* Cacher la barre de défilement */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  /* Cacher scrollbar Chrome/Safari */
  .bottom-of-product::-webkit-scrollbar {
    display: none;
  }

  /* Les éléments à l'intérieur (les div avec icones) */
  .bottom-of-product > div {
    width: 160px;          /* Largeur fixe pour chaque icône sur mobile */
    min-width: 160px;      /* Sécurité */
    scroll-snap-align: center; /* Centre l'élément au scroll */
    flex-basis: 30%;
  }
  
  .end-home{
    min-height: 1000px;
  }
  .end-home-video {
    flex-wrap: wrap;
    min-height: 1100px;
  }

  .video-card {
    width: 300px;
  }

  .footer-div,
  .footer-payment,
  .footer-copyright {
    margin: 0px 30px;
  }

  .footer-div {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }



  .bottom-background {
    height: 350px; /* Hauteur réduite */
    background-size: cover;
  }
  /* On cache les petites images décoratives en trop pour éviter le désordre */
  .bottom-background img:nth-child(1),
  .bottom-background img:nth-child(2),
  .bottom-background img:nth-child(3) {
    height: 300px;
    width: auto;
  }

  /* 2. Ajustement de la bannière Verte (Bas) */
  .bottom-green {
    height: 300px;
    padding: 0 20px;
    overflow: hidden; /* Coupe ce qui dépasse */
  }

  /* Image Gauche (Théière) */
  .bottom-green-img1 {
    height: 200px; /* Plus petit */
    left: -20px;   /* Collé au bord */
    bottom: 0;
  }

  /* Image Droite (Pot) */
  .bottom-green-img2 {
    height: 220px;
    right: -20px;
    bottom: 0;
    top: auto; /* Annule le top si défini avant */
  }

  /* Image Milieu-Bas (Feuille/Poudre) */
  .bottom-green-img5 {
    height: 120px;
    left: 50%; /* Centré */
    transform: translateX(-50%) scaleX(-1); /* Centrage précis + Inversion miroir */
    bottom: -20px;
    z-index: 1;
  }

  /* Autres décorations */
  .bottom-green-img3 { height: 80px; left: 0; bottom: 0; }
  .bottom-green-img4 { height: 60px; left: 0; top: 10px; }
  
  /* Cacher les toutes petites icônes flottantes sur tablette */
  .bottom-green-img6, .bottom-green-img7 {
    display: none;
  }
}

/* Tablettes Small / Mobile Large (≤768px) */
@media screen and (max-width: 768px) {
  .section1 {
    margin: 10px 20px;
  }

  /* Header avec menu hamburger */
  .header {
    flex-wrap: wrap;
    gap: 15px;
  }

  .navbar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 30px 30px;
    gap: 0;
    z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  }

  .navbar.active {
    left: 0;
  }

  .navbar ul {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .navbar ul li {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  /* Hamburger Menu Button */
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
    order: 1;
  }

  .hamburger span {
    width: 25px;
    height: 3px;
    background-color: #000;
    transition: all 0.3s ease;
  }

  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

  /* Overlay pour fermer le menu */
  .menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }


  .search-box {
    order: 3;
    width: 100%;
    margin-top: 10px;
  }

  .search-box input {
    width: 100%;
    min-width: auto;
  }

  .shop-div {
    order: 2;
  }

  .login-btn {
    order: 4;
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
  }

  /* Hero Section */


  .hero-top-content {
    margin: 0px 30px;
    z-index: 10;
  }

  .hero-top-content-h1 {
    font-size: 28px;
  }

  .hero-top-content-h3 {
    font-size: 16px;
  }

  .righthomepage {
    right: 0;
    width: 600px;
    height: 200px;
    opacity: 0.7;
  }

  .lefthomepage1 {
    height: 100px;
    width: 90px;
    left: -30px;
  }

  .lefthomepage2 {
    height: 80px;
    width: 80px;
  }

  .righthomepagecopy1 {
    right: 180px;
    height: 100px;
    width: 100px;
  }

  .righthomepagecopy2 {
    right: -20px;
    height: 60px;
    width: 70px;
  }

  /* Hero Bottom */
  .hero-bottom {
    margin: 20px 0px;
    gap: 10px;
    justify-content: flex-start;
  }
  

  .hero-bottom div {
    min-width: 100px;
  }

  /* Products */
  .product-div {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 20px;
  }

  .productall {
    width: 100%;
    margin: 0 auto;
  }

  /* Bottom of Product */
  .bottom-of-product {
    height: auto;
    padding: 30px 20px;
    gap: 30px;
  }


  /* End Home Videos */
  .end-home-video {
    flex-direction: column;
    align-items: center;
    min-height: 1800px;
  }

  .video-card {
    width: 100%;
    max-width: 400px;
  }
   .end-home{
    min-height: 2500px;
   }
  /* Bottom Background */
  .bottom-background {
    height: 350px;
  }

  .bottom-background img:nth-child(4),
  .bottom-background img:nth-child(5) {
    display: none;
  }

  /* Bottom Green */
  .bottom-green {
    height: auto;
    padding: 50px 20px;
  }

  .bottom-green-h1 {
    font-size: 24px;
  }

  .bottom-green-img5 {
    left: 150px;
    height: 140px;
  }

  /* Footer */
  .footer-div,
  .footer-payment,
  .footer-copyright {
    margin: 0px 20px;
  }

  .footer-div {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer-payment {
    flex-direction: column;
    height: auto;
    padding: 20px;
    gap: 20px;
  }

  .footer-payment-img {
    margin: 0;
    flex-wrap: wrap;
  }

  .footer-copyright {
    flex-direction: column;
    gap: 15px;
    height: auto;
    padding: 20px 0;
    text-align: center;
  }
}

/* Mobile Medium (≤576px) */
@media screen and (max-width: 576px) {
  .section1 {
    margin: 10px 15px;
  }

  .top-div {
    height: 40px;
  }

  .top-rotator p {
    height: 40px;
    font-size: 14px;
  }

  @keyframes slideText {
    0%, 20% {
      transform: translateY(0);
    }
    20%, 33% {
      transform: translateY(-50px);
    }
    33%, 53% {
      transform: translateY(-50px);
    }
    53%, 66% {
      transform: translateY(-100px);
    }
    66%, 86% {
      transform: translateY(-100px);
    }
    86%, 100% {
      transform: translateY(0);
    }
  }

  .header img {
    max-width: 120px;
  }

  .shop-div {
    width: 40px;
    height: 40px;
  }

  .cart-icon {
    width: 20px;
    height: 20px;
  }


  .hero-top-content {
    margin: 0px 20px;
  }

  .hero-top-content-h1 {
    font-size: 24px;
  }

  .hero-top-content-h3 {
    font-size: 14px;
  }

  .order {
    width: 140px;
    height: 40px;
    font-size: 16px;
  }

  .righthomepage {
    width: 400px;
    height: 150px;
  }

  .lefthomepage1 {
    height: 80px;
    width: 70px;
  }

  .righthomepagecopy1 {
    right: 100px;
    height: 80px;
    width: 80px;
  }

  .hero-bottom div {
    flex: 1 1 100%;
  }

  .hero-bottom div img {
    height: 40px;
    width: 40px;
  }

  .product-title {
    font-size: 16px;
  }

  .price-line1 {
    font-size: 20px;
  }

  .bottom-of-product div div {
    width: 100px;
  }

  .bottom-of-product div div img {
    height: 40px;
    width: 40px;
  }

  .bottom-of-product-div-h2 {
    font-size: 18px;
  }

  .end-home h1 {
    font-size: 24px;
  }

  .video-wrapper {
    height: 400px;
  }

  .bottom-background {
    height: 300px;
  }

  .bottom-green {
    padding: 30px 15px;
  }

  .bottom-green-h1 {
    font-size: 20px;
  }

  .bottom-green-h3 {
    font-size: 14px;
  }

  .bottom-green-img1,
  .bottom-green-img2,
  .bottom-green-img3,
  .bottom-green-img4 {
    height: 80px;
    width: auto;
  }

  .bottom-green-img5 {
    left: 50px;
    height: 120px;
  }

  .footer-div,
  .footer-payment,
  .footer-copyright {
    margin: 0px 15px;
  }

  .footer-div div:nth-child(1) h1 {
    font-size: 20px;
  }

  .footer-payment-img {
    gap: 10px;
  }

  .footer-payment-img img {
    width: 50px;
    height: auto;
  }

  .footer-copyright h1 {
    font-size: 14px;
  }
  
}

/* Mobile Small (≤480px) */
@media screen and (max-width: 480px) {
  .navbar {
    width: 100%;
    padding: 70px 20px 30px;
  }

  .hero-top-content-h1 {
    font-size: 20px;
  }

  .hero-top-content-h3 {
    font-size: 13px;
  }

  .righthomepage {
    width: 300px;
    height: 120px;
  }

  .righthomepagecopy1 {
    right: 50px;
    height: 60px;
    width: 60px;
  }

  .bottom-of-product {
    padding: 20px 15px;
  }



  .bottom-of-product-div-h2 {
    font-size: 16px;
  }

  .video-wrapper {
    height: 400px;
  }

  .bottom-green-img5 {
    left: 20px;
    height: 100px;
  }
}

/* Mobile Extra Small (≤375px) */
@media screen and (max-width: 375px) {
  .hero-top-content-h1 {
    font-size: 18px;
  }

  .order {
    width: 120px;
    height: 38px;
    font-size: 14px;
  }

  .righthomepage {
    width: 250px;
    height: 100px;
  }

  .hero-bottom div {
    padding: 8px 10px;
  }

  .hero-bottom div h3 {
    font-size: 12px;
  }

  .bottom-of-product-div-h2 {
    font-size: 14px;
  }

  .end-home h1 {
    font-size: 20px;
  }

  .bottom-green-h1 {
    font-size: 18px;
  }

  .bottom-green-button {
    width: 130px;
    height: 40px;
    font-size: 14px;
  }
}


/* Conteneur principal noir/vert foncé */
.footer-payment {
  background-color: #1A2209;
  border-radius: 20px;
  /* margin: 0px 80px; */
  padding: 15px 30px; /* Ajout de padding interne */
  display: flex;
  justify-content: space-between; /* Ecarte gauche et droite au max */
  align-items: center; /* Centre verticalement */
  min-height: 80px; /* Hauteur ajustée */
}

/* Titres (We Accept / Available on) */
.payment-title {
  font-family: Inter-regular;
  font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 8px; /* Espace sous le titre */
  font-weight: 400;
}

/* Conteneur des icônes (flexbox) */
.payment-icons {
  display: flex;
  gap: 10px; /* Espace EXACT entre chaque image */
  align-items: center;
  flex-wrap: wrap; /* Permet de passer à la ligne sur petit écran */
}
/* Conteneur des icônes (flexbox) */
.payment-icons1 {
  display: flex;
  gap: 10px; /* Espace EXACT entre chaque image */
  align-items: center;
  flex-wrap: wrap; /* Permet de passer à la ligne sur petit écran */
}
.payment-icons1 img {
  height: 32px; /* Force la même hauteur pour tous */
  width:75px;  /* La largeur s'adapte pour ne pas déformer le logo */
  background-color: white;
  border-radius: 4px;
  padding: 2px 4px; /* Petit espace blanc autour du logo */
  object-fit: contain;
}
/* Style des images (Cartes blanches) */
.payment-icons img {
  height: 32px; /* Force la même hauteur pour tous */
  width:55px;  /* La largeur s'adapte pour ne pas déformer le logo */
  background-color: white;
  border-radius: 4px;
  padding: 2px 4px; /* Petit espace blanc autour du logo */
  object-fit: contain;
}

/* Alignement spécifique pour la droite */
.payment-right {
  text-align: right; /* Aligne le titre à droite */
}

.payment-right .payment-icons {
  justify-content: flex-end; /* Aligne les icônes à droite */
}

/* --- RESPONSIVE --- */
/* A ajouter ou modifier dans vos media queries existantes */

@media (max-width: 1024px) {
  .footer-payment {
    gap: 20px;
    margin: 0 40px;
    text-align: center;
  }
  

  
  .payment-right .payment-icons {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .footer-payment {
    margin: 0 15px;
    padding: 20px;
  }
  
  .payment-icons {
    justify-content: center;
    gap: 8px;
  }
}
/* --- RESPONSIVE (TABLETTE & MOBILE) : SCROLL HORIZONTAL --- */
@media screen and (max-width: 1024px) {
  .product-div {
    display: flex;              /* On passe de Grid à Flex pour aligner */
    grid-template-columns: none; /* Annule la grille */
    overflow-x: auto;           /* Active le défilement horizontal */
    
    /* Pour un défilement fluide au doigt */
    -webkit-overflow-scrolling: touch; 
    scroll-snap-type: x mandatory; /* Arrêt magnétique sur les produits */
    
    padding-bottom: 20px;       /* Espace pour le scroll */
    justify-items: unset;       /* Annule le centrage de grille */
    
    /* Cacher la barre de défilement (Scrollbar) */
    scrollbar-width: none;      
    -ms-overflow-style: none;   
  }

  .product-div::-webkit-scrollbar {
    display: none;
  }

  .productall {
    flex: 0 0 auto;             /* Empêche le produit de rétrécir */
    width: 280px;               /* Largeur fixe pour chaque carte sur mobile */
    scroll-snap-align: center;  /* Centre le produit quand on arrête de scroller */
    margin-right: 10px;         /* Petit espace supplémentaire */
  }
  /* .bottom-of-product {
    display: flex !important;
    flex-wrap: nowrap !important;  
    overflow-x: auto !important;    
    justify-content: flex-start !important;
    align-items: flex-start !important; 
    gap: 20px;
    padding: 30px 20px;
    height: auto !important;         
    
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  } */

  .bottom-of-product::-webkit-scrollbar {
    display: none;
  }

  /* Les éléments (div) à l'intérieur */
  /* .bottom-of-product > div {
    flex: 0 0 auto !important;         
    width: 150px !important;        
    min-width: 150px !important;
    scroll-snap-align: center;
    margin: 0 !important;
  } */
  .end-home, .end-home-video {
    min-height: auto !important; 
    height: auto !important;
  }

  .end-home-video {
    display: flex !important;
    flex-direction: row !important;    
    flex-wrap: nowrap !important;      
    overflow-x: auto !important;       
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 20px;
    padding: 20px 0 40px 0; 
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .end-home-video::-webkit-scrollbar {
    display: none;
  }
  /* .video-card {
    flex: 0 0 auto !important;      
    width: 280px !important;    
    max-width: 280px !important;
    margin: 0 !important;       
    scroll-snap-align: center;
  } */

  /* Ajustement de la hauteur du wrapper vidéo pour mobile */
  /* .video-wrapper {
    height: 400px !important; 
    width: 100%;
  } */
  
  .video-wrapper video {
    object-fit: cover;
    border-radius: 20px;
  }
}


.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fond noir semi-transparent */
    z-index: 10000; /* Au-dessus de tout (même du panier) */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.login-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* La boite blanche centrale */
.login-modal {
    background-color: white;
    width: 850px;
    height: 440px;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Bouton fermer (X) */
.close-login {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #000;
    z-index: 10;
    font-weight: bold;
}

/* --- Partie Gauche (Image) --- */
.login-left {
    flex: 1; /* Prend 50% */
    background-color: #f0f0f0;
}

.login-left img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image couvre tout l'espace sans déformation */
}

/* --- Partie Droite (Formulaire) --- */
.login-right {
    flex: 1; /* Prend 50% */
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
}

.login-right h2 {
    font-family: 'Inter-bold';
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 30px;
    color: #000;
}

/* Champ numéro de téléphone */
.input-group-login {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.country-code {
    background-color: #F5F5F5;
    border-radius: 8px;
    padding: 20px 23px;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: #000;
}
.input-group-login input::placeholder {
    font-family: 'Inter-regular';
}
.input-group-login input {
    background-color: #F5F5F5;
    border: none;
    border-radius: 8px;
    padding: 20px 23px;
    flex: 1;
    outline: none;
    font-size: 16px;
    font-family: 'Inter-semibold';
}

/* Texte conditions */
.login-terms {
    font-size: 14px;
    color: #000;
    font-family: 'Inter-semiregular';
    margin-bottom: 30px;
    line-height: 1.5;
}

.login-terms a {
    color: #96DC02; /* Vert */
    text-decoration: none;
    font-weight: bold;
}

/* Bouton Submit */
.submit-login-btn {
    background-color: #96DC02; /* Vert fluo */
    color: #000;
    font-family: 'Inter-bold';
    margin-top: 15px;
    border: none;
    border-radius: 30px;
    padding: 15px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

.submit-login-btn:hover {
    background-color: #85C402;
}

/* --- Responsive Login Modal (Mobile) --- */
@media (max-width: 768px) {
    .login-modal {
        width: 90%;
        max-width: 400px; /* Limite la largeur pour que ce soit joli */
        height: auto;     /* Hauteur auto pour s'adapter au contenu */
        max-height: 90vh; /* Ne dépasse pas 90% de la hauteur écran */
        flex-direction: column; /* Empiler l'image et le formulaire */
        overflow-y: auto; /* Permet de scroller si l'écran est très petit */
    }

    /* Partie Image (Haut) */
    .login-left {
        display: block; /* On force l'affichage */
        height: 180px;  /* Hauteur fixe pour l'image */
        flex: none;     /* Ne pas étirer */
    }

    .login-left img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Partie Formulaire (Bas) */
    .login-right {
        padding: 30px 20px;
        flex: 1;
    }

    .login-right h2 {
        font-size: 18px; /* Texte un peu plus petit sur mobile */
        margin-bottom: 20px;
        text-align: center;
    }

    .input-group-login {
        margin-bottom: 20px;
    }

    .country-code, .input-group-login input {
        padding: 12px 15px; /* Champs un peu moins hauts */
    }

    .login-terms {
        font-size: 15px;
        font-weight: bold;
        text-align: center;
    }

    .close-login {
        top: 10px;
        right: 15px;
        background: rgba(255,255,255,0.8); /* Fond blanc pour voir la croix sur l'image */
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
}
/* --- Styles spécifiques OTP --- */

.otp-sent-text {
    font-size: 14px;
    color: #000;
    margin-bottom: 25px;
    font-family: 'Inter-regular';
    line-height: 23px;
}

.edit-phone {
    font-size: 12px;
    color: #000;
    background: #F3FFDA;
    padding: 4px 20px;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    margin-left: 5px;
    border: 1px solid #96DC02;
}

.otp-inputs {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.otp-box {
    width: 70px;
    height: 60px;
    background-color: #F5F5F5; /* Gris clair */
    border: none;
    border-radius: 8px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    outline: none;
}
.otp-box:focus {
    border: 1px solid #96DC02;
    background-color: #fff;
    color: #000000;
}

.resend-timer {
    font-size: 13px;
    color: #000000;
    margin-bottom: 25px;
    font-family: Inter-regular;
    font-weight: 600;
}

/* Bouton Verify (Vert Fluo) */
.verify-btn:disabled {
    background-color: #EFEFEF !important; 
    color: #ADADAD !important;            
    cursor: not-allowed;
    border: none;
    box-shadow: none;
}
.verify-btn {
    background-color: #96DC02; 
    color: #000;
    font-family: 'Inter-bold';
    border: none;
    border-radius: 30px;
    padding: 20px;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
    transition: background-color 0.3s ease;
}
.verify-btn:hover {
    background-color: #85C402;
}

/* Bouton grisé si pas rempli (optionnel, pour l'effet visuel de la photo 2) */
.verify-btn:disabled {
    background-color: #E0E0E0;
    color: #999;
    cursor: not-allowed;
}

/* --- RESPONSIVE AJUSTEMENTS OTP (Mobile) --- */
@media (max-width: 768px) {
    .otp-inputs {
        justify-content: space-between; /* Espace max sur mobile */
        gap: 10px;
    }
    .otp-box {
        width: 60px; /* Plus grandes cases sur mobile pour toucher facilement */
        height: 60px;
    }
}


/* --- POPUP SUCCES --- */
.success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20000; /* Au-dessus de tout */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.success-overlay.active {
    opacity: 1;
    visibility: visible;
}

.success-box {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-overlay.active .success-box {
    transform: scale(1);
}

.success-icon {
    width: 60px;
    height: 60px;
    background-color: #96DC02; /* Vert */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.success-icon svg {
    width: 30px;
    height: 30px;
}

.success-box h2 {
    font-family: 'Inter-bold';
    font-size: 24px;
    margin-bottom: 10px;
    color: #000;
}

.success-box p {
    font-family: 'Inter-regular';
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
}

.success-btn {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 30px;
    font-family: 'Inter-bold';
    cursor: pointer;
    font-size: 14px;
}
.success-btn:hover {
    background-color: #333;
}
/* --- HEADER CONNECTÉ (Style après Login) --- */

/* La div utilisateur verte */
.user-profile-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #96DC02;
    padding: 8px 35px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Inter-bold';
    color: #000;
    transition: transform 0.2s;
}

.user-profile-btn:hover {
    transform: scale(1.05);
}

.user-avatar-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-circle img {
    width: 25px;
    height: 25px;
}

/* Classe utilitaire pour changer le fond du header */
.header-logged-in {
    background-color: #E7ECDD !important; /* Couleur demandée */
    transition: background-color 0.5s ease;
}













/* ============================================
   STYLES USER DROPDOWN MENU (NOUVEAU)
   ============================================ */

/* Le conteneur du menu déroulant */



.user-dropdown-menu ul {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
}

.user-dropdown-menu li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    text-decoration: none;
    color: #333;
    font-family: 'Inter-regular';
    font-size: 14px;
    transition: background 0.2s;
}

.user-dropdown-menu li a:hover {
    background-color: #F6FFE4; /* Vert pâle au survol */
    color: #96DC02;
    font-weight: 600;
}

.menu-icon {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    object-fit: contain;
}

/* Séparateur pour Logout */
.user-dropdown-menu li.logout-item {
    border-top: 1px solid #f0f0f0;
    margin-top: 5px;
    padding-top: 5px;
}

.user-dropdown-menu li.logout-item a {
    color: #96DC02;
}
/* --- BOUTON FERMER (LOGIN) --- */
/* Bouton fermer (X) avec image intégrée */
.close-login {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 100;
    /* Image de croix noire en SVG */
    background-image: url("./assets/homepage/icon/16.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* On enlève le texte par défaut */
    font-size: 0; 
    color: transparent;
}

.close-login:hover {
    transform: scale(1.1);
    opacity: 0.7;
}

/* Version Mobile : On place la croix sur l'image en haut à droite */
@media (max-width: 768px) {
    /* On force la croix à se positionner par rapport à la modale entière, pas juste la div blanche */
    .close-login {
        top: 15px;
        right: 15px;
        color: #000; 
        background: rgba(255, 255, 255, 0.8); /* Fond blanc semi-transparent */
        border-radius: 50%; /* Rond */
        font-size: 24px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    /* Si la croix est dans .login-right, on doit la sortir visuellement */
    .login-right {
        position: static; /* Permet à la croix absolute de se référer au parent .login-modal */
    }
}
/* --- CORRECTION POSITION MENU DÉROULANT --- */
.user-dropdown-menu {
    position: absolute;
    top: 100%; /* Se place juste à la limite bas du bouton */
    right: 0;  /* S'aligne à droite du bouton */
    margin-top: 12px; /* Un petit espace entre le bouton et le menu */
    
    background-color: #ffffff;
    width: 240px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    padding: 20px 0 10px 0;
    z-index: 99999 !important; 
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    cursor: default; /* Évite le curseur "main" sur le fond blanc */
}
.hero-top{
  z-index: 10;
}
.header, .hea {
    position: relative; 
    z-index: 100; /* Doit être supérieur à .hero-top qui est souvent à 1 ou 10 */
}
.user-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- STYLE DU BOUTON FERMER (X) DANS LE MENU --- */
.close-dropdown-x {
    position: absolute;
    top: 10px;
    right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color:#F7F7F7;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    font-weight: bold;
    z-index: 10;
    transition: color 0.2s;
}
.close-dropdown-x img{
  height: 20px;
  z-index: 1;
  width: 20px;
}
.close-dropdown-x:hover {
    color: #000;
}

/* --- AJUSTEMENT RESPONSIVE POUR LE MENU --- */
@media (max-width: 768px) {
    .user-dropdown-menu {
        right: 50%; /* Centré ou ajusté sur mobile */
        transform: translateX(50%) translateY(10px); /* Centrage */
        width: 200px;
        top: 60px; /* Position fixe par rapport au bouton dans le menu hamburger */
    }
    
    .user-dropdown-menu.active {
        transform: translateX(50%) translateY(0);
    }
}

.success-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 20000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.success-popup-overlay.active {
    display: flex;
    opacity: 1;
}

.success-popup {
    background: white;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.success-popup-overlay.active .success-popup {
    transform: scale(1);
}

.success-icon {
    width: 80px;
    height: 80px;
    background: #96DC02;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.success-icon svg {
    width: 40px;
    height: 40px;
}

.success-popup h2 {
    font-family: 'Inter-bold';
    font-size: 24px;
    color: #000;
    margin: 0 0 12px 0;
}

.success-popup p {
    font-family: 'Inter-regular';
    font-size: 16px;
    color: #666;
    margin: 0;
}
.rating .star {
    color: #FFD700; /* Jaune or */
    font-size: 18px;
    transition: transform 0.2s ease;
}

.rating .star:nth-child(5) {
    color: #D3D3D3;
}
/* ANIMATION HOVER sur image produit */
.productall {
    position: relative;
    overflow: hidden;
}

.productall > img:first-child {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.productall:hover > img:first-child {
    opacity: 0;
    transform: scale(1.05);
}

/* Image secondaire (cachée par défaut) */
.productall .product-image-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: scale(0.95);
}

.productall:hover .product-image-secondary {
    opacity: 1;
    transform: scale(1);
}

/* ANIMATION CŒUR (Love) */
.love {
    cursor: pointer;
    transition: all 0.3s ease;
}

.love:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
}

.love.loved {
    transform: scale(1.1);
    animation: heartbeat 0.6s ease;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.25); }
}

/* Badge OFF avec animation */
.off {
    transition: transform 0.3s ease;
}
/* ============================================
   ANIMATIONS SCROLL (HOMEPAGE)
   ============================================ */

/* 1. Apparition du bas (Fade In Up) - Pour les produits, titres, footer */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
    visibility: hidden;
}

/* 2. Apparition de la GAUCHE - Pour le texte du Hero */
.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s ease-out;
    visibility: hidden;
}

/* 3. Apparition de la DROITE - Pour l'image du Hero */
.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s ease-out;
    visibility: hidden;
}

/* État Final (Visible) */
.reveal.active, 
.reveal-left.active, 
.reveal-right.active {
    opacity: 1;
    transform: translate(0, 0);
    visibility: visible;
}

/* Délais pour l'effet "Cascade" (ex: grille produits) */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }











































.alert-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 25000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.alert-popup-overlay.active {
    display: flex;
    opacity: 1;
}

.alert-popup {
    background: white;
    border-radius: 16px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.alert-popup-overlay.active .alert-popup {
    transform: scale(1);
}

.alert-icon {
    width: 60px;
    height: 60px;
    background: #FF6B6B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.alert-icon svg {
    width: 30px;
    height: 30px;
    stroke: white;
}

.alert-popup h3 {
    font-family: 'Inter-bold';
    font-size: 20px;
    color: #000;
    margin: 0 0 12px 0;
}

.alert-popup p {
    font-family: 'Inter-regular';
    font-size: 15px;
    color: #666;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.alert-ok-btn {
    background: #96DC02;
    border: none;
    border-radius: 25px;
    padding: 12px 40px;
    font-family: 'Inter-bold';
    font-size: 14px;
    color: #000;
    cursor: pointer;
    transition: all 0.3s;
}

.alert-ok-btn:hover {
    background: #85C902;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(150, 220, 2, 0.3);
}

/* Login Modal - Ajustement hauteur pour addressStep */
.login-modal {
    max-height: 90vh; /* Limite la hauteur totale */
    overflow: hidden; /* Empêche le scroll global */
}

.login-right {
    max-height: calc(90vh - 40px); /* Hauteur disponible */
    overflow-y: auto; /* Scroll uniquement dans la partie droite */
    padding: 40px 50px;
}

/* Ajustement pour addressStep spécifiquement */
#addressStep .input-group-login {
    max-height: 400px; /* Limite la hauteur du formulaire */
    overflow-y: auto; /* Scroll interne si nécessaire */
    padding-right: 10px;
}

/* Scrollbar custom pour un meilleur look */
.login-right::-webkit-scrollbar,
#addressStep .input-group-login::-webkit-scrollbar {
    width: 6px;
}

.login-right::-webkit-scrollbar-track,
#addressStep .input-group-login::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.login-right::-webkit-scrollbar-thumb,
#addressStep .input-group-login::-webkit-scrollbar-thumb {
    background: #96DC02;
    border-radius: 10px;
}

.login-right::-webkit-scrollbar-thumb:hover,
#addressStep .input-group-login::-webkit-scrollbar-thumb:hover {
    background: #85C902;
}

@media (min-width:1200px) and (max-width:1440px){
  .video-wrapper {
    height: 460px;
}
.price-line1 {
  font-size: 18px;
}
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .login-modal {
        max-height: 95vh;
    }
    
    .login-right {
        max-height: calc(95vh - 40px);
        padding: 30px 25px;
    }
    
    #addressStep .input-group-login {
        max-height: none; /* Pas de limite sur mobile */
    }
}
.alert-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 25000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.alert-popup-overlay.active {
    display: flex;
    opacity: 1;
}

.alert-popup {
    background: white;
    border-radius: 16px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.alert-popup-overlay.active .alert-popup {
    transform: scale(1);
}

.alert-icon {
    width: 60px;
    height: 60px;
    background: #FF6B6B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.alert-icon svg {
    width: 30px;
    height: 30px;
    stroke: white;
}

.alert-popup h3 {
    font-family: 'Inter-bold';
    font-size: 20px;
    color: #000;
    margin: 0 0 12px 0;
}

.alert-popup p {
    font-family: 'Inter-regular';
    font-size: 15px;
    color: #666;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.alert-ok-btn {
    background: #96DC02;
    border: none;
    border-radius: 25px;
    padding: 12px 40px;
    font-family: 'Inter-bold';
    font-size: 14px;
    color: #000;
    cursor: pointer;
    transition: all 0.3s;
}

.alert-ok-btn:hover {
    background: #85C902;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(150, 220, 2, 0.3);
}

/* Login Modal Scroll Fix */
.login-modal {
    max-height: 90vh;
    overflow: hidden;
}

.login-right {
    max-height: calc(90vh - 40px);
    overflow-y: auto;
}

#addressStep .input-group-login {
    max-height: none;
}

.login-right::-webkit-scrollbar {
    width: 6px;
}

.login-right::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.login-right::-webkit-scrollbar-thumb {
    background: #96DC02;
    border-radius: 10px;
}

.login-right::-webkit-scrollbar-thumb:hover {
    background: #85C902;
}

@media (max-width: 768px) {
    .login-modal {
        max-height: 95vh;
    }
    
    .login-right {
        max-height: calc(95vh - 40px);
        padding: 30px 10px;
    }
}
.wishlist-success-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 30000;
    opacity: 0;
    transition: opacity 0.3s;
}

.wishlist-success-popup.active {
    display: flex;
    opacity: 1;
}

.wishlist-popup-content {
    background: white;
    border-radius: 16px;
    padding: 40px 30px 30px 30px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
    from {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.wishlist-popup-icon {
    margin-bottom: 20px;
}

.wishlist-popup-message {
    font-family: 'Inter-semibold';
    font-size: 16px;
    color: #000;
    margin: 0 0 25px 0;
    line-height: 1.5;
}

.wishlist-popup-close {
    background: #96DC02;
    border: none;
    border-radius: 8px;
    padding: 12px 40px;
    font-family: 'Inter-bold';
    font-size: 14px;
    color: #000;
    cursor: pointer;
    transition: all 0.3s;
}

.wishlist-popup-close:hover {
    background: #85C902;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(150, 220, 2, 0.3);
}
/* ============================================
   WISHLIST STYLES - AJOUTE PAR CLAUDE
   ============================================ */

/* Icône love verte quand dans wishlist */
.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #FF4444 !important;
    color: white !important;
    font-family: 'Inter-bold';
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 999 !important;
    pointer-events: none;
}

.cart-badge.pulse {
    animation: badgePulse 0.3s ease;
}

@keyframes badgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
/* Popup wishlist */
.wishlist-success-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 30000;
    opacity: 0;
    transition: opacity 0.3s;
}

.wishlist-success-popup.active {
    display: flex;
    opacity: 1;
}

.wishlist-popup-content {
    background: white;
    border-radius: 16px;
    padding: 40px 30px 30px 30px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
    from {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.wishlist-popup-icon {
    margin-bottom: 20px;
}

.wishlist-popup-message {
    font-family: 'Inter-semibold';
    font-size: 16px;
    color: #000;
    margin: 0 0 25px 0;
    line-height: 1.5;
}

.wishlist-popup-close {
    background: #96DC02;
    border: none;
    border-radius: 8px;
    padding: 12px 40px;
    font-family: 'Inter-bold';
    font-size: 14px;
    color: #000;
    cursor: pointer;
    transition: all 0.3s;
}

.wishlist-popup-close:hover {
    background: #85C902;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(150, 220, 2, 0.3);
}

@media (min-width:1200px){
  .search-box input{
  min-width: 490px;
}
}







/* my css */
div#search-box .close-icon {
    display: none;
}
div#search-div {
    display: none;
}
@media (min-width:1200px) and (max-width:1440px){
  .main-container{
  max-width: 90%;
  margin: auto;
}
.search-box input {
    min-width: 360px;
}
.section1 {
    margin: 0px 0px 40px;
}
.hero-top {
    padding: 40px 20px 34px;
}
.hero-top-content-h1 {
    font-family: 'Inter-bold';
    font-size: 40px;
}
.hero-bottom {
    max-width: 90%;
}
.bottom-of-product-div-h2 {
    font-size: 17px;
}
.all-time-best h2 {
    font-size: 34px;
}
.all-time-best h3 {
    font-size: 16px;
}
.end-home h2 {
    font-size: 34px;
}
.end-home {
    margin: 44px 0 20px;
    min-height: 550px;
}
.bottom-green-h2 {
    font-size: 38px;
}
.bottom-green-h3 {
    font-size: 20px;
    margin-bottom: 8px;
}
.footer-div1 {
    min-width: 313px;
}
}


@media (min-width:1024px) and (max-width:1199.98px){
  .search-box {
    padding: 15px;
}
  .shop-div {
    height: 50px;
    width: 50px;
}
  .login-btn {
    padding: 12.5px 40px;
}
.header {
    padding: 10px 40px;
}
.hero-top {
    padding: 40px 20px 40px;
}
.hero-top-content-h1 {
    font-size: 36px;
}
.hero-top-content {
    padding-left: 20px;
}
.hero-top-content-h3 {
    margin: 0px;
    font-size: 18px;
}
.order {
    width: 180px;
    height: 50px;
    font-size: 18px;
}
.hero-bottom {
    max-width: 90%;
    gap: 8px;
}
.hero-bottom div h3 {
    font-size: 14px;
}
.all-time-best h2 {
    font-size: 32px;
}
.all-time-best h3 {
    font-size: 16px;
}
.product-title {
    font-size: 16px;
}
.price-line1 {
    font-size: 20px;
}
.end-home h2 {
    font-size: 32px;
    margin-bottom: 0px;
}
.bottom-of-product {
    gap: 15px;
   
}
.bottom-of-product-div-h2 {
    font-size: 16px;
    margin-top: 10px;
}
.bottom-green-h2 {
    font-size: 34px;
}
.bottom-green-h3 {
    font-size: 18px;
}
.bottom-green-button {
    width: 200px;
    font-size: 17px;
    height: 50px;
}
.productall {
    flex: auto;
}
.productall img.product-image-main {
    width: 100%;
    height: auto !important;
}
.productall .product-image-secondary {
    width: 100%;
    height: auto !important;
}
.video-card {
    width: 100%;
    height: 100%;
    max-width: 100%;
}
.video-wrapper {
    height: auto;
}
.bottom {
    margin-top: 0px;
}
.end-home {
    margin: 44px 0 20px;
    min-height: auto;
}
.footer-div1 {
    min-width: 300px;
}
.section1 {
    margin: 10px 40px 40px;
}
.footer-div h2 {
    font-size: 20px !important;
}
.payment-left {
    text-align: left;
}
.footer-payment {
    margin: 0 30px;
}
.footer-div, .footer-copyright {
    margin: 0px 30px;
}
.privacy-section {
    padding: 40px 40px;
}
.wishlist-section {
    padding: 0 40px;
}
.blogs-page-container {
    margin: 30px 40px !important;
}
}


@media (min-width:768px){
  .mobile-view-img{
    display: none;
  }
}

@media (max-width:767px){
  button.login-btn img {
    max-width: 16px;
}
button.login-btn {
    padding: 11px 3px !important;
}
    .desktop-view-img{
    display: none;
  }
  .hero-top {
    background-image: url('./assets/homepage/banner-img-mobile.webp');
    min-height: 470px;
}
.hero-top-content {
    padding-left: 0;
    margin: 0;
}
.hero-top {
    padding: 36px 20px 10px 24px;
    align-items: flex-start;
}
.hero-top-content-h1 {
    font-size: 28px !important;
    max-width: 260px;
}
.hero-top-content-h1 br {
  display: none;
}
.hero-top-content-h3 {
    margin: 2px 0 14px;
}
.order {
    width: 136px;
    height: 40px;
    font-size: 14px;
}
.hero-bottom {
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hero-bottom::-webkit-scrollbar {
    display: none;
}
.hero-bottom div {
    padding: 3px 7px 6px;
}
.all-time-best h2 {
    font-size: 24px;
}
.all-time-best h3 {
    font-size: 15px;
}
.product-div {
    margin: 20px 0px 36px !important;
    gap: 16px;
}
.bottom-of-product > div {
    width: 100px;
    min-width: 100px;
    flex-basis: 31%;
}
.bottom-of-product {
    height: auto;
    padding: 21px 10px !important;
    gap: 10px;
}
.bottom-of-product div div {
    width: 80px;
    max-height: 80px;
}
.bottom-of-product-div-h2 {
    font-size: 13px !important;
    min-height: 50px;
}
.video-wrapper {
    height: 400px;
    min-width: 280px;
}
.video-card {
    width: 100%;
    max-width: 400px;
    height: 100%;
}
.end-home h2 {
    font-size: 24px;
    margin-bottom: 24px;
}
.end-home-video {
    padding: 0px 0 10px 0;
}
.bottom {
    margin-top: 0px;
    margin-bottom: 30px;
}
.bottom-green {
    background-image: url('./assets/homepage/taste-the-essence-mobile.webp');
    border-radius: 24px;
}
.bottom-green-h2 {
    font-size: 24px;
}
.bottom-background-1 {
    text-align: center;
}
.bottom-background-1 img {
    width: 80%;
}
.bottom-green br {
    display: none;
}
.bottom-green-h3 {
    font-size: 14px;
    margin-bottom: 20px;
    margin-top: 10px;
}
.payment-title {
    text-align: center;
}
.footer-div, .footer-payment, .footer-copyright {
    margin: 0px 5px;
}
.footer-div h2 {
    font-size: 18px;
    margin-bottom: 16px;
}

.footer-div h2 + br {
    display: none;
}
.footer-copyright h2 {
    font-size: 14px;
}
.qr-img {
    margin-top: 10px;
}
.footer-div {
    padding: 24px 0px 20px;
}
.hero-bottom div h3 {
    font-size: 13px;
    max-width: 90px;
}
.wishlist-section {
    padding: 0px 0px;
}
.blogs-page-container {
    margin: 20px 15px;
}
nav.navbar  ul {
    display: none !important;
}
.top-rotator p {
    height: 40px;
}
     @keyframes slideText {
    0%, 20% {
      transform: translateY(0);
    }
    20%, 33% {
      transform: translateY(-40px);
    }
    33%, 53% {
      transform: translateY(-40px);
    }
    53%, 66% {
      transform: translateY(-80px);
    }
    66%, 86% {
      transform: translateY(-80px);
    }
    86%, 100% {
      transform: translateY(0);
    }
  }
    /* div#search-box {
    background: #ffffff;
    max-width: 100%;
    border-radius: 0;
    gap: 0;
    left: 0px;
    height: 67px;
    top: -10px;
    z-index: 9999;
    padding: 10px;
    justify-content: space-around;
} */


}
@media (min-width: 576px) and (max-width: 767px) {
.all-time-best h2 {
    font-size: 18px;
}
.bottom-of-product > div {
    width: 136px;
    min-width: 136px;
}
 }


@media (max-width:1023.98px){
      .search-box input {
    padding: 15px 40px 15px 10px;
    border: 1px solid #e5e4e4;
}
.search-box img.search-icon {
    position: absolute;
    right: 64px;
}
.search-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 15px 10px;
  display: flex;
  align-items: center;
  gap: 10px;

  /* Animation setup */
  transform: translateY(-130px);
  transition: transform 0.4s ease;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border-radius: 0;
  margin-top: 0;
}

.search-box.active {
  transform: translateY(0);
}

.search-box input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
}

.close-icon {
  cursor: pointer;
}

.search-div {
  cursor: pointer;
}
div#search-div {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
}
div#search-box .close-icon {
    display: block;
}

  button.login-btn {
    font-size: 14px;
    padding: 6px;
}
  header.header {
    padding: 14px 10px 10px;
    flex-wrap:nowrap;
}

.hamburger {
    display: none;
}
.navbar ul li {
    border-bottom: 0;
     padding: 10px 0;
     border-bottom: 0 ;
}

.navbar {
    padding: 0 0 0 4px;
    box-shadow: none;
       position: unset;
    height: auto;
}

.navbar {
    padding: 0 0 0 4px;
    box-shadow: none;
    position: unset;
    height: auto;
    flex-direction: row;
    gap: 14px;
    justify-content: end;
}

.search-box img {
    max-width: 18px !important; 
    cursor: pointer;
}
.search-div {
    display: block;
      background-color: #F1F1F1;
      min-height: 40px;
      min-width: 40px;
          align-items: center;
    justify-content: center;
    display: flex;
    padding: 5px;
      border-radius: 50%;
      cursor: pointer;
}
.search-div img {
    max-width: 18px !important;
}
.shop-div {
    min-height: 40px;
    min-width: 40px;
    width: 40px;
    height: 40px;
}

button.login-btn {
    max-width: 110px;
    font-size: 14px !important;
}
.navbar ul {
    width: 42px;
}
.header img {
    max-width: 98px;
    height: auto;
}
.search-box  input{
 max-width: 100%;
} 
.search-box.active {
  display: flex;
}
.privacy-section {
    padding: 40px;
}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  button.login-btn {
    min-width: 114px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}
button.login-btn img {
    max-width: 20px;
}
      @keyframes slideText {
    0%, 20% {
      transform: translateY(0);
    }
    20%, 33% {
      transform: translateY(-50px);
    }
    33%, 53% {
      transform: translateY(-50px);
    }
    53%, 66% {
      transform: translateY(-100px);
    }
    66%, 86% {
      transform: translateY(-100px);
    }
    86%, 100% {
      transform: translateY(0);
    }
  }

.hero-top-content {
    padding-left: 0px;
}
.hero-top-content-h1 {
    font-size: 34px;
}
.hero-top {
    padding: 36px 20px 34px;
}
.hero-top-content-h3 {
    margin: 0px 0 10px;
    font-size: 16px;
}
.order {
    width: 190px;
    height: 54px;
}
.hero-bottom {
    max-width: 94%;
    margin-inline: auto !important;
}
.all-time-best h2 {
    font-size: 32px;
}
.bottom-of-product-div-h2 {
    font-size: 16px;
}
.video-wrapper {
    height: 287px;
}
.end-home h2 {
    font-size: 32px;
    margin-bottom: 10px;
}
.end-home {
    margin: 44px 0 0;
    min-height: auto !important;
}
.video-card {
    height: auto;
}
.bottom-green-h2 {
    font-size: 32px;
}
.bottom-green {
    height: auto;
    padding: 30px 20px;
}
.bottom-green-h3 {
    font-size: 16px;
    margin-bottom: 6px;
    margin-top: 0px;
}
.bottom-green-button {
    width: 190px;
    height: 54px;
}
.footer-div {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.footer-div div:nth-child(1) p {
    font-size: 14px;
    padding-right: 0px; 
}
.footer-div h2 {
    font-size: 20px;
}
.footer-div div:nth-child(1) h2 {
    font-size: 20px;
}
.footer-div li {
    font-size: 14px;
}
.footer-payment {
    margin: 0 20px;
}
.footer-div1 {
    min-width: 206px;
}
.footer-div, .footer-payment, .footer-copyright {
    margin: 0px 20px;
}
.footer-div {
    padding: 30px 0px 20px;
}
.footer-copyright h2 {
    font-size: 14px;
}
.payment-left {
    text-align: left;
}
.payment-icons1 {
    gap: 10px;
    flex-wrap: nowrap;
}
.footer-payment {
    align-items: flex-start;
}
.bottom {
    margin-top: 0px;
    margin-bottom: 30px;
}
.end-home-video {
    padding: 10px 0 20px 0;
}
header.header {
    padding: 14px 30px 10px;
}
.bottom-of-product {
    height: auto;
}
.refund-content {
    padding: 50px !important;
}
.wishlist-section {
    padding: 0px 30px;
}
.blogs-page-container {
    margin: 30px 30px !important;
}
.privacy-section {
    padding: 40px 30px !important;
}
.section1 {
    margin: 10px 30px;
}

 }
 
 

.product-div.reveal {
    margin-bottom: 0;
    padding-bottom: 0;
}