:root{
  --purple:#3b1d7a;
  --gold:#f3c13a;
  --green:#106b4f;
  --ink:#1a1a1a;
  --muted:#6b7280;
  --bg:#f7f7fb;
  --white:#ffffff;
  --radius:1.2rem;
  --shadow:0 6px 20px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;line-height:1.6;background:var(--bg);color:var(--ink)}

.container{width:min(1150px,92%);margin:auto}
.section-title{font-size:clamp(1.6rem,2.5vw,2rem);margin:1.4rem 0}

.site-header{position:sticky;top:0;background:var(--white);z-index:1000;border-bottom:2px solid #e9e9f4}
.site-header.scrolled{box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{width:52px;height:52px;border-radius:50%;border:3px solid var(--gold);background:#fff;object-fit:cover}
.brand-title{font-weight:800;color:var(--green);letter-spacing:.2px}
.brand-sub{font-size:.78rem;color:var(--muted)}

.nav-toggle{display:none;flex-direction:column;gap:4px;border:0;background:transparent;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:var(--purple);display:block}

.nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.nav a{padding:.55rem .8rem;border-radius:.6rem;text-decoration:none;color:var(--purple);font-weight:600}
.nav a.active,.nav a:hover{background:rgba(16,107,79,.1)}

/* Mobile Navigation Fix */
@media (max-width:880px){
  .nav-toggle{display:flex;flex-direction:column;justify-content:space-around;width:30px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001}
  .nav-toggle span{width:100%;height:3px;background:var(--purple);transition:all 0.3s ease}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}
  .nav{position:fixed;top:80px;left:0;width:100%;background:var(--white);box-shadow:0 10px 15px rgba(0,0,0,0.1);padding:1rem 0;transform:translateY(-150%);transition:transform 0.3s ease;z-index:1000}
  .nav.active{transform:translateY(0)}
  .nav ul{flex-direction:column;gap:0.5rem;padding:0 1rem}
  .nav a{display:block;padding:0.8rem 1rem;border-radius:0.5rem}
}

/* Animation Classes */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}

.animate-fade-in{animation:fadeIn 1s ease forwards}
.animate-slide-up{animation:slideUp 0.8s ease forwards}
.animate-scale-in{animation:scaleIn 0.8s ease forwards}
.delay-1{animation-delay:0.3s}
.delay-2{animation-delay:0.6s}

.animate-stagger > *{opacity:0;animation:slideUp 0.6s ease forwards}
.animate-stagger > *:nth-child(1){animation-delay:0.1s}
.animate-stagger > *:nth-child(2){animation-delay:0.3s}
.animate-stagger > *:nth-child(3){animation-delay:0.5s}

.motto{font-size:1.2rem;color:var(--purple);text-align:center;margin-bottom:2rem;font-style:italic}

.hero{background:linear-gradient(135deg, rgba(59,29,122,.9), rgba(16,107,79,.95)), url('assets/logo.png') center/150px no-repeat;color:#fff;padding:clamp(2rem,4vw,3rem) 0}
.hero-inner{display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:2rem}
.hero h1{font-size:clamp(2rem,4.5vw,3rem);line-height:1.15;margin:.2rem 0 .6rem}
.hero .accent{color:var(--gold)}
.hero .actions{display:flex;gap:.8rem;margin-top:1rem}
.hero-badge img{width:160px;height:160px;border-radius:999px;border:6px solid var(--gold);background:#fff;box-shadow:var(--shadow)}
@media (max-width:880px){.hero-inner{grid-template-columns:1fr}.hero-badge{justify-self:center}}

.btn{display:inline-flex;gap:.5rem;align-items:center;border:2px solid transparent;border-radius:999px;padding:.7rem 1.1rem;font-weight:700;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--green);color:#fff}
.btn-outline{border-color:#fff;color:#fff;background:transparent}
.btn-gold{background:var(--gold);color:#1e1b04}
.btn:hover{filter:brightness(.95)}

.pillars .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.2rem 0 2rem}
.card{background:#fff;border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow);border-left:6px solid var(--gold)}
.card h3{margin-top:.2rem;color:var(--purple)}
@media (max-width:880px){.pillars .cards{grid-template-columns:1fr}}

.highlight{background:var(--purple);color:#fff;margin:2rem 0}
.highlight-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 0}
.btn.btn-gold{white-space:nowrap}

.news-preview .news-list{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.news-preview .news-list li{background:#fff;border-radius:var(--radius);padding:.8rem 1rem;display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;border-left:6px solid var(--green);box-shadow:var(--shadow)}
.tag{font-size:.75rem;background:rgba(243,193,58,.2);padding:.2rem .5rem;border-radius:.5rem;color:#694f04}

.page h1{color:var(--purple)}
.page .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.page .values-grid article,.programs article{background:#fff;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);border-left:6px solid var(--gold)}
.programs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0 2rem}
.columns{columns:2;gap:1.5rem}

.steps{background:#fff;border-radius:var(--radius);padding:1rem 1.2rem;box-shadow:var(--shadow)}
.apply-box{margin-top:1.5rem;background:linear-gradient(135deg,#fff,rgba(243,193,58,.15));border-radius:var(--radius);padding:1rem 1.2rem;border:1px solid #eee}
.apply-form,.contact-form{display:grid;gap:.8rem}
.apply-form input,.apply-form select,.apply-form textarea,
.contact-form input,.contact-form textarea{width:100%;padding:.7rem;border:1px solid #d9dbe8;border-radius:.6rem;background:#fff}
.form-note{font-size:.85rem;color:var(--muted)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:880px){.grid-2,.grid-3{grid-template-columns:1fr}}

.news-item{background:#fff;border-radius:var(--radius);padding:1rem 1.2rem;margin:1rem 0;box-shadow:var(--shadow)}

.site-footer{background:#0d0a1a;color:#d9dbf1;margin-top:2rem;position:relative}
.site-footer a{color:#d9dbf1;text-decoration:none}
.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:.8rem 0;margin-top:1rem}
.site-footer .to-top{position:absolute;right:1rem;bottom:1rem;background:var(--gold);color:#000;text-decoration:none;padding:.4rem .6rem;border-radius:.5rem;box-shadow:var(--shadow)}

.contact-list{list-style:none;padding:0;margin:0}
.contact-list.big li{font-size:1.1rem}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:.3rem}

/* Login Page Styles */
.login-page{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg, rgba(59,29,122,.9), rgba(16,107,79,.95))}
.login-container{background:white;padding:2rem;border-radius:var(--radius);width:min(400px,90%);box-shadow:var(--shadow)}
.login-logo{width:80px;height:80px;display:block;margin:0 auto 1rem;border-radius:50%;border:3px solid var(--gold)}
.login-form h2{text-align:center;color:var(--purple);margin-bottom:1.5rem}
.form-group{margin-bottom:1rem}
.form-group input{width:100%;padding:0.8rem;border:1px solid #ddd;border-radius:0.5rem}
.error-message{color:#e74c3c;text-align:center;margin-bottom:1rem}

/* Admin Dashboard */
.admin-dashboard{padding:2rem 0}
.welcome-message{color:var(--muted);margin-bottom:2rem}
.admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.admin-card{background:white;border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform 0.3s ease;border-left:6px solid var(--gold);position:relative;overflow:hidden}
.admin-card:hover{transform:translateY(-5px)}
.admin-card h3{color:var(--purple);margin-bottom:0.5rem}
.admin-card p{color:var(--muted);margin-bottom:1.5rem}
.card-icon{font-size:2rem;position:absolute;right:1rem;bottom:1rem;opacity:0.2}
.admin-card.logout{border-left-color:#e74c3c}

/* Admissions Page */
.page-intro{font-size:1.1rem;color:var(--muted);margin-bottom:2rem}
.program-cards{display:grid;gap:1rem}
.program-card{background:white;border-radius:var(--radius);padding:1.2rem;margin-bottom:1rem;box-shadow:var(--shadow);border-left:4px solid var(--gold)}
.program-card.coming-soon{opacity:0.8;position:relative}
.program-card.coming-soon::after{content:"Coming Soon";position:absolute;top:0.5rem;right:0.5rem;background:var(--gold);color:#1e1b04;padding:0.2rem 0.5rem;border-radius:0.5rem;font-size:0.8rem;font-weight:bold}
.program-card h3{color:var(--purple);margin-top:0}
.program-card ul{padding-left:1.2rem}
.success-message{background:rgba(16,107,79,0.1);border-left:4px solid var(--green);padding:1rem;margin-bottom:2rem;border-radius:0 0.5rem 0.5rem 0}
.success-message p{margin:0.5rem 0}

/* Admin Dashboard Styles */
.admin-dashboard {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.dashboard-card {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Login Page Styles */
.login-container {
    max-width: 400px;
    margin: 5rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.login-container input {
    display: block;
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.login-container button {
    background: #3b1d7a;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
}

.error {
    color: #d9534f;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: #f8d7da;
    border-radius: 4px;
}

/* Hero Banner */
.hero-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/school-building.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 0;
  text-align: center;
}

.hero-title {
  font-size: 3rem;
  margin-bottom: 10px;
  color: var(--gold);
}

.hero-subtitle {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.hero-motto {
  font-size: 1.3rem;
  font-style: italic;
  margin-bottom: 30px;
}

/* About Section */
.about-section {
  padding: 60px 0;
  background: var(--bg);
}

.vision-statement {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: center;
  line-height: 1.6;
}

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

.feature-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 15px;
  color: var(--green);
}

/* Programs Section */
.programs-highlight {
  padding: 60px 0;
  background: var(--purple);
  color: white;
}

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

.program-card {
  background: rgba(255,255,255,0.1);
  padding: 30px;
  border-radius: 8px;
  border-left: 5px solid var(--gold);
}

.program-card.coming-soon {
  position: relative;
  opacity: 0.8;
}

.program-card.coming-soon::after {
  content: "Coming Soon";
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--gold);
  color: #000;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }
  .hero-subtitle {
    font-size: 1.4rem;
  }
}

/* Hero Section */
.hero-section {
  background: linear-gradient(rgba(0, 0, 0, 0.6), url('assets/hero-bg.jpg') center/cover;
  color: white;
  padding: 120px 0;
  text-align: center;
}

.hero-section h1 {
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-section .tagline {
  font-size: 1.3rem;
  margin-bottom: 30px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Features Section */
.features-section {
  padding: 60px 0;
  background: var(--bg);
}

.features-section .container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
}

.feature-box {
  flex: 1;
  min-width: 250px;
  text-align: center;
  padding: 30px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

/* About Section */
.about-section {
  padding: 80px 0;
}

.about-section h2 {
  text-align: center;
  margin-bottom: 50px;
  color: var(--purple);
}

.about-content {
  display: flex;
  align-items: center;
  gap: 50px;
}

.about-text {
  flex: 1;
}

.about-image {
  flex: 1;
}

.about-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Programs Section */
.programs-section {
  padding: 80px 0;
  background: var(--bg);
}

.programs-section h2 {
  text-align: center;
  margin-bottom: 50px;
  color: var(--purple);
}

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

.program-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  border-left: 4px solid var(--gold);
}

.program-card.coming-soon {
  position: relative;
  opacity: 0.9;
}

.program-card.coming-soon::after {
  content: "Coming Soon";
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--gold);
  color: #000;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .about-content {
    flex-direction: column;
  }
  
  .feature-box {
    min-width: 100%;
  }
}
/* Main Layout */
.school-homepage {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  gap: 30px;
}

.main-content {
  flex: 2;
}

.sidebar {
  flex: 1;
}

/* Welcome Section */
.welcome-section {
  margin-bottom: 40px;
}

.welcome-section h1 {
  color: var(--purple);
  margin-bottom: 20px;
  font-size: 2.2rem;
}

.welcome-content {
  display: flex;
  gap: 30px;
}

.welcome-text {
  flex: 1;
}

.welcome-text p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.welcome-image {
  flex: 1;
}

.welcome-image img {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.read-more {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}

/* News Section */
.news-section {
  margin-bottom: 40px;
}

.news-section h2 {
  color: var(--purple);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.news-list {
  display: grid;
  gap: 20px;
}

.news-item {
  padding: 15px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.news-date {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.view-all {
  display: inline-block;
  margin-top: 15px;
  color: var(--green);
  font-weight: 600;
}

/* Sidebar Styles */
.sidebar h3 {
  color: var(--purple);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.quick-links {
  background: white;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.quick-links ul {
  list-style: none;
  padding: 0;
}

.quick-links li {
  margin-bottom: 10px;
}

.quick-links a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s;
}

.quick-links a:hover {
  color: var(--green);
}

.diary-dates {
  background: white;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.diary-dates ul {
  list-style: none;
  padding: 0;
}

.diary-dates li {
  display: flex;
  margin-bottom: 15px;
}

.date {
  font-weight: bold;
  color: var(--green);
  min-width: 40px;
  margin-right: 15px;
}

.contact-box {
  background: var(--purple);
  color: white;
  padding: 20px;
  border-radius: 5px;
}

.contact-box h3 {
  color: white;
  border-bottom: 2px solid var(--gold);
}

.contact-box p {
  margin-bottom: 10px;
}

.contact-btn {
  display: inline-block;
  background: white;
  color: var(--purple);
  padding: 8px 15px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .school-homepage {
    flex-direction: column;
  }
  
  .welcome-content {
    flex-direction: column;
  }
}