/* importamos las fuentes */
@import url("https://fonts.googleapis.com/css2?family=Raleway");


* {
    margin: 0;
    padding: 0;
    font-family: "Raleway";
    font-style: normal;
}

body {
    background-color: #1d2239;
}

body::-webkit-scrollbar {
    width: 0.6em;
}
body::-webkit-scrollbar-thumb {
    background: #9e9e9e;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #47474767;
}
body::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
    
}

.container{
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.inicio {
    height: 100vh;
    z-index: -1;
}

/* ------------------------------------------------------------------------------------------------------- */
/* ------- IMAGENES DE FONDO CON RESPECTO AL INICIO -------- */

/* filtro al video de las montañas */
.inicio .filtro {
    position: absolute;
    bottom: 3vw;
    background-image: linear-gradient(to top, #000000da, #00000021);
    width: 100%;
    height: 100%;
}

/* posicion del video de las montañas */
.inicio .fondo-montania {
    position: absolute;
    width: 100%;
    background-size: cover;
    height: 100%;
    z-index: -1;
}

/* propiedades del video */
#myVideo {
    z-index: -999;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* montaña izquierda */
.mountainLeft {
    position: absolute;
    top: 28%;
    left: 0%;
    z-index: 99;
    width: 55%;
    height: 70%;
}

/* montaña derecha */
.mountainRigth {
    position: absolute;
    top: 28%;
    right: 0%;
    z-index: 99;
    width: 55%;
    height: 70%;
}

/* logo de dynax inicio */
.logoDynax {
    width: 50%;
    z-index: 999;
    
}
.logo{
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
  

}


@media screen and (max-width: 767px) {

    .logoDynax {
        width: 60%;
        z-index: 999;
    }



    /* ajustamos el tamaño de las montañas */
    .mountainLeft,
    .mountainRigth {
        width: 100%;
        height: 60%;
        top: 40%;
    }
}

/* ------------------------------------------------------------------------------------------------------- */
/* -------- MENU DE HAMBURGUESA CON LAS OPCIONES DEL NAVEGADOR ------- */
/* menu de opciones */
.menu {
    position: fixed;
    top: 10%;
    right: 5%;
    z-index: 9999;
}

/* boton hamburguesa */
.boton-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #273856;
    color: white;
    cursor: pointer;
    border: none;
    font-size: 16px;
    z-index: 9999;
    border-radius: 50%;
    box-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #00ecfc, 0 0 4px #00ccff, 0 0 7px #00a6ff;
}

/* brillo del boton */
.boton-menu:hover {
    box-shadow: 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #00ecfc, 0 0 7px #00ccff,
        0 0 8px #00a6ff;
    transition: box-shadow 0.1s ease-in-out;
}

/* brillo del icono */
#boton-menu:hover i {
    color: white;
    text-shadow: 0 0 200px rgba(255, 255, 255, 1);
    transition: text-shadow 0.1s ease-in-out, color 0.1s ease-in-out;
}

/* barra de opciones */
.opciones-menu {
    position: absolute;
    font-family: "Raleway";
    font-style: normal;
    top: 0;
    right: 25px;
    width: 0%;
    height: 100%;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    border-color: #1d63ad;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px 0px 0px 20px;
    box-shadow: 0px 0 5px rgba(255, 255, 255, 0.9);
    z-index: -1;
}

.opciones-menu li {
    margin-left: 50px;
    margin-right: 50px;
    width: 80px;

    text-align: center;
    padding: 10px 20px;
    color: white;
    background-color: #ffffff00;
    text-decoration: none;
    border-radius: 20px;
    transition: 0.9s ease-in-out;
    cursor: pointer;
}

/* Media Query para pantallas de 500x800px */
@media screen and (max-width: 767px) {

    /* posicionarse sobre las opciones */
    .opciones-menu li:hover {
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 20px;
        border-color: #ffffff;
    }

    .opciones-menu {
        opacity: 0;
        transform: translate3D(0, 0, 0);
        transition: .5s;
    }

    /* ancho en el cual se muestran las opciones */
    .menu.mostrar .opciones-menu {
        height: auto;
        width: auto;
        opacity: 1;
    }

    .opciones-menu ol {
        padding-top: 5px;
        list-style: none;
        display: grid;
        /* grid-template-columns: 1fr; */
        grid-template-columns: repeat(1, 1fr);
    }

}

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

    /* posicionarse sobre las opciones */
    .opciones-menu li:hover {
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 20px;
        border-color: #ffffff;
    }

    .opciones-menu {
        opacity: 0;
        transform: translate3D(0, 0, 0);
        transition: .5s;
    }

    /* ancho en el cual se muestran las opciones */
    .menu.mostrar .opciones-menu {
        width: auto;
        opacity: 1;
    }

    .opciones-menu ol {
        padding-top: 5px;
        list-style: none;
        display: grid;
        /* grid-template-columns: 1fr; */
        grid-template-columns: repeat(4, 1fr);
    }

}


/* ------------------------------------------------------------------------------------------------------- */
/* -------- SECCION ABOUT US ------- */

@media screen and (max-width: 767px) {
    
  
    .about{
        width: 100%;
        display: flex;
        flex: 1;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;

    }
    .aboutUs{
        letter-spacing: 0.7px;
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: justify;
    }

    /* imagen de cuadro luminoso */
    .cuadroAboutUs {
        display: none;
    }

    /* titulo de la seccion */
    .tituloSeccionAboutAs {
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
        font-family: "Raleway";
        font-style: normal;
        font-weight: 800;
        font-size: 6vw;
        margin-bottom: 15px;
        z-index: -1;
    }

    /* parrafos de la seccion */
    .TextoSeccionAboutUs1 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 2.4vw;
       
        z-index: -1;
        margin-bottom: 10px;
        transition: opacity 2s ease;
    }

    .TextoSeccionAboutUs2 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 2.4vw;
    
        margin-bottom: 10px;
        z-index: -1;
   
        transition: opacity 2s ease;
    }

    .TextoSeccionAboutUs3 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 2.4vw;

        margin-bottom: 10px;
        z-index: -1;
     
        transition: opacity 2s ease;
    }

    /* proyectos, años de desarrollo y clientes (counter up) */
    .counter-container {
        margin-top: 40px;

        display: grid;
        grid-template-columns: 1fr;
        color: #fff;
        columns: 1;   
        text-align: center;
        font-size: 2.4vw;
        font-family: "Raleway";
        font-style: normal;
    }
    .counterItem{
        margin-bottom: 20px;
    }

    .roca1 {
        position: absolute;
        top: 40;
        left: 15%;
        z-index: -999;
    }

    .roca2 {
        position: absolute;
        top: 150%;
        right: 13%;
        z-index: -999;
    }

    .roca10 {
        position: absolute;
        top: 130%;
        left: 10%;
        z-index: -999;
    }

    .roca11 {
        position: absolute;
        top: 170%;
        left: 30%;
        z-index: -999;
    }

}

@media screen and (min-width: 768px) and (max-width: 1366px) {
        

  
    .about{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 100px;
        flex: 1;
    }
    .aboutUs{
        width: 50%;
        display: flex;
        flex-direction: column;
        margin-top: 120px;
        margin-left: 40px;
        align-items: center;
        margin-bottom: 100px;
    }


    /* imagen de cuadro luminoso */
    .cuadroAboutUs {
        position: absolute;
        
    }

    /* titulo de la seccion */
    .tituloSeccionAboutAs {
        text-align: center;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
        font-family: "Raleway";
        font-style: normal;
        font-weight: 800;
        font-size: 2vw;
        line-height: 33px;
        margin-bottom: 25px;
        
        z-index: -1;
        width: 40%;
        height: 50%;
        transition: opacity 2s ease;
    }

    /* parrafos de la seccion */
    .TextoSeccionAboutUs1 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1.2vw;
        margin-bottom: 15px;
        z-index: -1;
      
        transition: opacity 2s ease;
    }

    .TextoSeccionAboutUs2 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1.2vw;
        
        margin-bottom: 15px;
        z-index: -1;
      
        transition: opacity 2s ease;
    }

    .TextoSeccionAboutUs3 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1.2vw;
        margin-bottom: 15px;
        z-index: -1;
   
        transition: opacity 2s ease;
    }

    .roca1 {
        position: absolute;
        top: 40;
        left: 15%;
        z-index: -1;
    }

    .roca2 {
        position: absolute;
        top: 150%;
        right: 13%;
        z-index: -1;
    }

    .roca10 {
        position: absolute;
        top: 130%;
        left: 10%;
        z-index: -1;
    }

    .roca11 {
        position: absolute;
        top: 170%;
        left: 30%;
        z-index: -1;
    }

    /* proyectos, años de desarrollo y clientes (counter up) */
    .counter-container {
        margin-top: 100px;
        width: 100%;
        color: #fff;
        columns: 3;
        text-align: center;
        font-size: 1.6vw;
        font-family: "Raleway";
        font-style: normal;
    }

}

@media  screen and (min-width: 1367px) {
    
  
    .about{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 100px;
        flex: 1;
    }
    .aboutUs{
        width: 50%;
        display: flex;
        flex-direction: column;
        margin-top: 120px;
        margin-left: 40px;
        align-items: center;
        margin-bottom: 100px;
    }


    /* imagen de cuadro luminoso */
    .cuadroAboutUs {
        margin-top: 50px;
        position: absolute;
        scale: 1.5;
        
    }

    /* titulo de la seccion */
    .tituloSeccionAboutAs {
        text-align: center;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
        font-family: "Raleway";
        font-style: normal;
        font-weight: 800;
        font-size: 2vw;
        line-height: 33px;
        margin-bottom: 25px;
        
        z-index: -1;
        width: 40%;
        height: 50%;
        transition: opacity 2s ease;
    }

    /* parrafos de la seccion */
    .TextoSeccionAboutUs1 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1.2vw;
        margin-bottom: 15px;
        z-index: -1;
      
        transition: opacity 2s ease;
    }

    .TextoSeccionAboutUs2 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1.2vw;
        
        margin-bottom: 15px;
        z-index: -1;
      
        transition: opacity 2s ease;
    }

    .TextoSeccionAboutUs3 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1.2vw;
        margin-bottom: 15px;
        z-index: -1;
   
        transition: opacity 2s ease;
    }

    .roca1 {
        position: absolute;
        top: 40;
        left: 15%;
        z-index: -1;
    }

    .roca2 {
        position: absolute;
        top: 150%;
        right: 13%;
        z-index: -1;
    }

    .roca10 {
        position: absolute;
        top: 130%;
        left: 10%;
        z-index: -1;
    }

    .roca11 {
        position: absolute;
        top: 170%;
        left: 30%;
        z-index: -1;
    }

    /* proyectos, años de desarrollo y clientes (counter up) */
    .counter-container {
        margin-top: 100px;
        width: 100%;
        color: #fff;
        columns: 3;
        text-align: center;
        font-size: 1.6vw;
        font-family: "Raleway";
        font-style: normal;
    }

    
}

@media  screen and (min-width: 2500px) {
    
  
    .about{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 100px;
        flex: 1;
    }
    .aboutUs{
        width: 50%;
        display: flex;
        flex-direction: column;
        margin-top: 120px;
        margin-left: 40px;
        align-items: center;
        margin-bottom: 100px;
    }


    /* imagen de cuadro luminoso */
    .cuadroAboutUs {
        margin-top: 100px;
        position: absolute;
        scale: 2.0;
        
    }

    /* titulo de la seccion */
    .tituloSeccionAboutAs {
        text-align: center;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
        font-family: "Raleway";
        font-style: normal;
        font-weight: 800;
        font-size: 2vw;
        line-height: 33px;
        margin-bottom: 25px;
        
        z-index: -1;
        width: 40%;
        height: 50%;
        transition: opacity 2s ease;
    }

    /* parrafos de la seccion */
    .TextoSeccionAboutUs1 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1.2vw;
        margin-bottom: 15px;
        z-index: -1;
      
        transition: opacity 2s ease;
    }

    .TextoSeccionAboutUs2 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1.2vw;
        
        margin-bottom: 15px;
        z-index: -1;
      
        transition: opacity 2s ease;
    }

    .TextoSeccionAboutUs3 {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1.2vw;
        margin-bottom: 15px;
        z-index: -1;
   
        transition: opacity 2s ease;
    }

    .roca1 {
        position: absolute;
        top: 40;
        left: 15%;
        z-index: -1;
    }

    .roca2 {
        position: absolute;
        top: 150%;
        right: 13%;
        z-index: -1;
    }

    .roca10 {
        position: absolute;
        top: 130%;
        left: 10%;
        z-index: -1;
    }

    .roca11 {
        position: absolute;
        top: 170%;
        left: 30%;
        z-index: -1;
    }

    /* proyectos, años de desarrollo y clientes (counter up) */
    .counter-container {
        margin-top: 200px;
        width: 100%;
        color: #fff;
        columns: 3;
        text-align: center;
        font-size: 1.6vw;
        font-family: "Raleway";
        font-style: normal;
    }

    
}


/* ------------------------------------------------------------------------------------------------------- */
/* -------- DEVELOPMENT - SOLUTION -  STRATEGY ------- */

@media screen and (max-width: 767px) {
      
    .roca3 {
        position: absolute;
        top: 250%;
        right: 10%;
        z-index: -1;
    }

    .roca12 {
        position: absolute;
        top: 240%;
        left: 6%;
        z-index: -1;
    }

     /* contenedor de las 3 cards */
     .card-container {
        display: flex;
        padding-top: 50px;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0 auto;
       
        text-align: center;
        z-index: -10;
    }

    /* card individual */
    .card {
        justify-content: center;
        align-items: center;
        width: 60%;
        min-height: 60%;
        margin-bottom: 1rem;
        background-color: #fff;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-radius: 0.5rem;
        overflow: hidden;
        background-color: rgba(98, 92, 92, 0.129);
        transition-duration: 1s;
    }

    /* hover de la card */
    .card:hover {
        background-color: rgba(98, 92, 92, 0.229);
        box-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #00ecfc, 0 0 4px #00ccff,
            0 0 7px #00a6ff;
        transform: scale(1.05);
        transition: 0.5s ease-in-out;
    }

    /* titulo de la card */
    .card-title {
        margin-top: 10%;
        font-family: "Raleway";
        font-style: normal;
        font-weight: 700;
        font-size: 3.0vw;
        line-height: 14px;
        text-align: center;
        color: #e3e3e3;
    }

  
    /* al hacer hover sobre la imagen esta agranda la escala */
    .card-image:hover {
        box-shadow: 0 0 1rem rgba(1, 162, 255, 0);
        transform: scale(1.07);
        transition: 0.5s ease-in-out;
    }

    /* parrafo de la 3er card */
    .parrafoStrategy {
        letter-spacing: 0.3px;
        color: #e3e3e3;
        font-family: "Raleway";
        font-style: normal;
        font-size: 3.5vw;
        width: 90%;
        height: 100%;
        min-height: auto;
        margin: 0 auto;
        margin-top: 16%;
        margin-bottom: 21%;
    }

    /* al hacer hover sobre el parrafo este agranda la escala */
    .parrafoStrategy:hover {
        box-shadow: 0 0 1rem rgba(98, 92, 92, 0);
        transform: scale(1.07);
        transition: 0.5s ease-in-out;
    }

    /* le doy brillo al titulo de la card al hacer un hover */
    .card:hover h2 {
        color: #fff;
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00ecfc, 0 0 40px #00ccff,
            0 0 70px #00a6ff;
    }  

}

@media screen and (min-width: 768px) {
      
    .roca3 {
        position: absolute;
        top: 250%;
        right: 10%;
        z-index: -1;
    }

    .roca12 {
        position: absolute;
        top: 240%;
        left: 6%;
        z-index: -1;
    }

    /* contenedor de las 3 cards */
    .card-container {
       
        display: flex;
        justify-content: space-between;
        max-width: 70%;
        margin: 0 auto;
        text-align: center;
        z-index: -10;
    }

    /* card individual */
    .card {
        
        width: 27%;
        min-height: 100%;
        margin-bottom: 2rem;
        background-color: #fff;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-radius: 0.5rem;
        overflow: hidden;
        background-color: rgba(98, 92, 92, 0.129);
        transition-duration: 1s;
    }

    /* hover de la card */
    .card:hover {
        background-color: rgba(98, 92, 92, 0.229);
        box-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #00ecfc, 0 0 4px #00ccff,
            0 0 7px #00a6ff;
        transform: scale(1.05);
        transition: 0.5s ease-in-out;
    }

    /* titulo de la card */
    .card-title {
        margin-top: 10%;
        font-family: "Raleway";
        font-style: normal;
        font-weight: 700;
        font-size: 1.2vw;
        line-height: 14px;
        text-align: center;
        color: #e3e3e3;
    }


    /* al hacer hover sobre la imagen esta agranda la escala */
    .card-image:hover {
        box-shadow: 0 0 1rem rgba(1, 162, 255, 0);
        transform: scale(1.07);
        transition: 0.5s ease-in-out;
    }

    /* parrafo de la 3er card */
    .parrafoStrategy {
        color: #e3e3e3;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1.2vw;
        width: 90%;
        height: 100%;
        min-height: auto;
        margin: 0 auto;
        margin-top: 16%;
        margin-bottom: 21%;
    }

    /* al hacer hover sobre el parrafo este agranda la escala */
    .parrafoStrategy:hover {
        box-shadow: 0 0 1rem rgba(98, 92, 92, 0);
        transform: scale(1.07);
        transition: 0.5s ease-in-out;
    }

    /* le doy brillo al titulo de la card al hacer un hover */
    .card:hover h2 {
        color: #fff;
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00ecfc, 0 0 40px #00ccff,
            0 0 70px #00a6ff;
    }  

}



/* ------------------------------------------------------------------------------------------------------- */
/* -------- JUEGOS ------- */
@media screen and (max-width: 767px) {
    
    .juegos{
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;

        align-items: center;
    }
    
    .contenido-seccion {
    
        text-align: center;
        margin-top: 50px;
        width: 100%;
        margin-bottom: 90px;
    }


    /* titulo de la seccion de juegos */
    .contenido-seccion label {
        margin-top: 20px;
        font-family: "Raleway";
        font-style: normal;
        font-size: 6vw;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
    }

       /* contenedor de la imagen */
       .container__slider {
        width: 40%;
        display: flex;
       
        align-items: center;

    }
    input[type="radio"] {
        display: none;
    }


    
    /* todas las imagenes */
    .cardsJuegos {
        position: relative;
        top: 5vw;
        width: 100%;
        height: 100%;
        margin-bottom: 140px;
       
    }

    /* cada imagen pero el label */
    .cardjuegos {
        position: absolute;
        width: 30vw;
        height: 55vw;
        left: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* cada imagen */
    .imgJuegos {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        object-fit: cover;
        box-shadow: 1rem 2rem 3rem rgba(29, 25, 25, 0.419);
    }

    /* animaciones de slider apretando las imagenes */
    #item-2:checked~.cardsJuegos #selector-1,
    #item-1:checked~.cardsJuegos #selector-5,
    #item-3:checked~.cardsJuegos #selector-2,
    #item-4:checked~.cardsJuegos #selector-3,
    #item-5:checked~.cardsJuegos #selector-4 {
        transform: translateX(-70%) scale(0.8);
        opacity: 0.6;
        z-index: 0;
    }

    #item-2:checked~.cardsJuegos #selector-4,
    #item-2:checked~.cardsJuegos #selector-5 {
        opacity: 0;
    }

    #item-1:checked~.cardsJuegos #selector-3,
    #item-1:checked~.cardsJuegos #selector-4 {
        opacity: 0;
    }

    #item-3:checked~.cardsJuegos #selector-1,
    #item-3:checked~.cardsJuegos #selector-5 {
        opacity: 0;
    }

    #item-4:checked~.cardsJuegos #selector-2,
    #item-4:checked~.cardsJuegos #selector-1 {
        opacity: 0;
    }

    #item-5:checked~.cardsJuegos #selector-2,
    #item-5:checked~.cardsJuegos #selector-3 {
        opacity: 0;
    }

    /* animaciones de slider apretando las imagenes */
    #item-5:checked~.cardsJuegos #selector-1,
    #item-4:checked~.cardsJuegos #selector-5,
    #item-3:checked~.cardsJuegos #selector-4,
    #item-2:checked~.cardsJuegos #selector-3,
    #item-1:checked~.cardsJuegos #selector-2 {
        transform: translateX(70%) scale(0.8);
        opacity: 0.6;
        z-index: 0;
    }

    /* animaciones de slider apretando las imagenes */
    #item-1:checked~.cardsJuegos #selector-1,
    #item-2:checked~.cardsJuegos #selector-2,
    #item-3:checked~.cardsJuegos #selector-3,
    #item-4:checked~.cardsJuegos #selector-4,
    #item-5:checked~.cardsJuegos #selector-5 {
        transform: translateX(0) scale(1);
        z-index: 1;
    }

    .slider-buttonL{
        position: absolute;
        opacity: 0;
    }
    .slider-buttonLN{
        position: absolute;
        opacity: 0;
    }
    .slider-buttonR{
        position: absolute;
        opacity: 0;
    }
    .slider-buttonRN{
        position: absolute;
        opacity: 0;
    }

    
    .roca4 {
        position: absolute;
        left: 25%;
        z-index: -1;
    }

    .roca13 {
        position: absolute;
        top: 50%;
        left: 9%;
        z-index: -1;
    }

    .roca14 {
        position: absolute;
        top: 40%;
        right: 9%;
        z-index: -1;
    }




      
}

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

    .juegos{
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        align-items: center;
    }
    
    .contenido-seccion {
    
        text-align: center;
        margin-top: 50px;
        width: 100%;
        height: 100%;
    }

    

    /* titulo de la seccion de juegos */
    .contenido-seccion label {
        margin-top: 20px;
        font-family: "Raleway";
        font-style: normal;
        font-size: 3vw;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
    }


    /* contenedor de la imagen */
    .container__slider {
        width: 70%;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    input[type="radio"] {
        display: none;
    }



    /* todas las imagenes */
    .cardsJuegos {
        position: relative;
        top: 5vw;
        width: 100%;
        height: 100%;
       
    }

    /* cada imagen pero el label */
    .cardjuegos {
        position: absolute;
        width: 20vw;
        height: 35vw;
        left: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* cada imagen */
    .imgJuegos {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        object-fit: cover;
        box-shadow: 1rem 2rem 3rem rgba(29, 25, 25, 0.419);
    }

    /* animaciones de slider apretando las imagenes */
    #item-2:checked~.cardsJuegos #selector-1,
    #item-1:checked~.cardsJuegos #selector-5,
    #item-3:checked~.cardsJuegos #selector-2,
    #item-4:checked~.cardsJuegos #selector-3,
    #item-5:checked~.cardsJuegos #selector-4 {
        transform: translateX(-70%) scale(0.8);
        opacity: 0.6;
        z-index: 0;
    }

    #item-2:checked~.cardsJuegos #selector-4,
    #item-2:checked~.cardsJuegos #selector-5 {
        opacity: 0;
    }

    #item-1:checked~.cardsJuegos #selector-3,
    #item-1:checked~.cardsJuegos #selector-4 {
        opacity: 0;
    }

    #item-3:checked~.cardsJuegos #selector-1,
    #item-3:checked~.cardsJuegos #selector-5 {
        opacity: 0;
    }

    #item-4:checked~.cardsJuegos #selector-2,
    #item-4:checked~.cardsJuegos #selector-1 {
        opacity: 0;
    }

    #item-5:checked~.cardsJuegos #selector-2,
    #item-5:checked~.cardsJuegos #selector-3 {
        opacity: 0;
    }

    /* animaciones de slider apretando las imagenes */
    #item-5:checked~.cardsJuegos #selector-1,
    #item-4:checked~.cardsJuegos #selector-5,
    #item-3:checked~.cardsJuegos #selector-4,
    #item-2:checked~.cardsJuegos #selector-3,
    #item-1:checked~.cardsJuegos #selector-2 {
        transform: translateX(70%) scale(0.8);
        opacity: 0.6;
        z-index: 0;
    }

    /* animaciones de slider apretando las imagenes */
    #item-1:checked~.cardsJuegos #selector-1,
    #item-2:checked~.cardsJuegos #selector-2,
    #item-3:checked~.cardsJuegos #selector-3,
    #item-4:checked~.cardsJuegos #selector-4,
    #item-5:checked~.cardsJuegos #selector-5 {
        transform: translateX(0) scale(1);
        z-index: 1;
    }


    .flechitas{
        height: 450px;
        display: flex;
        align-items: center;
    }

    /* boton derecho para cambiar la imagen del slider */
    /* boton sin neon que al hacer hover se pone en 0 */
    .flechitas:hover .slider-buttonR {
        opacity: 0;
    }

    /* boton con neon que al hacer hover se pone en 1 */
    .flechitas:hover .slider-buttonRN {
        opacity: 1;
    }

    .slider-buttonR {
        
        cursor: pointer;

    }

    .slider-buttonRN {
        opacity: 1;
        cursor: pointer;
    }

    /* boton izquierdo para cambiar la imagen del slider */
    /* boton sin neon que al hacer hover se pone en 0 */
    .flechitas.slider-buttonL {
        display: initial;
    }

    /* boton con neon que al hacer hover se pone en 1 */
    .flechitas.slider-buttonLN {
        display: initial;

    }

    .slider-buttonL {
        
        cursor: pointer;
        /* transition-duration: 1s; */
    }

    .slider-buttonLN {
        opacity: 1;
        cursor: pointer;
        /* transition-duration: 1s; */
    }

    
    .roca4 {
        position: absolute;
        left: 25%;
        z-index: -1;
    }

    .roca13 {
        position: absolute;
        top: 150%;
        left: 9%;
        z-index: -1;
    }

    .roca14 {
        position: absolute;
        top: 140%;
        right: 9%;
        z-index: -1;
    }


      
}

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

    .juegos{
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        align-items: center;
    }
    
    .contenido-seccion {
    
        text-align: center;
        margin-top: 50px;
        width: 100%;
        height: 100%;
    }

    

    /* titulo de la seccion de juegos */
    .contenido-seccion label {
        margin-top: 20px;
        font-family: "Raleway";
        font-style: normal;
        font-size: 3vw;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
    }


    /* contenedor de la imagen */
    .container__slider {
        width: 70%;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    input[type="radio"] {
        display: none;
    }



    /* todas las imagenes */
    .cardsJuegos {
        position: relative;
        top: 5vw;
        width: 100%;
        height: 100%;
       
    }

    /* cada imagen pero el label */
    .cardjuegos {
        position: absolute;
        width: 20vw;
        height: 35vw;
        left: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* cada imagen */
    .imgJuegos {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        object-fit: cover;
        box-shadow: 1rem 2rem 3rem rgba(29, 25, 25, 0.419);
    }

    /* animaciones de slider apretando las imagenes */
    #item-2:checked~.cardsJuegos #selector-1,
    #item-1:checked~.cardsJuegos #selector-5,
    #item-3:checked~.cardsJuegos #selector-2,
    #item-4:checked~.cardsJuegos #selector-3,
    #item-5:checked~.cardsJuegos #selector-4 {
        transform: translateX(-70%) scale(0.8);
        opacity: 0.6;
        z-index: 0;
    }

    #item-2:checked~.cardsJuegos #selector-4,
    #item-2:checked~.cardsJuegos #selector-5 {
        opacity: 0;
    }

    #item-1:checked~.cardsJuegos #selector-3,
    #item-1:checked~.cardsJuegos #selector-4 {
        opacity: 0;
    }

    #item-3:checked~.cardsJuegos #selector-1,
    #item-3:checked~.cardsJuegos #selector-5 {
        opacity: 0;
    }

    #item-4:checked~.cardsJuegos #selector-2,
    #item-4:checked~.cardsJuegos #selector-1 {
        opacity: 0;
    }

    #item-5:checked~.cardsJuegos #selector-2,
    #item-5:checked~.cardsJuegos #selector-3 {
        opacity: 0;
    }

    /* animaciones de slider apretando las imagenes */
    #item-5:checked~.cardsJuegos #selector-1,
    #item-4:checked~.cardsJuegos #selector-5,
    #item-3:checked~.cardsJuegos #selector-4,
    #item-2:checked~.cardsJuegos #selector-3,
    #item-1:checked~.cardsJuegos #selector-2 {
        transform: translateX(70%) scale(0.8);
        opacity: 0.6;
        z-index: 0;
    }

    /* animaciones de slider apretando las imagenes */
    #item-1:checked~.cardsJuegos #selector-1,
    #item-2:checked~.cardsJuegos #selector-2,
    #item-3:checked~.cardsJuegos #selector-3,
    #item-4:checked~.cardsJuegos #selector-4,
    #item-5:checked~.cardsJuegos #selector-5 {
        transform: translateX(0) scale(1);
        z-index: 1;
    }


    .flechitas{
        margin-top: 100px;
        scale: 1.5;
        height: 450px;
        display: flex;
        align-items: center;
    }

    /* boton derecho para cambiar la imagen del slider */
    /* boton sin neon que al hacer hover se pone en 0 */
    .flechitas:hover .slider-buttonR {
        opacity: 0;
    }

    /* boton con neon que al hacer hover se pone en 1 */
    .flechitas:hover .slider-buttonRN {
        opacity: 1;
    }

    .slider-buttonR {
        
        cursor: pointer;

    }

    .slider-buttonRN {
        opacity: 1;
        cursor: pointer;
    }

    /* boton izquierdo para cambiar la imagen del slider */
    /* boton sin neon que al hacer hover se pone en 0 */
    .flechitas.slider-buttonL {
        display: initial;
    }

    /* boton con neon que al hacer hover se pone en 1 */
    .flechitas.slider-buttonLN {
        display: initial;

    }

    .slider-buttonL {
        
        cursor: pointer;
        /* transition-duration: 1s; */
    }

    .slider-buttonLN {
        opacity: 1;
        cursor: pointer;
        /* transition-duration: 1s; */
    }

    
    .roca4 {
        position: absolute;
        left: 25%;
        z-index: -1;
    }

    .roca13 {
        position: absolute;
        top: 150%;
        left: 9%;
        z-index: -1;
    }

    .roca14 {
        position: absolute;
        top: 140%;
        right: 9%;
        z-index: -1;
    }


      
}

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

    .juegos{
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        align-items: center;
    }
    
    .contenido-seccion {
    
        text-align: center;
        margin-top: 50px;
        width: 100%;
        height: 100%;
    }

    

    /* titulo de la seccion de juegos */
    .contenido-seccion label {
        margin-top: 20px;
        font-family: "Raleway";
        font-style: normal;
        font-size: 3vw;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
    }


    /* contenedor de la imagen */
    .container__slider {
        width: 70%;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    input[type="radio"] {
        display: none;
    }



    /* todas las imagenes */
    .cardsJuegos {
        position: relative;
        top: 5vw;
        width: 100%;
        height: 100%;
       
    }

    /* cada imagen pero el label */
    .cardjuegos {
        position: absolute;
        width: 20vw;
        height: 35vw;
        left: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* cada imagen */
    .imgJuegos {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        object-fit: cover;
        box-shadow: 1rem 2rem 3rem rgba(29, 25, 25, 0.419);
    }

    /* animaciones de slider apretando las imagenes */
    #item-2:checked~.cardsJuegos #selector-1,
    #item-1:checked~.cardsJuegos #selector-5,
    #item-3:checked~.cardsJuegos #selector-2,
    #item-4:checked~.cardsJuegos #selector-3,
    #item-5:checked~.cardsJuegos #selector-4 {
        transform: translateX(-70%) scale(0.8);
        opacity: 0.6;
        z-index: 0;
    }

    #item-2:checked~.cardsJuegos #selector-4,
    #item-2:checked~.cardsJuegos #selector-5 {
        opacity: 0;
    }

    #item-1:checked~.cardsJuegos #selector-3,
    #item-1:checked~.cardsJuegos #selector-4 {
        opacity: 0;
    }

    #item-3:checked~.cardsJuegos #selector-1,
    #item-3:checked~.cardsJuegos #selector-5 {
        opacity: 0;
    }

    #item-4:checked~.cardsJuegos #selector-2,
    #item-4:checked~.cardsJuegos #selector-1 {
        opacity: 0;
    }

    #item-5:checked~.cardsJuegos #selector-2,
    #item-5:checked~.cardsJuegos #selector-3 {
        opacity: 0;
    }

    /* animaciones de slider apretando las imagenes */
    #item-5:checked~.cardsJuegos #selector-1,
    #item-4:checked~.cardsJuegos #selector-5,
    #item-3:checked~.cardsJuegos #selector-4,
    #item-2:checked~.cardsJuegos #selector-3,
    #item-1:checked~.cardsJuegos #selector-2 {
        transform: translateX(70%) scale(0.8);
        opacity: 0.6;
        z-index: 0;
    }

    /* animaciones de slider apretando las imagenes */
    #item-1:checked~.cardsJuegos #selector-1,
    #item-2:checked~.cardsJuegos #selector-2,
    #item-3:checked~.cardsJuegos #selector-3,
    #item-4:checked~.cardsJuegos #selector-4,
    #item-5:checked~.cardsJuegos #selector-5 {
        transform: translateX(0) scale(1);
        z-index: 1;
    }


    .flechitas{
        margin-top: 300px;
        scale: 1.5;
        height: 450px;
        display: flex;
        align-items: center;
    }

    /* boton derecho para cambiar la imagen del slider */
    /* boton sin neon que al hacer hover se pone en 0 */
    .flechitas:hover .slider-buttonR {
        opacity: 0;
    }

    /* boton con neon que al hacer hover se pone en 1 */
    .flechitas:hover .slider-buttonRN {
        opacity: 1;
    }

    .slider-buttonR {
        
        cursor: pointer;

    }

    .slider-buttonRN {
        opacity: 1;
        cursor: pointer;
    }

    /* boton izquierdo para cambiar la imagen del slider */
    /* boton sin neon que al hacer hover se pone en 0 */
    .flechitas.slider-buttonL {
        display: initial;
    }

    /* boton con neon que al hacer hover se pone en 1 */
    .flechitas.slider-buttonLN {
        display: initial;

    }

    .slider-buttonL {
        
        cursor: pointer;
        /* transition-duration: 1s; */
    }

    .slider-buttonLN {
        opacity: 1;
        cursor: pointer;
        /* transition-duration: 1s; */
    }

    
    .roca4 {
        position: absolute;
        left: 25%;
        z-index: -1;
    }

    .roca13 {
        position: absolute;
        top: 150%;
        left: 9%;
        z-index: -1;
    }

    .roca14 {
        position: absolute;
        top: 140%;
        right: 9%;
        z-index: -1;
    }


      
}
/* .slider-buttonL:hover {
    transform: scale(1.08);
    transition: 0.5s ease-in-out;
} */

/* ------------------------------------------------------------------------------------------------------- */
/* -------- SERVICES ------- */

    .services{
        margin-top: 200px;
    }

     .contenido-services {
    
        text-align: center;
        width: 100%;
        margin-bottom: 50px;
   
    }

    .roca5 {
        position: absolute;
        right: 25%;
        z-index: -1;
    }

    .roca6 {
        position: absolute;
        margin-top: 35%;
        left: 10%;
        z-index: -1;
    }

    /* titulo de la seccion */
    .contenido-services label {
        font-family: "Raleway";
        font-style: normal;
        font-size: 3vw;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
    }

    /* conteiner donde estan todas las cards */
    .card-containerServices {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2px;
        max-width: 70%;
        margin: 0 auto;
        text-align: center;
        z-index: -10;
    }

    /* titulos de las cards */
    .card-containerServices .card-title {
        margin-top: 5%;
        font-family: "Raleway";
        font-style: normal;
        font-size: 1vw;
        text-align: center;
        color: #e3e3e3;
    }

    /* cada card */
    .cardService {
        margin-top: 15%;
        width: 90%;
        height: 90%;
        margin-bottom: 1.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-radius: 2rem;
        overflow: hidden;
        background-color: rgba(98, 92, 92, 0.129);
        border: 1px solid #000;
        border-color: rgba(46, 35, 35, 0.75);
        transition-duration: 1s;
    }

    /* hover de cada card */
    .cardService:hover {
        /* background-color: #216ca95b;
        transition: 0.5s ease-in-out;
        box-shadow: 0 1rem 1rem rgba(29, 25, 25, 0.419);
        transform: scale(1.08); */

        background-color: rgba(98, 92, 92, 0.229);
        box-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #00ecfc, 0 0 4px #00ccff,
            0 0 7px #00a6ff;
        transform: scale(1.05);
        transition: 0.5s ease-in-out;
    }

    /* iconos de las cards */
    .card-imageService {
        margin-top: 13%;
        width: 40%;
        height: 50%;
        margin-bottom: 5%;
    }

    /* cuando hago hover al contenido lo dejo en opacidad 0 para despues mostrar el parrafo */
    .cardService:hover .cardService-content {
        display: none;
        opacity: 0;
    }

    /* el parrafo inicializado sin display para que no ocupe lugar */
    .cardService p {

        display: none;
    }

    /* al hacer hover sobre la card activo el parrafo */
    .cardService:hover p {
        text-align: justify;
        display: inline-flex;
        margin-top: 4.2vw;
        color: #ffffff;
        text-shadow: 0px 0px 50px #87d9ee;
        opacity: 1;
        text-align: center;
        padding: 0 30px;
        font-size: 1.1vw;
    }
    

@media screen and (max-width: 767px) {
    
        .services{
            margin-top: 100px !important;
        }
    
        .contenido-services {
            text-align: center;
            width: 100%;
            font-size: 6vw;
         
        }
    
        .roca5 {
            position: absolute;
            right: 25%;
            z-index: -1;
        }
    
        .roca6 {
            position: absolute;
            margin-top: 35%;
            left: 10%;
            z-index: -1;
        }
    
        /* titulo de la seccion */
        .contenido-services label {
            font-family: "Raleway";
            font-style: normal;
            font-size: 6vw;
            color: #ffffff;
            text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
                -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
                30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
        }
    
        /* conteiner donde estan todas las cards */
        .card-containerServices {
            display: grid;
            align-items: center;
            justify-items: center;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 2px;
            max-width: 90%;
            text-align: center;
    
        }
    
        /* titulos de las cards */
        .card-containerServices .card-title {
         
            font-family: "Raleway";
            font-style: normal;
            font-size: 3vw;
            text-align: center;
            color: #e3e3e3;
        }
    
        /* cada card */
        .cardService {
            display: flex;
            justify-content: center;
            align-items: center;
           
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            border-radius: 2rem;
            overflow: hidden;
            background-color: rgba(98, 92, 92, 0.129);
            border: 1px solid #000;
            border-color: rgba(46, 35, 35, 0.75);
            transition-duration: 1s;
        }
    
        /* hover de cada card */
        .cardService:hover {
            /* background-color: #216ca95b;
            transition: 0.5s ease-in-out;
            box-shadow: 0 1rem 1rem rgba(29, 25, 25, 0.419);
            transform: scale(1.08); */
    
            background-color: rgba(98, 92, 92, 0.229);
            box-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #00ecfc, 0 0 4px #00ccff,
                0 0 7px #00a6ff;
            transform: scale(1.05);
            transition: 0.5s ease-in-out;
        }
    
        /* iconos de las cards */
        .card-imageService {
            width: 40%;
        }
    
        /* cuando hago hover al contenido lo dejo en opacidad 0 para despues mostrar el parrafo */
        .cardService:hover .cardService-content {
            display: none;
            opacity: 0;
        }
    
        /* el parrafo inicializado sin display para que no ocupe lugar */
        .cardService p {
    
            display: none;
        }
    
        /* al hacer hover sobre la card activo el parrafo */
        .cardService:hover p {
          
            font-family: "Raleway";
         
            color: #ffffff;
            text-shadow: 0px 0px 50px #87d9ee;
            opacity: 1;
            text-align: center;
            font-size: 3vw;
        }
        
     
    }
    
@media screen and (max-width: 1200px) and (min-width: 768px){
    .services{
        margin-top: 40px !important;
    }
}
 
@media  screen and (min-width: 1367px) {
    .services{
        margin-top: 500px !important;
    }
}

 
@media  screen and (min-width: 2500px) {
    .services{
        margin-top: 800px !important;
    }
}






/* ------------------------------------------------------------------------------------------------------- */
/* -------- TRUST US ------- */




@media screen and (max-width: 767px) {
    
.trust .contenido-trust {

    text-align: center;
    margin-top: 150px;
  
}

.roca7 {
    position: absolute;
    left: 17%;
    z-index: -1;
}

.roca8 {
    position: absolute;
    margin-top: 25%;
    right: 17%;
    z-index: -1;
}

.roca15 {
    position: absolute;
    margin-top: 4%;
    right: 7%;
    z-index: -1;
}

.roca16 {
    position: absolute;
    margin-top: 27%;
    left: 5%;
    z-index: -1;
}

/* titulo de la seecion */
.contenido-trust label {
    font-family: "Raleway";
    font-style: normal;
    font-size: 6vw;
    color: #ffffff;
    text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
        -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
        30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
}

/* contenedor donde estan todas las empresas */
.card-containerTrust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1px;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    z-index: -10;
}

/* estidlo del divisor de la empresa */
.cardTrust {
    margin-top: 30%;
    width: 100%;
    height: 80%;
    margin-bottom: 2rem;
    background-color: transparent;
}

/* tamanio de la imagen */
.card-imageTrust {
    width: 70%;
    height: 50%;
}

/* al hacer hover sobre alguna imagen agrando la escala */
.card-imageTrust:hover {
    transform: scale(1.3);
    transition: 0.5s ease-in-out;
}
    
}

@media screen and (min-width: 768px) {
    
.trust .contenido-trust {
    position: absolute;
    text-align: center;
    margin-top: 200px;
    width: 100%;
    height: 100%;
}

.roca7 {
    position: absolute;
    left: 17%;
    z-index: -1;
}

.roca8 {
    position: absolute;
    margin-top: 25%;
    right: 17%;
    z-index: -1;
}

.roca15 {
    position: absolute;
    margin-top: 4%;
    right: 7%;
    z-index: -1;
}

.roca16 {
    position: absolute;
    margin-top: 27%;
    left: 5%;
    z-index: -1;
}

/* titulo de la seecion */
.contenido-trust label {
    font-family: "Raleway";
    font-style: normal;
    font-size: 3vw;
    color: #ffffff;
    text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
        -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
        30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
}

/* contenedor donde estan todas las empresas */
.card-containerTrust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1px;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    z-index: -10;
}

/* estidlo del divisor de la empresa */
.cardTrust {
    margin-top: 30%;
    width: 100%;
    height: 80%;
    margin-bottom: 2rem;
    background-color: transparent;
}

/* tamanio de la imagen */
.card-imageTrust {
    width: 60%;
    height: 50%;
}

/* al hacer hover sobre alguna imagen agrando la escala */
.card-imageTrust:hover {
    transform: scale(1.3);
    transition: 0.5s ease-in-out;
}
    
}


/* ------------------------------------------------------------------------------------------------------- */
/* -------- CONTACT ------- */

@media screen and (max-width: 767px) {

    .contact .contenido-contact {

        position: absolute;
        margin-top: 70px;
        width: 100%;
   
        z-index: 9;
    }
    
    .roca9 {
        position: absolute;
        margin-top: 25%;
        left: 17%;
        z-index: -1;
    }
    
    /* titulo de la seccion */
    .contenido-contact .tituloContact {
        position: absolute;
        margin-top: 7%;
        margin-left: 40%;
        font-family: "Raleway";
        font-style: normal;
        font-size: 6vw;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
    }
    
    /* boton enviar */
    .enviar {
        margin-left: auto;
        font-family: "Raleway";
        font-style: normal;
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid #00ccff9a;
        color: #ffffff;
        padding: 10px 40px;
        text-align: center;
        font-size: 3.0vw;
        cursor: pointer;
        border-radius: 35px;
        box-shadow: 0 1rem 1rem rgba(29, 25, 25, 0.419);
        transition-duration: 1s;
    }
    
    /* hover del boton */
    .enviar:hover {
        transition: 0.3s ease-in-out;
        box-shadow: 0 0.1rem 1rem rgba(1, 163, 238, 0.419);
        transform: scale(1.08);
        text-shadow: 0px 0px 5px #fff, -5px 0px 10px #fff, 5px 0px 10px #fff,
            -5px 0px 12px #0062ff, 5px 0px 15px #0088ff, -5px 0px 20px #007bff;
    }
    
    /* contenedor donde va a estar todo el form */
    .formulario {
        margin-top: 20%;
        position: relative;
        align-items: center;
        justify-content: center;
    }
    
    /* form donde estan los inputs */
    form {
        font-family: Arial, sans-serif;
        width: 55vw;
        margin: 0 auto;
        background-color: transparent;
        padding: 40px;
        border-radius: 30px;
        background: rgba(23, 30, 47, 0.3);
        box-shadow: 0 2rem 2rem rgba(29, 25, 25, 0.419);
    }
    
    /* wrap para que cuadno no hay suficiente espacio horizontal se envuelva en otra linea adicional */
   
    
    /* input nombre */
    .campos[type="text"] {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 50vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
    }
    
    /* cuando aprieto para escribir (focus) */
    input:focus {
        outline: none;
        border-bottom: 1.5px solid #00ccff;
        color: #ffffff;
    }
    
    /* cuando aprieto para escribir (focus) */
    textarea:focus {
        outline: none;
        border-bottom: 1.5px solid #00ccff;
        color: #ffffff;
    }
    
    /* input email */
    .campos[type="email"] {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 50vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
    }
    
    /* input mensaje */
    textarea {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 50vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 15px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
        background-color: #D9D9D91A;
        height: 25vw;
    }
    
    
}

@media screen and (min-width: 768px) {
    
    .contact .contenido-contact {

    
        margin-top: 850px;
        width: 100%;

        z-index: 9;
    }

    .roca9 {
        position: absolute;
        margin-top: 25%;
        left: 17%;
        z-index: -1;
    }

    /* titulo de la seccion */
    .contenido-contact .tituloContact {
        margin-left: 44%;
        font-family: "Raleway";
        font-style: normal;
        font-size: 3vw;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
    }

    /* boton enviar */
    .enviar {
        margin-left: 43vw;
        font-family: "Raleway";
        font-style: normal;
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid #00ccff9a;
        color: #ffffff;
        padding: 10px 40px;
        text-align: center;
        font-size: 1.5vw;
        cursor: pointer;
        border-radius: 35px;
        box-shadow: 0 1rem 1rem rgba(29, 25, 25, 0.419);
        transition-duration: 1s;
    }

    /* hover del boton */
    .enviar:hover {
        transition: 0.3s ease-in-out;
        box-shadow: 0 0.1rem 1rem rgba(1, 163, 238, 0.419);
        transform: scale(1.08);
        text-shadow: 0px 0px 5px #fff, -5px 0px 10px #fff, 5px 0px 10px #fff,
            -5px 0px 12px #0062ff, 5px 0px 15px #0088ff, -5px 0px 20px #007bff;
    }

    /* contenedor donde va a estar todo el form */
    .formulario {
        margin-top: 10%;
        position: relative;
        align-items: center;
        justify-content: center;
    }

    /* form donde estan los inputs */
    form {
        font-family: Arial, sans-serif;
        max-width: 55vw;
        margin: 0 auto;
        background-color: transparent;
        padding: 40px;
        border-radius: 30px;
        background: rgba(23, 30, 47, 0.3);
        box-shadow: 0 2rem 2rem rgba(29, 25, 25, 0.419);
    }

    /* wrap para que cuadno no hay suficiente espacio horizontal se envuelva en otra linea adicional */
    .form-group {
        display: wrap;
    }

    /* input nombre */
    .campos[type="text"] {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 25vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
    }

    /* cuando aprieto para escribir (focus) */
    input:focus {
        outline: none;
        border-bottom: 1.5px solid #00ccff;
        color: #ffffff;
    }

    /* cuando aprieto para escribir (focus) */
    textarea:focus {
        outline: none;
        border-bottom: 1.5px solid #00ccff;
        color: #ffffff;
        
    }

    /* input email */
    .campos[type="email"] {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 25vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
    }

    /* input mensaje */
    textarea {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 52.2vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 15px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
        background-color: #D9D9D91A;
        height: 7vw;
    }

    textarea::-webkit-scrollbar {
        width: 0.6em;
    }
    textarea::-webkit-scrollbar-thumb {
        background: #9e9e9e;
        border-radius: 10px;
    }
    
    textarea::-webkit-scrollbar-thumb:hover {
        background: #47474767;
    }
    textarea::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
        
    }


    
}

@media  screen and (min-width: 1367px) {
    
    .contact .contenido-contact {

    
        margin-top: 950px;
        width: 100%;

        z-index: 9;
    }

    .roca9 {
        position: absolute;
        margin-top: 25%;
        left: 17%;
        z-index: -1;
    }

    /* titulo de la seccion */
    .contenido-contact .tituloContact {
        margin-left: 44%;
        font-family: "Raleway";
        font-style: normal;
        font-size: 3vw;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
    }

    /* boton enviar */
    .enviar {
        margin-left: 43vw;
        font-family: "Raleway";
        font-style: normal;
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid #00ccff9a;
        color: #ffffff;
        padding: 10px 40px;
        text-align: center;
        font-size: 1.5vw;
        cursor: pointer;
        border-radius: 35px;
        box-shadow: 0 1rem 1rem rgba(29, 25, 25, 0.419);
        transition-duration: 1s;
    }

    /* hover del boton */
    .enviar:hover {
        transition: 0.3s ease-in-out;
        box-shadow: 0 0.1rem 1rem rgba(1, 163, 238, 0.419);
        transform: scale(1.08);
        text-shadow: 0px 0px 5px #fff, -5px 0px 10px #fff, 5px 0px 10px #fff,
            -5px 0px 12px #0062ff, 5px 0px 15px #0088ff, -5px 0px 20px #007bff;
    }

    /* contenedor donde va a estar todo el form */
    .formulario {
        margin-top: 10%;
        position: relative;
        align-items: center;
        justify-content: center;
    }

    /* form donde estan los inputs */
    form {
        font-family: Arial, sans-serif;
        max-width: 55vw;
        margin: 0 auto;
        background-color: transparent;
        padding: 40px;
        border-radius: 30px;
        background: rgba(23, 30, 47, 0.3);
        box-shadow: 0 2rem 2rem rgba(29, 25, 25, 0.419);
    }

    /* wrap para que cuadno no hay suficiente espacio horizontal se envuelva en otra linea adicional */
    .form-group {
        display: wrap;
    }

    /* input nombre */
    .campos[type="text"] {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 25vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
    }

    /* cuando aprieto para escribir (focus) */
    input:focus {
        outline: none;
        border-bottom: 1.5px solid #00ccff;
        color: #ffffff;
    }

    /* cuando aprieto para escribir (focus) */
    textarea:focus {
        outline: none;
        border-bottom: 1.5px solid #00ccff;
        color: #ffffff;
        
    }

    /* input email */
    .campos[type="email"] {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 25vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
    }

    /* input mensaje */
    textarea {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 52.2vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 15px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
        background-color: #D9D9D91A;
        height: 7vw;
    }
    textarea::-webkit-scrollbar {
        width: 0.6em;
    }
    textarea::-webkit-scrollbar-thumb {
        background: #9e9e9e;
        border-radius: 10px;
    }
    
    textarea::-webkit-scrollbar-thumb:hover {
        background: #47474767;
    }
    textarea::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
        
    }

}

@media  screen and (min-width: 2500px) {
    
    .contact .contenido-contact {
        margin-top: 1200px;
        width: 100%;
        z-index: 9;
    }

    .roca9 {
        position: absolute;
        margin-top: 25%;
        left: 17%;
        z-index: -1;
    }

    /* titulo de la seccion */
    .contenido-contact .tituloContact {
        margin-left: 44%;
        font-family: "Raleway";
        font-style: normal;
        font-size: 3vw;
        color: #ffffff;
        text-shadow: 0px 0px 10px #fff, -30px 0px 20px #fff, 30px 0px 30px #fff,
            -30px 0px 40px #0062ff, 30px 0px 70px #0088ff, -30px 0px 80px #007bff,
            30px -30px 100px #32acf2, -30px 30px 150px #3db7f0;
    }

    /* boton enviar */
    .enviar {
        margin-left: 43vw;
        font-family: "Raleway";
        font-style: normal;
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid #00ccff9a;
        color: #ffffff;
        padding: 10px 40px;
        text-align: center;
        font-size: 1.5vw;
        cursor: pointer;
        border-radius: 35px;
        box-shadow: 0 1rem 1rem rgba(29, 25, 25, 0.419);
        transition-duration: 1s;
    }

    /* hover del boton */
    .enviar:hover {
        transition: 0.3s ease-in-out;
        box-shadow: 0 0.1rem 1rem rgba(1, 163, 238, 0.419);
        transform: scale(1.08);
        text-shadow: 0px 0px 5px #fff, -5px 0px 10px #fff, 5px 0px 10px #fff,
            -5px 0px 12px #0062ff, 5px 0px 15px #0088ff, -5px 0px 20px #007bff;
    }

    /* contenedor donde va a estar todo el form */
    .formulario {
        margin-top: 10%;
        position: relative;
        align-items: center;
        justify-content: center;
    }

    /* form donde estan los inputs */
    form {
        font-family: Arial, sans-serif;
        max-width: 55vw;
        margin: 0 auto;
        background-color: transparent;
        padding: 40px;
        border-radius: 30px;
        background: rgba(23, 30, 47, 0.3);
        box-shadow: 0 2rem 2rem rgba(29, 25, 25, 0.419);
    }

    /* wrap para que cuadno no hay suficiente espacio horizontal se envuelva en otra linea adicional */
    .form-group {
        display: wrap;
    }

    /* input nombre */
    .campos[type="text"] {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 25vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
    }

    /* cuando aprieto para escribir (focus) */
    input:focus {
        outline: none;
        border-bottom: 1.5px solid #00ccff;
        color: #ffffff;
    }

    /* cuando aprieto para escribir (focus) */
    textarea:focus {
        outline: none;
        border-bottom: 1.5px solid #00ccff;
        color: #ffffff;
        
    }

    /* input email */
    .campos[type="email"] {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 25vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
    }

    /* input mensaje */
    textarea {
        color: #ffffff;
        font-family: "Raleway";
        font-style: normal;
        width: 52.2vw;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 15px;
        border: none;
        font-size: 16px;
        background: transparent;
        border-bottom: 1.5px solid #00ccff;
        background-color: #D9D9D91A;
        height: 7vw;
    }
    textarea::-webkit-scrollbar {
        width: 0.6em;
    }
    textarea::-webkit-scrollbar-thumb {
        background: #9e9e9e;
        border-radius: 10px;
    }
    
    textarea::-webkit-scrollbar-thumb:hover {
        background: #47474767;
    }
    textarea::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
        
    }

}

/* ------------------------------------------------------------------------------------------------------- */
/* -------- footer ------- */

@media screen and (max-width: 767px){
    

    .pie-pagina{
        
        width: 100%;
        background: rgba(10, 12, 20, 0.7);
        backdrop-filter: blur(2px);
        margin-top: 900px;
    }
    .pie-pagina .grupo-1{
        
        width: 100%;
        background: rgba(10, 12, 20, 0.7);
        backdrop-filter: blur(2px);
        display:flex;
        justify-content: center;
        align-items: center;
        grid-gap:10px;
        padding: 5px 0px;
    }
    
    .pie-pagina .grupo-1 .box span{
        display: flex;
        color: #fff;
        margin-bottom: 15px;
        font-size: 15px;
        justify-content: center;
        text-align: center;
        text-justify: center;
    }
    
    .pie-pagina .grupo-1 .red-social a{
        display: flex;
        text-decoration: none;
        justify-content: center;
        padding: 5px 0px;
        text-align: center;
        transition: all 300ms ease;
    }
    .pie-pagina .grupo-1 .red-social a:hover{
        color: aqua;
    }
    .pie-pagina .grupo-1 .ver{
    
        padding: 5px 0px;
        text-align: center;
        color: #fff;
    }
   
    .pie-pagina .mundo{
        display: block;
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -99;
    }
    .pie-pagina .mundo img{
        
        animation: rotate 100s linear infinite;
        width: 350px;
        height: auto;
        z-index: -99;
        
        border: 0;
        padding: 0;
        margin: 0;
    }
    
    .pie-pagina .logofooter{
        position: absolute;
        padding-bottom: 150px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
    }
    .pie-pagina .logofooter img{
        width: 150px;
        height: auto;
        z-index: 99;
    }
    
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
    
        100% {
            transform: rotate(360deg);
        }
    }
    
    }


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

.pie-pagina{
    
    width: 100%;
    background: rgba(10, 12, 20, 0.7);
    backdrop-filter: blur(2px);
    margin-top: 400px;
    
}
.pie-pagina .grupo-1{
    
    width: 100%;
    background: rgba(10, 12, 20, 0.7);
    backdrop-filter: blur(2px);
    display:flex;
    justify-content: center;
    align-items: center;
    grid-gap:50px;
    padding: 45px 0px;
}

.pie-pagina .grupo-1 .box span{
    color: #fff;
    margin-bottom: 25px;
    font-size: 20px;
    justify-content: center;
    text-align: center;
}

.pie-pagina .grupo-1 .red-social a{
    display: flex;
    text-decoration: none;
    justify-content: center;
    padding: 15px 10px;
    text-align: center;
    transition: all 300ms ease;
}
.pie-pagina .grupo-1 .red-social a:hover{
    color: aqua;
}
.pie-pagina .grupo-1 .ver{

    padding: 15px 10px;
    text-align: center;
    color: #fff;
}
.pie-pagina .grupo-1 .ver span{
    font-size: 15px;
    text-align: center;
    justify-content: center;


}

.pie-pagina .mundo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -99;
}
.pie-pagina .mundo img{
    animation: rotate 100s linear infinite;
    width: 700px;
    height: auto;
}

.pie-pagina .logofooter{
    position: absolute;
    padding-bottom: 350px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}
.pie-pagina .logofooter img{
    width: 350px;
    height: auto;
    z-index: 99;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
    
}

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

    .pie-pagina{
        
        width: 100%;
        background: rgba(10, 12, 20, 0.7);
        backdrop-filter: blur(2px);
        margin-top: 500px;
    }
    .pie-pagina .grupo-1{
        
        width: 100%;
        background: rgba(10, 12, 20, 0.7);
        backdrop-filter: blur(2px);
        display:flex;
        justify-content: center;
        align-items: center;
        grid-gap:50px;
        padding: 45px 0px;
    }
    
    .pie-pagina .grupo-1 .box span{
        display: flex;
        color: #fff;
        margin-bottom: 25px;
        font-size: 40px;
        justify-content: center;
        text-align: center;
        text-justify: center;
    }
    
    .pie-pagina .grupo-1 .red-social a{
        display: flex;
        text-decoration: none;
        justify-content: center;
        padding: 15px 10px;
        text-align: center;
        transition: all 300ms ease;
    }
    .pie-pagina .grupo-1 .red-social a:hover{
        color: aqua;
    }
    .pie-pagina .grupo-1 .ver{
    
        padding: 15px 10px;
        text-align: center;
        color: #fff;
    }
   
    
    .pie-pagina .mundo{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -99;
    }
    .pie-pagina .mundo img{
        animation: rotate 100s linear infinite;
        width: 1000px;
        height: auto;
    }
    
    .pie-pagina .logofooter{
        position: absolute;
        padding-bottom: 440px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
    }
    .pie-pagina .logofooter img{
        width: 450px;
        height: auto;
        z-index: 99;
    }
    
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
    
        100% {
            transform: rotate(360deg);
        }
    }
    
    }