/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/*, ::after, ::before {
    box-sizing: initial;
}*/
:root {
    --main-red: #cc0000;
    --main-black: #000000;
    --main-white: #ffffff;
    --main-darkgray: #303030;
    --main-gray: #444444;
    --main-lightblue: #e6f1ff;
    --main-lightblue-second: #42c5ff;
    --main-blue: #77a0f2;
    --main-dark-blue: #0d75ff;
    --main-lightgray: #EDEDED;
    --secondary-red: #AE0E3A;
    --shadow-boxes: 0px 0px 3px 0px rgba(23,23,23,0.7);
    --gradient-dgray: linear-gradient(90deg, rgba(23,23,23,1) 0%, rgba(68,68,68,1) 100%);
    --border-radius-base: 10px;
}

html {
    scroll-behavior: smooth;
}

.intro-secction h1 {
    font-size: 3em;
    margin: 10px 0px;
    color: var(--main-gray);
}

/*.intro-secction h2 {
    color: var(--main-lightblue);
    font-size: 16px;
}*/


.titol {
    width: 800px;
    margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
}

.wrapper {
    width: 800px;
    margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
}

.titol h1 {
    text-align: center;
}


.canvas {
    display: block;
    background-color: rgba(255, 255, 255, 0.00);
    max-width: 0px;
}

.dom_overlay_container {
    pointer-events: none;
    overflow: hidden;
    width: 360px;
    height: 360px;
    display: block;
}

.intro-section-bg {
    background-color: var(--main-white);
    padding: 1% 2%;
}

.intro-secction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1% 1%;
    margin: 2% 0;
}

.intro-secction-title-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 75%;
}

.intro-secction .container-spacing {
    width: 90%;
    margin: 2rem 0;
    border-bottom: 1px solid var(--main-blue);
}

.intro-secction h1 {
    text-align: left;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 2%;
}

.intro-secction h2 {
    color: var(--main-dark-blue);
    text-align: left;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 2%;
}

.intro-secction p {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 4%;
}

.intro-card-container {
    width: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2%;
}

.intro-card {
    color: var(--main-darkgray);
    width: 32.5%;
    background: var(--main-white);
    min-height: 42em;
    /* background: rgb(230,241,255);
    background: linear-gradient(0deg, rgba(230,241,255,1) 0%, rgba(255,255,255,1) 15%);*/
}

    .intro-card h3 {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 3.5em;
        font-size: 24px;
        font-weight: bold;
        text-transform: uppercase;
        /*border: 1px solid black;*/
        color: var(--main-black);
        /*background: var(--main-lightblue);*/
        /*border-top: 1px solid var(--main-blue);*/
        /*background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(230,241,255,1) 100%);*/
    }

.div-contact-href, div_button_container {
    display: flex;
    justify-content: end;
    align-items: start;
    margin: 1%;
}

.button-main {
    width: auto;
    background: #0d75ff;
    border: 1px solid #1d44cb;
    font-size: 15px;
    padding: 0.3em 1.4em;
    color: var(--main-white);
    transition: all 0.2s ease-in-out;
    font-weight: bold;
}

    .button-main:hover {
        background: var(--main-white);
        color: var(--main-blue);
        border: 1px solid var(--main-dark-blue);
        box-shadow: none;
    }

.category-section-bg {
    background: var(--main-white);
    background-size: 100% 100%;
    background-position: center;
    padding: 1% 5%;
    list-style-type: none;
}

.category-card h3 {
    font-size: 25px;
    color: var(--main-dark-blue);
    padding: 2%;
    width: 100%;
    margin: 3%;
    font-weight: bold;
}

.category-card p {
    text-align: justify;
}

.category-secction-img-last {
    width: 33%;
    height: auto;
    object-fit: contain;
}

.category-secction-img {
    /* scroll-snap-align: center; */
    width: 100%;
    height: 200px;
    /* height: auto; */
    /* min-height: 330px;*/
}

.category-secction-img-left {
    width: 33%;
    height: auto;
}

.category-secction-img-right {
    width: 100%;
    object-fit: contain;
    height: auto;
    display: none
}

.category-card {
    width: 50%;
    color: var(--main-black);
    margin: 2%;
    /*background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 30%, rgba(230,241,255,1) 100%);*/
}

.category-card-container {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.second-secction {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: auto;
}
/*PASAR LA IMAGEN A COLOR NEGRO*/
.secction2-bg {
    padding: 3%;
    /* background: url("/Images/circle-bg-cards_vect.png");
    background-size: 97% 100%;  */
}

.secction2-bg-red {
    padding: 3%;
    background: url("/Images/circle-bg-cards_red.png");
    background-size: 97% 100%;
}
/*MOBILE RESPONSIVE*/

.second-secction p {
    /*box-shadow: var(--shadow-boxes);*/
}

.secction2-h2-container {
    display: flex;
    /*  gap: 40%; */
    flex-flow: column nowrap;
    place-content: stretch flex-start;
    align-items: center;
    width: 90%;
    padding: 2% 1%;
    color: white;
    background-color: var(--main-lightblue-second);
    /*border: 1px solid var(--main-darkgray);*/
}

.secction2-h2 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 27px;
    text-align: center;
    color: var(--main-black);
    margin: 0;
}

.secction2-h2-container img {
    height: 25px;
    margin-top: 2%;
}

.secction2-h3 {
    color: var(--main-darkgray);
    padding: 3% 2% 2% 3%;
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
}

.secction2-svg {
    color: var(--main-darkgray);
}

.second-secction-p-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 90%;
    border-bottom: 1px solid var(--main-dark-blue);
}

.secction2-p {
    padding-left: 0.5em;
    width: 100%;
    color: var(--main-darkgray);
    margin-top: 1em;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 13px;
    text-align: justify;
}

.item-s2-container {
    display: flex;
    width: 50%;
    padding: 1%;
    margin: 2%;
}

    .item-s2-container p {
        padding: 0 8%;
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
        line-height: 1.5em;
        text-align: center;
        background-color: white;
    }

.form-container-category {
    display: flex;
    color: black;
    flex-direction: column;
    width: 100%;
    /*box-shadow: var(--shadow-boxes);
    background: var(--main-lightblue);
    background-size: 100% 100%;*/
}

.form-container-contact {
    display: flex;
    color: black;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /*box-shadow: var(--shadow-boxes);
    background: var(--main-lightblue);
    background-size: 100% 100%;*/
}

.img-scction-container {
    min-height: 209px;
}

.form-container {
    display: flex;
    color: black;
    padding: 1%;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    margin: auto;
    width: 75%;
    /* box-shadow: var(--shadow-boxes); */
    background: var(--main-lightblue);
    background-size: 100% 100%;
}

}

.form-container .button-main {
    background: var(--main-white);
    border: 1px solid var(--main-darkgray);
    width: 50%;
    margin-top: 3%;
}

.form-container input[type=checkbox], input[type=radio],
.form-container-contact input[type=checkbox], input[type=radio],
.form-container-category input[type=checkbox], input[type=radio] {
    accent-color: var(--main-lightblue);
    display: inline-flex !important;
}

.category-secction-bg {
    padding: 3% 3% 0 3%;
    background: var(--main-white);
}

.category-secction {
    margin: 2%;
    padding: 5% 5% 0 5%;
    background: #ffffffe6;
}


.category-section-title-container {
    display: flex;
    justify-content: center;
    color: var(--main-white);
    background-color: var(--main-gray);
    width: 40%;
    padding: 1%;
    box-shadow: var(--shadow-boxes);
}

.category-secction h3 {
    text-transform: uppercase;
    font-weight: 500;
    color: var(--main-darkgray);
    padding: 1% 1% 1% 0;
    font-size: 30px;
    color: var(--main-dark-blue);
    font-weight: bold;
}

.category-secction hr {
    color: var(--main-blue);
}

.category-secction h4 {
    width: auto;
    font-size: 18px;
    margin: 0;
}

.div_button_container .button-main {
    margin: 0 !important;
}

#logo {
    border-bottom: 4px solid #000000;
    padding: 20px;
}

.title-container {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 2% 25%;
    margin: 2% 0;
}

    .title-container h4 {
        text-align: center;
        width: 75%;
        padding: 2%;
        border: 1px solid #505050;
        background-color: #d8d6d6
    }

.form-submit {
    width: 100%;
    min-height: 46px;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: start; */
    border: 1px solid var(--main-darkgray);
    /* padding: 1em; */
    color: var(--main-white);
    background-color: var(--main-dark-blue);
    margin-top: 2%;
    margin-bottom: 2%;
}

    .form-submit:hover {
        border: 1px solid var( --main-white);
        color: var(--main-white);
        background: var( --main-dark-blue);
    }

.form-checkbox {
    width: 35%;
    border-radius: 5px;
    min-height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var( --main-dark-blue);
    /*padding: 1em;*/
    color: var(--main-darkgray);
    background: linear-gradient(to left, var(--main-white) 50%, var(--main-dark-blue) 50%);
    background-size: 200% 200%;
    background-position: right bottom;
    margin-top: 2%;
    transition: all 0.2s ease-in-out;
}

.form-checkbox-checked {
    width: 35%;
    border-radius: 5px;
    min-height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var( --main-dark-blue);
    /*padding: 1em;*/
    color: var(--main-white);
    /*box-shadow: var(--shadow-boxes);*/
    background: linear-gradient(to right, var(--main-dark-blue) 50%, var(--main-white) 50%);
    background-size: 200% 200%;
    background-position: left bottom;
    margin-top: 2%;
    transition: all 0.2s ease-in-out;
}

input[type=checkbox], input[type=radio] {
    accent-color: red;
    margin-top: 2%;
    display: none !important;
}

.snap-y-section {
}

.services-section {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5% 5% 1% 5%;
    /*  overflow: scroll;
    scroll-snap-type: y mandatory;*/
}

.soft-skills-section {
    flex-wrap: nowrap;
}

.animation-banner {
    display: block;
    margin: auto;
}

.animation-banner-mobile {
    display: none;
}

.animations-form {
    width: 293px;
    height: 330px;
}

.animations-form2 {
    width: 200px;
    height: 250px;
}

.herramientas-section {
    display: flex;
    padding: 1%;
    gap: 6vw;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}

.row-to-column {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 1% 5% 5% 5%;
}

    .row-to-column h5 {
        font-size: 27px;
    }

@media all and (max-width: 800px) {

    .second-secction-p-container {
        display: flex;
        color: var(--main-black);
        flex-direction: column;
        justify-content: start;
    }

    .secction2-h2-container {
        padding: 2%;
    }

    .secction2-h2 {
        font-size: 18px;
    }

    .wrapper {
        width: 360px;
        margin-right: auto;
        margin-left: auto;
    }

    .item-s2-container p {
        text-align: center;
    }

    .intro-secction {
        padding: 0.2%;
        margin: 0.5%;
        width: 100%;
    }

        .intro-secction h1 {
            text-align: center;
        }

        .intro-secction h2 {
            text-align: center;
            margin-top: 4%;
        }

    .intro-secction-title-container {
        width: 100%;
    }

    .div-contact-href {
        margin: 4% auto;
    }

    .second-secction {
        flex-wrap: wrap;
    }

    .item-s2-container {
        width: 100%;
    }

    .intro-card-container {
        flex-direction: column;
    }

    .intro-card {
        width: 100%;
        margin-top: 4%;
    }

    .consultoria-h1 {
        font-size: 18px;
    }

    .services-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .category-card {
        width: 100%;
    }

        .category-card h3 {
            padding: 3%;
            font-size: 24px;
        }

    .category-secction-img-last {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .category-secction-img {
        width: 100%;
        /*height: auto;*/
        object-fit: contain;
        /*scroll-snap-align: center;*/
    }

    .category-secction-img-left {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: none;
    }

    .category-secction-img-right {
        display: block;
    }

    .soft-skills-section {
        flex-wrap: wrap;
    }

    .animations-form {
        width: 225px;
        height: 270px;
    }
    /*.animations-form2 {
        width: 225px;
        height: 270px;
    }*/
    .row-to-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2%;
    }

    .animation-banner {
        display: none;
    }

    .animation-banner-mobile {
        display: block;
        max-width: 100%;
    }

    .herramientas-section {
        flex-wrap: wrap;
    }
}