/*=========================================================
                    ABOUT SECTION
=========================================================*/

.about-section{

    padding:10px;

    background:#F8FAFC;

    overflow:hidden;

}

/*==================================================
                SECTION TAG
==================================================*/

.section-tag{

    display:inline-block;

    background:#E8F1FF;

    color:#2563EB;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    padding:10px 22px;

    border-radius:50px;

    margin-bottom:20px;

}

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

.about-title{

    font-size:52px;

    font-weight:800;

    line-height:1.15;

    color:#0F172A;

    margin-bottom:30px;

    font-family:'Manrope',sans-serif;

}

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

.about-text{

    font-size:18px;

    line-height:1.9;

    color:#64748B;

    margin-bottom:20px;

}

/*==================================================
                IMAGE AREA
==================================================*/

.about-images{

    position:relative;

    min-height:650px;

}

/* Main Image */

.about-image-main{

    width:80%;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.about-image-main img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.about-image-main:hover img{

    transform:scale(1.05);

}

/* Small Image */

.about-image-small{

    position:absolute;

    right:0;

    bottom:50px;

    width:45%;

    border-radius:20px;

    overflow:hidden;

    border:8px solid #fff;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.about-image-small img{

    width:100%;

    display:block;

    transition:.5s;

}

.about-image-small:hover img{

    transform:scale(1.08);

}

/*==================================================
            EXPERIENCE CARD
==================================================*/

.experience-box{

    position:absolute;

    left:20px;

    bottom:0;

    background:linear-gradient(
        135deg,
        #2563EB,
        #1D4ED8
    );

    color:#fff;

    border-radius:20px;

    padding:28px;

    min-width:180px;

    box-shadow:0 25px 45px rgba(37,99,235,.35);

}

.experience-box h2{

    font-size:52px;

    font-weight:800;

    margin:0;

    line-height:1;

}

.experience-box span{

    display:block;

    margin-top:10px;

    font-size:17px;

}

/*==================================================
                FEATURES
==================================================*/

.about-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:35px;

}

.about-features div{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:17px;

    font-weight:600;

    color:#334155;

}

.about-features i{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#2563EB;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:14px;

}

/*==================================================
                BUTTON
==================================================*/

.about-section .btn-primary-custom{

    padding:16px 38px;

    font-size:16px;

}

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

@media(max-width:991px){

.about-section{

    padding:80px 0;

}

.about-title{

    font-size:38px;

}

.about-images{

    min-height:auto;

    margin-bottom:50px;

}

.about-image-main{

    width:100%;

}

.about-image-small{

    position:relative;

    width:65%;

    margin:-70px auto 0;

    right:auto;

    bottom:auto;

}

.experience-box{

    position:relative;

    left:auto;

    bottom:auto;

    margin:25px auto 0;

    width:220px;

    text-align:center;

}

.about-features{

    grid-template-columns:1fr;

}

}

@media(max-width:576px){

.about-title{

    font-size:32px;

}

.about-text{

    font-size:16px;

}

}