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

.section-shop{
    z-index: 8 !important;
}

.container-image-tech{
    height: 14vh;
    width: fit-content;
    overflow: visible;
}

.no-dp{
    display: none !important;
}

.main-contact h4{
    font-family: Distruction;
    color: #6327CE ;
    font-size: clamp(32px,5.2vw,5.5rem) ;
    text-transform: uppercase;
    font-weight: 700 ;
    line-height: 100%;

}



.main-contact h3{
    font-family: Distruction;
    color: #6327CE ;
    font-size: clamp(25px,3.2vw,3.5rem) ;
    text-transform: uppercase;
    font-weight: 700 ;
    line-height: 100%;

}



.main-contact form {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: center;
    position: relative;
    z-index: 6;
    }

    .input-with-date{
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }


  
      
      input[type="text"],
      select {
       
        font-family: Segoe;
        border: 1px solid #CAB8E9;
        color: #B8AAD0;
        border-radius: 10px;
        outline: none;
        height: 55px;
        width: 100%;
        min-width: 125px;
        font-size: clamp(15px,1.1vw,1.4rem);
   
        font-weight: 300;
        line-height: 100%;
      }
      
      input[type="text"]::placeholder {
        color: #aaa; /* Color del placeholder */
      }
      
      .input-with-date button {
        padding: 10px;
        position: absolute;
        top: 45%;
        right: 1%;
        border: none;
        background-color: white; /* O el color que prefieras para el fondo */
        cursor: pointer; /* Cambia el cursor a una mano cuando se pasa el mouse */
      }

      .imagen-abosulta{
        position: absolute;
        top: 47.5%;
        right: 2%;
        z-index: -1001;
      }
      
  
      
      /* Estilo para el select */
      select {
        -webkit-appearance: none; /* Remueve la apariencia nativa en WebKit/Blink */
        -moz-appearance: none; /* Remueve la apariencia nativa en Firefox */
        appearance: none; /* Remueve la apariencia nativa */
        background: url('../img/') no-repeat right; /* Icono de flecha desplegable */
        background-size: 20px 20px; /* Tamaño del ícono de flecha */
        padding-right: 30px; /* Ajusta para evitar que el texto sobrescriba el ícono */
      }
      
      .input-with-date label{
        padding-bottom: .75rem !important;
      }

      /* Opcional: Estilos para el botón cuando se pasa el mouse */
    







    .main-login form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: start;
        position: relative;
        z-index: 6;
        }

        .no-padd-height{
            height: fit-content !important;
        }
    
        .contenido-account2 form {
            width: 70%;
            display: flex;
            flex-direction: column;
            gap: 3rem;
            transition: all .5s ease;
            align-items: start;
            position: relative;
            z-index: 6;
            }
        
            .contenido-account2 h6{
                font-family: Segoe;
    color: #A6A2AE ;
    font-size: clamp(13px,.85vw,.9rem) ;

    font-weight: 200 ;
    line-height: 100%;
    margin-bottom: .5rem;
            }
    
            #special{
                font-family: Segoe;
    color: #A6A2AE ;
    font-size: clamp(15px,1vw,1.1rem) ;

    font-weight: 200 ;
    line-height: 130%;
    margin-bottom: .5rem;
            }
    
    .input-div{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .inputs-div{
        display: flex;
        width: 100%;
        gap: 3rem;
        overflow: visible !important;
    }

    .inputs-div button, .inputs-div a{
        width: 50%;
        margin-top: 1.5rem;
        height: 60px;
        border-radius: 30px;
        border: none;
        font-family: Segoe;
        transition: all .3s ease;
        color: #A6A2AE ;
        font-size: clamp(13px,1.15vw,1.2rem) ;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    

    .mt-1{
        margin-top: .5rem !important;
    }

    .inputs-div a:first-child{
        background-color: rgba(255, 255, 255, 0);
        color: #6327CE;
        border: 1px solid #6327CE;
    }

    .inputs-div button:first-child{
        background-color: rgba(255, 255, 255, 0);
        color: #6327CE;
        border: 1px solid #6327CE;
    }

    .inputs-div button:last-child{
        background-color: #6327CE;
        color: white;
    }


    .inputs-div a:last-child{
        background-color: #6327CE;
        color: white;
    }


    .inputs-div button:hover{
        opacity: .6;

    }



    .text-decoration{
        text-decoration: underline;
    }
    
    .contenido-account2-div{
        width: 90%;
        margin-top: 12rem;
        display: flex;

    }

    .informacion-especial {
        display: flex;
        gap: .7rem;
        align-items: start !important;
        width: 100%;
        padding-left: 3rem;
    }

    .informacion-especial h2{
        font-weight: 200;
        font-family: Segoe;
        transition: all .3s ease;
        font-size: clamp(13px,1.55vw,1.6rem) !important;
    }

    .input-with-date select{
        padding-left: 1.25rem;
    }


.contenido-account2{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    align-items: center;
    transition: all 1s ease;
}

.bg-white{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: #FFF;
    z-index: 1010;
}


.info-message h3{
    font-weight: 700;
    font-family: Segoe;
    transition: all .3s ease;
    color: #6327CE;
    font-size: clamp(23px,3.15vw,3.12rem) !important;
}

.info-message p{
    font-weight: 200;
    font-family: Segoe;
    width: 60%;
    text-align: center;
    transition: all .3s ease;
    padding-bottom: 1.5rem;
    color: #7459A6;
    font-size: clamp(17px,1.35vw,1.4rem) !important;
}
.w-75{
    width: 65%;
}

.mt-negative{
    margin-top: -7rem;
}

.info-cuadro3{
    width: 90%;
    margin-top: -5rem !important;
}

.col{
    flex-direction: column !important;
}




.active-li{
    text-decoration: underline !important;
}

.move-left{
    transform: translateX(-100%);
    transition: all 1s;
    opacity: 0;
    position: absolute !important;
}


.move-right{
    transform: translateX(100%);
    transition: all 1s;
    opacity: 0;
    position: absolute !important;
}


.delete{
    margin-top: 16rem !important;
}

.info-message{
    width:50% ;
    z-index: 1011;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 12rem;
    position: absolute;
    top: 0%;
    align-items: center;
    justify-content: start;
    height: 100%;

}

    .informacion-especial h4{
        font-weight: 200;
        font-family: Segoe;
        transition: all .3s ease;
        color: hsla(0, 0%, 0%, 0.253) ;
        font-size: clamp(13px,1.25vw,1.3rem) ;
    }

    .contenido-account2-div2{
        width: 90%;
        gap: 2rem;
        display: flex;
        flex-direction: column;
    }
    
    .contenido-account2 form label{
    font-family: Segoe;
    color: #7459A6 ;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    line-height: 100%;
}

.main-contact form label{
    font-family: Segoe;
    color: #7459A6 ;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    line-height: 100%;
}


.main-login form label{
    font-family: Segoe;
    color: #7459A6 ;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    line-height: 100%;
}
.nop{
    border: none !important;
    padding-left: 0rem !important;
}
.div-login{
    display: flex;
    gap: 4rem;
    width: 60%;
    margin-top: 2rem;
    justify-content: space-between;
    
}

.h6-new{
    margin-top: -2.5rem;
}

.gap-4{
    gap: 4rem !important; 
}

#account-1 > *{
    transition: all 1s ease-in-out;
}

.account-btn{
    transition: all .5s ease;
}

.account-btn:hover{
    transform: scale(1.1);
}

.w-60{
    width: 60% !important;
    padding-bottom: 2rem;
}

.h4-width{
    width: 40%;
    text-align: center;
    line-height: 120% !important;
}

.h5-width{
    width: 50%;
    text-align: center;
    line-height: 120% !important;
}


.main-contact form input{
    font-family: Segoe;
    border: 1px solid #CAB8E9;
    color: #B8AAD0 ;
    border-radius: 10px;
    outline: none;
    padding-left: 1.25rem;
    height: 55px;
    width: 100%;
    min-width: 125px;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    line-height: 100%;
}


.contenido-account2 form input{
    font-family: Segoe;
    border: 1px solid #CAB8E9;
    color: #B8AAD0 ;
    border-radius: 10px;
    outline: none;
    padding-left: 1.25rem;
    height: 55px;
    width: 100%;
    min-width: 125px;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    line-height: 100%;
}


.main-contact form button{
    font-family: Segoe;
    border: 1px solid #6327CE;
    background-color: #6327CE ;
    color: white;
    border-radius:50px;
    margin-top: .5rem;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .75rem;
    width: 40%;
    min-width: 125px;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    position: relative;
    line-height: 100%;
    cursor: pointer;
    transition: all .5s ease;
}


.main-contact-form-button{
    font-family: Segoe;
    border: 1px solid #6327CE;
    background-color: #6327CE ;
    color: white;
    border-radius:50px;
    margin-top: .5rem;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .75rem;
    width: 25%;
    min-width: 125px;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    position: relative;
    line-height: 100%;
    cursor: pointer;
    transition: all .5s ease;
}


.main-login form input::placeholder{

    color: #B8AAD0 ;

}


.main-login form input{
    font-family: Segoe;
    border: none;
    color: #B8AAD0 ;
    border-radius: 10px;
    outline: none;

    height: 100%;
    width: 100%;
    background-color: transparent;

    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    line-height: 100%;
}

.input-form-div2 img{
width: 30px;
}

.second-login{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background-color: #FAF6FF;
}


.second-login div h5{
    font-family: Segoe;
    border: none;
    color: #6327CE ;
    border-radius: 10px;
    outline: none;
    background-color: transparent;
    font-size: clamp(20px,1vw,1.15rem) ;
    text-transform: capitalize;
    font-weight: 800 ;
    line-height: 100%;
}

.second-login div h6{
    font-family: Segoe;
    border: none;
    color: #978bab ;
    border-radius: 10px;
    outline: none;
    background-color: transparent;
    font-size: clamp(14px,1.15vw,1.2rem) ;
    text-transform: capitalize;
    font-weight: 400 ;

    line-height: 130%;
}

.second-login div{
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

.second-login div ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .75rem;

}

.second-login div ul li{
    font-family: Segoe;
    border: none;
    color: #978bab ;
    border-radius: 10px;
    outline: none;
    background-color: transparent;
    font-size: clamp(14px,1vw,1.1rem) ;
    text-transform: capitalize;
    width: 100%;
    font-weight: 400 ;
    list-style: circle !important;
    line-height: 120%;
}

.absolute-iamgen{
    position: absolute;
    top: 12.5px;
    cursor: pointer;
    right: 2.5%;
    width: 100%;
    height: fit-content;
    z-index: 1;
}

.input-form-div2{
    font-family: Segoe;
    border: 1px solid #CAB8E9;
    color: #B8AAD0 ;
    border-radius: 10px;
    outline: none;
    padding-left: .45rem;
    height: 55px;
    width: 100%;
    display: flex;
    position: relative;
    justify-content: start;
    gap: .7rem;
    background-color: transparent;
    min-width: 125px;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    line-height: 100%;
}


.form-p{
    font-family: Segoe;
    color: #6327CE ;
    margin-top: .5rem;
    outline: none;
    width: 100%;
    background-color: transparent;
    font-size: clamp(15px,1.05vw,1.1rem) ;
    text-transform: capitalize;
    font-weight: 700 ;
    line-height: 100%;
}


.form-p2 span{
    font-weight: 700 ;
    color: #6327CE ;

}

.form-p2{
    font-family: Segoe;
    color: #A6A2AE ;

    outline: none;
    width: 100%;
    background-color: transparent;
    font-size: clamp(15px,1.05vw,1.1rem) ;
    text-transform: capitalize;
    font-weight: 400 ;
    line-height: 100%;
}

.main-login form button{
    font-family: Segoe;
    border: 1px solid #6327CE;
    background-color: #6327CE ;
    color: white;
    border-radius:50px;
    margin: .5rem 0rem;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .75rem;
    width: 100%;
    min-width: 125px;
    font-size: clamp(15px,1.1vw,1.4rem) ;

    font-weight: 300 ;
    position: relative;
    line-height: 100%;
    cursor: pointer;
    transition: all .5s ease;
}


.a-button{
    font-family: Segoe;
    border: 1px solid #6327CE;
    background-color: #6327CE ;
    color: white;
    border-radius:50px;
    margin: .5rem 0rem;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .75rem;
    width: 100%;
    min-width: 125px;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-decoration: none;
    font-weight: 300 ;
    position: relative;
    line-height: 100%;
    cursor: pointer;
    transition: all .5s ease;
}



.main-contact ul{
    display: flex;
    justify-content: center;
    gap: 1rem;
    position: relative;
    z-index: 6;

}

.main-contact ul img{
  height: auto;
  max-width: 50px;
  width: 2.5rem;
    
}


.main-contact{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    gap: 1rem;
    width: 100%;
    padding-top: 7rem;
    height: 100vh;
}

.pt-3{
    padding-top: 1rem !important;

}


.main-login{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    position: relative;
    gap: 1rem;
    width: 100%;
    padding-top: 13rem;
    height: fit-content;
}



.main-login h4{
    font-family: Distruction;
    color: #6327CE ;
    font-size: clamp(22px,3.2vw,3.5rem) ;
    text-transform: uppercase;
    font-weight: 700 ;
    line-height: 100%;

}

.w-30{
    width: 22.5% !important;
    margin-top: 3rem !important;
}

.main-contact h5{
    font-family: Segoe;
    color: #7459A6 ;
    font-size: clamp(14px,1vw,1.1rem) ;
    width: 20%;
    text-align: center;
    font-weight: 300 ;
    line-height: 125%;

}

.elementos-absolutos-contact{
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0%;
    z-index: 5;
    
}

.elementos-absolutos-contact img:nth-child(1){
    width: 25%;
    position: absolute;
    right: 12%;
    top: -13%;
    transform: translate(50%,0%);
}

.elementos-absolutos-contact img:nth-child(2){
    width: 20%;
    position: absolute;
    right: 0%;
    bottom: -5%;
    z-index: 5;
    transform: translate(50%,0%);
}

.first-login{
    width: 40%;
}

.gradient5{
    width:40%;
    height: 50%;
    background-color: rgba(186, 115, 245, 0.603);
    position: absolute;
    z-index: 4;
    bottom:0%;
    right:  -10%;
    filter: blur(100px);
    
transform: translate3d(0, 0, 0);
}


.main-contact form button:hover{
opacity: .6;
}

.final-div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 95%;
    height: 15%;
    border-top: 1px solid #C0B3D9;
}



.final-div h1{
    font-family: Distruction;
    color: #6327CE ;
    font-size: clamp(16px,1.6vw,1.75rem) ;
    font-weight: 700 ;
    line-height: 100%;
}

.final-div2{
    display: flex;
    align-items: center;
    gap: .5rem;
}

.father-divisions{
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    overflow-y: scroll;
    align-items: center;

}

.final-div2 h4{
    font-family: Segoe;
    color: #6327CE ;
    font-size: clamp(16px,1.2vw,1.35rem) ;
    font-weight: 400 ;
    line-height: 100%;
}

.cuadro-div{
    width: 100%;
    position: relative;
    border: 1px solid #6327CE;
    border-radius: 8px;
    display: flex;
    height: 550px;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}


.cuadro-div2{
    width: 100%;
    position: relative;
    border: 1px solid #6327CE;
    border-radius: 8px;
    display: flex;
    margin-top: 3rem;
    height: 150px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cuadro-div2 h2{
    font-family: Segoe;
    color: #7459A6 ;
    font-size: clamp(16px,1.2vw,1.35rem) ;
    font-weight: 400 ;
    line-height: 100%;
}

.info-cuadro-div1{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.info-cuadro-div1 h3{
    font-family: Segoe;
    color: #6327CE ;
    font-size: clamp(16px,1.6vw,1.75rem) ;
    font-weight: 700 ;
    line-height: 100%;
}

.info-cuadro-div1 p{
    font-family: Segoe;
    color: #6327CE ;
    font-size: clamp(16px,1.6vw,1.75rem) ;
    font-weight: 700 ;
    line-height: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    justify-content: center;
}

.division-div{
    display: flex;
    width: 95%;
    justify-content: start;
    align-items: center;
    height: 15%;
}

.division-div4{
    width: 100%;
    display: flex;
    height: 100%;
    border-top:  1px solid #C0B3D9;
    padding: 1.5rem 0rem;
}

.division-div3{
    display: flex;
    width: 95%;
    justify-content: start;
    align-items: start;
    height: 50%;

}

.boton-contact{
    margin-top: 2rem;
    min-width:180px ;
    width: 13.5vw;
    max-width:15rem ;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5.5vh;
    min-height: 45px;
    max-height: 7rem;
    color: white;
    position: relative;
    z-index: 1006;
    cursor: pointer;
    transition: all .5s ease;
    background-color: #6327CE;
}

.div-footer-padrec{
    justify-content: end;
    align-items: end;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-footer{
    margin-top: 2rem;
    min-width:180px ;
    width: 13.5vw;
    max-width:15rem ;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    height: 5.5vh;
    min-height: 45px;
    max-height: 7rem;
    color: #6327CE;
    position: relative;
    z-index: 1006;
    cursor: pointer;
    transition: all .5s ease;
    background-color: white;
}

.boton-contact:hover{
transform: scale(1.1);
}


.division-div1{
    display: flex;
    width: 55%;
    justify-content: start;
    height: 100%;
    gap: 2.5rem;
    align-items: center;
}


.division-div1 div{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.division-div1 div h3{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-family: Distruction;
    color: #6327CE ;
    font-size: clamp(16px,1.3vw,1.35rem) ;
    font-weight: 700 ;
    text-transform: capitalize;
    line-height: 100%;
}

.division-div1 div p{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-family: Segoe;
    color: #7459A6 ;
    font-size: clamp(13px,1vw,1.15rem) ;
    font-weight: 700 ;
    text-transform: capitalize;
    line-height: 100%;
}


.division-div1 img{
    height:100%;
    border-radius: 20px;
}


.division-div2{
    display: flex;
    width: 45%;
    height: 100%;
    justify-content: space-between;

    align-items: center;
}


.division-div2 div{
  width: 33.3%;
  justify-content: center;
  display: flex;
}

.division-div1 h2{
    font-family: Segoe;
    color: #7459A6 ;
    font-size: clamp(22px,1.3vw,1.35rem) ;
    font-weight: 700 ;
    text-transform: capitalize;
    line-height: 100%;
}


.division-div2 h2{
    font-family: Segoe;
    color: #7459A6 ;
    font-size: clamp(16px,1.3vw,1.35rem) ;
    font-weight: 700 ;
    line-height: 100%;
}

.info-cuadro{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 4rem;
}

.main-contact form textarea{
    font-family: Segoe;
    border: 1px solid #CAB8E9;
    color: #B8AAD0 ;
    border-radius: 10px;
    padding-left: .75rem;
    resize: none;
    padding-top: .75rem;
    outline: none;
    height: 135px;
    width: 100%;
    min-width: 125px;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    line-height: 100%;
}

.main-contact form textarea::placeholder{
    font-family: Segoe;
    color: #B8AAD0 ;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    line-height: 100%;
}



.main-contact form input::placeholder{
    font-family: Segoe;
    color: #B8AAD0 ;
    font-size: clamp(15px,1.1vw,1.4rem) ;
    text-transform: capitalize;
    font-weight: 300 ;
    line-height: 100%;
}



.main-contact h6{
    font-family: Segoe;
    color: #7459A6 ;
    font-size: clamp(16px,1.6vw,1.8rem) ;

    font-weight: 300 ;
    line-height: 100%;
}

.section-checkout{
    padding-top: 8rem;
    justify-content: center;
    display: flex;
    width: 100%;
    height: fit-content;
}

.div-total{
    border: 2px solid #6327CE;
    padding: 2rem 0rem;
    border-radius: 30px;

    width: 90%;
    display: flex;
    align-items: end;
    flex-direction: column;
    align-items: center;
}


.totals2{
    width: 100% !important;

    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.total-div-h3{
    font-family: Distruction;
    color: #6327CE !important;
    font-size: clamp(18px,1.2vw,1.5vw) !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    line-height: 100%;
}


.total-div-p{
    font-family: Segoe;
    color: #7459A6 !important;
    font-size: clamp(14px,.8vw,.9vw) !important;
    font-weight: 500 !important;
    line-height: 100%;
    padding-top: .5rem;
}

.div-total form{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 90%;
    margin: .5rem 0rem;
}

.div-total div{
    width: 90%;

}

.section-checkout-div{
    width: 90%;
    display: flex;
    justify-content: space-between;
}

.left-check{ 
display: flex;
flex-direction: column;
width: 70%;
margin-top: 3rem;
}

.left-check h1{ 
    font-family: Distruction;
    color: #6327CE;
    font-size: clamp(22px,2.2vw,2.5vw);
    text-transform: uppercase;
    line-height: 100%;
    padding-bottom:1rem ;
    width: 80%;
    border-bottom: 1.5px solid #6327CE;
}

.left-check h5{ 
    font-family: Segoe;
    color: #6327CE;
    font-size: clamp(16px,1.1vw,1.2vw);
    line-height: 100%;
    padding:.5rem 0rem;
}

.divs-first div{
display: flex;
flex-direction: column;
height: 60px;
width: 45%;
}



.divs-first div input{
    border: 1.5px solid #6327CE;
    border-radius: 5px ;
    height: 100%;
    width: 100%;
    outline: none;
}

.left-check form{
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.divs-first{
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0rem;
    
}

.div-first{
    display: flex;
    flex-direction: column;  
    height: 60px;

}

.divs-first div label{
    font-family: Segoe;
    font-size: clamp(14px, .85vw,.9vw);
    margin-bottom: .4rem;
    color: #7459A6 !important;
    font-weight: 600;
}

.div-first label{
    font-family: Segoe;
    margin-bottom: .4rem;
    font-size: clamp(14px, .85vw,.9vw);
    color: #7459A6 !important;
    font-weight: 600;
}

.div-first input{
    border: 1.5px solid #6327CE;
    border-radius: 5px ;
    height: 100%;
    outline: none;
}

.div-first input::placeholder{
    font-size: clamp(12px, .85vw,.9vw);
    color: #7459A6 !important;
    padding-left: .4rem;
}

.div-first span{
    color: red;
}

.div-first select{
    border: 1.5px solid #6327CE;
    border-radius: 5px ;
    height: 100%;
    color: #7459A6 !important;
    outline: none;
}

.right-check{
    display: flex;
    flex-direction: column;
    align-items:end;
    gap: 1.5rem;
    width: 30%;
}

.other-divs-div{
    display: flex ;
    flex-direction: column;
    gap: .5rem;
}

.p-last{
    width: 90%;
    font-family: Segoe;
    color: #7459A6 !important;
    font-size: clamp(14px,.8vw,.9vw) !important;
    font-weight: 700 !important;
    line-height: 130%;
    text-align: justify;
    padding-top: 0.5rem;
}

.right-check button{
    color: white;
    background-color: #6327CE;
    border: none;
    font-family: Segoe;
    font-size: clamp(16px,1.1vw,1.2vw) !important;
    font-weight: 400 !important;
    border-radius: 30px;
    line-height: 130%;
    width: 90%;
    height: 50px;
}

.div-input div{
    width: 100% !important;
    display: flex;
    background-color: #FFF;
    border: 1.5px solid #6327CE;
    align-items: center;
    border-radius: 5px;
    padding: 0rem .5rem;
}

.div-input div input{
    width: 100% !important;
    display: flex;
    background-color: #FFF;
    outline: none;
    color: #7459A6;
    border: none;
    height: 100%;
}


.div-input div input::placeholder{
    color: #7459A6;
}

.div-input label{
    color: #7459A6;
    font-weight: 700;
    font-family: Segoe;
}

.div-input{
    width: 100% !important;
    gap: .5rem;
    display: flex;
    flex-direction: column;
}

.div-total div input{
    width: 100%;
}



.other-divs{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.other-divs-div div{
    width: 50% !important;
    display: flex;
    background-color: #FFF;
    justify-content:center ;
}

.other-divs-div label{
    color: #7459A6;
    font-weight: 700;
    font-family: Segoe;
}

.other-divs-div div input{
    width: 100% !important;

    background-color: #FFF;
    border: 1.5px solid #6327CE;
    height: 5vh;
    display: flex;
padding: 0rem .5rem;
    border-radius: 5px;

}

.other-divs-div div input::placeholder{
    color: #7459A6;
}

.totals2 div{
    display: flex;
    width: 100%;
    justify-content: space-between ;
    align-items: center;
}

.totals2 div h4{
    font-family: Segoe;
    font-size: clamp(14px,.9vw,1vw) ;
    color: #7459A6;
    font-weight: 300;
}


.totals2 div p{
    font-family: Segoe;
    color: #BB73F5 !important;
    font-size: clamp(18px,1.2vw,1.3vw) !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    line-height: 100%;
}


.especial-total{
    padding-top: 2rem;
}

.especial-total h4{
    font-size: clamp(16px,1.4vw,1.6vw) !important;
}

::-webkit-scrollbar{
    display: none;
}

.drag-high{
    display: none;
}

@font-face {
    font-family: Distruction;
    src: url('../fonts/Distruction.otf');
  }
  
  @font-face {
    font-family: Segoe;
    src: url('../fonts/Segoe\ UI.ttf');
  }

section{
    height: 100vh;    
    position: relative;
}

.cart-right{
    width: 100%;
    height: 100vh;
    position: fixed;
   
    backdrop-filter: blur(20px);
    z-index: -1004;
    transition: all .5s ease-in-out;

}



.cart-right-div{
    width: 35%;
    position: fixed;
    transition: all .8s ease;
    height: 100%;
    right: -100vw;
    background-color: #FFF;
    z-index: -1006;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.342);
-webkit-box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.342);
-moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.342);
}

.cart-titles{
    width: 85%;
    margin-top: .4rem;
    height: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-titles h2{
    font-family: Distruction;
    color: #6327CE;
    font-size: clamp(25px,2.2vw,2.5vw);
    text-transform: uppercase;
    line-height: 100%;
}


.cart-titles button{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
}

.cart-body{
    width: 85%;
    height: 40%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: visible !important;
    gap: 1rem;
}

.cart-body-div{
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
    height: 45%;
    padding-bottom:1rem ;
    overflow: visible !important;
    border-bottom: 1px solid #6327CE;
}

.cart-body-div img{
    width: auto;
    height: 13vh;
    border-radius: 20%;
    object-fit: contain;
}

.cart-body-div div{
    display: flex;
    flex-direction: column;
    justify-content: start;

}

.cart-body-div div div{
    display: flex;
    flex-direction: row;
    border-radius: 100px;
    width: 110px;
    height: 40px;
    align-items: center;
    margin-top: 1.2rem;
    justify-content: space-between;
    border: 1px solid #6327CE;
}

.cart-body-div div div button{
    display: flex;
    flex-direction: row;
    border-radius: 100px;
    width: 30px;
    height: 100%;
    justify-content: center;
    
    font-size: clamp(14px,.9vw,1vw);
    font-weight: 400;
    color: #6327CE;
    align-items: center;
    background-color: transparent;
    border: none;
}


.cart-body-div div div span{
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;
    font-family: Segoe;
    
    font-size: clamp(14px,1.1vw,1.2vw);
    font-weight: 700;
    color: #6327CE;
}

.cart-body-div div h4{
    font-family: Distruction;
    color: #6327CE;
    font-size: clamp(13px,1.2vw,1.3vw);
    text-transform: uppercase;
    line-height: 100%;
    margin-bottom: .2rem;
}

.cart-body-div div p{
    font-family: Segoe;
    color: #7459A6;
    font-size: clamp(11px,.9vw,1vw);

    font-weight: 500;
    line-height: 100%;
}

.delete-div{
    width: 12%;
    display: flex;
    flex-direction: column;
    justify-content: space-between !important;
    padding: .5rem 0rem;
    height: 100%;
    overflow: visible !important;
}

.delete-div > *{
    overflow: visible !important;
}

.cart-total{
    width: 85%;
    height: 15%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 0rem ;
    overflow: visible !important;

}

.totals{

    margin-top: .3rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.cart-total a{
    margin-top: 1rem;
    width: 100%;
    background-color: #6327CE;
    color: white;
    text-transform: capitalize;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42%;
    border-radius: 35px;
overflow: visible !important;
    box-shadow: 0px 0px 25px 0px rgba(107, 47, 210, 0.452);
    font-family: Segoe;
    
    font-size: clamp(18px,1.5vw,1.6vw);
}






.totals div{
    display: flex;
    width: 100%;
    justify-content: space-between ;
    align-items: end;
}

.cart-total h3{
    font-family: Distruction;
    color: #6327CE !important;
    font-size: clamp(18px,1.7vw,1.8vw) !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    line-height: 100%;
    border-bottom: 1px solid #6327CE;
    padding-bottom: 1rem;
}


.totals div h4{
    font-family: Segoe;
    font-size: clamp(14px,.8vw,.9vw) ;
    color: #7459A6;
    font-weight: bold !important;
}

.totals-last h4 {
    font-family: Segoe;
    font-size: clamp(24px,1.5vw,1.6vw) !important;
    color: #7459A6;
    font-weight: bold !important;
}

.totals div p{
    font-family: Distruction;
    color: #6327CE !important;
    font-size: clamp(18px,.9vw,1vw) !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    line-height: 100%;
}


.delete-div-p{
    font-family: Distruction !important;
    color: #6327CE !important;
    font-size: clamp(14px,1.1vw,1.15vw) !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    line-height: 100%;
}

.delete-div button{
    background-color: transparent;
    border: none;

}

.delete-div img{
    height: 2.5vh;
    width: auto;
}


footer{
    background-image: url('../img/footer-theme.png');
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 8;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 12rem;
    padding: 10rem 4rem 0rem 4rem ;
    height: fit-content;

}

.mobile-line{
    display: none;
}

.div-footer-up{
    display: flex;
    width: 30%;
    gap: 20px;
    flex-direction: column;
}

.div-footer-up h2{
    color: #FFF;
font-family:Segoe;
font-size: clamp(20px,1.8vw,1.9vw);
font-style: normal;
font-weight: 600;
line-height: normal;
}

.input-footer{
    width:94% ;
    height: 50px;
    padding: 0rem .5rem;
    border:2px solid #FFFFFF;
    display: flex;
    align-items: center;
    border-radius: 22px;
    background-color: #ffffff00;
}

.info-redes-footer p{
    color: #FFF;

font-family:Segoe;
font-size: clamp(16px,.9vw,1vw);
font-style: normal;
font-weight: 350;
line-height: normal;
text-transform: capitalize;
}

.info-redes-footer p span{
    opacity: 0.7;
color: #D197FF;
font-family:Segoe;
font-size: clamp(16px,.9vw,1vw);
font-style: normal;
font-weight: 600;
line-height: 130%;
line-height: normal;
text-transform: capitalize;
}

.info-redes-footer p a{
    color: #FFF;

    font-family:Segoe;
    font-size: clamp(16px,.9vw,1vw);
    font-style: normal;
    font-weight: 650;
    line-height: normal;
    text-transform: capitalize;
}

.input-footer input{
    width: 100%;
    height: 100%;
    background-color: #00000000;
    border: none;
    outline: none;
    color:#FFFFFF8A;
font-family:Segoe;
font-size: clamp(14px,1.1vw,1.2vw);
font-style: normal;
font-weight: 350;
line-height: normal;
}

.input-footer input::placeholder{
    color:#FFFFFF8A;
    
}

.input-footer button{
    background-color: transparent;
    color: #FFF;
    border: 2px solid white;
    border-radius: 50%;
    height: 30px;
    display: flex;
    align-items: center;
    padding: .5rem;
}

.footer-up{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 20px;
    height: 100%;
}

.tiendas{
    column-gap: 20px;
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
}

.line-grey-footer{
    width: 100%;
    height: 2px;
    background-color: #FFF;
}

.line-grey-footer2{
    width: 100%;
    height: 2px;
    background-color: rgba(99, 39, 206, 0.31);
}

.info-redes-footer{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.redes-footer{
    display: flex;
    gap: 20px;
    height: 60px;
    align-items: center;
}

.redes-footer-1{
    margin-top: .5rem;
}

#testimonios{
    display: flex;
    justify-content: center;
    align-items: center;

}

.img-abs-left{
    position: absolute;
    width: 50%;
    height: auto;
    z-index: 6;
    bottom: -20%;
    left: -15%;
}

.huella-abs-left{
    position: absolute;
    width:30%;
    height: auto;
    bottom: -20%;
    left: 0%;
    z-index: 5;
}

.text-kiran{
    z-index: 7;
    pointer-events: none;
    height: 70vh;
}

.token-testimons{
    position: absolute;
    width:10%;
    height: auto;
    bottom: -10%;
    right: -5%;
    transform: rotate(130deg);
    z-index: 5;
}

.img-slider{
    width: 20vw;
}

.bottle-testimons{
    position: absolute;
    width:8%;
    height: auto;
    transform: rotate(330deg);
    top: 10%;
    right: 20%;
    z-index: 5;
}

.images-shop-section{
    display: flex;
    width: 100%;
}

.images-shop-section div{
    width: 100%;
    display: flex;
}

.images-shop-section img{
    width: 100%;
    object-fit: contain;
}

.espiral-testimons{
    position: absolute;
    width:40%;
    height: auto;

    top: 0%;
    right: -5%;
    z-index: 4;
}



.gradient3{
    width:30%;
    height: 50%;
    background-color: rgba(186, 115, 245, 0.603);
    position: absolute;
    z-index: 4;
    bottom:0%;
    left: 0%;
    filter: blur(100px);
    
transform: translate3d(0, 0, 0);
}

.abs-token{
    position: absolute;
    bottom: 10%;
    left: -5%;
    width: 10%;
}

.bn3{
    right: 8% !important;
   }

.token{
    position: absolute;
    bottom: -8%;
    left: -7%;
    z-index: -1;
    width: 15%;
}

.scroll-bg{
    position: absolute;
    bottom: -25%;
    right: -22%;
    z-index: -1;
    width: 35%;
}

.scroll-anim{
    position: absolute;
    bottom: 15%;
    right: 0%;
    z-index: 1;
    transform: rotate(90deg);
    
    font-weight: 500;
    font-size: 16px;
    font-family:Segoe;
}

.anim-div{
    display: flex;
    justify-content: start;
    width: 100px;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    z-index: 1003;
    color: #000000;
    position: relative;
}

.line-div{
    width: 0%;
    background-color: #000000;
    height: 1.5px;
}


.content-hero{
    padding: 0rem 3rem;
}

.gradient{
    width:50%;
    height: 50%;
    background-color: rgba(187, 115, 245, 0.38);
    position: absolute;
    z-index: 3;
    bottom:0%;
    filter: blur(250px);
    
transform: translate3d(0, 0, 0);
}


nav{
    width: 100%;
    height: 6rem;
    background-color: #ffffff00;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0rem 3rem;
    flex: 1 0 auto;

    z-index: 9;
}
button{
    cursor: pointer;
}
a{
    text-decoration: none;
    font-family:Segoe;
    cursor: pointer;
    color: #6327CE;

}
.btn-shop {
    color: #fff;
    background-color: #6327CE;
    border-radius: 100px;
    display: flex;
    padding: .8rem 2.5rem;
    justify-content: center;
    gap: 0rem .5rem;
    position: relative;
    align-items:center;
    z-index: 1;
    overflow: hidden;
    font-size: clamp(14px,1.2rem,1.25rem);
    font-weight: 300;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-right: 1rem;
    transition: all 300ms ease-in-out;
}

.btn-shop:after{
    transition: all 300ms ease-in-out;
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    border-radius: 10px;
    bottom: 0;
    right:0;
    background-color: #FFF;
}

.btn-shop::after{
    height: 100%;
    width: 0;
}

.btn-shop:hover:after{
    width: 150%;
}

.btn-shop:hover{
    color: #6327CE;
    background-color: #FFF;
    box-shadow: 0px 0px 25px 0px rgba(107, 47, 210, 0.452);
}


.btn-shop2:after{
    transition: all 300ms ease-in-out;
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
    background-color: #6327CE;
}

.btn-shop2::after{
    height: 100%;
    width: 0;
}

.btn-shop2:hover:after{
    width: 100%;
}

.btn-shop2:hover{
    color: #FFF;
    background-color: #6327CE;
}

.btn-shop2:hover .bag-hover{
opacity: 1;
}

.bag-hover{
    position: absolute;
    top: 30%;
    left: 22%;
    opacity: 0;
    transition: all 300ms ease-in-out;
}


.btn-shop2 {
    color: #6327CE;
    background-color: #ffffff00;
    border-radius: 100px;
    display: flex;
    padding: .7rem 2.2rem;
    position: relative;
    justify-content: center;
    border: 2px solid #6327CE;
    gap: 0rem .5rem;
    z-index: 1;
    transition: all 300ms ease-in-out;
    align-items:center;
    font-size: clamp(14px,1.2rem,1.25rem);
    font-weight: 300;
    overflow: hidden;
font-family:Segoe;


}

.account{
    position: relative;
    display: flex;
    min-height: 100vh;
    width: 100%;
    margin-top: 6rem;
    justify-content: center;
    align-items: start;
}

.contenido-account{
    position: relative;
    display: flex;
    width: 100%;
    height: 120vh;
    justify-content: center;
    align-items: start;
}

.linea-medio{
    width: 96%;
    height: 1px;
    background-color: #C0B3D9;
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.height-fit{
    height: 135vh !important;

}

.informacion-add{
    width: 100%;
    display: flex;
}

.contenido-account2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    flex-grow: 1;
    z-index: auto;
    position: relative;
    height: 100%;
}

.no-mt{
    
    margin-top: 5rem !important;
}

.div-title-account2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    padding-bottom: 2rem;
    height: 50%;
    width: 100%;
   
}

.div-title-account3{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    padding-bottom: 2rem;
    height: 50%;
    width: 100%;
   
}

.div-accounts-divs-1{
    display: flex;
    width: 100%;
    height: 75%;
    border-bottom: 1px solid #CAB8E9;
    justify-content: center;
}

.div-accounts-div1{
    height: 100%;
    width: 90%;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    justify-content: center;
}



.div-accounts-div1 h3{
    font-family: Segoe;
    font-size: clamp(16px,1.7vw,1.85rem);
    font-style: normal;
    color: #6327CE;
    font-weight: 600;
    line-height: 100%;
}

.div-accounts-div1 h5{
    font-family: Segoe;
    font-size: clamp(14px,1.1vw,1.25rem);
    font-style: normal;
    color: #7459A6;
    font-weight: 600;
    line-height: 100%;
}

.div-accounts a{
    font-family: Segoe;
    font-size: clamp(14px,1.1vw,1.25rem);
    font-style: normal;
    text-decoration: underline;
    color: #6327CE;
    font-weight: 600;
    line-height: 100%;
}

.div-accounts-div2{
    flex-grow: 1;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.div-accounts{
    border-radius: 8px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 260px;
    border: 1px solid #C0B3D9;
}


.contenido-account-div-principal{
    background-color: #FAF6FF;    
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.info-header-div{
    display: flex;
    position: absolute;
    top: 0%;
    height: 12.5%;
    align-items: center;
    justify-content: center;
    width: 90%;

}

.info-header-div-div{
    width: 70%;
}

.info-header-div-div button{
    font-size: clamp(14px,1.3vw,1.45rem);
    font-style: normal;
    font-family: Segoe;
    color: #6327CE;
    font-weight: 400;
    line-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    gap: .5rem;
}


.info-header-div ul{
    display: flex;
    
    align-items: center;
    justify-content: start;
    width: fit-content;
    gap: 2rem;
    height: 100%;

}


.info-header-div ul li, .info-header-div ul a{
    font-family: Segoe;
    font-size: clamp(14px,1.3vw,1.45rem);
    font-style: normal;
    color: #6327CE;
    font-weight: 600;
    line-height: 100%;

}

.info-header-div-button{
    flex-grow: 1;
    display: flex;
    justify-content: end;
}

.info-header-div-button a{
    font-size: clamp(14px,1.3vw,1.45rem);
    font-style: normal;
    font-family: Segoe;
    color: #6327CE;
    font-weight: 700;
    line-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    gap: .5rem;
}

.div-title-account{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    height: 50%;
    width: 100%;
   
}


.div-title-account h2{
    font-family: Distruction;
    font-size: clamp(18px,2.1vw,2.2rem);
    font-style: normal;
    color: #6327CE;
    font-weight: 700;
    line-height: 140%;
    width: 85%;
}

.div-title-account button{
    font-family: Segoe;
    font-size: clamp(14px,1.2vw,1.35rem);
    font-style: normal;
    color: #FFF;
    font-weight: 500;
    line-height: 90%;
    background-color:#6327CE;
    border: none;
    border-radius: 30px;
    height: 55px;
    width: 60%;
}

.div-title-account a{
    font-family: Segoe;
    font-size: clamp(14px,1.2vw,1.35rem);
    font-style: normal;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    line-height: 90%;
    background-color:#6327CE;
    border: none;
    border-radius: 30px;
    height: 55px;
    width: 60%;
}

nav > div{
    flex-grow: 1;
    flex-basis: content;
}

.first-div-nav{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;


}

.first-div-nav-a1{
    flex-grow: .1;
    flex-basis: content;
    width: fit-content;
}

.first-div-nav ul{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0rem 2.5rem;
    width: 100%;
    flex-grow: 1;
    flex-basis: 100px;
    height: 100%;
}

.first-div-nav ul li{
    list-style: none;
    font-size: clamp(16px, 1.2rem,1.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:Segoe;
    height: 100%;
}

.first-div-nav ul > li > a > div {

    height: 30px;
    display: flex;
    flex-direction: column;
    padding: 0rem .5rem;
    position: relative;
    overflow: hidden;
    transition: all 300ms ease-in-out;
}

.bottle-uses{
    display: flex;
    padding: 4rem 4rem 7rem 4rem;
    height:75vh;
    width: 100%;
    justify-content: space-around;
}


#text-1,#text-3,#text-5{top:0%;position:relative;transition: top .5s ease-in-out;}

#text-2,#text-4,#text-6{top:100%;position:absolute;transition: top .5s ease-in-out;}

#nav-1:hover #text-2{top:0%;}
#nav-2:hover #text-4{top:0%;}
#nav-3:hover #text-6{top:0%;}

#nav-1:hover #text-1{ top:-100%;}
#nav-2:hover #text-3{ top:-100%;}
#nav-3:hover #text-5{ top:-100%;}

.first-div-nav ul li a img{
        width: 2.0rem;
}

.first-div-nav ul li:nth-child(2) a img{
    width: 1.5rem;
}

.first-div-nav ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0rem .5rem;
}

.nav-div-shop{
    display: flex;
    width: 100%;
    justify-content: end;
    gap: 0rem 2rem;
    align-items: center;
}

.container{
    height: 100vh;
    width: 100%;
}

.hero-section{
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: start;
    background-color: #27a7ce00;
    align-items: center;
    padding: 10rem 0rem 0rem 0rem;
    z-index: 3;
}

#title-a{
    color: #934DCA;
text-align: center;
font-family: Distruction;
font-size: clamp(17px,7.5vw,8.5vw);
font-style: normal;
font-weight: 700;
line-height: 90%;
}

#title-b{
    color: #6327CE;
    text-align: center;
    font-family: Distruction;
    font-size: clamp(20px,11.8vw,12vw);
    font-style: normal;
    font-weight: 700;
    line-height: 90%;
}

.bg-hero{
    width: 100%;
    background-size: cover;
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: -2;
    background-image: url('../img/hero.png');
}

.bg-hero2{
    width: 100%;

    height: 100vh;
    position: absolute;
    top: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%);
}

.left-content{
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    flex-direction: column;
    gap: .5rem;
    padding: 0rem 1rem;
    opacity: 0;
}

.rm-2{
    position: relative;
    top: -5%;
}

.rm-1 {
    position: relative;
    top: 22%;
    left: -2%;
}

.rm-3 {
    position: relative;
    top: 22%;
    left: 1%;
}

.roadmap-div{
    overflow: visible !important;
}



.rm-4 {
    position: relative;
    top: 5%;
    left: 0%;
}

.rm-5 {
    position: relative;
    top: 29%;
    left: 2%;
    z-index: 4;
}

.rm-6 {
    position: relative;
    top: 16%;
    left: 2.5%;
}

.rm-7 {
    position: relative;
    top: -13%;
    left: 2%;
}

.left-content p{
    color: #6327CE;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(18px,1.8vw,1.9vw);
    font-style: normal;
    font-weight: 350;
    line-height: 100%; /* 211.538% */
}

.left-menu{
    display: none;
}

.left-content p span{
    font-style: normal;
    font-weight: 700;
}

.left-content a{
    margin-top: 1rem;
    cursor: pointer;
    background-color: #6327CE;
    color: #fff;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(16px,1.4vw,1.5vw);
    font-style: normal;
    flex: 1 0 auto;
    display: flex;
    gap: 0rem 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    padding: 1rem 2rem;
    font-weight: 450;
    line-height: 100%; /* 211.538% */
    transition: all 300ms ease-in-out;
}

.left-content a:hover{
    transform: scale(1.1);
}

#members{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8rem 4rem 0rem 4rem;
}

#members h2{
    color: #6327CE;
    font-family: Distruction;
    font-size: clamp(36px,5.5vw,6vw);
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 137.5% */
    text-transform: uppercase;
    z-index: 4;
}

.container-members{
    width: 100%;
    display: flex;
    justify-content: center;

}

#members-images{
    height: 100%;
    width:90%;
    display: flex;
    justify-content: space-between;
}


#members-images > img{
    object-fit: contain;
    width: 35%;
    height: auto;
    z-index: 2;
    overflow: visible;
}

.token-members{
    width: 10%;
    transform: rotate(-30deg);
    position: absolute;
    bottom: -10%;
    left: -5%;
    z-index: 1;
}


#roadmap{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8rem;
}

.roadmap-div > *{
    overflow-x: visible !important;
}

#roadmap > *{
    overflow-x: visible !important;
}

#roadmap h2{
    color: #6327CE;
    font-family: Distruction;
    font-size: clamp(36px,5.5vw,6vw);
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 137.5% */
    text-transform: uppercase;
    z-index: 4;
}

#roadmap-image{
position: absolute;
width: 150%;
height: auto;
left: 0%;
top: 0%;
}

.token-roadmap{
    width: 15%;
    transform: rotate(-180deg);
    position: absolute;
    bottom: -20%;
    right: -7%;
    z-index: 1;
}


.father-element{
    width: 100%;
    height: 100%;
    background-color: #944dca00;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: end;
    overflow: visible;
}

.element-3d{
position: absolute;
    top: 30%;
    height: 100%;
    pointer-events: none;

}

.slider-home{
    display: flex;
    flex-direction: column;
    height: 90vh;
    align-items: center;
}

.div-slider{
    width: 90%;
    display: flex;
    justify-content: start;
    padding: 0rem 6rem;
    height: fit-content;
    gap: 2%;
    position: absolute;
    top: 20%;
    transition: all 300ms ease-in-out;
    
}

.op-z{
    opacity: 0;
    z-index: -999;
}

.slider-home h2{
    color: #6327CE;
font-family: Distruction;
font-size: clamp(30px,5.5vw,6vw);
font-style: normal;
font-weight: 700;
line-height: 110%; /* 137.5% */
text-transform: uppercase;
z-index: 4;
text-wrap: nowrap;
}

.info-slider{
    align-items: start;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding-top: 8rem;
    margin-left: 6rem;

}

.info-slider p{
    color: #7459A6;
font-family:Segoe;
font-size: clamp(16px,1.65vw,1.75vw);
font-style: normal;
font-weight: 400;
margin-top: 1rem;
line-height: 140%; /* 25.5px */
width: 70%;
}
.info-slider a img{
    width: 30px;
}

.info-slider a{
    display: flex;
    align-items: center;
    border-radius: 100px;
background: #934DCA;
justify-content: center;
width: 120px;
font-size: clamp(16px,1.50rem,1.60rem);
color: white;
font-weight: 300;
font-family:Segoe;
height: 50px;
padding: 0rem 3rem;
margin-top: 1.5rem;
line-height: 100%;
gap: 3px;
box-shadow: 0px 0px 5px 0px rgba(143, 74, 203, 0.37);
}

#info-slider-a3{
    display: flex;
    align-items: center;
    border-radius: 100px;
background: #934DCA;
justify-content: center;
width: 150px;
font-size: clamp(16px,1.20rem,1.30rem);
text-wrap:nowrap;
color: white;
font-weight: 300;
font-family:Segoe;
overflow: visible !important;
height: 50px;
padding: 0rem 2rem;
margin-top: 1rem;
line-height: 100%;
gap: 15px;
box-shadow: 0px 0px 40px 0px rgba(143, 74, 203, 0.37);
}

.images-stores{
    display: flex;
    width: 100%;
    gap: 5%;
    margin-top: 1rem;
}

.abs-div{
    width: 100%;
}


#slide-p-2{
    width: 70% ;
    
}


#slide-p-3{
    width: 70% ;  
}

#slide-info-3{
    width: 60% ;  
    overflow: visible !important;
    padding-top: 0rem !important;
}

.token-3{
    margin-top: 5%;
}

.abs-div{
    overflow: visible !important;
}

.slide-2{
    margin-left: 9rem;
}



.buttons-nav{
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: .5rem;
    position: absolute;
    
    right: 14%;
    top: 35%;
    overflow: visible;
}

.slide-2-nums{
    right: 7% !important;
}

#on-active{
    color: #934DCA;
}


#on-active span{
    background-color: #6327CE;
    width: 22px;
height: 10px;
flex-shrink: 0;
transition: all 300ms ease;
margin-right: -5px;
}

.buttons-nav button{
    overflow: visible;
    display: flex;
    width: fit-content;
    height: fit-content;
    align-items: center;
    justify-content: end;
    gap: 5px;
    background-color: transparent;
    border: none;
    color: #C0B3D9;
text-align: right;
font-family:Segoe;
font-size: clamp(14px,1.8vw, 1.9vw);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 300% */
transition: all 300ms ease-in-out;
text-transform: uppercase;
}

.line-buttons{
    width: 1px;
    height: 80px;
    background-color: #6327CE;
    position: relative;
    display: flex;
    margin-right: 4px;
}

.buttons-nav button span{
    width: 10px;
    border-radius: 50px;
    height: 10px;
    background-color: #C0B3D9;
    content: "";
    display: block;
    position: relative;
}

.nums{
    position: relative;
    overflow: visible;
    right: 10%;
    margin-top: 5%;
    height: 100%;

}

.nums img{
    top: 15% !important;

}

.roadmap-div{
    min-width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 4 !important;
}

.roadmaps{
    display: flex;
    justify-content: space-between;
    width: 100% !important;
    height: 100%;
    align-items: center;

}

.card-roadmap{
    margin-right: 0rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
height: 35vh !important;
width: 20% !important;
}

.card-roadmap li{
    width: fit-content;
    color: #7459A6;
font-family: Segoe;
font-size: clamp(14px,1.1vw,1.2vw);
font-style: normal;
font-weight: 400;
line-height: 130%; /* 24px */
list-style: none;
}

.card-roadmap-2 li{
    color: #FFF;
font-family: Segoe;
width: fit-content;
list-style: none;
font-size: clamp(14px,1.1vw,1.2vw);
font-style: normal;
font-weight: 400;
line-height: 130%; /* 24px */
}

.card-roadmap-container-completed p{
    color: #6327CE;
    font-family:Segoe;
    font-size: clamp(16px,1.1vw,1.2vw);
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.16px;
}


.card-roadmap-container-coming p{
    color: #6327CE;
    font-family:Segoe;
    font-size: clamp(16px,1.1vw,1.2vw);
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.16px;
}


.card-roadmap-container-progress p{
    color: #FFF;
    font-family:Segoe;
    font-size: clamp(16px,1.1vw,1.2vw);
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.16px;
}

.card-roadmap-container-completed div{
    width:100%;
    margin-top: .6rem;
    height: 7px;
    border-radius: 10px;
    border-radius: 20px;
    border: 1px solid #934DCA;
    background: #934DCA;
}

.card-roadmap-container-coming div{
    width:100%;
    margin-top: .6rem;
    height: 7px;
    border-radius: 10px;
    background-color: #FFF;
    border: 1px solid #FFF;
}

.card-roadmap-container-progress div{
    width:100%;
    margin-top: .6rem;
    height: 7px;
    border-radius: 10px;
    background: linear-gradient(90deg, #FFF 46.97%, rgba(255, 255, 255, 0.00) 62.66%);
    border: 1px solid #FCFCFE;
}

.mobile-yes{
    display: none !important;
   }

.card-roadmap h3{
    color: #6327CE;
    font-family: Segoe;
    font-size: clamp(25px, 1.7vw,1.9vw);
    font-style: normal;
    font-weight: 700;
    line-height: 35px; /* 116.667% */
    letter-spacing: -0.3px;
}

.card-roadmap-2 h3{
    color: #6327CE;
    font-family: Segoe;
    font-size: clamp(25px, 1.7vw,1.9vw);
    font-style: normal;
    font-weight: 700;
    line-height: 35px; /* 116.667% */
    letter-spacing: -0.3px;
}

.card-roadmap-container h4{
    color: #6327CE;
font-family: Segoe;
font-size: clamp(18px, 1.4vw,1.5vw);
font-style: normal;
font-weight: 700;
line-height: 35px; /* 152.174% */
letter-spacing: -0.23px;
}

.card-roadmap-container-2 h4{
    color: #ffffff;
font-family: Segoe;
font-size: clamp(18px, 1.4vw,1.5vw);
font-style: normal;

font-weight: 700;
line-height: 35px; /* 152.174% */
letter-spacing: -0.23px;
}


.card-roadmap-container{
    background-color: rgba(255, 255, 255, 0.507);
filter: drop-shadow(0px 0px 10px rgba(80, 19, 184, 0.23));
backdrop-filter: blur(33px);
    height: 100%;
    display: flex;
    border-radius: 22px;
    flex-direction: column;
    padding: 1rem;
    justify-content: space-around;
    margin-top: 1rem;
    width: 65%;
}

.card-roadmap-container-2{
    background-color: #934DCA;
    filter: drop-shadow(0px 0px 5px rgba(99, 40, 206, 0.43));
    backdrop-filter: blur(33px);
    height: 100%;
    display: flex;
    border-radius: 22px;
    flex-direction: column;
    margin-top: 1rem;
    padding: 1rem;
    width: 65%;
    justify-content: space-around;
    position: relative;
}


  .drag-roadmap{
    position: absolute;
    top: 105%;
  }


.card-roadmap-2{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
    height: 35vh !important;
width: 20% !important;
margin-right: 0rem !important;
}


.slider-subtitle{
    display: flex;
    justify-content: start;
    align-items: end;
    gap: 10px;
}

.slider-subtitle img{
    width: 2vw;
}

.slider-subtitle h3{
    color: #BB73F5;
font-family: Distruction;
font-size: clamp(28px,3vw,3.5vw);

font-style: normal;
font-weight: 700;
line-height: 70%; /* 100% */
text-transform: uppercase;
}

#element-1{
    z-index: 8;
    opacity: 1;
}

#element-2{
    z-index: 7;
    opacity: 0;
}

.menu-ham{
    display: none;
}

.left-content img{
    height: 6vh;
}

.sect-about{
    padding: 7rem 3rem;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: start;
    background-color: #27a7ce00;
}

.sect-about h2{
    color: #6327CE;
    font-family: Distruction;
    font-size: clamp(36px,6.5vw,7vw);
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 137.5% */
    text-transform: uppercase;  
    margin-bottom: .5rem;
}

.sect-about p{
    color: #7459A6;
    font-family:Segoe;
    font-size: clamp(16px,1.7vw,1.75vw);
    font-style: normal;
    font-weight: 350;
    width: 45%;
    line-height: 150%; /* 137.5% */
    text-align: justify; 
    margin-bottom: 2rem;
}



.buttons-about{
    display: flex;
    justify-content: start;
    column-gap: 1%;

    width: 100%;
}

.btn-about1{
    background-color: #934DCA;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    font-size: clamp(12px,1.15rem,1.25rem);
    gap: 5%;
    width:200px;
    border-radius: 100px;
    height: 55px;
    font-family:Segoe;
    transition: all 300ms ease-in-out;
}

.buttons-about a:hover{
    opacity: .7;

}

.btn-about1 img,.btn-about2 img{
    height: 30px;
}



.btn-about2{
    background-color: #6327CE;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    gap: 5%;    font-size: clamp(12px,1.15rem,1.25rem);
    transition: all 300ms ease-in-out;
    width:200px;
    border-radius: 100px;
    height: 55px;
    font-family:Segoe;
}

.frame1{
    position: absolute;
    bottom: 0%;
    right: -10%;
    width: 20%;
}





#orders-0-count{

}


#orders-count{
    display: none;
}







.frame2{
    position: absolute;
    top: 15%;
    right: 7%;
    width: 12%;

}

.frame3{
    position: absolute;
    top: 0%;
    right: -5%;
    width: 7%;
    z-index: 20;
}

.gradient2{
    width:40%;
    height: 50%;
    background-color: rgba(187, 115, 245, 0.38);
    position: absolute;
    z-index: 3;
    top:30%;
    right: -10%;
    
transform: translate3d(0, 0, 0);
    filter: blur(100px);
}


.gradient4{
    width:40%;
    height: 50%;
    background-color: rgba(187, 115, 245, 0.38);
    position: absolute;
    z-index: 3;
    top:-10%;
    right: 0%;
    filter: blur(150px);
    
transform: translate3d(0, 0, 0);
}

.technology{
    padding: 2rem 4rem 0rem 4rem;
    display: flex;
    height: 100vh;

    flex-direction: column;
    position: relative;
    align-items: center;

}

.technology h2{
    color: #6327CE;
    font-family: Distruction;
    font-size: clamp(36px,5.5vw,6vw);
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 137.5% */
    text-transform: uppercase;  
    margin-bottom: .5rem;
}

.why-choose{
    padding: 0rem 4rem;
    display: flex;
    height: 100vh;
    flex-direction: column;
    position: relative;
    align-items: center;

}

.why-choose h2{
    color: #6327CE;
    font-family: Distruction;
    font-size: clamp(36px,5.5vw,6vw);
    font-style: normal;
    font-weight: 700;
    text-align: center;
    line-height: 110%; /* 137.5% */
    text-transform: uppercase;  
    margin-bottom: .5rem;
}

#gifs{
    width: 8vw ;
    height: auto;
}

.img-back{
    position: absolute;
    top: -10%;
    object-fit: contain;

    
}

.containers-home-section{
    margin-top: 5rem;
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.container-home{
    width: 26%;
    border-radius: 22px;
    height: 330px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
   overflow: visible;
   margin-right: 0rem !important;
}

.container-violet{
    background-color: #8A5ED8;
}

.container-white{
background: #FFF;
box-shadow: 0px 0px 30px 0px rgba(139, 139, 139, 0.13);
backdrop-filter: blur(33px);

margin: 0rem .5rem 1rem .5rem;
}



.container-white h3{
    color: #934DCA;

}

.container-white p{
    color: #C0B3D9;

}

.container-violet h3, .container-violet p{
    color: #FFF;
}


.container-divs-tech{
    width: 100%;
}

.div-line-tech{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: flex;
    align-items: center;
}

.line-tech{
    width: 100%;
    height: 2px;

   
    display: block;
    background-color: #8A5ED8;
}

.w-box{
    display: flex;
    flex-direction: column;
    align-items: start;
    height: 30vh;
    padding: 12rem 4rem 4rem 4rem;
}

.w-box h2{
    color: #6327CE;
text-align: center;
font-family: Distruction;
font-size: clamp(28px,2.5vw,3vw);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 35px */
text-transform: uppercase;
}

.w-box ul{
    display: flex;
    width: 90%;
    padding-top: 3rem ;
   justify-content: space-between;

    padding-left: 2rem;
}



.w-box ul li{
    color: #7459A6;
font-family:Segoe;
list-style: disc;
overflow: visible;
font-size: clamp(16px,1.1vw,1.2vw);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 28.5px */
}

.tech-specs h2{
    color: #6327CE;
font-family: Distruction;
font-size: clamp(28px,3.7vw,3.9vw);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 50px */
text-transform: uppercase;
}

.tech-specs{
    padding: 8rem 4rem 0rem 4rem;
}


.tech-specs div{
    display: flex;
    justify-content: space-around;
}

.ul-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top:.5rem ;
    height: fit-content;
    row-gap: 2rem;
}

.ul-grid li{
    display: flex;
    flex-direction: column;

}

.father-ul{
    width: 60%;
    position: relative;
}

.ul-grid li h4{
    color: #6327CE;
font-family: Distruction;
text-wrap: nowrap;
font-size: 1.25vw;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
text-transform: uppercase;
}

.ul-grid li div{
    display: flex;
    justify-content: start;
    margin-top: 0rem;
    gap: 20px;
    width: 80%;
    
}

.ul-grid li div li{
    color: #7459A6;
font-family:Segoe;
font-size: clamp(16px,1.1vw,1.15vw);
font-style: normal;
font-weight: 350;
height: fit-content;
line-height: 150%; /* 31.5px */
}

.ul-grid li div p{
    color: #7459A6;
font-family:Segoe;
font-size: clamp(16px,1.1vw,1.15vw);
font-style: normal;
font-weight: 350;
line-height: 150%; /* 31.5px */
}

.info-spec{
    display: flex;
    justify-content: space-around;
    margin-top: 2rem;
}


.info-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 100%;
}

.info-container-first-child{
margin-top: -1.5rem;
}

.info-container img{
    width: 5vw;
    height: 10vh;
    object-fit: contain;
}



.info-container h3{
text-align: center;
font-family: Distruction;
font-size: clamp(1.1rem,1.6vw,2vw);
letter-spacing: 0px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 240% */
text-transform: uppercase;
margin-top: .7rem;
overflow: visible !important;
}

.info-container p{
text-align: center;
font-family:Segoe;
font-size: clamp(14px,1.2vw,1.35vw);
font-style: normal;
font-weight: 400;
line-height: 120%; /* 240% */
margin-top: .35rem;
}

.why > *{
    overflow: visible !important;
}

.why{
    overflow: visible !important;
}
.abs-mobile-header{
    position: absolute;
    visibility: hidden;
    opacity: 0;
}

.section-shop{
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 10rem 4rem 0rem 4rem;
}

.div-image-shop{
    width: 75%;
    height: 100%;
}

.div-image-shop img{
    object-fit: cover;
    width: auto;
}

.div-img-bottle-uses{
    display: flex;
    justify-content: center;
    width: 50% !important;
    
}

* {
    -webkit-tap-highlight-color: transparent !important;
}

.info-bottles h3{
    color: #6327CE;
font-family: Distruction;
font-size: clamp(18px,1.8vw,1.7vw);
font-style: normal;
font-weight: 400;
line-height: 100%; /* 125% */
text-transform: uppercase;
}

.info-bottles{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 80%;
    row-gap: 1.5rem;
    align-items: start;
    justify-content: center;
}

.info-shop{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-around;
    padding-bottom: .5rem;
    row-gap: 2.5rem;
}

.text-info{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.text-info h2{
    color: #6327CE;
font-family: Distruction;
font-size: clamp(28px,2.3vw,2.7vw);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 35px */
text-transform: uppercase;
}

.text-info h4{
    color: #BB73F5;
    font-family: Distruction;
    font-size: clamp(24px,1.6vw,1.8vw);
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 34.5px */
    margin-bottom: 1rem;
}

.text-info p{
    color: #7459A6;
font-family:Segoe;
font-size: clamp(16px,1.2vw,1.3vw);
width: 60%;
text-align: justify;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 25.5px */
}

.border-bottom{
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(99, 39, 206, 0.31);
}

.selection-color p{
    color: #6327CE;
font-family:Segoe;
font-size: clamp(16px,1.1vw,1.2vw);
font-style: normal;
font-weight: 600;
line-height: 100%; /* 19px */
}

.circles-selection{
    display: flex;
    margin-top: 1rem;
    gap: 1.1rem;
    width: fit-content;
}

.circles-selection div{
width: 40px;
height: 40px;
border-radius: 60px;
cursor: pointer;
}

.circles-selection-span{
    width: 46px;
    height: 46px;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .circles-selection-span-active{

        border: 1.5px solid #280653;
        }
    


    .circles-selection-1{
    background: linear-gradient(90deg, #280653 8.85%, #280653 32.29%, #280653 51.04%, #6A3B80 51.05%, #6A3B80 60.94%, #6A3B80 73.43%, #6A3B80 73.44%, #6A3B80 84.9%);
   
}

    .circles-selection-2{
        background: linear-gradient(90deg, #934DCA 8.85%, #934DCA 32.29%, #934DCA 51.04%, #DDDDDD 51.05%, #DDDDDD 60.94%, #DDDDDD 73.43%, #DDDDDD 73.44%, #DDDDDD 84.9%);
    
           }

.btns-shop{
    display: flex;
    width: 90%;
    gap: 2rem;
    border-bottom: 1px solid rgba(99, 39, 206, 0.31);
    padding-bottom: 2rem;
    overflow: visible;
}

.btns-shop-button{
    border-radius: 50px;
    border: none;
    position: relative;
    width: 35%;
    color: #FFF;
    font-style: normal;
    font-weight: 400;
    font-family:Segoe;
    font-size: clamp(16px,1.05vw,1.1vw);
background: #6327CE;
border: 2px solid #6327CE;
transition: all 300ms ease-in-out;
box-shadow: 0px 0px 40px 0px rgba(108, 47, 210, 0.41);

}

.btns-shop-button:after{
    transition: all 300ms ease-in-out;
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
    background-color: #FFF;
}

.btns-shop-button::after{
    height: 100%;
    width: 0;
}

.btns-shop-button:hover:after{
    width: 100%;
}

.btns-shop-button:hover{
    color: #6327CE;
    background-color: #FFF;
}

.btn-shop-div-1{
    width: 30%;
    display: flex;
    height: 50px;
    justify-content: space-between;
    border-radius: 50px;
    align-items: center;
border: 2px solid #6327CE;
background: rgba(244, 244, 244, 0.00);
}

.btn-shop-div-1 button{
    display: flex;
    justify-content: center;
    padding: 0rem 1rem;
    align-items: center;
    height: 100%;
    color: #6327CE;
    font-family:Segoe;
    font-size: clamp(16px,1.25vw,1.35vw);
    background-color: #00000000;
    border: none;
}

.btn-shop-div-1 p{
    color: #6327CE;
    font-family:Segoe;
    font-size: clamp(16px,.9vw,.95vw);
    padding: 0rem 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 100% */
    text-transform: uppercase;
}

.icons-shop{
    display: flex;
    justify-content: center;

    width: 100%;
   
}

.icons-shop div{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .5rem;
align-items: center;

}

.icons-shop div p{
    color: #6327CE;
font-family:Segoe;
font-size: clamp(16px,1vw,1.1vw);
font-style: normal;
font-weight: 450;
text-align: center;
line-height: 100%; /* 14px */
}

.icons-shop div img{
    width: 2.5vw;
    height: auto;
    object-fit: contain;
}

.token-shop-1{
    position: absolute;
    width: 8%;
    left: -3%;
    bottom: -10%;
}

.accordion{
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    height: fit-content;
}

.gap-accordions{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.accordion p {
    padding: .5rem 0rem;
    color: #7459A6;
font-family:Segoe;
font-size: clamp(16px,1.1vw,1.2vw);
font-style: normal;
font-weight: 400;
line-height: 130%; /* 180% */
transition: all 300ms ease;
  }

.accordion-p{
    display: none;
    position: relative;
}

  .w-p{
    width: 90%;
  }

  .divs-accordions{
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
 
    width: 90%;
    border-bottom: 1px solid rgba(99, 39, 206, 0.31);
  }

  .divs-accordions-flex h3{
    color: #6327CE;
font-family: Distruction;
font-size: clamp(18px,1.3vw,1.4vw);
font-style: normal;
font-weight: 400;
line-height: 25px; /* 156.25% */

text-transform: uppercase;
  }

  .divs-accordions-flex button{
    background-color: transparent;
    border: none;
    color: #BB73F5;
    font-family: Segoe;
    font-size: clamp(18px,1.7vw,1.9vw);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
    text-transform: uppercase;

  }

  .divs-accordions-flex{
    display: flex;
    width: 100%;
    z-index: 3;
    justify-content: space-between;

  }

  
  .divs-accordions-flex2 h3{
    color: #6327CE;
font-family: Distruction;
font-size: clamp(16px,1.3vw,1.4vw);
font-style: normal;
font-weight: 400;
line-height: 100%; /* 156.25% */
text-transform: uppercase;

  }

  .divs-accordions-flex2 button{
    background-color: transparent;
    border: none;
    color: #BB73F5;
    font-family: Segoe UI;
    font-size: clamp(21px,2vw,2.1vw);
    font-style: normal;
    display: flex;
    align-items: center;
    height: 100%;
    font-weight: 700;
    margin-bottom: .5rem;
    line-height: 100%; /* 16px */
    text-transform: uppercase;

  }

  .divs-accordions-flex2 p{
    color: #7459A6;
font-family:Segoe;
font-size: clamp(16px,1.3vw,1.5vw);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 25.5px */
  }

  .divs-accordions-flex2{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 20px;
    justify-content: start;
  }

  .class-flex-d{
    display: flex;
  }

  .class-flex-d h1{
    color: #6327CE;
font-family: Distruction;
font-size: clamp(28px,3.7vw,3.9vw);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 50px */
padding-left: 2rem;
text-transform: uppercase;
  }

  .class-flex-d h4{
    color: #BB73F5;
font-family: Distruction;
font-size: clamp(22px,2.2vw,2.3vw);
font-style: normal;
font-weight: 700;
line-height: 80%; /* 50px */

text-transform: uppercase;
  }

  .info-tracks{
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-top: 4rem;
    padding-left: 2rem;
    gap: 2rem;
    width:75%;
  }


  .section-overview{
    padding: 12rem 2rem 0rem 2rem;
  }

  .token-shop-2{
    position: absolute;
    width: 4%;
    top: 20%;
    transform: rotate(180deg);
    left: 58%;
  }

  .token-shop-3{
    position: absolute;
    width: 4%;
    top: 60%;
    transform: rotate(180deg);
    left: 53%;
  }

  .espiral-shop{
    position: absolute;
    width: 100%;
    right: 0%;
    top: -30%;
    z-index: -2;
    height: 100%;
    object-fit: cover;
  }

  .info-slider-shop {
    align-items: start;
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 80%;
}

.info-slider-shop p{
    width: 80% !important;
    color: #7459A6;
font-family:Segoe;
font-size: clamp(16px,1.2vw,1.3vw);
font-style: normal;
text-align: justify;
font-weight: 400;
margin-top: 1rem;
line-height: 150%; /* 25.5px */
}

.images-shop-section div{
    flex:1 1 0%;
    transition: flex .4s;
}

.images-shop-section div:hover{
    flex:1.2 1 0%;
}



.imagenes-overview{
    position: relative;
    padding-right: 2rem;
    overflow: visible;
}

.rel-image-imagenes-overview{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.abs-image-imagenes-overview{
    top: 20%;
    left: -35%;
    z-index: 7;
    position: absolute;
}

.Highlights{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-size: cover;
    overflow: visible;
    background-repeat: no-repeat;
    padding: 9rem 4rem 3rem 4rem;
    background-image: url('../img/bg-high.png');
}

.Highlights h2{
    color: #6327CE;
text-align: center;
font-family: Distruction;
font-size: clamp(28px,3.7vw,3.9vw);
font-style: normal;
font-weight: 700;
margin-bottom: 1rem;
line-height: 100%; /* 35px */
text-transform: uppercase;
}

.father-high-div{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    justify-content: space-around;
}

.high-father{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
}

.high-div{
    flex-direction: column;
    display: flex;
}

.high-div div{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: .2rem;
}

.high-div img{
    width: 40px;
    height: 40px;
    object-fit: contain;
    z-index: 3;
    position: relative;
    display: block;
    border: none;
}

.high-div h4{
    color: #6327CE;
font-family: Distruction;
font-size: clamp(18px,1.3vw,1.5vw);
font-style: normal;
font-weight: 400;
line-height: 100%; /* 131.579% */
text-transform: uppercase;
}

.high-div p{
    color: #7459A6;
font-family:Segoe;
font-size: clamp(16px,1.2vw,1.25vw);
font-style: normal;
font-weight: 400;
padding-left: 50px;
line-height: 150%; /* 25.5px */
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
    .left-content a{
        padding: .75rem 1.5rem;
    }

    .cart-right-div{
        width: 35%;
    }

    .cart-body-div div div{
        margin-top: .8rem;
    }

    .token-shop-3{
        left: 47%;
    }

    .buttons-nav{
        right: 11%;
    }

    .card-roadmap{
        height: 40vh !important;
    }

    #members-images > img{
        width: 32%;
    }

    .card-roadmap-container{
        width: 75%;
    }
  
    
.nums{
    position: relative;
    overflow: visible;
    right: -7%;
}

    .bottle-uses{
        height:75vh;
        width: auto;
    }

    .img-bottle-uses{
        width: auto !important;
    }

    .div-image-shop img{
        width: 95%;
    }
    
.div-footer-up{
    
    width: 35%;

}

.div-footer-up h2{
    color: #FFF;
font-family:Segoe;
font-size: clamp(20px,1.8vw,1.9vw);
font-style: normal;
font-weight: 600;
line-height: normal;
}

.input-footer{
    width:90% ;

}

   
#roadmap{
    height: fit-content;
}

.roadmaps {
    width: 1280px !important;
}

.roadmap-div{
    height: 680px !important;

}

#roadmap-image{
    object-fit: contain;
    width: auto !important;
    height: 40%;
    top: 0%;
}

.card-roadmap{height: 280px !important;}
.card-roadmap-2{height: 280px !important;}


.rm-2{
    top: -8%;
    left: 3%;
}

.rm-1{
    top: 14%;
    left: -2%;
}

.rm-3{
    top: 15%;
    left: 8%;
}


.rm-4{
    top: -2%;
    left: 11%;
}

.rm-5{
    top:16%;
    left: 15%;
}

.rm-6{
    top:0%;
    left:18%;
}

.text-kiran{
    height: 50vh;
}


.rm-7{
    top:-16%;
    left: 20%;
}


    .card-roadmap-container-2{
        width: 75%;
    }

    .slide-2-nums{
        right: -2% !important;
    }
    
   .bn3{
    right:5% !important;
   }
    
    
.img-abs-left{
    width: 70%;
    left: -25%;
}

.huella-abs-left{
    width:40%;
}

.bottle-testimons{
    right: 16%;
    top: 21%;
    width: 5%;
}

.token-testimons{
    bottom: -5%;
}

.gradient3{
    width:40%;
}

    .info-slider{
    width: 40%;
    margin-left: 0rem;
    }

    .images-stores{
        gap: 2%;
    }

    .div-slider{
        gap: 4%;
    }

    .img-slider{
        width: 20vw;
        height: auto;
    }

    #slide-p-3{
    width: 70%;}

    #slide-info-3{
        width: 60%;
    }

    #slide-p-2 {
        width: 90%;
    }

    .info-slider p{
        width: 80%;
        }

    .first-div-nav-a1 img{
        width: 200px;
    }

    .btn-shop{
        padding: .8rem 2.1rem;
    }

    .bag-hover{
        left: 22%;
        top: 28%;
    }

    .btn-shop2 {
        padding: .65rem 1.8rem;

    }

    .left-content img{
        height: 4.5vh;
    }

    .scroll-bg{
        width: 45%;
        right: -28%;
        bottom: -20%;
    }

    .token{
        width: 20%;
        left: -12%;
    }

    .container-home{
        width: 30%;
    }


    .div-accounts{
        border-radius: 8px;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        height: 200px;
        border: 1px solid #6327CE;
    }

    #slide-info-3{
        padding-top: 3.5rem !important;
    }

    
    
    .contenido-account-div-principal{
        background-color: #FAF6FF;    
        width: 40%;
        height: 100%;
    }



    .contenido-account2 form{
        width: 75%;
    }

    .contenido-account2-div{
        margin-top: 10rem;
    }

    .h6-new{
        margin-top: -2.5rem;
    }

    .height-fit{
        height: 160vh !important;
    
    }
    
}

@media screen and (min-width: 1440px) and (max-width: 1599px) {
    .info-slider{
        width: 80%;
        }

        .height-fit{
            height: 145vh !important;
        
        }
        
        #slide-info-3{
            padding-top: 3.5rem !important;
        }

        .contenido-account2 form{
            width: 75%;
            gap: 2rem;
        }

        .contenido-account2-div{
            margin-top: 10rem;
        }

        .h6-new{
            margin-top: -1.5rem;
        }
        
        
.div-title-account h2{
    text-align: center;
    width: 100%;
}

.div-title-account button{

    width: 70%;
}

.contenido-account{
    height: 1181px !important;
}

        .div-accounts{
            height: 310px;

        }
        
        .div-title-account{
            gap: 2.5rem;
        }
        
        .contenido-account-div-principal{

            width: 50%;
  
        }

        .info-slider p{
            width: 70%;
            }

            .elementos-absolutos-contact img:nth-child(1){
                width: 20%;
                position: absolute;
                right: 8%;
                top: -13%;
                transform: translate(50%,0%);
            }
            
            .elementos-absolutos-contact img:nth-child(2){
                width: 20%;
                position: absolute;
                right: 0%;
                bottom: -5%;
                z-index: 5;
                transform: translate(50%,0%);
            }

            
.main-contact form {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    align-items: center;
    position: relative;
    z-index: 6;
    }

    .input-div{
        gap: .6rem;
    }

            .token-shop-3{
                left: 47%;
            }

            .card-roadmap{height: 330px !important;}
            .card-roadmap-2{height: 330px !important;}

            .w-box{
                height: 20vh;
            }

            .div-image-shop img{
                width: auto;
            }

            .image-shop-especial{
                width: 95% !important;
            }
            
            .bottle-uses{
                height:75vh;
        
            }

            .info-shop{
                row-gap: 1rem;
            }

            .bn3{
                right: 9%;
            }

            .slide-2-nums{
                right: 5% !important;
            }

            .buttons-nav{
                right: 14%;
            }

            .info-slider{
                margin-left: 0rem;
            }
            .img-slider{
                width: 16vw;
                height: auto;
            }

            .div-slider{
                gap: 6%;
            }

            #members-images > img{
                width: 30%;
            }

            .container-home{
                width: 28%;
            }

            .bottle-testimons{
                position: absolute;
                width:6%;
                height: auto;
                transform: rotate(330deg);
                top: 14%;
                right: 14%;
                z-index: 5;
            }

            .roadmaps{
                overflow: visible !important;
            }

            .roadmap-div{
                overflow: visible !important;
            }
            
     

            .drag-roadmap {
                position: absolute;
                bottom: -17%;
            }
        
#roadmap{
    height: fit-content;
}

.roadmaps {
    width: 1440px !important;
}

.roadmap-div{
    height: 680px !important;

}

#roadmap-image{
    object-fit: contain;
    width: auto !important;
    height: 40%;
    top: 0%;
}


.rm-2{
    top: -10%;
    left: 0%;
}

.rm-1{
    top: 12%;
    left: -2%;
}

.rm-3{
    top: 12%;
    left: 1%;
}


.rm-4{
    top: -3%;
    left: 2%;
}

.rm-5{
    top:14%;
    left: 3%;
}

.rm-6{
    top:3.5%;
    left: 4.5%;
}

.rm-7{
    top:-16%;
    left: 3%;
}


}

@media screen and (min-width: 1600px) and (max-width: 1919px) {
    .info-slider{
        width: 50%;
        }

        #slide-info-3{
            padding-top: 2.5rem !important;
        }


        .height-fit{
            height: 140vh !important;
        
        }
        
        .info-slider p{
            width: 65%;
            }

            .info-container{
                width: 90%;
            }

            .card-roadmap{height: 330px !important;}
            .card-roadmap-2{height: 330px !important;}

            .nums{
                right: 8.5% !important;
            }

            .slider-home{
                height: 100vh;
            }

            .bn3{
                right: 14% !important;
            }

            .roadmaps{
                overflow: visible !important;
            }

            .roadmap-div{
                overflow: visible !important;
            }

            .image-shop-especial{
                width: 95% !important;
            }
            
            .buttons-nav{
                top: 33.5%;
                right: 19%;
            }

            .slide-2-nums{
                right: 11.5% !important;
            }


            .drag-roadmap {
                position: absolute;
                bottom: -17%;
            }
        
#roadmap{
    height: fit-content;
}

.roadmaps {
    width: 1600px !important;
}

.roadmap-div{
    height: 680px !important;

}

#roadmap-image{
    object-fit: contain;
    width: auto !important;
    height: 40%;
    top: 0%;
}


.rm-2{
    top: -10%;
    left: -3%;
}

.rm-1{
    top: 12%;
    left: -2%;
}

.rm-3{
    top: 12%;
    left: -3%;
}


.rm-4{
    top: -3%;
    left: -6%;
}

.rm-5{
    top:14%;
    left: -7%;
}

.rm-6{
    top:5.5%;
    left: -7%;
}

.rm-7{
    top:-18%;
    left: -10%;
}


            .info-slider{
                margin-left: 0rem;
            }
            .img-slider{
                width: 16vw;
                height: auto;
            }

            .div-slider{
                gap: 6%;
            }

            .container-home{
                width: 23%;
            }
    
}

#slide-info-3{
    padding-top:6rem !important;
}


@media screen and (min-width: 1921px){

    .info-bottles h3{
        font-size: 1.55vw;
    }

    #slide-info-3{
        padding-top: 1.5rem !important;
    }


    .anim-div p{
        font-size: 1rem !important;
    }

    .image-shop-especial{
        height: 85vh !important;

    }

    .div-1921{
        width: 80% !important;
    }

    .text-info p{
        width: 75%;
    }

    .rel-image-imagenes-overview{
        object-fit: cover;
        height: 60vh;
        width: auto;
        margin-top: 4rem;
    }

    .section-shop > *{
        overflow: visible !important;
    }

    .btns-shop{
        width: 100%;
        overflow: visible !important;
    }

    .abs-image-imagenes-overview{
        width: 60% !important;
    }

    .images-shop-section{
        padding: 0rem !important;
    }

    .father-high-div{
        margin-top: 2rem;
    }
    
    .info-bottles{
        row-gap: 2.5rem;
    }

section{
    padding-left: 7rem !important;
    padding-right: 7rem !important;
}

.card-roadmap-container{
    width: 80%;
}
.card-roadmap-container-2{
    width: 80%;
}

footer{
    padding: 10rem 7rem 2rem 7rem;
}

.slider-home{
    max-width: 1920px;
    margin: auto;
    height: 980px;
}

.slide-2-nums{
    right: 4% !important;
}

.bn3{
    right: 5% !important;
    margin-top: 6% !important;

}

.input-footer{
    height: 60px;
    width: 90%;
    border-radius: 32px;
    padding: 0rem 1rem;
}

.div-image-shop{
    width: 100%;
}

.section-shop{
    gap: 3rem;
}

.btns-shop button{
    height: 70px;
}

.btn-shop-div-1{
    height: 70px;
}

.circles-selection-span{
    width: 70px;
    height: 70px;
}

.circles-selection div{
    width: 60px;
    height: 60px;

}

.info-shop{
    row-gap: 1.5rem;
}

.input-footer button{
    height: 40px;
    padding: 0rem .8rem;
    font-size: 1rem;
}
.info-slider a{
    width: 150px;
    font-size: 2rem;
    height: 60px;
    padding: 0rem 2rem;
}

.images-stores img{
    width: 10vw;
    height: auto;
}

.info-slider a img{
    width:90px !important;
    height: auto;
}

.nums{
    right: 7%;
}

.buttons-nav{
    top:33% ;
    right: 11%;
}

p{
    font-size: 2rem !important;
}

    .container-home{
        width: 25%;
        height: 450px;
    }

.text-kiran{
    width: 70vw;
    height: auto;
}

#roadmap{
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}

.roadmaps {
    width: 1920px !important;
}

.roadmap-div{
    height: 800px !important;

}

#roadmap-image{
    object-fit: contain;
    width: auto !important;
    height: 40%;
    top: 0%;
}


.rm-2{
    top: -3%;
    left: -3%;
}

.drag-roadmap{
    bottom:15%
}

.rm-1{
    top: 20%;
    left: -1%;
}

.rm-3{
    top: 13%;
    left: -4%;
}



.info-container{
    width: 90%;
}

.rm-4{
    top: 7%;
    left: -6%;
}

.rm-5{
    top:18%;
    left: -8.5%;
}

.rm-6{
    top:7.5%;
    left: -11%;
}

.rm-7{
    top:-10%;
    left: -11%;
}

}

.btn-padd{
    margin-top: .75rem;
}
#orders-0-countMobile{
    display: none;
}

.cuadro-div2 h2 a{
    text-decoration: underline;
    cursor: pointer;
}

@media screen and (min-width: 768px){
   
#account-onlyMobile{
    display: none;
}

.a-button{
    display: none;
}

.info-mobile-header{
    display: none;
}

}

.input-div label{
    color: #7459A6;
    font-weight: 700;
    font-family: Segoe;
}





.input-with-date label{
    color: #7459A6;
    font-weight: 700;
    font-family: Segoe;
}

@media screen and (max-width: 767px){
   
    #account-onlyMobile{
        display: flex;
        position: relative;
    }

    .boton-contact{
        display: none;
    }

    .mobile-column{
        flex-direction: column;
    }

    #a22{
        top: 11.25px !important;
    }

    #productRegistradorMobile{
        transition: all 1s ease;
        position: relative;
        gap: 25px;
        top: 25px;
        left: 2.5%;
        width: 95%;
    }

    .info-cuadro3 {
        width: 95% !important;
    }

    #products-mobile{
        position: relative;
    }

    #productRegistradorMobile3{
        position: absolute;
        top: 1rem;
        left: 2.5%;
    }

    .compras-realizadas{
        width: 100%;
        display: flex;
        gap: .5rem;
  
        padding-bottom: 1rem;
        border-bottom: 1px solid #7459A6;
        
    }

    .height-especial{
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        gap: 1rem;
        padding-top: 1rem;
        height: 370px !important;
    }

    .total-compras{
        width: 18.3%;
        height: 100%;
        font-family: segoe;
        color: #6327CE;
        font-size: clamp(18px,1.2vw,1.3vw);
        text-transform: uppercase;
        line-height: 100%;
        font-weight: 600;
        display: flex;
        margin-right: .3rem;
        padding-bottom: 1rem !important;
        align-items: end;
    }

    .info-compras h4{
        font-family: Distruction;
    color: #6327CE;
    font-size: clamp(14px,1.2vw,1.3vw);
    text-transform: uppercase;
    line-height: 100%;

    }

    .info-compras p{
        font-family: Segoe;
        color: #7459A6;
        font-size: clamp(13px,.9vw,1vw);
        font-weight: 500;
        line-height: 100%;
    }

    .info-compras{
        display: flex;
        flex-direction: column;
        gap: .25rem;
        height: 100%;
        flex-grow: 1;
        justify-content: center;
    }

    .imagen-compras{
      
        width: 30.3%;
    }

    .imagen-compras img{
        width: 100%;
        border-radius: 8px;
    }
    
.input-with-date input{
    padding-left: 1.25rem;
}

.input-with-date select{
    padding-left: 1.25rem;
}

    .form-p2{
        display: none;
    }

    .mb-col{
        flex-direction: column !important;
    }

    #productRegistradorMobile{
        padding-top: 0rem !important;
    }
    .info-message{
        width: 85%;
        margin-top: 1rem;
    }

    .delete{
        margin-top: 3rem !important;
    }

    .contenido-account2{
        height: fit-content !important;
    }

    .w-75{
        width: 85%;
    }

    .info-message p{
        width: 95%;
        padding-bottom: 0rem;
    }

    .contenido-account{
        padding-top: 2rem !important;
    }

    .info-header-div{
        height: 4rem !important;
    }

    .contenido-account{
        height: fit-content !important;
    }

    .info-mobile-header{
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 1.5rem;
    
    }
    
    .info-mobile-header a img{
        width: 35px;
    
    }
    
.div-footer-padrec{
    flex-direction: column-reverse;
    align-items: center;

}

.contact-footer{
    margin-top: 0rem !important;
}

    #account-onlyDesktop{
        display: none;
    }

    .input-with-date{
        margin: 1rem 0rem;
    }

    .input-with-date button{
        top: 50%;
        right: 3%;
        padding: 7px !important;
    }

    .input-with-date button img{
        width: 20px;
    }

    .h6-new{
        margin-top: .5rem !important;
    }
    

    .info-cuadro{
        gap: 1.2rem;
    }

    .final-div h1{
        text-align: end;
        line-height: 140%;
    }

    .division-div2 h2{
        text-align: center;
    }

    .division-div4{
        padding: 0rem !important;
    }

    .division-div1 div p{
        width: 95%;
    }

    .boton-especial img{
        margin-top: -.2rem;
    }

    .division-div2{
        width: 45%;
    }

    .division-div1{
        width: 55%;
        gap: .4rem;
        flex-direction: column;
        height: auto !important;
        align-items: start !important;
        justify-content: center !important;
    }

    .cuadro-div2 h2{
        text-align: start !important;
        padding: 0rem 1em;
    }

    .informacion-especial{

        padding: 0rem 1em;

    }

    .informacion-especial h2{
        padding-left: 0rem !important;
        text-align: start !important;
        width: 100%;
    }


    .info-cuadro3{
        width: 100%;
    }

    .division-div1 img{
        width: 40%;
        display: none;
        height: auto;
    }

    .absolute-iamgen{
        top: 15%;
    }

    .boton-especial{
        width: 85% !important;
        height: fit-content !important;
        background-color: transparent !important;
        color: #6327CE !important;
        font-size: 16px !important;
        display: flex !important;
        gap: .5rem !important;
        align-items: center !important; 
    }

    .cuadro-div2 h2{
        text-align: center;
        line-height: 130%;
    }

    .info-cuadro3{
        margin-top: 0rem !important;
    }

    .cuadro-div2{
        height: 120px;
        margin-top: 1rem;
    }

    .div-title-account3{
        justify-content: center !important;
    }

    .div-accounts-div1{
        width: 90%;
    }

    #confirm-mobile{
        top: 25%;
    }

    #pre-confirmMobile{
        top: 15%;
        position: relative;
    }

    .info-header-div-button button{
        align-items: center !important;
    }

    #account-deleteMobile{
        position: fixed !important;
        height: 100vh !important;
        top: 0%;
        z-index: 10;
        overflow-y: hidden !important;
    }

    .bg-white{
        position: absolute;
    }

  

    .div-accounts-div2{
        width: 90%;
    }

    .input-div{
        gap:.5rem;
    }

    .cuadro-div{
        border: none;
    }

    .contenido-account2-div{
        margin-top: 0rem !important;
        width: 95% !important;
    }

    .contenido-account2 form input{
        height: 45px;
    }

    .inputs-div button{
        height: 45px;
    }

    
    .inputs-div a{
        height: 45px;
    }


    .imagen-abosulta{
        top: 46.5%;
        right: 5%;
    }

    input[type="text"], select{
        height: 45px;
    }

    .contenido-account2 form{
        width: 100%;
        gap: .75rem;
    }

    }

@media screen and (min-width: 480px) and (max-width: 1023px) {
    html,body{
        overflow-x: hidden;
    }

    #header-user-icon img{
        width: 35px;
    }

    .container-image-tech{
        height: fit-content;
        padding-bottom: .5rem;
    }

    .ul-grid li h4{
        text-wrap: wrap;
        font-size: 18px;
    }
    
.slider-home h2{
    text-align: center;
}

.div-slider{
    padding: 0rem 2rem;
    flex-direction: column-reverse;
    top: 3rem;
    gap: 20px;
}




.img-slider{
    height: auto;
    width: 35vw;
}

.slider-subtitle img{
    width: 3vw;
    height: auto;
    
}

#slide-info-3{
    width: 80%;
}

#slide-p-3{
    width: 80%;
}

.bn3{
    bottom: 30% !important;
    right: 15% !important;
}

.bn3 img{
    width: 220px !important;
}

.slider-subtitle{
gap:10px;
    
}

.info-slider p{
    width: 70%;
}

.nums{
    position: absolute;
    bottom: 20%;
    right: 20%;
}

.slide-2-nums{
    right: 18%;
    bottom: 5%;
}

.slide-2-nums img{
    width: 220px !important;
    height: auto;
}

.bn-2{
    top: 5%;
}

.images-stores img{
    width: 30vw;
}


.line-buttons{
    height: 8.5vh;
}

.nums img{
    width: 120px;
    height: auto;
}

.info-slider{
    margin-left: 0rem;
    padding-top: 0rem;
}

    
    .sect-about{
        padding: 2rem 1rem;
        align-items: center;
        z-index: 1003;
    }
    
    .sect-about p{
        width: 90%;
    }

    .gradient2{
        height: 80%;
        top:10%;
        right: 20%;
        filter: blur(120px);
    }

    
.buttons-about{
    display: flex;
    justify-content: center;
    column-gap: 3%;

    width: 100%;
}

.btn-about1{
    gap: 5%;
    width:180px;
    height: 50px;
}

.btn-about1 img,.btn-about2 img{
    height: 30px;
}



.btn-about2{
    gap: 5%;
    width:180px;
    height: 50px;
}

    
.frame1{
    display: none;
}

.frame2{
    display: none;
}

.frame3{
    display: none;
}

    .element-3d{
        top: 45%;
        height: auto;
        width: 45vw;

    }
 
    .first-div-nav ul , .nav-div-shop{
        display: none;
    }

    .menu-ham{
        display: flex;
        justify-content: end;
        align-items: center;

    }

    .menu-ham button{
                border: none;
    }
    
    .menu-ham img{
        height: 15px;
        width: auto;
    }

    .gradient{
        width: 100%;
        filter: blur(70px);
    }

    .scroll-bg{
        bottom: -35%;
        right: -35%;
        transform: rotate(30deg);
        width: 100%;
    }

    .token{
        bottom: -8%;
        left: -15%;
        width: 30%;
    }

    .scroll-anim{
        display: none;
    }

    nav{
        padding: 0rem 2rem;
    }

    .hero-section{
        padding: 10rem 1rem;
    }

    .first-div-nav-a1 a img{
        height: 50px;
        width: auto;
    }

    .bg-hero{
        background-position: center;
    }

    .left-content{    
        padding: 0rem;
        align-items: center;
    }

    
    .left-content p{    
        margin-top: .5rem;
    }


    
    .left-content a{
        padding: .7rem 1.3rem;
        gap: 0rem .8rem;
    }

    .left-content img{
        height: 35px;
    }

}

@media screen and (max-width: 330px)  {
    .btn-about1 img, .btn-about2 img{
        width: 7vw !important;
    }

    .img-bottle-uses{
        height: 25vh !important;
        width: auto !important;
    }

    
    .btn-about1, .btn-about2{
       font-size: 4.5vw !important;
    }

    
    .abs-image-imagenes-overview{
        height: 15vh !important;
        width: auto;
        left: 0%;
    }
}

.flex-div-slide{
    display: flex;
    height: 100%;
    align-items: center;
}

.info-header-div-button button{
    align-items: start;
}


.flex-div-slide li, .flex-div-slide a{
    font-family: Segoe;
    font-size: clamp(14px,1.3vw,1.45rem);
    font-style: normal;
    list-style: none;
    color: #6327CE;
    font-weight: 600;
    line-height: 100%;

}

#swiper-special1{
    height: fit-content !important;
    cursor: pointer;
}

#swiper-special2{
    height: fit-content !important;
    cursor: pointer;
}

#swiper-special3{
    height: fit-content !important;
    cursor: pointer;
}

#swiper-special{
    height: fit-content !important;
    cursor: pointer;
}

.info-mobile{
    width: 95%;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 480px) {
    .hero-section{
        padding: 7rem 1rem;
    }

    .inputs-div{
        padding-bottom: 1rem !important;
    }

    .inputs-div a{
        margin-bottom: .5rem;
    }

    .div-title-account h2{
        width: 100%;
        text-align: left;
        padding-left: 2.5%;
    }

    .flex-div-slide li{
        height: 100%;
    }

    .info-header-div{
        justify-content: start;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .reverse{
        flex-direction: column-reverse !important;
        padding-top: 1.5rem;
    }

    .div-title-account{
        gap: 1rem;
        
        padding: 1rem 0rem;
    }

    .div-accounts{
        width: 95%;
        height: 140px;
    }
    
    .contenido-account{
        padding-bottom: .75rem;
        padding-top: 1rem;
        background-color:#FAF6FF;
        justify-content: center;
        align-items: center;
    }
    
    
    .contenido-account:nth-child(1){
        padding-bottom: 2.15rem;

    }

.linea-medio{
    width: 96%;
    
    height: 1px;
    background-color: #C0B3D9;
    position: relative;

}


    .info-header-div{
        position: relative;

        top: 0 !important;
        padding: .5rem 0rem 1rem 0rem;
        border-bottom: 1px solid #6327CE;
        background-color: #FAF6FF;
    }


    .account{
        position: relative;
        display: flex;
        min-height: 100vh;
        width: 100%;
        margin-top: 2.5rem;
        gap: 0rem;
        justify-content: start;
        flex-direction: column;
        align-items: center;
    }
    
    .info-header-div{
        padding-top: 1rem;
    }

    .contenido-account-div-principal{
        background-color: transparent !important;
    }

    .contenido-account{
        background-color: transparent;
    }

    .contenido-account-div-principal{
        width: 100%;
    }

    .info-header-div{
        height: fit-content;
        width: 100%;
        top:-5rem;
    }

    .contenido-account{
        display: flex;
        flex-direction: column;
    }

    .informacion-add{
        flex-direction: column;
        padding-top: 4rem;
    }

    .inputs-div{
        gap: 1rem;
    }

    .elementos-absolutos-contact img:nth-child(1){
        display: none;
    }

    .elementos-absolutos-contact img:nth-child(2){
        display: none;
    }

    .main-contact form button{
        width: 85%;
    }

    .gap-4{
        gap: 1rem !important;
    }

    .main-contact form input{
        height: 45px;
    }

    .input-form-div2 img{
        width: 25px;
    }

    .main-contact-form-button{
        width: 75%;
    }

    .absolute-iamgen{
        right: 3%;
        top: 31% !important;
    }

    #especial-abs{
        top: 20.5% !important;
    }

    .main-contact form{
        width: 90% !important;
        padding-bottom: 0rem !important;
    }
    
    .main-login{
        padding-top: 8rem;
    }

    .div-login{
        flex-direction: column;
        width: 90%;
        gap: 1.5rem;
        margin-top: .5rem;
    }

    .second-login{
        padding: 2rem 0rem;
    }

    .first-login{
        width: 100%;
    }

    .h4-width{
        width: 85%;
    }

    .h5-width{
        width: 80%;
    }

    .main-contact h5{
        width: 80%;
    }

    .w-30{
        width: 90% !important;
        margin-top: 1.5rem !important;
    }

    .right-check{
        width: 100%;
        align-items: center;
    }

    .section-checkout{
        padding-top: 5rem;
    }

    .section-checkout-div{
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .left-check form{
        width: 100%;
    }

    .left-check h1{
        width: 100%;
    }

    .left-check{
        width: 100%;

    }

    .div-total{
        width:100%;
    }

    .delete-div{
        width: 15%;
        align-items: end;
    }

    .why-choose h2{
        margin-top: 2rem;
    }

    .slider-home{
        height: 800px !important;
    }

    .images-shop-section div{
        flex:1 1 0%;
        transition: flex .4s;
    }

    .images-shop-section img{
        object-fit: cover;
        object-position: center;
    }
    
    .images-shop-section div:hover{
        flex:2.2 1 0%;
    }
    

    .ul-grid li h4{
        text-wrap: wrap;
        font-size: 14px;
    }

    .container-members{
        overflow: visible !important;
    }


    nav{
        height: 4rem;
    }

    .ul-grid{

        grid-template-columns: repeat(2,1fr);
    }

    .ul-grid li{
        margin-right: 0rem;
        
    }

    .flex-pagination{
        display: flex;
        flex-direction: row !important;
    }

    .flex-pagination div{
        display: flex;
        flex-direction: row !important;
    }

    .high-div div{
        justify-content: start;
        width: 100%;
    }
    .tech-specs{
        height: fit-content;
        display: flex;
        flex-direction: column;
        padding: 3rem 1rem;
    }
    .tech-specs div{
        flex-direction: column;
        align-items: center;
    }

    .ul-grid li img{
        width: 3vw;
    }

    .father-ul{
        width: 100%;
        margin-top: 2rem;
    }

    .ul-grid{
        margin-top: 2rem;
        gap: 1rem;
    }

    .ul-grid li div{
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }

    .high-div{
        width: 100% !important;
        margin-right: 0rem !important;
    }

    .high-div p{
        padding-left: .5rem;
        padding-top: .5rem;
        
    }

    .circles-selection-span{
        height: 36px;
        width: 36px;
    }

    .fx-p{
        height: 9px !important;
        border-radius: 20px !important;
background: #F6F0FB !important;
justify-content: start !important;
    }


    .ul-grid li{
        width:100% !important;
        flex-shrink: 100px !important;
        text-align: center;
        margin-right: 0rem !important;
    }

    .swiper-scrollbar.swiper-scrollbar-horizontal{
        left: 0% !important;
        top: 0% !important;
        opacity: 1 !important;
        z-index: 8 !important;
    }

    .swiper-scrollbar-drag{
    background: #6327CE !important;
    }

    .tech-specs h2{
        text-align: center;
    }

    .info-spec-img{
        height: auto;
        width: 40vw;
        display: block;
        margin: auto;
    }

    .high-div h4{
        width: 85%;
    }


.Highlights{
   
    background-size: cover;
    height: fit-content;
    padding: 9rem 1rem 6rem 1rem;
}

.drag-high{
    display: block;
}
    
.w-box{
    display: flex;
    flex-direction: column;
    align-items: start;
    height: fit-content;
    padding: 3rem 1rem;
}


.w-box ul{
    display: flex;
    width: 100%;
    padding-top: 3rem ;
   justify-content: space-between;
    flex-direction: column;
    padding-left: 2rem;
    gap: 1.5rem;
}



.w-box ul li{
    color: #7459A6;
font-family:Segoe;
list-style: disc;
overflow: visible;
font-size: clamp(16px,1.1vw,1.2vw);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 28.5px */
}


    .divs-accordions-flex2{
        gap: 1rem;
        overflow: visible;
    }

    .info-bottles{
        gap: 20px;
    }

   .mobile-no{
    display: none !important;
   }

    .w-p{
        text-align: justify;
        width: 100%;
    }
    

    .divs-accordions-flex2 button{
margin-bottom: 0rem;
margin-top: -1.8%;
overflow: visible;
    }

    .bottle-uses{
        height: fit-content;
        padding: 3rem 1rem;
        flex-direction: column;
        align-items: center;
    }

    .info-bottles{
        width: 95%;
        margin-top: 2rem;
    }

    .div-img-bottle-uses{
        display: flex;
        justify-content: center;
        width: 100% !important;
    }

    .img-bottle-uses{
        height: 30vh !important;
        width: auto !important;
    }

    .images-shop-section{
        height: 40vh;
    }
    

.text-kiran{
        width: auto;
        height:70vh;
        object-fit: contain;

    }

    .section-overview{
        padding: 2rem 1rem;
        height: fit-content;
    }

    .class-flex-d div{
        width: 100%;
    }

    .info-slider-shop p{
        width: 100% !important;
    }

    .imagenes-overview{
        padding-right: 0rem;
        padding-left: 4rem;
    }

    .abs-image-imagenes-overview{
        height: 20vh;
        width: auto;
        left: 0%;
    }

    .token-shop-2{
        top: 50%;
        width: 10%;
        left: auto;
        display: none;
        right: -5%;
    }

    .token-shop-1{
        top: 67vh;
        width: 10%;
        left: -2%;
        display: none;
        bottom: auto;
    }
    
    .token-shop-3{
        top: 70%;
        width: 10%;
        display: none;
        left: auto;
        right: -5%;
    }

    .espiral-shop{
        top: 0%;
    }

    .class-flex-d{
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .class-flex-d h1{
        padding: 0rem 1rem;
    }

    .section-shop{
        flex-direction: column;
        align-items: center;
        padding: 7rem 1rem 4rem 1rem;
        height: fit-content;
        justify-content: start;
    }

    .info-tracks{
        padding: 2rem 1rem;
    }

    .circles-selection div{
        width: 30px;
        height: 30px;
    }

    .icons-shop div img{
        width: auto;
        height: 3.5vh;
    }

    .divs-accordions{
        width: 100%;
        padding-bottom: 1rem;
    }

    .btn-shop-div-1{
        width: 45%;
    }

    .btns-shop-button{
        width: 50%;
    }

    .btns-shop{
        width: 100%;
        padding-bottom: 1rem;
        gap: 1rem;
    }

    .info-shop{
        row-gap: 2rem;
    }

    .text-info{
        gap: 10px;
    }

    .text-info p{
        width: 100%;
        line-height: 110%;
    }
    .text-info h4{
        margin-bottom: 0rem;
    }

    .div-image-shop{
        width: 100%;
        margin-bottom: .5rem;
    }

    .div-image-shop img{
        height: auto;
        width: 100%;
    }

    .btn-shop2:after{

        background-color: #FFF;
    }


    .btn-shop2:hover{
        color: #6327CE;
        background-color: #FFF;
    }

    .btn-shop2:hover .bag-hover2{
        opacity: 1;
        }

        .btn-shop2:hover .bag-hover{
            opacity: 0;
            }
        

    .btn-shop2{
        color: #FFF;
        border: 2px solid #FFF;
    }

    .bag-hover2{

        opacity: 0;
    }

    .bag-hover{
        visibility: visible;
        opacity: 1;
    }

    .nav-div-shop2{
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: end;
        gap: 0rem 2rem;
        align-items: center;
    }

    .btn-shop{
        margin-right: 0rem;
    }

    footer{
        margin-top: 5rem;
        padding: 6rem 1rem 1rem 1rem ;
        background-size: cover;
        background-position: center;
    }

    .input-footer button{
        height: 25px;
    }

    .redes-footer{
        width: 100%;
        justify-content: center;
    }

    .tiendas{
        width: 100%;
        align-items: end;
        column-gap:30px ;
        justify-content: center;
    }

    .desktop-line{
        display: none;
    }

    .mobile-line{
        display: block;
    }

    .info-redes-footer{
        flex-direction: column-reverse;
    }

    .tiendas img{
        width: 41vw;
        height: auto;
    }

    .line-grey-footer{
        height: 1px;
    }

    .info-redes-footer p{
        margin-top: .9rem;
    }

    .input-footer{
        width: 100%;
        height: 45px;
    }

    .footer-up{
        flex-direction: column;
        margin-bottom: .5rem;
        gap: 2rem;
    }

    .div-footer-up{
        width: 100%;
    }

    .card-roadmap-container{
        filter: drop-shadow(0px 0px 5px rgba(80, 19, 184, 0.23));

    }

    .buttons-nav{
        top: auto;
        right: 13%;
        bottom:44.5%;
    }

    .slider-home h2{
        text-align: center;
        line-height: 130%;
    }

    #members{
        padding: 4rem 1rem;
        height: fit-content;
    }

    #members-images > img{
        width:auto;
        height: 50vh !important;
        margin-right: 0rem !important;
    }

    #members h2{
        text-align: center;
        line-height: 130%;
    }

    .token-members{
        width: 20%;
        left: -10%;
        bottom: -5%;
    }

    .huella-abs-left{
        display: none;
    }

    .espiral-testimons{
        display: none;
    }

    .token-testimons{
        display: none;
    }

    .bottle-testimons{
        filter: blur(2px);
        width: 10%;
        top: 12%;
        right: 9%;
    }

    .gradient3{
        display: none;
    }

    .swiper-pagination-bullet-active{
        width: 22px !important;
        height: 10px !important;
        border-radius: 25px !important;
        background-color: #934DCA !important;
    }

    .img-abs-left{
        width: 90%;
        bottom: auto;
        top: 10%;
        left: -50%;
    }

    .img-back{
        width: 100%;
        height: 100%;
    }

    .abs-token{
        position: absolute;
        bottom: 88%;
        left: -10%;
        width: 18%;
    }


    .swiper-wrapper{
        overflow: visible;
    }

    .container-white{
        width: 95% !important;
        overflow: visible !important;
        }

        .container-white > *{
            overflow: visible !important;
            }
            
        
        #gifs{
            width: 30vw;
            height: auto;
        }

        

    .containers-home-section{
        margin-top: 0rem;
    }

    .why-choose{
        padding: 5rem 1rem;
        height: fit-content;
    
    }

    .images-stores{
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: 5%;

    }



    .content-hero{
        z-index: 1003;
    }

    
    .swiper {
        margin-top: 3rem;
        width: 100%;
        height: 100%;
        overflow-x: visible !important;
      }
  
      .swiper-slide {
        height: 270px !important;

        display: flex !important; 
      }
  
      .info-container img{
        width: 20vw;
        height: auto;
      }

      .info-container{
        overflow: visible !important;
      }

      .containers-home-section{
        column-gap: 2rem;
      }

      .swiper-slide {
        width: 85%;
        overflow: visible !important;
        
      }
  
      .technology{
       height: fit-content;
        padding: 0rem 1rem;
      }

      .technology > *{
overflow: visible !important;
       }
      
      .swiper-pagination{
        margin-top:2rem;
        position: relative !important;
        bottom: 0rem !important;
      }

      .swiper-slide:nth-child(2n) {
        width: 85%;
      }
  
      .swiper-slide:nth-child(3n) {
        width: 85%;
      }

      #smart-violet{
        position: relative;
      }

      .abs-mobile-header{
        position: absolute;
        visibility: visible;
        left: 4%;
        z-index: -9;
      }

    .sect-about{
   
        padding: 3rem 1rem;
        align-items: center;
        z-index: 8;
    }
    
    .sect-about p{
        width: 100%;
    }

    .gradient2{
        height: 80%;
        top:10%;
        right: 20%;
        filter: blur(120px);
    }

    
.buttons-about{
    display: flex;
    justify-content: center;
    column-gap: 3%;

    width: 100%;
}

.btn-about1{
    gap: 5%;
    width:50%;
    height: 45px;
}

.btn-about1 img,.btn-about2 img{
    height: 25px;
}

.div-line-tech{
    width: 200%;
}

.btn-about2{
    gap: 5%;
    width:50%;
    height: 45px;
}

    
.frame1{
    display: none;
}

.frame2{
    display: none;
}

.frame3{
    display: none;
}


    
.element-3d{
    top: 45%;
    height: auto;
    width: 55vw;
}

.slider-home h2{
    text-align: center;
}

.div-line-tech{
    top: 15vh;
    align-items: start;
}

.div-slider{
    padding: 0rem 1rem;
    flex-direction: column-reverse;
    margin-top:2rem;
    gap: 20px;
    top: 4rem;
    height: 800px !important;
}


.abs-div{
    position: absolute;
    top: 55%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: center;
}


.images-store{

    top: 52% !important; 
}

.images-stores{
    justify-content: center;
    gap: 3% !important;
}

.abs-div1{
    position: absolute;
    top: 55%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.img-slider{
    height: auto;
    width: 32vw;
    margin-top: 15%;
}

.slider-subtitle img{
    width: 5.5vw;
    height: auto;
    
}

#slide-p-2{
    width: 90%;
}

#slide-info-3{
    width: 100%;
}

#slide-p-3{
    width: 90%;
}

.bn3{
    bottom: 32% !important;
    right: 15% !important;
    top: 19% !important;
}

.bn3 img{
    width: 120px !important;
}

.slider-subtitle{
gap:10px;
    
}

.info-slider p{
    width: 90%;
    text-align: justify;
}

.nums{
    position: absolute;

    right: 20%;
}

#roadmap{
    height: fit-content;
}

.main-contact{
    padding-top: 10rem !important;
    height: fit-content !important;
}

#account-mobile{
    overflow: visible !important;
}

#account-mobile > *{
    overflow: visible !important;
}

.roadmaps {
    width:480px !important;
}

.mt-negative2{
    margin-top: -1rem !important;
    margin-bottom: .5rem;
}

.pad-top-5{
    padding-top: 7rem !important;
}

.cart-title{
    height: 10%;
}

.cart-right-div{
    justify-content: start;
    gap: 2rem;
}

.cart-body{
    height:280px;
}

.cart-total{
    height: 20%;
    gap: .5rem;
    justify-content: start;
}

.cart-body-div div div{
    margin-top: .4rem;
}

.cart-body-div{
    height: 50%;
}

.cart-titles{
    width: 95%;
    height: 10%;
}

.cart-body{
    width: 95%;
}

.cart-total{
    width: 95%;
}

.cart-right{
    height: 100dvh;


}


.cart-body-div img{
    height: 100px;
}

.delete-div img{
    height: 2.5vh;
    margin-right: .5rem;
}

.cart-total a{
    height: 50px;
}

.cart-right{
    top: 0%;
}


.cart-right-div{
    width: 100%;
}


#special-h2{
    line-height: 100%;
}

.mobile-yes{
    display: block !important;
   }

.roadmap-div{
    height: 580px !important;
    margin-top: 0rem !important;
}

#roadmap-image{
    object-fit: contain;
    width: auto !important;
    height: 40%;
    top: 2%;
}


.rm-2{
    top: -12%;
    left: 2%;
}

.rm-1{
    top: 12%;
    left: -7.5%;
}

.rm-3{
    top: 12%;
    left: 7%;
}


.rm-4{
    top: -2%;
    left: 9%;
}

.rm-5{
    top:11%;
    left: 15%;
}

.rm-6{
    top:3.5%;
    left: 18.5%;
}

.rm-7{
    top:-17%;
    left: 16%;
}

#roadmap h2{
    margin-bottom: 2rem;
}

.roadmap-div{
    width: fit-content !important;
}

.card-roadmap-2{
    width:50% !important;
    flex-shrink: 100px;
}

.card-roadmap{
    width:50% !important;
    flex-shrink: 100px;
}

.drag-roadmap{
    top:90%;
}

.pd-mobile{
    padding: 2rem 1rem !important;
}

.slide-2-nums{
    right: 55px !important;
    top: 19% !important;
    bottom: -30px !important;
}

.slide-2-nums img{
    width: 120px !important;
    height: auto;
}


.images-stores img{
    width: 40vw;
}

.line-buttons{
    height: 5vh;
}

.nums {
top: 20%;
}

.nums img{
    width: 90px;
    height: auto;
}

.info-slider{
    margin-left: 0rem;
    padding-top: 0rem;
}


    #title-a, #title-b{
        line-height: 110%;
    }

    .menu-ham{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: end;
        gap: 5px;
        height: 100%;
        position: relative;
        z-index: 10;
    }

    .menu-ham div{
        background-color: #6327CE;
        width: 30px;
        height: 1.5px;
    }
    
    .left-menu{
        height: 100vh;
        padding: 0rem 2rem;
        position: fixed;
        background: rgba(45, 33, 67, 0.97);
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(0px);
        top: 0%;
        right: 0%;
        width: 100%;
        right:-100%;
        z-index: 9;
    }

    .left-menu-div-1{
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: start; 
        justify-content: center;
 
    }

    .activated{
        content: "";
    }

    .left-menu-div-1 ul li a{
        display: flex;
        height: fit-content;
        column-gap: 10px;
        color: #6327CE;
    }

    .left-menu-div-1 ul li a:visited {
        color: #6327CE;
    }

    
    .left-menu-div-1 ul li a img{
        width: 9vw;
        opacity: .5;
        transition: all 300ms ease;
    }

    .left-menu-div-1 ul li a:hover span{
        opacity: 1;
    }

    .btn-shop2{
        padding: 1rem 3rem;
    }

    .btn-shop{
        padding: 1rem 3.3rem;
    }

    .nav-div-shop2{
        gap: 20px;
        margin-bottom: 20px;
    }

    .opacity-5{
        opacity: .5;
    }

    .left-menu-div-1 ul li a:hover img{
        opacity: 1;
    }

    .left-menu-div-1 ul{
        gap: 10px;
        display: flex;
        flex-direction: column;
    }

    .left-menu-div-1 ul li a span{
font-size: 8vw;
        color: white;
        opacity: .5;
        transition: all 300ms ease;
font-family:Segoe;
font-weight: 350;

    }
    
    .left-menu-div-2{
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: end;   
        padding-bottom:3rem ;
    }
    

    .gradient{
        width: 100%;
        filter: blur(70px);

    }

    .scroll-bg{
        bottom: -35%;
        right: -35%;
        transform: rotate(30deg);
        width: 100%;
    }

    .token{
        bottom: -8%;
        left: -20%;
        width: 40%;
    }

    .scroll-anim{
        display: none;
    }

    nav{
        padding: 0rem 1rem;
    }

    .first-div-nav-a1 a img{
        height: 40px;
        width: auto;
        z-index: 9;
    }

    .bg-hero{
        background-position: center;
    }

    .first-div-nav ul , .nav-div-shop{
        display: none;
    }

    

    .left-content{    
        padding: 0rem;
        align-items: center;
    }

    
    .left-content p{    
        margin-top: .5rem;
    }

    .left-content a{
        padding: .6rem 1.2rem;
        gap: 0rem .5rem;
    }

    .left-content img{
        height: 25px;
    }



}


@media screen and (min-width: 481px) and (max-width: 768px) {
    .hero-section{
        padding: 7rem 1rem;
    }

    .info-mobile-header {
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 1.5rem;
    }

    .contenido-account2 form {
        width: 95%;
    }

    .main-contact-form-button{
        width: 65% !important;
    }

    .container-members{
        overflow: visible !important;
    }

    .inputs-div{
        gap: 1rem;
    }

    .elementos-absolutos-contact img:nth-child(1){
        display: none;
    }

    .elementos-absolutos-contact img:nth-child(2){
        display: none;
    }

    .main-contact form button{
        width: 75%;
    }

    .main-contact form{
        width: 70% !important;
    }
    
    .main-login{
        padding-top: 8rem;
    }

    .div-login{
        flex-direction: column;
        width: 80%;
        gap: 1.5rem;
        margin-top: .5rem;
    }

    .second-login{
        padding: 2rem 0rem;
    }

    .first-login{
        width: 100%;
    }

    .h4-width{
        width:75%;
    }

    .h5-width{
        width: 70%;
    }

    .main-contact h5{
        width: 70%;
    }

    .w-30{
        width: 70% !important;
    }
    
    .right-check{
        width: 100%;
        align-items: center;
    }

    .section-checkout{
        padding-top: 5rem;
    }

    .section-checkout-div{
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .left-check form{
        width: 100%;
    }

    .left-check h1{
        width: 100%;
    }

    .left-check{
        width: 100%;

    }

    .div-total{
        width:100%;
    }


    
.cart-body-div img{
    height: 10vh;
}

.delete-div img{
    height: 1.5vh;
}

.cart-total a{
    height: 50px;
}

.cart-total{
    height: auto;
}

.cart-right-div{
    width: 60%;
}


    .nums{
        height: 200px;
    }

    nav{
        height: 4rem;
    }


    .ul-grid li{
        margin-right: 0rem;
    }

    .flex-pagination{
        display: flex;
        flex-direction: row !important;
    }

    .flex-pagination div{
        display: flex;
        flex-direction: row !important;
    }

    .high-div div{
        justify-content: start;
        width: 100%;
    }
    .tech-specs{
        height: fit-content;
        display: flex;
        flex-direction: column;
        padding: 2rem 1rem;
    }
    .tech-specs div{
        flex-direction: column;
 
    }

    .ul-grid li img{
        width: 3vw;
    }

    .father-ul{
        width: 100%;
        margin-top: 2rem;
    }

    .ul-grid{
        margin-top: 2rem;
        grid-template-columns: repeat(3,1fr);
    }

    .ul-grid li div{
        flex-direction: row;
    }

    .high-div{
        width: 100% !important;
        margin-right: 0rem !important;
    }

    .high-div p{
        padding-left: .5rem;
        padding-top: .5rem;
        
    }

    .circles-selection-span{
        height: 36px;
        width: 36px;
    }

    .fx-p{
        height: 9px !important;
        border-radius: 20px !important;
background: #F6F0FB !important;
justify-content: start !important;
    }


    .ul-grid li{
        width:100% !important;
        flex-shrink: 100px !important;
        margin-right: 0rem !important;
   
    }

    .swiper-scrollbar.swiper-scrollbar-horizontal{
        left: 0% !important;
        top: 0% !important;
        opacity: 1 !important;
        z-index: 8 !important;
    }

    .swiper-scrollbar-drag{
    background: #6327CE !important;
    }

    .tech-specs h2{
        text-align: center;
    }

    .info-spec-img{
        height: auto;
        width: 40vw;
        display: block;
        margin: auto;
    }

    .high-div h4{
        width: 85%;
    }
    
.Highlights{
   
    background-size: cover;
    height: fit-content;
    padding: 9rem 1rem 6rem 1rem;
}

.drag-high{
    display: block;
}
    
.w-box{
    display: flex;
    flex-direction: column;
    align-items: start;
    height: fit-content;
    padding: 3rem 1rem;
}


.w-box ul{
    display: flex;
    width: 100%;
    padding-top: 3rem ;
   justify-content: space-between;
    flex-direction: column;
    padding-left: 2rem;
    gap: 1.5rem;
}



.w-box ul li{
    color: #7459A6;
font-family:Segoe;
list-style: disc;
overflow: visible;
font-size: clamp(16px,1.1vw,1.2vw);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 28.5px */
}


    .divs-accordions-flex2{
        gap: 1rem;
        overflow: visible;
    }

    .info-bottles{
        gap: 20px;
    }

    .w-p{
        width: 100%;
    }
    

    .divs-accordions-flex2 button{
margin-bottom: 0rem;
overflow: visible;
    }

    .bottle-uses{
        height: fit-content;
        padding: 3rem 1rem;
        flex-direction: column;
    }

    .div-img-bottle-uses{
        display: flex;
        justify-content: center;
    }

    .img-bottle-uses{
        height: 40vh !important;
        width: auto !important;
    }

    .images-shop-section{
        height: fit-content;
    }

.text-kiran{
        width: 60%;
    }

    .section-overview{
        padding: 2rem 1rem;
        height: fit-content;
    }

    .class-flex-d div{
        width: 100%;
    }

    .info-slider-shop p{
        width: 100%;
    }

    .imagenes-overview{
        padding-right: 0rem;
        padding-left: 4rem;
    }

    .abs-image-imagenes-overview{
        height: 25vh;
        width: auto;
        top: 40%;
        left: 0%;
    }

    .bottle-uses{
        justify-content: center;
        align-items: center;
    }

    .token-shop-2{
        top: 50%;
        width: 10%;
        left: auto;
        right: -5%;
    }

    .token-shop-1{
        top: 80vh;
        width: 10%;
        left: -2%;
        z-index: 0;
        bottom: auto;
        display: none;
    }
    
    .token-shop-3{
        top: 70%;
        width: 10%;
        left: auto;
        right: -5%;
    }

    .espiral-shop{
        top: 0%;
    }

    .class-flex-d{
        flex-direction: column-reverse;
        gap: 1.5rem;
    }

    .class-flex-d h1{
        padding: 0rem 1rem;
    }

    .section-shop{
        flex-direction: column;
        align-items: center;
        padding: 7rem 1rem 4rem 1rem;
        height: fit-content;
        justify-content: start;
    }

    .info-tracks{
        padding: 2rem 1rem;
    }

    .circles-selection div{
        width: 30px;
        height: 30px;
    }

    .icons-shop div img{
        width: 8vw;
        height: auto;
    }

    .divs-accordions{
        width: 100%;
        padding-bottom: 1rem;
    }

    .btn-shop-div-1{
        width: 60%;
    }

    .btns-shop{
        width: 100%;
        padding-bottom: 1rem;
        gap: 1rem;
    }

    .info-shop{
        row-gap: 2rem;
    }

    .text-info{
        gap: 10px;
    }

    .text-info p{
        width: 100%;
        line-height: 110%;
    }
    .text-info h4{
        margin-bottom: 0rem;
    }

    .div-image-shop{
        width: 100%;
        margin-bottom: .5rem;
    }

    .div-image-shop img{
        height: auto;
        width: 100%;
    }

    .btn-shop2:after{

        background-color: #FFF;
    }


    .btn-shop2:hover{
        color: #6327CE;
        background-color: #FFF;
    }

    .btn-shop2:hover .bag-hover2{
        opacity: 1;
        }

        .btn-shop2:hover .bag-hover{
            opacity: 0;
            }
        

    .btn-shop2{
        color: #FFF;
        border: 2px solid #FFF;
    }

    .bag-hover2{

        opacity: 0;
    }

    .bag-hover{
        visibility: visible;
        opacity: 1;
    }

    .nav-div-shop2{
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: end;
        gap: 0rem 2rem;
        align-items: center;
    }

    .btn-shop{
        margin-right: 0rem;
    }

    footer{
        padding: 6rem 1rem 1rem 1rem ;
        background-size: cover;
        background-position: center;
    }

    .input-footer button{
        height: 25px;
    }

    .redes-footer{
        width: 100%;
        justify-content: center;
    }

    .tiendas{
        width: 100%;
        align-items: end;
        column-gap:30px ;
        justify-content: center;
    }

    .desktop-line{
        display: none;
    }

    .mobile-line{
        display: block;
    }

    .info-redes-footer{
        flex-direction: column-reverse;
    }

    .tiendas img{
        width: 20vw;
        height: auto;
    }

    .line-grey-footer{
        height: 1px;
    }

    .info-redes-footer p{
        margin-top: .9rem;
    }

    .input-footer{
        width: 100%;
        height: 45px;
    }

    .footer-up{
        margin-bottom: .5rem;
        gap: 2rem;
    }

    .div-footer-up{
        width: 100%;
    }

    .card-roadmap-container{
        filter: drop-shadow(0px 0px 5px rgba(80, 19, 184, 0.23));

    }

    .gradient4{
        display: none;
    }

    .buttons-nav{
        right: 17%;
        top:23.5%;
    }

    .slider-home h2{
        text-align: center;
        line-height: 130%;
    }

    #members{
        padding: 4rem 1rem;
        height: fit-content;
    }

    #members-images > img{
        width:auto;
        height: 50vh !important;
        margin-right: 0rem !important;
    }

    #members h2{
        text-align: center;
        line-height: 130%;
    }

    #about{
        padding: 0rem 2rem;
    }

    .token-members{
        width: 20%;
        left: -10%;
        bottom: -5%;
    }

    .huella-abs-left{
        display: none;
    }

    .espiral-testimons{
        display: none;
    }

    .token-testimons{
        display: none;
    }

    .bottle-testimons{
        filter: blur(2px);
        width: 10%;
        top: 12%;
        right: 9%;
    }

    .gradient3{
        display: none;
    }

    .swiper-pagination-bullet-active{
        width: 22px !important;
        height: 10px !important;
        border-radius: 25px !important;
        background-color: #934DCA !important;
    }

    .img-abs-left{
        width: 90%;
        bottom: auto;
        top: 10%;
        left: -50%;
    }

    .img-back{
        width: 100%;
        height: 100%;
    }

    .abs-token{
        position: absolute;
        bottom: 88%;
        left: -10%;
        width: 18%;
    }


    .swiper-wrapper{
        overflow: visible;
    }

    .container-white{
        width: 45% !important;
        overflow: visible !important;
        }

        .container-white > *{
            overflow: visible !important;
            }
            
        
        #gifs{
            width: 15vw;
            height: auto;
        }

        

    .containers-home-section{
        margin-top: 0rem;
    }

    .why-choose{
        padding: 5rem 2rem;
        height: fit-content;
    
    }

    .images-stores{
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 5%;
        margin-top: 3rem;
        position: absolute;
    }



    .content-hero{
        z-index: 1003;
    }

    
    .swiper {
        margin-top: 3rem;
        width: 100%;
        height: 100%;
        overflow-x: visible !important;
      }
  
      .swiper-slide {
        height: 270px !important;

        display: flex !important; 
      }
  
      .info-container img{
        width: 10vw;
        height: auto;
      }

      .info-container{
        overflow: visible !important;
      }

      .div-line-tech{
        display: none;
      }

      .containers-home-section{
        column-gap: 2rem;
      }

      .swiper-slide {
        width: 85%;
        overflow: visible !important;
        
      }
  
      .technology{
       height: fit-content;
        padding: 0rem 2rem;
      }

      .technology > *{
overflow: visible !important;
       }
      
      .swiper-pagination{
        margin-top:2rem;
        position: relative !important;
        bottom: 0rem !important;
      }

      .swiper-slide:nth-child(2n) {
        width: 45%;
      }
  
      .swiper-slide:nth-child(3n) {
        width: 45%;
      }

      #smart-violet{
        position: relative;
      }

      .abs-mobile-header{
        position: absolute;
        visibility: visible;
        left: 4%;
        z-index: -9;
      }

    .sect-about{
   
        padding: 3rem 1rem;
        align-items: center;
        z-index: 8;
    }
    
    .sect-about p{
        width: 100%;
    }

    .gradient2{
        height: 80%;
        top:10%;
        right: 20%;
        filter: blur(120px);
    }

    
.buttons-about{
    display: flex;
    justify-content: center;
    column-gap: 3%;

    width: 100%;
}

.btn-about1{
    gap: 5%;
    width:50%;
    height: 45px;
}

.btn-about1 img,.btn-about2 img{
    height: 25px;
}

.div-line-tech{
    width: 200%;
}

.btn-about2{
    gap: 5%;
    width:50%;
    height: 45px;
}

    
.frame1{
    display: none;
}

.frame2{
    display: none;
}

.frame3{
    display: none;
}


    
.element-3d{
    top: 45%;
    height: auto;
    width: 35vw;
}

.slider-home h2{
    text-align: center;
}

.div-line-tech{
    top: 15vh;
    align-items: start;
}

.div-slider{
    padding: 0rem 1rem;
    flex-direction: column-reverse;
    margin-top:4rem;
    gap: 20px;

}


.abs-div{
    position: absolute;
    bottom: 5%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: center;
}


.abs-div1{
    position: absolute;
    top: -15%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.img-slider{
    height: auto;
    width: 15vw;
}

.slider-subtitle img{
    width: 2.5vw;
    height: auto;
    
}

#slide-info-3{
    width: 100%;
}

#slide-p-3{
    width: 90%;
}

.bn3{
    bottom: 13% !important;
    right: 15% !important;
}

.bn3 img{
    width: 120px !important;
}

.slider-subtitle{
gap:10px;
    
}

.info-slider p{
    width: 70%;
}

.nums{
    position: absolute;

    right: 20%;
}

#roadmap{
    height: fit-content;
}

.roadmaps {
    width: fit-content;
}

.roadmap-div{
    height: 580px !important;

}

#roadmap-image{
    object-fit: contain;
    width: auto !important;
    height: 40%;
    top: 2%;
}


.rm-2{
    top: -8%;
    left: -3%;
}

.rm-1{
    top: 12%;
    left: -5%;
}

.rm-3{
    top: 16%;
    left: -3%;
}


.rm-4{
    top: 0%;
    left: -5%;
}

.rm-5{
    top:16%;
    left: -3%;
}

.rm-6{
    top:5%;
    left: -4%;
}

.rm-7{
    top:-15%;
    left: -8%;
}


.roadmap-div{
    width: fit-content !important;
}

.card-roadmap-2{
    width:35% !important;
    flex-shrink: 100px;
}

.card-roadmap{
    width:35% !important;
    flex-shrink: 100px;
}

.drag-roadmap{
    bottom:-7%;
}



.slide-2-nums{
    right: 125px !important;
    bottom: -10px !important;
}

.slide-2-nums img{
    width: 120px !important;
    height: auto;
}


.images-stores img{
    width: 30vw;
}

.line-buttons{
    height: 5vh;
}

.nums {
bottom: 65px;
}

.nums img{
    width: 90px;
    height: auto;
}

.info-slider{
    margin-left: 0rem;
    padding-top: 0rem;
}


    #title-a, #title-b{
        line-height: 110%;
    }

    .menu-ham{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: end;
        gap: 5px;
        height: 100%;
        position: relative;
        z-index: 10;
    }

    .menu-ham div{
        background-color: #6327CE;
        width: 30px;
        height: 1.5px;
    }
    
    .left-menu{
        height: 100vh;
        padding: 0rem 2rem;
        position: fixed;
        background: rgba(45, 33, 67, 0.97);
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(0px);
        top: 0%;
        right: 0%;
        width: 100%;
        right:-100%;
        z-index: 9;
    }

    .left-menu-div-1{
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: start; 
        justify-content: center;
 
    }

    .activated{
        content: "";
    }

    .left-menu-div-1 ul li a{
        display: flex;
        height: fit-content;
        column-gap: 10px;
    }

    
    .left-menu-div-1 ul li a img{
        width: 9vw;
        opacity: .5;
        transition: all 300ms ease;
    }

    .left-menu-div-1 ul li a:hover span{
        opacity: 1;
    }

    .btn-shop2{
        padding: 1rem 3rem;
    }

    .btn-shop{
        padding: 1rem 3.3rem;
    }

    .nav-div-shop2{
        gap: 20px;
        margin-bottom: 20px;
    }

    .opacity-5{
        opacity: .5;
    }

    .left-menu-div-1 ul li a:hover img{
        opacity: 1;
    }

    .left-menu-div-1 ul{
        gap: 10px;
        display: flex;
        flex-direction: column;
    }

    .left-menu-div-1 ul li a span{
font-size: 8vw;
        color: white;
        opacity: .5;
        transition: all 300ms ease;
font-family:Segoe;
font-weight: 350;

    }
    
    .left-menu-div-2{
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: end;   
        padding-bottom:3rem ;
    }
    

    .gradient{
        width: 100%;
        filter: blur(70px);
    }

    .scroll-bg{
        bottom: -35%;
        right: -35%;
        transform: rotate(30deg);
        width: 100%;
    }

    .token{
        bottom: -8%;
        left: -20%;
        width: 40%;
    }

    .scroll-anim{
        display: none;
    }

    nav{
        padding: 0rem 1rem;
    }

    .first-div-nav-a1 a img{
        height: 40px;
        width: auto;
        z-index: 9;
    }

    .bg-hero{
        background-position: center;
    }

    .first-div-nav ul , .nav-div-shop{
        display: none;
    }

    

    .left-content{    
        padding: 0rem;
        align-items: center;
    }

    
    .left-content p{    
        margin-top: .5rem;
    }

    .left-content a{
        padding: .6rem 1.2rem;
        gap: 0rem .5rem;
    }

    .left-content img{
        height: 25px;
    }



}
@media screen and (min-width: 1023px) and (max-width: 1279px) and (max-height:800px){
    .info-mobile-header{
        display: none;
    }

.first-div-nav ul{
    display: none;
}

.main-contact-form-button{
    width: 65% !important;
}


.inputs-div{
    gap: 1rem;
}

.elementos-absolutos-contact img:nth-child(1){
    display: none;
}

.elementos-absolutos-contact img:nth-child(2){
    display: none;
}

.main-contact form button{
    width: 75%;
}

.main-contact form{
    width: 70% !important;
}

.main-login{
    padding-top: 8rem;
}

.div-login{
    flex-direction: column;
    width: 80%;
    gap: 1.5rem;
    margin-top: .5rem;
}

.second-login{
    padding: 2rem 0rem;
}

.first-login{
    width: 100%;
}

.h4-width{
    width:75%;
}

.h5-width{
    width: 70%;
}

.main-contact h5{
    width: 70%;
}

.w-30{
    width: 70% !important;
}

.cart-body-div{
    height: fit-content !important;
}

.cart-body-div > *{
   overflow: visible !important;;
}

.container-home{
    width: 30% !important;
}



.right-check{
    width: 100%;
    align-items: center;
}

.section-checkout{
    padding-top: 5rem;
}

.section-checkout-div{
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.left-check form{
    width: 100%;
}

.left-check h1{
    width: 100%;
}

.left-check{
    width: 100%;

}

.div-total{
    width:100%;
}



.w-box{
    align-items: center !important;
}

.w-box h2{
    text-align: center !important;
}

.tech-specs h2{
    text-align: center !important;
}

.left-content a{
    width: 180px;
    height: 55px;
    gap: 0rem .5rem;
    padding: .5rem;
}

.info-container{
    overflow: visible !important;
  }



.text-kiran{
    height: 60vh !important;
}

.info-slider{
    margin-left: 1rem;
    padding-top: 0rem;
}



#smart-violet{
    position: relative;
  }

  .abs-mobile-header{
    position: absolute;
    visibility: visible;
    left: 4%;
    top: 15%;
    z-index: -9;
  }

.btn-shop2{
    padding: 1rem 3rem;
    width: 250px;
}

.btn-shop{
    padding: 1rem 3.3rem;
    width: 250px;
}

.nav-div-shop2{
    gap: 20px;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.opacity-5{
    opacity: .5;
}

.left-menu-div-1 ul li a:hover img{
    opacity: 1;
}

.left-menu-div-1 ul{
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.left-menu-div-1 ul li a span{
font-size: 2.5vw;
    color: white;
    opacity: .5;
    transition: all 300ms ease;
font-family:Segoe;
font-weight: 350;

}

.left-menu-div-2{
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: end;   
    padding-bottom:1.5rem ;
}


    
.left-menu{
    height: 100vh;
    padding: 0rem 2.5rem;
    position: fixed;
    background: rgba(45, 33, 67, 0.97);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(0px);
    top: 0%;
    right: 0%;
    width: 100%;
    right:-100%;
    z-index: 9;
}

.left-menu-div-1{
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: start; 
    justify-content: center;

}

.activated{
    content: "";
}



.left-menu-div-1 ul li a{
    display: flex;
    height: fit-content;
    column-gap: 10px;
}


.left-menu-div-1 ul li a img{
    width: 3.5vw;
    opacity: .5;
    transition: all 300ms ease;
}

.left-menu-div-1 ul li a:hover span{
    opacity: 1;
}

.nav-div-shop{
    display: none;
}
.menu-ham{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: end;
    gap: 5px;
    height: 100%;
    position: relative;
    z-index: 10;
}

.menu-ham div{
    background-color: #6327CE;
    width: 30px;
    height: 1.5px;
}


.drag-high{
    display: none !important;
}

.bn3{
    right: 0% !important;
}

.div-slider{
    margin-top: 0rem !important;
}

.slide-2-nums{
    right: 0px !important;
}

.line-buttons{
    height: 40px;
}

.nums{
    width: 120px !important;
right: 0%;
margin-top: 0%;
}

.nums img{
    width: auto;
    height: 250px;
}
.section-shop{
    height: fit-content;
}

.high-father{
    margin-top: 1.5rem;
    padding-bottom: 2rem;
}

.gap-accordions{
    padding-top: 1rem;
}

.info-shop{
    gap: 1rem;
}

.section-overview{
    padding: 6rem 2rem 0rem 2rem;
}

.tech-specs{
    height: fit-content;
}

.Highlights{
    height: fit-content;
}

.image-shop-especial{
    width: 95% !important;
}

.abs-image-imagenes-overview{
    width: 55%;
}

.text-info p{
    width: 90%;
}

.buttons-nav{
    right: 11% !important;
    top: 150px !important;
}


.info-slider p{
    width: 80% !important;
}
.token{
    width: 15%;
}

.container-home{
    height: 240px;
}

#members-images > img{
    width: 30%;
}


#roadmap{
    height: fit-content;
}

.roadmaps {
    width: 819px !important ;
}

.card-roadmap{
    height: 310px !important;
}

.roadmap-div{
    height: 640px !important;

}

#roadmap-image{
    object-fit: contain;
    width: auto !important;
    height: 40%;
    top: 2%;
}


.rm-2{
    top: -8%;
    left: -3%;
}

.rm-1{
    top: 12%;
    left: -5%;
}

.rm-3{
    top: 16%;
    left: -3%;
}


.rm-4{
    top: 0%;
    left: -5%;
}

.rm-5{
    top:16%;
    left: -3%;
}

.rm-6{
    top:8%;
    left: -8%;
}

.rm-7{
    top:-15%;
    left: -8%;
}

.div-footer-up{
    width: 35%;
}

.img-slider{
    width: 16vw;
}

footer{
    padding: 5rem 2rem 0rem 2rem;
}

.roadmap-div{
    width: fit-content !important;
}

.card-roadmap-2{
    width:35% !important;
    flex-shrink: 100px;
}

.card-roadmap{
    width:35% !important;
    flex-shrink: 100px;
}

.drag-roadmap{
    bottom:-7%;
}


}

@media screen and (min-width: 1023px) and (max-width: 1279px) and (min-height:801px)  {
    .hero-section{
        padding: 7rem 1rem;
    }
    .info-mobile-header{
        display: none;
    }

    .main-contact-form-button{
        width: 65% !important;
    }


    .tech-specs div{
        justify-content: center !important;
    }

    
    .inputs-div{
        gap: 1rem;
    }

    .elementos-absolutos-contact img:nth-child(1){
        display: none;
    }

    .elementos-absolutos-contact img:nth-child(2){
        display: none;
    }

    .main-contact form button{
        width: 75%;
    }

    .main-contact form{
        width: 70% !important;
    }
    
    .main-login{
        padding-top: 8rem;
    }

    .div-login{
        flex-direction: column;
        width: 80%;
        gap: 1.5rem;
        margin-top: .5rem;
    }

    .second-login{
        padding: 2rem 0rem;
    }

    .first-login{
        width: 100%;
    }

    .h4-width{
        width:75%;
    }

    .h5-width{
        width: 70%;
    }

    .main-contact h5{
        width: 70%;
    }

    .w-30{
        width: 70% !important;
    }
    
    .right-check{
        width: 100%;
        align-items: center;
    }

    .section-checkout{
        padding-top: 5rem;
    }

    .section-checkout-div{
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .left-check form{
        width: 100%;
    }

    .left-check h1{
        width: 100%;
    }

    .left-check{
        width: 100%;

    }

    .div-total{
        width:100%;
    }



    .text-kiran{
        width: 100% !important;
    }
    
    #info-slider-a3{
        
    width: 180px;
    font-size: clamp(16px,1.20rem,1.30rem);
  
    height: 60px;
    padding: 0rem 2rem;
    margin-top: 2rem !important;
    line-height: 100%;
    gap: 15px;
    }

    .info-slider a{
        
        width: 160px;
        font-size:3vw !important;
      
        height: 60px;
        padding: 0rem 2rem;
        margin-top: 2rem !important;
        line-height: 100%;
        gap: 15px;
        }

    .ul-grid li h4{
    font-size: 1.75vw;
    }

    .container-members{
        display: flex !important;
        overflow: visible !important;
    }

    .container-home{
        width: 30%;
    }

    .nums{
        height: 200px;
    }

    nav{
        height: 4rem;
    }


    .ul-grid li{
        margin-right: 0rem;
        justify-content: center !important;
        align-items: center !important;
    }

    .flex-pagination{
        display: flex;
        flex-direction: row !important;
    }

    .flex-pagination div{
        display: flex;
        flex-direction: row !important;
    }

    .high-div div{
        justify-content: start;
        width: 100%;
    }
    .tech-specs{
        height: fit-content;
        display: flex;
        flex-direction: column;
        padding: 2rem 1rem;
    }
    .tech-specs div{
        flex-direction: column;
 
    }

    .ul-grid{
        place-items: center center;
    }

    .ul-grid li img{
        width: 3vw;
    }

    .father-ul{
        width: 100%;
        margin-top: 2rem;
    }

    .ul-grid{
        margin-top: 2rem;

    }

    .ul-grid li div{
        flex-direction: row;
    }

    .high-div{
        width: 100% !important;
        margin-right: 0rem !important;
    }

    .high-div p{
        padding-left: .5rem;
        padding-top: .5rem;
        
    }

    .circles-selection-span{
        height: 36px;
        width: 36px;
    }

    .fx-p{
        height: 9px !important;
        border-radius: 20px !important;
background: #F6F0FB !important;
justify-content: start !important;
    }


    .ul-grid li{
        width:100% !important;
        flex-shrink: 100px !important;
        margin-right: 0rem !important;
    }

    .swiper-scrollbar.swiper-scrollbar-horizontal{
        left: 0% !important;
        top: 0% !important;
        opacity: 1 !important;
        z-index: 8 !important;
    }

    .swiper-scrollbar-drag{
    background: #6327CE !important;
    }

    .tech-specs h2{
        text-align: center;
    }

    .info-spec-img{
        height: auto;
        width: 40vw;
        display: block;
        margin: auto;
    }

    .high-div h4{
        width: 85%;
    }
    
.Highlights{
   
    background-size: cover;
    height: fit-content;
    padding: 9rem 1rem 6rem 1rem;
}

.drag-high{
    display: none;
}
    


.w-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    padding: 3rem 1rem;
}


.w-box ul{
    display: flex;
    width: 100%;
    padding-top: 3rem ;
   justify-content: center;

    padding-left: 2rem;
    gap: 3.5rem;
}



.w-box ul li{
    color: #7459A6;
font-family:Segoe;
list-style: disc;
overflow: visible;
font-size: clamp(16px,1.1vw,1.2vw);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 28.5px */
}


    .divs-accordions-flex2{
        gap: 1rem;
        overflow: visible;
    }

    .info-bottles{
        gap: 20px;
    }

    .w-p{
        width: 100%;
    }
    

    .divs-accordions-flex2 button{
margin-bottom: 0rem;
overflow: visible;
    }

    .bottle-uses{
        height: fit-content;
        padding: 3rem 1rem;
        flex-direction: column;
    }

    .div-img-bottle-uses{
        display: flex;
        justify-content: center;
    }

    .img-bottle-uses{
        height: 40vh !important;
        width: auto !important;
    }

    .images-shop-section{
        height: fit-content;
    }

.text-kiran{
        width: 60%;
    }

    .section-overview{
        padding: 2rem 1rem;
        height: fit-content;
    }

    .class-flex-d div{
        width: 100%;
    }

    .info-slider-shop p{
        width: 100%;
    }

    .imagenes-overview{
        padding-right: 0rem;
        padding-left: 4rem;
    }

    .abs-image-imagenes-overview{
        height: 25vh;
        width: auto;
        top: 40%;
        left: 0%;
    }

    .bottle-uses{
        justify-content: center;
        align-items: center;
    }

    .token-shop-2{
        top: 50%;
        width: 10%;
        left: auto;
        right: -5%;
        display: none;
    }

    .token-shop-1{
        top: 80vh;
        width: 10%;
        left: -2%;
        z-index: 0;
        bottom: auto;
        display: none;
    }
    
    .token-shop-3{
        top: 70%;
        width: 10%;
        display: none;
        left: auto;
        right: -5%;
    }

    .espiral-shop{
        top: 0%;
    }

    .class-flex-d{
        flex-direction: column-reverse;
        gap: 1.5rem;
    }

    .class-flex-d h1{
        padding: 0rem 1rem;
    }

    .section-shop{
        flex-direction: column;
        align-items: center;
        padding: 7rem 1rem 4rem 1rem;
        height: fit-content;
        justify-content: start;
    }

    .info-tracks{
        padding: 2rem 1rem;
    }

    .circles-selection div{
        width: 30px;
        height: 30px;
    }

    .icons-shop div img{
        width: 8vw;
        height: auto;
    }

    .divs-accordions{
        width: 100%;
        padding-bottom: 1rem;
    }

    .btn-shop-div-1{
        width: 60%;
    }

    .btns-shop{
        width: 100%;
        padding-bottom: 1rem;
        gap: 1rem;
    }

    .info-shop{
        row-gap: 2rem;
    }

    .text-info{
        gap: 10px;
    }

    .text-info p{
        width: 100%;
        line-height: 110%;
    }
    .text-info h4{
        margin-bottom: 0rem;
    }

    .div-image-shop{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 1.5rem;
    }



    .div-image-shop img{
        height: auto;
        width: 90%;
    }

    .btn-shop2:after{

        background-color: #FFF;
    }


    .btn-shop2:hover{
        color: #6327CE;
        background-color: #FFF;
    }

    .btn-shop2:hover .bag-hover2{
        opacity: 1;
        }

        .btn-shop2:hover .bag-hover{
            opacity: 0;
            }
        

    .btn-shop2{
        color: #FFF;
        border: 2px solid #FFF;
    }

    .bag-hover2{

        opacity: 0;
    }

    .bag-hover{
        visibility: visible;
        opacity: 1;
    }

    .nav-div-shop2{
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: end;
        gap: 0rem 2rem;
        align-items: center;
    }

    .btn-shop{
        margin-right: 0rem;
    }

    footer{

        padding: 6rem 1rem 1rem 1rem ;
        background-size: cover;
        background-position: center;
    }

    .input-footer button{
        height: 25px;
    }

    .redes-footer{
        width: 100%;
        justify-content: center;
    }

    .tiendas{
        width: 100%;
        align-items: end;
        column-gap:30px ;
        justify-content: center;
    }

    .desktop-line{
        display: none;
    }

    .mobile-line{
        display: block;
    }

    .info-redes-footer{
        flex-direction: column-reverse;
    }

    .tiendas img{
        width: 20vw;
        height: auto;
    }

    .line-grey-footer{
        height: 1px;
    }

    .info-redes-footer p{
        margin-top: .9rem;
    }

    .input-footer{
        width: 100%;
        height: 45px;
    }

    .footer-up{
        margin-bottom: .5rem;
        gap: 2rem;
    }

    .div-footer-up{
        width: 100%;
    }

    .card-roadmap-container{
        filter: drop-shadow(0px 0px 5px rgba(80, 19, 184, 0.23));

    }

    .gradient4{
        display: none;
    }
    
    .slider-home{
        height: 800px !important;
    }

    .div-slider{
        width: 868px !important;
        top: 15% !important;
    }

    .slider-subtitle h3{
        font-size: 4vw !important;
    }

    .info-slider p{
        font-size: 3vw !important;
    }

    .buttons-nav{
        right: 19%;
        top:400.5px ;
    }

    .slider-home h2{
        text-align: center;
        line-height: 130%;
    }

    #members{
        padding: 4rem 1rem;
        height: fit-content;
    }

    .swiper-pagination {
        margin-top: 2rem;
        position: relative !important;
        top: 100% !important;
        display: none !important;
    }

    .token-members{
        z-index: -1 !important;
    }

    #members-images > img{
        width:auto;
        height: 25vh !important;
        margin-right: 0rem !important;
    }

    .abs-token{
        z-index: -1 !important;
    }

    .container-home{
        height: 280px !important;
    }

    .container-image-tech{
        height: 10VH !important;
    }

    #members h2{
        text-align: center;
        line-height: 130%;
    }

    #about{
        padding: 0rem 2rem;
        height: 1024px;
    }




    .cart-right-div{
        width: 55%;
    }

    .cart-total a{
        height: 50px;
    }

    .token-members{
        width: 20%;
        left: -10%;
        bottom: -5%;
    }

    .huella-abs-left{
        display: none;
    }

    .espiral-testimons{
        display: none;
    }

    .token-testimons{
        display: none;
    }

    .bottle-testimons{
        filter: blur(2px);
        width: 10%;
        top: 12%;
        right: 9%;
    }

    .gradient3{
        display: none;
    }

    .swiper-pagination-bullet-active{
        width: 22px !important;
        height: 10px !important;
        border-radius: 25px !important;
        background-color: #934DCA !important;
    }

    .img-abs-left{
        width: 90%;
        bottom: auto;
        top: 10%;
        left: -50%;
    }

    .img-back{
        width: 100%;
        height: 100%;
    }

    .abs-token{
        position: absolute;
        bottom: 88%;
        left: -10%;
        width: 18%;
    }


    .swiper-wrapper{
        overflow: visible;
    }

    .container-white{
        width: 45% !important;
        overflow: visible !important;
        }

        .container-white > *{
            overflow: visible !important;
            }
            
        
        #gifs{
            width: 15vw;
            height: auto;
        }

        

    .containers-home-section{
        margin-top: 0rem;
    }

    .why-choose{
        padding: 5rem 2rem;
        height: fit-content;
    
    }

    .images-stores{
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 5%;
        margin-top: 6rem;
        position: absolute;
    }



    .content-hero{
        z-index: 1003;
    }

    
    .swiper {
        margin-top: 3rem;
        width: 100%;
        height: 100%;
        overflow-x: visible !important;
      }
  
      .swiper-slide {
        height: 270px !important;

        display: flex !important; 
      }
  
      .info-container img{
        width: 10vw;
        height: auto;
      }

      .info-container{
        overflow: visible !important;
      }

      .div-line-tech{
        display: none;
      }

      .containers-home-section{
        column-gap: 2rem;
      }

      .swiper-slide {
        width: 85%;
        overflow: visible !important;
        
      }
  
      .technology{
       height: fit-content;
        padding: 0rem 2rem;
      }

      .technology > *{
overflow: visible !important;
       }
      
      .swiper-pagination{
        margin-top:2rem;
        position: relative !important;
        bottom: 0rem !important;
      }

      .swiper-slide:nth-child(2n) {
        width: 45%;
      }
  
      .swiper-slide:nth-child(3n) {
        width: 45%;
      }

      #smart-violet{
        position: relative;
      }

      .abs-mobile-header{
        position: absolute;
        visibility: visible;
        left: 4%;
        z-index: -9;
      }

    .sect-about{
   
        padding: 3rem 1rem;
        align-items: center;
        z-index: 8;
    }
    
    .sect-about p{
        width: 100%;
    }

    .gradient2{
        height: 80%;
        top:10%;
        right: 20%;
        filter: blur(120px);
    }

    
.buttons-about{
    display: flex;
    justify-content: center;
    column-gap: 3%;

    width: 100%;
}

.btn-about1{
    gap: 5%;
    width:50%;
    height: 45px;
}

.btn-about1 img,.btn-about2 img{
    height: 25px;
}

.div-line-tech{
    width: 200%;
}

.btn-about2{
    gap: 5%;
    width:50%;
    height: 45px;
}

    
.frame1{
    display: none;
}

.frame2{
    display: none;
}

.frame3{
    display: none;
}


    
.element-3d{
    top: 45%;
    height: auto;
    width: 35vw;
}

.slider-home h2{
    text-align: center;
}




.div-line-tech{
    top: 15vh;
    align-items: start;
}

.div-slider{
    padding: 0rem 1rem;
    flex-direction: column-reverse;
    margin-top:0rem !important;
    gap: 20px;

}


.abs-div{
    position: absolute;
    bottom: 5%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: center;
}


.abs-div1{
    position: absolute;
    bottom: -15%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.img-slider{
    height: auto;
    width: 15vw;
}

.slider-subtitle img{
    width: 2.5vw;
    height: auto;
    
}

#slide-info-3{
    width: 100%;
}

#slide-p-3{
    width: 90%;
}

.bn3{
    bottom: 14% !important;
    right: 16% !important;
}

.bn3 img{
    width: 120px !important;
}

.slider-subtitle{
gap:10px;
    
}

.info-slider p{
    width: 70%;
}

.nums{
    position: absolute;
    margin-top: 0%;
    right: 20%;
}

#roadmap{
    height: fit-content;
}

.roadmaps {
    width: 819px !important ;
}

.card-roadmap{
    height: 310px !important;
}

.roadmap-div{
    height: 640px !important;

}

#roadmap-image{
    object-fit: contain;
    width: auto !important;
    height: 40%;
    top: 2%;
}


.rm-2{
    top: -8%;
    left: -3%;
}

.rm-1{
    top: 12%;
    left: -5%;
}

.rm-3{
    top: 16%;
    left: -3%;
}


.rm-4{
    top: 0%;
    left: -5%;
}

.rm-5{
    top:16%;
    left: -3%;
}

.rm-6{
    top:12%;
    left: -8%;
}

.rm-7{
    top:-15%;
    left: -8%;
}


.roadmap-div{
    width: fit-content !important;
}

.card-roadmap-2{
    width:35% !important;
    flex-shrink: 100px;
}

.card-roadmap{
    width:35% !important;
    flex-shrink: 100px;
}

.drag-roadmap{
    bottom:-7%;
}



.slide-2-nums{
    right: 155px !important;
    bottom: -45px !important;
}

.slide-2-nums img{
    width: 120px !important;
    height: auto;
}


.images-stores img{
    width: 30vw;
}

.line-buttons{
    height: 3vh;
}

.nums {
bottom: 65px;
}

.nums img{
    width: 90px;
    height: auto;
}

.info-slider{
    margin-left: 0rem;
    padding-top: 0rem;
}


    #title-a, #title-b{
        line-height: 110%;
    }

    .menu-ham{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: end;
        gap: 5px;
        height: 100%;
        position: relative;
        z-index: 10;
    }

    .menu-ham div{
        background-color: #6327CE;
        width: 30px;
        height: 1.5px;
    }
    
    .left-menu{
        height: 100vh;
        padding: 0rem 2rem;
        position: fixed;
        background: rgba(45, 33, 67, 0.97);
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(0px);
        top: 0%;
        right: 0%;
        width: 100%;
        right:-100%;
        z-index: 9;
    }

    .left-menu-div-1{
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: start; 
        justify-content: center;
 
    }

    .activated{
        content: "";
    }

    .left-menu-div-1 ul li a{
        display: flex;
        height: fit-content;
        column-gap: 10px;
    }

    
    .left-menu-div-1 ul li a img{
        width: 6vw;
        opacity: .5;
        transition: all 300ms ease;
    }

    .left-menu-div-1 ul li a:hover span{
        opacity: 1;
    }

    .btn-shop2{
        padding: 1rem 3rem;
    }

    .btn-shop{
        padding: 1rem 3.3rem;
    }

    .nav-div-shop2{
        gap: 20px;
        margin-bottom: 20px;
    }

    .opacity-5{
        opacity: .5;
    }

    .left-menu-div-1 ul li a:hover img{
        opacity: 1;
    }

    .left-menu-div-1 ul{
        gap: 10px;
        display: flex;
        flex-direction: column;
    }

    .left-menu-div-1 ul li a span{
font-size: 6vw;
        color: white;
        opacity: .5;
        transition: all 300ms ease;
font-family:Segoe;
font-weight: 350;

    }
    
    .left-menu-div-2{
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: end;   
        padding-bottom:3rem ;
    }
    

    .gradient{
        width: 100%;
        filter: blur(70px);
    }

    .scroll-bg{
        bottom: -35%;
        right: -35%;
        transform: rotate(30deg);
        width: 100%;
    }

    .token{
        bottom: -8%;
        left: -20%;
        width: 40%;
    }

    .scroll-anim{
        display: none;
    }

    nav{
        padding: 0rem 1rem;
    }

    .first-div-nav-a1 a img{
        height: 40px;
        width: auto;
        z-index: 9;
    }

    .bg-hero{
        background-position: center;
    }

    .first-div-nav ul , .nav-div-shop{
        display: none;
    }

    

    .left-content{    
        padding: 0rem;
        align-items: center;
    }

    
    .left-content p{    
        margin-top: .5rem;
    }

    .left-content a{
        padding: .6rem 1.2rem;
        gap: 0rem .5rem;
    }

    .left-content img{
        height: 25px;
    }



}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .hero-section{
        padding: 7rem 1rem;
    }

    .info-mobile-header {
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 1.5rem;
    }
    
    .main-contact-form-button{
        width: 65% !important;
    }


    .inputs-div{
        gap: 1rem;
    }

    .elementos-absolutos-contact img:nth-child(1){
        display: none;
    }

    .elementos-absolutos-contact img:nth-child(2){
        display: none;
    }

    .main-contact form button{
        width: 75%;
    }

    .main-contact form{
        width: 80% !important;
    }
    
    .main-login{
        padding-top: 8rem;
    }

    .div-login{
        flex-direction: column;
        width: 80%;
        gap: 1.5rem;
        margin-top: .5rem;
    }

    .second-login{
        padding: 2rem 0rem;
    }

    .first-login{
        width: 100%;
    }

    .h4-width{
        width:75%;
    }

    .h5-width{
        width: 70%;
    }

    .main-contact h5{
        width: 70%;
    }

    .w-30{
        width: 70% !important;
    }
    
    .right-check{
        width: 100%;
        align-items: center;
    }

    .section-checkout{
        padding-top: 5rem;
    }

    .section-checkout-div{
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .left-check form{
        width: 100%;
    }

    .left-check h1{
        width: 100%;
    }

    .left-check{
        width: 100%;

    }

    .div-total{
        width:100%;
    }


    .cart-right-div{
        width: 45%;
    }
    
.cart-body-div img{
    height: 10vh;
}

.delete-div img{
    height: 1.5vh;
}

.cart-total a{
    height: 50px;
}

.cart-total{
    height: auto;
}

.cart-right-div{
    width: 65%;
}

.cart-body-div{
    height: fit-content !important;
}

    .tech-specs div{
        justify-content: center !important;
    }

    .slider-home{
        height: 650px !important;
        width: 100% !important;

    }

    .contenido-account2 form{
        width: 85% !important;
    }

    .contenido-account-div-principal{
        width: 50% !important;
    }

    .div-title-account h2{
        width: 100%;
        text-align: center;
    }

    .div-slider{
        width: 768px !important;
        height: 400px !important;
    }

    .ul-grid li h4{
    font-size: 1.75vw;
    }

    .container-members{
        display: flex !important;
        overflow: visible !important;
    }

    .container-home{
        width: 30%;
    }

    .nums{
        height: 200px;
    }

    nav{
        height: 4rem;
    }


    .ul-grid li{
        margin-right: 0rem;
        justify-content: center !important;
        align-items: center !important;
    }

    .flex-pagination{
        display: flex;
        flex-direction: row !important;
    }

    .flex-pagination div{
        display: flex;
        flex-direction: row !important;
    }

    .high-div div{
        justify-content: start;
        width: 90%;
    }
    .tech-specs{
        height: fit-content;
        display: flex;
        flex-direction: column;
        padding: 2rem 1rem;
    }
    .tech-specs div{
        flex-direction: column;
 
    }

    .ul-grid{
        place-items: center center;
    }

    .ul-grid li img{
        width: 3vw;
    }

    .father-ul{
        width: 100%;
        margin-top: 2rem;
    }

    .ul-grid{
        margin-top: 2rem;

    }

    .ul-grid li div{
        flex-direction: row;
    }

    .high-div{
        width: 100% !important;
        margin-right: 0rem !important;
    }

    .high-div p{
        padding-left: .5rem;
        padding-top: .5rem;
        width: 80%;
        
    }

    .circles-selection-span{
        height: 36px;
        width: 36px;
    }

    .fx-p{
        height: 9px !important;
        border-radius: 20px !important;
background: #F6F0FB !important;
justify-content: start !important;
    }


    .ul-grid li{
        width:100% !important;
        flex-shrink: 100px !important;
        margin-right: 0rem !important;
    }

    .swiper-scrollbar.swiper-scrollbar-horizontal{
        left: 0% !important;
        top: 0% !important;
        opacity: 1 !important;
        z-index: 8 !important;
    }

    .swiper-scrollbar-drag{
    background: #6327CE !important;
    }

    .tech-specs h2{
        text-align: center;
    }

    .info-spec-img{
        height: auto;
        width: 40vw;
        display: block;
        margin: auto;
    }

    .high-div h4{
        width: 85%;
    }
    
.Highlights{
   
    background-size: cover;
    height: fit-content;
    padding: 9rem 1rem 6rem 1rem;
}

.drag-high{
    display: none;
}
    
.w-box{
    display: flex;
    flex-direction: column;
    align-items: start;
    height: fit-content;
    padding: 3rem 1rem;
}


.w-box ul{
    display: flex;
    width: 100%;
    padding-top: 3rem ;
   justify-content: space-between;
    flex-direction: column;
    padding-left: 2rem;
    gap: 1.5rem;
}



.w-box ul li{
    color: #7459A6;
font-family:Segoe;
list-style: disc;
overflow: visible;
font-size: clamp(16px,1.1vw,1.2vw);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 28.5px */
}


    .divs-accordions-flex2{
        gap: 1rem;
        overflow: visible;
    }

    .info-bottles{
        gap: 20px;
    }

    .w-p{
        width: 100%;
    }
    

    .divs-accordions-flex2 button{
margin-bottom: 0rem;
overflow: visible;
    }

    .bottle-uses{
        height: fit-content;
        padding: 3rem 1rem;
        flex-direction: column;
    }

    .div-img-bottle-uses{
        display: flex;
        justify-content: center;
    }

    .img-bottle-uses{
        height: 40vh !important;
        width: auto !important;
    }

    .images-shop-section{
        height: fit-content;
    }

.text-kiran{
        width: 60%;
    }

    .section-overview{
        padding: 2rem 1rem;
        height: fit-content;
    }

    .class-flex-d div{
        width: 100%;
    }

    .info-slider-shop p{
        width: 100%;
    }

    .imagenes-overview{
        padding-right: 0rem;
        padding-left: 4rem;
    }

    .abs-image-imagenes-overview{
        height: 25vh;
        width: auto;
        top: 40%;
        left: 0%;
    }

    .bottle-uses{
        justify-content: center;
        align-items: center;
    }

    .token-shop-2{
        top: 50%;
        width: 10%;
        left: auto;
        right: -5%;
    }

    .token-shop-1{
        top: 80vh;
        width: 10%;
        left: -2%;
        z-index: 0;
        bottom: auto;
        display: none;
    }
    
    .token-shop-3{
        top: 70%;
        width: 10%;
        left: auto;
        right: -5%;
    }

    .espiral-shop{
        top: 0%;
    }

    .class-flex-d{
        flex-direction: column-reverse;
        gap: 1.5rem;
    }

    .class-flex-d h1{
        padding: 0rem 1rem;
    }

    .section-shop{
        flex-direction: column;
        align-items: center;
        padding: 7rem 1rem 4rem 1rem;
        height: fit-content;
        justify-content: start;
    }

    .info-tracks{
        padding: 2rem 1rem;
    }

    .circles-selection div{
        width: 30px;
        height: 30px;
    }

    .icons-shop div img{
        width: 8vw;
        height: auto;
    }

    .divs-accordions{
        width: 100%;
        padding-bottom: 1rem;
    }

    .btn-shop-div-1{
        width: 60%;
    }

    .btns-shop{
        width: 100%;
        padding-bottom: 1rem;
        gap: 1rem;
    }

    .info-shop{
        row-gap: 2rem;
    }

    .text-info{
        gap: 10px;
    }

    .text-info p{
        width: 100%;
        line-height: 110%;
    }
    .text-info h4{
        margin-bottom: 0rem;
    }

    .div-image-shop{
        width: 100%;
        margin-bottom: .5rem;
    }

    .div-image-shop img{
        height: auto;
        width: 100%;
    }

    .btn-shop2:after{

        background-color: #FFF;
    }


    .btn-shop2:hover{
        color: #6327CE;
        background-color: #FFF;
    }

    .btn-shop2:hover .bag-hover2{
        opacity: 1;
        }

        .btn-shop2:hover .bag-hover{
            opacity: 0;
            }
        

    .btn-shop2{
        color: #FFF;
        border: 2px solid #FFF;
    }

    .bag-hover2{

        opacity: 0;
    }

    .bag-hover{
        visibility: visible;
        opacity: 1;
    }

    .nav-div-shop2{
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: end;
        gap: 0rem 2rem;
        align-items: center;
    }

    .btn-shop{
        margin-right: 0rem;
    }

    footer{

        padding: 6rem 1rem 1rem 1rem ;
        background-size: cover;
        background-position: center;
    }

    .input-footer button{
        height: 25px;
    }

    .redes-footer{
        width: 100%;
        justify-content: center;
    }

    .tiendas{
        width: 100%;
        align-items: end;
        column-gap:30px ;
        justify-content: center;
    }

    .desktop-line{
        display: none;
    }

    .mobile-line{
        display: block;
    }

    .info-redes-footer{
        flex-direction: column-reverse;
    }

    .tiendas img{
        width: 20vw;
        height: auto;
    }

    .line-grey-footer{
        height: 1px;
    }

    .info-redes-footer p{
        margin-top: .9rem;
    }

    .input-footer{
        width: 100%;
        height: 45px;
    }

    .footer-up{
        margin-bottom: .5rem;
        gap: 2rem;
    }

    .div-footer-up{
        width: 100%;
    }

    .card-roadmap-container{
        filter: drop-shadow(0px 0px 5px rgba(80, 19, 184, 0.23));

    }

    .gradient4{
        display: none;
    }
    

    .buttons-nav{
        right: 16%;
        top:290.5px ;
    }

    .slider-home h2{
        text-align: center;
        line-height: 130%;
    }

    #members{
        padding: 4rem 1rem;
        height: fit-content;
    }

    .swiper-pagination {
        margin-top: 2rem;
        position: relative !important;
        top: 100% !important;
        display: none !important;
    }

    .token-members{
        z-index: -1 !important;
    }

    #members-images > img{
        width:auto;
        height: 35vh !important;
        margin-right: 0rem !important;
    }

    #members h2{
        text-align: center;
        line-height: 130%;
    }

    #about{
        padding: 0rem 2rem;
    }

    .token-members{
        width: 20%;
        left: -10%;
        bottom: -5%;
    }

    .huella-abs-left{
        display: none;
    }

    .espiral-testimons{
        display: none;
    }

    .token-testimons{
        display: none;
    }

    .bottle-testimons{
        filter: blur(2px);
        width: 10%;
        top: 12%;
        right: 9%;
    }

    .gradient3{
        display: none;
    }

    .swiper-pagination-bullet-active{
        width: 22px !important;
        height: 10px !important;
        border-radius: 25px !important;
        background-color: #934DCA !important;
    }

    .img-abs-left{
        width: 90%;
        bottom: auto;
        top: 10%;
        left: -50%;
    }

    .img-back{
        width: 100%;
        height: 100%;
    }

    .abs-token{
        position: absolute;
        bottom: 88%;
        left: -10%;
        width: 18%;
    }


    .swiper-wrapper{
        overflow: visible;
    }

    .container-white{
        width: 45% !important;
        overflow: visible !important;
        }

        .container-white > *{
            overflow: visible !important;
            }
            
        
        #gifs{
            width: 15vw;
            height: auto;
        }

        

    .containers-home-section{
        margin-top: 0rem;
    }

    .why-choose{
        padding: 5rem 2rem;
        height: fit-content;
    margin-top: 3rem;
    }

    .images-stores{
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 5%;
        margin-top: 3rem;
        position: absolute;
    }



    .content-hero{
        z-index: 1003;
    }

    
    .swiper {
        margin-top: 3rem;
        width: 100%;
        height: 100%;
        overflow-x: visible !important;
      }
  
      .swiper-slide {
        height: 270px !important;

        display: flex !important; 
      }
  
      .info-container img{
        width: 10vw;
        height: auto;
      }


      .info-container{
        overflow: visible !important;
      }
      .div-line-tech{
        display: none;
      }

      .containers-home-section{
        column-gap: 2rem;
      }

      .swiper-slide {
        width: 85%;
        overflow: visible !important;
        
      }
  
      .technology{
       height: fit-content;
        padding: 0rem 2rem;
        margin-top: 3rem;
      }

      .technology > *{
overflow: visible !important;
       }
      
      .swiper-pagination{
        margin-top:2rem;
        position: relative !important;
        bottom: 0rem !important;
      }

      .swiper-slide:nth-child(2n) {
        width: 45%;
      }
  
      .swiper-slide:nth-child(3n) {
        width: 45%;
      }

      #smart-violet{
        position: relative;
      }

      .abs-mobile-header{
        position: absolute;
        visibility: visible;
        left: 4%;
        z-index: -9;
      }

    .sect-about{
   
        padding: 3rem 1rem;
        align-items: center;
        z-index: 8;
    }
    
    .sect-about p{
        width: 100%;
    }

    .gradient2{
        height: 80%;
        top:10%;
        right: 20%;
        filter: blur(120px);
    }

    
.buttons-about{
    display: flex;
    justify-content: center;
    column-gap: 3%;

    width: 100%;
}

.btn-about1{
    gap: 5%;
    width:50%;
    height: 45px;
}

.btn-about1 img,.btn-about2 img{
    height: 25px;
}

.div-line-tech{
    width: 200%;
}

.btn-about2{
    gap: 5%;
    width:50%;
    height: 45px;
}

    
.frame1{
    display: none;
}

.frame2{
    display: none;
}

.frame3{
    display: none;
}


    
.element-3d{
    top: 45%;
    height: auto;
    width: 35vw;
}

.slider-home h2{
    text-align: center;
}




.div-line-tech{
    top: 15vh;
    align-items: start;
}

.div-slider{
    padding: 0rem 1rem;
    flex-direction: column-reverse;
    margin-top:5rem;
    gap: 20px;

}


.abs-div{
    position: absolute;
    bottom: 5%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: center;
}


.abs-div1{
    position: absolute;
    bottom: -15%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.img-slider{
    height: auto;
    width: 15vw;
}

.slider-subtitle img{
    width: 2.5vw;
    height: auto;
    
}

#slide-info-3{
    width: 100%;
}

#slide-p-3{
    width: 90%;
}

.bn3{
    bottom: 22% !important;
    right: 15% ;
}

.bn3 img{
    width: 120px !important;
}

.slider-subtitle{
gap:10px;
    
}

.info-slider p{
    width: 70%;
}

.nums{
    position: absolute;
    margin-top: 0%;
    right: 20%;
}

#roadmap{
    height: fit-content;
}

.roadmaps {
    width: 819px !important ;
}

.card-roadmap{
    height: 310px !important;
}

.roadmap-div{
    height: 640px !important;

}

#roadmap-image{
    object-fit: contain;
    width: auto !important;
    height: 40%;
    top: 2%;
}


.rm-2{
    top: -8%;
    left: -3%;
}

.rm-1{
    top: 12%;
    left: -5%;
}

.rm-3{
    top: 16%;
    left: -3%;
}


.rm-4{
    top: 0%;
    left: -5%;
}

.rm-5{
    top:16%;
    left: -3%;
}

.rm-6{
    top:7%;
    left: -3%;
}

.rm-7{
    top:-15%;
    left: -8%;
}


.roadmap-div{
    width: fit-content !important;
}

.card-roadmap-2{
    width:35% !important;
    flex-shrink: 100px;
}

.card-roadmap{
    width:35% !important;
    flex-shrink: 100px;
}

.drag-roadmap{
    bottom:-7%;
}



.slide-2-nums{
    right: 125px ;
    bottom: -10px !important;
}

.slide-2-nums img{
    width: 120px !important;
    height: auto;
}


.images-stores img{
    width: 30vw;
}

.line-buttons{
    height: 3vh;
}

.nums {
bottom: 65px;
}

.nums img{
    width: 90px;
    height: auto;
}

.info-slider{
    margin-left: 0rem;
    padding-top: 0rem;
}


    #title-a, #title-b{
        line-height: 110%;
    }

    .menu-ham{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: end;
        gap: 5px;
        height: 100%;
        position: relative;
        z-index: 10;
    }

    .menu-ham div{
        background-color: #6327CE;
        width: 30px;
        height: 1.5px;
    }
    
    .left-menu{
        height: 100vh;
        padding: 0rem 2rem;
        position: fixed;
        background: rgba(45, 33, 67, 0.97);
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(0px);
        top: 0%;
        right: 0%;
        width: 100%;
        right:-100%;
        z-index: 9;
    }

    .left-menu-div-1{
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: start; 
        justify-content: center;
 
    }

    .activated{
        content: "";
    }

    .left-menu-div-1 ul li a{
        display: flex;
        height: fit-content;
        column-gap: 10px;
    }

    
    .left-menu-div-1 ul li a img{
        width: 9vw;
        opacity: .5;
        transition: all 300ms ease;
    }

    .left-menu-div-1 ul li a:hover span{
        opacity: 1;
    }

    .btn-shop2{
        padding: 1rem 3rem;
    }

    .btn-shop{
        padding: 1rem 3.3rem;
    }

    .nav-div-shop2{
        gap: 20px;
        margin-bottom: 20px;
    }

    .opacity-5{
        opacity: .5;
    }

    .left-menu-div-1 ul li a:hover img{
        opacity: 1;
    }

    .left-menu-div-1 ul{
        gap: 10px;
        display: flex;
        flex-direction: column;
    }

    .left-menu-div-1 ul li a span{
font-size: 8vw;
        color: white;
        opacity: .5;
        transition: all 300ms ease;
font-family:Segoe;
font-weight: 350;

    }
    
    .left-menu-div-2{
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: end;   
        padding-bottom:3rem ;
    }
    

    .gradient{
        width: 100%;
        filter: blur(70px);
    }

    .scroll-bg{
        bottom: -35%;
        right: -35%;
        transform: rotate(30deg);
        width: 100%;
    }

    .token{
        bottom: -8%;
        left: -20%;
        width: 40%;
    }

    .scroll-anim{
        display: none;
    }

    nav{
        padding: 0rem 1rem;
    }

    .first-div-nav-a1 a img{
        height: 40px;
        width: auto;
        z-index: 9;
    }

    .bg-hero{
        background-position: center;
    }

    .first-div-nav ul , .nav-div-shop{
        display: none;
    }

    

    .left-content{    
        padding: 0rem;
        align-items: center;
    }

    
    .left-content p{    
        margin-top: .5rem;
    }

    .left-content a{
        padding: .6rem 1.2rem;
        gap: 0rem .5rem;
    }

    .left-content img{
        height: 25px;
    }



}