/*============================= PREMIUM SECTION HEADINGS CSS =============================================*/
.section-soft{
    background:
        radial-gradient(circle at 20% 20%, rgba(79,70,229,0.06), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(6,182,212,0.05), transparent 45%),
        #f6f8ff;
}

.section-title{
    position:relative;
    font-weight:800;
    font-size:2.2rem;
    letter-spacing:0.4px;
    margin-bottom:50px;
    display:inline-block;
    color:#0f172a;
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DECORATIVE UNDERLINE */
.section-title::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-12px;
    transform:translateX(-50%);
    width:70px;
    height:4px;
    border-radius:10px;
    background:linear-gradient(135deg,#4f46e5,#06b6d4);
    box-shadow:0 4px 12px rgba(79,70,229,0.3);
}

/* SOFT GLOW LINE */
.section-title::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    width:120px;
    height:12px;
    background:radial-gradient(circle, rgba(79,70,229,0.25), transparent 70%);
}

/* OPTIONAL SUBTITLE */
.section-subtitle{
    max-width:650px;
    margin:0 auto 40px;
    text-align:center;
    color:#64748b;
    font-size:0.95rem;
}

/* CENTER ALIGN FIX */
.text-center .section-title{
    display:inline-block;
}

/* =========================================================
   SECTION BASE CSS
========================================================= */

.about-section,
.mission-vision,
#statistics,
#achievements,
#quick-access {

    position: relative;
    overflow: hidden;

    padding: 80px 0;

    background: #ffffff;

    border-radius: 28px;

    margin: 24px auto;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        background-color 0.45s ease;

    animation: sectionFadeUp 1s ease both;
}

/* =========================================================
   SECTION HOVER EFFECT
========================================================= */

.about-section:hover,
.mission-vision:hover,
#statistics:hover,
#achievements:hover,
#quick-access:hover {

    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(0,0,0,0.08),
        0 8px 24px rgba(0,0,0,0.05);

    background: #ffffff;
}

/* =========================================================
   PREMIUM SHINE EFFECT
========================================================= */

.about-section::before,
.mission-vision::before,
#statistics::before,
#achievements::before,
#quick-access::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0) 100%
    );

    transform: skewX(-25deg);

    transition: left 0.9s ease;

    z-index: 1;

    pointer-events: none;
}

/* Shine Animation */

.about-section:hover::before,
.mission-vision:hover::before,
#statistics:hover::before,
#achievements:hover::before,
#quick-access:hover::before {

    left: 130%;
}

/* =========================================================
   KEEP CONTENT ABOVE SHINE
========================================================= */

.about-section .container,
.mission-vision .container,
#statistics .container,
#achievements .container,
#quick-access .container {

    position: relative;
    z-index: 2;
}

/* =========================================================
   FADE-UP ANIMATION
========================================================= */

@keyframes sectionFadeUp {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   STAGGERED ENTRY
========================================================= */

.about-section {
    animation-delay: 0.1s;
}

.mission-vision {
    animation-delay: 0.2s;
}

#statistics {
    animation-delay: 0.3s;
}

#achievements {
    animation-delay: 0.4s;
}

#quick-access {
    animation-delay: 0.5s;
}

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

@media (max-width: 768px) {

    .about-section,
    .mission-vision,
    #statistics,
    #achievements,
    #quick-access {

        border-radius: 18px;

        margin: 14px 10px;

        padding: 60px 0;
    }

    .about-section:hover,
    .mission-vision:hover,
    #statistics:hover,
    #achievements:hover,
    #quick-access:hover {

        transform: translateY(-3px);
    }
}