@import url(component.css);

body {
    width: 100%;
    height: 100vh;
    background-color: var(--bg-general);
    font-family: var(--text-general);
}

nav {
    position: fixed;
    z-index: 1;
    background-color: #2a0966a2;
    backdrop-filter: blur(14px);
    width: 100%;
    display: flex;
}

nav .menu {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

ul {
    width: 100%;
    align-items: center;

    li {
        list-style: none;
    }
}

nav .logo {
    margin-left: 1.5rem;

    a {
        color: white;
        text-decoration: none;
        font-family: var(--text-general);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            filter: drop-shadow(0 1px 15px rgba(255, 255, 255, 0.6));
        }

        span {
            margin-left: -0.8rem;
            font-size: 1.5rem;
        }
    }
}

.nav__item {
    width: 100%;
    height: 3rem;
    text-align: center;
    order: 3;
    position: relative;
    display: none;
    z-index: 1;


    a {
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        color: #ffffff;
        font-weight: 500;
        width: 100%;
        height: 100%;
        transition: all 2s ease;

        &:hover {
            cursor: pointer;
        }
    }
}

.toggle {
    width: 20%;
    order: 1;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.active {
    display: block;

}

/*Termina barra de navegacion y comienza presentacion*/
.presentacion {
    width: 100%;
    height: 100vh;

    .background {
        position: absolute;
        width: 100%;
        height: 100vh;

        video {
            width: 100%;
            height: 100vh;
            object-fit: cover;
        }
    }

    .present {
        padding: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .information {
        /* background-color: #2a09665d; */
        /* backdrop-filter: blur(14px);
        border-radius: 5px; */
        /* margin: auto; */
        z-index: 2;
    }

    .information .p1 {
        width: auto;
        margin: auto;
        color: rgb(224, 214, 214);
        font-size: 1.4rem;
        margin-bottom: 2rem;
    }

    .information .p2 {
        width: auto;
        margin: auto;
        color: rgb(255, 255, 255);
        font-weight: bold;
        font-size: 2rem;
        letter-spacing: 4px;

        span {
            color: red;
            text-shadow: white 1px 1px 1px;
        }
    }

    .information .p3 {
        width: auto;
        margin: auto;
        color: rgb(255, 255, 255);
        font-weight: bold;
        font-size: 1.5rem;
    }

    .information .presentacion-pdf {
        margin-top: 1rem;
        background-color: rgba(17, 0, 255, 0.466);
        color: rgb(0, 0, 0);
    }

    .information a {
        width: max-content;
        color: #ffffff;
        padding: .5rem 1.5rem;
        font-size: 1.2rem;
        font-weight: 600;
        cursor: pointer;
        display: block;
        margin: auto;
        text-decoration: none;
        transition: all 1s ease;
        background-color: red;
        backdrop-filter: blur(14px);
        border-radius: .2rem;

        &:hover {
            background-color: rgb(255, 255, 255);
            color: #000000;

        }
    }

    .divisor {
        position: absolute;
        width: 100%;
        height: 8rem;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #2a0966a2;
        backdrop-filter: blur(14px);
    }
}



article .information {
    background-color: #ffffff00;

    padding: 1rem;

}

article .information p {
    font-family: var(--text-general);
}



.divisor-productos {
    width: 100%;
    height: 10rem;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(to right, #00030f, #00051b, #00051b, #00051b, #00051b, #000620, #010528, #000217, #000217);

    p {
        font-size: 1.5rem;
        font-family: var(--text-general);
        color: white;
        font-weight: regular;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .p1 {
        font-weight: bold;
    }
}


.divisor p {
    font-size: 1rem;
    font-family: var(--text-general);
    color: white;
    font-weight: regular;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;

    &.p1 {
        font-weight: bold;
    }
}

.about {
    margin: auto;
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 0 .5rem;
}

article .acerca {

    .information {
        background: url('../src/img/binario.jpg');
        background-position-y: 29%;
        color: white;
        border-radius: 12px;
        margin-bottom: 2rem;
    }
}

article .present .information .p1-about {
    text-align: justify;
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

article .present .information .p3-about {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.1rem;
}

/*Termina historia y comienza mision y vision*/

.informacion {
    display: flex;
    flex-direction: column;
    background-color: #000000;
}

.informacion .informacion__mision,
.informacion__vision {
    padding: 2rem;
    padding-top: 0;
    border: solid 1px rgba(160, 160, 160, 0.178);
}

.informacion__mision__titulo,
.informacion__vision__titulo {
    text-align: center;
    font-size: 1rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.informacion__mision__titulo b,
.informacion__vision__titulo b {
    color: var(--text-titulos);
    font-size: 2rem;
    color: var(--bg-color-principal);
}

.informacion__mision__descripcion,
.informacion__vision__descripcion {
    font-size: 1rem;
    padding: 15px;
    text-align: justify;
    color: var(--text-titulos);
}

.descripcion {
    li {
        font-size: .9rem;
        margin-bottom: .5rem;
        list-style: none;
    }
}



/*Termina informacion comienza servicios*/

.present-services {
    flex-direction: column;
    height: auto;
    /* padding: 2rem; */
}

.present-products {
    background-color: #33B5FF;
    background: url('/src/img/kaxan_principal.jpg');
    background-size: 100% 100%;
    height: 90vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.information-products {
    font-size: 2rem;
    color: white;
    text-align: center;

    .p2-kaxan {
        font-family: "Tac One", sans-serif;
        font-weight: bolder;
        font-style: normal;
        color: white;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.158);
        -webkit-text-stroke: 2px rgb(255, 255, 255);

    }
}

.present-services header {
    width: 90%;
    margin: auto;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
}

.present-services header p {
    font-size: 1.2rem;
    font-family: var(--text-general);
    font-weight: regular;
    text-align: center;
}

.present-services header .subtitle {
    font-weight: bold;
}

.present-services header .subtitle span {
    color: rgb(10, 8, 99);
}

.present-services .services {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 .5rem;
}

.present-services .services .tarjeta {
    width: 20rem;
    height: auto;
    margin: auto;
    margin-bottom: 5rem;
    border-radius: 1.5rem;
    box-shadow: rgb(67 62 62 / 59%) 1px 1px 15px;
    /* box-shadow: rgb(224, 224, 224) 1px 1px 15px; */
    cursor: pointer;
    transition: all 1s ease;

    &:hover {
        background-color: #2a0966;
        color: white;
        transition: all 1s ease;

        .descripcion {
            color: white;
        }

        a {
            background-color: white;
            color: #000000;
        }
    }
}

.services .tarjeta img {
    height: 15.6rem;
    width: 100%;
    border-radius: 1rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: black;
    mask-image: linear-gradient(rgb(255, 255, 255, 100%), rgb(255, 255, 255, 100%), transparent);
}

.services .tarjeta .title {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0rem;
    font-size: 24px;
}

.tarjeta .title .service-tarjeta {
    font-weight: bold;
}

.tarjeta .descripcion {
    padding: 1rem;
    padding-bottom: 0;
    text-align: justify;
    color: var(--text-titulos);
    font-size: 1rem;
    height: 20vh;

    & b {
        color: var(--bg-color-principal);
    }
}

.tarjeta .boton-container {
    height: auto;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: end;
    font-size: 1rem;
}

.boton-container a {
    background-color: var(--bg-color-principal);
    width: max-content;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: white;
    text-decoration: none;
    border-radius: 1rem;
    transition: all 1s ease-out;
    background-color: rgb(5, 3, 124);
}

.services .dominio {
    width: 100%;
    /* border-radius: 1.5rem; */
    box-shadow: rgb(224, 224, 224) 1px 1px 15px;
    transition: all 1s ease;
    background: url(./../src/img/icebergs-ocean.jpg);
    margin-bottom: 4rem;



    .search {
        height: 20vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        p {
            text-align: center;
            color: white;
            font-weight: 600;
            margin-bottom: 1.2rem;
        }

        .input {
            display: flex;

            width: 80%;
            flex-direction: column;
            margin-top: .5rem;
            /* margin-bottom: 2rem; */


            input {
                width: 100%;
                margin: auto;
                margin-bottom: 1.5rem;
                font-size: 1rem;
                padding-top: .5rem;
                padding-bottom: rem;
                text-align: center;
                background: transparent;
                color: white;
                border: none;
                border-bottom: solid white 1.5px;
                /* box-shadow: rgb(207, 207, 207) 1px 1px 5px; */

                &:focus-visible {
                    outline: none;
                }

                &::placeholder {
                    color: white;
                }
            }

            button {
                width: max-content;
                margin: auto;
                background-color: #2a0966;
                color: white;
                padding: .5rem 1rem;
                border: none;
                border-radius: .8rem;
                font-family: var(--text-general);
                transition: all 1s ease;

                &:hover {
                    background: black;
                    color: white;
                }
            }
        }
    }
}

.services-second {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 .5rem 0 .5rem;
    /* margin: 2rem 5rem 0 5rem; */

    .tarjeta {
        /* width: 20rem; */
        background-color: #f7f7f759;
        backdrop-filter: blur(14px);
        margin: auto;
        margin-bottom: 3rem;
        border-radius: 1rem;
        box-shadow: #00a2ff8c 1px 1px 6px;

        img {
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
        }

        .title {
            position: absolute;
            color: white;
            margin-top: -170px;
            padding-top: 1rem;
            padding-bottom: 1rem;
            font-size: 2rem;
            text-align: center;
            background-color: #ffffff21;
            backdrop-filter: blur(5px);
            width: 100%;
        }
    }

}

.service-import {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url('./../src/img/background_kaxan.jpg') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    mask-image: linear-gradient(to top, #f5f5f5, #f5f5f5, #f5f5f5, transparent);


    .present {
        height: auto;
        padding: 4rem 1rem;
        box-shadow: rgb(245, 245, 245) 1px 1px 155px 10px;
        border-radius: .5rem;
        backdrop-filter: blur(6px);
        width: 60%;
       
        box-shadow: #2a0966b2 1px 1px 55px;
        color: white;
        transition: all 1s ease-in;

        &:hover {

            backdrop-filter: blur(4px);

            .p2-kaxan {
                font-family: "Tac One", sans-serif;
                font-weight: bolder;
                font-style: normal;
                color: white;
                -webkit-text-fill-color: rgba(255, 255, 255, 0.158);
                -webkit-text-stroke: 2px rgb(255, 255, 255);
            }

            .kaxan-btn {
                background-color: white;
                color: black;
                transition: all 1s ease;
            }


        }


    }
}

.p3-kaxan {
    text-align: justify;
    font-size: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 1rem;
    z-index: 3;
}

.p2-kaxan {
    font-size: 5rem;
    font-weight: bold;
    padding-left: 2rem;
    padding-right: 2rem;

    margin: 2rem 0;
    font-family: "Tac One", sans-serif;
    font-weight: bolder;
    font-style: normal;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px rgb(255, 255, 255);
    transition: all 1s ease;

}


.p1-kaxan {
    font-size: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.present p span {
    color: var(--bg-color-principal);
}

.kaxan-btn {
    background-color: rgba(255, 255, 255, 0.541);
    backdrop-filter: blur(14px);
    width: max-content;
    padding: .5rem 2rem;
    color: rgb(0, 0, 0);
    text-decoration: none;
    border-radius: 1rem;
    font-size: 1rem;
    height: auto;
    margin: auto;
    text-align: center;
    cursor: pointer;
    transition: all 1s ease;
    display: flex;
}





.form {
    height: 100vh;
    display: flex;
    flex-direction: column;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.form .question {
    width: 100%;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}


.question span {
    color: #2a0966;
}

.contacto {
    width: 100%;
    min-width: 18rem;
    max-width: 25rem;
    height: auto;
    display: flex;
    flex-direction: column;
    text-align: left;
    background-color: rgb(241, 241, 241);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 1px 1px 5px rgba(119, 119, 119, 0.685);

    label {
        font-size: 13px;
        margin-top: .2rem
    }

    input {
        width: 100%;
        padding-top: .2rem;
        margin-bottom: .5rem;
        padding-bottom: .5rem;
        border: none;
        border-radius: 5px;
        padding-left: 5px;

        &:focus-visible {
            outline: none;
        }
    }

    textarea {
        width: 100%;
        height: 20vh;
        resize: none;
        margin-bottom: .5rem;
        border: none;
        border-radius: 5px;
        padding-left: 5px;

        &:focus-visible {
            outline: none;
        }
    }

    button {
        border: none;
        background-color: #000000;
        color: white;
        margin-top: 1rem;
        padding: .8rem;
        font-size: 16px;
    }

}

footer {
    font-size: .9rem;
    display: flex;
    flex-wrap: wrap;
    background: url('../src/img/binario.jpg');
    background-position-y: 80%;
    background-position-x: 50%;
    color: white;
}

footer .contacto__footer {
    width: calc(100% - 2rem);
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 2rem;
}

.contacto__footer a {
    text-decoration: none;
    color: var(--bg-general);

    &:hover {
        color: #ffea2e;
    }
}

footer .contacto__footer_redes {
    width: calc(100% - 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer .title {
    font-weight: bold;
}

footer p span {
    color: var(--bg-general);
}

.contacto__footer p {
    color: rgb(255, 255, 255);
    text-align: justify;
    padding: .5rem;
}

.contacto__footer_redes ul {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contacto__footer_redes ul li {
    padding: .1rem;
}

.contacto__footer_redes ul li a {
    text-decoration: none;
    color: var(--bg-general);
    font-size: .9rem;

    &:hover {
        color: #ffea2e;
    }
}

.footer-copyright {
    width: 80%;
    margin: auto;
    padding-top: 1rem;
    color: rgb(255 255 255);
    text-align: center;
    font-style: italic;
    font-size: .8rem;

    & a {
        color: var(--bg-general);
        text-decoration: none;
    }

    & a:hover {
        color: var(--text-titulos);
    }
}



@media all and (min-width:768px) {
    .divisor p {
        font-size: 1.2rem;
    }

    .present-services .services {
        justify-content: space-evenly;

        .dominio {
            width: 95%;
            height: 34vh;
            display: flex;
            justify-content: center;
            align-items: center;

            p {
                font-size: 22px;
            }

            .search .input>input {
                width: 100%;
                font-size: 20px;
            }
        }

    }

    .services-second {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .present-services .services .tarjeta {
        width: 45%;
    }

    .present .information .p3-kaxan {
        text-align: center;

    }

    .present .p2-kaxan {
        font-size: 4rem;
    }

    .form {
        width: 80%;
        margin: 4rem auto;

        .present {
            width: 100%;
            display: flex;
            justify-content: center !important;
        }
    }

    .informacion .informacion__mision,
    .informacion__vision {
        height: 15rem;
    }
}

@media all and (min-width:1024px) {

    nav {
        .logo {
            position: absolute;
            width: 20%;
            height: auto;
            left: 0;
        }

        .menu {
            flex-wrap: nowrap;
            justify-content: end;
        }

        .nav__item {
            display: block;
            height: auto;
            width: max-content;
            padding: 1.5rem 0rem;

            a {
                padding: 1.5rem;
                transition: all 2s ease;

                &:hover {
                    background-color: #ffffff31;
                    backdrop-filter: blur(14px);
                    cursor: pointer;
                    color: rgb(255, 255, 255);
                }
            }
        }

        .toggle {
            display: none;
        }

    }

    .divisor {
        background-position: 0;
    }

    .information {
        width: 70%;
        margin: auto;
        margin-top: 2rem;
    }

    article .present .information .p3-about {
        text-align: center;
        font-size: 1.4rem;
    }

    article {
        .present {
            width: 100%;
        }

        .ilustracion {
            display: block;
            padding-left: 1.5rem;

            & img {
                display: block;
                border-radius: 1rem;
                height: 25rem;
            }
        }
    }

    .about {


        .present {
            width: 100%;
        }

        .informacion {

            justify-content: space-evenly;

        }


    }

    .present-services .services {
        justify-content: space-around;
        column-gap: 2rem;
    }

    .services-second {
        .tarjeta {
            width: 20rem;


            .descripcion {
                height: auto;
            }
        }
    }

    #services {
        font-size: 1.8rem;
    }

    .service-import {

        .present {
            width: 100%;
        }

        .boton-container {
            padding: 0;
        }
    }

    article {
        .ilustracion {
            width: 50%;
            height: auto;
        }

        .present .information .p3-kaxan {
            text-align: left;
            padding: 0;
        }
    }


    .form {
        width: 60%;
    }

    footer {
        flex-direction: row;
        justify-content: space-evenly;
        padding: 0 3rem;

        .contacto__footer {
            width: 45%;
        }

        .contacto__footer_redes {
            width: 45%;
        }

        .footer-copyright {
            width: 100%;
        }
    }

    .informacion .informacion__mision,
    .informacion__vision {
        height: 20rem;
    }
}

@media all and (min-width:1280px) {

    .presentacion {
        height: 100vh;


        .present {
            height: 100%;
            align-items: center;

            .information {
                margin-left: 7rem;
            }
        }
    }

    article {

        .present .p1 {
            font-size: 1.5rem;
        }

        .present .p2 {
            font-size: 3rem;
        }

        .present .p3 {
            font-size: 3rem;
        }

        .present .p4 {
            font-size: 1rem;
        }

        .botones {
            justify-content: start;
        }
    }

    .about {}

    .divisor {
        height: 15rem;

        p {
            font-size: 1.8rem;
        }
    }

    .present-services {
        header {
            height: 200px;
        }
    }

    /* .tarjeta .descripcion {
        height: 12rem;
    } */

    .informacion .informacion__mision,
    .informacion__vision {
        height: 18rem;
    }
}

@media all and (min-width:1700px) {
    .dominio {
        width: 100%;
    }

    .p3-kaxan {
        text-align: center;

    }



    .presentacion .present {
        align-items: center;

        .information {
            margin-top: auto;

            a {
                display: flex;
                justify-content: start;
                margin: 0;
                margin-left: 15rem;
            }
        }
    }

    .present-services .services {
        justify-content: space-around;
        padding: 0rem 8rem;
        padding-bottom: 4rem;

        .tarjeta {
            width: 18rem;
        }
    }

    article {
        .present {
            width: 100%;
            /* height: 90vh; */
        }
    }

    .tarjeta .descripcion {
        height: auto;
        margin-bottom: 1rem;
    }

    .form .present {
        width: 100%;
    }
}

@keyframes parpadeo {
    0% {
        text-shadow: white 3px 1px 1px;
    }

    100% {
        text-shadow: white 1px 1px 1px;
    }
}

@keyframes cambioColor {
    0% {
        background: linear-gradient(45deg, rgba(0, 0, 255, 0.87), rgba(255, 0, 0, 0.87)) 30;
    }

    25% {
        background: linear-gradient(45deg, rgba(17, 20, 223, 0.651), rgba(20, 218, 63, 0.87)) 30;
    }

    50% {
        background: linear-gradient(45deg, rgba(223, 17, 17, 0.651), rgba(20, 178, 218, 0.87)) 30;
    }

    75% {
        background: linear-gradient(45deg, rgb(223, 17, 17), rgb(20, 211, 218)) 30;
    }

    100% {
        background: linear-gradient(45deg, rgb(246, 250, 7), transparent, transparent) 30;
    }

}

@keyframes ShadowDS {
    0% {
        text-shadow: 3px 1px 15px rgb(187, 8, 8);
    }

    25% {
        text-shadow: 4.5px 1px 15px rgba(187, 8, 8, 0.719);
    }

    50% {
        text-shadow: 6px 1px 15px rgb(215, 230, 15);
    }

    75% {
        text-shadow: 9px 1px 15px rgb(187, 8, 8);
    }

    100% {
        text-shadow: 12px 1px 15px rgb(187, 8, 8);
    }
}