/* Estilos de la página Sobre Nos */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HEADER INICIO*/
div.header {
    max-width: 100%;
    height: 477px;
    border-radius: 4px;
    background-image: url("../img/header_img3.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.row {
    display: flex;
    justify-content: center;
}

section.sobre-nos {
    display: flex;
    max-width: 100%;
    height: 530px;
}

.sobre-nos-text {
    display: flex;
    justify-content: flex-start;
    margin: 122px 0px 0px 0px;
    width: 40%;
    height: 29px;

     font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;

    color: #000000;
}

.img4 {
    position: relative;
    display: flex;
    justify-content: center;
    width: 539px;
    height: 390px;
    margin: 78px 0px 0px 70px;
    background-image: url("../img/img4.png");
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 4px;
}

.parrafos {
    width: 508px;
    height: 238px;
}

.p-sobre-nos {
    display: flex;
    justify-content: flex-start;
    margin: 30px 186px 0px 0px;
    width: 90%;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    text-align: start;

    color: #000000;
}

section.vectors {
    display: flex;
    justify-content: center;
    height: 310px;
    margin-top: 70px;
}

.vector-celeste {
    margin-top: 120px;
}

.recuadro {
    display: grid;
    align-items: center;
    width: 31%;
    height: 225px;
    background: #f8f9fa;
    padding: 15px 30px 0 30px;
    margin: 10px;
    border-radius: 5px;
}

span.vector {
   display: flex;
   justify-content: center;
    width: 100%;
    height: 37px;
    margin: 0px 0px 12px 0px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    text-align: center;

    color: #2E2E33;
}

img.vector {
    width: 375px;
    height: 209px;
}

.text-vector {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

/* .text-vector.vector-7 {
    width: 247px;
    height: 89px;
    margin-top: -140px;
    margin-left: 65px;

    color: #F5F5F5;
}

.text-vector.vector-6 {
    display: flex;
    justify-content: center;
    text-align: justify;
    width: 235px;
    height: 133px;

    color: #2E2E33;
}

.text-vector.vector-5 {
   width: 230px;
   height: 152px;
   margin-top: -180px;

   color: #F5F5F5;
} */

div.section-nosso-processo {
    display: flex;
    justify-content: center;
    padding: 60px 25px 40px 24px;
}

.nosso-processo {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 29px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;

    color: #000000;
}

img.vector-4 {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 75%;
    height: 1px;
    top: 1494px;
}

div.secciones {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.cuadrado {
    width: 24px;
    height: 24px;
    background: #00bae2;
    z-index: 1;
}

span.text {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    text-align: center;

    color: #000000;
}

p.parrafo-producto {
    width: 64%;
    margin-top: 25px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;

    color: #000000;
}



/*********************************************** Mobile *******************************************************/

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

    div.header {
        width: 100%;
        height: 499px;
        background-image: url("../img/mobile-2.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

     div.mascara-azul {
         width: 100%;
         height: 499px;
         background: linear-gradient(90deg, rgba(1, 11, 103, 0.35) 6.25%, rgba(1, 90, 179, 0.35) 45.13%, rgba(0, 185, 236, 0.35) 100%);
     }

     .dropdown-menu {
         min-width: 100%;
     }

    .title {
        display: flex;
        justify-content: center;
        position: relative;
        margin: -273px 46px 0px 46px !important;
        width: 279px !important;
        height: 84px;

        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 35px;
        line-height: 42px;
        text-align: center;
        color: #FFFFFF;
    }

    .img4 {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 236px;
        margin: 18px 0 0 0;
        background-image: url("../img/mobile-5.png");
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 4px;
    }

    section.section-sobre-nos {
        width: 100%;
        height: 1055px;
        /* background-image: url("../../assets/img/fondo.png"); */
    }

    .sobre-nos-text {
        display: flex;
        justify-content: center;
        margin: 51px 0px 24px 0px;
        width: 100%;
        height: 29px;

        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 24px;
        line-height: 28.8px;
    }

    .p-sobre-nos {
        margin: 24px 0px -130px 0px;
        width: 100%;
        height: 245px;

        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
    }

    section.vectors {
        display: flex;
        justify-content: center;
        width: 100%;
        height: auto;
        margin-top: -50px;
        overflow: hidden;
    }

    .recuadro {
        width: 100%;
        height: 210px;
        background: #f8f9fa;
        padding: 15px 30px 0 30px;
        margin: 10px;
        border-radius: 5px;
    }

    span.vector {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 37px;
        margin: 0 0 12px 10px;

        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        font-size: 30px;
        line-height: 38.4px;
        text-align: center;
        color: #2E2E33;
    }

    /* img.vector {
        width: 309px;
        height: 173px;
        margin: 18px 32px 0 34px;
    } */

    .text-vector {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
    }

    /* .text-vector.vector-7 {
        width: 204px;
        height: 73px;
        margin: -140px 85px 0 86px;
    }

    .text-vector.vector-6 {
        width: 204px;
        height: 136px;
        margin: -150px 85px 0 86px;

        font-size: 14px;
        line-height: 17px;
    }

    .text-vector.vector-5 {
        width: 203px;
        height: 136px;
         margin: -150px 85px 0 86px;

        font-size: 14px;
        line-height: 17px;
    } */

    div.section-nosso-processo {
        display: flex;
        justify-content: flex-start;
        padding: 60px 0px 40px 0px;
    }


    /*** Slider Swiper ***/

     swiper-container {
         width: 100%;
         height: 100%;
     }

     swiper-slide {
         text-align: center;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     swiper-slide img {
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
     }

     swiper-slide {
         width: 80%;
     }

     swiper-slide:nth-child(2n) {
         width: 70%;
     }

     swiper-slide:nth-child(3n) {
         width: 70%;
     }

     /*** Slider Swiper ! ***/

    .nosso-processo {
        width: 100%;
        height: 29px;
    }

    img.vector-4 {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 2px;
        top: 2430px;
    }

    /* div.secciones {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        margin: 0px 51px 0 51px;
    } */

    .cuadrado {
        width: 24px;
        height: 24px;
        background: #00bae2;
        z-index: 1;
        margin-bottom: 27px;
    }

    span.text {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 22px;
        text-align: center;

        color: #000000;
    }

    p.parrafo-producto {
        width: 244px;
        height: auto;

        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
        text-align: center;

        color: #000000;
    }

}