@media (max-width: 480px) {


  html, body {
    max-width: 100%;
    overflow-x: hidden;
}



.fa-bars:before {
  font-size: 21px !important;
}


/* ---   Side Menu   ---- */

nav .navbar .menu{
  position: fixed;
  left: -100%;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
  z-index: 10000; /* Ensures it's on top */
  align-items: center; /* Centers items horizontally */

  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  

/*
  background: linear-gradient(-45deg, #04021f, #010011) ;
background-size: 400% 400%;
-webkit-animation: gradient 5s ease infinite;
      animation: gradient 5s ease infinite;
      */
height: 100vh;
}


nav.sticky {
  background-color: rgba(14, 14, 14, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}

/* When menu is open, remove blur */
nav.sticky.menu-open {
  backdrop-filter: none !important;
  transition: none; /* No delay, instant change */
}






/*

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

*/


.logo-mob {
  display: block;
  position: absolute;
  left: 20px;
  top: 20px;
  width: 60px;
  
}

.logo-mob:hover {
  filter: invert(46%) sepia(35%) saturate(6971%) hue-rotate(274deg) brightness(104%) contrast(108%);
}




.fade_rule {
  display: block;
  margin-top: 12vh;
  margin-bottom: 2.5vh;
  height: 0.5px;
  background-color: #E6E6E6;
  width: 70%;
  opacity: 30%;
  background-image: linear-gradient(left , rgb(0, 0, 0) 2%, #7e7e7e 50%, rgb(0, 0, 0) 98%);
  background-image: -webkit-linear-gradient(left , rgb(0, 0, 0) 2%, #7e7e7e 50%, rgb(0, 0, 0) 98%);
  background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, rgb(0, 0, 0)), color-stop(0.5, rgb(127, 127, 127)), color-stop(0.98, rgb(0, 0, 0)) );
}




.navbar.active .menu{
  left: 0;
  
}
nav .navbar .menu a{
  font-size: 16px;
  font-family: 'ttrunstrialmedium';
  display: block;
  color: #fff;
  margin: 1vh 0 !important;

}

nav .navbar .menu a:hover{
 color: #fd42ff;
 font-size: 16px;
 font-family: 'ttrunstrialmedium';

}


nav .navbar .menu li{
  list-style: none;
  padding-top: 0px !important;
  margin: 0 0px !important;
}




.fade_rule2 {
  display: block;
  position: relative;
  margin-top: 1.8vh;
  margin-bottom: 8vh;
  height: 0.7px;
  background-color: #E6E6E6;
  width: 80%;
  opacity: 0.2;
  background-image: linear-gradient(left , rgb(0, 0, 0) 2%, #bdbdbd 50%, rgb(0, 0, 0) 98%);
  background-image: -webkit-linear-gradient(left , rgb(0, 0, 0) 2%, #aaaaaa 50%, rgb(0, 0, 0) 98%);
  background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, rgb(0, 0, 0)), color-stop(0.5, rgb(191, 191, 191)), color-stop(0.98, rgb(0, 0, 0)) );

}



.signup-menu-mob {
  display: block  !important;
  font-family: 'ttrunstrialmedium'  !important;
    cursor: pointer;
    font-size: 3.5vw !important;
    position: relative  !important;
    margin-left: auto  !important;
    margin-right: auto  !important;
    padding: 10px 12px !important; 
    text-align: center  !important;
    min-width: 60vw;
    border: none  !important;
    border-radius: 12px  !important;
    background-color: #fd42ff;
    color: #fff;
    transition: all 0.4s ease  !important;
    position: relative;
    margin-top: 2vh !important;
  
}

.signup-menu-mob:hover {
  background-color: #fff;
  color: #fd42ff !important;
  font-size: 3.5vw !important;
  font-family: 'ttrunstrialmedium'  !important;

}


.doyouhave-menu {
  display: block;  /* Make it a block to allow margin auto */
  width: fit-content; /* Make width only as wide as the text */
  margin: 0 auto;  /* Center horizontally */
  color: #ffffff; /* Your text color */
  text-decoration: none; /* Optional: Remove underline */
  font-family: 'ttrunstriallight';
  font-size: 11px;
  margin-top: 1.5vh;
}



.signin-menu-mob {
  display: block !important;  /* Make it a block to allow margin auto */
  width: fit-content !important; /* Make width only as wide as the text */
  margin: 0 auto !important;  /* Center horizontally */
  color: #c84aca !important; /* Your text color */
  font-family: 'ttrunstriallight' !important;
  font-size: 12px !important;
  margin-top: 0.5vh !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.signin-menu-mob {
  color: #fd42ff !important; /* Your text color */
}




.fade_rule3 {
  display: block;
  margin-top: 7vh;
  margin-bottom: 1vh;
  height: 0.5px;
  position: relative;
  background-color: #E6E6E6 !important;
  width: 50%;
  opacity: 0.3;
  background-image: linear-gradient(left , rgb(0, 0, 0) 2%, #7e7e7e 50%, rgb(0, 0, 0) 98%);
  background-image: -webkit-linear-gradient(left , rgb(0, 0, 0) 2%, #7e7e7e 50%, rgb(0, 0, 0) 98%);
  background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, rgb(0, 0, 0)), color-stop(0.5, rgb(127, 127, 127)), color-stop(0.98, rgb(0, 0, 0)) );
}


.flexbox {
  display: flex;
    align-items: center;  /* Aligns items vertically */
    justify-content: flex-end;  /* Aligns them to the right */
    gap: 15px; /* Adjust spacing between elements */
    margin-top: 0vw;
    margin-right: auto;
    margin-left: auto;

    
}



.language-button-mob button {
  
  display: block !important;
    font-family: 'ttrunstrialregular';
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: #ffffff;
    opacity: 90%;
    font-size: 14px !important;
    position: relative;
    margin-left: auto;
    display: flex;
    margin-top: 8px;
    margin-right: 0px;
    opacity: 0.7;

  
}

.language-button-mob button:hover {
  color: #fd42ff;
  opacity: 1;
}


.media-icons2 {
  
  display: flex;
  margin-right: 0px;
  gap: 10px;
  opacity: 0.7;
}


.facebook, .tiktok, .instagram {
  padding-top: 10px;
  width: 16px !important;
  transition: all 0.3s ease;
  cursor: pointer;
 
}











  /* =============== Navbar ================== */
      
  
  /* navup */




  
  .navup {
   
    display: none;
    transform: translatey(-50px);
  
    }
    
  
  /* navup-mob */
  
  
  .navup-mob {
    display: block;
  height: 50px;
  width: 100%;
  background-color: #fd42ff;
  display: flex;
  z-index: 200;
  position:fixed;
  top:0;
  left:0;
  
  }
  
  .navup-content-mob {
  display: flex;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
    
    }




  .nav-right {

      display: none;
      width: 20%;
      align-items: center;
      gap: 15px; /* Space between elements */
    }
  
  
  
  .offer-text-mob {
  
  font-family: "ttrunstrialdemibold" ;
  padding-top: 8px;
  width: 50%;
  font-size: 14px;
  color: #ffffff;
  
  }
  
  
  
  .navup-btn-mob {
    outline: none;
    border-radius: 10px;
    padding-top: 8px;
    font-size: 11px;
    font-weight: 400;
    background: #ffffff;
    color: #191919;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.4s ease;
    width: 50%;
    height: 70%;
    font-family: 'ttrunstrialmedium';
    display: block;
    margin-left: 0px;
    text-align: center;
    margin-top: 8px;
    }
  
    
  
  .navup-btn-mob:hover{
  
  background-color: #191919;
  color: #fd42ff;
  }
  
  
  
  
  
  
    nav .navbar{
      width: 90%;
      display: normal;
    }
  
  
    .language-selector {
      display: none;
    }
  
    .menu-lang {
      display: block;
    }

   























  
  
    .media-icons {
      display: none;
    }
  
    .logo-photo {
  
      width: 65px;
      
      }


   
  
    
  
  
    
    nav.sticky .menu-btn{
      color: #ffffff;
    }
  
   






    nav.sticky {
      
      padding: 13px 0;
      
      
    }
     
  
   
    
  
    
    nav .menu-btn,
    .navbar .menu .cancel-btn{
      display: block;
      position: absolute;
    }
  
    nav {
      width: 100%;
      padding: 20px 0;
      z-index: 998;
    }



  /* --- Home --- */


  .nav-btn {
    visibility: hidden;
  }

  .swiper-pagination-bullet {
    visibility: visible;
  }


  .home {
    min-height: 100vh;
    width: 100%;
    background-image: url(../img/main-page/img-home/background-mob.webp);
    position: relative;
   background-size: cover;
    background-position: center;
   overflow-x: hidden;
   overflow-y: hidden;
  }


.banner-group {

  position: absolute;
  top: 75%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin-left: 0px;
  width: 90%;
  z-index: 100;

}


.banner-title {
  font-size: 24px;
  line-height: 28px;
  font-family: 'ttrunstrialextrabold';
  margin-bottom: 5px;
  color: #ffffff;
  transform: translate(0px, 0px);
  opacity: 0;
  transition: all 1s ease 0.3s;
  }
  
  
  .banner-title._active {
    
    transform: translate(0px, 0px);
    opacity: 1;
  
  }


  
.banner-undertitle {
  font-size: 21px;
  line-height: 25px;
  font-family: 'ttrunstrialextrabold';
  margin-bottom: 5px;
  color: #fd42ff;
  transform: translate(0px, 0px);
  opacity: 0;
  transition: all 1s ease 0.5s;
  }

  .banner-undertitle._active {
  
    transform: translate(0px, 0px);
    opacity: 1;
  
  }

  .banner-text {

    font-size: 13px;  
    margin-top: 0px;
    font-family: 'ttrunstrialregular';
    color: #ffffff;
    transform: translate(0px, 0px);
    opacity: 0;
    margin-left: auto;
    margin-right: auto;
    transition: all 1s ease 0.5s;
    
    }
    
    
    .banner-text._active {
    
  
      transform: translate(0px, 0px);
      opacity: 0.8;
      
      
    }


    a.mainbutton {
      outline: none;
      padding: 10px 0px;
      border-radius: 14px;
      font-size: 4vw;
      font-weight: 400;
      background: #fd42ff;
      color: #fff;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.4s ease;
      width: 72vw;
      font-family: 'ttrunstrialdemibold';
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      text-align: center;
    }
    
    
    a.mainbutton:hover{
      
      background-color: #ffffff;
      color: #fd42ff;
    }


    .woman {

      height: 100vh;
      width: 100%;
      position: absolute;
      z-index: 10;
      background-image: url(../img/main-page/img-home/woman.webp);
      background-repeat: no-repeat;
      background-size: 75%;
      background-position: center 27%;
      transform: translateX(120px) translateY(100px);
      transition: all 1s ease 0.7s;
      opacity: 0;
    }
      
    
    
    .woman._active {
      transform: translate(0px, 0px);
      opacity: 1;
    
    }
    
    
  
    
    .drop {
      
      height: 100vh;
      width: 100%;
      position: absolute;
      z-index: 11;
      background-image: url(../img/main-page/img-home/drop.webp);
      background-repeat: no-repeat;
      background-size: 15%;
      background-position: 93% 10%;
      transform: translateX(70px) translateY(0px);
      transition: all 1s ease 0.8s;
      opacity: 0;
    }
    
    .drop._active {
      transform: translate(0px, 0px);
      opacity: 0.7;
    
    }
    
    
    
    
    .drop1 {
      
      height: 100vh;
      width: 100%;
      position: absolute;
      z-index: 11;
      background-image: url(../img/main-page/img-home/drop.webp);
      background-repeat: no-repeat;
      background-size: 14%;
      background-position: -5% 47%;
      transform: translateX(-135px) translateY(150px);
      transition: all 1s ease 0.8s;
      opacity: 0;
    }
    
    .drop1._active {
      transform: translateX(-25px) translateY(50px);
      opacity: 0.5;
      filter: blur(2px);
    
    }
    
    
    
    
    .rocket {
      
      height: 100vh;
      width: 100%;
      position: absolute;
      z-index: 11;
      background-image: url(../img/elements/rocket.webp);
      background-repeat: no-repeat;
      background-size: 5.5%;
      background-position: 73% 25%;
      transform: translateX(-70px) translateY(70px);
      transition: all 1s ease 0.9s;
      opacity: 0;
    }
    
    .rocket._active {
      transform: translate(0px, 0px);
      opacity: 0.8;
    
    }


    .planet {
      height: 100vh;
      width: 100%;
      position: absolute;
      z-index: 11;
      background-image: url(../img/elements/planet.webp);
      background-repeat: no-repeat;
      background-size: 5%;
      background-position: 15% 20%;
      transform: translateX(100px) translateY(90px);
      transition: all 1s ease 0.9s;
      opacity: 0;
     
      
     
    
    }
    
    .planet._active {
      
      transform: translate(0px, 0px );
      opacity: 0.6;
     
    
    }
    
    
    
    
    
   

    

  
  
  
  
  
  /* ============ Benefits ================= */
      

  section {
   
    padding: 0px 0px 0px 0px;


  }
  


  .benefits {
    min-height: 45vh;
   padding-left: 20px;
   padding-right: 20px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
   overflow-x: hidden;
   overflow-y: hidden;
   padding-bottom: 0px;

  }
  
  
  .benefits-content{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    position: relative; 
    margin-bottom: 50px;
    margin-top: 50px;
  
  }
  
  
  .title-undertitle {
    transform: translateX(0px) translateY(150px);
    transition: all 2.2s ease 0.1s;
    opacity: 0;
    width: 90%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
  }
  
  .title-undertitle._active {
    transform: translate(0px, 0px);
    opacity: 1;
    
    }
  
  
  
    .benefits-title {
      color: #fd42ff;
      text-align: center;
      font-size: 25px;
      font-family: 'ttrunstrialbold';
      line-height: 29px;
      margin-top: 0px;
      
      }
      
      
      
      
      .benefits-text {
      
        margin-top: 12px;
        color: #fdfeff;
        text-align: center;
        font-size: 12px;
        font-family: 'ttrunstrialregular';
      
      }
         
  
     .benefits .boxes .box .icon{
      height: 8px;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      font-size: 18px;
      color: #fff;
      transition: all 0.4s ease;
      
    }


    .benefits .boxes {
      
  margin-top: 23px;
  margin-bottom: 0px;
      
     
    }



  
    .benefits .boxes .box{
      
      width: calc(100% / 3 - 10px);
      text-align: center;
      border-radius: 12px;
      padding: 0px 0px;
      cursor: default;
      transition: all 0.4s ease;
      background-color: none;
      box-shadow: none;
      
     
    }
    
  
    .icon-image {
      height: 42px;
      width: 42px;
    }
    
  
    
    .benefits .boxes .topic {
      font-family: 'ttrunstrialmedium';
      font-size: 10px;
      color: #ffffff;
      line-height: normal;
      
    }
    
    
    .benefits .boxes .topic-text {
      margin-top: 5px;
      font-family: 'ttrunstriallight';
      font-size: 8px;
      color: #eae9ea;
      opacity: 80%;
      
    }




    .benefits .boxes .topic-text-mob {
      margin-top: 5px;
      font-family: 'ttrunstriallight';
      font-size: 8px;
      color: #eae9ea;
      opacity: 80%;
      
    }
  
  
  
    .round {
      
      height: 100vh;
      width: 100%;
      position: absolute;
      z-index: 10;
      background-image: url(../img/benefits/cilyndre.webp);
      background-repeat: no-repeat;
      background-size: 90%;
      background-position: center 70%;
      transform: translateX(0px) translateY(0px);
      transition: all 1.5s ease 0.5s;
      opacity: 0;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
    }
      
    
    
    .round._active {
      
      transform: translate(0px, 0px);
      opacity: 0.1;
    
    }







    
    .cilyndre {
      display: none;
      height: 72vh;
      width: 100%;
      position: absolute;
      z-index: 15;
      background-image: url(../img/benefits/cilyndre.webp);
      background-repeat: no-repeat;
      background-size: 60%;
      background-position: -100px 200px;
      transform: translateX(-120px) translateY(150px);
      transition: all 1.5s ease 0.5s;
      opacity: 0;
    }
      
    
    
    .cilyndre._active {
      display: none;
      transform: translate(0px, 0px);
      opacity: 0.2;
    }
  
  
  
    /* =============================== ActiveOffer =========================================== */
  
  
  .active-offer {
  
    min-height: 400px;
    width: 100%;
    background-image: url(../img/active-offer/active-offer-mob.webp);
    background-color: #102f35;
    background-size: cover;
    background-position: center 7%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  
  
  
  .active-offer-container {
  
  width: 100%;
  display: block;
  text-align: center;
  position: absolute;
  top: 60%;
  
  }
  
  
  .active-offer-title {
  font-family: 'ttrunstrialregular';
  font-size: 24px;
  color: #ececec;
  transform: translateX(0px) translateY(0px);
  transition: all 1.5s ease 0.7s;
    opacity: 0;
  }
  
  .active-offer-title._active {
    transform: translate(0px, 0px);
    opacity: 1;
    }
    
  
  
  .active-offer-undertitle {
    font-family: 'ttrunstrialbold';
    font-size: 24px;
    color: #fd42ff;
    transform: translateX(0px) translateY(0px);
    transition: all 1.5s ease 0.7s;
    opacity: 0;
  
    }
  
  
    .active-offer-undertitle._active {
      transform: translate(0px, 0px);
      opacity: 1;
      
      }
  
  
    .active-offer-button {
      outline: none;
      padding: 10px 0px;
      border-radius: 14px;
      font-size: 4vw;
      font-weight: 400;
      background: #fd42ff;
      color: #fff;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.4s ease;
      width: 72vw;
      font-family: 'ttrunstrialdemibold';
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
      text-align: center;
      
      }
  
      .active-offer-button._active {
        transform: translate(0px, 0px);
        opacity: 1;    
        }
  
  
      
  .active-offer-button:hover{
    
    background-color: #ffffff;
      color: #fd42ff;
  }
  
  
  
  
  
  /* ================== Benefits1 ===================== */
  



  .benefits1 {
  
  
   min-height: 25vh !important;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left:20px ;
    padding-right: 20px;
    position: relative;
   overflow-x: hidden;
   overflow-y: hidden;
   padding-bottom: 0px;
  

  }
   
   
  
  .benefits1-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
    min-height: 35vh; /* Ensure it takes at least the section height */
    width: 100%;
}
  
  
  
  
.benefits1 .boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Ensures centering */
  align-items: center; /* Centers items vertically */
  margin-top: 0; /* Remove extra top margin */
  gap: 14px;
}
  
  
  .benefits1 .boxes .box{
    margin: 10px 0;
    width: calc(100% / 3 - 10px);
    text-align: center;
    border-radius: 12px;
    padding: 5px 5px;
    padding-top: 5px;
    cursor: default;
    transition: all 0.4s ease;
    backdrop-filter: blur(20px);
    border: 2px solid transparent;
    border-color: rgb(253, 66, 255,0.2);
  }
  
  
  
  .benefits1 .boxes .box:hover{
    transform: translateY(-10%);
    backdrop-filter: blur(10px);
  }
  
  
  .benefits1 .boxes .box:hover .benefits1-text {
    display: block;

  }
  
  
  
  
  
  .benefits1 .boxes .box .icon{
    height: 90px;
    width: 90px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    color: #fff;
    background-color: #ffffff;
    margin: 0 auto 10px auto;
    transition: all 0.4s ease;
    
  }
  
  .benefits1-text {
    display: none;
    
  }
  
  
  
  /* 
  .benefits1 .boxes .box:hover .benefits1-text {
    display: block;
  }
  
  */
  
  
  
  .icon-image1 {
    margin-top: 8px;
    height: 39px;
    width: 39px;
  }
  
  
  
  
  /*
  
  .boxes .box:hover .icon{
    background-color: #fff;
    color: #313569;
  }
  
  */
  
  .benefits1 .boxes .topic {
    font-family: 'ttrunstrialmedium';
    font-size: 10px;
    color: #f3ebf7;
    margin-bottom: 12px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 80%;

    
  }
  
  
  
  
  /*
  .benefits .boxes .box:hover .topic,
  .benefits .boxes .box:hover p{
    color: #0E2431;
    transition: all 0.4s ease;
  }
  .benefits .boxes .box:hover .topic,
  .benefits .boxes .box:hover p{
    color: #fff;
  }
  
  */
  
  
  
  
  /* =================== AboutUs ========================= */
  
  .about-us {
  
    min-height: 90vh;
    position: relative;
    background-color: #3c0448;
    background-image: url(../img/about-us/about-us-mob.webp);
    background-size: cover;
   overflow-x: hidden;
   overflow-y: hidden;
   padding-top: 0px;
  
  }




  
.woman2 {
  min-height: 60vh;
  width: 100%;
  position: relative;
  z-index: 15;
  background-image: url(../img/about-us/woman1.webp);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: bottom center;
  transform: translateX(0px) translateY(0px);
  transition: all 2.5s ease 1.5s;
  opacity: 0;
}


.woman2._active {
  
  transform: translate(0px, 0px);
  opacity: 1;

}

.woman1 {
  display: none;
}










  
  
  
  
  .about-us-container {
  
    min-height: 28vh;
    width: 85%;
    margin-top: 7vh;
    margin-bottom: 0px;
    padding-bottom: 0px;
    position: relative;
    margin-left: 5vw; 
    margin-right: auto;
    z-index: 9;
    display: block;
 
    
  }
  
  
  .about-us-group {
  
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 0px;
 
    
    }
  
  
  
    .about-us-title {
  
      font-size: 34px;
      color: #ffffff;
      font-family: 'ttrunstrialbold';
      color: #fd42ff;
      transform: translateX(0px) translateY(70px);
        transition: all 1.5s ease 0s;
        opacity: 0;
      }
      
      
      .about-us-title._active {
        transform: translateX(0px) translateY(0px);
        opacity: 1;
        }
      
      
      .about-us-text {
      
        margin-top: 10px;
        font-size: 15px;
        color: #ffffff;
        font-family: 'ttrunstrialmedium';
        transform: translateX(0px) translateY(70px);
        transition: all 1.5s ease 0.5s;
        opacity: 0;
        }
      
        .about-us-text._active {
      
          transform: translateX(0px) translateY(0px);
        opacity: 1;
          }
      
      
          
          .about-us-text1 {
          
            margin-top: 10px;
            font-size: 13px;
            color: #ffffff;
            font-family: 'ttrunstriallight';
            transform: translateX(0px) translateY(70px);
            transition: all 1.5s ease 0.5s;
            opacity: 0;
            }
          
            .about-us-text1._active {
          
              transform: translateX(0px) translateY(0px);
            opacity: 1;
              }
      
              .about-us-title._active {
                transform: translateX(0px) translateY(0px);
                opacity: 1;
                }
              
              
              .about-us-text2 {
              
                margin-top: 10px;
                font-size: 13px;
                color: #ffffff;
                font-family: 'ttrunstriallight';
                transform: translateX(0px) translateY(70px);
                transition: all 1.5s ease 0.5s;
                opacity: 0;
                }
              
                .about-us-text2._active {
              
                  transform: translateX(0px) translateY(0px);
                opacity: 1;
                  }
      
    
    
  
  
  
  
  
  
        


    /* --- Offers --- */



    .offers {
      
      padding-top: 60px;
      padding-bottom: 70px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      
      }
      

      
      .offers-title {
          color: #fd42ff;
          text-align: center;
          font-size: 25px;
          line-height: 29px;
          font-family: 'ttrunstrialbold';
          width: 90%;
          position: relative;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 0px;
          
          }
          
          .offers-text {
          
            margin-top: 10px;
            color: #fdfeff;
            text-align: center;
            font-size: 12px;
            font-family: 'ttrunstrialregular';
            width: 85%;
            margin-left: auto;
          margin-right: auto;
            margin-bottom: 0px;
          }
      
         
      
      
          .nutra-tovarka {
              color: #fd42ff;
              text-align: center;
              font-size: 24px;
              font-family: 'ttrunstrialdemibold';
              width: 100%;
              margin-left: auto;
              margin-right: auto;
              margin-bottom: 0px;
              margin-top: 80px;
              position: relative;
              z-index: 1;
              
              }
      
      
                  
                  
                  .slide-container{
                    
                    width: 420px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    display: -webkit-box;  /* Old Safari */
                    display: -webkit-flex; /* Modern Safari */
                    display: flex;
                    
                  }
                  .slide-content{
                    margin: 0 40px;
                    overflow: hidden;
                    border-radius: 25px;
                    padding-top: 50px;
                    padding-bottom: 0px;
                    padding-left: 20px;
                    padding-right: 20px;
                    margin-bottom: 20px;
                  
                  }
            
            
            
                
            
                        
                  
                  .slide-container-2{
                    
                    width: 420px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    display: -webkit-box;  /* Old Safari */
                    display: -webkit-flex; /* Modern Safari */
                    display: flex;
                    
                  }
                  .slide-content-2{
                    margin: 0 40px;
                    overflow: hidden;
                    border-radius: 25px;
                    padding-top: 50px;
                    padding-bottom: 0px;
                    padding-left: 20px;
                    padding-right: 20px;
                    margin-bottom: 20px;
            
                  
                  }
                  
                  
                  
                  
                  
                  
                  
                  .other-products .swiper-navBtn{
                    color: #fd42ff;
                    opacity: 80%;
                    -webkit-transition: color 0.3s ease; /* Safari Fix */
                    transition: color 0.3s ease;
                    background-color: #111111;
                    margin-bottom: 0px;
                  }
                  .swiper-navBtn:hover{
                    color: #fd42ff;
                  }
                  .swiper-navBtn::before,
                  .swiper-navBtn::after{
                    font-size: 30px;
                    position: absolute;
                    top: 35px
                  }
                  
                  .other-products .swiper-button-next {
                    right: 0px;
                    
                   
                    
                  }
                  .other-products .swiper-button-prev {
                    left: 0px;
                    
                    
                  }
            
            
                  .other-products .swiper-button-next-2 {
                    right: 0px;
                    
                    
                  }
                  .other-products .swiper-button-prev-2 {
                    left: 0px;
                    
                    
                  }
            
            
            
            
          
            
            
            
            /*======= Card section CSS =======*/
            
            
            
            .card{
                perspective: 1200px;
                
                
            }


            
            
            .card-body{
                position: relative;
                background: #101010;
                width: 298px; 

                height: fit-content;
               /* box-shadow: 0 5px 25px rgb(0, 0, 0, .15); */
                transform-style: preserve-3d;
                border-radius: 20px;
            }
            
            .card-images{
                width: 100%;
                display: grid;
                place-items: center;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                transform-style: preserve-3d;
                background: #111111;
                background-image: url(../img/offers/offer-background.webp);
                background-size: cover;
                z-index: 1;
                
            }
            
            .card-images .card-bg{
                z-index: 10;
                position: relative;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                width: 100%;
                
                left: 0;
                
                
                
                
            }
            
            .card-images .card-figure{
                z-index: 30;
                width: 50%;
                transition: transform .3s ease-out;
               
                
            }
            
            .card-body:hover .card-figure{
                border: 1px solid #fff;
                border-radius: 50%;
                box-shadow: 0 5px 25px rgb(0, 0, 0, .15);
                z-index: 100;
            

            }
            
           
            
            
            
            .swiper-slide {
                -webkit-transform: translate3d(0, 0, 0); /* Safari Fix */
                transform: translate3d(0, 0, 0);
            }
            
            
            
            
            
            
            
            .card-info{
                position: relative;
                padding: 20px;
                text-align: center;
                transform-style: preserve-3d;
            }
            
            .card-info .card-name{
                color: #ffffff;
                font-size: 16px;
                font-weight: 700;
                margin-bottom: 10px;
                transition: transform .3s ease-out;
                font-family: 'ttrunstrialdemibold' ;
            }
            
            .card-info .card-description{
                color: #ffffff;
                opacity: 70%;
                font-size: 12px;
                font-weight: 400;
                margin-bottom: 15px;
                transition: transform .3s ease-out;
                font-family: 'ttrunstriallight' ;
            }
            
            .card-info .card-media{
                display: flex;
                justify-content: center;
                align-items: center;
                column-gap: 35px;
                transition: transform .3s ease-out;
            }
            
            .card-info .card-media a{
                color: #999;
                font-size: 1.7em;
                transition: color .1s ease;
            }
            
            .card-info .card-media a:hover{
                color: #222;
            }
            
          

/* --- Form --- */




  .final-form {




    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow-x: hidden;
     overflow-y: hidden;
     background-repeat: no-repeat;
      
    }



    .form-title {
      color: #fdfeff;
      text-align: center;
      font-family: 'ttrunstrialbold';
      font-size: 26px;
      margin-top: 42px;
      width: 80%;
      position: relative;
        margin-left: auto;
        margin-right: auto;
      
      }
    
    
      .form-undertitle {
        color: #fd42ff;
        text-align: center;
        font-family: 'ttrunstrialbold';
        font-size: 26px;
        margin-bottom: 45px;
        width: 80%;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        
        }


        .form-glass {
          padding-top: 35px;
          padding-bottom: 35px;
          display: block;
          margin-left: auto;
          margin-right: auto;
          width: 85vw;
          border-radius: 25px;
          backdrop-filter: blur(20px);
          z-index: 10;
          border: 2px solid transparent;
          background-color: rgba(11, 9, 42, 0.5);
        border-color: rgb(253, 66, 255,0.2);
        transform: translateX(0px) translateY(130px);
        transition: all 1.8s ease 0.7s;
        opacity: 0;
        }


        .form-glass._active {

          transform: translate(0px, 0px);
          opacity: 1;
        
        }


        
.select-box {
width: 72vw;
margin-left: auto;
margin-right: auto;
position: relative;
height: 55px;
margin-bottom: 20px;
color: #c9c9c9;

}
.select-box select{
height: 100%;
padding: 10px 15px;
padding-left: 20px;
width: 100%;
border: none;
border-radius: 20px;
-webkit-appearance: none;
appearance: none;
font-family: 'ttrunstrialregular';
background-color: rgba(11, 9, 42, 0.5);
color: #c9c9c9;
font-size: 3vw;
border: 1px solid transparent;
border-color: rgb(253, 66, 255,0.05);


}
.select-box:after{
content: "";
position: absolute;
right: 20px;
top: 50%;
margin-top: -4px;
/* border-top: 8px solid #fd42ff; */
border-top: 8px solid #941e96;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
pointer-events: none;
}


.select-box select:focus {
border: 2px solid #fd42ff;
}


input[type=text] {

width: 73vw;
height: 55px;
margin: 8px 0;
background-color: rgba(11, 9, 42, 0.5);
color: #ffffff;
font-size: 3vw;
font-family: 'ttrunstrialregular';
box-sizing: border-box;
display: block;
border-radius: 20px;
box-sizing: border-box;
border: none;
padding: 12px 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border: 1px solid transparent;
border-color: rgb(253, 66, 255,0.05);

}

input[type=tel] {

width: 73vw;
height: 55px;
margin: 8px 0;
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
background-color: rgba(11, 9, 42, 0.5);
color: #1f1f1f;
font-family: 'ttrunstrialregular';
font-size: 3vw;
box-sizing: border-box;
display: block;
border-radius: 20px;
box-sizing: border-box;
border: none;
padding: 12px 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;

}



input[type=password] {

width: 73vw;
height: 55px;
margin: 8px 0;
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
background-color: rgba(11, 9, 42, 0.5);
color: #ffffff;
font-family: 'ttrunstrialregular';
font-size: 4vw;
box-sizing: border-box;
display: block;
border-radius: 20px;
box-sizing: border-box;
border: none;
padding: 12px 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;


}








::placeholder {
color: #c9c9c9;  
font-family: 'ttrunstrialregular';
font-size: 3vw;

}


.finalbutton[type=submit] {

outline: none;
padding: 10px 0px;
border-radius: 14px;
font-size: 4vw;
font-weight: 400;
background: #fd42ff;
color: #fff;
cursor: pointer;
border: 2px solid transparent;
border-radius: 18px;
transition: all 0.4s ease;
width: 73vw;
height: 55px;
font-family: 'ttrunstrialmedium';
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 16px;

}





.finalbutton:hover {

border-color: #fd42ff;
background-color: transparent;
color: #fd42ff;

}



.doyouhave {
    
  display: block;  /* Make it a block to allow margin auto */
  width: fit-content; /* Make width only as wide as the text */
  margin: 0 auto;  /* Center horizontally */
  color: #ffffff; /* Your text color */
  text-decoration: none; /* Optional: Remove underline */
  font-family: 'ttrunstriallight';
  font-size: 2.6vw;
  margin-bottom: 7px;
  position: relative;
  opacity: 0.9;
  
  

}

.signin {
  display: block;  /* Make it a block to allow margin auto */
  width: fit-content; /* Make width only as wide as the text */
  margin: 0 auto;  /* Center horizontally */
  color: #c84aca; /* Your text color */
  font-family: 'ttrunstriallight';
  margin-top: 12px;
  font-size: 3vw;
  position: relative;
}






    
.saturn {
      
    display: block !important;  
  height: 100vh;
  width: 100%;
  background-image: url(../img/form/planet.html); 
 background-size: 70%;
 background-position: -160px 200px;
 transform: translateX(-120px) translateY(130px);
 transition: all 1.8s ease 1.1s;
 opacity: 0;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  background-repeat: no-repeat;
  

   
 }


 .saturn._active {
  
  transform: translate(0px, 0px);
  opacity: 0.5;

}

    
     
    
    .earth {
      
      
      min-height: 130vh;
      width: 100%;
      background-image: url(../img/form/earth.html); 
     background-size: 100%;
     background-position: 200px 110%;
     transform: translateX(120px) translateY(130px);
     transition: all 1.8s ease 1.1s;
     opacity: 0;
      position: absolute;
      overflow-x: hidden;
      overflow-y: hidden;
      background-repeat: no-repeat;
    
       
     }
    
    
     .earth._active {
      
      transform: translate(0px, 0px);
      opacity: 0.7;
    
    }
    
    









/* --- Footer --- */
      
      
      
    footer{
      position: relative;
      padding-bottom: 0px;
      
    }
      
      
      



      footer .logo-photo {

        width: 70px !important;
      }
      
      

        

 

  footer .footer-content{
    
    
    padding-top: 30px;
    padding-bottom: 50px;
    padding-left: 25px;
    padding-right: 25px;
  }


  footer .footer-content .top{
    flex-direction: column;
  }


  .footer-content .top .media-icons{
    margin-top: 15px;
    margin-right: 0px;
    margin-left: 0px;
    position: relative;
    gap: 10px;
  }
 

  
  .footer-content .top .media-icons a{
    height: 18px;
    width: 18px;
    font-size: 14px;
   
  }


  .footer-facebook:hover, .footer-tiktok:hover, .footer-instagram:hover {
    filter: invert(46%) sepia(35%) saturate(6971%) hue-rotate(274deg) brightness(104%) contrast(108%);
  }



  .footer-content .link-boxes .box li{
    list-style: none;
    font-family: 'firago-regular';
      margin: 3px 0;
      list-style: none;
      line-height: 16px;
  }




  footer .footer-content .link-boxes {
    
    width: 100%;
    margin-left: 40px;
    
  }


  footer .footer-content .link-boxes .box{
    margin-left: 10px;
    width: calc(100% / 2 - 10px);
    position: relative;
  }
  :default
  .bottom-details .bottom_text span,
  .bottom-details .bottom_text a{
    font-size: 12px;
  }





.footer-content .link-boxes .box li a{
  color: #ffffff;
  margin: 0px 0;
  list-style: none;
  font-size: 13px;
  line-height: 2px;
  opacity: 0.7;
  transition: all 0.4s ease;
  font-family: 'ttrunstriallight';
}


.footer-content .link-boxes .box li a:hover{
  opacity: 1;
  
}


 
      
      
      
        }







@media (max-width: 425px) { 



  .logo-photo {
    width: 55px;
  }
 
  .woman {

   
    background-repeat: no-repeat;
    background-size: 78%;
    background-position: center 32%;
   
  }





  /* --- AboutUs --- */

  .about-us {
  
    min-height: 70vh;
  
  
  }

  .woman2 {
    min-height: 50vh;
    background-size: 90%;
   
  }


  .about-us-container {
  
    min-height: 28vh;
    width: 95%;
    margin-top: 5vh;
    margin-bottom: 0px;
    padding-bottom: 0px;
    position: relative;
    margin-left: 2vw; 
    margin-right: auto;
   
    
  }

  .about-us-title {
    font-size: 32px;
  }

  .about-us-text {
    font-size: 14px;
  }

  .about-us-text1 {
    font-size: 12px;
  }


  .about-us-text1 {
    font-size: 12px;
  }



/* --- Offers --- */


.offers {
  padding-top: 55px;
}



.offers-title {
  font-size: 23px;
}

.offers-text {
  font-size: 12px ;
  width: 95%
}


.nutra-tovarka {

  font-size: 22px;
 
  
  }



  .slide-container{
                    
    width: 338px;
  }



  .slide-container-2{
                    
    width: 338px;
  }

  .slide-content, .slide-content-2 {
    padding-top: 38px;
  }



  .card-body{
    position: relative;
    background: #101010;
    width: 220px; 
    height: fit-content;
   /* box-shadow: 0 5px 25px rgb(0, 0, 0, .15); */
    transform-style: preserve-3d;
    border-radius: 20px;
}

.swiper-navBtn::before, .swiper-navBtn::after {

  font-size: 27px;
  top: 15px;
}


/* --- Form --- */



.final-form {




  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-x: hidden;
   overflow-y: hidden;
   background-repeat: no-repeat;
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 20px;
    
  }

  .form-title {
    font-family: 'ttrunstrialdemibold';
  }


  .form-undertitle {
    font-family: 'ttrunstrialdemibold';
  }



.earth {
  display: block;
  min-height: 120vh;

}


.earth._active {
      

  opacity: 0.5;

}


    
.saturn {
      
  display: block !important;  
height: 100vh;
width: 100%;
background-image: url(../img/form/planet.html); 
background-size: 70%;
background-position: -140px 200px;
transform: translateX(-120px) translateY(130px);



 
}


.saturn._active {


opacity: 0.5;

}


/* --- Footer ---- */


footer .footer-content {
 
  padding-top: 30px;
  padding-bottom: 50px;
  padding-left: 10px;
  padding-right: 10px;
  
}


footer .footer-content .link-boxes {

  margin-left: 10px;
}






}













.element1 {
  position: absolute;
  width: 6%;
  z-index: 9;
  left: 5%;
  top: 85%;
  }

  

 







@media (max-width: 375px) { 

/* --- SideMenu --- */

nav .navbar .menu a {
  font-size: 13px;
  margin: 0.7vh 0 !important;
}


.fade_rule2 {
  margin-bottom: 40px;
}

.doyouhave-menu {
  margin-top: 20px;
  margin-bottom: 3px;
}

.signin-menu-mob {
  font-size: 12px !important;

}

.media-icons2 {
  gap: 8px;
}

  /* --- MainBanner --- */

  .logo-photo {
    width: 55px;
  }
  
  .banner-title {
    font-size: 20px;
  }


  .banner-undertitle {
    font-size: 20px;
  }

  .banner-text {
    font-size: 12px;
  }

  a.mainbutton {
    font-size: 4.3vw;
    width: 77vw;
  }

  /* --- Benefits --- */

  

  .benefits {
    background-image: url(../img/benefits/cilyndre-mob.webp);
    background-size: 90%;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-left: 14px;
    padding-right: 14px;
   
  }

  .round {

  display: none;
  }

  .benefits-title {
    font-size: 21px;
    line-height: 25px;
  }

  .benefits-text {
    font-size: 10px;
    margin-top: 10px;
  }

  .icon-image {
    height: 50px;
    width: 50px;
  }

  .benefits .boxes {
    flex-direction: column;
  }

  .benefits .boxes .box {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  .benefits .boxes .topic {
    font-size: 12px;
  }

  .benefits .boxes .topic-text-mob {
    font-size: 9px;
  }

  .benefits-content {
     
     margin-bottom: 45px;
     margin-top: 45px;
  }










/* benefits flex


  .benefits {
    padding-left: 10px;
    padding-right: 10px;
  }

  .benefits-title {
    font-size: 21px;
    line-height: 25px;
  }

  .benefits-text {
    font-size: 11px;
  }

  .icon-image {
    height: 38px;
    width: 38px;
  }

  .benefits .boxes .topic {
    font-size: 8px;
  }

  .benefits .boxes .topic-text-mob {
    font-size: 6px;
  }

  .benefits-content {
     
     margin-bottom: 45px;
  }


  */

  /* --- AvtiveOffer --- */

  .active-offer-title {
    font-size: 20px;
  }

  .active-offer-undertitle {
    font-size: 20px;
  }


  .active-offer-button._active {
    font-size: 4.3vw;
    width: 77vw;
  }


  /* --- Benefits1 --- */

  .benefits1 {

    padding-left: 12px;
    padding-right: 12px;
  }


  .benefits1 .boxes .box {

    width: calc(100% / 3 -10px);
  }

  .benefits1 .boxes .topic {
    font-size: 8px;
  }

  .icon-image1 {

    height: 36px;
    width: 36px;
  }

  .benefits1-content {
    min-height: 34vh;
  }



  /* --- AboutUs --- */

  .about-us-title {
    font-size: 30px;
    margin-top: 50px;
  }

  .about-us-text {
    font-size: 13px;
  }

  .about-us-text1 {
    font-size: 11px ;
  }

  .about-us-text2 {
    font-size: 11px ;
  }

  .woman1 {
    min-height: 42vh;
    background-size: 80%
  }



  /* --- Offers --- */

  .offers {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 45px;
    padding-bottom: 38px;
  }


  .offers-title {
    font-size: 21px;
    line-height: 24px;
  }

  .offers-text {
    width: 90%;
    font-size: 11px;
  }


  .nutra-tovarka {
    margin-top: 60px;
    font-size: 20px;
  }


  .slide-container-2, .slide-container {
    width: 320px;
  }

  .slide-content, .slide-content-2 {
    padding-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .card-body {
width: 210px;

  }


  .card-info .card-name {
    font-size: 14px;
  }

.swiper-navBtn::before, .swiper-navBtn::after {
font-size: 24px;
top: 12px
}


/* --- Form --- */


.final-form {
  padding-top: 50px;
}

.form-title {
  font-size: 23px;
  margin-top: 0px;
}

.form-undertitle {
  font-size: 23px;
  margin-bottom: 0px;
}


.form-glass {
  padding-top: 35px;
  padding-bottom: 35px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 90vw;
  border-radius: 25px;
  backdrop-filter: blur(20px);
  z-index: 10;
  border: 2px solid transparent;
  background-color: rgba(11, 9, 42, 0.5);
border-color: rgb(253, 66, 255,0.2);
transform: translateX(0px) translateY(130px);
transition: all 1.8s ease 0.7s;
opacity: 0;
}

.select-box {
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  height: 48px;
  margin-bottom: 16px;
  color: #c9c9c9;
  border-radius: 15px;
  
  }
  .select-box select{
  height: 100%;
  padding: 8px 10px;
  padding-left: 20px;
  width: 100%;
  border: none;
  border-radius: 16px;
  -webkit-appearance: none;
  appearance: none;
  font-family: 'ttrunstrialregular';
  background-color: rgba(11, 9, 42, 0.5);
  color: #c9c9c9;
  font-size: 3vw;
  border: 1px solid transparent;
  border-color: rgb(253, 66, 255,0.05);
  
  
  }
  .select-box:after{
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -4px;
  /* border-top: 8px solid #fd42ff; */
  border-top: 8px solid #941e96;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  pointer-events: none;
  }
  
  
  
  
  
  input[type=text] {
  
  width: 80vw;
  height: 48px;
  margin: 8px 0;
  background-color: rgba(11, 9, 42, 0.5);
  color: #ffffff;
  font-size: 3vw;
  font-family: 'ttrunstrialregular';
  box-sizing: border-box;
  display: block;
  border-radius: 15px;
  box-sizing: border-box;
  border: none;
  padding: 12px 20px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid transparent;
  border-color: rgb(253, 66, 255,0.05);
  
  }
  
  input[type=tel] {
  
  width: 80vw;
  height: 48px;
  margin: 8px 0;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
  background-color: rgba(11, 9, 42, 0.5);
  color: #1f1f1f;
  font-family: 'ttrunstrialregular';
  font-size: 3vw;
  box-sizing: border-box;
  display: block;
  border-radius: 15px;
  box-sizing: border-box;
  border: none;
  padding: 12px 20px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
  
  }
  
  
  
  input[type=password] {
  
  width: 80vw;
  height: 48px;
  margin: 8px 0;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
  background-color: rgba(11, 9, 42, 0.5);
  color: #ffffff;
  font-family: 'ttrunstrialregular';
  font-size: 4vw;
  box-sizing: border-box;
  display: block;
  border-radius: 15px;
  box-sizing: border-box;
  border: none;
  padding: 12px 20px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
  
  
  }
  
  
  
  
  
  
  
  
  ::placeholder {
  color: #c9c9c9;  
  font-family: 'ttrunstrialregular';
  font-size: 3vw;
  
  }
  
  
  .finalbutton[type=submit] {
  
  outline: none;
  padding: 10px 0px;
  border-radius: 14px;
  font-size: 3.5vw;
  font-weight: 400;
  background: #fd42ff;
  color: #fff;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 15px;
  transition: all 0.4s ease;
  width: 80vw;
  height: 48px;
  font-family: 'ttrunstrialmedium';
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  margin-bottom: 20px;
  
  }
  
  
  
  
  
  .finalbutton:hover {
  
  border-color: #fd42ff;
  background-color: transparent;
  color: #fd42ff;
  
  }
  
  
  
  .doyouhave {
      
    display: block;  /* Make it a block to allow margin auto */
    width: fit-content; /* Make width only as wide as the text */
    margin: 0 auto;  /* Center horizontally */
    color: #ffffff; /* Your text color */
    text-decoration: none; /* Optional: Remove underline */
    font-family: 'ttrunstriallight';
    font-size: 3vw;
    margin-bottom: 7px;
    position: relative;
    opacity: 0.9;
    
    
  
  }
  
  .signin {
    display: block;  /* Make it a block to allow margin auto */
    width: fit-content; /* Make width only as wide as the text */
    margin: 0 auto;  /* Center horizontally */
    color: #c84aca; /* Your text color */
    font-family: 'ttrunstriallight';
    margin-top: 12px;
    font-size: 3.5vw;
    position: relative;
  }


  /* --- Footer --- */

  footer .logo-photo {
    width: 60px !important;
  }

  .footer-facebook, .footer-tiktok, .footer-instagram {
    width: 16px;
  }

  .footer-content .top .media-icons {
    gap: 7px;
  }

  .footer-content .link-boxes .box li a {
    font-size: 11px;
  }

  footer .footer-content .link-boxes {
    margin-left: 2px;
  }

  footer .footer-content .link-boxes .box {
    width: calc(100% / 2 - 17px);
  }
  



}




@media (max-width: 320px) { 



  .scroll-button a {

    bottom: 15px;
    right: 15px
  }


/* --- SideMenu --- */

nav .navbar .menu a {
  font-size: 11px;
  margin: 0.7vh 0 !important;
}


.signup-menu-mob {
  
    font-size: 3.8vw !important;
    min-width: 65vw;
    margin-top: 2vh !important;
  
}


.fade_rule {
  margin-top: 16vh;
}

.signup-menu-mob:hover {
  background-color: #fff;
  color: #fd42ff !important;
  font-size: 3.5vw !important;
  font-family: 'ttrunstrialmedium'  !important;

}




  /* --- MainBanner --- */

  .logo-photo {
    width: 50px;
  }
  
  .banner-title {
    font-size: 18px;
    line-height: 22px;
  }


  .banner-undertitle {
    font-size: 18px;
    line-height: 22px;
  }

  .banner-text {
    font-size: 10px;
  }

  a.mainbutton {
    font-size: 4.3vw;
    width: 77vw;
    margin-top: 20px;
  }


  .woman {
    background-position: center 32%;
  }

  /* --- Benefits --- */


  .benefits {
    
    background-size: 90%;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-left: 10px;
    padding-right: 10px;
   
  }

  .round {

  display: none;
  }

  .benefits-title {
    font-size: 18px;
    line-height: 20px;
  }

  .benefits-text {
    font-size: 9px;
    margin-top: 10px;
  }

  .icon-image {
    height: 50px;
    width: 50px;
  }

  .benefits .boxes {
    flex-direction: column;
  }

  .benefits .boxes .box {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  .benefits .boxes .topic {
    font-size: 12px;
  }

  .benefits .boxes .topic-text-mob {
    font-size: 9px;
  }

  .benefits-content {
     
     margin-bottom: 45px;
     margin-top: 45px;
  }




  /* --- AvtiveOffer --- */


  .active-offer {
  
    min-height: 350px;
    background-position: center 7%;
  }


  .active-offer-title {
    font-size: 18px;
  }

  .active-offer-undertitle {
    font-size: 18px;
  }


  .active-offer-button._active {
    font-size: 4.3vw;
    width: 77vw;
  }


  /* --- Benefits1 --- */

  .benefits1 {

    padding-left: 12px;
    padding-right: 12px;
    min-height: 80vh !important;
  }

  .benefits1-content {
    min-height: 90vh !important;
  }

  .benefits1 .boxes {
    flex-direction: column;
    width: 80%;
  }

   
  .icon-image1 {
    margin-top: 12px;
    height: 50px;
    width: 50px;
  }
  


  .benefits1 .boxes .box {

    width: 90%;
    
  }

  .benefits1 .boxes .topic {
    font-size: 12px;
    margin-bottom: 15px;
  }

  

  .benefits1-content {
    min-height: 34vh;
  }



  /* --- AboutUs --- */

  .about-us-title {
    font-size: 30px;
    margin-top: 50px;
  }

  .about-us-text {
    font-size: 13px;
  }

  .about-us-text1 {
    font-size: 11px ;
  }

  .about-us-text2 {
    font-size: 11px ;
  }

  .woman1 {
    min-height: 42vh;
    background-size: 80%
  }



  /* --- Offers --- */

  .offers {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 45px;
    padding-bottom: 38px;
  }


  .offers-title {
    font-size: 19px;
    line-height: 21px;
  }

  .offers-text {
    width: 85%;
    font-size: 9px;
  }


  .nutra-tovarka {
    margin-top: 60px;
    font-size: 20px;
  }


  .slide-container-2, .slide-container {
    width: 320px;
  }

  .slide-content, .slide-content-2 {
    padding-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .card-body {
width: 210px;

  }


  .card-info .card-name {
    font-size: 14px;
  }

.swiper-navBtn::before, .swiper-navBtn::after {
font-size: 24px;
top: 12px
}



  

}