/*====================================================*
HOME ABOUT
====================================================*/

.home-about {

    width: 100%;

    padding:
        25px 0 80px;

    background: #ffffff;

    box-sizing: border-box;

}



/*====================================================*
ABOUT CONTAINER
====================================================*/

.home-about-container {

    width: 100%;

    max-width: 1140px;

    margin: 0 auto;

    box-sizing: border-box;

}



/*====================================================*
ABOUT CONTENT
====================================================*/

.home-about-content {

    width: 640px;

    max-width: 100%;

    margin-bottom: 20px;

}



/*====================================================*
ABOUT TITLE
====================================================*/

.home-about-content h2 {

    margin:
        0 0 18px;

    color: #3d4d5b;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 25px;

    font-weight: 600;

    line-height: 1.2;

}



/*====================================================*
ABOUT TEXT
====================================================*/

.home-about-content p {

    margin:
        0 0 0;

    color: #687581;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.7;

}



/*====================================================*
ABOUT GALLERY
====================================================*/

.home-about-gallery {

    display: grid;

    grid-template-columns:
        640px 1fr;

    gap: 7px;

    width: 100%;

    box-sizing: border-box;

}



/*====================================================*
MAIN IMAGE
====================================================*/

.home-about-main-image {

    width: 100%;

    height: 475px;

    overflow: hidden;

}



/*====================================================*
MAIN IMAGE IMG
====================================================*/

.home-about-main-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



/*====================================================*
SIDE IMAGES
====================================================*/

.home-about-side-images {

    position: relative;
    
    top: -150px;

    display: flex;

    flex-direction: column;

    gap: 16px;

    width: 100%;

}



/*====================================================*
SIDE IMAGE
====================================================*/

.home-about-side-image {

    width: 90%;

    height: 270px;

    overflow: hidden;

}



/*====================================================*
SIDE IMAGE IMG
====================================================*/

.home-about-side-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


/*====================================================*
TABLET
====================================================*/

@media (max-width: 1100px) {

    .home-about {

        padding:
            50px 30px 70px;

    }


    .home-about-container {

        max-width: 100%;

    }


    .home-about-content {

        width: 65%;

    }


    .home-about-gallery {

        grid-template-columns:
            58% 1fr;

        gap: 10px;

    }


    .home-about-main-image {

        height: 430px;

    }


    .home-about-side-images {

        top: -80px;

        gap: 14px;

    }


    .home-about-side-image {

        width: 90%;

        height: 210px;

    }

}



/*====================================================*
TABLET / MOBILE
====================================================*/

@media (max-width: 768px) {

    /*----------------------------------------------
    MAIN SECTION
    ----------------------------------------------*/

    .home-about {

        width: 100%;

        padding:
            45px 20px 55px;

        box-sizing: border-box;

    }


    /*----------------------------------------------
    CONTAINER
    ----------------------------------------------*/

    .home-about-container {

        width: 100%;

        max-width: 100%;

        margin: 0 auto;

    }


    /*----------------------------------------------
    CONTENT
    ----------------------------------------------*/

    .home-about-content {

        width: 100%;

        max-width: 100%;

        margin-bottom: 28px;

    }


    /*----------------------------------------------
    TITLE
    ----------------------------------------------*/

    .home-about-content h2 {

        margin:
            0 0 14px;

        font-size: 23px;

        line-height: 1.25;

    }


    /*----------------------------------------------
    TEXT
    ----------------------------------------------*/

    .home-about-content p {

        margin: 0;

        font-size: 13px;

        line-height: 1.7;

    }


    /*----------------------------------------------
    GALLERY
    ----------------------------------------------*/

    .home-about-gallery {

        display: flex;

        flex-direction: column;

        width: 100%;

        gap: 12px;

    }


    /*----------------------------------------------
    MAIN IMAGE
    ----------------------------------------------*/

    .home-about-main-image {

        width: 100%;

        height: 340px;

        overflow: hidden;

    }


    /*----------------------------------------------
    MAIN IMAGE
    ----------------------------------------------*/

    .home-about-main-image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center;

    }


    /*----------------------------------------------
    SIDE IMAGES CONTAINER
    ----------------------------------------------*/

    .home-about-side-images {

        position: relative;

        top: 0;

        left: 0;

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 12px;

    }


    /*----------------------------------------------
    SIDE IMAGE
    ----------------------------------------------*/

    .home-about-side-image {

        width: 100%;

        height: 230px;

        overflow: hidden;

    }


    /*----------------------------------------------
    SIDE IMAGE
    ----------------------------------------------*/

    .home-about-side-image img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center;

    }

}



/*====================================================*
SMALL MOBILE
====================================================*/

@media (max-width: 480px) {

    .home-about {

        padding:
            38px 16px 50px;

    }


    /*----------------------------------------------
    CONTENT
    ----------------------------------------------*/

    .home-about-content {

        margin-bottom: 24px;

    }


    .home-about-content h2 {

        margin:
            0 0 12px;

        font-size: 21px;

        line-height: 1.25;

    }


    .home-about-content p {

        font-size: 12px;

        line-height: 1.7;

    }


    /*----------------------------------------------
    GALLERY
    ----------------------------------------------*/

    .home-about-gallery {

        gap: 10px;

    }


    /*----------------------------------------------
    MAIN IMAGE
    ----------------------------------------------*/

    .home-about-main-image {

        width: 100%;

        height: 270px;

    }


    /*----------------------------------------------
    SIDE IMAGES
    ----------------------------------------------*/

    .home-about-side-images {

        top: 0;

        gap: 10px;

    }


    .home-about-side-image {

        width: 100%;

        height: 185px;

    }

}



/*====================================================*
VERY SMALL MOBILE
====================================================*/

@media (max-width: 360px) {

    .home-about {

        padding:
            32px 14px 45px;

    }


    /*----------------------------------------------
    TITLE
    ----------------------------------------------*/

    .home-about-content h2 {

        font-size: 20px;

    }


    /*----------------------------------------------
    TEXT
    ----------------------------------------------*/

    .home-about-content p {

        font-size: 11px;

        line-height: 1.7;

    }


    /*----------------------------------------------
    GALLERY
    ----------------------------------------------*/

    .home-about-gallery {

        gap: 9px;

    }


    .home-about-main-image {

        height: 235px;

    }


    .home-about-side-images {

        top: 0;

        gap: 9px;

    }


    .home-about-side-image {

        width: 100%;

        height: 160px;

    }

}