/* =====================================
   SPLIT ABOUT SECTION (FINAL POLISHED)
===================================== */

.about-split{
    display:flex;
    min-height:90vh;

    /* ✅ PROPER SPACING FROM PAGE */
    margin:100px auto;
    width:90%;
    max-width:1300px;

    
    overflow:hidden;
    box-shadow:var(--shadow-light);
}


/* ================= LEFT SIDE ================= */

.about-left{
    flex:1;
    padding:80px 60px;

    /* 🔥 USE YOUR THEME GRADIENT */
    background:var(--gradient-main);

    color:#fff;
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* BIG BACKGROUND TEXT */
.bg-text{
    position:absolute;
    top:30px;
    left:40px;
    font-size:70px;
    font-weight:800;

    /* 🔥 SOFT OVERLAY TEXT */
    color:rgba(255,255,255,0.07);

    letter-spacing:3px;
}

/* MAIN HEADING */
.about-left h2{
    font-size:40px;
    margin-bottom:20px;
    line-height:1.3;
}

/* PARAGRAPH */
.about-left p{
    font-size:15px;
    line-height:1.8;
    margin-bottom:15px;
    opacity:0.95;
}

/* BUTTON */
.btn-primary{
    margin-top:20px;
    display:inline-block;
    padding:12px 28px;

    /* 🔴 YOUR RED COLOR */
    background:var(--secondary);

    color:#fff;
    text-decoration:none;
    border-radius:30px;
    font-size:14px;

    box-shadow:var(--shadow-red);
    transition:0.3s;
}

.btn-primary:hover{
    background:var(--secondary-dark);
    transform:translateY(-3px);
}


/* ================= RIGHT SIDE ================= */

.about-right{
    flex:1;
    overflow:hidden;
    background:#ddd;
}

.about-right img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.5s;
}

/* 🔥 HOVER ZOOM EFFECT */
.about-right:hover img{
    transform:scale(1.05);
}


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

@media(max-width:900px){

    .about-split{
        flex-direction:column;
        margin:60px 20px;
    }

    .about-left{
        padding:50px 30px;
        text-align:center;
    }

    .bg-text{
        font-size:45px;
        left:20px;
    }

    .about-left h2{
        font-size:28px;
    }

    .about-right{
        height:300px;
    }
}

/* ================= COMMON HEADER ================= */
.section-header{
    text-align:center;
    margin-bottom:50px;
}

.section-header h2{
    font-size:36px;
    color:var(--text-dark);
}

.section-header h2 span{
    background:var(--gradient-main);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section-header p{
    color:var(--text-light);
}


/* ================= SERVICES ================= */
.services{
    padding:100px 8%;
    background:var(--bg-light);
}

.services-container{
    display:flex;
    gap:30px;
}

.service-box{
    flex:1;
    background:#fff;
    padding:30px;
    border-radius:15px;
    text-align:center;
    box-shadow:var(--shadow-light);
    transition:0.3s;
}

.service-box:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-primary);
}

.service-box i{
    font-size:35px;
    color:var(--primary);
    margin-bottom:15px;
}

.service-box h3{
    margin-bottom:10px;
}


/* ================= WHY MODERN ================= */
.why-modern{
    padding:100px 8%;
    background:#fff;
}

.why-grid{
    display:flex;
    gap:30px;
}

.why-box{
    flex:1;
    padding:30px;
    border-radius:15px;
    background:var(--gradient-light);
    text-align:center;
    transition:0.3s;
}

.why-box:hover{
    transform:scale(1.05);
}

.why-box i{
    font-size:30px;
    color:var(--secondary);
    margin-bottom:10px;
}


/* ================= TESTIMONIAL ================= */
.testimonial{
    padding:100px 8%;
    background:var(--section-bg);
}

.testimonial-container{
    display:flex;
    gap:30px;
}

.testimonial-box{
    flex:1;
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:var(--shadow-light);
    text-align:center;
}

.testimonial-box p{
    font-style:italic;
    margin-bottom:10px;
}


/* ================= RESPONSIVE ================= */
@media(max-width:900px){

    .services-container,
    .why-grid,
    .testimonial-container{
        flex-direction:column;
    }
}