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

.about-astrologer-section{
    width:100%;
    padding:0; /* REMOVED EXTRA TOP & BOTTOM SPACE */
    margin:0;
    background:#f5f5f5;
    font-family:Arial, sans-serif;
    overflow:hidden;
}

.about-container{
    width:100%;
    max-width:100%; /* FULL WIDTH */
    margin:0; /* REMOVE CENTER GAP */

    display:grid;
    grid-template-columns:1.2fr 0.9fr 0.9fr;
    gap:30px; /* REDUCED GAP */

    align-items:start;

    padding:30px 40px; /* CONTROLLED INNER SPACING */
}

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

.about-left{
    opacity:0;
    transform:translateY(60px);
    transition:1s ease;
}

.about-left.show{
    opacity:1;
    transform:translateY(0);
}

.about-left h4{
    font-size:20px;
    font-weight:700;
    color:#000;
    margin-bottom:18px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.about-left h2{
    font-size:72px;
    color:#ff0099;
    font-weight:800;
    margin-bottom:20px;
    line-height:1;
}

.about-line{
    width:120px;
    height:4px;
    background:#777;
    margin-bottom:35px;
}

.about-left p{
    font-size:19px;
    line-height:2;
    color:#111;
    margin-bottom:35px;
}

/* ================= CENTER SECTION ================= */

.about-center{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;

    opacity:0;
    transform:translateY(60px);
    transition:1s ease;
}

.about-center.show{
    opacity:1;
    transform:translateY(0);
}

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

.about-image-wrapper{
    width:470px;
    height:470px;

    position:relative;

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

/* ================= CHAKRA ================= */

.about-chakra{
    position:absolute;

    width:100%;
    height:100%;

    object-fit:contain;

    opacity:.18;

    z-index:1;

    animation:chakraRotate 35s linear infinite;
}

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

.about-main-image{
    width:320px;
    height:320px;

    border-radius:50%;

    object-fit:cover;

    position:relative;
    z-index:2;

    border:8px solid #fff;

    box-shadow:0 10px 35px rgba(0,0,0,.15);
}

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

.about-features{
    width:100%;
    margin-top:-20px;
}

.about-feature{
    display:flex;
    align-items:flex-start;
    gap:18px;

    padding:22px 0;

    border-bottom:1px solid #d8d8d8;
}

.about-feature-icon{
    width:70px;
    height:70px;

    min-width:70px;

    border-radius:50%;

    background:#ffe9f5;

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

    font-size:32px;
}

.about-feature-text h3{
    font-size:16px;
    color:#ff0099;
    font-weight:800;
    margin-bottom:8px;
    text-transform:uppercase;
}

.about-feature-text p{
    font-size:17px;
    line-height:1.6;
    color:#222;
}

/* ================= RIGHT FORM ================= */

.about-right{
    width:100%;

    opacity:0;
    transform:translateY(60px);
    transition:1s ease;
    transition-delay:.3s;
}

.about-right.show{
    opacity:1;
    transform:translateY(0);
}

.about-right .contact-section{
    padding:0;
    background:transparent;
}

/* ================= ANIMATION ================= */

@keyframes chakraRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

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

@media(max-width:1300px){

    .about-container{
        grid-template-columns:1fr;
        padding:30px 20px;
    }

    .about-left{
        order:1;
    }

    .about-center{
        order:2;
    }

    .about-right{
        order:3;
    }

}

@media(max-width:768px){

    .about-astrologer-section{
        padding:0;
    }

    .about-container{
        padding:25px 15px;
    }

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

    .about-left p{
        font-size:17px;
    }

    .about-image-wrapper{
        width:330px;
        height:330px;
    }

    .about-main-image{
        width:240px;
        height:240px;
    }

    .about-feature{
        gap:15px;
    }

    .about-feature-icon{
        width:55px;
        height:55px;
        min-width:55px;
        font-size:24px;
    }

}

@media(max-width:480px){

    .about-container{
        padding:20px 12px;
    }

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

    .about-left h4{
        font-size:16px;
    }

    .about-image-wrapper{
        width:280px;
        height:280px;
    }

    .about-main-image{
        width:200px;
        height:200px;
    }

    .about-feature-text h3{
        font-size:14px;
    }

    .about-feature-text p{
        font-size:15px;
    }

}