/* =========================================================
   MAIN SECTION
========================================================= */

.student-section{
    width:100%;
    max-width:1450px;
    margin:auto;
    padding:40px 4% 36px !important;
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(circle at 5% 12%,rgba(16,41,103,.09),transparent 24%),
        radial-gradient(circle at 96% 85%,rgba(22,128,68,.09),transparent 25%),
        linear-gradient(135deg,#ffffff 0%,#f7fafc 50%,#eef5f8 100%);
}

/* =========================================================
   BACKGROUND
========================================================= */

.student-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-210px;
    top:-195px;
    border:62px solid rgba(16,41,103,.035);
    border-radius:50%;
    pointer-events:none;
}

.student-section::after{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    left:-185px;
    bottom:-195px;
    border:48px solid rgba(22,128,68,.035);
    border-radius:50%;
    pointer-events:none;
}

.bg-grid{
    position:absolute;
    inset:0;
    opacity:.032;

    background-image:
        linear-gradient(#102967 1px,transparent 1px),
        linear-gradient(90deg,#102967 1px,transparent 1px);

    background-size:45px 45px;
    pointer-events:none;
}

.decor-dot{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    opacity:.18;
}

.dot-1{
    left:11%;
    top:20%;
    background:#168044;
}

.dot-2{
    left:17%;
    bottom:17%;
    background:#102967;
}

.dot-3{
    right:16%;
    top:43%;
    background:#d49a20;
}

.dot-4{
    right:8%;
    bottom:16%;
    background:#168044;
}

/* =========================================================
   HEADING
========================================================= */

.heading{
    position:relative;
    z-index:5;
    text-align:center;
    margin-bottom:27px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:7px 15px;
    border-radius:30px;

    background:#e9f5ee;
    color:#168044;

    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.eyebrow::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#168044;
}

.heading h2{
    margin:10px 0 5px;
    color:#102967;
    font-size:clamp(28px,3.3vw,44px);
    line-height:1;
    font-weight:900;
}

.heading h2 span{
    color:#168044;
}

.heading p{
    margin:8px auto 0;
    max-width:680px;
    color:#66737c;
    font-size:14px;
    line-height:1.5;
}

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

.testimonial-stage{
    position:relative;
    z-index:5;
    width:100%;
    min-height:375px;
}

/* =========================================================
   CARDS
========================================================= */

.cards-stage{
    position:absolute;
    inset:0;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;

    opacity:1;

    transform:scale(1);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.2,.8,.2,1);

    pointer-events:auto;
}

.cards-stage.hide{
    opacity:0;
    transform:scale(.86);
    pointer-events:none;
}

.student-card{
    width:100%;
    height:180px;
    perspective:1500px;
    cursor:pointer;
}

.flip-inner{
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;

    transition:
        transform 1s cubic-bezier(.45,.05,.2,1);
}

.student-card.flipped .flip-inner{
    transform:rotateY(180deg);
}

/* =========================================================
   FRONT + BACK
========================================================= */

.card-front,
.card-back{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    border-radius:17px;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

/* =========================================================
   FRONT CARD
========================================================= */

.card-front{
    display:grid;

    grid-template-columns:43% 57%;

    background:#ffffff;

    border:1px solid #d9e1e6;

    box-shadow:
        0 9px 28px rgba(16,41,103,.10);

    isolation:isolate;
}

.card-front::before{
    content:"";

    position:absolute;
    left:0;
    top:0;
    bottom:0;

    width:5px;

    background:
        linear-gradient(
            to bottom,
            #102967,
            #168044
        );

    z-index:10;
}

.card-front::after{
    content:"";

    position:absolute;

    width:85px;
    height:85px;

    right:-45px;
    top:-45px;

    border:15px solid rgba(22,128,68,.055);

    border-radius:50%;

    z-index:1;
}

/* =========================================================
   PHOTO
========================================================= */

.photo{
    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#e7eef2;

    clip-path:
        polygon(
            0 0,
            100% 0,
            94% 100%,
            0 100%
        );
}

.front-photo{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center 15%;

    transform:scale(1);

    transition:
        transform .5s ease,
        object-position .5s ease;
}

/* =========================================================
   INDIVIDUAL FRONT PHOTO POSITION
========================================================= */

.student-card[data-student="yash"]
.front-photo{
    object-position:43% 9%;
    transform:scale(.94);
}

.student-card[data-student="nandini"]
.front-photo{
    object-position:60% 10%;
    transform:scale(.94);
}

.student-card[data-student="chattu"]
.front-photo{
    object-position:48% 8%;
    transform:scale(.94);
}

.student-card[data-student="ravathi"]
.front-photo{
    object-position:48% 12%;
    transform:scale(.94);
}

.student-card:hover .front-photo{
    transform:scale(.98);
}

/* =========================================================
   PHOTO OVERLAY
========================================================= */

.photo::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:34%;

    background:
        linear-gradient(
            transparent,
            rgba(16,41,103,.28)
        );

    pointer-events:none;
}

/* =========================================================
   STATE
========================================================= */

.state{
    position:absolute;
    z-index:6;

    left:10px;
    top:10px;

    padding:5px 9px;

    border-radius:20px;

    background:#168044;
    color:#ffffff;

    font-size:8px;
    font-weight:900;

    letter-spacing:.3px;
}

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

.content{
    position:relative;
    z-index:3;

    min-width:0;

    padding:
        15px
        18px
        10px
        17px;

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

.quote-mark{
    position:absolute;

    right:12px;
    top:2px;

    color:#168044;
    opacity:.12;

    font-family:Georgia,serif;

    font-size:64px;
    line-height:1;
}

.student-number{
    position:absolute;

    right:13px;
    bottom:5px;

    color:#102967;
    opacity:.07;

    font-size:28px;
    font-weight:900;
}

.name{
    margin:0;

    padding-right:25px;

    color:#102967;

    font-size:18px;
    line-height:1.08;
    font-weight:900;
}

.course{
    margin-top:4px;

    color:#168044;

    font-size:8px;
    font-weight:900;

    letter-spacing:.4px;
    text-transform:uppercase;
}

.ug-college{
    margin-top:5px;

    color:#687680;

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

    line-height:1.3;

    padding-right:5px;
}

.ug-college strong{
    color:#102967;
    font-weight:900;
}

/* =========================================================
   TESTIMONIAL
========================================================= */

.feedback{
    margin:7px 0;

    color:#4f5d66;

    font-size:10.5px;
    line-height:1.4;

    display:-webkit-box;

    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.bottom{
    margin-top:auto;

    padding-top:6px;

    border-top:1px solid #edf0f2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:5px;
}

.location{
    color:#7b878f;

    font-size:7px;
    font-weight:800;
}

.flip-hint{
    color:#102967;

    font-size:7px;
    font-weight:900;
}

.flip-hint span{
    color:#168044;
    font-size:12px;
}

/* =========================================================
   BACK CARD
========================================================= */

.card-back{
    transform:rotateY(180deg);
    background:#102967;
}

.back-photo{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center 20%;

    transform:scale(1);

    transition:
        transform .7s ease,
        object-position .7s ease;
}

.student-card[data-student="yash"]
.back-photo{
    object-position:50% 20%;
}

.student-card[data-student="nandini"]
.back-photo{
    object-position:53% 21%;
}

.student-card[data-student="chattu"]
.back-photo{
    object-position:50% 19%;
}

.student-card[data-student="ravathi"]
.back-photo{
    object-position:50% 21%;
}

.card-back::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(5,17,42,.95) 0%,
            rgba(5,17,42,.55) 42%,
            rgba(5,17,42,.02) 82%
        );

    pointer-events:none;
}

.card-back::before{
    content:"";

    position:absolute;

    width:115px;
    height:115px;

    right:-45px;
    top:-55px;

    border:
        18px solid
        rgba(255,255,255,.10);

    border-radius:50%;

    z-index:3;
}

.back-info{
    position:absolute;

    z-index:5;

    left:18px;
    right:18px;
    bottom:14px;

    color:#ffffff;
}

.back-info .badge{
    display:inline-block;

    padding:5px 8px;

    border-radius:20px;

    background:#168044;

    color:#ffffff;

    font-size:8px;
    font-weight:900;
}

.back-info h3{
    margin:
        5px 0 2px;

    font-size:19px;
    line-height:1.1;

    font-weight:900;
}

.back-info p{
    margin:0;

    color:#dce5ed;

    font-size:9px;
}

.back-ug{
    margin-top:4px;

    color:#c8d6df;

    font-size:8px;
}

/* =========================================================
   GROUP PHOTO
========================================================= */

.group-stage{
    position:absolute;
    inset:0;

    opacity:0;

    transform:
        scale(.80)
        translateY(25px);

    pointer-events:none;

    transition:
        opacity 1s ease,
        transform 1.2s cubic-bezier(.2,.8,.2,1);
}

.group-stage.show{
    opacity:1;

    transform:
        scale(1)
        translateY(0);

    pointer-events:auto;
}

.group-photo-card{
    position:relative;

    width:100%;
    height:100%;

    min-height:365px;

    overflow:hidden;

    border-radius:22px;

    border:5px solid #ffffff;

    background:#102967;

    box-shadow:
        0 18px 45px
        rgba(16,41,103,.18);
}

.group-photo{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transform:scale(1.02);

    transition:
        transform 10s ease;
}

.group-stage.show .group-photo{
    transform:scale(1.06);
}

.group-photo-card::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(5,17,42,.91) 0%,
            rgba(5,17,42,.30) 48%,
            rgba(5,17,42,.02) 80%
        );
}

.group-circle{
    position:absolute;

    z-index:3;

    width:150px;
    height:150px;

    right:-50px;
    top:-65px;

    border:
        22px solid
        rgba(255,255,255,.12);

    border-radius:50%;
}

.group-content{
    position:absolute;

    z-index:5;

    left:35px;
    right:35px;
    bottom:30px;

    color:#ffffff;

    text-align:center;
}

.group-label{
    display:inline-block;

    padding:6px 13px;

    border-radius:20px;

    background:#168044;

    font-size:9px;
    font-weight:900;

    letter-spacing:1px;
}

.group-content h2{
    margin:
        10px 0 5px;

    font-size:
        clamp(25px,4vw,42px);

    line-height:1;

    font-weight:900;
}

.group-content h2 span{
    color:#74d69c;
}

.group-content p{
    margin:0 auto;

    max-width:650px;

    color:#e5edf4;

    font-size:12px;
    line-height:1.5;
}

/* =========================================================
   PAN INDIA MESSAGE
========================================================= */

.pan-india-message{
    position:relative;

    z-index:5;

    max-width:900px;

    margin:
        22px auto 0;

    padding:
        13px 20px;

    display:flex;

    align-items:center;

    gap:14px;

    background:
        rgba(255,255,255,.94);

    border:
        1px solid
        #dce5e9;

    border-radius:13px;

    box-shadow:
        0 6px 20px
        rgba(16,41,103,.07);
}

.pan-india-message::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:4px;

    border-radius:
        13px 0 0 13px;

    background:
        linear-gradient(
            to bottom,
            #102967,
            #168044
        );
}

.diversity-icon{
    width:38px;
    height:38px;

    flex-shrink:0;

    display:flex;

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

    border-radius:50%;

    background:#e9f5ee;

    color:#168044;

    font-size:20px;
    font-weight:900;
}

.diversity-content{
    flex:1;
    min-width:0;
}

.diversity-content h3{
    margin:0;

    color:#102967;

    font-size:13px;
    font-weight:900;
}

.diversity-content h3 span{
    color:#168044;
}

.diversity-content p{
    margin:4px 0 0;

    color:#66737c;

    font-size:9px;
    line-height:1.45;
}

.diversity-dots{
    display:flex;
    gap:5px;
}

.diversity-dots span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#168044;
    opacity:.4;
}

.diversity-dots span:nth-child(2){
    background:#102967;
}

.diversity-dots span:nth-child(3){
    background:#d49a20;
}

.diversity-dots span:nth-child(4){
    background:#168044;
}

.diversity-dots span:nth-child(5){
    background:#102967;
}

.stage-status{
    position:relative;

    z-index:5;

    margin-top:8px;

    text-align:center;

    color:#9aa4ab;

    font-size:7px;
}


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

@media(max-width:850px){

    .student-section{
        padding:
            32px 22px 34px;
    }

    .student-card{
        height:175px;
    }

    .heading h2{
        font-size:28px;
    }

    .heading p{
        font-size:11px;
    }
}


/* =========================================================
   MOBILE
   FULL TESTIMONIAL FIX
========================================================= */

@media(max-width:600px){

    .student-section{
        padding:
            27px 9px 30px;
    }

    .heading{
        margin-bottom:20px;
    }

    .eyebrow{
        font-size:7px;
        padding:5px 10px;
    }

    .heading h2{
        font-size:23px;
        line-height:1.05;
    }

    .heading p{
        font-size:9px;
        padding:0 10px;
        line-height:1.4;
    }

    /* Increased card area */
    .testimonial-stage{
        min-height:405px;
    }

    .cards-stage{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:9px;

        align-items:stretch;
    }

    .student-card{
        height:195px;
        min-height:195px;
    }

    /* =====================================================
       PHOTO AREA
    ===================================================== */

    .card-front{
        grid-template-columns:
            42% 58%;
    }

    .photo{
        clip-path:
            polygon(
                0 0,
                100% 0,
                95% 100%,
                0 100%
            );
    }

    .front-photo{
        object-fit:cover;
        transform:scale(.95);
    }

    .student-card[data-student="yash"]
    .front-photo{
        object-position:43% 7%;
        transform:scale(.90);
    }

    .student-card[data-student="nandini"]
    .front-photo{
        object-position:60% 8%;
        transform:scale(.90);
    }

    .student-card[data-student="chattu"]
    .front-photo{
        object-position:48% 6%;
        transform:scale(.90);
    }

    .student-card[data-student="ravathi"]
    .front-photo{
        object-position:48% 9%;
        transform:scale(.90);
    }

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

    .content{
        padding:
            10px 9px 7px 9px;

        justify-content:flex-start;
    }

    .name{
        font-size:11px;
        line-height:1.08;
        padding-right:8px;
        margin-bottom:1px;
    }

    .course{
        font-size:5.6px;
        line-height:1.2;
        margin-top:3px;
    }

    .ug-college{
        font-size:5.9px;
        line-height:1.25;
        margin-top:4px;
        padding-right:3px;
    }

    /* =====================================================
       FULL TESTIMONIAL
       NO LINE CLAMP ON MOBILE
    ===================================================== */

    .feedback{
        font-size:6.7px;
        line-height:1.38;

        margin:
            7px 0 5px;

        display:block;

        overflow:visible;

        -webkit-line-clamp:unset;
        -webkit-box-orient:unset;

        max-height:none;
        height:auto;
    }

    .bottom{
        margin-top:auto;
        padding-top:5px;
        min-height:17px;
    }

    .location{
        font-size:4.8px;
    }

    .flip-hint{
        font-size:4.8px;
    }

    .flip-hint span{
        font-size:8px;
    }

    .state{
        left:5px;
        top:5px;

        padding:
            4px 6px;

        font-size:4.5px;

        z-index:20;
    }

    .student-number{
        font-size:18px;
        bottom:4px;
    }

    .quote-mark{
        font-size:48px;
        right:8px;
        top:0;
    }

    /* =====================================================
       BACK
    ===================================================== */

    .back-info{
        left:11px;
        right:11px;
        bottom:11px;
    }

    .back-info .badge{
        font-size:5px;
        padding:4px 6px;
    }

    .back-info h3{
        font-size:13px;
        margin-top:4px;
    }

    .back-info p{
        font-size:5.5px;
    }

    .back-ug{
        font-size:5px;
        margin-top:3px;
    }

    /* =====================================================
       GROUP PHOTO
    ===================================================== */

    .group-photo-card{
        min-height:325px;
        border-radius:16px;
        border-width:3px;
    }

    .group-content{
        left:14px;
        right:14px;
        bottom:19px;
    }

    .group-label{
        font-size:6px;
        padding:5px 9px;
    }

    .group-content h2{
        font-size:24px;
        margin:7px 0 4px;
    }

    .group-content p{
        font-size:7.5px;
        line-height:1.4;
    }

    /* =====================================================
       PAN INDIA MESSAGE
    ===================================================== */

    .pan-india-message{
        margin-top:14px;
        padding:10px;
        gap:8px;
    }

    .diversity-icon{
        width:28px;
        height:28px;
        font-size:13px;
    }

    .diversity-content h3{
        font-size:6.8px;
    }

    .diversity-content p{
        font-size:5.7px;
        line-height:1.4;
    }

    .diversity-dots{
        display:none;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:380px){

    .student-section{
        padding-left:6px;
        padding-right:6px;
    }

    .student-card{
        height:185px;
        min-height:185px;
    }

    .testimonial-stage{
        min-height:385px;
    }

    .card-front{
        grid-template-columns:
            43% 57%;
    }

    .content{
        padding:
            9px 7px 6px 8px;
    }

    .name{
        font-size:9.6px;
    }

    .course{
        font-size:5px;
    }

    .ug-college{
        font-size:5.2px;
    }

    .feedback{
        font-size:6px;
        line-height:1.35;
        margin-top:6px;
    }

    .location{
        font-size:4.4px;
    }

    .flip-hint{
        font-size:4.4px;
    }

    .group-photo-card{
        min-height:275px;
    }

    .group-content h2{
        font-size:21px;
    }

    .group-content p{
        font-size:6.8px;
    }
}