/* ============ HERO SIZE YAHAN SE CHANGE KARO ============ */
:root {
  --hero-height-pc: 600px; /* PC me hero ki height */
  --hero-height-mobile: 430px; /* Mobile me hero ki height */
  --hero-img-position: center top; /* image ka kaunsa part dikhe: center center / left / right / top */

  --gold: #f5b324;
  --dark: #14161f;
  --text: #2b2f3a;
  --muted: #6b7280;
  --cream: #fbf8f3;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Poppins", sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============ BUTTONS ============ */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold);
  color: #1a1a1a;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}
.btn-gold:hover {
  background: #e0a010;
  transform: translateY(-2px);
}
.btn-gold.full {
  width: 100%;
  padding: 12px;
}
.btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  padding: 9px 28px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: 0.3s;
}
.btn-outline:hover {
  background: #fff;
  color: var(--dark);
}

/* ============ HEADER ============ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-name {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--dark);
}
.brand-name b {
  color: var(--gold);
  font-weight: 800;
}
.brand-name.light {
  color: #fff;
  font-size: 20px;
}
.brand-tag {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1.5px;
  margin-top: 3px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
}
.nav a {
  font-size: 15px;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
}
.nav a:hover,
.nav a.active {
  border-bottom-color: var(--gold);
  color: var(--dark);
}
.nav a.nav-btn-mobile {
  display: none;
}
.menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--dark);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  width: 100%;
  height: var(--hero-height-pc);
  overflow: hidden;
  background: var(--dark);
}
.hero-slides,
.hero-slide {
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s;
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-img-position);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 17, 25, 0.92) 0%,
    rgba(15, 17, 25, 0.7) 35%,
    rgba(15, 17, 25, 0) 65%
  );
}
.hero-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.hero-small {
  font-size: 15px;
  letter-spacing: 1.5px;
  font-weight: 500;
  margin-bottom: 10px;
  word-spacing: 6px;
}
.hero-content h1 {
  font-size: 60px;
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 18px;
}
.hero-content h1 span {
  color: var(--gold);
}
.hero-text {
  font-size: 17px;
  max-width: 460px;
  margin-bottom: 26px;
  color: #e8e8e8;
}
.hero-btn {
  align-self: flex-start;
  padding: 12px 26px;
  font-size: 15px;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  z-index: 5;
  transition: 0.3s;
}
.hero-arrow:hover {
  background: var(--gold);
  color: #000;
}
.hero-arrow.prev {
  left: 14px;
}
.hero-arrow.next {
  right: 14px;
}
.hero-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.hero-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.hero-dots span.active {
  background: var(--gold);
}
.hero.single .hero-arrow,
.hero.single .hero-dots {
  display: none;
} /* ek hi slide ho to arrows/dots chhup jayenge */

/* ============ COMMON TITLES ============ */
.eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  padding-left: 10px;
  border-left: 3px solid var(--gold);
  line-height: 1;
  margin-bottom: 4px;
  color: var(--dark);
}
.eyebrow.gold {
  color: var(--gold);
  border: none;
  padding: 0;
}
.title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--dark);
  margin-bottom: 20px;
  line-height: 1.2;
}

/* ============ WHY ============ */
.why {
  background: var(--cream);
  padding: 50px 0;
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: center;
}
.why-left p:last-child {
  font-size: 14.5px;
  color: #444;
  line-height: 1.9;
  max-width: 430px;
}
.why-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.why-item {
  text-align: center;
  padding: 18px 14px;
}
.why-item:nth-child(-n + 3) {
  border-bottom: 1px solid #e9e2d6;
}
.why-item:not(:nth-child(3n)) {
  border-right: 1px solid #e9e2d6;
}
.why-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #fcebd0;
  color: #b8741a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.why-item h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
}
.why-item p {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ============ PROGRAMMES ============ */
.programmes {
  padding: 50px 0 30px;
}
.prog-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.prog-card {
  border-radius: 14px;
  padding: 16px 14px 20px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: 0.3s;
  display: block;
}
.prog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.prog-img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #ddd;
}
.prog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prog-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark);
}
.prog-card p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.c-purple {
  background: #f1ecfb;
}
.c-pink {
  background: #fde8ee;
}
.c-blue {
  background: #e4f1fb;
}
.c-green {
  background: #e5f6ea;
}
.c-orange {
  background: #fdeee1;
}

/* ============ CLASSROOM ============ */
.classroom {
  padding: 30px 0 20px;
}
.slider-wrap {
  position: relative;
}
.class-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 0;
}
.class-track::-webkit-scrollbar {
  display: none;
}
.class-track img {
  flex: 0 0 calc((100% - 72px) / 7 * 1.5);
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  scroll-snap-align: start;
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 3;
  transition: 0.3s;
}
.slider-btn:hover {
  background: var(--gold);
}
.slider-btn.left {
  left: -14px;
}
.slider-btn.right {
  right: -14px;
}

/* ============ REVIEWS ============ */
.reviews {
  padding: 20px 0 50px;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review-card {
  background: var(--cream);
  border: 1px solid #efe7d8;
  border-radius: 14px;
  padding: 22px;
  transition: 0.3s;
}
.review-card:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}
.stars {
  color: var(--gold);
  font-size: 14px;
  margin-bottom: 10px;
}
.review-card > p {
  font-size: 14px;
  color: #444;
  margin-bottom: 16px;
  line-height: 1.7;
}
.reviewer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reviewer img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.reviewer h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
}
.reviewer span {
  font-size: 12px;
  color: var(--muted);
}

/* ============ CONTACT ============ */
.contact-wrap {
  padding: 10px 0 40px;
}
.contact-box {
  background: var(--dark);
  border-radius: 20px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 36px;
  color: #fff;
  align-items: center;
}
.contact-left h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 6px 0 10px;
}
.contact-left > p {
  font-size: 14px;
  color: #cfd2da;
}
.contact-links {
  display: flex;
  gap: 26px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.cl-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cl-item b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.cl-item small {
  font-size: 12px;
  color: #aeb2bd;
}
.cl-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.cl-icon.wa {
  background: #25d366;
}
.cl-icon.mail {
  background: #2b2f3d;
  border: 1px solid #444;
}
.contact-form {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.03);
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field {
  margin-bottom: 14px;
}
.field label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: #e5e7eb;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #3a3f50;
  background: #232736;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
}
.field textarea {
  resize: vertical;
}
.or {
  text-align: center;
  font-size: 12px;
  color: #aeb2bd;
  margin: 10px 0;
}

/* ============ FOOTER ============ */
.footer {
  background: #0e1017;
  color: #cfd2da;
  padding-top: 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 1.3fr 0.8fr;
  gap: 30px;
  padding-bottom: 22px;
}
.f-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.f-brand img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.f-brand small {
  font-size: 11px;
}
.f-col h5 {
  color: #fff;
  font-size: 14px;
  margin-bottom: 12px;
}
.f-col li {
  font-size: 13px;
  margin-bottom: 8px;
}
.f-col li i {
  color: var(--gold);
  margin-right: 8px;
  font-size: 12px;
}
.f-col a:hover {
  color: var(--gold);
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.socials {
  display: flex;
  gap: 16px;
  font-size: 18px;
}
.socials a:hover {
  color: var(--gold);
}
.copy {
  border-top: 1px solid #222634;
  text-align: center;
  font-size: 12px;
  padding: 14px 10px;
  color: #9aa0ae;
}

/* ============ TABLET ============ */
@media (max-width: 1024px) {
  .prog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  .why-left p:last-child {
    max-width: 100%;
  }
  .contact-box {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .class-track img {
    flex: 0 0 calc((100% - 24px) / 3);
    height: 170px;
  }
  .review-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============ MOBILE (screenshot jaisa layout) ============ */
@media (max-width: 768px) {
  .nav-wrap {
    height: 64px;
  }
  .brand-logo {
    width: 42px;
    height: 42px;
  }
  .brand-name {
    font-size: 18px;
  }
  .brand-tag {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .nav-btn-pc {
    display: none;
  }
  .menu-btn {
    display: block;
    margin-left: auto;
  }

  .nav {
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: 0.4s;
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.08);
  }
  .nav.open {
    max-height: 360px;
    padding: 12px 20px 20px;
  }
  .nav a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }
  .nav a.nav-btn-mobile {
    display: inline-flex;
    width: auto;
    margin-top: 12px;
    border: none;
    padding: 11px 22px;
  }

  /* Hero: text image ke upar left me, button niche, arrows + dots */
  .hero {
    height: var(--hero-height-mobile);
  }
  .hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.55) 55%,
      rgba(255, 255, 255, 0) 90%
    );
  }
  .hero-content {
    justify-content: flex-start;
    padding-top: 18px;
    color: var(--dark);
  }
  .hero-small {
    font-size: 15px;
    color: #555;
    letter-spacing: 0;
    word-spacing: 0;
    font-weight: 400;
  }
  .hero-content h1 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 10px;
    font-weight: 700;
    color: #232c44;
  }
  .hero-text {
    font-size: 17px;
    color: #2a2f3c;
    max-width: 340px;
    margin-bottom: 0;
  }
  .hero-btn {
    position: absolute;
    left: 20px;
    bottom: 22px;
    background: #22b55c;
    color: #fff;
  }
  .hero-arrow {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .hero-arrow.prev {
    left: 8px;
  }
  .hero-arrow.next {
    right: 8px;
  }

  .title {
    font-size: 26px;
  }
  .why {
    padding: 36px 0;
  }
  .why-right {
    grid-template-columns: 1fr 1fr;
  }
  .why-item:nth-child(-n + 3) {
    border-bottom: none;
  }
  .why-item:not(:nth-child(3n)) {
    border-right: none;
  }
  .why-item:nth-child(odd) {
    border-right: 1px solid #e9e2d6;
  }
  .why-item:nth-child(-n + 4) {
    border-bottom: 1px solid #e9e2d6;
  }

  .prog-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .prog-card:last-child {
    grid-column: 1/-1;
  }
  .class-track img {
    flex: 0 0 78%;
    height: 200px;
  }
  .slider-btn.left {
    left: 4px;
  }
  .slider-btn.right {
    right: 4px;
  }
  .review-grid {
    grid-template-columns: 1fr;
  }

  .contact-box {
    padding: 22px 16px;
  }
  .contact-left h2 {
    font-size: 26px;
  }
  .row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .f-brand {
    grid-column: 1/-1;
  }
}

@media (max-width: 480px) {
  .prog-grid {
    grid-template-columns: 1fr;
  }
  .prog-card:last-child {
    grid-column: auto;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
/* ============ ABOUT PAGE EXTRA STYLES ============ */
/* Ye file style.css ke BAAD load hoti hai, isliye colors/variables wahi se aate hain */

.sec{padding:60px 0}
.sec-head{margin-bottom:34px}
.sec-head.center{text-align:center}
.sec-head.center .eyebrow{display:inline-block}
.sec-sub{max-width:620px;margin:10px auto 0;color:var(--muted);font-size:15px}

/* ===== Scroll reveal animation ===== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:none}

/* ============ PAGE BANNER ============ */
.page-banner{position:relative;height:340px;background:var(--dark);overflow:hidden}
.banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,17,25,.92) 0%,rgba(15,17,25,.7) 50%,rgba(15,17,25,.35) 100%)}
.banner-content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.crumb{font-size:13px;color:#cfd2da;margin-bottom:12px}
.crumb a:hover{color:var(--gold)}
.crumb i{font-size:9px;margin:0 6px}
.banner-content h1{font-size:52px;font-weight:700;line-height:1.15;margin-bottom:12px}
.banner-content h1 span{color:var(--gold)}
.banner-text{font-size:17px;max-width:540px;color:#e8e8e8}

/* ============ STORY ============ */
.story-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.story-imgs{position:relative;padding:0 40px 40px 0}
.s-img{border-radius:16px;object-fit:cover;background:#e8e2d6}
.s-img.big{width:100%;height:420px}
.s-img.small{position:absolute;right:0;bottom:0;width:48%;height:210px;border:6px solid #fff;box-shadow:0 10px 26px rgba(0,0,0,.15)}
.exp-badge{position:absolute;left:-10px;top:30px;background:var(--gold);color:#1a1a1a;border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 24px rgba(245,179,36,.4)}
.exp-badge b{font-size:38px;line-height:1;font-weight:800}
.exp-badge span{font-size:12px;font-weight:600;line-height:1.3}
.story-text p{font-size:15px;color:#4a4f5c;line-height:1.9;margin-bottom:14px}
.tick-list{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.tick-list li{font-size:14px;font-weight:500;display:flex;gap:8px;align-items:flex-start;color:var(--dark)}
.tick-list i{color:#22b55c;margin-top:4px}

/* ============ STATS ============ */
.stats{background:var(--dark);padding:46px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat{padding:10px;border-right:1px solid rgba(255,255,255,.12)}
.stat:last-child{border-right:none}
.stat h3{font-size:46px;font-weight:700;color:var(--gold);line-height:1.1}
.stat p{color:#cfd2da;font-size:14px;margin-top:6px}

/* ============ MISSION / VISION ============ */
.mvv{background:var(--cream)}
.mvv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mvv-card{background:#fff;border-radius:16px;padding:32px 26px;text-align:center;border:1px solid #efe7d8;transition:.3s}
.mvv-card:hover{transform:translateY(-8px);box-shadow:0 16px 30px rgba(0,0,0,.08)}
.mvv-icon{width:70px;height:70px;border-radius:50%;background:#fcebd0;color:#b8741a;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px}
.mvv-card h3{font-size:21px;margin-bottom:10px;color:var(--dark)}
.mvv-card p{font-size:14px;color:var(--muted);line-height:1.8}

/* ============ HOW WE TEACH ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;background:#fff;border:1px solid #eee;border-radius:16px;padding:30px 24px;transition:.3s;overflow:hidden}
.step:hover{border-color:var(--gold);box-shadow:0 14px 28px rgba(0,0,0,.08);transform:translateY(-6px)}
.step-no{position:absolute;right:16px;top:8px;font-size:52px;font-weight:800;color:#f4efe5;line-height:1}
.step-icon{width:56px;height:56px;border-radius:14px;background:var(--gold);color:#1a1a1a;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;position:relative}
.step h4{font-size:18px;margin-bottom:8px;color:var(--dark);position:relative}
.step p{font-size:14px;color:var(--muted);position:relative}

/* ============ WHY CHOOSE ============ */
.choose{background:var(--cream)}
.choose-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.choose-text>p:not(.eyebrow){color:#4a4f5c;font-size:15px;margin-bottom:20px}
.why-list{display:grid;gap:16px}
.wl-item{display:flex;gap:16px;background:#fff;padding:16px 18px;border-radius:12px;border:1px solid #efe7d8}
.wl-item>i{width:46px;height:46px;border-radius:50%;background:#fcebd0;color:#b8741a;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.wl-item h5{font-size:15px;color:var(--dark)}
.wl-item p{font-size:13px;color:var(--muted)}
.choose-img img{width:100%;height:480px;object-fit:cover;border-radius:18px;background:#e8e2d6}

/* ============ TIMELINE ============ */
.timeline{position:relative;max-width:820px;margin:0 auto}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;background:#f0e3c4;transform:translateX(-50%)}
.tl-item{position:relative;display:flex;justify-content:flex-end;width:50%;padding-right:40px;margin-bottom:30px}
.tl-item:nth-child(even){margin-left:50%;justify-content:flex-start;padding-right:0;padding-left:40px}
.tl-item::after{content:"";position:absolute;right:-9px;top:20px;width:18px;height:18px;border-radius:50%;background:var(--gold);border:4px solid #fff;box-shadow:0 0 0 2px var(--gold)}
.tl-item:nth-child(even)::after{right:auto;left:-9px}
.tl-year{position:absolute;top:14px;right:calc(100% + 30px);font-weight:700;color:var(--gold);font-size:20px;white-space:nowrap;display:none}
.tl-card{background:#fff;border:1px solid #efe7d8;border-radius:14px;padding:18px 22px;box-shadow:0 6px 16px rgba(0,0,0,.04);width:100%}
.tl-card::before{content:attr(data-y)}
.tl-item .tl-year{display:block;position:static;margin-bottom:6px;font-size:18px}
.tl-item{flex-direction:column;align-items:flex-end}
.tl-item:nth-child(even){align-items:flex-start}
.tl-card h4{font-size:17px;color:var(--dark);margin-bottom:4px}
.tl-card p{font-size:13.5px;color:var(--muted)}

/* ============ FACULTY ============ */
.faculty{background:var(--cream)}
.fac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fac-card{background:#fff;border-radius:16px;overflow:hidden;text-align:center;padding-bottom:20px;border:1px solid #efe7d8;transition:.3s}
.fac-card:hover{transform:translateY(-8px);box-shadow:0 16px 30px rgba(0,0,0,.1)}
.fac-img{width:100%;aspect-ratio:1/1;background:linear-gradient(135deg,#fcebd0,#f5d9a1);margin-bottom:14px;overflow:hidden}
.fac-img img{width:100%;height:100%;object-fit:cover}
.fac-card h4{font-size:17px;color:var(--dark)}
.fac-card span{display:block;font-size:13px;color:#b8741a;font-weight:500;margin:2px 0}
.fac-card p{font-size:12.5px;color:var(--muted)}

/* ============ FACILITIES ============ */
.fac-feat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.ff{text-align:center;padding:24px 12px;border-radius:14px;background:#fff;border:1px solid #eee;transition:.3s}
.ff:hover{background:var(--dark);transform:translateY(-6px)}
.ff:hover h5{color:#fff}
.ff i{font-size:28px;color:var(--gold);margin-bottom:12px}
.ff h5{font-size:13.5px;font-weight:600;color:var(--dark);transition:.3s}

/* ============ FAQ ============ */
.faq{background:var(--cream)}
.faq-wrap{max-width:820px}
.faq-item{background:#fff;border:1px solid #efe7d8;border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;padding:16px 20px;background:none;border:none;font-family:inherit;font-size:15.5px;font-weight:600;color:var(--dark);cursor:pointer}
.faq-q i{color:var(--gold);transition:.3s;flex-shrink:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a p{padding:0 20px 18px;font-size:14px;color:var(--muted)}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-item.open{border-color:var(--gold)}

/* ============ CTA BAND ============ */
.cta-band{background:linear-gradient(100deg,var(--gold),#f7c85c);padding:40px 0}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-inner h2{font-size:28px;color:#1a1a1a;line-height:1.25}
.cta-inner p{color:#3a3a3a;margin-top:4px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn-gold{background:var(--dark);color:#fff}
.cta-band .btn-gold:hover{background:#000}
.btn-white{display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border-radius:10px;background:#fff;color:#1a1a1a;font-weight:600;font-size:14px;transition:.3s}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.15)}

.contact-wrap{padding-top:50px}

/* ============ BACK TO TOP ============ */
.to-top{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;border:none;background:var(--gold);color:#1a1a1a;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:0;visibility:hidden;transition:.3s;z-index:90}
.to-top.show{opacity:1;visibility:visible}

/* ============ TABLET ============ */
@media(max-width:1024px){
  .story-grid,.choose-grid{grid-template-columns:1fr}
  .story-imgs{max-width:560px}
  .steps{grid-template-columns:1fr 1fr}
  .fac-grid{grid-template-columns:1fr 1fr}
  .fac-feat-grid{grid-template-columns:repeat(3,1fr)}
  .choose-img img{height:380px}
}

/* ============ MOBILE ============ */
@media(max-width:768px){
  .sec{padding:42px 0}
  .page-banner{height:280px}
  .banner-content h1{font-size:34px}
  .banner-text{font-size:15px}
  .s-img.big{height:300px}
  .s-img.small{height:150px}
  .exp-badge{left:6px;top:14px;padding:10px 14px}
  .exp-badge b{font-size:28px}
  .tick-list{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.12);padding:16px 8px}
  .stat:nth-last-child(-n+2){border-bottom:none}
  .stat h3{font-size:36px}
  .mvv-grid,.steps{grid-template-columns:1fr}

  /* timeline ek side me */
  .timeline::before{left:14px}
  .tl-item,.tl-item:nth-child(even){width:100%;margin-left:0;padding:0 0 0 42px;align-items:flex-start}
  .tl-item::after,.tl-item:nth-child(even)::after{left:5px;right:auto}

  .fac-grid{grid-template-columns:1fr 1fr;gap:14px}
  .fac-feat-grid{grid-template-columns:1fr 1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .cta-inner h2{font-size:23px}
}

@media(max-width:480px){
  .fac-grid{grid-template-columns:1fr}
  .choose-img img{height:300px}
}
/* ============ COURSES PAGE STYLES ============ */
/* style.css aur about.css ke BAAD load hoti hai */

/* ===== FILTER TABS ===== */
.filter-bar{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filter-btn{padding:9px 22px;border-radius:30px;border:1.5px solid #e5dccb;background:#fff;font-family:inherit;font-size:14px;font-weight:600;color:var(--dark);cursor:pointer;transition:.3s}
.filter-btn:hover{border-color:var(--gold)}
.filter-btn.active{background:var(--gold);border-color:var(--gold);color:#1a1a1a;box-shadow:0 6px 14px rgba(245,179,36,.35)}

/* ===== COURSE CARDS ===== */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.course-card{border-radius:18px;overflow:hidden;border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;transition:.35s;animation:popIn .5s ease}
.course-card:hover{transform:translateY(-8px);box-shadow:0 18px 34px rgba(0,0,0,.12)}
.course-card.hide{display:none}
@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}

.cc-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#ddd}
.cc-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.course-card:hover .cc-img img{transform:scale(1.08)}
.cc-tag{position:absolute;left:14px;top:14px;background:var(--dark);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px}

.cc-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.cc-body h3{font-size:24px;font-weight:700;color:var(--dark);margin-bottom:6px}
.cc-desc{font-size:14px;color:#4a4f5c;margin-bottom:14px;line-height:1.7}

.cc-meta{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 0;border-top:1px dashed rgba(0,0,0,.15);border-bottom:1px dashed rgba(0,0,0,.15);margin-bottom:14px}
.cc-meta li{font-size:12.5px;font-weight:500;color:var(--dark)}
.cc-meta i{color:#b8741a;margin-right:5px}

.cc-points{margin-bottom:20px;flex:1}
.cc-points li{font-size:13.5px;color:#3d4250;display:flex;gap:8px;align-items:flex-start;margin-bottom:7px}
.cc-points i{color:#22b55c;margin-top:4px;font-size:12px}

.cc-btns{display:flex;gap:10px}
.cc-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 10px;border-radius:10px;font-size:13.5px;font-weight:600;transition:.3s}
.cc-btn.dark{background:var(--dark);color:#fff}
.cc-btn.dark:hover{background:#000}
.cc-btn.gold{background:var(--gold);color:#1a1a1a}
.cc-btn.gold:hover{background:#e0a010}

/* ===== COMPARE TABLE ===== */
.compare{background:var(--cream)}
.table-wrap{overflow-x:auto;border-radius:16px;border:1px solid #efe7d8;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.05)}
.cmp-table{width:100%;border-collapse:collapse;min-width:680px}
.cmp-table th{background:var(--dark);color:#fff;text-align:left;font-size:14px;font-weight:600;padding:15px 18px}
.cmp-table td{padding:15px 18px;font-size:14px;color:#3d4250;border-bottom:1px solid #f0eadd}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table tbody tr:hover{background:#fffaf0}
.cmp-table td b{color:var(--dark)}

/* ===== INCLUDES ===== */
.inc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.inc-item{text-align:center;padding:26px 14px;border-radius:14px;background:#fff;border:1px solid #eee;transition:.3s}
.inc-item:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.08)}
.inc-item i{width:56px;height:56px;border-radius:50%;background:#fcebd0;color:#b8741a;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 12px}
.inc-item h5{font-size:14.5px;color:var(--dark);margin-bottom:4px}
.inc-item p{font-size:12.5px;color:var(--muted)}

/* ===== ADMISSION PROCESS ===== */
.process{background:var(--cream)}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.proc-grid::before{content:"";position:absolute;top:30px;left:12%;right:12%;border-top:2px dashed #e0cf9f}
.proc{text-align:center;position:relative}
.proc span{width:60px;height:60px;border-radius:50%;background:var(--gold);color:#1a1a1a;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;border:5px solid var(--cream);box-shadow:0 0 0 2px var(--gold)}
.proc h5{font-size:16px;color:var(--dark);margin-bottom:4px}
.proc p{font-size:13.5px;color:var(--muted);max-width:210px;margin:0 auto}

/* ===== TABLET ===== */
@media(max-width:1024px){
  .course-grid{grid-template-columns:1fr 1fr}
  .inc-grid{grid-template-columns:repeat(3,1fr)}
  .proc-grid{grid-template-columns:1fr 1fr;row-gap:30px}
  .proc-grid::before{display:none}
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .course-grid{grid-template-columns:1fr}
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;scrollbar-width:none}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-btn{flex-shrink:0}
  .inc-grid{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:1fr 1fr;gap:22px 14px}
}
/* ============ CAMPUS PAGE STYLES ============ */

/* ===== QUICK JUMP CARDS ===== */
.campus-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.cs-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #efe7d8;
  border-radius: 16px;
  transition: 0.3s;
}
.cs-card:hover {
  border-color: var(--gold);
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}
.cs-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--gold);
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.cs-card b {
  display: block;
  font-size: 16px;
  color: var(--dark);
}
.cs-card small {
  font-size: 12.5px;
  color: var(--muted);
}
.cs-arrow {
  margin-left: auto;
  color: var(--gold);
}

/* ===== CAMPUS SECTION ===== */
.campus-sec.alt {
  background: var(--cream);
}
.campus-sec {
  scroll-margin-top: 70px;
}

/* ===== 5 IMAGE HORIZONTAL GALLERY ===== */
.gallery {
  position: relative;
  margin-bottom: 34px;
}
.g-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 0;
}
.g-track::-webkit-scrollbar {
  display: none;
}
.g-track img {
  /* PC par 5 images ek line me */
  flex: 1 0 calc((100% - 48px) / 5);
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  background: #e8e2d6;
  scroll-snap-align: start;
  cursor: zoom-in;
  transition: 0.35s;
}
.g-track img:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
}
.g-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 3;
  transition: 0.3s;
  display: none; /* PC par chhupa, mobile/tablet par dikhega */
}
.g-btn:hover {
  background: var(--gold);
}
.g-btn.left {
  left: -14px;
}
.g-btn.right {
  right: -14px;
}

/* ===== INFO + MAP ===== */
.campus-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 30px;
  align-items: stretch;
}
.campus-info {
  background: #fff;
  border: 1px solid #efe7d8;
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}
.campus-info h3 {
  font-size: 22px;
  color: var(--dark);
  margin-bottom: 18px;
}
.info-list {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}
.info-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.il-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fcebd0;
  color: #b8741a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.info-list b {
  font-size: 14.5px;
  color: var(--dark);
}
.info-list p {
  font-size: 13.5px;
  color: #4a4f5c;
  line-height: 1.6;
}
.info-list a:hover {
  color: #b8741a;
}
.feat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.feat-tags span {
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--cream);
  border: 1px solid #efe7d8;
  color: var(--dark);
}
.feat-tags i {
  color: var(--gold);
  margin-right: 5px;
}

/* buttons (courses.css wale same) */
.cc-btns {
  display: flex;
  gap: 10px;
}
.cc-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  transition: 0.3s;
}
.cc-btn.dark {
  background: var(--dark);
  color: #fff;
}
.cc-btn.dark:hover {
  background: #000;
}
.cc-btn.gold {
  background: var(--gold);
  color: #1a1a1a;
}
.cc-btn.gold:hover {
  background: #e0a010;
}

.map-box {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #efe7d8;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  min-height: 420px;
  background: #e8e2d6;
}
.map-box iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}

/* ===== FACILITIES (about.css me .fac-feat-grid pehle se hai) ===== */
.facilities-sec {
  background: var(--cream);
}
.facilities-sec .ff {
  border-color: #efe7d8;
}

/* ===== HOW TO REACH ===== */
.reach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.reach-card {
  text-align: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 30px 22px;
  transition: 0.3s;
}
.reach-card:hover {
  border-color: var(--gold);
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}
.reach-card i {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fcebd0;
  color: #b8741a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
}
.reach-card h4 {
  font-size: 18px;
  color: var(--dark);
  margin-bottom: 6px;
}
.reach-card p {
  font-size: 13.5px;
  color: var(--muted);
}

/* ===== LIGHTBOX ===== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 300;
}
.lightbox.show {
  opacity: 1;
  visibility: visible;
}
.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.lb-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: #1a1a1a;
  font-size: 18px;
  cursor: pointer;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .campus-grid {
    grid-template-columns: 1fr;
  }
  .g-track img {
    flex: 0 0 calc((100% - 24px) / 3);
    height: 190px;
  }
  .g-btn {
    display: block;
  }
  .map-box,
  .map-box iframe {
    min-height: 360px;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .campus-switch {
    grid-template-columns: 1fr;
  }
  .g-track img {
    flex: 0 0 78%;
    height: 200px;
  }
  .g-btn.left {
    left: 4px;
  }
  .g-btn.right {
    right: 4px;
  }
  .campus-info {
    padding: 22px 18px;
  }
  .reach-grid {
    grid-template-columns: 1fr;
  }
  .map-box,
  .map-box iframe {
    min-height: 300px;
  }
  .cc-btns {
    flex-direction: column;
  }
}
/* ============ ARTS PAGE STYLES ============ */

/* ===== HERO BANNER ===== */
.arts-banner {
  height: auto;
  min-height: 460px;
  padding: 50px 0;
}
.arts-banner .banner-img {
  object-position: center top;
}
.arts-banner .banner-content {
  height: auto;
}
.arts-banner h1 {
  font-size: 54px;
  margin-bottom: 8px;
}
.arts-banner .banner-text {
  font-size: 20px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.5px;
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 24px;
}
.hero-chips span {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  padding: 7px 16px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 500;
}
.hero-chips i {
  color: var(--gold);
  margin-right: 6px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: 0.3s;
}
.btn-ghost:hover {
  background: #fff;
  color: var(--dark);
}

/* ===== BOARD TABS ===== */
.board-sec {
  background: var(--cream);
}
.tab-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}
.tab-btn {
  padding: 11px 28px;
  border-radius: 30px;
  border: 1.5px solid #e5dccb;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  transition: 0.3s;
}
.tab-btn i {
  margin-right: 6px;
  color: #b8741a;
}
.tab-btn:hover {
  border-color: var(--gold);
}
.tab-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 6px 14px rgba(245, 179, 36, 0.35);
}
.tab-btn.active i {
  color: #1a1a1a;
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
  animation: fadeUp 0.5s ease;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.panel-card {
  background: #fff;
  border: 1px solid #efe7d8;
  border-radius: 16px;
  padding: 26px 24px;
  transition: 0.3s;
}
.panel-card:hover {
  border-color: var(--gold);
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}
.panel-card h4 {
  font-size: 18px;
  color: var(--dark);
  margin-bottom: 14px;
}
.panel-card h4 i {
  color: var(--gold);
  margin-right: 8px;
}
.panel-card li {
  font-size: 14px;
  color: #3d4250;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 9px;
}
.panel-card li i {
  color: #22b55c;
  font-size: 12px;
  margin-top: 5px;
}
.note-line {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
}
.note-line i {
  color: var(--gold);
  margin-right: 5px;
}

/* ===== SUBJECT CARDS ===== */
.sub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sub-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 26px 22px;
  transition: 0.35s;
  position: relative;
  overflow: hidden;
}
.sub-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.4s;
}
.sub-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1);
  border-color: #f0e3c4;
}
.sub-card:hover::before {
  transform: scaleX(1);
}
.sub-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fcebd0;
  color: #b8741a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
  transition: 0.3s;
}
.sub-card:hover .sub-icon {
  background: var(--gold);
  color: #1a1a1a;
}
.sub-card h4 {
  font-size: 17px;
  color: var(--dark);
  margin-bottom: 6px;
}
.sub-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 12px;
}
.sub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sub-tags span {
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--cream);
  border: 1px solid #efe7d8;
  color: var(--dark);
}

/* ===== MEDIUM ===== */
.medium-sec {
  background: var(--cream);
}
.medium-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  max-width: 940px;
  margin: 0 auto;
}
.medium-card {
  position: relative;
  background: #fff;
  border: 1px solid #efe7d8;
  border-radius: 18px;
  padding: 32px 28px;
  transition: 0.3s;
}
.medium-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
}
.m-badge {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--dark);
  color: var(--gold);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.medium-card h4 {
  font-size: 22px;
  color: var(--dark);
  margin-bottom: 8px;
}
.medium-card > p {
  font-size: 14px;
  color: #4a4f5c;
  margin-bottom: 14px;
}
.medium-card li {
  font-size: 14px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.medium-card li i {
  color: #22b55c;
  font-size: 12px;
  margin-top: 5px;
}

/* ===== CAREERS ===== */
.career-sec {
  background: var(--cream);
}
.career-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.career-card {
  text-align: center;
  background: #fff;
  border: 1px solid #efe7d8;
  border-radius: 16px;
  padding: 28px 16px;
  transition: 0.3s;
}
.career-card:hover {
  background: var(--dark);
  transform: translateY(-6px);
}
.career-card i {
  font-size: 30px;
  color: var(--gold);
  margin-bottom: 12px;
}
.career-card h5 {
  font-size: 16px;
  color: var(--dark);
  transition: 0.3s;
}
.career-card p {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
  transition: 0.3s;
}
.career-card:hover h5 {
  color: #fff;
}
.career-card:hover p {
  color: #cfd2da;
}

/* ===== extra spacing helpers ===== */
.roadmap-sec {
  background: #fff;
}
.included-sec {
  background: var(--cream);
}
.included-sec .ff {
  border-color: #efe7d8;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .arts-banner h1 {
    font-size: 44px;
  }
  .sub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .panel-grid {
    grid-template-columns: 1fr 1fr;
  }
  .career-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .arts-banner {
    min-height: 440px;
    padding: 36px 0 40px;
  }
  .arts-banner h1 {
    font-size: 32px;
  }
  .arts-banner .banner-text {
    font-size: 16px;
  }
  .hero-chips span {
    font-size: 12px;
    padding: 6px 12px;
  }
  .tab-bar {
    gap: 8px;
  }
  .tab-btn {
    padding: 10px 18px;
    font-size: 14px;
  }
  .panel-grid,
  .medium-grid {
    grid-template-columns: 1fr;
  }
  .sub-grid {
    grid-template-columns: 1fr;
  }
  .career-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .career-card {
    padding: 22px 10px;
  }
}
/* ============ CUET PAGE STYLES ============ */
/* Base design arts.css se aata hai. Yaha sirf CUET ke extra sections hain. */

.cuet-banner .banner-text {
  color: var(--gold);
}

/* ===== UNIVERSITIES ===== */
.uni-sec {
  background: var(--cream);
}
.uni-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.uni-card {
  text-align: center;
  background: #fff;
  border: 1px solid #efe7d8;
  border-radius: 16px;
  padding: 28px 16px;
  transition: 0.3s;
}
.uni-card:hover {
  background: var(--dark);
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
}
.uni-card i {
  font-size: 30px;
  color: var(--gold);
  margin-bottom: 12px;
}
.uni-card h5 {
  font-size: 16px;
  color: var(--dark);
  transition: 0.3s;
}
.uni-card p {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
  transition: 0.3s;
}
.uni-card:hover h5 {
  color: #fff;
}
.uni-card:hover p {
  color: #cfd2da;
}

/* ===== TIMELINE ===== */
.timeline-sec {
  background: #fff;
}
.time-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}
.time-grid::before {
  content: "";
  position: absolute;
  top: 31px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold) 0 8px,
    transparent 8px 16px
  );
  z-index: 0;
}
.time-item {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 6px;
}
.t-dot {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gold);
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 4px solid #fff;
  box-shadow: 0 8px 18px rgba(245, 179, 36, 0.35);
  transition: 0.3s;
}
.time-item:hover .t-dot {
  background: var(--dark);
  color: var(--gold);
  transform: translateY(-4px);
}
.time-item h5 {
  font-size: 16px;
  color: var(--dark);
  margin-bottom: 6px;
}
.time-item p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* ===== 4 step roadmap fix (arts me 3 the) ===== */
.cuet-banner + .sec .steps,
.roadmap-sec .steps {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .uni-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .time-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
  }
  .time-grid::before {
    display: none;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .uni-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .uni-card {
    padding: 22px 10px;
  }
  .time-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .time-item {
    display: grid;
    grid-template-columns: 62px 1fr;
    column-gap: 16px;
    text-align: left;
    align-items: center;
  }
  .t-dot {
    margin: 0;
    grid-row: span 2;
  }
}
/* ============ CLAT PAGE STYLES ============ */
/* Base design arts.css se aur uni/timeline styles cuet.css se aate hain. */

.clat-banner .banner-text {
  color: var(--gold);
}

/* ===== SECTION WEIGHTAGE BARS ===== */
.weight-sec {
  background: #fff;
}
.weight-wrap {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #efe7d8;
  border-radius: 18px;
  padding: 30px 32px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
}
.w-row {
  margin-bottom: 22px;
}
.w-row:last-child {
  margin-bottom: 0;
}
.w-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
}
.w-top b {
  font-size: 13px;
  background: var(--cream);
  border: 1px solid #efe7d8;
  padding: 3px 12px;
  border-radius: 20px;
}
.w-bar {
  height: 12px;
  border-radius: 10px;
  background: #f3ecdd;
  overflow: hidden;
}
.w-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--gold), #f0a31a);
  transition: width 1.2s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .weight-wrap {
    padding: 22px 18px;
  }
  .w-top {
    font-size: 14px;
  }
}
/* ============ IPMAT PAGE STYLES ============ */
/* Base design arts.css + cuet.css se aata hai. Yaha sirf IPMAT ke extra sections hain. */

.ipmat-banner .banner-text {
  color: var(--gold);
}

/* ===== COMPARISON TABLE ===== */
.compare-sec {
  background: var(--cream);
}
.compare-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #efe7d8;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.compare-table th,
.compare-table td {
  padding: 16px 20px;
  text-align: left;
  font-size: 14.5px;
  border-bottom: 1px solid #f1eadb;
}
.compare-table thead th {
  background: var(--dark);
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.4px;
}
.compare-table tbody td:first-child {
  font-weight: 600;
  color: var(--dark);
  background: #fffaf0;
  width: 26%;
}
.compare-table tbody td {
  color: var(--muted);
}
.compare-table tbody tr:last-child td {
  border-bottom: none;
}
.compare-table tbody tr:hover td {
  background: #fff6e0;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .compare-table th,
  .compare-table td {
    padding: 12px 14px;
    font-size: 13px;
  }
}
/* ============ COMMERCE PAGE STYLES ============ */
/* Base design arts.css + cuet.css se aata hai. Yaha sirf Commerce ke extra styles hain. */

.commerce-banner .banner-text {
  color: var(--gold);
}

/* ===== COMPARISON TABLE ===== */
.compare-sec {
  background: var(--cream);
}
.compare-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #efe7d8;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.compare-table th,
.compare-table td {
  padding: 16px 20px;
  text-align: left;
  font-size: 14.5px;
  border-bottom: 1px solid #f1eadb;
}
.compare-table thead th {
  background: var(--dark);
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.4px;
}
.compare-table tbody td:first-child {
  font-weight: 600;
  color: var(--dark);
  background: #fffaf0;
  width: 26%;
}
.compare-table tbody td {
  color: var(--muted);
}
.compare-table tbody tr:last-child td {
  border-bottom: none;
}
.compare-table tbody tr:hover td {
  background: #fff6e0;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .compare-table th,
  .compare-table td {
    padding: 12px 14px;
    font-size: 13px;
  }
}