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

body{
  font-family:Arial,sans-serif;
  color:#222;
}

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

header{
  background:white;
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 0;
}

.navbar h1{
  font-size:24px;
  color:#4338ca;
}

.navbar p{
  font-size:13px;
  color:gray;
}

nav{
  display:flex;
  gap:20px;
}

nav a{
  text-decoration:none;
  color:#222;
  font-weight:bold;
}

nav a:hover{
  color:#4338ca;
}

.menu-btn{
  display:none;
  font-size:30px;
  cursor:pointer;
}

.mobile-menu{
  display:none;
  flex-direction:column;
  padding:20px;
}

.mobile-menu a{
  padding:10px 0;
  text-decoration:none;
  color:#222;
}

.hero{
  background:linear-gradient(135deg,#4338ca,#7e22ce,#db2777);
  color:white;
  padding:100px 0;
}

.hero-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

.badge{
  background:rgba(255,255,255,0.15);
  padding:10px 20px;
  border-radius:50px;
  display:inline-block;
  margin-bottom:20px;
}

.hero h2{
  font-size:55px;
  margin-bottom:20px;
}

.hero p{
  line-height:1.8;
  margin-bottom:30px;
}

.hero-buttons{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.hero button{
  padding:14px 28px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:bold;
}

.outline-btn{
  background:transparent;
  border:2px solid white;
  color:white;
}

.stats-box{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.stat-card{
  background:rgba(255,255,255,0.1);
  padding:30px;
  border-radius:20px;
  text-align:center;
}

.stat-card h3{
  font-size:40px;
}

.about,
.facilities,
.gallery,
.contact{
  padding:90px 0;
}

.about-grid,
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

.about img{
  width:100%;
  border-radius:20px;
}

.section-title,
.about h2,
.contact h2{
  font-size:42px;
  margin-bottom:20px;
}

.about p,
.contact p{
  line-height:1.8;
}

.about-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:30px;
}

.about-card,
.facility-card{
  background:#f5f5f5;
  padding:25px;
  border-radius:20px;
  text-decoration:none;
  color:#222;
  transition:0.3s;
}

.about-card:hover,
.facility-card:hover{
  transform:translateY(-10px);
}

.facility-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.gallery-grid img{
  width:100%;
  height:250px;
  object-fit:cover;
  border-radius:20px;
}

.contact{
  background:#4338ca;
  color:white;
}

.contact-form{
  background:white;
  padding:40px;
  border-radius:20px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  margin-bottom:20px;
  padding:15px;
  border:1px solid #ccc;
  border-radius:10px;
}

.contact-form button{
  width:100%;
  padding:15px;
  background:#4338ca;
  color:white;
  border:none;
  border-radius:10px;
}

footer{
  background:#111;
  color:white;
  text-align:center;
  padding:25px;
}

@media(max-width:900px){

  nav{
    display:none;
  }

  .menu-btn{
    display:block;
  }

  .hero-content,
  .about-grid,
  .contact-grid,
  .facility-grid,
  .gallery-grid{
    grid-template-columns:1fr;
  }

  .hero h2{
    font-size:40px;
  }

  .about-cards{
    grid-template-columns:1fr;
  }

}
/* ========================= */
/* INSTITUTION HERO */
/* ========================= */

.institution-hero,
.facility-hero{
  background:linear-gradient(135deg,#4338ca,#7e22ce,#db2777);
  color:white;
  padding:120px 0 80px;
  text-align:center;
}

.institution-hero h1,
.facility-hero h1{
  font-size:55px;
  margin-bottom:20px;
}

.institution-hero p,
.facility-hero p{
  font-size:20px;
  opacity:0.9;
}

/* ========================= */
/* INSTITUTIONS PAGE */
/* ========================= */

.institutions-page{
  padding:100px 0;
  background:#f8f8ff;
}

.institution-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}

.institution-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:white;
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:0.4s;
}

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

.institution-image{
  min-height:350px;
  background-size:cover;
  background-position:center;
}

.engineering{
  background-image:url(assets/poly.jpg);
}

.arts{
  background-image:url(assets/arts.jpg);
}



.institution-content{
  padding:50px;
}

.institution-content span{
  color:#7e22ce;
  font-weight:bold;
}

.institution-content h2{
  font-size:40px;
  margin:15px 0;
}

.institution-content p{
  line-height:1.8;
  margin-bottom:20px;
}

.institution-content ul{
  list-style:none;
  margin-bottom:25px;
}

.institution-content ul li{
  margin-bottom:10px;
}

.institution-content button{
  padding:14px 30px;
  border:none;
  background:#4338ca;
  color:white;
  border-radius:12px;
  cursor:pointer;
  font-weight:bold;
}

/* ========================= */
/* FACILITIES PAGE */
/* ========================= */

.facilities-page{
  padding:100px 0;
  background:#f4f7ff;
}

.facility-detail{
  background:white;
  padding:40px;
  border-radius:25px;
  margin-bottom:30px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  border-left:8px solid #4338ca;
  transition:0.4s;
}

.facility-detail:hover{
  transform:translateX(10px);
}

.facility-detail h2{
  color:#4338ca;
  margin-bottom:15px;
  font-size:32px;
}

.facility-detail p{
  line-height:1.8;
  font-size:18px;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:900px){

  .institution-card{
    grid-template-columns:1fr;
  }

  .institution-hero h1,
  .facility-hero h1{
    font-size:40px;
  }

  .institution-content{
    padding:30px;
  }

}

/* FACILITY IMAGE STYLE */

.facility-detail{
  display:grid;
  grid-template-columns:350px 1fr;
  gap:30px;
  align-items:center;
}

.facility-detail img{
  width:100%;
  height:250px;
  object-fit:cover;
  border-radius:20px;
}

.facility-content h2{
  color:#4338ca;
  margin-bottom:15px;
  font-size:32px;
}

.facility-content p{
  line-height:1.8;
  font-size:18px;
}

/* MOBILE */

@media(max-width:900px){

  .facility-detail{
    grid-template-columns:1fr;
  }

}

/* NAVBAR ACTIVE EFFECT */

nav a,
.mobile-menu a{
  transition:0.3s;
}

nav a:hover,
.mobile-menu a:hover{
  color:#4338ca;
}

/* MOBILE MENU */

.mobile-menu{
  background:white;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.mobile-menu a{
  font-weight:bold;
  border-bottom:1px solid #eee;
}

/* ========================= */
/* TRUSTEES PAGE */
/* ========================= */

.trustees-hero{
  background:linear-gradient(135deg,#4338ca,#7e22ce,#db2777);
  color:white;
  padding:120px 0 80px;
  text-align:center;
}

.trustees-hero h1{
  font-size:55px;
  margin-bottom:20px;
}

.trustees-hero p{
  font-size:20px;
  opacity:0.9;
}

.trustees-page{
  padding:100px 0;
  background:#f4f7ff;
}

.trustees-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}

.trustee-card{
  background:white;
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:0.4s;
}

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


.trustee-content{
  padding:35px;
}

.trustee-content span{
  color:#7e22ce;
  font-weight:bold;
}

.trustee-content h2{
  margin:15px 0;
  font-size:32px;
}

.trustee-content p{
  line-height:1.8;
  color:#555;
}

/* MOBILE */

@media(max-width:900px){

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

  .trustees-hero h1{
    font-size:40px;
  }

}

/* TRUSTEE CARD WITHOUT IMAGE */

.trustee-card{
  padding:20px;
  border-top:6px solid #4338ca;
}

.trustee-content{
  text-align:center;
}