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

:root{
    --primary:#0b3d2e;
    --primary-2:#136f4a;
    --accent:#18b36b;
    --accent-2:#7ef0b0;
    --dark:#081c15;
    --text:#173027;
    --muted:#5f736b;
    --white:#ffffff;
    --bg:#f4fbf7;
    --bg-2:#ecf8f0;
    --card:#ffffffcc;
    --border:rgba(19,111,74,0.14);
    --shadow:0 10px 30px rgba(9, 61, 40, 0.10);
    --shadow-lg:0 20px 50px rgba(9, 61, 40, 0.18);
    --radius:24px;
    --radius-sm:18px;
    --max-width:1200px;
    --nav-height:84px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top left, rgba(126,240,176,0.20), transparent 28%),
        radial-gradient(circle at top right, rgba(24,179,107,0.12), transparent 24%),
        linear-gradient(180deg, #f7fdf9 0%, #eff8f2 100%);
    min-height:100vh;
    padding-top:var(--nav-height);
    line-height:1.7;
    overflow-x:hidden;
}

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

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

section,
.history,
.principal,
.section-heads,
.staff,
.society-section,
.sports,
.news,
.info-bar{
    width:min(var(--max-width), calc(100% - 32px));
    margin-inline:auto;
}

/* ===== NAVBAR ===== */
#navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:var(--nav-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 28px;
    background:rgba(8, 28, 21, 0.72);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,0.08);
    z-index:1000;
    box-shadow:0 8px 30px rgba(0,0,0,0.12);
}

#navbar .logo{
    display:flex;
    align-items:center;
    gap:12px;
}

#navbar .logo img{
    width:56px;
    height:56px;
    object-fit:cover;
    border-radius:1%;
    border:2px solid rgba(255,255,255,0.25);
    box-shadow:0 6px 18px rgba(0,0,0,0.18);
}

.navbar{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.navbar li a{
    color:var(--white);
    padding:11px 16px;
    border-radius:999px;
    font-size:0.95rem;
    font-weight:500;
    transition:0.28s ease;
    position:relative;
}

.navbar li a:hover,
.navbar li a:focus{
    background:rgba(255,255,255,0.10);
    color:#d9ffea;
}

/* ===== HERO ===== */
.welcome{
    min-height:calc(100vh - var(--nav-height));
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:100px 24px;
    margin-top:0;
    border-radius:0 0 38px 38px;
    position:relative;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    isolation:isolate;
}

.welcome::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(2,16,10,0.30) 0%, rgba(4,36,22,0.55) 55%, rgba(5,28,17,0.74) 100%);
    z-index:-2;
}

.welcome::after{
    content:"";
    position:absolute;
    inset:auto -10% -90px -10%;
    height:180px;
    background:linear-gradient(to top, #eff8f2, transparent);
    z-index:-1;
}

.welcome h3{
    color:#d9ffea;
    letter-spacing:4px;
    font-weight:600;
    font-size:1rem;
    margin-bottom:10px;
    text-transform:uppercase;
}

.welcome h1{
    color:var(--white);
    font-size:clamp(2.2rem, 5vw, 4.5rem);
    line-height:1.1;
    font-weight:800;
    text-shadow:0 10px 30px rgba(0,0,0,0.30);
    max-width:1000px;
}

.welcome h2{
    margin-top:14px;
    font-size:clamp(1rem, 2.5vw, 1.5rem);
    color:#e9fff2;
    font-weight:500;
    letter-spacing:1px;
}

/* ===== GENERIC CARD LOOK ===== */
.info-bar > div,
.news-item,
.stat-card,
.section-head,
.card,
.AL-sec > div,
.school > a,
.school > div,
.gov a,
.history,
.principal,
.staff,
.popup-content{
    background:var(--card);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
}

/* ===== INFO BAR ===== */
.info-bar{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
    margin-top:32px;
    margin-bottom:34px;
}

.info-bar > div{
    padding:28px;
    border-radius:var(--radius);
    transition:0.3s ease;
}

.info-bar > div:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}

.info-bar strong{
    color:var(--primary);
}

/* ===== NEWS ===== */
.news{
    padding:18px 0 10px;
}

.news h2,
.society-section h1,
.sports h2,
.section-heads > h1,
.history h1,
.principal h1,
.staff h1,
.AL-sec h1,
.gov h1,
header h1{
    font-size:clamp(1.8rem, 3vw, 2.6rem);
    margin-bottom:18px;
    color:var(--primary);
    position:relative;
}

.news h2::after,
.society-section h1::after,
.sports h2::after,
.section-heads > h1::after,
.history h1::after,
.principal h1::after,
.staff h1::after,
.AL-sec h1::after,
.gov h1::after,
header h1::after{
    content:"";
    display:block;
    width:90px;
    height:4px;
    margin-top:10px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--accent), var(--primary-2));
}

.news-item{
    border-radius:var(--radius);
    padding:24px;
}

.news-item h3{
    color:var(--primary);
    margin-bottom:8px;
    font-size:1.25rem;
}

/* ===== STATS ===== */
.stats-section{
    width:100%;
    margin-top:38px;
    padding:74px 16px;
    background:
        linear-gradient(135deg, rgba(8,28,21,0.96), rgba(16,87,57,0.92)),
        url("Web Photo/photos/wmvbgimage/1.jpeg") center/cover no-repeat;
    position:relative;
    overflow:hidden;
}

.stats-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center, rgba(126,240,176,0.08), transparent 45%);
    pointer-events:none;
}

.container{
    width:min(var(--max-width), calc(100% - 32px));
    margin-inline:auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
    position:relative;
    z-index:1;
}

.stat-card{
    border-radius:26px;
    padding:34px 20px;
    text-align:center;
    background:rgba(255,255,255,0.09);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:none;
}

.stat-number{
    font-size:clamp(2.4rem, 5vw, 4rem);
    color:var(--white);
    font-weight:800;
    line-height:1;
    margin-bottom:10px;
}

.stat-label{
    color:#d5fbe4;
    font-size:1rem;
    font-weight:500;
}

/* ===== ABOUT PAGE ===== */
.history,
.principal,
.staff{
    margin-top:28px;
    padding:32px;
    border-radius:var(--radius);
}

.history p,
.principal h2{
    color:var(--text);
    font-size:1rem;
}

.principal{
    text-align:center;
}

.principal img{
    width:min(320px, 100%);
    margin:20px auto;
    border-radius:24px;
    box-shadow:var(--shadow-lg);
    border:4px solid rgba(255,255,255,0.9);
}

.wise-principals{
    width:min(var(--max-width), calc(100% - 32px));
    margin:28px auto 0;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
}

.wise-principals > div{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    text-align:center;
    box-shadow:var(--shadow);
}

.wise-principals img{
    width:100%;
    max-width:280px;
    height:300px;
    object-fit:cover;
    margin:16px auto 12px;
    border-radius:20px;
}

.wise-principals h3{
    color:var(--primary);
    margin-bottom:8px;
}

.wise-principals h4{
    color:var(--muted);
    font-weight:600;
}

.section-heads{
    margin-top:32px;
}

.section-heads-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:22px;
    margin-top:24px;
}

.section-head{
    border-radius:var(--radius);
    padding:18px;
    text-align:center;
    transition:0.3s ease;
}

.section-head:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
}

.section-head img{
    width:100%;
    height:290px;
    object-fit:cover;
    border-radius:20px;
    margin-bottom:16px;
}

.section-head h3{
    color:var(--primary);
    font-size:1.05rem;
    margin-bottom:6px;
}

.section-head h4{
    color:var(--muted);
    font-weight:500;
}

/* ===== SECTION PAGE ===== */
.AL-sec{
    width:min(var(--max-width), calc(100% - 32px));
    margin:28px auto 0;
}

.AL-sec > h1{
    margin-bottom:22px;
}

.AL-sec .art,
.AL-sec .science,
.AL-sec .commerce{
    padding:28px;
    border-radius:var(--radius);
    margin-bottom:20px;
}

.AL-sec h2{
    color:var(--primary);
    margin-bottom:14px;
    font-size:1.5rem;
}

.AL-sec h3{
    font-weight:400;
    color:var(--text);
}

.info-bar + section .AL-sec{
    margin-top:18px;
}

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

.gallery{
    padding:60px 40px;
}

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

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:15px;
    align-items:stretch;   /* allow items to fill height */
}

/* Title */
.gallery-grid h2{
    grid-column:1 / -1;
    text-align:center;
    margin-bottom:25px;
}

/* Images */
.gallery-grid img{
    width:100%;
    height:100%;          /* fill grid height */
    object-fit:contain;   /* keep full image (no crop) */
    border-radius:10px;
    background:#f3f3f3;   /* nice background for portrait images */
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

/* Image layout */
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:15px;
    align-items:start;
}

/* Images */
.gallery-grid img{
    width:100%;
    height:auto;              /* keep original ratio */
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
    transition:0.3s;
}

/* hover effect */
.gallery-grid img:hover{
    transform:scale(1.03);
}

/* ===== SOCIETY / CARDS ===== */
.society-section{
    padding:34px 0 10px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:24px;
    margin-top:24px;
}

.card{
    border-radius:26px;
    overflow:hidden;
    transition:transform 0.3s ease, box-shadow 0.3s ease;
    cursor:pointer;
    height:100%;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}

.card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.card h2{
    padding:18px 18px 22px;
    font-size:1.06rem;
    color:var(--primary);
}

/* ===== POPUPS ===== */
.popup{
    display:none;
    position:fixed;
    inset:0;
    z-index:3000;
    background:rgba(3, 18, 11, 0.66);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    padding:24px;
}

.popup-content{
    position:relative;
    width:min(1100px, 100%);
    max-height:calc(100vh - 48px);
    margin:auto;
    border-radius:28px;
    padding:28px;
    overflow-y:auto;
    background:#ffffffee;
}

.close{
    position:sticky;
    top:0;
    float:right;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:1.8rem;
    line-height:1;
    color:var(--white);
    background:linear-gradient(135deg, var(--primary), var(--accent));
    cursor:pointer;
    box-shadow:0 10px 20px rgba(19,111,74,0.25);
    z-index:2;
}

.popup-content h2{
    color:var(--primary);
    margin-bottom:14px;
    font-size:1.9rem;
}

.popup-content h3{
    color:var(--primary-2);
    margin:18px 0 10px;
}

.popup-content p,
.popup-content div{
    color:var(--text);
}

.group-photo{
    width:100%;
    max-width:700px;
    margin:18px auto;
    border-radius:20px;
}

.photos{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
    margin-top:18px;
    align-items:start;
}

.photos img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:var(--shadow);
}

.photos p{
    grid-column:1 / -1;
    background:var(--bg-2);
    border-left:4px solid var(--accent);
    padding:14px 16px;
    border-radius:14px;
}

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

.sports-gallery{
    display:flex;
    flex-direction:column;
    gap:40px;
}

/* Section titles */
.sports-gallery h1{
    margin-bottom:10px;
}

/* Image grid */
.cricket,
.karate,
.athelatic,
.net-ball,
.volleyball{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
    gap:20px;
    align-items:start;
}

/* Images */
.cricket img,
.karate img,
.athelatic img,
.net-ball img,
.volleyball img{
    width:100%;
    height:auto;          /* keep original image ratio */
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
    transition:0.3s;
}

/* hover effect */
.cricket img:hover,
.karate img:hover,
.athelatic img:hover,
.net-ball img:hover,
.volleyball img:hover{
    transform:scale(1.03);
}
/* ===== DOWNLOAD PAGE ===== */
header > h1{
    width:min(var(--max-width), calc(100% - 32px));
    margin:34px auto 20px;
}

.school{
    width:min(var(--max-width), calc(100% - 32px));
    margin-inline:auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(220px, 1fr));
    gap:20px;
}

.school > a,
.school > div{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:120px;
    border-radius:24px;
    font-size:1.2rem;
    font-weight:700;
    color:var(--primary);
    transition:0.3s ease;
}

.school > a:hover,
.school > div:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-lg);
}

.gov{
    width:min(var(--max-width), calc(100% - 32px));
    margin:34px auto 0;
}

.gov a{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:min(300px, 100%);
    min-height:140px;
    margin:12px 16px 0 0;
    padding:20px;
    border-radius:24px;
    transition:0.3s ease;
}

.gov a:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-lg);
}

.gov img{
    max-height:90px;
    object-fit:contain;
    margin:auto;

}

/* ===== FOOTER ===== */
.footer{
    width:100%;
    margin-top:48px;
    padding:50px 24px 24px;
    background:
        linear-gradient(135deg, rgba(8,28,21,0.98), rgba(13,72,48,0.95));
    color:var(--white);
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr 1fr;
    gap:24px;
}

.footer > div{
    width:100%;
}

.footer .logo{
    display:flex;
    align-items:center;
    gap:16px;
}

.footer .logo img{
    width:72px;
    height:72px;
    border-radius:1%;
    object-fit:cover;
        border:2px solid rgba(255,255,255,0.16);
}

.footer h3{
    margin-bottom:10px;
    color:#d9ffea;
}

.footer p,
.footer div,
.footer a{
    color:#eefcf4;
    font-size:0.96rem;
}

.footer a:hover{
    color:var(--accent-2);
}

.footer h2{
    grid-column:1 / -1;
    text-align:center;
    margin-top:10px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,0.12);
    font-size:0.92rem;
    font-weight:500;
    color:#d5fbe4;
}

/* ===== SMALL HELPER STYLES ===== */
.staff img{
    width:100%;
    border-radius:24px;
    margin-top:16px;
}

.logo p strong{
    font-size:1rem;
    display:block;
    margin-bottom:2px;
}

.history,
.principal,
.staff,
.section-head,
.card,
.news-item,
.info-bar > div,
.AL-sec > div{
    transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.history:hover,
.principal:hover,
.staff:hover,
.news-item:hover{
    box-shadow:var(--shadow-lg);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px){
    .footer{
        grid-template-columns:repeat(2, 1fr);
    }

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

@media (max-width: 900px){
    :root{
        --nav-height:auto;
    }

    body{
        padding-top:120px;
    }

    #navbar{
        height:auto;
        padding:14px 18px;
        flex-direction:column;
        gap:12px;
    }

    .navbar{
        justify-content:center;
        gap:6px;
    }

    .navbar li a{
        padding:10px 13px;
        font-size:0.9rem;
    }

    .info-bar{
        grid-template-columns:1fr;
    }

    .container{
        grid-template-columns:1fr;
    }

    .wise-principals{
        grid-template-columns:1fr;
    }

    .school{
        grid-template-columns:1fr;
    }

    .footer{
        grid-template-columns:1fr;
    }

    .welcome{
        min-height:75vh;
        border-radius:0 0 28px 28px;
    }

    .history,
    .principal,
    .staff,
    .popup-content{
        padding:22px;
    }
}

@media (max-width: 600px){
    section,
    .history,
    .principal,
    .section-heads,
    .staff,
    .society-section,
    .sports,
    .news,
    .info-bar,
    .wise-principals,
    .school,
    .gov{
        width:min(100% - 20px, var(--max-width));
    }

    .welcome{
        padding:80px 16px;
    }

    .welcome h1{
        font-size:2rem;
    }

    .welcome h2{
        font-size:1rem;
    }

    .card img,
    .cricket img,
    .karate img,
    .athelatic img,
    .net-ball img,
    .volleyball img,
    .photos img{
        height:200px;
    }

    .popup{
        padding:10px;
    }

    .popup-content{
        border-radius:22px;
    }
}