/* =========================================================
   STUDENT COUNCIL
   PREMIUM RESPONSIVE DESIGN
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root{

    --sc-primary:#0b2341;
    --sc-primary-light:#123b68;

    --sc-blue:#008fd4;
    --sc-blue-light:#00b8ff;

    --sc-gold:#c89b3c;
    --sc-gold-light:#f1d17a;

    --sc-text:#172033;
    --sc-muted:#667085;

    --sc-white:#ffffff;
    --sc-light:#f5f8fc;

    --sc-border:rgba(11,35,65,0.09);

    --sc-shadow-sm:
        0 10px 30px rgba(11,35,65,0.08);

    --sc-shadow-md:
        0 20px 50px rgba(11,35,65,0.12);

    --sc-shadow-lg:
        0 30px 80px rgba(11,35,65,0.17);

    --sc-gradient:
        linear-gradient(
            135deg,
            #0b2341 0%,
            #123b68 55%,
            #008fd4 100%
        );

    --sc-gold-gradient:
        linear-gradient(
            135deg,
            #c89b3c,
            #f1d17a
        );
}


/* =========================================================
   RESET
   ========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:var(--sc-text);
    background:#ffffff;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

button,
input,
textarea,
select{
    font-family:inherit;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.student-container{
    width:min(1180px,92%);
    margin:0 auto;
}


/* =========================================================
   COMMON LABEL
   ========================================================= */

.student-label{

    display:inline-flex;
    align-items:center;
    gap:9px;

    padding:8px 15px;

    border-radius:30px;

    background:rgba(11,35,65,0.06);

    color:var(--sc-primary);

    font-size:11px;
    font-weight:700;

    letter-spacing:1.4px;
    text-transform:uppercase;

    margin-bottom:18px;
}

.student-label i{
    color:var(--sc-gold);
    font-size:11px;
}


/* =========================================================
   INTRO SECTION
   ========================================================= */

.student-intro{

    position:relative;

    padding:100px 0;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(0,168,255,0.09),
            transparent 27%
        ),

        radial-gradient(
            circle at 92% 85%,
            rgba(200,155,60,0.10),
            transparent 28%
        ),

        #ffffff;

    overflow:hidden;
}

.student-intro::before{

    content:"";

    position:absolute;

    width:430px;
    height:430px;

    border-radius:50%;

    border:1px solid rgba(11,35,65,0.06);

    left:-220px;
    top:-210px;
}

.student-intro::after{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    border:1px solid rgba(200,155,60,0.13);

    right:-130px;
    bottom:-140px;
}

.student-intro .student-container{

    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        0.95fr 1.05fr;

    align-items:center;

    gap:80px;
}


/* =========================================================
   INTRO IMAGE
   ========================================================= */

.student-image{
    position:relative;
}

.student-image-frame{

    position:relative;

    padding:13px;

    border-radius:28px;

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

    box-shadow:var(--sc-shadow-lg);
}

.student-image-frame::before{

    content:"";

    position:absolute;

    width:115px;
    height:115px;

    border-radius:23px;

    background:var(--sc-gold-gradient);

    left:-25px;
    bottom:-25px;

    z-index:-1;

    opacity:.85;
}

.student-image-frame::after{

    content:"";

    position:absolute;

    width:85px;
    height:85px;

    border-radius:50%;

    border:13px solid rgba(0,143,212,0.12);

    right:-35px;
    top:-35px;
}

.student-image-frame img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:20px;
}


/* =========================================================
   FLOATING CARD
   ========================================================= */

.student-floating-card{

    position:absolute;

    right:-35px;
    bottom:45px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:15px 19px;

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

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

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

    border-radius:17px;

    box-shadow:var(--sc-shadow-md);

    z-index:5;

    animation:
        studentFloat 4s ease-in-out infinite;
}

.student-floating-card > i{

    width:42px;
    height:42px;

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

    border-radius:12px;

    background:rgba(0,143,212,0.10);

    color:var(--sc-blue);

    font-size:18px;
}

.student-floating-card strong{

    display:block;

    color:var(--sc-primary);

    font-size:12px;

    font-weight:700;

    margin-bottom:2px;
}

.student-floating-card span{

    display:block;

    color:var(--sc-muted);

    font-size:9px;

    font-weight:500;
}

@keyframes studentFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}


/* =========================================================
   INTRO CONTENT
   ========================================================= */

.student-content{
    max-width:680px;
}

.student-content h1{

    color:var(--sc-primary);

    font-size:clamp(38px,4.5vw,60px);

    line-height:1.1;

    font-weight:800;

    letter-spacing:-1.5px;

    margin-bottom:24px;
}

.student-content h1 span{

    display:block;

    background:
        linear-gradient(
            135deg,
            #008fd4,
            #00b8ff
        );

    -webkit-background-clip:text;
    background-clip:text;

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

.student-content > p{

    color:var(--sc-muted);

    font-size:15px;

    line-height:1.9;

    margin-bottom:15px;
}


/* =========================================================
   INTRO HIGHLIGHTS
   ========================================================= */

.student-highlights{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:12px;

    margin-top:28px;
}

.student-highlight{

    display:flex;

    flex-direction:column;

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

    text-align:center;

    min-height:105px;

    padding:15px 8px;

    background:#ffffff;

    border:1px solid var(--sc-border);

    border-radius:17px;

    box-shadow:var(--sc-shadow-sm);

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

.student-highlight:hover{

    transform:translateY(-7px);

    box-shadow:var(--sc-shadow-md);

    border-color:
        rgba(0,143,212,0.25);
}

.student-highlight i{

    width:42px;
    height:42px;

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

    border-radius:13px;

    background:
        rgba(0,143,212,0.10);

    color:var(--sc-blue);

    font-size:17px;

    margin-bottom:9px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.student-highlight:hover i{

    transform:scale(1.08) rotate(-5deg);

    background:var(--sc-gradient);

    color:#ffffff;
}

.student-highlight span{

    color:#344054;

    font-size:11px;

    font-weight:600;
}


/* =========================================================
   SESSION SECTION
   ========================================================= */

.council-session{

    position:relative;

    padding:105px 0;

    background:
        linear-gradient(
            180deg,
            #f6f9fd 0%,
            #ffffff 100%
        );
}

.session-heading{

    max-width:760px;

    margin:0 auto 55px;

    text-align:center;
}

.session-heading h2{

    color:var(--sc-primary);

    font-size:clamp(31px,4vw,48px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:17px;
}

.session-heading h2 span{

    color:var(--sc-blue);
}

.session-heading p{

    color:var(--sc-muted);

    font-size:14px;

    line-height:1.85;
}


/* =========================================================
   SESSION GRID
   ========================================================= */

.session-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:24px;
}

.session-card{

    position:relative;

    padding:34px 28px;

    min-height:280px;

    background:#ffffff;

    border:1px solid var(--sc-border);

    border-radius:23px;

    box-shadow:var(--sc-shadow-sm);

    overflow:hidden;

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

.session-card::before{

    content:"";

    position:absolute;

    width:170px;
    height:170px;

    border-radius:50%;

    background:
        rgba(0,143,212,0.055);

    right:-75px;
    top:-75px;

    transition:transform .5s ease;
}

.session-card::after{

    content:"";

    position:absolute;

    width:4px;
    height:0;

    left:0;
    top:0;

    background:
        linear-gradient(
            180deg,
            #008fd4,
            #c89b3c
        );

    transition:height .4s ease;
}

.session-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--sc-shadow-lg);

    border-color:
        rgba(0,143,212,0.20);
}

.session-card:hover::before{

    transform:scale(1.45);
}

.session-card:hover::after{

    height:100%;
}

.session-icon{

    position:relative;
    z-index:2;

    width:62px;
    height:62px;

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

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(0,143,212,0.12),
            rgba(11,35,65,0.06)
        );

    color:var(--sc-blue);

    font-size:23px;

    margin-bottom:24px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}

.session-card:hover .session-icon{

    transform:rotate(-6deg) scale(1.08);

    background:var(--sc-gradient);

    color:#ffffff;
}

.session-card h3{

    position:relative;
    z-index:2;

    color:var(--sc-primary);

    font-size:19px;

    font-weight:700;

    margin-bottom:12px;
}

.session-card p{

    position:relative;
    z-index:2;

    color:var(--sc-muted);

    font-size:12.5px;

    line-height:1.8;
}


/* =========================================================
   ROLE SECTION
   ========================================================= */

.council-role{

    position:relative;

    padding:110px 0;

    background:#ffffff;
}

.council-role .student-container{

    display:grid;

    grid-template-columns:
        .95fr 1.05fr;

    align-items:center;

    gap:80px;
}


/* =========================================================
   ROLE IMAGE
   ========================================================= */

.role-image{
    position:relative;
}

.role-image-frame{
    position:relative;
}

.role-image-frame::before{

    content:"";

    position:absolute;

    width:85%;
    height:85%;

    right:-25px;
    bottom:-25px;

    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            rgba(0,143,212,0.14),
            rgba(200,155,60,0.12)
        );

    z-index:0;
}

.role-image-frame img{

    position:relative;

    z-index:1;

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:27px;

    box-shadow:var(--sc-shadow-lg);
}


/* =========================================================
   ROLE BADGE
   ========================================================= */

.role-badge{

    position:absolute;

    z-index:4;

    left:-25px;
    bottom:35px;

    display:flex;

    align-items:center;

    gap:11px;

    padding:14px 19px;

    border-radius:15px;

    background:#ffffff;

    box-shadow:var(--sc-shadow-md);

    color:var(--sc-primary);

    font-size:11px;

    font-weight:700;
}

.role-badge i{

    color:var(--sc-gold);

    font-size:18px;
}


/* =========================================================
   ROLE CONTENT
   ========================================================= */

.role-content{
    max-width:650px;
}

.role-content h2{

    color:var(--sc-primary);

    font-size:clamp(31px,4vw,46px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:19px;
}

.role-content h2 span{

    display:block;

    color:var(--sc-blue);
}

.role-content > p{

    color:var(--sc-muted);

    font-size:14px;

    line-height:1.9;

    margin-bottom:27px;
}


/* =========================================================
   RESPONSIBILITY LIST
   ========================================================= */

.responsibility-list{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.responsibility-list li{

    list-style:none;

    display:flex;

    align-items:flex-start;

    gap:13px;

    padding:13px 15px;

    background:#f8fafc;

    border:1px solid rgba(11,35,65,0.06);

    border-radius:14px;

    transition:
        transform .3s ease,
        background .3s ease;
}

.responsibility-list li:hover{

    transform:translateX(7px);

    background:#f1f8fc;
}

.responsibility-list li i{

    flex:0 0 25px;

    width:25px;
    height:25px;

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

    border-radius:50%;

    background:
        rgba(0,143,212,0.12);

    color:var(--sc-blue);

    font-size:10px;

    margin-top:1px;
}

.responsibility-list li span{

    color:#344054;

    font-size:12px;

    line-height:1.65;
}


/* =========================================================
   LEADERSHIP VALUES
   ========================================================= */

.leadership-values{

    padding:105px 0;

    background:
        linear-gradient(
            180deg,
            #f7faff,
            #ffffff
        );
}

.values-heading{

    max-width:760px;

    text-align:center;

    margin:0 auto 55px;
}

.values-heading h2{

    color:var(--sc-primary);

    font-size:clamp(31px,4vw,47px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:16px;
}

.values-heading h2 span{

    color:var(--sc-blue);
}

.values-heading p{

    color:var(--sc-muted);

    font-size:14px;

    line-height:1.85;
}


/* =========================================================
   VALUES GRID
   ========================================================= */

.values-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:20px;
}

.value-card{

    position:relative;

    text-align:center;

    padding:32px 20px;

    background:#ffffff;

    border:1px solid var(--sc-border);

    border-radius:21px;

    box-shadow:var(--sc-shadow-sm);

    overflow:hidden;

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

.value-card::before{

    content:"";

    position:absolute;

    width:120px;
    height:120px;

    border-radius:50%;

    background:
        rgba(0,143,212,0.055);

    top:-65px;
    right:-55px;

    transition:transform .5s ease;
}

.value-card:hover{

    transform:translateY(-9px);

    box-shadow:var(--sc-shadow-md);

    border-color:
        rgba(0,143,212,0.22);
}

.value-card:hover::before{

    transform:scale(1.5);
}

.value-icon{

    position:relative;
    z-index:1;

    width:62px;
    height:62px;

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

    margin:0 auto 18px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(0,143,212,0.11),
            rgba(200,155,60,0.09)
        );

    color:var(--sc-blue);

    font-size:22px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}

.value-card:hover .value-icon{

    transform:scale(1.08) rotate(5deg);

    background:var(--sc-gold-gradient);

    color:var(--sc-primary);
}

.value-card h3{

    position:relative;
    z-index:1;

    color:var(--sc-primary);

    font-size:17px;

    font-weight:700;

    margin-bottom:10px;
}

.value-card p{

    position:relative;
    z-index:1;

    color:var(--sc-muted);

    font-size:11.5px;

    line-height:1.75;
}


/* =========================================================
   COUNCIL SKILLS
   ========================================================= */

.council-skills{

    position:relative;

    padding:105px 0;

    background:
        linear-gradient(
            135deg,
            #0b2341 0%,
            #123b68 55%,
            #0b2341 100%
        );

    overflow:hidden;
}

.council-skills::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

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

    top:-270px;
    right:-160px;
}

.council-skills::after{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    border-radius:50%;

    border:1px solid rgba(200,155,60,0.10);

    bottom:-210px;
    left:-160px;
}

.council-skills .student-container{

    position:relative;
    z-index:2;
}

.skills-title{

    text-align:center;

    margin-bottom:50px;
}

.council-skills .student-label{

    color:#ffffff;

    background:
        rgba(255,255,255,0.08);
}

.skills-title h2{

    color:#ffffff;

    font-size:clamp(31px,4vw,47px);

    line-height:1.2;

    font-weight:800;
}

.skills-title h2 span{

    display:block;

    color:var(--sc-gold-light);
}


/* =========================================================
   SKILLS WRAPPER
   ========================================================= */

.skills-wrapper{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:18px;
}

.skill-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:26px;

    border-radius:20px;

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

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

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

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

.skill-item:hover{

    transform:translateY(-7px);

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

    border-color:
        rgba(255,255,255,0.20);
}

.skill-number{

    flex:0 0 52px;

    width:52px;
    height:52px;

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

    border-radius:15px;

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

    color:var(--sc-gold-light);

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;

    transition:
        transform .35s ease,
        background .35s ease;
}

.skill-item:hover .skill-number{

    transform:scale(1.08);

    background:var(--sc-gold-gradient);

    color:var(--sc-primary);
}

.skill-item h3{

    color:#ffffff;

    font-size:17px;

    font-weight:600;

    margin-bottom:7px;
}

.skill-item p{

    color:
        rgba(255,255,255,0.62);

    font-size:11.5px;

    line-height:1.75;
}


/* =========================================================
   PLEDGE SECTION
   ========================================================= */

.pledge-section{

    position:relative;

    padding:115px 0;

    background:
        linear-gradient(
            135deg,
            #071a31,
            #0b2341
        );

    overflow:hidden;
}

.pledge-glow{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(3px);
}

.pledge-glow-one{

    width:430px;
    height:430px;

    background:
        rgba(0,143,212,0.15);

    left:-210px;
    top:-220px;
}

.pledge-glow-two{

    width:360px;
    height:360px;

    background:
        rgba(200,155,60,0.12);

    right:-170px;
    bottom:-190px;
}

.pledge-content{

    position:relative;

    z-index:2;

    max-width:820px;

    margin:0 auto;

    text-align:center;
}

.pledge-icon{

    width:75px;
    height:75px;

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

    margin:0 auto 22px;

    border-radius:22px;

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

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

    color:var(--sc-gold-light);

    font-size:28px;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.18);
}

.pledge-content .student-label{

    color:#ffffff;

    background:
        rgba(255,255,255,0.08);
}

.pledge-content h2{

    color:#ffffff;

    font-size:clamp(31px,4vw,50px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:18px;
}

.pledge-content h2 span{

    display:block;

    color:var(--sc-gold-light);
}

.pledge-content > p{

    color:
        rgba(255,255,255,0.68);

    max-width:700px;

    margin:0 auto;

    font-size:14px;

    line-height:1.9;
}


/* =========================================================
   PLEDGE LINE
   ========================================================= */

.pledge-line{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin:30px auto 20px;
}

.pledge-line span{

    width:100px;
    height:1px;

    background:
        rgba(255,255,255,0.20);
}

.pledge-line i{

    color:var(--sc-gold);

    font-size:18px;
}

.pledge-content strong{

    display:block;

    color:#ffffff;

    font-size:14px;

    font-weight:500;

    font-style:italic;

    line-height:1.7;
}


/* =========================================================
   GALLERY
   ========================================================= */

.student-gallery{

    padding:105px 0;

    background:#f7f9fc;
}

.gallery-heading{

    max-width:720px;

    margin:0 auto 50px;

    text-align:center;
}

.gallery-heading h2{

    color:var(--sc-primary);

    font-size:clamp(31px,4vw,47px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:15px;
}

.gallery-heading h2 span{

    color:var(--sc-blue);
}

.gallery-heading p{

    color:var(--sc-muted);

    font-size:13px;

    line-height:1.8;
}


/* =========================================================
   GALLERY GRID
   ========================================================= */

.student-gallery-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    grid-auto-rows:230px;

    gap:17px;
}

.student-gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:21px;

    background:#e7edf4;

    box-shadow:var(--sc-shadow-sm);
}

.student-gallery-item.large{

    grid-column:span 2;

    grid-row:span 2;
}

.student-gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .7s
        cubic-bezier(.2,.7,.2,1),

        filter .5s ease;
}

.student-gallery-item:hover img{

    transform:scale(1.09);

    filter:brightness(.72);
}

.student-gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:22px;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(0,0,0,0.76)
        );

    opacity:0;

    transition:opacity .4s ease;
}

.student-gallery-item:hover
.student-gallery-overlay{

    opacity:1;
}

.student-gallery-overlay span{

    color:#ffffff;

    font-size:13px;

    font-weight:600;

    transform:translateY(12px);

    transition:
        transform .4s ease;
}

.student-gallery-item:hover
.student-gallery-overlay span{

    transform:translateY(0);
}


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

.student-cta{

    position:relative;

    padding:105px 0;

    background:
        linear-gradient(
            135deg,
            #0b2341,
            #123b68
        );

    overflow:hidden;
}

.student-cta-glow{

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        rgba(0,143,212,0.13);

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    filter:blur(15px);
}

.student-cta-content{

    position:relative;

    z-index:2;

    max-width:820px;

    margin:0 auto;

    text-align:center;
}

.student-cta-content .student-label{

    color:#ffffff;

    background:
        rgba(255,255,255,0.08);
}

.student-cta-content h2{

    color:#ffffff;

    font-size:clamp(31px,4vw,49px);

    line-height:1.2;

    font-weight:800;

    margin-bottom:18px;
}

.student-cta-content h2 span{

    display:block;

    color:var(--sc-gold-light);
}

.student-cta-content p{

    color:
        rgba(255,255,255,0.68);

    max-width:680px;

    margin:0 auto 30px;

    font-size:14px;

    line-height:1.85;
}


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

.student-cta-button{

    display:inline-flex;

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

    gap:10px;

    padding:14px 25px;

    min-width:195px;

    border-radius:50px;

    background:var(--sc-gold-gradient);

    color:var(--sc-primary);

    font-size:12px;

    font-weight:700;

    box-shadow:
        0 14px 35px
        rgba(200,155,60,0.25);

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

.student-cta-button:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 45px
        rgba(200,155,60,0.36);
}

.student-cta-button i{

    transition:
        transform .3s ease;
}

.student-cta-button:hover i{

    transform:translateX(5px);
}


/* =========================================================
   AOS PERFORMANCE
   ========================================================= */

[data-aos]{
    will-change:transform,opacity;
}


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

@media(max-width:1100px){

    .student-intro .student-container{

        gap:55px;
    }

    .student-image-frame img{

        height:430px;
    }

    .student-floating-card{

        right:-20px;
    }

    .council-role .student-container{

        gap:55px;
    }

    .role-image-frame img{

        height:430px;
    }

    .values-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .student-gallery-grid{

        grid-auto-rows:210px;
    }
}


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

@media(max-width:900px){

    .student-intro .student-container{

        grid-template-columns:1fr;

        gap:55px;
    }

    .student-image{

        width:100%;
        max-width:650px;

        margin:0 auto;
    }

    .student-content{

        max-width:750px;

        margin:0 auto;
    }

    .student-content h1{

        font-size:47px;
    }

    .council-role .student-container{

        grid-template-columns:1fr;

        gap:55px;
    }

    .role-image{

        width:100%;
        max-width:650px;

        margin:0 auto;
    }

    .role-content{

        max-width:750px;

        margin:0 auto;
    }

    .session-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .skills-wrapper{

        grid-template-columns:1fr;
    }

    .student-gallery-grid{

        grid-template-columns:
            repeat(2,1fr);

        grid-auto-rows:240px;
    }
}


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

@media(max-width:600px){

    .student-container{

        width:90%;
    }


    /* INTRO */

    .student-intro{

        padding:60px 0 75px;
    }

    .student-intro .student-container{

        gap:42px;
    }

    .student-image-frame{

        padding:9px;

        border-radius:20px;
    }

    .student-image-frame img{

        height:340px;

        border-radius:15px;
    }

    .student-image-frame::before{

        width:75px;
        height:75px;

        left:-14px;
        bottom:-14px;

        border-radius:15px;
    }

    .student-image-frame::after{

        width:55px;
        height:55px;

        right:-19px;
        top:-19px;

        border-width:9px;
    }


    /* FLOATING CARD */

    .student-floating-card{

        right:10px;
        bottom:17px;

        padding:10px 12px;

        border-radius:13px;

        gap:8px;
    }

    .student-floating-card > i{

        width:34px;
        height:34px;

        border-radius:9px;

        font-size:14px;
    }

    .student-floating-card strong{

        font-size:9px;
    }

    .student-floating-card span{

        font-size:7px;
    }


    /* LABEL */

    .student-label{

        padding:7px 12px;

        font-size:9px;

        letter-spacing:1px;

        margin-bottom:14px;
    }


    /* INTRO TEXT */

    .student-content h1{

        font-size:34px;

        letter-spacing:-.7px;

        line-height:1.15;

        margin-bottom:18px;
    }

    .student-content > p{

        font-size:12.5px;

        line-height:1.8;
    }


    /* HIGHLIGHTS */

    .student-highlights{

        grid-template-columns:
            repeat(2,1fr);

        gap:10px;

        margin-top:23px;
    }

    .student-highlight{

        min-height:90px;

        padding:12px 7px;
    }

    .student-highlight i{

        width:36px;
        height:36px;

        font-size:14px;

        border-radius:11px;
    }

    .student-highlight span{

        font-size:10px;
    }


    /* SESSION */

    .council-session{

        padding:72px 0;
    }

    .session-heading{

        margin-bottom:35px;
    }

    .session-heading h2{

        font-size:30px;
    }

    .session-heading p{

        font-size:12px;

        line-height:1.75;
    }

    .session-grid{

        grid-template-columns:1fr;

        gap:15px;
    }

    .session-card{

        min-height:220px;

        padding:27px 22px;

        border-radius:19px;
    }

    .session-icon{

        width:54px;
        height:54px;

        font-size:19px;

        border-radius:15px;

        margin-bottom:19px;
    }

    .session-card h3{

        font-size:17px;
    }

    .session-card p{

        font-size:11.5px;

        line-height:1.75;
    }


    /* ROLE */

    .council-role{

        padding:75px 0;
    }

    .council-role .student-container{

        gap:40px;
    }

    .role-image-frame img{

        height:340px;

        border-radius:20px;
    }

    .role-image-frame::before{

        right:-12px;
        bottom:-12px;

        border-radius:24px;
    }

    .role-badge{

        left:12px;
        bottom:17px;

        padding:10px 13px;

        border-radius:11px;

        font-size:9px;
    }

    .role-badge i{

        font-size:14px;
    }

    .role-content h2{

        font-size:30px;
    }

    .role-content > p{

        font-size:12px;

        line-height:1.8;
    }

    .responsibility-list{

        gap:9px;
    }

    .responsibility-list li{

        padding:11px 12px;

        gap:10px;

        border-radius:12px;
    }

    .responsibility-list li i{

        flex-basis:22px;

        width:22px;
        height:22px;

        font-size:9px;
    }

    .responsibility-list li span{

        font-size:10.5px;
    }


    /* VALUES */

    .leadership-values{

        padding:75px 0;
    }

    .values-heading{

        margin-bottom:35px;
    }

    .values-heading h2{

        font-size:30px;
    }

    .values-heading p{

        font-size:12px;

        line-height:1.75;
    }

    .values-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:11px;
    }

    .value-card{

        padding:23px 10px;

        border-radius:16px;
    }

    .value-icon{

        width:50px;
        height:50px;

        border-radius:14px;

        font-size:18px;

        margin-bottom:13px;
    }

    .value-card h3{

        font-size:14px;
    }

    .value-card p{

        font-size:9.5px;

        line-height:1.65;
    }


    /* SKILLS */

    .council-skills{

        padding:75px 0;
    }

    .skills-title{

        margin-bottom:35px;
    }

    .skills-title h2{

        font-size:30px;
    }

    .skill-item{

        padding:20px 17px;

        gap:14px;

        border-radius:17px;
    }

    .skill-number{

        flex-basis:43px;

        width:43px;
        height:43px;

        border-radius:12px;

        font-size:10px;
    }

    .skill-item h3{

        font-size:14px;
    }

    .skill-item p{

        font-size:10px;

        line-height:1.65;
    }


    /* PLEDGE */

    .pledge-section{

        padding:80px 0;
    }

    .pledge-icon{

        width:62px;
        height:62px;

        border-radius:18px;

        font-size:22px;
    }

    .pledge-content h2{

        font-size:30px;
    }

    .pledge-content > p{

        font-size:12px;

        line-height:1.8;
    }

    .pledge-line{

        margin:25px auto 17px;
    }

    .pledge-line span{

        width:55px;
    }

    .pledge-content strong{

        font-size:11px;
    }


    /* GALLERY */

    .student-gallery{

        padding:75px 0;
    }

    .gallery-heading{

        margin-bottom:35px;
    }

    .gallery-heading h2{

        font-size:30px;
    }

    .gallery-heading p{

        font-size:11.5px;
    }

    .student-gallery-grid{

        grid-template-columns:
            repeat(2,1fr);

        grid-auto-rows:155px;

        gap:9px;
    }

    .student-gallery-item{

        border-radius:13px;
    }

    .student-gallery-item.large{

        grid-column:span 2;

        grid-row:span 2;
    }

    .student-gallery-overlay{

        padding:13px;
    }

    .student-gallery-overlay span{

        font-size:10px;
    }


    /* CTA */

    .student-cta{

        padding:75px 0;
    }

    .student-cta-content h2{

        font-size:30px;
    }

    .student-cta-content p{

        font-size:12px;

        line-height:1.75;
    }

    .student-cta-button{

        min-width:170px;

        padding:13px 19px;

        font-size:10.5px;
    }

}


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

@media(max-width:380px){

    .student-container{

        width:92%;
    }

    .student-image-frame img{

        height:290px;
    }

    .student-content h1{

        font-size:29px;
    }

    .session-heading h2,
    .role-content h2,
    .values-heading h2,
    .skills-title h2,
    .pledge-content h2,
    .gallery-heading h2,
    .student-cta-content h2{

        font-size:27px;
    }

    .student-highlight{

        min-height:82px;
    }

    .student-highlight i{

        width:32px;
        height:32px;

        font-size:12px;
    }

    .student-highlight span{

        font-size:9px;
    }

    .role-image-frame img{

        height:290px;
    }

    .student-gallery-grid{

        grid-auto-rows:130px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
    }
}