/* =========================
   ABOUT HERO
========================= */

.about-hero{
    position:relative;

    height:88vh;

    overflow:hidden;
}

.about-hero img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.about-overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.52);

    z-index:1;
}

.about-hero .container{
    position:absolute;
    inset:0;

    z-index:2;

    display:flex;
    align-items:center;
}

.about-hero-content{
    max-width:650px;

    color:#fff;
}

.about-hero-content span{
    color:#ffb347;

    letter-spacing:2px;

    font-size:14px;
    font-weight:600;
}

.about-hero-content h1{
    font-size:58px;

    line-height:1.15;

    margin:18px 0;

    font-weight:600;
}

.about-hero-content p{
    font-size:17px;

    line-height:1.8;

    color:#ddd;

    margin-bottom:28px;
}

/* BUTTON */

.about-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 30px;

    border-radius:50px;

    text-decoration:none;

    background:linear-gradient(
        90deg,
        #ff9f1a,
        #ff2d75
    );

    color:#fff;

    font-size:15px;
    font-weight:600;

    transition:0.3s;
}

.about-btn:hover{
    transform:translateY(-3px);

    color:#fff;
}

/* =========================
   STORY
========================= */

.about-story-section{
    padding:0px 0;

    background:#f8f8f8;
}

.about-story-image img{
    width:80%;

    border-radius:22px;
}

.about-story-content span{
    color:#ff7a00;

    font-size:14px;
    font-weight:600;

    letter-spacing:1px;
}

.about-story-content h2{
    font-size:40px;

    margin:16px 0;

    font-weight:600;

    line-height:1.25;
}

.about-story-content p{
    font-size:15px;

    line-height:1.9;

    color:#555;

    margin-bottom:16px;
}

/* =========================
   STATS
========================= */

.about-stats-section{
    padding:20px 0;

    background:#fff;
}

.about-stat-card{
    background:#fff;

    padding:35px 20px;

    border-radius:22px;

    text-align:center;

    box-shadow:0 8px 28px rgba(0,0,0,0.05);

    transition:0.3s;
}

.about-stat-card:hover{
    transform:translateY(-6px);
}

.about-stat-card h2{
    font-size:42px;
    font-weight:700;

    background:linear-gradient(
        90deg,
        #ff9f1a,
        #ff2d75
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.about-stat-card p{
    font-size:15px;

    color:#555;

    margin-top:8px;
}

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

.section-title{
    text-align:center;

    margin-bottom:45px;
}

.section-title span{
    color:#ff7a00;

    font-size:14px;
    font-weight:600;

    letter-spacing:1px;
}

.section-title h2{
    font-size:40px;

    margin-top:14px;

    font-weight:600;

    line-height:1.3;
}

/* =========================
   WHY CHOOSE
========================= */

.why-choose-section{
    padding:50px 0;

    background:#f8f8f8;
}

.choose-card{
    background:#fff;

    padding:32px 24px;

    border-radius:22px;

    text-align:center;

    transition:0.3s;

    box-shadow:0 8px 28px rgba(0,0,0,0.04);
}

.choose-card:hover{
    transform:translateY(-6px);
}

.choose-card i{
    width:72px;
    height:72px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:auto auto 20px;

    background:linear-gradient(
        90deg,
        #ff9f1a,
        #ff2d75
    );

    color:#fff;

    font-size:24px;
}

.choose-card h3{
    font-size:22px;

    margin-bottom:12px;

    font-weight:600;
}

.choose-card p{
    color:#666;

    font-size:14px;

    line-height:1.8;
}

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

.experience-section{
    position:relative;

    height:520px;

    overflow:hidden;
}

.experience-section img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.experience-overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.58);

    z-index:1;
}

.experience-section .container{
    position:absolute;
    inset:0;

    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;
}

.experience-content{
    max-width:700px;

    text-align:center;

    color:#fff;
}

.experience-content span{
    color:#ffb347;

    font-size:14px;

    letter-spacing:1px;
}

.experience-content h2{
    font-size:48px;

    margin:18px 0;

    font-weight:600;

    line-height:1.25;
}

.experience-content p{
    font-size:16px;

    color:#ddd;

    line-height:1.8;
}

/* =========================
   TESTIMONIAL
========================= */

.testimonial-section{
    padding:50px 0;

    background:#fff;
}

.testimonial-card{
    background:#f8f8f8;

    padding:30px;

    border-radius:22px;

    transition:0.3s;
}

.testimonial-card:hover{
    transform:translateY(-6px);
}

.testimonial-card p{
    font-size:15px;

    line-height:1.8;

    color:#555;
}

.testimonial-card h4{
    margin-top:18px;

    font-size:18px;
    font-weight:600;
}

/* =========================
   CTA
========================= */

.about-cta-section{
    padding:80px 0;

    background:#f8f8f8;
}

.about-cta-box{
    background:linear-gradient(
        135deg,
        #ff9f1a,
        #ff2d75
    );

    border-radius:30px;

    padding:60px 35px;

    text-align:center;

    color:#fff;
}

.about-cta-box h2{
    font-size:44px;

    font-weight:600;

    margin-bottom:18px;

    line-height:1.3;
}

.about-cta-box p{
    font-size:16px;

    margin-bottom:28px;

    line-height:1.8;
}

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

@media(max-width:991px){

    .about-hero{
        height:75vh;
    }

    .about-hero-content h1{
        font-size:46px;
    }

    .about-story-content h2,
    .section-title h2,
    .experience-content h2,
    .about-cta-box h2{
        font-size:34px;
    }

    .experience-section{
        height:430px;
    }

}

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

@media(max-width:576px){

    .about-hero{
        height:65vh;
    }

    .about-hero-content{
        text-align:center;
    }

    .about-hero-content h1{
        font-size:30px;

        line-height:1.25;
    }

    .about-hero-content p{
        font-size:14px;
    }

    .about-story-section,
    .why-choose-section,
    .testimonial-section,
    .about-cta-section{
        padding:60px 0;
    }

    .about-story-content{
        text-align:center;
    }

    .about-story-content h2,
    .section-title h2,
    .experience-content h2,
    .about-cta-box h2{
        font-size:26px;
    }

    .about-story-content p,
    .experience-content p,
    .testimonial-card p{
        font-size:14px;
    }

    .choose-card{
        padding:26px 18px;
    }

    .choose-card i{
        width:62px;
        height:62px;

        font-size:20px;
    }

    .choose-card h3{
        font-size:19px;
    }

    .experience-section{
        height:350px;
    }

    .about-stat-card{
        padding:28px 18px;
    }

    .about-stat-card h2{
        font-size:34px;
    }

    .about-stat-card p{
        font-size:14px;
    }

    .testimonial-card{
        padding:24px;
    }

    .about-cta-box{
        padding:45px 20px;

        border-radius:22px;
    }

}