:root{--brand:#2e7dd7;--ink:#1b2430;--muted:#6b7280;--bg:#f7f9fc;--card:#ffffff;--radius:14px}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}.section{padding:40px 0}
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb}.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}.brand img{height:34px}.nav a{color:var(--ink);text-decoration:none;margin:0 8px;font-weight:600}.nav a:hover{color:var(--brand)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.video-grid video,.video-grid iframe{width:100%;aspect-ratio:16/9;border-radius:12px;border:1px solid #eee}
.gallery-grid img {
  width: 30%;
  height: auto;     /* <-- ye change karo */
  max-height: 500px; /* optional limit (bada bhi hoga par itna tak) */
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}
/* ==========================
   Video Section Styling
========================== */
#videoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 5px;
  margin-top: 20px;
}

#videoGrid iframe,
#videoGrid video {
  width: 575px;
  height: 250px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
#videoGrid iframe:hover,
#videoGrid video:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Section heading */
.section h2 {
  font-size: 28px;
  text-align: center;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 2px solid #ff5e14;
  display: inline-block;
  padding-bottom: 5px;
}

/* Responsive tweak */
@media (max-width: 400px) {
  #videoGrid iframe,
  #videoGrid video {
    height: 200px;
  }
}
.footer {
  padding: 10px;
  background: #222;
  color: #fff;
  text-align: center;
  margin-top: 40px;
}

.footer p {
  margin-bottom: 10px;
  font-size: 14px;
}

.footer .social-links a {
  display: inline-block;
  margin: 0 8px;
  color: #ebdede;
  font-size: 18px;
  transition: color 0.3s ease;
}

.footer .social-links a:hover {
  color: #0400ff; /* hover pe orange color */
}