/*=============== ABOUT-US SECTION ===================*/
/* ABOUT-US */
#about-us {
    width: 100%;
}
    /* ABOUT-CONTAINER1 */
    .about-container-1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        top: 0;
        bottom: 0;
    }
        /* ABOUT-LEFT */
        .right-about1{
            background: url('../img/bkgAboutus.png') center center no-repeat;
            background-size: cover;
            width: 50%;
            height: 90vh;
        }
        .right-about2{
            background: url('../img/vision.png') center center no-repeat;
            background-size: cover;
            width: 50%;
            height: 100vh;
        }


        .about-left1 {
            background: url('../img/about-us-bkg.png') center center no-repeat;
            background-size: cover;
            width: 50%;
            height: 100vh;
        }
        .about-left2 {
            background: url('../img/mision.png') center center no-repeat;
            background-size: cover;
            width: 50%;
            height: 100vh;
        }

        .about-left img{
            width: 100%;
            height: 100vh;
            bottom: 0;
            display: flex;
        }

        /* ABOUT-RIGHT */
        .about-right {
            flex: 1;
            padding: 0 160px 0 100px;
        }

        .about-right h2 {
            color: var(--blue);
            font-size: 3.5vw;
            text-align: start;
            margin-bottom: 30px;
            line-height: 1
        }

        .about-right p {
            color: var(--blue-text);
            font-size: 1rem;
        }

    /* ABOUT-CONTAINER2 */
    .about-container-2{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        top: 0;
        bottom: 0;
    }

        /* LEFT-ABOUT */
        .left-about{
            padding: 0 100px 0 160px;
        }
        .left-about,
        .right-about{
            width: 50%;
        }

        /* RIGHT-ABOUT */
        .right-about img{
            width: 100%;
            height: 100vh;
            display: flex;
            bottom: 0;
            object-fit: cover;
        }
        .left-about h2 {
            color: var(--blue);
            font-size: 5vw;
            padding: 50px 0 0 0;
            text-align: start;
            margin-bottom: 30px;
        }
    
        .left-about p {
            color: var(--blue-text);
            font-size: 1rem;
        }

        .list-about{
            list-style: none;
            display: flex;
            align-items: center;
        }
        .list-about img{
            margin-right: 20px;
        }

        .h2-about{
            font-size: 30px!important;
            padding-top: 50px;
        }

        .about-values{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            column-gap: 35px;
        }
/*=============== END ABOUT-US SECTION ===================*/

/*=============== RESPONSIVE 100px - 425px ===============*/
@media (min-width: 100px) and (max-width: 425px){
    .about-values{
        display: flex;
        flex-direction: column;
    }
    /* ABOUT-CONTAINER1 */
    .about-container-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
        /* ABOUT-LEFT */
        .about-left1,
        .about-left2{
            height: 40vh;
            width: 100%;
        }
        .h2-about{
            padding: 0;
        }


        /* ABOUT-RIGHT */
        .about-right {
            flex: 1;
            padding: 50px 20px;
        }

        .about-right h2 {
            color: var(--blue);
            font-size: 10vw;
            text-align: center;
            margin-bottom: 12px;
            line-height: 1
        }

        .about-right p {
            color: var(--blue-text);
            font-size: 1rem;
        }

    /* ABOUT-CONTAINER2 */
    .about-container-2{
        display: flex;
        flex-direction: column;
        align-items: center;
    }    


        /* LEFT-ABOUT */
        .left-about{
            padding: 50px 20px;
            order: 1;
        }
        .left-about,
        .right-about1{
            width: 100%!important;
        }

        /* RIGHT-ABOUT */
        .right-about1,
        .right-about2{
            width: 100%;
            height: 40vh;
            display: flex;
        }
        .left-about h2 {
            color: var(--blue);
            font-size: 10vw;
            padding: 0;
            text-align: center;
            margin-bottom: 12px;
        }
    
        .left-about p {
            color: var(--blue-text);
            font-size: 1rem;
        }


        .about-value-padding {
            margin-bottom: 2em;
        }


}

/*=============== RESPONSIVE 426px - 768px ===============*/
@media (min-width: 426px) and (max-width: 768px){
    .about-values{
        display: flex;
        flex-direction: column;
    }
    .about-values ul{
        margin-left: 50px;
    }

    /* ABOUT-CONTAINER1 */
    .about-container-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
        /* ABOUT-LEFT */
        .about-left1,
        .about-left2{
            width: 100%;
            height: 70vh;
        }
        .about-right{
            padding: 0;
        }


        /* ABOUT-RIGHT */
        .about-right {
            flex: 1;
            padding: 50px 20px;
        }

        .about-right h2 {
            color: var(--blue);
            font-size: 10vw;
            text-align: center;
            margin-bottom: 30px;
        }
        .h2-about{
            padding: 0;
            margin: 0px 0 30px 0;
        }
        .about-right div:nth-child(2) .h2-about,
        .about-right div:nth-child(3) .h2-about{
            margin: 50px 0 30px 0;
        }
        

        .about-right p {
            color: var(--blue-text);
            font-size: 1rem;
        }

    /* ABOUT-CONTAINER2 */
    .about-container-2{
        display: flex;
        flex-direction: column;
        align-items: center;
    }    


        /* LEFT-ABOUT */
        .left-about{
            padding: 50px 100px;
            width: 100%;
            order: 2;
        }

        /* RIGHT-ABOUT */
        .right-about1,
        .right-about2{
            width: 100%;
            height: 70vh;
            display: flex;
            bottom: 0;
            object-fit: cover;
        }
        .left-about h2 {
            color: var(--blue);
            font-size: 10vw;
            padding: 0;
            text-align: center;
            margin-bottom: 30px;
        }
    
        .left-about p {
            color: var(--blue-text);
            font-size: 1rem;
        }
}

/*=============== RESPONSIVE 769px - 1280px ===============*/
@media (min-width: 769px) and (max-width: 1280px){
    .about-values{
        display: flex;
        flex-direction: column;
    }
    .about-values h2:nth-child(1){
        padding-top: 0;
    }
    /* ABOUT-CONTAINER1 */
        /* ABOUT-LEFT */
        .about-left,
        .about-right {
            width: 50%;
            height: 100vh;
        }
        .about-right{
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }


        /* ABOUT-RIGHT */
        .about-right {
            flex: 1;
            padding: 50px 20px;
        }

        .about-right h2 {
            color: var(--blue);
            font-size: 6vw;
            text-align: start;
            margin-bottom: 10px;
        }

        .about-right p {
            color: var(--blue-text);
            font-size: 0.75rem;
        }

    /* ABOUT-CONTAINER2 */
        /* LEFT-ABOUT */
        .left-about{
            padding: 50px 20px;
        }
        .left-about,
        .right-about{
            width: 50%;
        }

        /* RIGHT-ABOUT */
        .right-about img{
            width: 100%;
            height: 100vh;
            display: flex;
            bottom: 0;
            object-fit: cover;
        }
        .left-about h2 {
            color: var(--blue);
            font-size: 6vw;
            padding: 50px 0 0 0;
            text-align: start;
            margin-bottom: 30px;
        }
    
        .left-about p {
            color: var(--blue-text);
            font-size: 0.75rem;
        }
}