/* =========================================================
   INNER SECTION CONTENT SPACING
========================================================= */

/*
|--------------------------------------------------------------------------
| Space between section top and title
|--------------------------------------------------------------------------
*/

section .container{
    padding-top: 20px;
}

/*
|--------------------------------------------------------------------------
| Space after last content before section ends
|--------------------------------------------------------------------------
*/

section .container > *:last-child{
    margin-bottom: 25px;
}


/*
|--------------------------------------------------------------------------
| Section title breathing room
|--------------------------------------------------------------------------
*/

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

.section-title{
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    width: fit-content;

    margin-top: 10px;
    margin-bottom: 75px;

    padding:
        18px 34px;

    border-radius: 22px;

    background:
        rgba(255,255,255,1);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border:
        1px solid rgba(255,255,255,0.88);

    box-shadow:
        0 12px 35px rgba(15,23,42,0.06),
        inset 0 1px 0 rgba(255,255,255,0.95);

    overflow: hidden;

    isolation: isolate;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

/* =========================================================
   TOP SHINE EFFECT
========================================================= */

.section-title::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.65),
            transparent
        );

    transform: skewX(-20deg);

    transition:left .9s ease;

    z-index:0;
}

.section-title:hover::before{
    left:140%;
}

/* =========================================================
   ICON
========================================================= */

.section-title i{
    position:relative;
    z-index:2;

    width:58px;
    height:58px;

    border-radius:18px;

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

    font-size:1.45rem;

    background:
        linear-gradient(
            135deg,
            rgba(79,70,229,0.12),
            rgba(6,182,212,0.12)
        );

    border:
        1px solid rgba(255,255,255,0.9);

    box-shadow:
        0 8px 20px rgba(79,70,229,0.10);

    color:#4f46e5;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

/* =========================================================
   TITLE TEXT
========================================================= */

.section-title{
    font-size: clamp(1.55rem,2.5vw,2.8rem);

    font-weight: 800;

    letter-spacing: -.8px;

    line-height: 1.15;

    color:#0f172a;
}

/* =========================================================
   GRADIENT TEXT EFFECT
========================================================= */

.section-title{
    background-clip: padding-box;
}

.section-title{
    color: transparent;

    background-image:
        linear-gradient(
            90deg,
            #0f172a,
            #334155,
            #4f46e5
        );

    -webkit-background-clip:text;
}

/* =========================================================
   BOTTOM ACCENT LINE
========================================================= */

.section-title::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-14px;

    transform:translateX(-50%);

    width:110px;
    height:5px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #4f46e5,
            #06b6d4,
            #14b8a6
        );

    box-shadow:
        0 6px 18px rgba(79,70,229,0.22);
}

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

.section-title:hover{
    transform:
        translateY(-4px)
        scale(1.01);

    border-color:
        rgba(79,70,229,0.18);

    box-shadow:
        0 22px 45px rgba(15,23,42,0.10),
        0 10px 24px rgba(79,70,229,0.10);
}

.section-title:hover i{
    transform:
        scale(1.08)
        rotate(-4deg);

    box-shadow:
        0 14px 28px rgba(79,70,229,0.18);
}

/* =========================================================
   SECTION SPECIFIC ICON COLORS
========================================================= */

/* ABOUT */

.about-section .section-title i{
    color:#4f46e5;

    background:
        linear-gradient(
            135deg,
            rgba(79,70,229,0.15),
            rgba(6,182,212,0.15)
        );
}

/* FOUNDERS */

.founding-members-section .section-title i,
.about-section:nth-of-type(2) .section-title i{
    color:#0ea5e9;

    background:
        linear-gradient(
            135deg,
            rgba(14,165,233,0.15),
            rgba(20,184,166,0.15)
        );
}

/* MISSION */

.mission-vision .section-title i{
    color:#14b8a6;

    background:
        linear-gradient(
            135deg,
            rgba(20,184,166,0.16),
            rgba(6,182,212,0.14)
        );
}

/* STATISTICS */

#statistics .section-title i{
    color:#8b5cf6;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,0.15),
            rgba(236,72,153,0.15)
        );
}

/* ACHIEVEMENTS */

#achievements .section-title i{
    color:#f59e0b;

    background:
        linear-gradient(
            135deg,
            rgba(245,158,11,0.16),
            rgba(239,68,68,0.15)
        );
}

/* QUICK ACCESS */

#quick-access .section-title i{
    color:#10b981;

    background:
        linear-gradient(
            135deg,
            rgba(16,185,129,0.16),
            rgba(6,182,212,0.15)
        );
}

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

@media (max-width:768px){
    
    section .container{
        padding-top: 10px;
    }
    
    #about .container,
    #achievements .container,
    #statistics .container,
    #quick-access .container,
    .mission-vision .container,
    .founding-members-section .container{
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .section-title{

        gap:12px;

        margin-top: 5px;
        margin-bottom: 50px;

        padding:
            14px 22px;

        border-radius:18px;

        font-size:1.45rem;
    }

    .section-title i{

        width:48px;
        height:48px;

        border-radius:15px;

        font-size:1.2rem;
    }

    .section-title::after{

        width:78px;
        height:4px;

        bottom:-11px;
    }
    
    section .container > *:last-child{
        margin-bottom: 12px;
    }
}


/* FADE SECTION */

/* =========================================================
   SECTION FADE-IN / FADE-OUT ANIMATION
========================================================= */

.fade-section{
    opacity: 0;

    transform:
        translateY(60px)
        scale(.98);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,.61,.36,1);

    will-change:
        opacity,
        transform;
}

/* ACTIVE / VISIBLE */

.fade-section.show{
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

/* OPTIONAL DIFFERENT EFFECTS */

.fade-left{
    transform:
        translateX(-70px);
}

.fade-right{
    transform:
        translateX(70px);
}

.fade-zoom{
    transform:
        scale(.92);
}

.fade-section.show.fade-left,
.fade-section.show.fade-right,
.fade-section.show.fade-zoom{
    transform:
        translate(0,0)
        scale(1);
}

/* MOBILE OPTIMIZATION */

@media (max-width:768px){

    .fade-section{
        transform:
            translateY(35px);
    }

    .fade-left{
        transform:
            translateX(-35px);
    }

    .fade-right{
        transform:
            translateX(35px);
    }
}

/* SPACING BETWEEN SECTION */

/* =========================================================
   GLOBAL SECTION SPACING
========================================================= */

section{
    position: relative;

    padding-top: 90px;
    padding-bottom: 90px;
}

/* LARGE HERO SECTIONS */

.apple-hero{
    padding-top: 140px;
    padding-bottom: 140px;
}

/* CAROUSEL SECTION */

section.p-0{
    padding-top: 0;
    padding-bottom: 0;
}

/* SOFT BACKGROUND SECTIONS */

.section-soft{
    padding-top: 110px;
    padding-bottom: 110px;
}

/* EXTRA SPACING FOR PREMIUM LOOK */

#about,
#achievements,
#statistics,
#quick-access,
.mission-vision,
.founding-members-section{
    margin-top: 30px;
    margin-bottom: 30px;
}

/* MOBILE SPACING */

@media (max-width:768px){

    section{
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .apple-hero{
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .section-soft{
        padding-top: 80px;
        padding-bottom: 80px;
    }

    #about,
    #achievements,
    #statistics,
    #quick-access,
    .mission-vision,
    .founding-members-section{
        margin-top: 18px;
        margin-bottom: 18px;
    }
}