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

* {
    margin: 0;
    padding: 0;
    box-sizing: 20px;
    font-family: 'body-font', bold, Geneva, bold, sans-serif;
}

:root {
    --primary-color: #093265;
    --accent-color: #f4a261;
    --secondary-color: #134074;
    --light-bg: #f8f9fa;
    --text-color: #333;
    --white: #ffffff;
    --green-action: #00a859;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--text-color);
    line-height: 1.8;
    background: #ffffff;
}







.college-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background-image: url("image.jpeg");
    padding: 0%;
    shape-image-threshold: var(--green-action);
        /* linear-gradient(rgba(4, 25, 55, 0.92), */
            /* rgba(3, 18, 40, 0.96)), */
    

    background-size: cover;
    background-position: center;
}




.college-hero::before {
    content: "MR COLLEGE";
    position: absolute;
    top: 50%;
    left: 50%;

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

    font-size: clamp(80px, 15vw, 220px);
    font-weight: 900;
    letter-spacing: 15px;

    color: rgba(255, 255, 255, 0.035);
    white-space: nowrap;

    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center,
            rgba(255, 170, 60, 0.12),
            transparent 60%);
}

.hero-content {
    position: relative;
    z-index: 2;

    max-width: 1000px;
    width: 90%;

    text-align: center;
    color: white;
}

.hero-tag {
    display: inline-block;

    padding: 8px 22px;
    border-radius: 30px;

    background: rgba(255, 170, 60, 0.15);
    border: 1px solid rgba(255, 190, 80, 0.5);

    color: #ffc15c;
    font-weight: 700;
    letter-spacing: 1px;
}

.hero-content h1 {
    margin: 20px 0 10px;

    font-size: clamp(45px, 7vw, 90px);
    line-height: 0.95;

    font-weight: 900;
    letter-spacing: 2px;
}

.hero-content h1 span {
    color: #f6a642;
}

.hero-subtitle {
    font-size: clamp(18px, 2vw, 26px);
    margin: 25px 0;

    font-weight: 600;
}

.hero-info {
    margin: 25px auto;
    font-size: 17px;
    line-height: 1.8;
}

.hero-info p {
    margin: 4px 0;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.hero-btn {
    display: inline-block;

    padding: 14px 30px;

    border-radius: 8px;

    text-decoration: none;
    font-weight: 800;

    transition: 0.3s;
}

.hero-btn.primary {
    background: #f6a642;
    color: #071d3d;
}

.hero-btn.whatsapp {
    background: #20c76a;
    color: white;
}

.hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {

    .college-hero {
        min-height: 650px;
    }

    .hero-content h1 {
        font-size: 48px;
    }

    .hero-info {
        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-btn {
        width: 80%;
    }
}



.academy-slider {
    width: 100%;
    overflow: hidden;
    background: #21528a;
    padding: 20px 0;
    white-space: nowrap;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: academyScroll 18s linear infinite;
}

.academy-slide {
    display: flex;
    align-items: center;
    gap: 60px;
    padding-right: 60px;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.academy-slide span:first-child {
    color: #ffb347;
    font-size: 34px;
}

@keyframes academyScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}




/* =====================================================
   HERO SECTION
===================================================== */

.hero {
    position: relative;
    width: 100%;
    min-height: 650px;

    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(400px, 0.9fr);

    align-items: center;
    gap: 60px;

    padding: 80px 7%;
    box-sizing: border-box;

    overflow: hidden;

    background: #061b35;
}


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

.hero-bg {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;

    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(3, 20, 40, 0.35);

    z-index: 1;
}


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

.hero-content {
    position: relative;
    z-index: 2;

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

    margin: 0 auto;
}


/* =====================================================
   ADMISSION BADGE
===================================================== */

.admission-badge {
    display: inline-flex;
    align-items: center;

    padding: 15px 28px;

    margin-bottom: 30px;

    background: #ffa34d;
    color: #06203d;

    border-radius: 50px;

    font-size: 18px;
    font-weight: 1000px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}


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

.hero-content h1 {
    margin: 0;

    font-size: clamp(48px, 5vw, 78px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2px;

    color: #ffffff;
}

.hero-content h1 span {
    color: #ff9945;
}


/* =====================================================
   HERO DESCRIPTION
===================================================== */

.hero-content>p {
    margin: 28px 0 38px;

    font-size: 22px;

    line-height: 1.5;

    color: #e5edf7;

    max-width: 650px;
}


/* =====================================================
   BUTTONS
===================================================== */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 17px;

    flex-wrap: wrap;

    margin-bottom: 35px;
}

.hero-buttons a {
    display: inline-flex;

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

    min-width: 150px;
    height: 64px;

    padding: 0 28px;

    box-sizing: border-box;

    border-radius: 10px;

    text-decoration: none;

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

    transition: all 0.3s ease;
}


/* Apply */

.btn-primary {
    background: #ff9b48;
    color: #06203d;

    box-shadow: 0 8px 20px rgba(255, 155, 72, 0.25);
}

.btn-primary:hover {
    transform: translateY(-4px);

    background: #ffad63;
}


/* Call */

.btn-call {
    background: #ffffff;
    color: #06203d;
}

.btn-call:hover {
    transform: translateY(-4px);

    background: #edf3f8;
}


/* WhatsApp */

.btn-whatsapp {
    background: #16d66a;
    color: #ffffff;
}

.btn-whatsapp:hover {
    transform: translateY(-4px);

    background: #10bd5a;
}


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

.hero-features {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 10px;
}

.hero-features span {
    display: inline-flex;

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

    min-height: 42px;

    padding: 0 20px;

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

    border-radius: 30px;

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

    color: #ffffff;

    font-size: 16px;

    white-space: nowrap;

    transition: all 0.3s ease;
}

.hero-features span:hover {
    background: rgba(255, 255, 255, 0.10);

    transform: translateY(-3px);
}


/* =====================================================
   RIGHT SIDE IMAGE
===================================================== */

.hero-image {
    position: relative;

    z-index: 2;

    width: 100%;

    display: flex;

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

.hero-image img {
    display: block;

    width: 100%;

    max-width: 620px;

    height: 380px;

    object-fit: cover;

    border-radius: 20px;

    border: 3px solid rgba(255, 255, 255, 0.65);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35);

    transition: transform 0.4s ease;
}

.hero-image img:hover {
    transform: scale(1.02);
}


/* =====================================================
   LARGE SCREEN
===================================================== */

@media (min-width: 1400px) {

    .hero {
        padding-left: 8%;
        padding-right: 8%;

        grid-template-columns:
            minmax(0, 1.05fr) minmax(500px, 0.95fr);

        gap: 70px;
    }

    .hero-content h1 {
        font-size: 78px;
    }

    .hero-image img {
        height: 400px;
    }
}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1200px) {

    .hero {
        grid-template-columns:
            minmax(0, 1fr) minmax(350px, 0.8fr);

        gap: 40px;

        padding: 70px 5%;
    }

    .hero-content h1 {
        font-size: 58px;
    }

    .hero-content>p {
        font-size: 19px;
    }

    .hero-image img {
        height: 350px;
    }
}


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

@media (max-width: 900px) {

    .hero {
        grid-template-columns: 1fr;

        min-height: auto;

        padding: 70px 6%;

        text-align: center;
    }

    .hero-content {
        max-width: 750px;
    }

    .hero-content h1 {
        font-size: clamp(45px, 8vw, 65px);
    }

    .hero-content>p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-features {
        justify-content: center;
    }

    .hero-image {
        margin-top: 15px;
    }

    .hero-image img {
        max-width: 650px;
        height: 380px;
    }
}


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

@media (max-width: 600px) {

    .hero {
        width: 100%;

        padding: 55px 20px 60px;

        gap: 40px;
    }

    .admission-badge {
        font-size: 14px;

        padding: 12px 20px;

        margin-bottom: 22px;
    }

    .hero-content h1 {
        font-size: 42px;

        line-height: 1.08;

        letter-spacing: -1px;
    }

    .hero-content>p {
        font-size: 17px;

        margin: 22px auto 30px;
    }

    .hero-buttons {
        flex-direction: column;

        width: 100%;

        gap: 12px;
    }

    .hero-buttons a {
        width: 100%;

        max-width: 300px;

        height: 55px;

        font-size: 16px;
    }

    .hero-features {
        gap: 8px;

        justify-content: center;
    }

    .hero-features span {
        min-height: 38px;

        padding: 0 14px;

        font-size: 14px;
    }

    .hero-image img {
        width: 100%;

        height: 260px;

        border-radius: 16px;
    }
}


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

@media (max-width: 400px) {

    .hero {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .hero-image img {
        height: 220px;
    }
}





/* =================================================
   HERO SECTION
================================================= */

.hero {

    position: relative;

    min-height: 720px;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    overflow: hidden;

    padding: 70px 6%;

    box-sizing: border-box;

    background: #061b35;
}


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

.hero-bg {

    position: absolute;

    inset: 0;

    background-image: url("banner.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 0;
}


/* =================================================
   DARK OVERLAY
================================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,
            rgba(3, 24, 48, 0.88),
            rgba(3, 24, 48, 0.55),
            rgba(3, 24, 48, 0.25));

    z-index: 1;
}


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

.hero-content {

    position: relative;

    z-index: 2;

    width: 52%;

    color: white;

    padding: 30px 0;
}


.admission-badge {

    display: inline-block;

    background: #ffae62;

    color: #102c4a;

    font-weight: 700;

    padding: 12px 22px;

    border-radius: 30px;

    margin-bottom: 25px;

    font-size: 16px;
}


.hero-content h1 {

    font-size: clamp(45px, 5vw, 75px);

    line-height: 1.05;

    margin: 0 0 20px;

    font-weight: 800;

    text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
}


.hero-content h1 span {

    color: #ff9d4d;
}


.hero-content>p {

    font-size: 21px;

    margin-bottom: 30px;

    color: #ffffff;
}


/* =================================================
   BUTTONS
================================================= */

.hero-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    margin-bottom: 30px;
}


.hero-buttons a {

    text-decoration: none;

    padding: 15px 25px;

    border-radius: 8px;

    font-weight: 700;

    transition: 0.3s;

    display: inline-block;
}


.btn-primary {

    background: #ff9f4a;

    color: #122b46;
}


.btn-call {

    background: white;

    color: #173653;
}


.btn-whatsapp {

    background: #20d66b;

    color: white;
}


.hero-buttons a:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}


/* =================================================
   COURSE TAGS
================================================= */

.hero-features {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}


.hero-features span {

    background: rgba(10, 42, 75, 0.75);

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

    padding: 10px 18px;

    border-radius: 25px;

    color: white;

    font-size: 15px;

    backdrop-filter: blur(5px);
}


/* =================================================
   RIGHT IMAGE
================================================= */

/* .hero-image { */
/*  */
    /* position: relative; */
/*  */
    /* z-index: 2; */
/*  */
    /* width: 40%; */
/*  */
    /* max-width: 560px; */
/*  */
/* } */
/*  */
/*  */
/* .hero-image img { */
/*  */
    /* width: 100%; */
/*  */
    /* display: block; */
/*  */
    /* border-radius: 18px; */
/*  */
    /* box-shadow: */
/*  */
        /* 0 20px 50px rgba(0, 0, 0, 0.45); */
/*  */
    /* border: 3px solid rgba(255, 255, 255, 0.7); */
/* } */
/*  */

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

/* @media (max-width: 900px) { */
/*  */
    /* .hero { */
/*  */
        /* flex-direction: column; */
/*  */
        /* min-height: auto; */
/*  */
        /* padding: 50px 20px; */
/*  */
    /* } */
/*  */
/*  */
    /* .hero-content { */
/*  */
        /* width: 100%; */
/*  */
        /* text-align: center; */
/*  */
    /* } */
/*  */
/*  */
    /* .hero-buttons { */
/*  */
        /* justify-content: center; */
/*  */
    /* } */
/*  */
/*  */
    /* .hero-features { */
/*  */
        /* justify-content: center; */
/*  */
    /* } */
/*  */
/*  */
    /* .hero-image { */
/*  */
        /* width: 90%; */
/*  */
        /* max-width: 500px; */
/*  */
        /* margin-top: 35px; */
/*  */
    /* } */
/*  */
/*  */
    /* .hero-content h1 { */
/*  */
        /* font-size: 42px; */
/*  */
    /* } */
/*  */
/* } */
/*  */
/*  */
/* @media (max-width: 500px) { */
/*  */
    /* .hero { */
/*  */
        /* padding: 40px 15px; */
/*  */
    /* } */
/*  */
/*  */
    /* .hero-content h1 { */
/*  */
        /* font-size: 35px; */
/*  */
    /* } */
/*  */
/*  */
    /* .hero-content>p { */
/*  */
        /* font-size: 17px; */
/*  */
    /* } */
/*  */
/*  */
    /* .hero-buttons a { */
/*  */
        /* padding: 12px 17px; */
/*  */
        /* font-size: 14px; */
/*  */
    /* } */
/*  */
/*  */
    /* .hero-image { */
/*  */
        /* width: 100%; */
/*  */
    /* } */
/*  */
/* } */
/*  */
/*  */

/* ================= PROGRAMS SECTION ================= */

.home-programs {
    width: 100%;
    max-width: 1350px;
    margin: 60px auto;
    padding: 20px 10px;
    box-sizing: border-box;
    text-align: center;
}

.home-programs h2 {
    font-size: 36px;
    margin-bottom: 10px;
    color: #222;
}

.home-programs>p {
    font-size: 18px;
    color: #666;
    margin-bottom: 35px;
}


/* ================= 2 COLUMN GRID ================= */

.program-grid {
    display: grid;

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

    /* gap between cards */
    gap: 20px;

    width: 100%;
}


/* ================= PROGRAM CARD ================= */

.program-card {
    width: 100%;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    transition: transform 0.3s ease,
        box-shadow 0.3s ease;

    text-align: left;
}


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

.program-card img {
    width: 100%;
    height: 260px;

    display: block;

    object-fit: cover;

    border-radius: 15px 15px 0 0;
}


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

.program-card h3 {
    font-size: 22px;
    color: #222;

    margin: 0;
    padding: 15px 18px;

    font-weight: 700;
}


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

.program-card:hover {
    transform: translateY(-8px);

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


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

@media (max-width: 768px) {

    .program-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .program-card img {
        height: 200px;
    }

    .home-programs h2 {
        font-size: 28px;
    }

}


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

@media (max-width: 480px) {

    .home-programs {
        padding: 10px;
    }

    .program-card img {
        height: 170px;
    }

    .program-card h3 {
        font-size: 14px;
        padding: 10px 6px;
    }

}





/* =====================================================
   DIRECTOR'S MESSAGE
===================================================== */

.director-section {
    padding: 80px 5%;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.director-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 55px;
    align-items: start;
}

/* Director Image */

.director-image-box {
    position: sticky;
    top: 110px;
    text-align: center;
}

.director-image-frame {
    padding: 8px;
    background: linear-gradient(135deg,
            #f4a261,
            #0b2545,
            #f4a261);
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
}

.director-image-frame img {
    width: 100%;
    height: 470px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    background: #eee;
}

.director-name {
    margin-top: 20px;
}

.director-name h3 {
    font-size: 26px;
    color: #0b2545;
    margin-bottom: 4px;
}

.director-name p {
    color: #777;
    font-weight: 600;
}

/* Content */

.director-content {
    background: #ffffff;
    padding: 45px;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.director-label {
    display: inline-block;
    padding: 7px 15px;
    background: #0b2545;
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.director-content>h2 {
    font-size: 32px;
    line-height: 1.25;
    color: #0b2545;
    margin-bottom: 25px;
}

.director-content p {
    color: #555;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 18px;
}

.director-greeting {
    font-weight: bold;
    color: #0b2545 !important;
}

/* Hidden message */

.director-more {
    display: block;
}

/* Headings */

.director-more h3 {
    color: #0b2545;
    font-size: 22px;
    margin: 30px 0 12px;
    border-left: 4px solid #f4a261;
    padding-left: 12px;
}

/* List */

.director-more ul {
    margin: 15px 0 25px;
    padding-left: 25px;
}

.director-more li {
    margin-bottom: 10px;
    color: #444;
    line-height: 1.6;
}

.director-more li::marker {
    color: #f4a261;
}

/* Highlight */

.director-highlight {
    background: linear-gradient(135deg,
            #fff7ed,
            #fff);
    border-left: 5px solid #f4a261;
    padding: 20px 25px;
    margin: 30px 0;
    border-radius: 8px;
}

.director-highlight strong {
    color: #0b2545;
    font-size: 18px;
}

.director-highlight p {
    margin-top: 10px;
}

/* Welcome */

.welcome-text {
    text-align: center;
    padding: 20px;
    background: #0b2545;
    color: white !important;
    border-radius: 10px;
}

.welcome-text strong {
    color: #f4a261;
}

/* Signature */

.director-signature {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.director-signature p {
    margin-bottom: 5px;
}

.director-signature h3 {
    color: #0b2545;
    margin-bottom: 2px;
}

.director-signature span {
    color: #777;
    font-weight: 600;
}

/* Quote */

.director-content blockquote {
    margin-top: 30px;
    padding: 20px 25px;
    background: #f8f9fa;
    border-left: 5px solid #f4a261;
    color: #0b2545;
    font-size: 18px;
    font-style: italic;
    line-height: 1.6;
}

/* Button */

.director-btn {
    margin-top: 25px;
    padding: 13px 25px;
    border: none;
    border-radius: 25px;
    background: #00a859;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.director-btn:hover {
    background: #008f4c;
    transform: translateY(-2px);
}

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

@media (max-width: 850px) {

    .director-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .director-image-box {
        position: static;
        max-width: 400px;
        margin: auto;
    }

    .director-image-frame img {
        height: 430px;
    }

    .director-content {
        padding: 30px 20px;
    }

    .director-content>h2 {
        font-size: 25px;
    }
}

@media (max-width: 500px) {

    .director-section {
        padding: 50px 15px;
    }

    .director-image-frame img {
        height: 380px;
    }

    .director-content {
        padding: 25px 18px;
    }

    .director-content>h2 {
        font-size: 22px;
    }

    .director-content p {
        font-size: 15px;
    }
}



/* ================= SIDE NAV ================= */

.side-nav-bar {
    position: fixed;
    left: 0;
    top: 35%;
    z-index: 2000;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.side-nav-bar a {
    width: 50px;
    height: 50px;

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

    background: var(--green-action);
    color: white;

    text-decoration: none;
    font-size: 20px;

    border-radius: 0 5px 5px 0;

    transition: 0.3s;
}

.side-nav-bar a:hover {
    width: 65px;
    background: #008f4c;
}


/* ================= HEADER ================= */

header {
    background: var(--primary-color);
    color: white;

    padding: 15px 5%;

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

    position: sticky;
    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo {
    width: 60px;
    height: 60px;

    object-fit: cover;

    border-radius: 50%;
    border: 2px solid var(--accent-color);
}

.logo-text h1 {
    color: var(--accent-color);
    font-size: 24px;
}

.logo-text p {
    color: #ddd;
    font-size: 14px;
}

.whatsapp-btn {
    background: #25d366;
    color: white;

    padding: 10px 18px;

    border-radius: 25px;

    text-decoration: none;
    font-weight: bold;

    transition: 0.3s;
}

.whatsapp-btn:hover {
    background: #1ebc57;
    transform: scale(1.05);
}


/* ================= HERO ================= */

.hero-banner-section {
    background: var(--primary-color);
    padding: 20px;
    text-align: center;
}

.main-banner-img {
    max-width: 100%;
    max-height: 400px;

    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}


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

.container {
    width: 90%;
    max-width: 1200px;

    margin: auto;
    padding: 60px 0;
}


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

.section-title {
    text-align: center;

    font-size: 32px;

    color: var(--primary-color);

    margin-bottom: 40px;
}

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

    width: 60px;
    height: 3px;

    background: var(--accent-color);

    display: block;

    margin: 10px auto;
}


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

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.gallery-item {
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    background: #061b35;
    border: 1px solid #134074;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 420px;
    position: relative;
    cursor: zoom-in;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
    padding: 6px;
    box-sizing: border-box;
}

.gallery-item:hover img {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .gallery-item {
        height: 320px;
    }
}

@media (max-width: 480px) {
    .gallery-item {
        height: 260px;
    }
}


/* ================= FACULTY ================= */

.faculty-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(230px, 1fr));

    gap: 25px;
}

.faculty-card {
    background: white;

    padding: 25px;

    text-align: center;

    border-radius: 15px;

    border-top: 4px solid var(--accent-color);

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.08);

    transition: 0.3s;
}

.faculty-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.15);
}

.teacher-icon {
    font-size: 45px;
    margin-bottom: 10px;
}

.faculty-card h3 {
    color: var(--primary-color);
}

.faculty-card h4 {
    margin-top: 15px;
}

.faculty-card ul {
    list-style: none;
    margin-top: 10px;
}

.faculty-card li {
    padding: 4px;
}


/* ================= COURSES ================= */

.courses-section {
    padding: 60px 5%;
    background: #f9f9f9;
}

.courses-container {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 25px;
}

.course-card {
    background: white;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.08);

    transition: 0.3s;
}

.course-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.15);
}

.card-header {
    padding: 18px;

    text-align: center;

    color: white;
}

.ug-header {
    background: linear-gradient(100deg, #363333, #ed0808);
}

.pg-header {
    background: linear-gradient(135deg, #09db17, #1a481d);
}

.diploma-header {
    background: linear-gradient(135deg, #3c3946, #7676e4);
}

.tuition-header {
    background: linear-gradient(135deg, #4c4f3c, #c6e806);
}

.course-list {
    list-style: none;
    padding: 20px;
}

.course-list li {
    padding: 9px 0;

    border-bottom: 1px solid #eee;

    font-size: 14px;
}


/* ================= POSTERS ================= */

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: stretch;
}

.poster-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
}

.poster-img:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .poster-img {
        height: 340px;
    }
}

@media (max-width: 480px) {
    .poster-img {
        height: 250px;
    }
}

.special-section {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 50px 20px;
}

.single-poster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

.campus-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
}

.campus-img:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .single-poster {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .campus-img {
        height: 280px;
    }
}


/* ================= FACILITIES ================= */

.facility-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 25px;
}

.facility-item {
    background: white;

    padding: 30px 20px;

    border-radius: 15px;

    text-align: center;

    border: 1px solid #e5e5e5;

    border-top: 4px solid var(--accent-color);

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.08);

    transition: 0.3s;
}

.facility-item:hover {
    transform: translateY(-8px);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.15);
}

.facility-icon {
    width: 70px;
    height: 70px;

    margin: auto;
    margin-bottom: 15px;

    border-radius: 50%;

    background: #f8f9fa;

    display: flex;

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

    font-size: 36px;
}

.facility-item h4 {
    color: var(--primary-color);

    font-size: 19px;

    margin-bottom: 10px;
}

.facility-item p {
    color: #555;

    font-size: 14px;
}


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

.admission-section {
    padding: 80px 0;
    background: linear-gradient(135deg,
            #f8f9fa,
            #eef4f8);
}

.admission-section .section-title span {
    color: #f4a261;
}


/* Main wrapper */

.admission-wrapper {
    max-width: 1100px;
    margin: 40px auto 0;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 40px;
    align-items: stretch;
}


/* =========================
   LEFT INFORMATION
========================= */

.admission-info {
    background: #0b2545;
    color: white;

    padding: 40px;
    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.admission-label {
    display: inline-block;

    padding: 8px 15px;

    background: #f4a261;
    color: #0b2545;

    border-radius: 20px;

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

    margin-bottom: 20px;
}

.admission-info h3 {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 15px;
}

.admission-info>p {
    color: #dbe4ed;
    margin-bottom: 30px;
}


/* Points */

.admission-points {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admission-points>div {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.admission-points>div>span {
    width: 42px;
    height: 42px;

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

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

    border-radius: 10px;

    font-size: 20px;
}

.admission-points strong {
    display: block;
    margin-bottom: 3px;
}

.admission-points p {
    margin: 0;
    color: #c9d5df;
    font-size: 14px;
}


/* =========================
   FORM CARD
========================= */

.admission-form-card {
    background: white;

    padding: 35px;

    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);

    border: 1px solid #e5e7eb;
}


/* Form group */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    font-weight: 600;

    color: #0b2545;

    margin-bottom: 7px;
}

.form-group label span {
    color: #e63946;
}


/* Inputs */

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 13px 14px;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    font-size: 15px;

    background: #fff;

    color: #333;

    outline: none;

    transition:
        border-color 0.3s,
        box-shadow 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: #134074;

    box-shadow:
        0 0 0 3px rgba(19, 64, 116, 0.10);
}

.form-group textarea {
    resize: vertical;
}


/* Small help text */

.form-group small {
    display: block;

    margin-top: 5px;

    color: #777;

    font-size: 12px;
}


/* Submit */

.submit-btn {

    width: 100%;

    padding: 14px 20px;

    border: none;

    border-radius: 8px;

    background: #00a859;

    color: white;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.3s;
}

.submit-btn:hover {
    background: #008f4c;
    transform: translateY(-2px);
}


/* Disabled */

.submit-btn:disabled {

    opacity: 0.7;

    cursor: not-allowed;

    transform: none;
}


/* Response */

.form-response {
    display: none;
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 8px;
    background: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* .form-response { */
/*  */
    /* display: none; */
/*  */
    /* margin-top: 18px; */
/*  */
    /* padding: 15px; */
/*  */
    /* border-radius: 8px; */
/*  */
    /* text-align: center; */
/*  */
    /* font-weight: 600; */
/* } */


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

@media (max-width: 850px) {

    .admission-wrapper {

        grid-template-columns: 1fr;

    }

    .admission-info {

        padding: 30px;

    }

    .admission-form-card {

        padding: 25px;

    }

}


@media (max-width: 500px) {

    .admission-section {
        padding: 50px 0;
    }

    .admission-info h3 {
        font-size: 25px;
    }

    .admission-form-card {
        padding: 20px;
    }

}

/* ================= SOCIAL MEDIA ================= */

.social-section {
    padding: 50px 20px;

    text-align: center;

    background: var(--primary-color);

    color: white;
}

.social-section h2 {
    margin-bottom: 25px;
}

.social-links {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;
}

.social-links a {
    color: white;

    text-decoration: none;

    padding: 12px 20px;

    border-radius: 30px;

    font-weight: bold;

    transition: 0.3s;
}

.instagram {
    background: linear-gradient(45deg,
            #f58529,
            #dd2a7b,
            #8134af,
            #515bd4);
}

.social-links a:hover {
    transform: translateY(-4px);

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.3);
}

/* =========================
   GOOGLE MAP / LOCATION
========================= */

.location-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.location-section .section-title span {
    color: #f4a261;
}

.section-subtitle {
    text-align: center;
    color: #666;
    margin-top: -20px;
    margin-bottom: 40px;
}


/* Main layout */

.location-wrapper {

    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 30px;

    align-items: stretch;
}


/* Map */

.map-container {

    background: white;

    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.10);
}

.map-container iframe {

    display: block;

    width: 100%;

    min-height: 450px;
}


/* Location information */

.location-info {

    background: #0b2545;

    color: white;

    padding: 35px;

    border-radius: 15px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.12);
}

.location-icon {

    width: 55px;
    height: 55px;

    display: flex;

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

    background: #f4a261;

    color: #0b2545;

    border-radius: 50%;

    font-size: 25px;

    margin-bottom: 20px;
}

.location-info h3 {

    font-size: 25px;

    margin-bottom: 5px;
}

.location-info>p {

    color: #cbd5df;

    margin-bottom: 25px;
}


/* Details */

.location-details {

    display: flex;

    flex-direction: column;

    gap: 20px;
}

.location-item {

    display: flex;

    gap: 15px;

    align-items: flex-start;
}

.location-item>span {

    font-size: 22px;

    width: 35px;
}

.location-item strong {

    display: block;

    margin-bottom: 3px;
}

.location-item p {

    margin: 0;

    color: #d5dee7;

    font-size: 14px;

    line-height: 1.5;
}


/* Buttons */

.location-buttons {

    display: flex;

    gap: 10px;

    margin-top: 30px;

    flex-wrap: wrap;
}

.direction-btn,
.call-btn {

    display: inline-block;

    padding: 11px 17px;

    border-radius: 7px;

    text-decoration: none;

    font-weight: 600;

    transition: 0.3s;
}

.direction-btn {

    background: #f4a261;

    color: #0b2545;
}

.direction-btn:hover {

    background: #e8924e;

    transform: translateY(-2px);
}

.call-btn {

    background: #00a859;

    color: white;
}

.call-btn:hover {

    background: #008f4c;

    transform: translateY(-2px);
}


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

.about-section {
    padding: 80px 5%;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.about-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    gap: 50px;
}

/* About Image */

.about-image {
    text-align: center;
}

.about-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background: white;
    padding: 15px;
}

/* About Content */

.about-content {
    padding: 10px;
}

.about-tag {
    display: inline-block;
    color: #f4a261;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.about-content h2 {
    font-size: 2.5rem;
    color: #0b2545;
    margin-bottom: 20px;
}

.about-content p {
    color: #555;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* Highlights */

.about-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 25px 0;
}

.about-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid #f4a261;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    transition: 0.3s ease;
}

.about-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.about-box>span {
    font-size: 2rem;
}

.about-box h3 {
    color: #0b2545;
    font-size: 1rem;
    margin: 0;
}

.about-box p {
    font-size: 0.85rem;
    margin: 0;
    color: #777;
}

/* Button */

.about-btn {
    display: inline-block;
    background: #00a859;
    color: white;
    padding: 13px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s ease;
}

.about-btn:hover {
    background: #0b2545;
    transform: translateY(-2px);
}

/* Mobile */

@media (max-width: 768px) {

    .about-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-image {
        order: 1;
    }

    .about-content {
        order: 2;
    }

    .about-content h2 {
        font-size: 2rem;
    }

    .about-highlights {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .about-btn {
        margin-top: 10px;
    }
}


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

@media (max-width: 850px) {

    .location-wrapper {

        grid-template-columns: 1fr;

    }

    .map-container iframe {

        min-height: 350px;

    }

    .location-info {

        padding: 30px;

    }

}


@media (max-width: 500px) {

    .location-section {

        padding: 50px 0;

    }

    .location-buttons {

        flex-direction: column;

    }

    .direction-btn,
    .call-btn {

        text-align: center;

        width: 100%;

    }

}



/* ================= FOOTER ================= */

footer {
    background: #071b33;

    color: white;

    text-align: center;

    padding: 30px 20px;
}

.copyright {
    margin-top: 10px;

    font-size: 13px;

    color: #ccc;
}


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

@media (max-width: 768px) {

    header {
        flex-direction: column;

        gap: 15px;

        text-align: center;
    }

    .brand-container {
        flex-direction: column;
    }

    .logo-text h1 {
        font-size: 20px;
    }

    .side-nav-bar a {
        width: 42px;
        height: 42px;
    }

    .section-title {
        font-size: 26px;
    }

    .campus-img {
        width: 100%;
    }

    .form-section {
        padding: 25px 18px;
    }

        /* ================= ABOUT SECTION ================= */
    
        .about-section {
            padding: 80px 5%;
            background: linear-gradient(135deg, #f8f9fa, #ffffff);
        }
    
        .about-container {
            max-width: 1200px;
            margin: auto;
            display: grid;
            grid-template-columns: 40% 60%;
            align-items: center;
            gap: 50px;
        }
    
        /* About Image */
    
        .about-image {
            text-align: center;
        }
    
        .about-image img {
            width: 100%;
            max-width: 400px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            background: white;
            padding: 15px;
        }
    
        /* About Content */
    
        .about-content {
            padding: 10px;
        }
    
        .about-tag {
            display: inline-block;
            color: #f4a261;
            font-weight: bold;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }
    
        .about-content h2 {
            font-size: 2.5rem;
            color: #0b2545;
            margin-bottom: 20px;
        }
    
        .about-content p {
            color: #555;
            font-size: 1rem;
            line-height: 1.8;
            margin-bottom: 15px;
        }
    
        /* Highlights */
    
        .about-highlights {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin: 25px 0;
        }
    
        .about-box {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #ffffff;
            padding: 15px;
            border-radius: 10px;
            border-left: 4px solid #f4a261;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
            transition: 0.3s ease;
        }
    
        .about-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
    
        .about-box>span {
            font-size: 2rem;
        }
    
        .about-box h3 {
            color: #0b2545;
            font-size: 1rem;
            margin: 0;
        }
    
        .about-box p {
            font-size: 0.85rem;
            margin: 0;
            color: #777;
        }
    
        /* Button */
    
        .about-btn {
            display: inline-block;
            background: #00a859;
            color: white;
            padding: 13px 25px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            transition: 0.3s ease;
        }
    
        .about-btn:hover {
            background: #0b2545;
            transform: translateY(-2px);
        }
    
        /* Mobile */
    
        @media (max-width: 768px) {
    
            .about-container {
                grid-template-columns: 1fr;
                text-align: center;
            }
    
            .about-image {
                order: 1;
            }
    
            .about-content {
                order: 2;
            }
    
            .about-content h2 {
                font-size: 2rem;
            }
    
            .about-highlights {
                grid-template-columns: 1fr;
                text-align: left;
            }
    
            .about-btn {
                margin-top: 10px;
            }   }

}


/* ================= SUCCESS STORIES ================= */

.success-section {
    padding: 70px 0;
}

.success-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.story-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #0b2545;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 400px;
    user-select: none;
}

.story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.22);
}

.story-image-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.story-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease, filter 0.3s ease;
}

.story-card:hover .story-image-wrap img {
    transform: scale(1.03);
}

.click-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(11, 37, 69, 0.90);
    backdrop-filter: blur(6px);
    color: #ffc15c;
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(255, 193, 92, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}

.story-card.active .click-hint {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
}

/* Overlay that reveals strictly on CLICK */
.story-content-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(11, 37, 69, 0.96), rgba(6, 27, 53, 0.98));
    color: white;
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
    z-index: 5;
    box-sizing: border-box;
}

.story-card.active .story-content-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.story-badge {
    display: inline-block;
    background: #f4a261;
    color: #0b2545;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 12px;
}

.story-content-overlay h3 {
    font-size: 24px;
    color: #ffffff;
    margin: 0 0 5px 0;
}

.story-course {
    color: #ffc15c;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.story-quote {
    font-size: 15px;
    line-height: 1.6;
    color: #e5edf7;
    margin: 0 0 15px 0;
    font-style: italic;
}

.story-stars {
    font-size: 18px;
    letter-spacing: 2px;
}

.story-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}

.story-close-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .story-card {
        height: 360px;
    }
    .story-content-overlay {
        padding: 25px 18px;
    }
    .story-content-overlay h3 {
        font-size: 20px;
    }
    .story-quote {
        font-size: 13px;
    }
}


/* ================= IMAGE LIGHTBOX MODAL ================= */

.image-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 14, 28, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    cursor: zoom-out;
}

.modal-content {
    max-width: 92%;
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
    object-fit: contain;
    animation: zoomModal 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: #000;
}

.modal-caption {
    margin-top: 15px;
    color: #f4a261;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 42px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    line-height: 1;
    user-select: none;
}

.modal-close:hover {
    color: #f4a261;
    transform: scale(1.15);
}

@keyframes zoomModal {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}