/* HOME PAGE - HERO */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep)
}

/* ── Slider ─────────────────────────────────────────────────── */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity
}

.hero-slide.active {
  opacity: 1
}

.hero-slide:nth-child(1) {
  background-image: url('../images/2.png')
}

.hero-slide:nth-child(2) {
  background-image: url('../images/3.png')
}

.hero-slide:nth-child(3) {
  background-image: url('../images/4.png')
}

.hero-slide:nth-child(4) {
  background-image: url('../images/5.png')
}

.hero-slide:nth-child(5) {
  background-image: url('../images/6.png')
}

/* Navy overlay for text readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7, 20, 48, .75) 0%, rgba(11, 31, 74, .55) 55%, rgba(7, 20, 48, .65) 100%);
  z-index: 1
}

/* Dot grid pattern on top of overlay */
.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, .9) 1px, transparent 0);
  background-size: 40px 40px;
  z-index: 2;
  pointer-events: none
}

/* Gold glow accents */
.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(232, 160, 32, .14) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none
}

.hero-glow-2 {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(11, 31, 74, .4) 0%, transparent 70%);
  bottom: -50px;
  left: 0;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none
}

/* Content sits above overlay */
.hero-content {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 120px 0 80px
}

/* ── Slider Controls ─────────────────────────────────────────── */
.hero-dots {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  border: none;
  cursor: pointer;
  transition: all .3s ease;
  padding: 0
}

.hero-dot.active {
  background: var(--gold);
  width: 26px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(232, 160, 32, .6)
}

.hero-dot:hover {
  background: rgba(255, 255, 255, .65)
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: all .28s ease
}

.hero-arrow:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: translateY(-50%) scale(1.08)
}

.hero-arrow--prev {
  left: 24px
}

.hero-arrow--next {
  right: 24px
}

@media(max-width:768px) {
  .hero-arrow {
    display: none
  }
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px
}

.hero-eyebrow-line {
  width: 40px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px
}

.hero-eyebrow span {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: .1em;
  text-transform: uppercase
}

.hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.6;
  margin-bottom: 10px
}

.hero-title span {
  color: var(--gold)
}

/* Arabic / RTL specific adjustment to prevent text overlapping */
[dir="rtl"] .hero-title {
  line-height: 1.8;
}

.hero-school-name {
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 24px;
  letter-spacing: .02em
}

.hero-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.8;
  margin-bottom: 36px;
  max-width: 520px
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 48px
}

.hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap
}

.hero-stat {
  text-align: center
}

.hero-stat-number {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1
}

.hero-stat-label {
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 4px;
  letter-spacing: .04em
}

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.hero-card-stack {
  position: relative;
  width: 100%;
  max-width: 440px
}

.hero-main-card {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-xl);
  padding: 32px;
  position: relative;
  overflow: hidden
}

.hero-main-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light))
}

.hero-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 160, 32, .15);
  border: 1px solid rgba(232, 160, 32, .3);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 20px
}

.hero-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px
}

.hero-card-sub {
  font-size: .85rem;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 20px
}

.hero-curriculum-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px
}

.curriculum-pill {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: .78rem;
  font-weight: 600
}

.curriculum-pill--moe {
  background: rgba(11, 31, 74, .6);
  color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .2)
}

.curriculum-pill--british {
  background: rgba(232, 160, 32, .2);
  color: var(--gold-light);
  border: 1px solid rgba(232, 160, 32, .35)
}

.hero-metric-row {
  display: flex;
  gap: 12px
}

.hero-metric {
  flex: 1;
  background: rgba(255, 255, 255, .05);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .08)
}

.hero-metric-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold)
}

.hero-metric-label {
  font-size: .7rem;
  color: rgba(255, 255, 255, .5);
  margin-top: 3px
}

.hero-float-badge {
  position: absolute;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: var(--radius-md);
  padding: 10px 16px;
  box-shadow: 0 8px 32px rgba(232, 160, 32, .4);
  display: flex;
  align-items: center;
  gap: 10px
}

.hero-float-badge--top {
  top: -18px;
  right: 20px;
  animation: float 4s ease-in-out infinite
}

.hero-float-badge--bottom {
  bottom: -18px;
  left: 20px;
  animation: float 5.5s ease-in-out infinite reverse
}

.hero-float-badge span {
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy)
}

.hero-float-badge .icon {
  font-size: 1.1rem
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  color: rgba(255, 255, 255, .45);
  font-size: .75rem;
  letter-spacing: .08em
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .4));
  animation: float 2s ease-in-out infinite
}

/* ABOUT */
.about {
  background: var(--white)
}

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

.about-visual {
  position: relative
}

.about-img-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xl)
}

.about-img-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, .7);
  padding: 40px
}

.about-img-placeholder .icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 16px;
  opacity: .5
}

.about-img-placeholder p {
  font-size: .9rem;
  opacity: .6
}

.about-badge-float {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--gray-100)
}

.about-badge-float .num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1
}

.about-badge-float .label {
  font-size: .8rem;
  color: var(--gray-600);
  line-height: 1.4;
  max-width: 80px
}

.about-badge-float-2 {
  position: absolute;
  top: -20px;
  left: -20px;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px
}

.about-badge-float-2 .icon {
  font-size: 1.6rem
}

.about-badge-float-2 .text strong {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--white)
}

.about-badge-float-2 .text span {
  font-size: .72rem;
  color: rgba(255, 255, 255, .6)
}

.about-text .badge {
  margin-bottom: 14px
}

.about-title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1.2
}

.about-title span {
  color: var(--gold)
}

.about-desc {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 20px
}

.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 28px 0
}

.pillar-card {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid var(--gray-100);
  transition: all var(--duration) var(--ease)
}

.pillar-card:hover {
  background: var(--gold-pale);
  border-color: rgba(232, 160, 32, .3);
  transform: translateY(-2px)
}

.pillar-icon {
  font-size: 1.5rem;
  margin-bottom: 8px
}

.pillar-title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px
}

.pillar-desc {
  font-size: .78rem;
  color: var(--gray-600);
  line-height: 1.55
}

/* VISION & MISSION */
.vision {
  position: relative;
  overflow: hidden;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.vision::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, .05) 1px, transparent 0);
  background-size: 36px 36px
}

.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 1
}

.vision-card {
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-xl);
  padding: 40px;
  transition: all var(--duration) var(--ease)
}

.vision-card:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateY(-4px)
}

.vision-card-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(232, 160, 32, .35)
}

.vision-card-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 10px
}

.vision-card-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 14px
}

.vision-card-desc {
  font-size: .95rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.8
}

.values-row {
  margin-top: 48px;
  position: relative;
  z-index: 1
}

.values-row .section-title {
  color: var(--white);
  text-align: center;
  margin-bottom: 32px
}

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

.value-item {
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  transition: all var(--duration) var(--ease)
}

.value-item:hover {
  background: rgba(232, 160, 32, .12);
  border-color: rgba(232, 160, 32, .3);
  transform: translateY(-4px)
}

.value-icon {
  font-size: 2rem;
  margin-bottom: 12px
}

.value-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px
}

.value-desc {
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.55
}

/* CURRICULUM */
.curriculum {
  background: var(--off-white)
}

.curriculum-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 56px
}

.curriculum-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all var(--duration) var(--ease)
}

.curriculum-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl)
}

.curriculum-card-header {
  padding: 36px 36px 28px;
  position: relative;
  overflow: hidden
}

.curriculum-card--moe .curriculum-card-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%)
}

.curriculum-card--british .curriculum-card-header {
  background: linear-gradient(135deg, #1a2d4f 0%, #2a4070 100%)
}

.curriculum-card-header::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06)
}

.curriculum-card-flag {
  font-size: 2.5rem;
  margin-bottom: 16px
}

.curriculum-card-type {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px
}

.curriculum-card-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px
}

.curriculum-card-subtitle {
  font-size: .875rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.6
}

.curriculum-card-body {
  background: var(--white);
  padding: 28px 36px
}

.curriculum-grade-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px
}

.curriculum-grade-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  color: var(--gray-700)
}

.curriculum-grade-item::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0
}

.curriculum-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px
}

.curriculum-feature-tag {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--gray-600)
}

/* FACILITIES */
.facilities {
  background: var(--white)
}

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

.facility-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  transition: all var(--duration) var(--ease);
  cursor: default
}

.facility-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(232, 160, 32, .3)
}

.facility-img {
  height: 180px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden
}

.facility-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, rgba(7, 20, 48, .5), transparent)
}

.facility-body {
  padding: 20px
}

.facility-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px
}

.facility-desc {
  font-size: .85rem;
  color: var(--gray-600);
  line-height: 1.6
}

/* GALLERY */
.gallery {
  background: var(--gray-50)
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px
}

.gallery-item {
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all var(--duration) var(--ease)
}

.gallery-item:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg)
}

.gallery-item:nth-child(1),
.gallery-item:nth-child(5) {
  grid-column: span 2;
  grid-row: span 2
}



.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 48, .0);
  transition: background var(--duration) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center
}

.gallery-item:hover .gallery-overlay {
  background: rgba(7, 20, 48, .4)
}

.gallery-overlay span {
  font-size: 1.8rem;
  opacity: 0;
  transition: opacity var(--duration) var(--ease)
}

.gallery-item:hover .gallery-overlay span {
  opacity: 1
}

.gallery-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(7, 20, 48, .85), transparent);
  color: var(--white);
  font-size: .8rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--duration) var(--ease)
}

.gallery-item:hover .gallery-label {
  opacity: 1
}

/* NEWS */
.news {
  background: var(--white)
}

.news-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 28px
}

.news-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration) var(--ease)
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(232, 160, 32, .25)
}

.news-card-img {
  height: 180px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  position: relative
}

.news-card--featured .news-card-img {
  height: 220px
}

.news-card-body {
  padding: 20px
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap
}

.news-meta-cat {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gold);
  padding: 3px 10px;
  background: var(--gold-pale);
  border-radius: var(--radius-full)
}

.news-meta-date {
  font-size: .75rem;
  color: var(--gray-400)
}

.news-card-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.4
}

.news-card--featured .news-card-title {
  font-size: 1.1rem
}

.news-card-excerpt {
  font-size: .82rem;
  color: var(--gray-600);
  line-height: 1.65;
  margin-bottom: 14px
}

.news-card-link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--duration) var(--ease)
}

.news-card-link:hover {
  gap: 10px
}

/* CTA STRIP */
.cta-strip {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden
}

.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, .15) 1px, transparent 0);
  background-size: 32px 32px
}

.cta-strip-inner {
  position: relative;
  z-index: 1;
  text-align: center
}

.cta-strip-title {
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 14px
}

.cta-strip-sub {
  font-size: 1.05rem;
  color: rgba(11, 31, 74, .75);
  margin-bottom: 32px
}

.cta-strip-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap
}

/* EXPLORE SECTION */
.explore {
  background: var(--gray-50)
}

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

.explore-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration) var(--ease)
}

.explore-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg)
}

.explore-img {
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative
}

.explore-body {
  padding: 24px
}

.explore-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px
}

.explore-desc {
  font-size: .9rem;
  color: var(--gray-600);
  line-height: 1.6
}

/* EXPERTS SECTION */
.experts {
  background: #f0f4f8 /* very light blue-grey */
}

.experts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.expert-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
  transition: all var(--duration) var(--ease)
}

.expert-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .1)
}

.expert-img {
  width: 110px;
  height: 110px;
  border-radius: 16px; /* rounded square */
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: none;
  box-shadow: none;
}

.expert-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.expert-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #2c3e50; /* dark font */
  margin-bottom: 6px
}

.expert-role {
  font-size: 1rem;
  color: #3498db; /* smaller blue font */
  font-weight: 600
}

/* RESPONSIVE: HOME */
@media(max-width:1024px) {
  .explore-grid {
    grid-template-columns: 1fr 1fr
  }

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

  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 100px 0 60px
  }

  .hero-actions {
    justify-content: center
  }

  .hero-stats {
    justify-content: center
  }

  .hero-eyebrow {
    justify-content: center
  }

  .hero-visual {
    display: none
  }

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

  .vision-grid {
    grid-template-columns: 1fr
  }

  .values-grid {
    grid-template-columns: 1fr 1fr
  }

  .curriculum-cards {
    grid-template-columns: 1fr
  }

  .facilities-grid {
    grid-template-columns: 1fr 1fr
  }

  .news-grid {
    grid-template-columns: 1fr
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px
  }

  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5) {
    grid-column: span 1;
    grid-row: span 1
  }
}

@media(max-width:768px) {
  .explore-grid {
    grid-template-columns: 1fr
  }

  .values-grid {
    grid-template-columns: 1fr 1fr
  }

  .about-pillars {
    grid-template-columns: 1fr
  }

  .facilities-grid {
    grid-template-columns: 1fr
  }

  .hero-stats {
    gap: 20px
  }

  .about-badge-float,
  .about-badge-float-2 {
    display: none
  }

  .experts-grid {
    flex-direction: column !important;
  }

  .expert-card {
    flex-direction: column !important;
    text-align: center !important;
  }

  .expert-info {
    text-align: center !important;
  }

  .about-img-wrap {
    min-height: auto !important;
    height: auto !important;
  }
}

@media(max-width:480px) {
  .experts-grid {
    grid-template-columns: 1fr
  }

  .values-grid {
    grid-template-columns: 1fr
  }

  .gallery-grid {
    grid-template-columns: 1fr
  }

  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5) {
    grid-row: span 1
  }

  .curriculum-card-body {
    padding: 20px
  }

  .curriculum-card-header {
    padding: 24px
  }
}