/* ===== RESET ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:sans-serif;
}


/* ===== BODY ===== */
body{
    background-image:url("banner.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}/* ===== PREMIUM BUTTON ===== */

.admission{

display:inline-block;

background: linear-gradient(to right,#00c6ff,#0072ff);

padding:15px 30px;

border-radius:30px;

text-decoration:none;
color:white;

font-size:18px;

margin-top:20px;

transition:0.4s;

}


/* ===== NAV ===== */
nav{
    background:rgba(0,0,0,0.75);
    padding:20px;
    text-align:center;
}/* ===== STICKY NAV ===== */

nav {
    position: sticky;
    top: 0;
    z-index: 1000;

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

    
    padding: 20px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}/* ===== NAV LINKS ===== */
nav a {
    position: relative;
    text-decoration: none;
    color: white;
    font-weight: 600;
    padding: 5px 8px;
}

/* underline */
nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: #007bff;
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}
/* ===== ACTIVE TAB HIGHLIGHT ===== */
section:target ~ nav a {
    color: black;
}

/* Home default active */
body:not(:has(:target)) nav a[href="#home"] {
    color: #007bff;
}

/* When section is active */
#home:target ~ nav a[href="#home"],
#about:target ~ nav a[href="#about"],
#test:target ~ nav a[href="#test"],
#competitive:target ~ nav a[href="#competitive"] {
    color: #007bff;
}

#home:target ~ nav a[href="#home"]::after,
#about:target ~ nav a[href="#about"]::after,
#test:target ~ nav a[href="#test"]::after,
#competitive:target ~ nav a[href="#competitive"]::after {
    width: 100%;
}
@media (max-width: 600px) {
    nav {
        font-size: 14px;
    }
}





/* ===== TABS (NO JS) ===== */
.tab{
    display:none;
    padding:20px;
    margin:20px;
    background:rgba(255,255,255,0.9);
    border-radius:10px;
}

/* Default Home */
body:not(:has(:target)) #home{
    display:block;
}

/* Active Tabs */
#home:target,
#about:target,
#test:target,
#competitive:target{
    display:block;
}

/* ===== TEXT HELPERS ===== */
.center{text-align:center;}
.right{text-align:right;}
.red{color:red;}
.green{color:green;}
.blue{color:blue;}

.headline{color:rgb(54,236,191);}
.big-text{font-size:22px;}
.para{font-size:18px;line-height:1.6;}
.admission{color:blue;font-size:20px;text-decoration:none;}
.address{color:blue;text-align:right;}

/* ===== IMAGES ===== */
.full-width-image{
    width:100%;
    height:auto;
    display:block;
    margin:10px 0;
}

/* ===== CONTACT IMAGE ===== */
.wrapper{
    display:flex;
    justify-content:flex-start;
    margin-bottom:25px;
}

.image{
    width:140px;
    position:relative;
}

.image img{
    width:100%;
    display:block;
}

.content{
    position:absolute;
    inset:0;
    background:rgba(255,251,4,0.664);
    display:flex;
    flex-direction:column;
    justify-content:center;
    opacity:0;
    transition:0.6s;
}

.content:hover{
    opacity:1;
    padding:20px;
}

.content h3{margin-bottom:8px;}
.content p{font-size:16px;}

/* ===== BANNER COMMON ===== */
.banner{
    max-width:750px;
    margin:30px auto;
    padding:25px;
    border-radius:10px;
}

.banner h2{
    text-align:center;
    font-size:26px;
    margin-bottom:10px;
}

.banner h3{
    text-align:center;
    background:#0033cc;
    color:white;
    padding:8px;
    border-radius:6px;
    margin-bottom:15px;
}

.banner ul{
    margin-left:20px;
}

.banner li{
    margin-bottom:8px;
}

.contact{
    text-align:center;
    margin-top:15px;
    font-weight:bold;
}

/* ===== TEST SERIES LOOK ===== */
.test-banner{
    background:linear-gradient(#fff176,#ffee58);
    border:3px solid #0033cc;
}

.test-banner .highlight{
    text-align:center;
    font-weight:bold;
    color:green;
    margin-bottom:12px;
}

/* ===== COMPETITIVE CLASSES LOOK ===== */
.competitive-banner{
    background:linear-gradient(#bbdefb,#90caf9);
    border:3px solid #0d47a1;
}
/* ===== VIDEO SECTION ===== */
.video-box {
    max-width: 800px;
    margin: 20px auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.video-box video {
    width: 100%;
    height: auto;
    display: block;
}