@media (min-width: 480px) and (max-width: 980px) {
}

.fa-bars:before {
  font-size: 24px;
}

.facebook, .tiktok, .instagram {
  
 
}




@media (min-width: 480px) and (max-width: 980px) {





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



  
  
  
  /* ---   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: relative ;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.5vh;
    width: 80px ;
    
  }
  
  .logo-mob:hover {
    filter: invert(46%) sepia(35%) saturate(6971%) hue-rotate(274deg) brightness(104%) contrast(108%);
  }
  
  
  
  
  .fade_rule {
    display: block;
    margin-top: 7vh;
    margin-bottom: 2.5vh;
    height: 0.5px;
    background-color: #E6E6E6;
    width: 50%;
    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: 2.7vw;
    font-family: 'ttrunstriallight';
    display: block;
    color: #fff;
    margin: 1vh 0 !important;
  
  }
  
  nav .navbar .menu a:hover{
   color: #fd42ff;

  
  }
  
  
  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: 5vh;
    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: 2.7vw !important;
      position: relative  !important;
      margin-left: auto  !important;
      margin-right: auto  !important;
      padding: 10px 20px !important; 
      text-align: center  !important;
      min-width: 45vw;
      
      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: 2vw;
    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: 2.3vw !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: 2.3vw !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;
    transition: all 0.3s ease;
    cursor: pointer;
 
   
  }
  
  
  
  
    /* =============== Navbar ================== */
        
    
  
  
    .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;
    
    }
    
    
    
    
      nav .navbar{
        width: 90%;
        display: normal;
      }
    
    
      
      .menu-lang {
        display: block;
      }
  
   
      .media-icons {
        display: none;
      }
    
      .logo-photo {
    
        width: 70px;
        
        }
  
  
     
    
      
    
    
      
      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: 4vw;
    line-height: 38px;
    font-family: 'ttrunstrialextrabold';
    margin-bottom: 10px;
    color: #ffffff;
    transform: translate(0px, 0px);
    opacity: 0;
    transition: all 1s ease 0.3s;
    }
    
    

  
    
  .banner-undertitle {
    font-size: 4vw;
    line-height: 38px;
    font-family: 'ttrunstrialextrabold';
    margin-bottom: 10px;
    color: #fd42ff;
    transform: translate(0px, 0px);
    opacity: 0;
    transition: all 1s ease 0.5s;
    }
  
    
  
    .banner-text {
  
      font-size: 2.2vw;  
      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: 18px;
        font-size: 3.4vw;
        font-weight: 400;
        background: #fd42ff;
        color: #fff;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.4s ease;
        width: 60vw;
        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: 60%;
        background-position: center 35%;
        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: 13%;
        background-position: 95% 10%;
        transform: translateX(70px) translateY(0px);
        transition: all 1s ease 0.8s;
        opacity: 0;
      }
      
   
      
      
      .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% 60%;
        transform: translateX(-135px) translateY(150px);
        transition: all 1s ease 0.8s;
        opacity: 0;
      }
      
      
      
      
      
      .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: 6%;
        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: 50vh;
    
     
    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;
      padding-left: 30px;
      padding-right: 30px;
      position: relative; 
      margin-bottom: 50px;
      margin-top: 50px;
      padding-top: 38px;
    
    }
    
    
    .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: 30px;
        font-family: 'ttrunstrialbold';
        line-height: 29px;
        margin-top: 0px;
        
        }
        
        
        
        
        .benefits-text {
        
          margin-top: 12px;
          color: #fdfeff;
          text-align: center;
          font-size: 14px;
          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 - 20px);
        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: 50px;
        width: 50px;
      }
      
    
      
      .benefits .boxes .topic {
        font-family: 'ttrunstrialmedium';
        font-size: 15px;
        color: #ffffff;
        line-height: normal;
        
      }
      
     
  
  
  
      .benefits .boxes .topic-text-mob {
        margin-top: 5px;
        font-family: 'ttrunstriallight';
        font-size: 11px;
        color: #eae9ea;
        opacity: 80%;
        
        
      }
    
    
    
.round {
  height: 50vh;
  width: 100%;
  position: absolute;
  z-index: 9;
  background-image: url(../img/benefits/round.webp);
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: 108% 100%;
  transform: translateX(120px) translateY(100px);
  transition: all 1.5s ease 0.5s;
  opacity: 0;
}
  

.round._active {
  
  transform: translate(0px, 0px);
  opacity: 0.15;

}
  
  
  

.cilyndre {
  height: 50vh;
  width: 100%;
  position: absolute;
  z-index: 9;
  background-image: url(../img/benefits/cilyndre.webp);
  background-repeat: no-repeat;
  background-size: 34%;
  background-position: -11% bottom;
  transform: translateX(-120px) translateY(150px);
  transition: all 1.5s ease 0.5s;
  opacity: 0;
  
 
}


.cilyndre._active {
  
  transform: translate(0px, 0px);
  opacity: 0.15;
}
    
    
      /* =============================== ActiveOffer =========================================== */
    
    
      .active-offer {
        display: flex;
        align-items: center; /* Centers vertically */
        justify-content: center; /* Centers horizontally */
        text-align: center; /* Ensures text alignment */
        min-height: 27vh;
        width: 100%;
        background-image: url(../img/active-offer/active-offer.webp);
        background-size: 90%;
        background-size: cover;
        background-position: 20% 5%;
        position: relative;
        overflow-x: hidden;
        overflow-y: hidden;
      }
      
      
      
      .active-offer-container {
      
      width: 70%;
      margin-right: 0;
      margin-left: auto;
      height: 100%;
      text-align: center;
      justify-content: center;
      
      }
      
      
      .active-offer-title {
      font-family: 'ttrunstrialregular';
      font-size: 3.8vw;
      color: #ececec;
      margin-top: 30px ;
      transform: translateX(0px) translateY(0px);
        transition: all 1.5s ease 0.7s;
        opacity: 1;
      }
      
      .active-offer-title._active {
        transform: translate(0px, 0px);
        opacity: 1;
        }
        
      
      
      .active-offer-undertitle {
        font-family: 'ttrunstrialbold';
        font-size: 3.8vw;
        color: #fd42ff;
        transform: translateX(0px) translateY(0px);
        transition: all 1.5s ease 0.7s;
        opacity: 1;
      
        }
      
      
        .active-offer-undertitle._active {
          transform: translate(0px, 0px);
          opacity: 1;
          
          }
      
      
        .active-offer-button {
          outline: none;
          padding: 10px 20px;
          border-radius: 14px;
          font-size: 2.3vw;
          font-weight: 400;
          background: #fd42ff;
          color: #fff;
          cursor: pointer;
          border: 2px solid transparent;
          transition: all 0.4s ease;
          width: 38vw;
          font-family: 'ttrunstrialmedium';
          display: block;
          margin-left: auto;
          margin-right: auto;
          margin-top: 18px;
          text-align: center;
          transform: translateX(0px) translateY(0px);
          transition: all 0.4s ease;
        opacity: 1;
          
          }
      
          .active-offer-button._active {
            
            transform: translate(0px, 0px);
            opacity: 1;    
            }
      
      
          
      .active-offer-button:hover{
        
        background-color: #ffffff;
        color: #fd42ff;
      }
      
      
      
      
    
    
    
    
    /* ================== Benefits1 ===================== */
    
  
  
  
    .benefits1 {


      min-height: 30vh;
      width: 100%;
      margin-bottom: 0px;
      position: relative;
     overflow-x: hidden;
     overflow-y: hidden;
     align-items: center; /* Centers vertically */
      justify-content: center; /* Centers horizontally */
      text-align: center; /* Ensures text alignment */
    }
     
     
    
    .benefits1-content {

      min-height: 20vh;
      width: 90%;
      margin: 90px auto;
      align-items: center; /* Centers vertically */
      justify-content: center; /* Centers horizontally */
      text-align: center; /* Ensures text alignment */
    
    }
    
   
    
    
    
    
    .benefits1 .boxes{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      
      
      
    
    }
    
    
    .benefits1 .boxes .box{
      margin: 20px 0;
      width: calc(100% / 3 - 20px);
      text-align: center;
      border-radius: 20px;
      padding: 25px 25px;
      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: 80px;
      width: 80px;
      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;
      
    }
    
  
    
    .icon-image1 {
      height: 80px;
      width: 80px;
    }
    
    
  
    
    .benefits1 .boxes .topic {
      font-family: 'ttrunstrialmedium';
      font-size: 2.5vw;
      color: #f3ebf7;
      margin-bottom: 20px;
      
    }
    
    
    
    
    
    
    /* =================== AboutUs ========================= */
    
    .about-us {

      min-height: 50vh;
      position: relative;
      background-color: #151515;
      background-image: url(../img/about-us/background.webp);
      background-size: cover;
      background-position: center;
     overflow-x: hidden;
     overflow-y: hidden;
     padding-top: 0px;
    
    }
    
    

    
    .woman1 {
      display: block;
      height: 50vh;
      width: 100%;
      position: absolute;
      z-index: 10;
      background-image: url(../img/about-us/woman1.webp);
      background-repeat: no-repeat;
      background-size: 45%;
      background-position: bottom right;
      transform: translateX(0px) translateY(0px);
      transition: all 2.5s ease 1.5s;
      opacity: 0;
    }
    
    
    .woman1._active {
      
      transform: translate(0px, 0px);
      opacity: 1;
    
    }



    .drop3 {
      display: block;
      height: 50vh;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      position: absolute;
      z-index: 12;
      background-image: url(../img/main-page/img-home/drop.webp);
      background-repeat: no-repeat;
      background-size: 8%;
      background-position: 95% 5%;
      transform: translateX(5%) translateY(-1%);
      transition: all 2.5s ease 1.5s;
      opacity: 0;
    }
    
    
    .drop3._active {
      
      transform: translate(0px, 0px);
      opacity: 0.8;
    
    }
    
    
    
    
    
    .about-us-container {
      padding-top: 0px;
      min-height: 50vh;
      width: 60%;
      background-size: 100%;
      position: relative;
      margin-left: 0; 
      margin-right: auto;
    
     z-index: 11;
    
     display: flex;
     justify-content: center; /* Centers content inside */
     align-items: center; /* Ensures center alignment */
    
    
    
      
    }
    
    
    .about-us-group {
      margin-top: 0;
    
    margin-left: 10%;
    margin-right: 0px;
    
    
    
    }
    
    
    .about-us-title {
    
    font-size: 6.5vw;
    padding-top: 0px;
    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: 2.5vw;
      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: 20px;
          font-size: 2.2vw;
          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: 20px;
              font-size: 2.2vw;
              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: 110px;
        padding-bottom: 100px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        
        }
        
  
        
        .offers-title {
            color: #fd42ff;
            text-align: center;
            font-size: 4vw;
            line-height: 42px;
            font-family: 'ttrunstrialbold';
            width: 90%;
            position: relative;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0px;
            
            }
            
            .offers-text {
            
              margin-top: 12px;
              color: #fdfeff;
              text-align: center;
              font-size: 2vw;
              font-family: 'ttrunstrialregular';
              width: 85%;
              margin-left: auto;
            margin-right: auto;
              margin-bottom: 0px;
            }
        
           
        
        
            .nutra-tovarka {
                color: #fd42ff;
                text-align: center;
                font-size: 3.5vw;
                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: 680px;
                      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: 680px;
                      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: 260px; 
  
                  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: 18px;
                  font-weight: 700;
                  margin-bottom: 10px;
                  transition: transform .3s ease-out;
                  font-family: 'ttrunstrialdemibold' ;
              }
              
              .card-info .card-description{
                  color: #ffffff;
                  opacity: 70%;
                  font-size: 14px;
                  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: 80vh;
      width: 100%;
      position: relative;
      overflow-x: hidden;
       overflow-y: hidden;
       background-repeat: no-repeat;
       padding-top: 10vh;
        
      }
  
  
  
      .form-title {
        color: #fdfeff;
        text-align: center;
        font-family: 'ttrunstrialbold';
        font-size: 5vw;
     margin-top: 0px;
        width: 80%;
        position: relative;
          margin-left: auto;
          margin-right: auto;
        
        }
      
      
        .form-undertitle {
          color: #fd42ff;
          text-align: center;
          font-family: 'ttrunstrialbold';
          font-size: 5vw;
          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: 68vw;
            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: 60vw;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  height: 72px;
  margin-bottom: 25px;
  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: 2.4vw;
  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: 60vw;
  height: 72px;
  margin: 8px 0;
  background-color: rgba(11, 9, 42, 0.5);
  color: #ffffff;
  font-size: 2.4vw;
  font-family: 'ttrunstrialregular';
  box-sizing: border-box;
  display: block;
  border-radius: 20px;
  box-sizing: border-box;
  border: none;
  padding: 12px 20px;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid transparent;
  border-color: rgb(253, 66, 255,0.05);
  
  }
  
  input[type=tel] {
  
  width: 60vw;
  height: 72px;
  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: 2.4vw;
  box-sizing: border-box;
  display: block;
  border-radius: 20px;
  box-sizing: border-box;
  border: none;
  padding: 12px 20px;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
  
  }
  
  
  
  input[type=password] {
  
  width: 60vw;
  height: 72px;
  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: 2.4vw;
  box-sizing: border-box;
  display: block;
  border-radius: 20px;
  box-sizing: border-box;
  border: none;
  padding: 12px 20px;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
  
  
  }
  
  
  
  
  
  
  
  
  ::placeholder {
  color: #c9c9c9;  
  font-family: 'ttrunstrialregular';
  font-size: 2.4vw;
  
  }
  
  
  .finalbutton[type=submit] {
  
  outline: none;
  padding: 10px 0px;
  border-radius: 14px;
  font-size: 3vw;
  font-weight: 400;
  background: #fd42ff;
  color: #fff;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 18px;
  transition: all 0.4s ease;
  width: 60vw;
  height: 72px;
  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.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: 2.4vw;
    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{
  
    display: none;
  }
  

}


@media (min-width: 480px) and (max-width: 700px) {


  .benefits-title {

    font-size: 27px;
    line-height: 30px;
    width: 60%;
  }


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

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

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


  .active-offer {
    background-position: 10% 5%;
  }

  .active-offer-button {
    padding: 10px 10px;
    width: 42vw;
  }


  /* --- benefits1 --- */

  .icon-image1 {
    height: 65px;
    width: 65px;
  }

  .benefits1 .boxes .topic {
    font-size: 2vw;
  }

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


    
  .card{
    perspective: 300px;
    
    
}

  .card-body {
    width: 460px;



}

}