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

/* COLORS */
:root{
  --primary:#0d47a1;
  --secondary:#1565c0;
  --accent:#ff9800;
  --light:#f4f7fb;
  --glass: rgba(255,255,255,0.1);
}

/* BODY */
body{
  background: var(--light);
  color:#222;
  line-height:1.6;
}

/* HEADER (GLASS EFFECT) */
header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter: blur(10px);
  background: rgba(13,71,161,0.9);
}

nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 5%;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:white;
}

nav ul{
  display:flex;
  list-style:none;
}

nav ul li{
  margin-left:20px;
}

nav ul li a{
  color:white;
  text-decoration:none;
  font-weight:bold;
  position:relative;
}

/* HOVER LINE */
nav ul li a::after{
  content:"";
  position:absolute;
  width:0;
  height:2px;
  background:#ffcc00;
  bottom:-5px;
  left:0;
  transition:0.3s;
}

nav ul li a:hover::after{
  width:100%;
}

/* MOBILE */
.menu-toggle{
  display:none;
  font-size:28px;
  color:white;
}

@media(max-width:768px){
  .menu-toggle{display:block;}
  nav ul{
    display:none;
    flex-direction:column;
    background:var(--primary);
    width:100%;
  }
  nav ul.active{display:flex;}
  nav ul li{text-align:center;margin:10px;}
}

/* HERO (PREMIUM STYLE) */
.hero{
  height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:white;

  background:
  linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
  url('https://images.unsplash.com/photo-1588072432836-e10032774350?auto=format&fit=crop&w=1600&q=80');
  background-size:cover;
  background-position:center;
}

.hero h1{
  font-size:48px;
  animation:fadeUp 1s ease;
}

.hero p{
  margin-top:10px;
  font-size:20px;
  animation:fadeUp 1.3s ease;
}

/* BUTTON */
.btn{
  padding:12px 25px;
  border-radius:30px;
  text-decoration:none;
  margin:10px;
  font-weight:bold;
  transition:0.3s;
}

.btn-primary{
  background:var(--accent);
  color:white;
}

.btn-secondary{
  background:white;
  color:var(--primary);
}

.btn:hover{
  transform:scale(1.05);
}

/* SECTION */
section{
  padding:80px 5%;
}

/* TITLE */
.section-title{
  text-align:center;
  font-size:34px;
  margin-bottom:40px;
  color:var(--primary);
}
/* CARDS */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

.feature-box{
  background:white;
  border-radius:15px;
  padding:25px;
  text-align:center;
  transition:0.4s;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
}
.feature-box img{
  width:70px;
  margin-bottom:10px;
}
.feature-box:hover{
  transform:translateY(-10px) scale(1.02);
}
/* IMAGE SECTION */
.image-section{
  height:350px;
  margin:50px 0;
  position:relative;
}
.image1{
  background:url('https://images.unsplash.com/photo-1509062522246-3755977927d7') center/cover;
}
.image2{
  background:url('https://images.unsplash.com/photo-1523240795612-9a054b0db644') center/cover;
}
.overlay{
  background:rgba(0,0,0,0.7);
  color:white;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}
.overlay h2{
  font-size:36px;
}

/* STUDENTS */
.student-img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:10px;
}

/* DONATION */
.donation-section{
  background:linear-gradient(135deg,#0d47a1,#002171);
  color:white;
  text-align:center;
}

.donate-btn{
  background:#ffcc00;
  color:black;
}
/* FOOTER */
.footer{
  background:#081f3f;
  color:white;
}

.footer-content{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding:30px 5%;
  gap:20px;
}

.footer-bottom{
  text-align:center;
  padding:15px;
  background:#06162c;
}

/* 🔥 BIG WHATSAPP BUTTON */
.whatsapp{
  position:fixed;
  bottom:25px;
  right:25px;
  background:#25D366;
  color:white;
  font-size:30px;
  padding:18px 22px;
  border-radius:50%;
  box-shadow:0 0 15px #25D366;
  z-index:1000;
  animation:pulse 1.5s infinite;
}

.whatsapp:hover{
  transform:scale(1.1);
}

/* ANIMATION */
.animate{
  opacity:0;
  transform:translateY(50px);
  transition:0.8s;
}

.animate.show{
  opacity:1;
  transform:translateY(0);
}

/* KEYFRAMES */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(30px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.7);}
  70%{box-shadow:0 0 0 15px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

.slider{
  position:relative;
  height:90vh;
  overflow:hidden;
}

.slide{
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  transition:1s;
}

.slide.active{
  opacity:1;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.slide-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:white;
  text-align:center;
  background:rgba(0,0,0,0.5);
  padding:30px;
  border-radius:10px;
}
/* BIG FORM DESIGN (CONTACT + ADMISSION) */
form {
  max-width: 900px;
  margin: 30px auto;
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* TWO COLUMN FORM */
.form-row {
  display: flex;
  gap: 20px;
}

.form-row input {
  width: 100%;
}

/* INPUT STYLE */
form input,
form textarea,
form select {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  margin-bottom: 20px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 16px;
}

/* FOCUS */
form input:focus,
form textarea:focus {
  border-color: #0d47a1;
  outline: none;
}

/* BUTTON */
form button {
  width: 100%;
  font-size: 18px;
  padding: 14px;
}

/* MOBILE FIX */
@media(max-width:768px){
  .form-row{
    flex-direction: column;
  }
section {
  padding: 80px 5%;
}
.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
}

.hero-text h1 {
  font-size: 48px;
  font-weight: bold;
}

.hero-text p {
  font-size: 20px;
  margin-top: 10px;
}
.donate-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: red;
  color: white;
  padding: 12px 20px;
  border-radius: 30px;
  z-index: 9999;
}
.about-section {
  display: flex;
  gap: 30px;
  padding: 50px;
  align-items: center;
}

.about-section img {
  width: 50%;
  border-radius: 15px;
}
.section-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #1a1a1a;
}
h2, h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.section {
  padding: 40px 20px;
}
.step-box {
  background: #f5f5f5;
  padding: 20px;
  margin: 10px 0;
  border-left: 5px solid blue;
}
@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 28px;
  }
}