@import url(../styles/partials/header.css);

@import url(../styles/partials/navbar.css);

@import url(../styles/partials/slider.css);

@import url(../styles/partials/section.css);

@import url(../styles/servicios/servicios.css);

@import url(../styles/servicios/especialidades.css);

@import url(../styles/partials/footer.css);

@import url(../styles/nosotros/nosotros.css);

@import url(../styles/servicios/servicio.css);

@import url(../styles/aprendo/aprendo.css);

@import url(../styles/galeria/galeria.css);

@import url(../styles/productos/productos.css);

@import url(../styles/noticias/noticias.css);

@import url(../styles/partials/modal.css);


*,

*::before,

*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    /* outline: 1px solid red; */

}



:root {

    --poppins: 'Open Sans', sans-serif;

    --opens-sans: 'Poppins', sans-serif;

    --purple--primary: #CE99F2;

    --purple--secundary: #C279F2;

    --blue--primary: #BBF2E8;

    --blue--secundary: #05C7F2;

    --blue--dark: #079DD9;

    --blue--very--dark: rgb(58, 58, 92);

    --white--: #F9F9F9;

    --pading-container: 0 80px;

}



body {

    font-family: var(--poppins);

}





li {

    list-style: none;

}



a,

img,

span,

time,

input,

button,

ion-icon {

    display: block;

}



a {

    color: inherit;

    text-decoration: none;

}

/*pag*/

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.pagination-numbers {
    display: flex;
    margin: 0 10px;
}

.page-number {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.page-number.active {
    background-color: #00BCD4;
    color: white;
}

.prev-arrow,
.next-arrow {
    margin: 0 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.prev-arrow:hover,
.next-arrow:hover,
.page-number:hover {
    background-color: #00BCD4;
    color: white;
}

/*pag*/
/*loader */

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f9fb;
    z-index: 1000;
    transition: opacity 0.75s, visibility 0.75s;
}

.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

.loader::after {
    content: "";
    width: 75px;
    height: 75px;
    border: 15px solid #dddd;
    border-top-color: #16B8CC;
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
}

@keyframes loading {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

/*loader*/


/*go top*/

.go-top-container {

    position: fixed;

    bottom: 4rem;

    right: 0;

    height: 6.6rem;

    z-index: -1;

}



.go-top-button {

    width: 0rem;

    height: 0rem;

    background: #2071b2;

    border-radius: 50%;

    cursor: pointer;

    transition: .2s;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: -1;

}



.go-top-button i {

    position: absolute;

    font-size: 1.7.rem;

    top: 48%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0);

    color: #fff;

    transition: .2s;

}



.show {

    z-index: 10;

}



.show .go-top-button {

    animation: popup .3s ease-in-out;

    width: 3.6rem;

    height: 3.6rem;

    left: 0;

    z-index: 11;

}



.show i {

    transform: translate(-50%, -50%) scale(1);

}



@keyframes popup {

    0% {

        width: 0rem;

        height: 0rem;

    }



    50% {

        width: 8rem;

        height: 8rem;

    }



    100% {

        width: 6.6rem;

        height: 6.6rem;

    }

}



.container {

    /* width: 90%;

    max-width: 1200px;

    margin: 0 auto; */

    /* overflow: hidden; */



    padding: var(--pading-container);

}



.contenedor-icon-menu {

    display: none;

}



a {

    text-decoration: none;

    all: unset;

}



ul {

    list-style: none;

}

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

    .section-first {

        margin-block-start: -300px;

    }

}



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



    .section-first {

        margin-block-start: -150px;



    }

    .ubicacion-item{
        width: 800px;
    }



}



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


    .show-menu-icon {

        display: block;

    }






    .hide-icon-menu {

        display: none;

    }






    nav {

        position: absolute;

        width: 100%;

        top: 145px;

        left: 0;

        background: #fff;

        flex-direction: column;

        justify-content: start;

    }



    nav ul li a {

        color: black;

        font-size: 1.1em;

        padding: 10px 10px;

        text-decoration: none;

        display: flex;

        justify-content: flex-start;

    }



    .contenedor-lista {

        display: none;

    }



    .active {

        display: initial;

    }



    nav ul li {

        width: 100%;

    }



    nav ul li ul {

        position: relative;

        width: 100%;

        left: 25px;

    }

    nav ul li ul li {



        border: 1px solid rgba(0, 0, 0, 0);

    }

    nav ul li ul li ul {

        top: 0;

        left: 40px;

    }



    nav ul li:hover ul li {

        background: #d2f0ff;

    }



    .slideshow__container--text {

        width: 90%;

        height: 90%;

    }



    .contenedor-icon-menu {

        display: flex;

        padding: 15px;

    }



    .container {

        padding: 10px 30px;

    }



    .filosofia__section {

        margin-top: 25px;

    }



    .filosofia__texto {

        margin-top: 15px;

        font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;

        font-weight: 500;

        font-style: italic;

        font-size: 15px;

        line-height: 1.9em;

        color: #867d7d;

    }



    .filosofia__article h3 {

        font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;

        font-weight: 600;

        font-size: 18px;

        line-height: 1.2em;

    }



    .aprendizaje-container {



        margin: 0 auto;

        padding: 20px;

        margin-bottom: 50px;

        background-color: #f8f8f8;

        border-radius: 8px;

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    }



    .service-container {

        justify-content: center;

    }



    .descripcion {

        overflow: hidden;

        word-wrap: break-word;

    }



    .descripcion p {

        font-size: 15px;

        padding: 0;

    }



    .contenido {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

    }



    .myslide {

        height: 350px;

    }



    .txt {

        letter-spacing: 2px;

        line-height: 25px;

        top: 80%;

        left: 20%;

        transform: translate(-50%, -50%);

        -webkit-animation-name: posi2;

        -webkit-animation-duration: 2s;

        animation-name: posi2;

        animation-duration: 2s;

    }



    @-webkit-keyframes posi2 {

        from {

            top: 35%;

        }



        to {

            top: 50%;

        }

    }



    @keyframes posi2 {

        from {

            top: 35%;

        }



        to {

            top: 50%;

        }

    }



    .txt p {

        font-size: 13px;

    }



    .prev,

    .next {

        position: absolute;

        top: 50%;

        transform: translate(0, -50%);

        font-size: 25px;

        padding: 15px;

        cursor: pointer;

        color: #fff;

        transition: 0.1s;

        user-select: none;

    }



    .dot {

        display: inline-block;

        width: 10px;

        height: 10px;

        border: 3px solid #fff;

        border-radius: 50%;

        margin: 0 10px;

        cursor: pointer;

    }



    .section-first {

        margin-block-start: -130px;

        flex-wrap: wrap;

        display: flex;

        justify-content: center;

        flex-direction: column;

        align-items: center;

    }



    .nosotros-interior {

        margin-top: 5px;

        margin-bottom: 5px;

    }



    .section-nosotros {

        flex-wrap: wrap;

        flex-direction: column;

        padding-bottom: 30px;

    }



    .icon-section-nosotros i {

        font-size: 50px;

    }



    .icon-section i {

        font-size: 50px;

    }



    .card {

        padding: 0.5rem;

    }



    .card h3 {

        font-size: 1rem;

    }



    .card p {

        font-size: 0.8rem;

    }



    .container-servicios {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

    }



    /*slider 2*/

    .prev1,

    .next1 {

        position: absolute;

        top: 50%;

        transform: translate(0, -50%);

        font-size: 30px;

        padding: 15px;

        cursor: pointer;

        color: #fff;

        transition: 0.1s;

        user-select: none;

    }



    .dot1 {

        display: inline-block;

        width: 10px;

        height: 10px;

        border: 3px solid #fff;

        border-radius: 50%;

        margin: 0 10px;

        cursor: pointer;

    }



    .txt1 p {

        font-weight: bold;

        font-size: 14px;

    }



    .ubicacion-item {

        margin-left: 50px;

        width: 400px;

        height: 350px;



    }



    .ubicacion-item-1 h2 {

        font-size: 1rem;

    }



    .service-description {

        width: 100%;

        margin-top: 40px;

    }



    .aprendizaje-container {

        width: 100%;

    }



    .descripcion-aprendo {

        width: 60%;

    }



    .descripcion-aprendo p {

        width: 100%;

        height: 100%;

        margin-bottom: 10px;

        padding: 5px 5px;

        font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;

        font-weight: 700;

        font-style: italic;

        font-size: 16px;

        line-height: 1.9em;

        color: #867d7d;

    }



    .contenedor-img-aprendo {

        width: 250px;

        height: 250px;

        margin: 20px;

    }



    .contenedor-video-aprendo {

        width: 250px;

        height: 250px;

        margin: 20px;

    }



    .contenedor-titulo-pregunta h2 {

        font-size: 1.3rem;

    }



    .pregunta-titulo {

        font-size: 1.2rem;

        padding: 0 25px;

        margin: 0;

    }



    .mostrar {

        padding: 0 25px;

    }



    .slideshow__container--text {

        width: 680px;

        height: 250px;

        display: flex;



        flex-direction: column;



    }



    .text__tx {

        font-size: 15px;

        margin-top: 5px;

    }



    .contenedor-titulo-noticia h1 {

        font-size: 1rem;

        text-align: center;

    }



    .footer-info {

        padding-left: 50px;

        padding-right: 50px;

    }





    .contenedor-texto-footer {

        margin-top: 35px;

        margin-bottom: 25px;

        width: 200px;

        height: auto;

    }

    .section-ubicacion h1 {
        font-size: 0.8rem;
    }

    .ubicacion-item-1 h2 {
        font-size: 0.8rem;
    }

    .ubicacion-item-1 {
        text-align: center;
    }


    .section-slider-min-img {
        margin-bottom: 90px;
        margin-right: 0;
    }

    .section-slider-min-video {
        margin-top: 50px;
        margin-bottom: 90px;
        margin-left: 0;
    }
}



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

    .nav-fixed {

        transition: 0s;
    }


    header {

        justify-content: center;

        align-items: center;

        flex-direction: column;

        padding-top: 10px;

    }



    nav {



        top: 200px;



    }



    .myslide {

        height: 350px;

    }



    .txt {

        letter-spacing: 2px;

        line-height: 25px;

        top: 80%;

        left: 50%;

        transform: translate(-50%, -50%);

        -webkit-animation-name: posi2;

        -webkit-animation-duration: 2s;

        animation-name: posi2;

        animation-duration: 2s;

    }



    @-webkit-keyframes posi2 {

        from {

            top: 35%;

        }



        to {

            top: 50%;

        }

    }



    @keyframes posi2 {

        from {

            top: 35%;

        }



        to {

            top: 50%;

        }

    }



    .txt p {

        font-size: 13px;

    }



    .section-first {

        margin-block-start: -60px;

        padding: 20px;

        flex-wrap: wrap;

        display: flex;

        justify-content: center;

    }



    .article-emergencias {



        width: 260px;

        background: var(--blue--primary);

    }





    .article-interior {

        width: 100%;

        height: 100%;

        padding: 5px;

        display: flex;

    }



    .servicio-tittle {

        font-size: 1.9rem;

    }



    .container-servicios {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

    }





    /*slider 2*/

    .myslide1 {

        height: 150px;

        display: none;

        overflow: hidden;

    }



    .prev1,

    .next1 {

        position: absolute;

        top: 50%;

        transform: translate(0, -50%);

        font-size: 10px;

        padding: 15px;

        cursor: pointer;

        color: #fff;

        transition: 0.1s;

        user-select: none;

    }



    .dot1 {

        display: inline-block;

        width: 10px;

        height: 10px;

        border: 3px solid #fff;

        border-radius: 50%;

        margin: 0 10px;

        cursor: pointer;

    }



    .txt1 {

        letter-spacing: 1px;

        line-height: 25px;

        top: 20%;

        left: 15%;

        -webkit-animation-name: posi1;

        -webkit-animation-duration: 2s;

        animation-name: posi;

        animation-duration: 2s;

        z-index: 1;

    }



    @-webkit-keyframes posi1 {

        from {

            left: 2%;

        }



        to {

            left: 12%;

        }

    }





    @keyframes posi1 {

        from {

            left: 2%;

        }



        to {

            left: 2%;

        }

    }



    .txt1 p {

        font-weight: bold;

        font-size: 10px;

    }



    .ubicacion-item {

        margin-left: 50px;

        width: 400px;

        height: 350px;



    }



    .icon-section i {

        font-size: 30px;

    }



    .slider-text h2 {

        font-size: 1.1rem;

    }



    .slideshow__container--text {

        width: 320px;

        height: 250px;

        display: flex;



        flex-direction: column;



    }



    .text__tx {

        font-size: 15px;

        margin-top: 5px;

    }



    .contenedor-ubicacion {

        flex-direction: column;

        justify-content: center;

        align-items: center;



    }



    .ubicacion-item-1 {

        margin-bottom: 25px;

    }



    .ubicacion-item {

        width: 400;

        height: 250px;

        margin: 0;

    }



    .ubicacion-item iframe {

        width: 90%;

        height: 90%;

        transform-origin: top left;

        transition: transform 0.3s;

    }



    .aprendizaje-container {

        width: 100%;

        padding: 0;

        margin: 0;

    }



    .descripcion-aprendo {

        width: 100%;

    }



    .descripcion-aprendo p {

        width: 100%;

        height: 100%;

        margin-bottom: 10px;

        padding: 5px 5px;

        font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;

        font-weight: 700;

        font-style: italic;

        font-size: 16px;

        line-height: 1.9em;

        color: #867d7d;

    }



    .contenedor-img-aprendo {

        width: 100px;

        height: 250px;

        margin: 20px;

    }



    .contenedor-video-aprendo {

        width: 100px;

        height: 250px;

        margin: 20px;

    }



    .contenedor-titulo-pregunta h2 {

        font-size: 1rem;

    }



    .pregunta-titulo {

        font-size: 0.9rem;

        padding: 0 25px;

        margin: 0;

    }



    .mostrar {

        padding: 0 25px;



    }

    .nostros__section {

        flex-direction: column;

        margin-top: 25px;

    }

    .contenedor__nosotros--img {

        width: 50%;

    }



    .nosotros__texto {

        padding: 5px 5px;

        font-size: 18px;

        line-height: 1.5em;

        margin-bottom: 20px;

    }



    .nosotros__img {

        width: 330px;

        height: 300px;

    }



    .service-container {

        padding: 0;

    }



    .service-description p {

        padding: 5px 5px;

        font-size: 15px;

    }



    footer {

        color: white;

        padding: 10px;

        left: 0;

        bottom: 0;

        width: 100%;



    }



    .footer-info {

        flex-direction: column;

        padding: 0;

        margin: 0;

        gap: 5px;

    }



    .footer-item {

        padding: 0;

        margin: 0;

    }



    .footer-item ul li {

        font-size: 0.8rem;

    }



    .footer-item h2 {

        font-size: 0.8rem;

    }

    .footer-info {

        align-items: center;



    }

    .footer-item {

        padding: 0;

        margin: 0;

        text-align: center;

    }

    .footer-item ul {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

    }

    .section-slider-min-img {
        margin-bottom: 50px;
        margin-right: 0;
    }

    .section-slider-min-video {
        margin-top: 25px;
        margin-bottom: 50px;
        margin-left: 0;
    }

    .sliderModal {

        width: 100%;
        height: 450px;

    }

    .myslideModal {
        width: 300px;
        height: 450px;

    }

    .dotModal {
        width: 9px;
        height: 9px;
    }

    .active {
       display: inline-block;
    }
 

}



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

    .prev-arrow,
    .next-arrow {
        font-size: 0.7rem;
    }

    .section-first {

        margin-block-start: -60px;

    }

    .ubicacion-item-1 {

        margin-bottom: 25px;

    }



    .ubicacion-item {

        width: 300px;

        height: 250px;

        margin: 0;

    }



    .slider-text h2 {

        font-size: 1.1rem;

    }



    .slideshow__container--text {

        width: 280px;

        height: 300px;

    }



    .text__tx {

        font-size: 15px;

        margin-top: 0px;

    }

    .contenedor__nosotros--img {

        width: 20%;

    }

    .product-item {
        width: 284px;
        height: 380px;
    }

    .product-item h3 {
        font-size: 13px;
    }

    .sliderModal {

        width: 100%;
        height: 430px;

    }

    .myslideModal {
        width: 257px;
        height: 430px;

    }

    .dotModal {
        width: 9px;
        height: 9px;
    }

}



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



    nav {



        top: 250px;



    }

    .card {

        padding: 0.5rem;

    }



    .card h3 {

        font-size: 1rem;

    }



    .card p {

        font-size: 0.8rem;

    }



    .icon-section i {

        font-size: 30px;

    }



    .text__tx {

        font-size: 10px;

        margin-top: 0px;

    }



    .emergencia-info h3 {

        font-size: 0.9rem;

    }



    .slideshow__container--text {

        width: 200px;

        height: 300px;

    }



    .slider-text {

        text-align: center;

    }



    .show .go-top-button {

        width: 2.6rem;

        height: 2.6rem;



    }
    .myslideModal {
        width: 212px;
        height: 430px;

    }

}