/* GLOBAL */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI", Arial, sans-serif;
}

html{ scroll-behavior:smooth; }

body{
    background:#f4f6f9;
    color:#333;
    overflow-x:hidden;
}

/* SECTION ANIMATION */
section{
    animation:fadeSection 1s ease both;
}

@keyframes fadeSection{
    from{ opacity:0; transform:translateY(40px); }
    to{ opacity:1; transform:translateY(0); }
}

/* NAVBAR */
.navbar{
    background:#0b2545;
    padding:16px 50px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
    animation:navSlide 0.8s ease;
}

@keyframes navSlide{
    from{ transform:translateY(-80px); }
    to{ transform:translateY(0); }
}

.logo{
    color:#f4b400;
    font-size:24px;
    font-weight:700;
}

.nav-links{
    list-style:none;
    display:flex;
    gap:25px;
}

.nav-links a{
    color:white;
    text-decoration:none;
    padding:6px 12px;
    border-radius:6px;
    transition:0.3s;
}

.nav-links a:hover{
    background:#1e88e5;
    transform:translateY(-3px);
}

/* HERO */
.hero{
    height:75vh;
    background:
    linear-gradient(rgba(11,37,69,0.7),rgba(11,37,69,0.7)),
    url("schoolpic.jpg") center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hero-content{ color:white; }

.hero-content h1{
    font-size:42px;
    animation:textZoom 1.2s ease forwards;
}

.hero-content p{
    font-size:18px;
    margin:15px 0 25px;
    animation:textFade 1.5s ease forwards;
}

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

@keyframes textFade{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:translateY(0); }
}

.hero-btn{
    background:#f4b400;
    color:#0b2545;
    padding:12px 28px;
    text-decoration:none;
    font-weight:600;
    border-radius:30px;
    animation:pulse 2.5s infinite;
}

@keyframes pulse{
    0%{ box-shadow:0 0 0 rgba(244,180,0,0.7); }
    50%{ box-shadow:0 0 30px rgba(244,180,0,0.9); }
    100%{ box-shadow:0 0 0 rgba(244,180,0,0.7); }
}

/* ABOUT */
.about{
    width:80%;
    margin:70px auto;
    background:white;
    padding:45px;
    text-align:center;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(0,0,0,0.12);
    transition:0.4s;
}

.about:hover{ transform:translateY(-12px); }

/* STATS */
.stats{
    width:85%;
    margin:40px auto;
    display:flex;
    gap:25px;
}

.stat-card{
    flex:1;
    background:white;
    padding:35px;
    text-align:center;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    position:relative;
    overflow:hidden;
}

.stat-card::before{
    content:"";
    position:absolute;
    left:-100%;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(30,136,229,0.25), transparent);
    transition:0.5s;
}

.stat-card:hover::before{ left:100%; }

.stat-card h3{
    font-size:38px;
    color:#1e88e5;
}

/* FEATURES */
.features{
    background:#0b2545;
    color:white;
    padding:70px 10%;
    text-align:center;
}

.feature-box{
    display:flex;
    gap:25px;
}

.feature{
    background:rgba(255,255,255,0.1);
    padding:25px;
    border-radius:14px;
    backdrop-filter:blur(6px);
    transition:0.3s;
}

.feature:hover{ transform:translateY(-10px); }

.feature h3{ color:#ffd54f; }

/* TEACHERS */
.teachers{
    width:85%;
    margin:70px auto;
    text-align:center;
}

.teacher-cards{
    display:flex;
    gap:25px;
    justify-content:center;
}

.teacher-card{
    background:white;
    padding:25px;
    width:220px;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
    position:relative;
    overflow:hidden;
    transition:0.35s;
}

.teacher-card:hover{ transform:translateY(-12px); }

.teacher-card::after{
    content:"Top Faculty";
    position:absolute;
    bottom:-100%;
    left:0;
    width:100%;
    padding:10px;
    background:#1e88e5;
    color:white;
    transition:0.4s;
}

.teacher-card:hover::after{ bottom:0; }

/* PRINCIPAL */
.principal{
    width:80%;
    margin:70px auto;
}

.principal-box{
    background:linear-gradient(135deg,#ffffff,#eef3ff);
    padding:45px;
    border-radius:22px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
    transition:0.4s;
}

.principal-box:hover{ transform:translateY(-10px); }

/* PROGRAMS */
.programs{
    padding:70px 10%;
    text-align:center;
}

.program-box{
    display:flex;
    gap:25px;
    margin-top:35px;
}

.program-card{
    flex:1;
    background:white;
    padding:30px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    transition:0.35s;
}

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

/* ACHIEVEMENTS */
.achievements{
    width:80%;
    margin:70px auto;
    background:#0b2545;
    color:white;
    padding:45px;
    border-radius:22px;
}

/* INFO */
.info{
    width:85%;
    margin:70px auto;
    display:flex;
    gap:25px;
}

.info-card{
    flex:1;
    background:white;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    transition:0.35s;
}

.info-card:hover{ transform:translateY(-12px); }

/* NOTICE */
.notice{
    width:80%;
    margin:70px auto;
    background:white;
    padding:35px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.notice li{
    margin-bottom:12px;
    transition:0.3s;
}

.notice li:hover{
    transform:translateX(12px);
    color:#1e88e5;
}

/* FOOTER */
.footer{
    background:linear-gradient(135deg,#0b2545,#1e88e5);
    color:white;
    text-align:center;
    padding:22px;
}

/* RESPONSIVE */
@media(max-width:900px){
    .stats,.feature-box,.teacher-cards,.program-box,.info{
        flex-direction:column;
    }
}

@media(max-width:600px){
    .navbar{
        flex-direction:column;
        gap:15px;
    }
    .hero-content h1{
        font-size:28px;
    }
}
.waqas-watermark{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) rotate(-20deg);
    font-size:80px;
    font-weight:900;
    letter-spacing:8px;
    color:rgba(11,37,69,0.2);
    pointer-events:none;
    z-index:1;
    text-transform:uppercase;
    user-select:none;
    transition: transform 0.3s ease;
}


.admission-contact{
    width:85%;
    margin:70px auto;
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    text-align:center;
}
.admission-contact h2{
    color:#0b2545;
    margin-bottom:15px;
}
.admission-contact .form-group{
    margin-bottom:15px;
}
.admission-contact input,
.admission-contact textarea{
    width:100%;
    padding:12px 15px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:16px;
}
.admission-contact button{
    padding:12px 28px;
    background:#1e88e5;
    color:white;
    border:none;
    border-radius:30px;
    cursor:pointer;
    font-weight:600;
    transition:0.3s;
}
.admission-contact button:hover{
    background:#0b2545;
}
#admission-contact #formMessage{
    margin-top:12px;
    font-weight:600;
    color:green;
}

.nav-links a.active{
    background:#f4b400;
    color:#0b2545;
    font-weight:600;
}
.logo-box{
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
}

/* BOOK */
.book{
    width:38px;
    height:30px;
    position:relative;
}
.book .page{
    position:absolute;
    width:18px;
    height:28px;
    background:#f4b400;
    border-radius:3px;
}
.book .left{
    left:0;
    transform:skewY(-10deg);
}
.book .right{
    right:0;
    background:#ffd54f;
    transform:skewY(10deg);
}

/* FLYING LETTERS */
.letters span{
    position:absolute;
    top:0;
    font-size:14px;
    font-weight:700;
    color:white;
    opacity:0;
    animation:flyUp 3s infinite;
}

.letters span:nth-child(1){ left:0; animation-delay:0s; }
.letters span:nth-child(2){ left:8px; animation-delay:0.6s; }
.letters span:nth-child(3){ left:16px; animation-delay:1.2s; }
.letters span:nth-child(4){ left:24px; animation-delay:1.8s; }

@keyframes flyUp{
    0%{ transform:translateY(10px); opacity:0; }
    30%{ opacity:1; }
    100%{ transform:translateY(-18px); opacity:0; }
}

.logo-text{
    color:#f4b400;
    font-size:22px;
    font-weight:700;
}
/* RESULTS */
.results{
    width:85%;
    margin:70px auto;
    text-align:center;
}
.result-box{
    display:flex;
    gap:25px;
    margin-top:30px;
}
.result-card{
    flex:1;
    background:white;
    padding:30px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    transition:0.3s;
}
.result-card:hover{
    transform:translateY(-12px);
}
.result-card h3{
    font-size:36px;
    color:#1e88e5;
}

/* RULES */
.rules{
    width:80%;
    margin:70px auto;
    background:#0b2545;
    color:white;
    padding:45px;
    border-radius:22px;
}
.rules ul{
    margin-top:20px;
    line-height:2;
}

/* TESTIMONIAL */
.testimonial{
    width:80%;
    margin:70px auto;
    background:#eef3ff;
    padding:45px;
    border-radius:22px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,0.12);
}
.testimonial h4{
    margin-top:15px;
    color:#1e88e5;
}

/* LOCATION */
.location{
    width:85%;
    margin:70px auto;
    text-align:center;
}
.location iframe{
    width:100%;
    height:300px;
    border-radius:18px;
    margin-top:20px;
    border:none;
}
/* =========================
   FINAL MOBILE FIX
   ========================= */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  /* NAVBAR */
  .navbar {
    padding: 12px 15px;
    flex-direction: column;
  }

  .nav-links {
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  /* HERO */
  .hero {
    height: auto;
    padding: 80px 15px;
  }

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

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

  /* FIX BIG WIDTH SECTIONS */
  .about,
  .principal,
  .achievements,
  .rules,
  .testimonial {
    width: 95%;
    padding: 30px 20px;
  }

  .stats,
  .teachers,
  .results,
  .info,
  .location {
    width: 95%;
  }

  /* FLEX → COLUMN */
  .stats,
  .feature-box,
  .teacher-cards,
  .program-box,
  .result-box,
  .info {
    flex-direction: column;
  }

  /* CARDS */
  .stat-card,
  .teacher-card,
  .program-card,
  .result-card,
  .info-card {
    width: 100%;
  }

  /* FORM */
  .admission-contact {
    width: 95%;
    padding: 30px 20px;
  }

  /* WATERMARK FIX */
  .waqas-watermark {
    font-size: 38px;
    letter-spacing: 3px;
  }

  /* MAP */
  iframe {
    height: 220px;
  }

  /* FOOTER */
  .footer p {
    font-size: 13px;
    line-height: 1.6;
  }
}