@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.swiper-pagination-bullet{
    display: none;
}

/* =========================== */

.appWhatsapp{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
}

.appWhatsapp i{
    font-size: 50px;
    background-color: rgb(40, 216, 40);
    border-radius: 100%;
    color: white;
}

/* =========================== */

.first_div{
    background-color: rgb(51, 133, 255);
    font-family: "Roboto", sans-serif;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.first_one_div, .first_one_div strong{ margin-right: 50px; }
.first_one_div strong{ font-size: 20px; color: white; }
.first_twoo_div{ margin-top: 3px; }
.first_twoo_div a{ margin-right: 20px; color: white; font-size: 23px; }


/* =========================== */

.navbar-nav li{
    font-family: "Roboto", sans-serif;
    color: #000152;
    font-size: 21px;
    font-weight: bold;
    margin-right: 20px;
}

/* =========================== */

.three_div{
    background-image: url(../img/fondoIndex.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 810px;
    position: relative;
}

.first_article{
    position: absolute;
    width: 47%;
    height: 27%;
    display: flex;
    /* border: 1px solid red; */
    bottom: 0;
    right: 0;
    justify-content: center;
    /* margin-bottom: 20px; */
    margin-right: 2%;
}

.first_article section{
    text-align: center;
    width: 23%;
    /* border: 1px solid black; */
    background-color: white;
}

.first_article img{
    /* border: 1px solid red; */
    width: 100%;
    /* margin-bottom: 5%;
    margin-top: 5%; */
}

/* =========================== */

.four_div{ width: 100%; display: flex; height: 120px; }
.four_one_div{ width: 10%; }
.four_one_one_div{ height: 20px; }
.four_one_twoo_div{ background-color: #000152; height: 100px; }

.four_twoo_div{ height: 120px; width: 20%; display: flex; justify-content: center; align-items: center; background-color: rgb(51, 133, 255); }
.four_twoo_one_div{ width: 35%;  height: 120px; }
.four_twoo_one_div i{ color: white; font-size: 120px; margin-left: 5%; margin-top: 0; height: 120px; }
.four_twoo_twoo_div{  height: 120px; width: 65%; }
.four_twoo_twoo_div p{ color: white; font-family: "Roboto", sans-serif; font-size: 23px; width: 85%; margin-left: 5%; font-weight: bolder; }

.four_three_div{ width: 70%; }
.four_three_one_div{ height: 20px; }
.four_three_twoo_div{ background-color: #000152; height: 100px; border: 1px solid #000152; }
.four_three_twoo_div > p{ color: white; width: 95%; margin-top: 25px; font-family: "Bebas Neue", sans-serif; font-size: 32px; margin-left: 5%; letter-spacing: 5px; }

/* =========================== */

/* .five_div,
.five_encapsule_div,
.five_one_div,
.five_twoo_div,
.five_three_div,
.five_three_one_div,
.five_three_twoo_div{ border: 1px solid red; } */

.remodelation{ display: flex; }

.five_div{ width: 100%; height: 800px; }

.five_encapsule_div{
    width: 90%;
    margin-top: 50px;
    height: 700px;
    margin-left: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.five_one_div{ width: 40%; text-align: center; }
.remodelation{ width: 60%; }
.five_twoo_div{ width: 40%; text-align: center; }
.five_three_div{ width: 60%; }

.five_one_div img{ width: 100%; height: 700px; }
.five_twoo_div img{ width: 90% }

.five_three_one_div{
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 5px;
    font-size: 100px;
    color: #000152;
}

.five_three_twoo_div{
    font-family: "Roboto", sans-serif;
    margin-top: 40px;
    font-size: 20px;
}

/* =========================== */

.eight_div{
    width: 100%;
    overflow: hidden;
    background-image: url(../img/portada1_Mesa\ de\ trabajo\ 2_Mesa\ de\ trabajo\ 1.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 1000px;
    text-align: center;
    color: white;
}

.eight_div_incapsule{ width: 80%; height: 80%; margin-left: 10%; }

.eight_div_title{ width: 70%; margin-left: 15%; }
.eight_div_title h1{ font-size: 60px; margin-top: 15%; margin-bottom: 15%; font-family: "Bebas Neue", sans-serif; }
.nine_div{ display: flex; }
.ten_div{ width: 25%; }
.ten_div_left{ margin-left: 4%; }
.ten_div_right{ border-right: thick dashed white; }
.ten_div img{ width: 40%; }
.ten_div p{ font-family: "Roboto", sans-serif; font-size: 30px; margin-top: 10%; margin-left: 5%; margin-right: 5%; }

/* =========================== */

.eleven_div{
    background-color: #f0f9fd;
    display: flex;
    width: 100%;
    height: 830px;
    justify-content: center;
    align-items: center;
}

.eleven_one_div,
.eleven_twoo_div{ width: 45%; }

.eleven_twoo_one_div{
    font-family: "Bebas Neue", sans-serif;
    width: 74%;
    margin-left: 5%;
    font-size: 40px;
    color: #000152;
}

.eleven_twoo_one_div .initial{
    letter-spacing: -5px;
    font-size: 50px;
}

.eleven_twoo_one_div .second{
    letter-spacing: 5px;
}

.eleven_twoo_twoo_div{
    font-family: "Roboto", sans-serif;
    width: 90%;
    margin-left: 5%;
    font-size: 20px;
}

.eleven_one_div img{ width: 100%; height: 100%; }


/* =========================== */

.fourteen_div{ display: flex; width: 100%; height: 830px; }
.fifteen_div, .sixteen_div{ width: 50%; }

/* .fifteen_one_div,
.fifteen_twoo_div,
.fifteen_twoo_one_div,
.fifteen_twoo_twoo_div,
.fifteen_twoo_three_div,
.fifteen_text,
.fifteen_img{ border: 1px solid red; } */

.fifteen_div{ background-color: #ade9fa; }
.fifteen_one_div h1{
    font-family: "Bebas Neue", sans-serif;
    font-size: 60px;
    letter-spacing: 3px;
}
.fifteen_one_div, .fifteen_twoo_div{ width: 85%; margin-left: 12.5%; margin-top: 103px; }

.fifteen_twoo_one_div,
.fifteen_twoo_twoo_div,
.fifteen_twoo_three_div{ display: flex; align-items: center; margin-bottom: 30px; }

.fifteen_img{ width: 15%; margin-right: 20px; }
.fifteen_img img{ width: 100%; height: 100%; }
.fifteen_text{ width: 75%; }
.fifteen_div p{ font-family: "Roboto", sans-serif; font-size: 30px; }

.sixteen_div{
    overflow: hidden;
    background-image: url(../img/mision_vision.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================== */

.facebook{
    letter-spacing: 5px;
    font-family: "Bebas Neue", sans-serif;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 10%;
}

.container{
    max-width: 1600px;
    margin: auto;
    padding: 0 15px;
    /* border: 1px solid black; */
}

.testimonials{
    padding: 100px 0;
    /* border: 1px solid black; */
    background: linear-gradient(to right, hsl(186, 98%, 37%), hsl(170, 100%, 40%));
}

.testimonials-item{
    padding: 30px;
    border-radius: 30px;
    background-color: white;
    /* border: 1px solid black; */
}

.testimonials-item .info{
    display: flex;
    align-items: center;
    /* border: 1px solid black; */
}

.testimonials-item img{
    max-width: 80px;
    border-radius: 50%;
    margin-right: 20px;
    vertical-align: middle;
    /* border: 1px solid black; */
}

.testimonials-item .name{
    font-size: 24px;
    text-transform: capitalize;
    font-weight: 600;
    color: hsl(0, 0%, 0%);
    line-height: 1.2;
    /* border: 1px solid black; */
}

.testimonials-item .job{
    text-transform: capitalize;
    color: hsl(0, 0%, 40%);
    /* border: 1px solid black; */
}

.testimonials-item p{
    margin-top: 20px;
    color: hsl(0, 0%, 40%);
    /* border: 1px solid black; */
}

.testimonials-item .rating{
    margin-top: 15px;
    font-size: 14px;
    color: hsl(36, 88%, 66%);
    /* border: 1px solid black; */
}

/* =========================== */

.title-blog{ letter-spacing: 5px; font-family: "Bebas Neue", sans-serif; margin-top: 100px; margin-bottom: 100px; }
.blog{ display: flex; justify-content: center; }
.card{ align-items: center; width: 30%; }
.card img{ width: 85%; height: 350px; }
.card-body{ width: 85%; font-family: "Roboto", sans-serif; }
.card-body h5{ margin-top: 15px; margin-bottom: 15px; }

/* =========================== */

@media screen and (max-width: 1824px){
    .four_three_twoo_div > p{
        margin-top: 0;
    }
}

@media screen and (max-width: 1724px){
    .first_article{
        height: 25%;
    }

    .four_twoo_twoo_div p{
        width: 100%;
        font-size: 20px;
    }
}

@media screen and (max-width: 1588px){
    .first_article{
        height: 22%;
    }
}

@media screen and (max-width: 1408px){
    .first_article{
        height: 20%;
    }

    .four_twoo_one_div i{
        margin-left: 0;
        font-size: 95px;
    }

    .four_twoo_twoo_div p{
        font-size: 15px;
    }
}

@media screen and (max-width: 1234px) {
    .first_article{
        height: 16.5%;
    }
}

@media screen and (max-width: 1186px) {
    .first_div,
    .first_article,
    .sixteen_div{
        display: none;
    }
}

@media screen and (max-width: 810px){
    .four_div{
        display: none;
    }

    .three_div{
        background-image: url(../img/imagen\ responsive\ portada.jpg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 603px;
    }

    .five_one_div,
    .four_three_div,
    .five_div,
    .five_three_div{
        width: 100%;
    }

    .four_three_twoo_div > p{ margin-top: 0; }
    .five_div{ height: 1400px; }
    .five_one_div img{ width: 90%; }
    .remodelation{ margin-top: 10%; width: 103%; }
    .five_twoo_div img{ margin-top: 44%; }

    .five_encapsule_div{
        display: block;
        width: 95%;
        height: 100%;
        text-align: center;
        margin-left: 10px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .five_three_div{
        margin-top: 30px;
        width: 95%;
        margin-left: 10px;
        text-align: justify;
    }

    /* ===================== */

    .eight_div{ height: 2500px; }
    .eight_div_incapsule{ margin-left: 0; margin-bottom: 0; height: 100%; }
    .eight_div_title{ width: 100%; margin-left: 0; }
    .nine_div{ display: block; }
    .eight_div,
    .eight_div_incapsule{ width: 100%; }

    .ten_div{
        margin-top: 40px;
        margin-left: 0;
        width: 100%;
        border-bottom: thick dashed white;
        border-right: 0;
    }

    /* ===================== */

    .eleven_div{
        height: 1500px;
        border: 1px solid #f0f9fd;
        display: block;
        text-align: center;
    }

    .eleven_one_div,
    .eleven_twoo_div{ margin-top: 30px; }

    .eleven_div,
    .eleven_one_div,
    .eleven_twoo_div,
    .eleven_twoo_twoo_div{ width: 100%; margin-left: 0; }

    .eleven_twoo_one_div{ width: 80%; margin-left: 10%; }

    .eleven_twoo_twoo_div{
        margin-top: 30px;
        text-align: justify;
        width: 95%;
        margin-left: 2.5%;

    }

    /* ===================== */

    .fourteen_div,
    .fifteen_div,
    .fifteen_one_div{ width: 100%; margin-left: 0; }
    .fourteen_div{ height: 1300px; }
    .fifteen_div{ height: 100%; display: block; text-align: center; }
    .fifteen_twoo_one_div,
    .fifteen_twoo_twoo_div,
    .fifteen_twoo_three_div{ display: block; }
    .fifteen_twoo_div{ margin-left: 0; width: 100%; }
    .fifteen_img{ width: 100%; margin-bottom: 15px; }
    .fifteen_img img{ width: 25%; }
    .fifteen_text{ width: 100%; }

    /* ===================== */

    .title-blog{ margin-top: 50px; margin-bottom: 50px; }
    .blog{ display: block; }
    .card{ width: 100%; }
}

@media screen and (max-width: 428px){
    .three_div{
        background-image: url(../img/imagen\ responsive\ portada.jpg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 325px;
    }

    .four_div, .four_three_div, .four_three_twoo_div{ height: 200px;}

    .five_div{ border: 1px solid #f0f9fd; height: 2000px; }
    .remodelation{ display: block; }
    .five_twoo_div{ width: 85%; }
    .five_twoo_div img{ margin-top: 0;}
    .five_three_one_div{ text-align: center;}

    .eight_div{ height: 1800px; }

    .eleven_twoo_one_div{ width: 100%; margin-left: 0; }
}