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

.about{
    padding:120px 0;
    background:#ffffff;
    position:relative;
    overflow:hidden;
}

.about::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(15,107,75,.05);
    border-radius:50%;
    top:-180px;
    right:-180px;
}

.about::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(255,193,7,.08);
    border-radius:50%;
    bottom:-120px;
    left:-120px;
}

.about-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    position:relative;
    z-index:2;
}

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

.about-image{
    position:relative;
}

.about-image img{
    width:100%;
    border-radius:25px;
    display:block;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.experience-box{
    position:absolute;
    right:-25px;
    bottom:40px;
    width:180px;
    background:#0f6b4b;
    color:#fff;
    padding:28px 20px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.experience-box h3{
    font-size:42px;
    margin-bottom:5px;
    font-weight:700;
}

.experience-box span{
    font-size:15px;
    line-height:24px;
}

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

.section-tag{
    display:inline-block;
    background:#e8f6ef;
    color:#0f6b4b;
    padding:8px 22px;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.about-content h2{
    font-size:48px;
    line-height:1.25;
    margin-bottom:25px;
    color:#222;
    font-family:"Playfair Display",serif;
}

.about-content p{
    color:#666;
    font-size:17px;
    line-height:30px;
    margin-bottom:20px;
}

/*==========================
        LIST
===========================*/

.about-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:35px 0;
}

.about-list div{
    display:flex;
    align-items:center;
    gap:12px;
    color:#333;
    font-weight:500;
}

.about-list i{
    color:#0f6b4b;
    font-size:18px;
}

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

.about .btn-primary{
    display:inline-block;
    margin-top:10px;
}

.about-image img{
    transition:.5s;
}

.about-image:hover img{
    transform:scale(1.03);
}