/*====================================================
ABOUT SECTION
====================================================*/
.about-section {

    position: relative;

    width: 100%;

    background: #ffffff;

    color: #111111;

    padding: 105px 0 120px;

}

/*====================================================
ABOUT CONTAINER
====================================================*/
.about-container {

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 80px;

}

/*====================================================
ABOUT LEFT CONTENT
====================================================*/
.about-content {

    width: 50%;

    padding-left: 5px;

}

/*====================================================
ABOUT LABEL
====================================================*/

.about-label {

    display: block;

    margin-bottom: 17px;

    color: #f47700;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 400;

}

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

.about-title {

    margin: 0 0 24px;

    color: #2447b9;

    font-size: 47px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -1px;

}

/*====================================================
ABOUT DESCRIPTION
====================================================*/

.about-description {

    max-width: 680px;

    margin: 0 0 32px;

    color: #111111;

    font-size: 16px;

    line-height: 1.65;

    font-weight: 400;

}

/*====================================================
ABOUT FEATURE
====================================================*/

.about-feature {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 28px;

}



/*====================================================
FEATURE ICON IMAGE
====================================================*/

.feature-icon {

    width: 25px;

    min-width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/*====================================================
FEATURE ICON IMAGE
====================================================*/

.feature-icon img {

    width: 25px;

    height: 25px;

    object-fit: contain;

    display: block;

}



/*====================================================
FEATURE CONTENT
====================================================*/

.feature-content {

    max-width: 560px;

}



.feature-content h3 {

    margin: 0 0 3px;

    color: #111111;

    font-size: 23px;

    line-height: 1.35;

    font-weight: 700;

}



.feature-content p {

    margin: 0;

    color: #6f6f6f;

    font-size: 16px;

    line-height: 1.65;

    font-weight: 400;

}



/*====================================================
ABOUT RIGHT IMAGE AREA
====================================================*/

.about-image-area {

    position: relative;

    width: 42%;

    min-height: 505px;

}



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

.about-image {

    position: absolute;

    top: 0;

    right: 30px;

    width: 535px;

    height: 505px;

    overflow: visible;

}



.about-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/*====================================================
IMAGE LABEL
====================================================*/

.about-image-label {

    position: absolute;

    top: 22px;

    left: 77px;

    min-width: 108px;

    height: 29px;

    padding: 0 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    color: #333333;

    font-size: 10px;

    font-weight: 400;

}



/*====================================================
FUN FACTS BOX
====================================================*/

.about-facts {

    position: absolute;

    top: 27px;

    right: 0;

    width: 315px;

    height: 285px;

    padding: 31px 43px;

    background: #ffffff;

    border: 3px solid #e8ddd7;

    z-index: 5;

}



/*====================================================
FACTS HEADING
====================================================*/

.about-facts h3 {

    margin: 0 0 27px;

    color: #111111;

    font-size: 23px;

    line-height: 1.4;

    font-weight: 700;

}



/*====================================================
EXPERIENCE LABEL
====================================================*/

.experience-label {

    color: #747474;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 400;

}



/*====================================================
EXPERIENCE NUMBER
====================================================*/

.experience-number {

    margin-top: -5px;

    color: #111111;

    font-size: 78px;

    line-height: 1;

    font-weight: 700;

}



/*====================================================
RESPONSIVE ABOUT
====================================================*/

@media (max-width: 1200px) {

    .about-container {

        gap: 45px;

    }


    .about-title {

        font-size: 42px;

    }


    .about-image {

        width: 490px;

        height: 470px;

    }


    .about-image-area {

        min-height: 470px;

    }


    .about-facts {

        width: 290px;

        height: 270px;

    }

}



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

@media (max-width: 992px) {

    .about-section {

        padding: 80px 0 90px;

    }


    .about-container {

        flex-direction: column;

        align-items: stretch;

    }


    .about-content {

        width: 100%;

    }


    .about-image-area {

        width: 100%;

        height: 500px;

        min-height: 0;

    }


    .about-image {

        left: 0;

        right: auto;

        width: 75%;

        height: 500px;

    }


    .about-facts {

        right: 0;

        top: 30px;

    }

}



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

@media (max-width: 768px) {

    .about-section {

        padding: 65px 0 75px;

    }


    .about-container {

        padding: 0 25px;

    }


    .about-label {

        font-size: 20px;

    }


    .about-title {

        font-size: 36px;

        letter-spacing: -0.5px;

    }


    .about-description {

        font-size: 15px;

    }


    .feature-content h3 {

        font-size: 20px;

    }


    .feature-content p {

        font-size: 14px;

    }


    .about-image-area {

        height: 430px;

    }


    .about-image {

        width: 90%;

        height: 430px;

    }


    .about-facts {

        width: 245px;

        height: 235px;

        padding: 23px 27px;

    }


    .about-facts h3 {

        font-size: 18px;

        margin-bottom: 18px;

    }


    .experience-label {

        font-size: 12px;

    }


    .experience-number {

        font-size: 65px;

    }

}



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

@media (max-width: 480px) {

    .about-title {

        font-size: 31px;

    }


    .about-feature {

        gap: 13px;

    }


    .feature-content h3 {

        font-size: 18px;

    }


    .about-image-area {

        height: 350px;

    }


    .about-image {

        width: 100%;

        height: 350px;

    }


    .about-facts {

        top: 20px;

        right: -5px;

        width: 205px;

        height: 200px;

        padding: 20px;

    }


    .about-facts h3 {

        font-size: 16px;

    }


    .experience-number {

        font-size: 55px;

    }

}