/* AUTO-GENERATED by scripts/scope-celebrity-css.js — do not edit by hand.
 * Source: style.css (unchanged, still used by celebrity's own layout/app.tsx).
 * Regenerate with `node scripts/scope-celebrity-css.js` if style.css changes. */

/* Keyframes must stay top-level (cannot nest inside @scope) */


/* Animations */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes reels-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes scrollMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50%)); }
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

@scope to (.cross-theme-widget) {
/* Fonts: Bengali uses the app's local NexesSystem font (see --font-bn);
   no external CDN is loaded. */

/* CSS Variables */
:root {
  --color-primary: #0B3C26;
  --color-primary-dark: #051A10;
  --color-primary-light: #165637;
  --color-secondary: #D4AF37;
  --color-secondary-dark: #B5932C;
  --color-secondary-light: #E9D275;
  --color-accent: #C5A059;
  --color-bg-light: #FDFCF7;
  --color-bg-cream: #F5F3E9;
  --color-bg-dark: #092317;
  --color-text-dark: #1E2522;
  --color-text-muted: #5A6660;
  --color-text-light: #FFFFFF;
  --color-text-light-muted: #A8BDB4;
  --color-border: #E2DDD5;
  --color-border-accent: rgba(212, 175, 55, 0.3);
  
  --font-bn: 'NexesSystem', 'Hind Siliguri', sans-serif;
  --font-en: 'Outfit', sans-serif;
  --font-ar: 'Amiri', serif;
  --font-islamic: 'Scheherazade New', 'Amiri', serif;
  
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 32px rgba(11, 60, 38, 0.12);
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
}

/* Language Toggle Logic */
html.lang-bn .lang-en {
  display: none !important;
}
html.lang-en .lang-bn {
  display: none !important;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-bn);
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

body.lang-en {
  font-family: var(--font-en);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

img {
  max-width: 100%;
  height: auto;
}

/* Scrollbar Style */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* Layout Elements */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0;
}

.section-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

.section-cream {
  background-color: var(--color-bg-cream);
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  position: relative;
  display: block;
  color: var(--color-primary);
}

.section-dark .section-title {
  color: var(--color-secondary);
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-secondary);
  margin: 12px auto 0;
  border-radius: 2px;
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto 50px;
  font-size: 1.1rem;
}

.section-dark .section-subtitle {
  color: var(--color-text-light-muted);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 2px solid transparent;
  gap: 8px;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.btn-primary:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 60, 38, 0.2);
}

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

.btn-secondary:hover {
  background-color: var(--color-secondary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  transform: translateY(-2px);
}

.btn-outline-gold {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.btn-outline-gold:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}

/* Header & Navigation */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(253, 252, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition-smooth);
}

.header.scrolled {
  padding: 8px 0;
  box-shadow: var(--shadow-md);
  background-color: var(--color-bg-light);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  transition: var(--transition-smooth);
}

.header.scrolled .nav-container {
  height: 64px;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  font-size: 1.2rem;
  border: 2px solid var(--color-secondary);
}

.logo-text {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-primary);
}

.logo-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: block;
  margin-top: -4px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text-dark);
  position: relative;
  padding: 8px 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--color-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: var(--transition-smooth);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.controls-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language Swapper Button */
.lang-switcher {
  display: flex;
  align-items: center;
  background: var(--color-bg-cream);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 4px;
  cursor: pointer;
  position: relative;
}

.lang-btn {
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 16px;
  transition: var(--transition-smooth);
  border: none;
  background: transparent;
  cursor: pointer;
}

html.lang-bn #lang-bn-btn,
html.lang-en #lang-en-btn {
  background: var(--color-primary);
  color: var(--color-text-light);
}

html.lang-bn #lang-en-btn,
html.lang-en #lang-bn-btn {
  color: var(--color-text-muted);
}

.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--color-primary);
  cursor: pointer;
}

/* Hero Section */
.hero-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 60px;
}

.hero-content {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards;
}

.hero-tag {
  display: inline-block;
  padding: 6px 16px;
  background-color: rgba(212, 175, 55, 0.15);
  color: var(--color-primary-light);
  border: 1px solid var(--color-secondary);
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

.hero-title {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.hero-subtitle {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 36px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0.95);
  animation: scaleIn 0.8s 0.2s forwards;
}

.hero-image-frame {
  width: 100%;
  max-width: 400px;
  height: 480px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  position: relative;
  z-index: 2;
  border: 3px solid var(--color-secondary);
  box-shadow: var(--shadow-lg);
}

.hero-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image-bg {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 100%;
  max-width: 400px;
  height: 480px;
  border-radius: var(--border-radius-lg);
  background-color: var(--color-primary);
  z-index: 1;
  border: 1px solid var(--color-border-accent);
}

.hero-pattern {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 3;
}

.hero-pattern-top-left {
  top: -15px;
  left: -15px;
  border-top: 4px solid var(--color-secondary);
  border-left: 4px solid var(--color-secondary);
  border-radius: 8px 0 0 0;
}

.hero-pattern-bottom-right {
  bottom: -15px;
  right: -15px;
  border-bottom: 4px solid var(--color-secondary);
  border-right: 4px solid var(--color-secondary);
  border-radius: 0 0 8px 0;
}

/* Highlights Grid */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.highlight-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 32px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.highlight-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-secondary);
}

.highlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-primary);
  transition: var(--transition-smooth);
}

.highlight-card:hover::before {
  background: var(--color-secondary);
}

.highlight-icon {
  font-size: 2.2rem;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.highlight-card:hover .highlight-icon {
  color: var(--color-secondary);
  transform: scale(1.1);
}

.highlight-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-primary);
}

.highlight-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* Info Section (Split View) */
.info-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.info-content h3 {
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-bottom: 16px;
  font-weight: 700;
}

.info-content p {
  color: var(--color-text-muted);
  margin-bottom: 20px;
  font-size: 1.05rem;
}

.info-visual {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 2px solid var(--color-border);
}

.info-visual img {
  width: 100%;
  display: block;
}

/* Recitations Hub preview styles */
.recitations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

.recitation-card {
  background: var(--color-bg-light);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.recitation-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-secondary);
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background: #000;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.recitation-info {
  padding: 24px;
}

.recitation-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary-light);
  background: rgba(11, 60, 38, 0.08);
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.recitation-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.recitation-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Custom Audio Player */
.audio-player-container {
  max-width: 800px;
  margin: 40px auto 0;
  background: var(--color-primary-dark);
  color: var(--color-text-light);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-secondary);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.player-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 16px;
}

.player-info {
  flex-grow: 1;
}

.now-playing {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-secondary);
  font-weight: 600;
  letter-spacing: 1px;
}

.track-title {
  font-size: 1.3rem;
  font-weight: 700;
}

.track-artist {
  font-size: 0.9rem;
  color: var(--color-text-light-muted);
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
}

.control-btn {
  background: transparent;
  border: none;
  color: var(--color-text-light);
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.control-btn:hover {
  color: var(--color-secondary);
}

.control-btn.play-pause-btn {
  width: 50px;
  height: 50px;
  background: var(--color-secondary);
  border-radius: 50%;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.control-btn.play-pause-btn:hover {
  background: var(--color-secondary-light);
  transform: scale(1.05);
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
}

.progress-bar {
  flex-grow: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

.progress-filled {
  height: 100%;
  background: var(--color-secondary);
  border-radius: 3px;
  width: 0%;
}

.progress-knob {
  width: 12px;
  height: 12px;
  background: var(--color-text-light);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 0%;
  opacity: 0;
  transition: opacity 0.2s;
}

.progress-bar:hover .progress-knob {
  opacity: 1;
}

/* Playlist styles */
.audio-playlist {
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}

.playlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
  font-size: 0.95rem;
}

.playlist-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.playlist-item.active {
  background: rgba(212, 175, 55, 0.1);
  border-left: 3px solid var(--color-secondary);
  color: var(--color-secondary);
}

/* Timeline Layout */
.timeline-wrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: var(--color-border);
}

.timeline-item {
  margin-bottom: 60px;
  position: relative;
  width: 50%;
  padding: 0 40px;
}

.timeline-item-left {
  left: 0;
  text-align: right;
}

.timeline-item-right {
  left: 50%;
  text-align: left;
}

.timeline-dot {
  position: absolute;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 4px solid var(--color-secondary);
  z-index: 5;
}

.timeline-item-left .timeline-dot {
  right: -10px;
}

.timeline-item-right .timeline-dot {
  left: -10px;
}

.timeline-content {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.timeline-content:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-secondary);
  transform: translateY(-2px);
}

.timeline-year {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  font-weight: 700;
  border-radius: 15px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.timeline-title {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 10px;
  font-weight: 700;
}

.timeline-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* Contact / Booking Form */
.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
}

.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-info-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-card-icon {
  font-size: 1.8rem;
  color: var(--color-primary);
}

.contact-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--color-primary);
}

.contact-card-value {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.contact-card-value a:hover {
  color: var(--color-primary);
}

.form-wrapper {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group-full {
  grid-column: span 2;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}

.form-input, .form-textarea, .form-select {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-bg-cream);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-text-dark);
  transition: var(--transition-smooth);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--color-bg-light);
  box-shadow: 0 0 0 3px rgba(11, 60, 38, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Submit Form Feedback */
.form-feedback {
  margin-top: 16px;
  padding: 12px;
  border-radius: var(--border-radius-sm);
  font-size: 0.95rem;
  display: none;
}

.form-feedback.success {
  display: block;
  background-color: rgba(11, 60, 38, 0.1);
  color: var(--color-primary-light);
  border: 1px solid var(--color-primary);
}

.form-feedback.error {
  display: block;
  background-color: rgba(210, 4, 4, 0.1);
  color: #c91010;
  border: 1px solid #c91010;
}

/* Footer */
.footer {
  background-color: var(--color-primary-dark);
  color: var(--color-text-light);
  padding: 60px 0 30px;
  border-top: 3px solid var(--color-secondary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 40px;
}

.footer-logo .logo-icon {
  border-color: var(--color-secondary);
}

.footer-logo .logo-text {
  color: var(--color-text-light);
}

.footer-logo .logo-subtitle {
  color: var(--color-text-light-muted);
}

.footer-desc {
  margin-top: 16px;
  color: var(--color-text-light-muted);
  font-size: 0.95rem;
  max-width: 360px;
}

.footer-title {
  font-size: 1.15rem;
  color: var(--color-secondary);
  margin-bottom: 20px;
  font-weight: 700;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link {
  color: var(--color-text-light-muted);
  font-size: 0.95rem;
}

.footer-link:hover {
  color: var(--color-secondary);
  padding-left: 4px;
}

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.social-btn {
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-size: 1rem;
}

.social-btn:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--color-text-light-muted);
}

/* Category Filter Tabs */
.filter-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 8px 20px;
  background-color: var(--color-bg-cream);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.filter-tab:hover, .filter-tab.active {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-color: var(--color-primary);
}

/* Mobile Navigation Menu */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: var(--color-bg-light);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  transition: var(--transition-smooth);
}

.mobile-nav.open {
  right: 0;
}

.mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-nav-close {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  color: var(--color-primary);
  cursor: pointer;
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-nav-link {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-dark);
}

.mobile-nav-link:hover, .mobile-nav-link.active {
  color: var(--color-primary);
}

.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

.mobile-overlay.active {
  display: block;
}

/* Quick Page Banner styling */
.page-banner {
  background-color: var(--color-primary-dark);
  background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-text-light);
  padding: 120px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-banner-title {
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--color-secondary);
}

.page-banner-subtitle {
  color: var(--color-text-light-muted);
  font-size: 1.1rem;
}

/* Image gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.gallery-card {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: relative;
  aspect-ratio: 4/3;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.gallery-card:hover img {
  transform: scale(1.05);
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(5, 26, 16, 0.9) 0%, rgba(5, 26, 16, 0) 100%);
  color: var(--color-text-light);
  opacity: 0;
  transition: var(--transition-smooth);
}

.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

/* --- Navigation Dropdowns (Desktop) --- */
.nav-item-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 10px 0;
  min-width: 200px;
  box-shadow: var(--shadow-md);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-smooth);
  z-index: 100;
  text-align: left;
}

.nav-item-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-item {
  display: block;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-dark);
  transition: var(--transition-smooth);
}

.dropdown-item:hover {
  background-color: var(--color-bg-cream);
  color: var(--color-primary);
}

.dropdown-item.active {
  color: var(--color-primary);
  font-weight: 600;
  background-color: rgba(11, 60, 38, 0.05);
}

.nav-link i {
  font-size: 0.8rem;
  margin-left: 4px;
  transition: var(--transition-smooth);
}

.nav-item-dropdown:hover .nav-link i {
  transform: rotate(180deg);
}

/* --- Mobile Drawer Accordions --- */
.mobile-nav-item-dropdown {
  display: flex;
  flex-direction: column;
}

.mobile-nav-dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-dark);
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 8px 0;
}

.mobile-nav-dropdown-toggle i {
  font-size: 0.9rem;
  color: var(--color-primary);
  transition: var(--transition-smooth);
}

.mobile-nav-sublist {
  list-style: none;
  padding-left: 16px;
  margin-top: 8px;
  display: none;
  flex-direction: column;
  gap: 12px;
  border-left: 2px solid var(--color-border);
}

.mobile-nav-sublist.open {
  display: flex;
}

.mobile-nav-sublink {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 4px 0;
  display: block;
}

.mobile-nav-sublink.active {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- General visual tweaks for new page layouts --- */
/* Event Schedule styles */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.event-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-secondary);
}

.event-date-box {
  background: var(--color-primary);
  color: var(--color-text-light);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  text-align: center;
  min-width: 90px;
  border: 1px solid var(--color-secondary);
}

.event-date-day {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-secondary);
}

.event-date-month {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}

.event-details {
  flex-grow: 1;
}

.event-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary-light);
  background: rgba(11, 60, 38, 0.08);
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.event-details-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.event-meta {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.event-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-meta i {
  color: var(--color-secondary-dark);
}

/* Download Center / Press Kit Cards */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.download-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.download-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-secondary);
}

.download-icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 16px;
}

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

.download-size {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  display: block;
}

/* Step timeline style for Booking Flow */
.booking-flow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-top: 40px;
  position: relative;
}

.booking-step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 2;
}

.booking-step-num {
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  border: 3px solid var(--color-secondary);
  color: var(--color-text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 auto 16px;
  box-shadow: var(--shadow-sm);
}

.booking-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.booking-step-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* --- UI/UX Refinement Styles --- */
.tab-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.tab-btn {
  background: white;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  padding: 10px 20px;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.tab-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-cream);
}
.tab-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* Blog Layout refinement */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
}
@media (max-width: 992px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
}
.blog-sidebar-widget {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.blog-sidebar-widget h4 {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.sidebar-list {
  list-style: none;
  padding: 0;
}
.sidebar-list li {
  margin-bottom: 12px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 8px;
}
.sidebar-list li a {
  color: var(--color-text-muted);
  transition: var(--transition-smooth);
}
.sidebar-list li a:hover {
  color: var(--color-primary);
}

/* Checklist Styles */
.hifz-checklist {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}
.hifz-checklist-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: var(--transition-smooth);
}
.hifz-checklist-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.hifz-checklist-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.hifz-checklist-item span {
  font-weight: 500;
  color: var(--color-text-dark);
}

/* Gold Quote Card */
.gold-quote-card {
  border-left: 5px solid var(--color-secondary);
  background: linear-gradient(to right, var(--color-bg-cream), #fff);
  padding: 30px;
  border-radius: var(--border-radius-sm);
  margin: 30px 0;
  box-shadow: var(--shadow-sm);
}

/* --- V1 Premium Modern Upgrade --- */
:root {
  --color-primary: #07371f;
  --color-primary-dark: #03170d;
  --color-primary-light: #125a37;
  --color-secondary: #d7b64b;
  --color-secondary-dark: #a98725;
  --color-bg-light: #fffdf6;
  --color-bg-cream: #f3efe3;
  --color-border: #e4ddcb;
  --shadow-sm: 0 8px 22px rgba(5, 26, 16, 0.06);
  --shadow-md: 0 18px 40px rgba(5, 26, 16, 0.1);
  --shadow-lg: 0 28px 70px rgba(5, 26, 16, 0.16);
}

body {
  background:
    radial-gradient(circle at top left, rgba(215, 182, 75, 0.08), transparent 32rem),
    linear-gradient(180deg, #fffdf6 0%, #fbf8ef 52%, #fffdf6 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 10000;
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(8, 41, 28, 0.25);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.gallery-card:focus-visible {
  outline: 3px solid rgba(215, 182, 75, 0.5);
  outline-offset: 3px;
}

.header {
  background: rgba(255, 253, 246, 0.86);
  border-bottom: 1px solid rgba(7, 55, 31, 0.08);
}

.logo-icon {
  box-shadow: inset 0 0 0 3px rgba(215, 182, 75, 0.18);
}

.nav-menu {
  gap: 22px;
}

.nav-link.nav-dropdown-toggle {
  border: 0;
  background: transparent;
}

.nav-item-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu {
  min-width: 230px;
  border-color: rgba(7, 55, 31, 0.08);
}

.btn {
  min-height: 46px;
  border-radius: 10px;
  box-shadow: none;
}

.btn-primary,
.btn-secondary {
  box-shadow: 0 12px 24px rgba(7, 55, 31, 0.12);
}

.btn-soft {
  background: rgba(7, 55, 31, 0.08);
  color: var(--color-primary);
}

.btn-soft:hover {
  background: rgba(215, 182, 75, 0.2);
  transform: translateY(-2px);
}

.section {
  padding: 88px 0;
}

.section-kicker {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 6px 14px;
  border: 1px solid rgba(215, 182, 75, 0.5);
  border-radius: 999px;
  color: var(--color-primary);
  background: rgba(215, 182, 75, 0.12);
  font-weight: 700;
  font-size: 0.85rem;
}

.section-title {
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  line-height: 1.2;
}

.section-subtitle {
  max-width: 760px;
}

.page-banner {
  background:
    linear-gradient(135deg, rgba(3, 23, 13, 0.92), rgba(7, 55, 31, 0.95)),
    url('../images/madrasa-720.jpg') center/cover;
  padding: 134px 0 74px;
}

.page-banner::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(720px, 70vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}

.page-banner-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.hero-wrapper {
  min-height: min(760px, 100vh);
  padding-top: 124px;
  gap: 60px;
}

.hero-title {
  font-size: clamp(2.55rem, 5.2vw, 4.8rem);
  letter-spacing: 0;
}

.hero-subtitle {
  max-width: 760px;
  color: #3d4b44;
}

.hero-desc {
  max-width: 720px;
}

.hero-proof-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 32px;
}

.hero-proof-item,
.proof-card {
  border: 1px solid rgba(7, 55, 31, 0.1);
  background: rgba(255, 255, 255, 0.68);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.hero-proof-item strong,
.proof-card strong {
  display: block;
  color: var(--color-primary);
  font-size: 1.25rem;
  line-height: 1.1;
}

.hero-proof-item span,
.proof-card span {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  margin-top: 4px;
}

.hero-image-frame {
  border-radius: 28px;
  border-width: 2px;
}

.hero-image-bg {
  border-radius: 28px;
}

.trust-strip {
  border-top: 1px solid rgba(7, 55, 31, 0.08);
  border-bottom: 1px solid rgba(7, 55, 31, 0.08);
  background: rgba(243, 239, 227, 0.72);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.audience-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 26px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
}

.audience-card i {
  color: var(--color-secondary-dark);
  font-size: 1.75rem;
  margin-bottom: 18px;
}

.audience-card h3 {
  color: var(--color-primary);
  margin-bottom: 10px;
}

.audience-card p {
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.audience-card .btn {
  margin-top: auto;
  width: fit-content;
}

.media-band {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(3, 23, 13, 0.97), rgba(8, 63, 37, 0.94)),
    url('../images/portrait-720.jpg') center/cover;
  color: var(--color-text-light);
}

.media-band .section-title {
  color: var(--color-secondary);
}

.reels-shell {
  position: relative;
  margin-top: 38px;
  overflow: hidden;
}

.reels-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: reels-marquee 34s linear infinite;
}

.reels-shell:hover .reels-track {
  animation-play-state: paused;
}

.reel-card,
.video-card {
  position: relative;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  transition: var(--transition-smooth);
}

.reel-card {
  width: 210px;
  aspect-ratio: 9 / 16;
  background: var(--color-primary-dark);
}

.reel-card:hover,
.video-card:hover {
  transform: translateY(-6px);
}

.reel-card img,
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.reel-card::after,
.video-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(3, 23, 13, 0.86));
}

.reel-card__content {
  position: absolute;
  inset: auto 14px 14px;
  z-index: 2;
}

.reel-card__content span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
}

.reel-card__content h3,
.video-info h3,
.video-info h4 {
  margin: 0 0 8px;
  color: inherit;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.video-card {
  background: #fff;
  color: var(--color-text-dark);
  border: 1px solid rgba(7, 55, 31, 0.08);
}

.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-primary-dark);
}

.video-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26);
}

.video-status {
  position: absolute;
  z-index: 2;
  left: 14px;
  top: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 700;
}

.video-info {
  padding: 22px;
}

.video-info p {
  color: var(--color-text-muted);
}

.video-modal,
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(3, 23, 13, 0.78);
}

.video-modal.open,
.gallery-lightbox.open {
  display: grid;
}

.video-modal__panel,
.gallery-lightbox__panel {
  position: relative;
  width: min(980px, 100%);
  background: var(--color-bg-light);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.video-modal__close,
.gallery-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  cursor: pointer;
}

.video-modal__body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.video-placeholder-state {
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: 48px;
  text-align: center;
}

.video-placeholder-state i {
  color: #d01818;
  font-size: 3rem;
  margin-bottom: 18px;
}

.gallery-card {
  border-radius: 18px;
  cursor: zoom-in;
}

.gallery-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 34%, rgba(3, 23, 13, 0.86));
  opacity: 0.72;
  pointer-events: none;
}

.gallery-overlay {
  z-index: 2;
  opacity: 1;
  background: transparent;
}

.gallery-overlay span {
  display: block;
}

.gallery-lightbox__panel img {
  display: block;
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  background: var(--color-primary-dark);
}

.gallery-lightbox__caption {
  padding: 20px 24px;
  color: var(--color-primary);
}

.contact-info-card,
.form-wrapper,
.download-card,
.highlight-card,
.recitation-card,
.event-card,
.timeline-content,
.blog-sidebar-widget {
  border-color: rgba(7, 55, 31, 0.1);
  border-radius: 16px;
}

.contact-grid {
  align-items: start;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.download-card.is-pending {
  background: linear-gradient(180deg, #fff, #fbf7ea);
}

.download-card.is-pending .download-icon {
  color: var(--color-secondary-dark);
}

.press-request-box {
  background: #fff;
  border: 1px solid rgba(7, 55, 31, 0.1);
  border-top: 5px solid var(--color-primary);
  border-radius: 18px;
  padding: 40px;
  margin-top: 56px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.quick-actions {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.quick-actions a:nth-child(2) {
  background: #1c9c56;
}

.quick-actions a:nth-child(3) {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
}

.reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.player-request-link {
  display: inline-flex;
  margin-top: 10px;
  color: var(--color-secondary);
  font-weight: 700;
}

.playlist-item span.lang-bn,
.playlist-item span.lang-en {
  display: block;
  font-size: 0.8rem;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 1080px) {
  .nav-menu {
    gap: 14px;
  }

  .nav-link {
    font-size: 0.88rem;
  }

  .audience-grid,
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .section {
    padding: 64px 0;
  }

  .hero-wrapper {
    min-height: auto;
    padding-top: 98px;
  }

  .hero-content {
    order: -2;
  }

  .hero-image-wrapper {
    order: -1;
  }

  .hero-proof-list {
    grid-template-columns: 1fr;
  }

  .hero-ctas {
    display: grid;
    grid-template-columns: 1fr;
  }

  .proof-grid,
  .audience-grid,
  .video-grid {
    grid-template-columns: 1fr;
  }

  .reels-shell {
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
  }

  .reels-track {
    animation: none;
    width: max-content;
  }

  .reel-card {
    scroll-snap-align: start;
  }

  .quick-actions {
    left: 14px;
    right: 14px;
    bottom: 14px;
    flex-direction: row;
    justify-content: center;
  }

  .quick-actions a {
    width: 46px;
    height: 46px;
  }

  .mobile-nav {
    width: min(330px, 86vw);
    right: min(-330px, -86vw);
    overflow-y: auto;
  }

  .video-placeholder-state {
    min-height: 300px;
    padding: 34px 22px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 20px;
  }

  .hero-title {
    font-size: 2.15rem;
  }

  .hero-image-frame,
  .hero-image-bg {
    max-width: 318px;
    height: 360px;
  }

  .page-banner {
    padding: 112px 0 56px;
  }

  .audience-card,
  .press-request-box {
    padding: 22px;
  }
}

/* Homepage Redesign Components */

/* 1. International Flags Marquee */
.marquee-section {
  background: #fff;
  padding: 0;
  border-top: 1px solid rgba(7,55,31,0.10);
  border-bottom: 1px solid rgba(7,55,31,0.10);
  overflow: hidden;
  position: relative;
}
.marquee-section::before,
.marquee-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  z-index: 10;
  pointer-events: none;
}
.marquee-section::before {
  left: 0;
  background: linear-gradient(90deg, #fff 40%, transparent 100%);
}
.marquee-section::after {
  right: 0;
  background: linear-gradient(270deg, #fff 40%, transparent 100%);
}
.marquee-label-wrap {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 0 20px 0 28px;
  gap: 10px;
  background: linear-gradient(90deg, #fff 70%, transparent 100%);
}
.marquee-label-wrap .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary);
  flex-shrink: 0;
}
.marquee-label-wrap span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.marquee-inner {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.marquee-track {
  display: flex;
  gap: 0;
  align-items: center;
  width: max-content;
  animation: scrollMarquee 32s linear infinite;
  padding-left: 220px;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.flag-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  white-space: nowrap;
  border-right: 1px solid rgba(7,55,31,0.07);
  transition: background 0.2s ease;
}
.flag-item:hover {
  background: rgba(7,55,31,0.04);
}
.flag-item img {
  width: 28px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.flag-item span {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text-dark);
  letter-spacing: 0.01em;
}
@media (max-width: 768px) {
  .marquee-label-wrap { display: none; }
  .marquee-track { padding-left: 16px; }
  .flag-item { padding: 14px 20px; }
  .marquee-section::before { width: 40px; }
  .marquee-section::after { width: 40px; }
}

/* 2. Key Achievements Grid */
.achievements-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.achievement-highlight-card {
  background: var(--color-bg-light);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}
.achievement-highlight-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}
.achievement-highlight-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.achievement-highlight-content {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.achievement-highlight-content .year {
  display: inline-block;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
  width: max-content;
}
.achievement-highlight-content h3 {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 10px;
  font-weight: 700;
}
.achievement-highlight-content p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* 3. Full Width Video Slider */
.full-width-video-section {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  padding: 80px 0;
  overflow: hidden;
  position: relative;
}
.full-width-video-section .section-title {
  color: var(--color-secondary);
}
.full-width-video-section .section-subtitle {
  color: var(--color-text-light-muted);
}
.video-slider-container {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px 24px 40px;
  scrollbar-width: none; /* Firefox */
  display: flex;
  gap: 24px;
}
.video-slider-container::-webkit-scrollbar {
  display: none;
}
.full-video-card {
  min-width: 80vw;
  max-width: 900px;
  scroll-snap-align: center;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  position: relative;
  background: #000;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.3s ease;
}
.full-video-card:hover {
  transform: scale(1.02);
  border-color: var(--color-secondary);
}
.full-video-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.full-video-card:hover .full-video-thumb {
  opacity: 1;
}
.full-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
}
.full-video-play-btn {
  width: 64px;
  height: 64px;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 24px;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  transition: transform 0.3s ease;
}
.full-video-card:hover .full-video-play-btn {
  transform: scale(1.1);
}
.full-video-info h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: white;
}
.full-video-info p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
}

@media (min-width: 1024px) {
  .full-video-card {
    min-width: 70vw;
  }
}
@media (max-width: 768px) {
  .full-video-card {
    min-width: 85vw;
  }
  .full-video-overlay {
    padding: 24px;
  }
  .full-video-info h3 {
    font-size: 1.3rem;
  }
  .full-video-play-btn {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }
}

/* ================================================
   HOME PAGE ADVANCED SECTIONS - NEW ADDITIONS
   ================================================ */

/* ----- Stats Counter Section ----- */
.stats-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary) 100%);
  color: var(--color-text-light);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='rgba(215,182,75,0.08)' stroke-width='1'%3E%3Cpolygon points='50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5'/%3E%3Cpolygon points='50,15 85,32.5 85,67.5 50,85 15,67.5 15,32.5'/%3E%3Cpolygon points='50,25 75,37.5 75,62.5 50,75 25,62.5 25,37.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  opacity: 1;
  pointer-events: none;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.stat-item {
  text-align: center;
  padding: 32px 20px;
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: background 0.3s ease;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(255,255,255,0.05); }
.stat-number {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 900;
  color: var(--color-secondary);
  line-height: 1;
  display: block;
  letter-spacing: -1px;
}
.stat-suffix {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-secondary);
}
.stat-icon {
  font-size: 1.8rem;
  color: rgba(215, 182, 75, 0.6);
  margin-bottom: 14px;
  display: block;
}
.stat-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  margin-top: 8px;
  display: block;
  font-weight: 500;
}
.stat-label-en {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-top: 3px;
}

/* ----- Audio Recitation Cards ----- */
.recitation-audio-section {
  background: var(--color-bg-cream);
}
.recitation-audio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}
.rec-audio-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.rec-audio-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: 20px 20px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.rec-audio-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(215, 182, 75, 0.4);
}
.rec-audio-card:hover::before { transform: scaleX(1); }
.rec-audio-card.featured {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-text-light);
  border-color: var(--color-secondary);
}
.rec-audio-card.featured .rec-surah-name,
.rec-audio-card.featured .rec-title,
.rec-audio-card.featured .rec-meta { color: var(--color-text-light); }
.rec-audio-card.featured .rec-meta { color: rgba(255,255,255,0.7); }
.rec-audio-card.featured .rec-tag { background: rgba(215,182,75,0.2); color: var(--color-secondary); }
.rec-audio-card.featured::before { display: none; }
.rec-audio-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.rec-tag {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(7, 55, 31, 0.08);
  color: var(--color-primary);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rec-play-btn {
  width: 44px;
  height: 44px;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(215, 182, 75, 0.35);
}
.rec-play-btn:hover { transform: scale(1.1); background: var(--color-secondary-dark); }
.rec-surah-arabic {
  font-family: var(--font-ar);
  font-size: 1.8rem;
  color: var(--color-secondary);
  direction: rtl;
  margin-bottom: 6px;
  line-height: 1.4;
  display: block;
}
.rec-surah-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.rec-title {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.rec-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 36px;
  margin-bottom: 16px;
}
.rec-waveform-bar {
  width: 3px;
  background: var(--color-secondary);
  border-radius: 2px;
  opacity: 0.5;
  transition: height 0.3s ease;
}
.rec-audio-card:hover .rec-waveform-bar { opacity: 1; }
.rec-audio-card.featured .rec-waveform-bar { background: rgba(215, 182, 75, 0.7); }
.rec-audio-card.featured:hover .rec-waveform-bar { background: var(--color-secondary); }
.rec-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.rec-duration {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ----- Upcoming Events Section ----- */
.events-home-section { background: var(--color-bg-light); }
.events-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.event-home-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}
.event-home-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px;
  height: 100%;
  background: var(--color-primary);
  border-radius: 18px 0 0 18px;
  transition: background 0.3s ease;
}
.event-home-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(215, 182, 75, 0.4);
}
.event-home-card:hover::after { background: var(--color-secondary); }
.event-home-card.upcoming::after { background: var(--color-secondary); }
.event-date-badge {
  background: var(--color-primary);
  color: var(--color-text-light);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  min-width: 64px;
  flex-shrink: 0;
  border: 1px solid rgba(215, 182, 75, 0.3);
}
.event-date-badge .day {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--color-secondary);
  display: block;
  line-height: 1;
}
.event-date-badge .month {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-top: 4px;
}
.event-date-badge .year {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.6);
  display: block;
}
.event-home-info { flex: 1; }
.event-home-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.event-home-badge.live {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}
.event-home-badge.upcoming-badge {
  background: rgba(7, 55, 31, 0.08);
  color: var(--color-primary);
}
.event-home-badge.completed {
  background: rgba(90, 102, 96, 0.1);
  color: var(--color-text-muted);
}
.event-home-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}
.event-home-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.event-home-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.event-home-meta i { color: var(--color-secondary-dark); font-size: 0.75rem; }

/* ----- Testimonials Section ----- */
.testimonials-section {
  background: linear-gradient(180deg, var(--color-bg-cream) 0%, #fff 100%);
  position: relative;
}
.testimonials-section::before {
  content: '\201C';
  position: absolute;
  top: 40px; left: 50%;
  transform: translateX(-50%);
  font-size: 20rem;
  font-family: Georgia, serif;
  color: rgba(215, 182, 75, 0.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(215, 182, 75, 0.4);
}
.testimonial-stars {
  color: var(--color-secondary);
  font-size: 1rem;
  margin-bottom: 18px;
  letter-spacing: 2px;
}
.testimonial-text {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 24px;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(215, 182, 75, 0.3);
}
.testimonial-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary);
}
.testimonial-role {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ----- Media Coverage Section ----- */
.media-coverage-section {
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.media-coverage-label {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text-muted);
  margin-bottom: 36px;
}
.media-logos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: center;
}
.media-logo-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  transition: all 0.3s ease;
  min-height: 90px;
  box-shadow: var(--shadow-sm);
}
.media-logo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-secondary);
}
.media-logo-icon {
  font-size: 1.8rem;
  color: var(--color-primary);
}
.media-logo-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}
.media-logo-type {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* ----- Blog Preview Section ----- */
.blog-preview-section { background: var(--color-bg-cream); }
.blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}
.blog-preview-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
}
.blog-preview-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(215, 182, 75, 0.4);
}
.blog-preview-img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  overflow: hidden;
}
.blog-preview-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgba(215, 182, 75, 0.4);
  position: relative;
}
.blog-preview-img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='rgba(215,182,75,0.15)' stroke-width='1'%3E%3Cpolygon points='30,3 57,16.5 57,43.5 30,57 3,43.5 3,16.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.blog-preview-cat {
  position: absolute;
  top: 14px; left: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  padding: 4px 10px;
  border-radius: 999px;
}
.blog-preview-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-preview-date {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.blog-preview-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
  line-height: 1.5;
  flex: 1;
}
.blog-preview-excerpt {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-preview-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  transition: gap 0.2s ease;
}
.blog-preview-card:hover .blog-preview-link { gap: 8px; color: var(--color-secondary-dark); }

/* ----- Booking CTA Section ----- */
.booking-cta-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #0a4a2a 100%);
  color: var(--color-text-light);
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}
.booking-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='rgba(215,182,75,0.07)' stroke-width='1'%3E%3Ccircle cx='40' cy='40' r='35'/%3E%3Ccircle cx='40' cy='40' r='25'/%3E%3Ccircle cx='40' cy='40' r='15'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  pointer-events: none;
}
.booking-cta-inner {
  position: relative;
  z-index: 1;
}
.booking-cta-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
}
.booking-cta-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: 16px;
  line-height: 1.2;
}
.booking-cta-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  margin-bottom: 32px;
}
.booking-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 36px;
}
.booking-step-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.booking-step-item:last-child { border-bottom: none; }
.booking-step-num-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-secondary);
  flex-shrink: 0;
  background: rgba(215, 182, 75, 0.1);
}
.booking-step-text h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-light);
  margin-bottom: 4px;
}
.booking-step-text p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}
.booking-cta-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.booking-contact-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(215, 182, 75, 0.25);
  border-radius: 20px;
  padding: 36px;
  backdrop-filter: blur(10px);
}
.booking-contact-box h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 24px;
}
.booking-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.booking-contact-item:last-child { border-bottom: none; }
.booking-contact-icon {
  width: 44px;
  height: 44px;
  background: rgba(215, 182, 75, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.booking-contact-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.booking-contact-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-light);
}
.booking-contact-value a {
  color: inherit;
  transition: color 0.2s;
}
.booking-contact-value a:hover { color: var(--color-secondary); }
.booking-availability {
  margin-top: 28px;
  padding: 18px;
  background: rgba(215, 182, 75, 0.1);
  border: 1px solid rgba(215, 182, 75, 0.2);
  border-radius: 12px;
  text-align: center;
}
.booking-availability .avail-dot {
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  animation: pulse-green 2s infinite;
}
.booking-availability span {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}

/* ----- Section Decorative Header ----- */
.section-header-center {
  text-align: center;
  margin-bottom: 52px;
}
.section-header-left {
  margin-bottom: 52px;
}
.section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: 2px;
  margin: 14px auto 0;
}

/* ----- FAQ Card (Improved) ----- */
.faq-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: box-shadow 0.3s ease;
}
.faq-card:hover { box-shadow: var(--shadow-sm); }
.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 20px 24px;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-question::after {
  content: '\25BE';
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--color-secondary-dark);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-card[data-open="true"] .faq-question::after {
  transform: rotate(180deg);
}
.faq-answer {
  padding: 0 24px 20px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  display: none;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}
.faq-answer.open { display: block; }

/* ----- Responsive Additions ----- */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-item:nth-child(3) { border-right: none; }
  .stat-item:nth-child(4), .stat-item:nth-child(5) {
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .media-logos-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .events-home-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .media-logos-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.1); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .blog-preview-grid { grid-template-columns: 1fr; }
  .recitation-audio-grid { grid-template-columns: 1fr; }
  .media-logos-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-cta-section { padding: 56px 0; }
  .booking-steps { gap: 0; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-number { font-size: 2rem; }
  .booking-cta-buttons { flex-direction: column; }
  .booking-cta-buttons .btn { width: 100%; justify-content: center; }
}

/* =====================================================
   ACHIEVEMENT CARDS — Enhanced Visual Design
   ===================================================== */
.achievements-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.achievement-highlight-card {
  background: var(--color-bg-card);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
  display: flex;
  flex-direction: column;
}
.achievement-highlight-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.16);
}
.achiev-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.achiev-img-wrap .achievement-highlight-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.achievement-highlight-card:hover .achiev-img-wrap .achievement-highlight-img {
  transform: scale(1.05);
}
.achiev-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  pointer-events: none;
}
.achiev-overlay-gold {
  background: linear-gradient(135deg, rgba(183,130,12,0.55) 0%, rgba(0,0,0,0.35) 100%);
}
.achiev-overlay-green {
  background: linear-gradient(135deg, rgba(7,55,31,0.60) 0%, rgba(0,0,0,0.35) 100%);
}
.achiev-overlay-blue {
  background: linear-gradient(135deg, rgba(15,40,90,0.60) 0%, rgba(0,0,0,0.35) 100%);
}
.achiev-flag-badge {
  align-self: flex-start;
  background: rgba(0,0,0,0.55);
  border-radius: 6px;
  padding: 4px 6px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
}
.achiev-flag-badge img {
  border-radius: 2px;
  display: block;
}
.achiev-trophy-icon {
  align-self: flex-end;
  width: 48px;
  height: 48px;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 16px rgba(212,175,55,0.4);
}
.achievement-highlight-content {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.achiev-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.achiev-meta-row .year {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-secondary);
  background: transparent;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.08em;
  font-family: 'Outfit', sans-serif;
}
.achiev-country-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  background: linear-gradient(135deg, #fff9e6 0%, #fef3cc 100%);
  border: 1.5px solid var(--color-secondary);
  border-radius: 99px;
  padding: 4px 12px;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 6px rgba(212,175,55,0.18);
}
.achiev-country-tag img { border-radius: 2px; width: 20px; height: 14px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.achievement-highlight-content h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  margin: 0;
}
.achievement-highlight-content p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}
.achiev-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.achiev-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(7,55,31,0.08);
  color: var(--color-primary);
  border-radius: 99px;
  padding: 4px 12px;
  letter-spacing: 0.03em;
}

@media (max-width: 1024px) {
  .achievements-highlight-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .achievements-highlight-grid { grid-template-columns: 1fr; gap: 20px; }
  .achievement-highlight-card { flex-direction: row; max-height: 220px; }
  .achiev-img-wrap { width: 140px; min-width: 140px; aspect-ratio: auto; }
  .achiev-overlay { padding: 10px; }
  .achiev-trophy-icon { width: 36px; height: 36px; font-size: 0.9rem; }
  .achievement-highlight-content { padding: 16px; }
}

/* =====================================================
   FULL-WIDTH VIDEO SECTION — Edge-to-Edge
   ===================================================== */
.full-width-video-section {
  padding-bottom: 60px;
}
.video-slider-container {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 16px 32px 32px;
  box-sizing: border-box;
}
.full-video-card {
  min-width: min(85vw, 820px);
  max-width: min(85vw, 820px);
}
@media (max-width: 768px) {
  .video-slider-container { padding: 12px 16px 24px; }
  .full-video-card { min-width: 90vw; max-width: 90vw; }
}

/* =====================================================
   AUDIENCE VALUE SECTION
   ===================================================== */
.audience-value-section { background: var(--color-bg-cream); }
.audience-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.audience-value-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  border: 1.5px solid transparent;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.audience-value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  border-color: var(--color-secondary);
}
.av-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  flex-shrink: 0;
}
.av-green  { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light)); }
.av-gold   { background: linear-gradient(135deg, #b7820c, #d7b64b); }
.av-teal   { background: linear-gradient(135deg, #0b5563, #0d8fa3); }
.av-red    { background: linear-gradient(135deg, #7c1c1c, #c43030); }
.av-content { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.av-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}
.av-content p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}
.av-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.audience-value-card:hover .av-cta { color: var(--color-secondary); }
@media (max-width: 1024px) { .audience-value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .audience-value-grid { grid-template-columns: 1fr; gap: 16px; } }

/* =====================================================
   ADVANCED TESTIMONIALS
   ===================================================== */
.testimonials-advanced { background: var(--color-bg-dark); color: var(--color-text-light); }
.testimonials-advanced .section-kicker { background: rgba(215,182,75,0.18); color: var(--color-secondary); }
.testimonials-advanced .section-title { color: #fff; }
.testimonials-advanced .section-subtitle { color: rgba(255,255,255,0.65); }

.video-testimonial-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.video-testimonial-card {
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.video-testimonial-card:hover { transform: translateY(-4px); border-color: var(--color-secondary); }
.vtc-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.vtc-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.vtc-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vtc-play i {
  width: 56px;
  height: 56px;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 0 0 8px rgba(215,182,75,0.25);
}
.vtc-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0,0,0,0.6);
  color: var(--color-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  backdrop-filter: blur(4px);
}
.vtc-info { padding: 16px 20px; }
.vtc-name { font-weight: 700; font-size: 0.95rem; color: #fff; }
.vtc-role { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-top: 4px; }

.testimonials-grid-5 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonials-advanced .testimonial-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--color-text-light);
}
.testimonials-advanced .testimonial-stars { color: var(--color-secondary); }
.testimonials-advanced .testimonial-text { color: rgba(255,255,255,0.80); }
.testimonials-advanced .testimonial-name { color: #fff; }
.testimonials-advanced .testimonial-role { color: rgba(255,255,255,0.50); }
.testimonial-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}
.testimonials-advanced .btn-outline { border-color: rgba(255,255,255,0.3); color: #fff; }
.testimonials-advanced .btn-outline:hover { border-color: var(--color-secondary); color: var(--color-secondary); }

@media (max-width: 1024px) { .testimonials-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .video-testimonial-row { grid-template-columns: 1fr; }
  .testimonials-grid-5 { grid-template-columns: 1fr; }
}

/* =====================================================
   ADVANCED MEDIA SECTION
   ===================================================== */
.media-coverage-advanced { background: #fff; }
.media-logos-advanced {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.media-logos-advanced .media-logo-card {
  background: #fafaf8;
  border: 1.5px solid rgba(7,55,31,0.08);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
}
.media-logos-advanced .media-logo-card:hover {
  border-color: var(--color-secondary);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.media-logo-img-wrap {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.media-logo-img-wrap img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.media-logo-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 99px;
  text-transform: uppercase;
}
.media-logo-badge.tv      { background: #e8f0fe; color: #1a5eba; }
.media-logo-badge.yt      { background: #fde8e8; color: #c0392b; }
.media-logo-badge.islamic { background: #e8f5e9; color: var(--color-primary-dark); }
.media-logo-badge.print   { background: #fef3e2; color: #b7820c; }
.media-logos-advanced .media-logo-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary);
  line-height: 1.3;
}
.media-logos-advanced .media-logo-type { font-size: 0.75rem; color: var(--color-text-muted); }
@media (max-width: 1024px) { .media-logos-advanced { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .media-logos-advanced { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================
   BLOG IMAGE BACKGROUNDS
   ===================================================== */
.blog-img-tajweed {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-light) 50%, #d7b64b 100%);
  position: relative;
}
.blog-img-hifz {
  background: linear-gradient(135deg, #0b1e3d 0%, #1a4a8c 60%, #2e6fc8 100%);
  position: relative;
}
.blog-img-parent {
  background: linear-gradient(135deg, #3d1b07 0%, #8c3a1a 60%, #d4874b 100%);
  position: relative;
}
.blog-img-overlay-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgba(255,255,255,0.25);
}

/* =====================================================
   VIDEO SLIDER NAV DOTS + AUTO-SCROLL
   ===================================================== */
.video-slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0 0;
}
.vid-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.vid-nav-dot.active {
  background: var(--color-secondary);
  width: 24px;
  border-radius: 4px;
}

/* =====================================================
   ADVANCED FAQ SECTION
   ===================================================== */
.faq-section-advanced { background: var(--color-bg-cream); }
.faq-list-advanced { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item-adv {
  background: #fff;
  border: 1.5px solid rgba(7,55,31,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item-adv[data-open="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(7,55,31,0.08);
}
.faq-q-adv {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-text-dark);
  font-family: inherit;
}
.faq-q-adv:hover { color: var(--color-primary); }
.faq-q-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(7,55,31,0.07);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.faq-item-adv[data-open="true"] .faq-q-icon {
  background: var(--color-primary);
  color: var(--color-secondary);
}
.faq-chevron {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item-adv[data-open="true"] .faq-chevron { transform: rotate(180deg); color: var(--color-primary); }
.faq-ans-adv {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 24px 0 74px;
}
.faq-item-adv[data-open="true"] .faq-ans-adv {
  max-height: 300px;
  padding-bottom: 20px;
}
.faq-ans-adv p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

/* =====================================================
   ISLAMIC GEOMETRIC PATTERN — Reusable SVG Background
   ===================================================== */

/* The pattern is an inline SVG star-grid encoded as a data URI.
   Used on section backgrounds for subtle Islamic texture. */
:root {
  --islamic-pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%230B3C26' stroke-width='0.5' stroke-opacity='0.08'%3E%3Cpath d='M30 5 L35 20 L50 20 L38 29 L43 44 L30 35 L17 44 L22 29 L10 20 L25 20Z'/%3E%3Ccircle cx='30' cy='30' r='26' stroke-opacity='0.04'/%3E%3Ccircle cx='30' cy='30' r='14' stroke-opacity='0.05'/%3E%3C/g%3E%3C/svg%3E");
  --islamic-pattern-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.5' stroke-opacity='0.1'%3E%3Cpath d='M30 5 L35 20 L50 20 L38 29 L43 44 L30 35 L17 44 L22 29 L10 20 L25 20Z'/%3E%3Ccircle cx='30' cy='30' r='26' stroke-opacity='0.06'/%3E%3Ccircle cx='30' cy='30' r='14' stroke-opacity='0.07'/%3E%3C/g%3E%3C/svg%3E");
  --islamic-pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.6' stroke-opacity='0.07'%3E%3Cpath d='M30 5 L35 20 L50 20 L38 29 L43 44 L30 35 L17 44 L22 29 L10 20 L25 20Z'/%3E%3Ccircle cx='30' cy='30' r='26' stroke-opacity='0.04'/%3E%3Ccircle cx='30' cy='30' r='14' stroke-opacity='0.05'/%3E%3C/g%3E%3C/svg%3E");
}

/* Apply patterns to sections */
.hero-wrapper,
.recitation-audio-section {
  background-image: var(--islamic-pattern-light);
  background-size: 60px 60px;
}

.audience-value-section {
  background-color: var(--color-bg-cream);
  background-image: var(--islamic-pattern-gold);
  background-size: 60px 60px;
}

.testimonials-advanced {
  background-image: var(--islamic-pattern-dark);
  background-size: 60px 60px;
}

.faq-section-advanced {
  background-image: var(--islamic-pattern-light);
  background-size: 60px 60px;
}

/* Section divider — gold Bismillah-inspired ornament */
.islamic-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 40px;
  max-width: 360px;
}
.islamic-ornament::before,
.islamic-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-secondary));
}
.islamic-ornament::after {
  background: linear-gradient(to left, transparent, var(--color-secondary));
}
.islamic-ornament-star {
  color: var(--color-secondary);
  font-size: 1.1rem;
  opacity: 0.8;
  line-height: 1;
}

/* =====================================================
   TYPOGRAPHY — Islamic & Calligraphic Enhancements
   ===================================================== */

/* Section titles get slightly more calligraphic weight */
.section-title {
  font-family: var(--font-bn);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Arabic text in Scheherazade / Amiri */
.text-arabic,
.surah-name,
.quran-text {
  font-family: var(--font-islamic);
  direction: rtl;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

/* Hero name gets a richer, heavier calligraphic feel */
.hero-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(11, 60, 38, 0.08);
}

/* Kicker pill — gold border accent */
.section-kicker {
  border: 1px solid rgba(212, 175, 55, 0.25);
  letter-spacing: 0.04em;
}

/* Gold underline on section titles — replace plain border with a gradient */
.section-title::after {
  background: linear-gradient(to right, var(--color-secondary), var(--color-secondary-light), transparent) !important;
  width: 64px !important;
  height: 3px !important;
}

/* Testimonial heading — larger, richer */
.testimonials-advanced .section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* FAQ heading — Islamic serif feel */
.faq-section-advanced .section-title {
  font-family: var(--font-bn);
  font-weight: 700;
}

/* Media section heading */
.media-coverage-advanced .section-title {
  font-weight: 700;
}

/* Achievement card title gets Amiri for elegance */
.achievement-highlight-content h3 {
  font-family: var(--font-bn);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Blog card titles */
.blog-card-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Events section heading */
.events-section .section-title {
  font-weight: 700;
}

/* Footer brand name */
.footer-brand-name {
  font-family: var(--font-bn);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Nav links — slightly tighter */
.nav-links a {
  letter-spacing: -0.01em;
}

/* =====================================================
   HERO — Subtle Green Radial Glow (Islamic feel)
   ===================================================== */
.hero-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 20% 50%, rgba(11,60,38,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-wrapper {
  position: relative;
}
.hero-wrapper > * {
  position: relative;
  z-index: 1;
}

/* =====================================================
   SECTION TRANSITIONS — Soft wave between bg colors
   ===================================================== */
.audience-value-section {
  position: relative;
}
.testimonials-advanced {
  position: relative;
}

/* =====================================================
   GOLD BISMILLAH LINE — decorative top border on dark sections
   ===================================================== */
.testimonials-advanced::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(to right, transparent 0%, var(--color-secondary) 30%, var(--color-secondary-light) 50%, var(--color-secondary) 70%, transparent 100%);
}
.faq-section-advanced::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(to right, transparent 0%, rgba(212,175,55,0.35) 30%, rgba(212,175,55,0.6) 50%, rgba(212,175,55,0.35) 70%, transparent 100%);
}

/* =====================================================
   YOUTUBE CLICK-TO-PLAY — Video slider & testimonials
   ===================================================== */

/* Video slider card — wraps thumb + overlay */
.full-video-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  background: #000;
}
.full-video-thumb-wrap img.full-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.full-video-thumb-wrap:hover img.full-video-thumb {
  transform: scale(1.04);
  opacity: 0.8;
}
.full-video-thumb-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 20px;
}
/* Remove the old separate .full-video-thumb aspect-ratio since we now wrap it */
.full-video-card .full-video-overlay {
  border-radius: 20px;
}

/* Video testimonial card — click-to-play */
.video-testimonial-card[data-yt-id] .vtc-thumb {
  cursor: pointer;
  position: relative;
}
.video-testimonial-card[data-yt-id] .vtc-thumb img {
  transition: transform 0.35s ease, opacity 0.3s ease;
}
.video-testimonial-card[data-yt-id] .vtc-thumb:hover img {
  transform: scale(1.03);
  opacity: 0.8;
}
.video-testimonial-card[data-yt-id] .vtc-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 20px 20px 0 0;
}
.vtc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =====================================================
   ACHIEVEMENT CARD 3 — Gradient background (no duplicate image)
   ===================================================== */
.achiev-img-gradient-bd {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 40%, var(--color-bg-dark) 100%);
  overflow: hidden;
}
.achiev-img-gradient-fill {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 70%, rgba(212,175,55,0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.08) 0%, transparent 50%);
}
.achiev-gradient-icon {
  font-size: 5rem;
  color: rgba(212,175,55,0.55);
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.4));
}

/* Fix achievement card image cropping — use aspect-ratio not fixed height */
.achiev-img-wrap {
  aspect-ratio: 4 / 3;
  min-height: unset;
}
.achievement-highlight-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =====================================================
   AUDIO CARD — click cursor & YouTube hover state
   ===================================================== */
.rec-audio-card[data-yt-id] {
  cursor: pointer;
}
.rec-audio-card[data-yt-id]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
}
.rec-audio-card[data-yt-id] .rec-play-btn {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  transform: scale(1.05);
}

/* =====================================================
   QURANIC VERSE OF THE WEEK
   ===================================================== */
.quran-verse-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.quran-verse-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--islamic-pattern-dark);
  opacity: 0.6;
  pointer-events: none;
}
.verse-card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 40px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 24px;
  backdrop-filter: blur(8px);
}
.verse-ornament-top,
.verse-ornament-bottom {
  color: var(--color-secondary);
  font-size: 1.5rem;
  margin-bottom: 20px;
  opacity: 0.7;
}
.verse-ornament-bottom {
  margin-bottom: 0;
  margin-top: 20px;
}
.verse-kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 20px;
  padding: 4px 16px;
  margin-bottom: 28px;
}
.verse-arabic {
  font-family: var(--font-islamic);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.8;
  color: #fff;
  margin-bottom: 20px;
  direction: rtl;
}
.verse-transliteration {
  font-style: italic;
  color: rgba(255,255,255,0.55);
  font-size: 0.95rem;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.verse-translation {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  margin-bottom: 8px;
}
.verse-ref {
  font-size: 0.85rem;
  color: var(--color-secondary);
  font-weight: 600;
}

/* =====================================================
   CERTIFICATE GALLERY
   ===================================================== */
.cert-gallery-section {
  background: var(--color-bg);
}
.cert-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 900px) { .cert-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .cert-gallery-grid { grid-template-columns: 1fr; } }

.cert-card {
  background: var(--color-surface);
  border-radius: 20px;
  padding: 32px 24px;
  border: 1.5px solid rgba(0,0,0,0.06);
  border-top: 4px solid var(--cert-color, var(--color-primary));
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  overflow: hidden;
}
.cert-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: var(--cert-color, var(--color-primary));
  opacity: 0.05;
  border-radius: 0 0 0 80px;
}
.cert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}
.cert-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--cert-color, var(--color-primary));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}
.cert-year {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cert-color, var(--color-primary));
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cert-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.45;
  margin-bottom: 8px;
}
.cert-org {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}
.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cert-color, var(--color-primary));
  background: linear-gradient(135deg, #fff9e6 0%, #fef3cc 100%);
  border: 1.5px solid var(--color-secondary);
  border-radius: 99px;
  padding: 4px 12px;
  box-shadow: 0 2px 6px rgba(212,175,55,0.18);
}
.cert-badge img { border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }

/* =====================================================
   YOUTUBE LATEST VIDEOS
   ===================================================== */
.yt-latest-section {
  background: var(--color-bg-alt);
}
.yt-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 900px) { .yt-videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .yt-videos-grid { grid-template-columns: 1fr; } }

.yt-video-card {
  background: var(--color-surface);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  cursor: pointer;
  transition: transform 0.22s, box-shadow 0.22s;
}
.yt-video-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.13); }
.yt-thumb-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
}
.yt-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.yt-video-card:hover .yt-thumb-wrap img { transform: scale(1.04); }
.yt-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 3rem;
  transition: background 0.2s;
}
.yt-play-overlay:hover { background: rgba(255,0,0,0.6); }
.yt-card-info { padding: 20px; }
.yt-card-title {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.45;
  margin-bottom: 10px;
}
.yt-card-meta {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.yt-card-meta i { margin-right: 4px; }
.btn-yt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #ff0000;
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn-yt:hover { background: #cc0000; transform: translateY(-2px); }

/* =====================================================
   UPCOMING COUNTDOWN
   ===================================================== */
.countdown-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.countdown-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--islamic-pattern-dark);
  opacity: 0.5;
  pointer-events: none;
}
.countdown-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.countdown-label-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 16px;
}
.countdown-event-name {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}
.countdown-event-date {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 40px;
}
.countdown-event-date i { margin-right: 6px; }
.countdown-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px 28px;
  min-width: 90px;
}
.countdown-num {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 6px;
}
.countdown-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.countdown-sep {
  font-size: 2rem;
  font-weight: 800;
  color: rgba(255,255,255,0.3);
  margin-bottom: 20px;
}
@media (max-width: 480px) {
  .countdown-unit { min-width: 70px; padding: 14px 18px; }
  .countdown-sep { font-size: 1.4rem; margin-bottom: 14px; }
}

/* =====================================================
   INVITATION PROCESS STEPS
   ===================================================== */
.invite-steps-section {
  background: var(--color-bg);
}
.invite-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  position: relative;
}
.invite-steps-grid::before {
  content: '';
  position: absolute;
  top: 40px;
  left: calc(12.5% + 26px);
  right: calc(12.5% + 26px);
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
  z-index: 0;
}
@media (max-width: 800px) {
  .invite-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .invite-steps-grid::before { display: none; }
}
@media (max-width: 480px) { .invite-steps-grid { grid-template-columns: 1fr; } }

.invite-step {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 10px;
}
.step-num {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  margin-bottom: 12px;
}
.step-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 20px;
  border: 3px solid var(--color-bg);
  box-shadow: 0 4px 16px rgba(11,60,38,0.3);
  position: relative;
}
.invite-step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 10px;
}
.invite-step p {
  font-size: 0.87rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* =====================================================
   QUICK BOOKING FORM
   ===================================================== */
.quick-booking-section {
  background: var(--color-bg-alt);
}
.quick-booking-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 860px) {
  .quick-booking-inner { grid-template-columns: 1fr; gap: 40px; }
}
.quick-booking-left .section-title { margin-bottom: 0; }
.quick-booking-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.quick-booking-features > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--color-text);
}
.quick-booking-features .fa-check-circle { color: var(--color-primary); font-size: 1rem; }

.quick-booking-form {
  background: var(--color-surface);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  border: 1.5px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.qb-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.qb-field label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.qb-field input,
.qb-field select {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-bg);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  box-sizing: border-box;
}
.qb-field input:focus,
.qb-field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11,60,38,0.08);
}
.qb-success {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: rgba(11,60,38,0.08);
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.9rem;
  color: var(--color-primary);
  font-weight: 600;
}
.qb-success[hidden] { display: none !important; }
.qb-success .fa-circle-check { color: var(--color-primary); font-size: 1.2rem; }

/* =====================================================
   STUDENT SUCCESS STORIES
   ===================================================== */
.student-success-section {
  background: var(--color-bg-alt);
}
.student-success-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 700px) { .student-success-grid { grid-template-columns: 1fr; } }

.student-card {
  background: var(--color-surface);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1.5px solid rgba(0,0,0,0.05);
  transition: transform 0.22s, box-shadow 0.22s;
}
.student-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}
.student-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}
.student-info { display: flex; flex-direction: column; gap: 4px; }
.student-name { font-size: 1.02rem; font-weight: 700; color: var(--color-heading); }
.student-age { font-size: 0.8rem; color: var(--color-text-muted); }
.student-achievement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(11,60,38,0.05);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.5;
}
.student-achievement i { color: var(--color-secondary); margin-top: 2px; font-size: 1rem; flex-shrink: 0; }

/* =====================================================
   PRESS / NEWS COVERAGE
   ===================================================== */
/* =====================================================
   PRESS SECTION — redesigned with featured + cards row
   ===================================================== */
.press-section {
  background: var(--color-bg);
}

/* Featured horizontal strip */
.press-featured {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  background: var(--color-surface);
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(11,60,38,0.08);
  margin-top: 48px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.22s, box-shadow 0.22s;
}
.press-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.11);
}
.press-featured-logo-col {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  border-right: 1.5px solid rgba(11,60,38,0.07);
}
.press-featured-logo-col img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}
.press-featured-content {
  padding: 32px 36px;
}
.press-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(11,60,38,0.07);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.press-featured-headline {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.5;
  margin-bottom: 20px;
}
.press-featured-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.press-featured-meta > span {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.press-featured-meta i { margin-right: 5px; }
.press-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: 6px 16px;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.press-read-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

/* 6-card grid row */
.press-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.press-news-card {
  background: var(--color-surface);
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(11,60,38,0.07);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s, box-shadow 0.22s;
}
.press-news-card:hover {
  transform: perspective(800px) rotateX(-3deg) translateY(-5px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.11);
}
.pnc-logo-wrap {
  background: #fff;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-bottom: 1.5px solid rgba(11,60,38,0.06);
}
.pnc-logo-wrap img {
  max-height: 50px;
  max-width: 100%;
  object-fit: contain;
}
.pnc-logo-svg img {
  max-height: 44px;
}
.pnc-logo-text-only {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--color-primary);
}
.pnc-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pnc-headline {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.55;
  margin: 8px 0 auto;
}
.pnc-date {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 14px;
}
.pnc-date i { margin-right: 4px; }

/* Responsive */
@media (max-width: 900px) {
  .press-cards-row { grid-template-columns: repeat(2, 1fr); }
  .press-featured { grid-template-columns: 160px 1fr; }
}
@media (max-width: 600px) {
  .press-featured { grid-template-columns: 1fr; }
  .press-featured-logo-col { border-right: none; border-bottom: 1.5px solid rgba(11,60,38,0.07); padding: 24px; }
  .press-featured-content { padding: 24px; }
  .press-cards-row { grid-template-columns: 1fr; }
}

/* =====================================================
   SOCIAL MEDIA FEED
   ===================================================== */
.social-feed-section {
  background: var(--color-bg-alt);
}
.social-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 900px) { .social-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .social-posts-grid { grid-template-columns: repeat(2, 1fr); } }

.social-post-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform 0.22s, box-shadow 0.22s;
  cursor: pointer;
}
.social-post-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,0.14); }
.social-post-img {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgba(255,255,255,0.4);
}
.social-post-footer {
  background: var(--color-surface);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.social-post-platform {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.social-post-stats {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-social-fb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #1877f2;
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn-social-fb:hover { background: #1260c9; transform: translateY(-2px); }

/* =====================================================
   SHARED HELPER: section-header-center
   ===================================================== */
.section-header-center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.section-header-center .section-title {
  display: block;
  text-align: center;
}

/* =====================================================
   VIDEO SLIDER — flag badge inside overlay
   ===================================================== */
.fvi-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-secondary);
  background: rgba(0,0,0,0.45);
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 8px;
  letter-spacing: 0.06em;
}
.fvi-flag img { border-radius: 2px; }

/* =====================================================
   STUDENT SUCCESS — full redesign
   ===================================================== */
.student-success-section { background: var(--color-bg); }

/* Featured large block */
.student-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
  margin-bottom: 48px;
}
@media (max-width: 860px) { .student-featured { grid-template-columns: 1fr; gap: 28px; } }

.student-featured-img-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.student-featured-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.student-featured-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
}
.student-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 6px 16px;
}
.student-feat-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.student-featured-content h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 800;
  color: var(--color-heading);
  line-height: 1.35;
  margin-bottom: 14px;
}
.student-featured-content p {
  color: var(--color-text-muted);
  line-height: 1.75;
  font-size: 0.95rem;
  margin-bottom: 28px;
}
.student-feat-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.sfs-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sfs-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.sfs-item span:not(.sfs-num) {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Story cards row */
.student-story-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 760px) { .student-story-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .student-story-row { grid-template-columns: 1fr; } }

.student-story-card {
  background: var(--color-surface);
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(0,0,0,0.05);
  transition: transform 0.25s cubic-bezier(.17,.67,.35,1.2), box-shadow 0.25s ease;
  transform-style: preserve-3d;
  perspective: 800px;
}
.student-story-card:hover {
  transform: perspective(800px) rotateX(-3deg) rotateY(3deg) translateY(-6px);
  box-shadow: 8px 20px 48px rgba(11,60,38,0.16);
}
.ssc-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.ssc-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.student-story-card:hover .ssc-img-wrap img { transform: scale(1.05); }
.ssc-badge {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.ssc-body { padding: 18px 20px 22px; }
.ssc-name { font-size: 1.02rem; font-weight: 700; color: var(--color-heading); margin-bottom: 4px; }
.ssc-meta { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 10px; }
.ssc-achieve {
  font-size: 0.88rem;
  color: var(--color-text);
  background: rgba(11,60,38,0.06);
  border-left: 3px solid var(--color-primary);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
}

/* =====================================================
   SOCIAL FEED — real photos
   ===================================================== */
.social-post-img-real {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
}
.social-post-img-real img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.social-post-card:hover .social-post-img-real img { transform: scale(1.08); }
.social-post-card { text-decoration: none; }

/* =====================================================
   TESTIMONIAL — remove underline above author name
   Remove .testimonial-author::before if it exists
   Use clean author layout
   ===================================================== */
.testimonial-author::before { display: none !important; }
.testimonial-author {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding-top: 16px;
  margin-top: 16px;
}
.testimonials-grid-5,
.testimonials-grid-6 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .testimonials-grid-5,
  .testimonials-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .testimonials-grid-5,
  .testimonials-grid-6 { grid-template-columns: 1fr; }
}

/* =====================================================
   3D HOVER — universal card upgrade
   ===================================================== */
.cert-card {
  transition: transform 0.25s cubic-bezier(.17,.67,.35,1.2), box-shadow 0.25s ease;
  transform-style: preserve-3d;
}
.cert-card:hover {
  transform: perspective(800px) rotateX(-4deg) rotateY(4deg) translateY(-6px);
  box-shadow: 8px 16px 40px rgba(0,0,0,0.13);
}

.press-card {
  transition: transform 0.25s cubic-bezier(.17,.67,.35,1.2), box-shadow 0.25s ease;
  transform-style: preserve-3d;
}
.press-card:hover {
  transform: perspective(800px) rotateX(-3deg) rotateY(3deg) translateY(-6px);
  box-shadow: 8px 16px 40px rgba(0,0,0,0.12);
}

.yt-video-card {
  transform-style: preserve-3d;
}
.yt-video-card:hover {
  transform: perspective(900px) rotateX(-3deg) translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.16);
}

/* =====================================================
   COUNTDOWN — improved visual
   ===================================================== */
.countdown-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 28px;
  padding: 48px 40px;
  backdrop-filter: blur(8px);
}

/* =====================================================
   CERT GALLERY — add featured photo card  
   ===================================================== */
.cert-gallery-featured {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: center;
  background: var(--color-surface);
  border-radius: 24px;
  overflow: hidden;
  margin-top: 48px;
  margin-bottom: 32px;
  border: 1.5px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}
@media (max-width: 780px) { .cert-gallery-featured { grid-template-columns: 1fr; } }

.cgf-img-wrap { aspect-ratio: 1; overflow: hidden; }
.cgf-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cgf-content { padding: 32px 32px 32px 0; }
@media (max-width: 780px) { .cgf-content { padding: 24px; } }
.cgf-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.cgf-content h3 { font-size: 1.4rem; font-weight: 800; color: var(--color-heading); margin-bottom: 10px; line-height: 1.35; }
.cgf-content p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 0; }

/* =====================================================
   YT LATEST — SPLIT LAYOUT
   ===================================================== */
.yt-split-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: center;
}
.yt-split-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.yt-split-left .section-kicker {
  margin-bottom: 10px;
}
.yt-split-left .section-title {
  margin-bottom: 14px;
}
.yt-split-left .section-subtitle {
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .yt-split-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .yt-split-left .section-title { text-align: center !important; }
  .yt-split-left .section-subtitle { text-align: center !important; }
  .yt-split-left { align-items: center; }
}

/* =====================================================
   BLOG — EDITORIAL DARK LAYOUT
   ===================================================== */
.blog-editorial-section {
  background: var(--color-primary);
  padding: 80px 0;
}
.blog-editorial-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 20px;
}
.bet-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.bet-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.blog-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: none;
  border: 1.5px solid rgba(212,175,55,0.4);
  padding: 8px 18px;
  border-radius: 30px;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}
.blog-all-link:hover {
  background: rgba(212,175,55,0.12);
  border-color: var(--color-secondary);
}
.blog-editorial-inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  overflow: hidden;
}
.blog-editorial-featured {
  padding: 48px 48px;
  border-right: 1.5px solid rgba(255,255,255,0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
}
.blog-editorial-featured:hover {
  background: rgba(255,255,255,0.03);
}
.bef-number {
  font-size: 5rem;
  font-weight: 900;
  color: rgba(212,175,55,0.08);
  line-height: 1;
  margin-bottom: -10px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.05em;
}
.bef-cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 16px;
}
.bef-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 20px;
  flex: 1;
}
.bef-excerpt {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.72;
  margin-bottom: 28px;
}
.bef-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.bef-footer span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.38);
}
.bef-read-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.18s;
}
.bef-read-link:hover { gap: 10px; }
.blog-editorial-stack {
  display: flex;
  flex-direction: column;
}
.blog-editorial-small {
  padding: 36px 36px;
  flex: 1;
  transition: background 0.2s;
  cursor: pointer;
}
.blog-editorial-small:hover {
  background: rgba(255,255,255,0.04);
}
.blog-editorial-small + .blog-editorial-small {
  border-top: 1.5px solid rgba(255,255,255,0.1);
}
.bes-number {
  font-size: 2.8rem;
  font-weight: 900;
  color: rgba(212,175,55,0.08);
  line-height: 1;
  margin-bottom: 6px;
  font-family: 'Outfit', sans-serif;
}
.bes-cat {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 12px;
}
.bes-title {
  font-size: 1.0rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  line-height: 1.45;
  margin-bottom: 20px;
}
.bes-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 16px;
  flex-wrap: wrap;
}
.bes-footer span {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.35);
}
.bes-read-link {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: none;
  margin-left: auto;
  transition: opacity 0.18s;
}
.bes-read-link:hover { opacity: 0.7; }

/* Responsive */
@media (max-width: 860px) {
  .blog-editorial-inner { grid-template-columns: 1fr; }
  .blog-editorial-featured { border-right: none; border-bottom: 1.5px solid rgba(255,255,255,0.1); }
  .blog-editorial-featured { padding: 32px 28px; }
  .blog-editorial-small { padding: 28px 28px; }
  .blog-editorial-topbar { flex-direction: column; align-items: flex-start; }
}

/* =====================================================
   INVITE STEPS — LEFT HEADER + CTA
   ===================================================== */
.invite-steps-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}
.ist-left { flex: 1; min-width: 260px; }
.ist-cta { flex-shrink: 0; }

/* =====================================================
   SOCIAL FEED — LEFT HEADER + FOLLOW BTNS
   ===================================================== */
.social-feed-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.social-feed-follow-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.social-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}
.social-follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.sfb-fb {
  background: #1877F2;
  color: #fff;
}
.sfb-yt {
  background: #FF0000;
  color: #fff;
}

/* =====================================================
   ACHIEVEMENTS TIMELINE — IMAGE SUPPORT
   ===================================================== */
.timeline-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  margin: -24px -24px 20px -24px;
}
.timeline-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.timeline-content:hover .timeline-img-wrap img {
  transform: scale(1.06);
}
.timeline-country-flag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.62);
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.timeline-country-flag img {
  width: 16px;
  height: auto;
  border-radius: 2px;
  vertical-align: middle;
}

/* Storefront: default to Bengali until the language toggle JS runs */
html:not(.lang-en) .lang-en { display: none !important; }

/* Storefront: bridge the source palette to the org theme tokens set by the
   theme-provider, so the owner colour picker controls the site. Falls back to
   the source design colours when a token is unset (pixel-perfect default). */
:root {
  /* Base palette → org theme tokens (owner colour picker) */
  --color-primary: var(--primary, #07371f);
  --color-secondary: var(--secondary, #d7b64b);
  --color-accent: var(--secondary, #C5A059);
  --color-bg-light: var(--background, #fffdf6);
  --color-bg-cream: var(--muted, #f3efe3);
  --color-text-dark: var(--foreground, #1E2522);
  --color-text-muted: var(--muted-foreground, #5A6660);
  --color-border: var(--border, #e4ddcb);
  /* Derived shades — tinted from the picked colour so the dark/light sections
     (verse, footer, gradients, hovers) follow the picker too. Percentages are
     tuned so the defaults stay visually identical to the source design. */
  --color-primary-dark: color-mix(in srgb, var(--primary, #07371f) 43%, #000);
  --color-primary-light: color-mix(in srgb, var(--primary, #07371f) 78%, #fff);
  --color-bg-dark: color-mix(in srgb, var(--primary, #07371f) 60%, #000);
  --color-secondary-dark: color-mix(in srgb, var(--secondary, #d7b64b) 84%, #000);
  --color-secondary-light: color-mix(in srgb, var(--secondary, #d7b64b) 70%, #fff);
  --color-text-light-muted: color-mix(in srgb, var(--primary, #07371f) 30%, #fff);
  --color-border-accent: color-mix(in srgb, var(--secondary, #d7b64b) 30%, transparent);
}

/* System icons (lucide-react) replace the source Font Awesome glyphs.
   Size them like the original icon-font glyphs — 1em, colour via currentColor. */
.celebrity-site svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ── Page-builder rich-text (Tiptap) ──────────────────────────────────
   Rich-text (textarea) fields render through <RichText> (.celeb-rich). The
   editor wraps content in block tags; neutralise the leading/trailing margins
   so single-line content sits flush like the original plain text. */
.celebrity-site .celeb-rich > :first-child { margin-top: 0; }
.celebrity-site .celeb-rich > :last-child { margin-bottom: 0; }

/* ── Recitations: YouTube playlist audio player ──────────────────────── */
.celebrity-site .yt-audio { margin-top: 28px; }

/* Now-playing bar */
.celebrity-site .yt-now {
  display: flex; align-items: center; gap: 18px;
  background: var(--color-bg-cream, #f3efe3);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-md, 16px);
  padding: 16px 20px; margin-bottom: 24px;
}
.celebrity-site .yt-now-art {
  width: 76px; height: 76px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
  background: var(--color-primary-light, #07371f); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.celebrity-site .yt-now-art img { width: 100%; height: 100%; object-fit: cover; }
.celebrity-site .yt-now-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.celebrity-site .yt-now-title { color: var(--color-primary); font-size: 1.15rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.celebrity-site .yt-now-pl { color: var(--color-secondary); font-size: 0.85rem; }
.celebrity-site .yt-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.8rem; color: var(--color-text-muted); }
.celebrity-site .yt-progress input[type="range"] { flex: 1; accent-color: var(--color-primary); cursor: pointer; }
.celebrity-site .yt-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Two-column layout */
.celebrity-site .yt-grid { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 24px; align-items: start; }
.celebrity-site .yt-col-title { color: var(--color-primary); font-size: 1rem; margin: 0 0 12px; }
.celebrity-site .yt-pl-list, .celebrity-site .yt-track-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; }

/* Playlist card */
.celebrity-site .yt-pl-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 10px; transition: var(--transition-smooth, all .2s);
}
.celebrity-site .yt-pl-card:hover { border-color: var(--color-secondary); }
.celebrity-site .yt-pl-card.active { border-color: var(--color-primary); background: var(--color-bg-cream, #f3efe3); }
.celebrity-site .yt-pl-card img, .celebrity-site .yt-pl-thumb-fallback { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.celebrity-site .yt-pl-thumb-fallback { background: var(--color-primary-light, #07371f); color: #fff; display: flex; align-items: center; justify-content: center; }
.celebrity-site .yt-pl-meta { display: flex; flex-direction: column; min-width: 0; }
.celebrity-site .yt-pl-name { color: var(--color-primary); font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.celebrity-site .yt-pl-count { color: var(--color-text-muted); font-size: 0.8rem; }

/* Search */
.celebrity-site .yt-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; color: var(--color-text-muted); }
.celebrity-site .yt-search input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; color: var(--color-text); }

/* Track row */
.celebrity-site .yt-track {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 12px; transition: var(--transition-smooth, all .2s);
}
.celebrity-site .yt-track:hover { border-color: var(--color-secondary); }
.celebrity-site .yt-track.active { border-color: var(--color-primary); background: var(--color-bg-cream, #f3efe3); }
.celebrity-site .yt-track-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.celebrity-site .yt-track img { width: 48px; height: 36px; flex-shrink: 0; border-radius: 6px; object-fit: cover; }
.celebrity-site .yt-track-title { color: var(--color-text); font-size: 0.92rem; line-height: 1.4; }
.celebrity-site .yt-track.active .yt-track-title { color: var(--color-primary); font-weight: 600; }

.celebrity-site .yt-msg { color: var(--color-text-muted); padding: 16px 4px; font-size: 0.95rem; }

/* Hidden audio-only player (off-screen, keeps audio playing) */
.celebrity-site .yt-hidden, .yt-hidden { position: fixed; left: -9999px; bottom: 0; width: 320px; height: 180px; opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
  .celebrity-site .yt-grid { grid-template-columns: 1fr; }
  .celebrity-site .yt-pl-list { max-height: 280px; }
  .celebrity-site .yt-now { flex-wrap: wrap; }
}

/* ── Event detail: photos + contact + map ────────────────────────────── */
.celebrity-site .event-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.celebrity-site .event-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-border); display: block; transition: transform .2s; }
.celebrity-site .event-gallery a:hover img { transform: scale(1.03); }
.celebrity-site .event-info-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: stretch; }
.celebrity-site .event-contact-card { display: flex; flex-direction: column; background: var(--color-bg-cream, #f3efe3); border: 1px solid var(--color-border); border-radius: var(--border-radius-md, 16px); padding: 20px 22px; }
.celebrity-site .event-contact-card h3 { border-bottom: 1px solid var(--color-border); padding-bottom: 14px; }
.celebrity-site .event-contact-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--color-primary); font-weight: 600; text-decoration: none; }
.celebrity-site .event-map { display: flex; flex-direction: column; }
.celebrity-site .event-map iframe { width: 100%; flex: 1; min-height: 320px; border: 0; border-radius: var(--border-radius-md, 16px); }
@media (max-width: 768px) { .celebrity-site .event-map iframe { min-height: 280px; } }
@media (max-width: 768px) { .celebrity-site .event-info-grid { grid-template-columns: 1fr; } }

/* ── Achievements timeline: keep the alternating left/right card placement
   (base rules untouched); only make each CARD horizontal — image left, text
   right. ── */
.celebrity-site .timeline-wrapper { max-width: 1200px; }
.celebrity-site .timeline-content { display: flex; align-items: stretch; padding: 0; overflow: hidden; text-align: left; }
.celebrity-site .timeline-img-wrap { flex: 0 0 42%; height: auto; min-height: 180px; margin: 0; border-radius: 0; }
.celebrity-site .timeline-img-wrap img { height: 100%; }
.celebrity-site .timeline-text { flex: 1; min-width: 0; padding: 20px; text-align: left; }
@media (max-width: 600px) {
  .celebrity-site .timeline-content { flex-direction: column; }
  .celebrity-site .timeline-img-wrap { flex-basis: auto; width: 100%; min-height: 180px; }
}

/* ── Event detail: image hero header ─────────────────────────────────── */
.celebrity-site .event-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background-color: var(--color-primary);
  background-image: linear-gradient(135deg, var(--color-primary), #04341c);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.celebrity-site .event-hero .container { padding-top: 80px; padding-bottom: 44px; }
.celebrity-site .event-hero-inner { max-width: 860px; }
.celebrity-site .event-hero-badge {
  display: inline-block; background: var(--color-secondary); color: var(--color-primary-dark, #052816);
  padding: 6px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem; margin-bottom: 14px;
}
.celebrity-site .event-hero-title { color: #fff; font-size: 2.4rem; line-height: 1.22; margin: 0 0 16px; text-shadow: 0 2px 16px rgba(0,0,0,0.45); }
.celebrity-site .event-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.98rem; color: rgba(255,255,255,0.92); }
.celebrity-site .event-hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .celebrity-site .event-hero { min-height: 300px; }
  .celebrity-site .event-hero .container { padding-top: 56px; padding-bottom: 32px; }
  .celebrity-site .event-hero-title { font-size: 1.7rem; }
}

/* ===================== Books / Publications page ===================== */
.celebrity-site .store-header { background: var(--color-primary); padding: 134px 0 74px; margin-bottom: 8px; }
.celebrity-site .store-header-inner { display: flex; align-items: center; gap: 28px; }
.celebrity-site .store-header-logo { flex: 0 0 auto; background: #fff; border-radius: var(--border-radius-md, 16px); padding: 16px 24px; display: flex; align-items: center; justify-content: center; min-width: 190px; min-height: 120px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); }
.celebrity-site .store-header-logo img { max-width: 200px; max-height: 110px; width: auto; height: auto; object-fit: contain; }
.celebrity-site .store-header-text { color: #fff; }
.celebrity-site .store-header-title { color: #fff; font-size: 1.9rem; margin: 0 0 10px; }
.celebrity-site .store-header-desc { color: rgba(255,255,255,0.92); line-height: 1.7; max-width: 780px; }
.celebrity-site .store-header-desc p { margin: 0; }
@media (max-width: 768px) {
  .celebrity-site .store-header-inner { flex-direction: column; text-align: center; gap: 18px; }
  .celebrity-site .store-header-title { font-size: 1.55rem; }
  .celebrity-site .store-header-desc { margin: 0 auto; }
}
@media (max-width: 480px) {
  .celebrity-site .store-header { padding: 112px 0 56px; }
}

.celebrity-site .books-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 10px; }
@media (max-width: 992px) { .celebrity-site .books-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .celebrity-site .books-grid { grid-template-columns: 1fr; } }

.celebrity-site .book-card { background: #f6f5f1; border-radius: var(--border-radius-md, 16px); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.celebrity-site .book-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,0.10); }
.celebrity-site .book-thumb { position: relative; padding: 22px 22px 0; display: flex; align-items: flex-end; justify-content: center; }
.celebrity-site .book-thumb img { width: 100%; max-height: 300px; object-fit: contain; border-radius: 6px; }
.celebrity-site .book-badge { position: absolute; top: 14px; left: 14px; background: var(--color-primary); color: #fff; font-weight: 700; font-size: .82rem; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.celebrity-site .book-info { padding: 16px 18px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; }
.celebrity-site .book-title { font-size: 1.02rem; font-weight: 700; color: var(--color-text, #1a1a1a); margin: 0; line-height: 1.5; }
.celebrity-site .book-rating { display: flex; align-items: center; gap: 6px; }
.celebrity-site .book-stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 2px; }
.celebrity-site .book-stars-empty { color: #d7d2c4; }
.celebrity-site .book-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #f5a623; }
.celebrity-site .book-rating-count { color: var(--color-text-muted); font-size: .85rem; }
.celebrity-site .book-price { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.celebrity-site .book-old-price { color: var(--color-text-muted); text-decoration: line-through; font-size: .95rem; }
.celebrity-site .book-new-price { color: var(--color-primary); font-weight: 700; font-size: 1.25rem; }
.celebrity-site .book-order-btn { margin-top: auto; background: var(--color-primary); color: #fff; border: none; padding: 9px 24px; border-radius: var(--border-radius-sm, 8px); font-weight: 600; text-decoration: none; display: inline-block; cursor: pointer; transition: background .2s ease, transform .15s ease; }
.celebrity-site .book-order-btn:hover { background: var(--color-primary-dark, #033018); color: #fff; transform: translateY(-1px); }

}