/* ============================================
   UmmulQuran — Glassmorphism Landing Page
   ============================================ */

/* ---------- Google Fonts: loaded via <link> in HTML for performance ---------- */

/* ---------- CSS Custom Properties ---------- */
:root {
  --primary: #0d9e6e;
  --primary-dark: #07785a;
  --primary-light: #11c98d;
  --accent: #d4af37;
  --accent-light: #f0d060;
  --bg-dark: #0a0f1a;
  --bg-section: #0e1527;
  --bg-card: rgba(255, 255, 255, 0.06);
  --bg-glass: rgba(255, 255, 255, 0.08);
  --bg-glass-hover: rgba(255, 255, 255, 0.12);
  --border-glass: rgba(255, 255, 255, 0.12);
  --border-glass-hover: rgba(255, 255, 255, 0.22);
  --text-main: #e8edf5;
  --text-muted: #9aa5b8;
  --text-heading: #ffffff;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 30px rgba(13, 158, 110, 0.15);
  --font-primary: 'Inter', 'Noto Sans Bengali', sans-serif;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  background: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Smooth animated gradient background overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg,
      #0a0f1a 0%,
      #0b1a2e 20%,
      #0d1f23 40%,
      #0a0f1a 60%,
      #12091f 80%,
      #0a0f1a 100%);
  background-size: 400% 400%;
  animation: ambientShift 20s ease-in-out infinite;
}

@keyframes ambientShift {
  0% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 100% 25%;
  }

  50% {
    background-position: 50% 100%;
  }

  75% {
    background-position: 25% 0%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Islamic Geometric Pattern Overlay — 8-pointed star tessellation */
.islamic-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M50 5L58 20L75 12L67 29L82 37L67 45L75 62L58 54L50 69L42 54L25 62L33 45L18 37L33 29L25 12L42 20Z' fill='none' stroke='%23d4af37' stroke-width='0.6'/%3E%3Cpath d='M50 35L55 42L62 37L57 44L64 50L57 56L62 63L55 58L50 65L45 58L38 63L43 56L36 50L43 44L38 37L45 42Z' fill='none' stroke='%23d4af37' stroke-width='0.4'/%3E%3Ccircle cx='50' cy='50' r='3' fill='none' stroke='%23d4af37' stroke-width='0.5'/%3E%3Cpath d='M0 0L8 15L0 30' fill='none' stroke='%230d9e6e' stroke-width='0.3'/%3E%3Cpath d='M100 0L92 15L100 30' fill='none' stroke='%230d9e6e' stroke-width='0.3'/%3E%3Cpath d='M0 70L8 85L0 100' fill='none' stroke='%230d9e6e' stroke-width='0.3'/%3E%3Cpath d='M100 70L92 85L100 100' fill='none' stroke='%230d9e6e' stroke-width='0.3'/%3E%3Cpath d='M30 0L50 5L70 0' fill='none' stroke='%230d9e6e' stroke-width='0.25'/%3E%3Cpath d='M30 100L50 95L70 100' fill='none' stroke='%230d9e6e' stroke-width='0.25'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  animation: patternDrift 45s linear infinite;
}

/* Second pattern layer — rotated for depth */
.islamic-pattern-2 {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 10L70 25L85 15L78 32L95 38L78 44L85 61L70 51L60 66L50 51L35 61L42 44L25 38L42 32L35 15L50 25Z' fill='none' stroke='%230d9e6e' stroke-width='0.5'/%3E%3Ccircle cx='60' cy='38' r='12' fill='none' stroke='%23d4af37' stroke-width='0.3'/%3E%3Ccircle cx='0' cy='0' r='8' fill='none' stroke='%23d4af37' stroke-width='0.25'/%3E%3Ccircle cx='120' cy='0' r='8' fill='none' stroke='%23d4af37' stroke-width='0.25'/%3E%3Ccircle cx='0' cy='120' r='8' fill='none' stroke='%23d4af37' stroke-width='0.25'/%3E%3Ccircle cx='120' cy='120' r='8' fill='none' stroke='%23d4af37' stroke-width='0.25'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  transform: rotate(15deg) scale(1.2);
  animation: patternDrift2 70s linear infinite reverse;
}

@keyframes patternDrift {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100px 100px;
  }
}

@keyframes patternDrift2 {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 120px 120px;
  }
}

/* Floating Islamic Symbols — Crescents & Stars */
.islamic-symbols {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.islamic-symbols span {
  position: absolute;
  opacity: 0;
  animation: floatSymbol 20s ease-in-out infinite;
  will-change: transform, opacity;
}

.islamic-symbols .crescent {
  font-size: 2rem;
  color: var(--accent);
}

.islamic-symbols .star {
  font-size: 1.2rem;
  color: var(--primary-light);
}

.islamic-symbols span:nth-child(1) {
  left: 5%;
  top: 15%;
  animation-duration: 18s;
  animation-delay: 0s;
}

.islamic-symbols span:nth-child(2) {
  left: 15%;
  top: 60%;
  animation-duration: 22s;
  animation-delay: -3s;
}

.islamic-symbols span:nth-child(3) {
  left: 85%;
  top: 25%;
  animation-duration: 25s;
  animation-delay: -7s;
}

.islamic-symbols span:nth-child(4) {
  left: 75%;
  top: 70%;
  animation-duration: 19s;
  animation-delay: -11s;
}

.islamic-symbols span:nth-child(5) {
  left: 40%;
  top: 80%;
  animation-duration: 23s;
  animation-delay: -5s;
}

.islamic-symbols span:nth-child(6) {
  left: 60%;
  top: 10%;
  animation-duration: 20s;
  animation-delay: -14s;
}

.islamic-symbols span:nth-child(7) {
  left: 25%;
  top: 35%;
  animation-duration: 26s;
  animation-delay: -9s;
}

.islamic-symbols span:nth-child(8) {
  left: 92%;
  top: 50%;
  animation-duration: 21s;
  animation-delay: -16s;
}

@keyframes floatSymbol {
  0% {
    opacity: 0;
    transform: translateY(30px) rotate(0deg);
  }

  15% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.25;
    transform: translateY(-20px) rotate(15deg);
  }

  85% {
    opacity: 0.15;
  }

  100% {
    opacity: 0;
    transform: translateY(30px) rotate(-10deg);
  }
}

/* Mosque Dome & Minaret Silhouette */
.mosque-silhouette {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 200 L0 160 L30 160 L30 60 L35 55 L35 30 L33 28 L37 15 L35 13 L37 5 L39 13 L37 15 L41 28 L39 30 L39 55 L44 60 L44 160 L80 160 L80 140 Q80 80 150 60 Q220 80 220 140 L220 160 L240 160 L240 120 Q240 70 310 50 Q380 70 380 120 L380 160 L420 160 L420 80 L425 75 L425 40 L423 38 L427 20 L425 18 L427 8 L429 18 L427 20 L431 38 L429 40 L429 75 L434 80 L434 160 L500 160 L500 130 Q500 60 600 35 Q700 60 700 130 L700 160 L760 160 L760 140 Q760 90 830 70 Q900 90 900 140 L900 160 L930 160 L930 70 L935 65 L935 35 L933 33 L937 18 L935 16 L937 6 L939 16 L937 18 L941 33 L939 35 L939 65 L944 70 L944 160 L1000 160 L1000 130 Q1000 80 1070 55 Q1140 80 1140 130 L1140 160 L1200 160 L1200 200 Z' fill='%23d4af37'/%3E%3C/svg%3E");
  background-size: 100% 200px;
  background-repeat: no-repeat;
  background-position: bottom center;
}

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

a {
  color: var(--primary-light);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--accent-light);
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
}

/* ---------- Utility ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-padding {
  padding: 80px 0;
}

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

.text-accent {
  color: var(--accent);
}

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

/* ---------- Glass Card Mixin ---------- */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  transition: var(--transition);
}

.glass:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-glass-hover);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}

/* ---------- Section Title ---------- */
.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title .badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.section-title h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1.3;
}

.section-title p {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 700px;
  margin: 12px auto 0;
}

/* ---------- Animated BG Orbs ---------- */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: floatOrb 20s ease-in-out infinite alternate, pulseFade 8s ease-in-out infinite;
  will-change: transform, opacity;
}

.bg-orbs span:nth-child(1) {
  width: 550px;
  height: 550px;
  background: var(--primary);
  top: -12%;
  left: -8%;
  animation-duration: 22s, 10s;
  opacity: 0.3;
}

.bg-orbs span:nth-child(2) {
  width: 450px;
  height: 450px;
  background: var(--accent);
  bottom: 8%;
  right: -10%;
  animation-duration: 18s, 7s;
  animation-delay: -5s, -3s;
  opacity: 0.25;
}

.bg-orbs span:nth-child(3) {
  width: 400px;
  height: 400px;
  background: #6c3fd4;
  top: 38%;
  left: 48%;
  animation-duration: 25s, 12s;
  animation-delay: -10s, -6s;
  opacity: 0.2;
}

.bg-orbs span:nth-child(4) {
  width: 300px;
  height: 300px;
  background: #1a6b8a;
  bottom: 30%;
  left: 10%;
  animation-duration: 28s, 9s;
  animation-delay: -7s, -4s;
  opacity: 0.18;
}

@keyframes floatOrb {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(60px, -40px) scale(1.15);
  }

  66% {
    transform: translate(-30px, 30px) scale(0.9);
  }

  100% {
    transform: translate(20px, -20px) scale(1.05);
  }
}

@keyframes pulseFade {

  0%,
  100% {
    opacity: 0.18;
  }

  50% {
    opacity: 0.38;
  }
}

/* ==============================
   NAVBAR
   ============================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 14px 0;
  transition: var(--transition);
}

.navbar.scrolled {
  background: rgba(10, 15, 26, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-glass);
  padding: 10px 0;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-logo img {
  height: 90px;
  width: auto;
  object-fit: contain;
}

.navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  position: relative;
  overflow: hidden;
  animation: btnPulseGlow 3s ease-in-out infinite;
}

.navbar-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: btnShimmer 3.2s ease-in-out infinite;
}

.navbar-cta:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(13, 158, 110, 0.5), 0 0 15px rgba(13, 158, 110, 0.3);
  color: #fff;
}

/* ==============================
   HERO SECTION
   ============================== */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 60px;
}

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

.hero-content .label {
  display: inline-block;
  background: rgba(212, 175, 55, 0.15);
  color: var(--accent);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.hero-content h1 {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--text-heading);
  line-height: 1.25;
  margin-bottom: 16px;
}

.hero-content h1 .highlight {
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-content p {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 500;
}

.hero-content .note {
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 8px;
}

/* Hero Form Card */
.hero-form-card {
  padding: 36px;
  position: relative;
  overflow: hidden;
}

.hero-form-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(13, 158, 110, 0.08), transparent 60%);
  pointer-events: none;
}

.hero-form-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 6px;
}

.hero-form-card .form-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

/* Progress Bar */
.progress-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.progress-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  flex-shrink: 0;
}

.progress-step-dot.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-color: var(--primary-light);
  box-shadow: 0 0 14px rgba(13, 158, 110, 0.4);
}

.progress-step-dot.completed {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.progress-line {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.progress-line .fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Form Fields */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeSlideIn 0.4s ease;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-group label .req {
  color: #f44;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.95rem;
  transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 158, 110, 0.15);
  background: rgba(255, 255, 255, 0.09);
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-group .iti {
  width: 100%;
}

.form-group .iti__selected-flag {
  background: transparent;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  transition: var(--transition);
  gap: 8px;
  position: relative;
  overflow: hidden;
  animation: btnPulseGlow 3s ease-in-out infinite;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: btnShimmer 3s ease-in-out infinite;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(13, 158, 110, 0.5), 0 0 20px rgba(13, 158, 110, 0.25);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  margin-right: 10px;
}

.btn-secondary:hover {
  border-color: var(--text-muted);
  color: #fff;
}

.form-buttons {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.form-buttons .btn-primary {
  flex: 1;
}

/* ==============================
   VIDEO SECTION
   ============================== */
.video-section {
  position: relative;
  z-index: 1;
  padding: 80px 0;
}

.video-wrapper {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.video-wrapper .glass {
  padding: 8px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-wrapper iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: calc(var(--radius-lg) - 6px);
  display: block;
  border: none;
}

.video-particles {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  z-index: -1;
}

.video-particles span {
  position: absolute;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--primary-light);
  background: rgba(13, 158, 110, 0.12);
  border: 1px solid rgba(13, 158, 110, 0.2);
  border-radius: 50%;
  animation: pulse-float 4s ease-in-out infinite;
}

@keyframes pulse-float {

  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }

  50% {
    transform: translateY(-10px) scale(1.15);
    opacity: 1;
  }
}

/* YouTube Facade (lite embed) */
.youtube-facade {
  position: relative;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 6px);
  background: #000;
}

.youtube-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.youtube-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.youtube-facade:hover .youtube-play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* ==============================
   ABOUT SECTION
   ============================== */
.about-section {
  position: relative;
  z-index: 1;
}

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

.about-card {
  padding: 40px;
}

.about-card .trade-badge {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--accent);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
  font-weight: 600;
}

.about-card h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 10px;
  line-height: 1.3;
}

.about-card h4 {
  color: var(--primary-light);
  font-weight: 700;
  margin-bottom: 16px;
}

.about-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
  text-align: justify;
}

.about-card .highlight-text {
  color: var(--primary-light);
}

.about-card .special-text {
  color: var(--accent);
}

.about-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-radius: 50px;
  font-weight: 600;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.about-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: btnShimmer 3.5s ease-in-out infinite;
}

.about-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 25px rgba(13, 158, 110, 0.5), 0 0 20px rgba(13, 158, 110, 0.2);
  color: #fff;
}

.btn-toggle {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  border-radius: 50px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.btn-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.more-text {
  display: none;
}

.more-text.visible {
  display: inline;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* About Image */
.about-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-image-wrapper img {
  border-radius: var(--radius-lg);
  max-width: 90%;
  position: relative;
  z-index: 2;
}

.about-image-wrapper::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.08;
  filter: blur(60px);
  z-index: 0;
}

.about-image-wrapper::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px dashed rgba(212, 175, 55, 0.2);
  animation: spin 30s linear infinite;
  z-index: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==============================
   COURSES SECTION
   ============================== */
.courses-section {
  position: relative;
  z-index: 1;
  background: var(--bg-section);
}

.courses-section .section-desc {
  max-width: 800px;
  margin: -30px auto 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
}

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

.course-card {
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.course-card.featured {
  border-color: var(--primary);
  box-shadow: var(--shadow-glass), 0 0 40px rgba(13, 158, 110, 0.12);
}

.course-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.course-popular {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.course-card-header {
  padding: 32px 28px 16px;
  text-align: center;
}

.course-card-header h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-heading);
}

.course-card-header .sub {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 6px;
}

.course-card-features {
  padding: 0 28px 20px;
  flex: 1;
}

.course-card-features li {
  padding: 8px 0;
  color: var(--text-main);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.course-card-features li::before {
  content: '✓';
  color: var(--primary-light);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.course-card-cta {
  padding: 20px 28px 28px;
  text-align: center;
}

.course-card-cta a {
  display: block;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--primary-light);
  border: 1px solid rgba(13, 158, 110, 0.3);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.course-card-cta a:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13, 158, 110, 0.4);
}

.course-card.featured .course-card-cta a {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-color: var(--primary);
  animation: btnPulseGlow 3s ease-in-out infinite;
}

.course-card.featured .course-card-cta a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: btnShimmer 3s ease-in-out infinite;
}

.course-card.featured .course-card-cta a:hover {
  box-shadow: 0 8px 25px rgba(13, 158, 110, 0.5), 0 0 15px rgba(13, 158, 110, 0.25);
}

/* ==============================
   FEATURES SECTION
   ============================== */
.features-section {
  position: relative;
  z-index: 1;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  justify-items: center;
}

/* Center the last card when it wraps alone on a 4-col grid */
.features-grid .feature-card:last-child:nth-child(4n + 1) {
  grid-column: 2 / 4;
}

.feature-card {
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-card .icon-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(13, 158, 110, 0.15), rgba(212, 175, 55, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid rgba(13, 158, 110, 0.2);
}

.feature-card .icon-wrapper img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.feature-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 10px;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
  flex: 1;
}

.feature-card .feature-btn {
  margin-top: 18px;
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--accent), #c9a027);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition);
  display: inline-block;
  position: relative;
  overflow: hidden;
  animation: btnPulseGold 3s ease-in-out infinite;
}

.feature-card .feature-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: btnShimmer 2.8s ease-in-out infinite;
}

.feature-card .feature-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* Hospital highlight card */
.feature-card--highlight {
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.04) !important;
}

.feature-card--highlight .icon-wrapper {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(13, 158, 110, 0.15)) !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
}

.feature-address {
  font-size: 0.78rem;
  color: var(--accent);
  margin-top: 4px;
  line-height: 1.5;
}

.feature-address i {
  margin-right: 4px;
}

/* ==============================
   PILLARS SECTION
   ============================== */
.pillars-section {
  position: relative;
  z-index: 1;
  background: var(--bg-section);
}

.pillar-content-card {
  padding: 40px;
  display: none;
  animation: fadeSlideIn 0.4s ease;
  margin-bottom: 30px;
}

.pillar-content-card.active {
  display: flex;
  gap: 30px;
  align-items: center;
}

.pillar-content-card .pillar-img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  flex-shrink: 0;
}

.pillar-content-card h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 10px;
}

.pillar-content-card h3 span {
  color: var(--primary-light);
  font-weight: 500;
}

.pillar-content-card p {
  color: var(--text-muted);
  line-height: 1.8;
}

.pillar-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pillar-tab {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  padding: 12px;
}

.pillar-tab img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pillar-tab:hover,
.pillar-tab.active {
  border-color: var(--primary);
  background: rgba(13, 158, 110, 0.12);
  box-shadow: 0 0 18px rgba(13, 158, 110, 0.25);
  transform: scale(1.08);
}

/* ==============================
   QUOTES SECTION
   ============================== */
.quotes-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.quotes-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 158, 110, 0.05), rgba(108, 63, 212, 0.05));
  pointer-events: none;
}

.quote-carousel {
  position: relative;
  overflow: hidden;
}

.quote-slide {
  display: none;
  animation: fadeSlideIn 0.5s ease;
}

.quote-slide.active {
  display: block;
}

.quote-card {
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.quote-card .quote-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 20px;
}

.quote-card blockquote {
  font-size: 1.05rem;
  color: var(--text-main);
  line-height: 1.9;
  font-style: italic;
}

.quote-card blockquote span {
  color: var(--primary-light);
  font-weight: 600;
}

.quote-card .quote-source {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: normal;
}

.quote-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.quote-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: var(--transition);
  border: none;
}

.quote-dot.active {
  background: var(--primary);
  box-shadow: 0 0 10px rgba(13, 158, 110, 0.4);
  transform: scale(1.2);
}

/* ==============================
   FAQ SECTION
   ============================== */
.faq-section {
  position: relative;
  z-index: 1;
  background: var(--bg-section);
}

.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  font-weight: 600;
  color: var(--text-heading);
  font-size: 0.95rem;
  gap: 12px;
}

.faq-question .icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--primary-light);
  font-size: 1.1rem;
  transition: var(--transition);
  flex-shrink: 0;
}

.faq-item.open .faq-question .icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.open .faq-answer {
  max-height: 400px;
  padding: 0 24px 20px;
}

.faq-answer p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ==============================
   FOOTER
   ============================== */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-top {
  padding: 50px 0 30px;
}

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

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-contact-item .icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(13, 158, 110, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-contact-item .icon-box img {
  width: 22px;
}

.footer-contact-item span {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.footer-middle {
  padding: 40px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-middle h4 {
  color: var(--text-heading);
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.footer-middle p {
  color: var(--text-muted);
  font-size: 0.88rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}

.footer-bottom {
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}

.footer-bottom p {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.footer-bottom a {
  color: var(--primary-light);
}

.footer-bottom a:hover {
  color: var(--accent);
}

/* ==============================
   WHATSAPP FLOAT
   ============================== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: var(--transition);
  animation: bounce-wa 2s ease infinite;
}

.whatsapp-float::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.6);
  animation: ringPulse 2s ease-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6), 0 0 20px rgba(37, 211, 102, 0.3);
  color: #fff;
}

@keyframes bounce-wa {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* ==============================
   DMCA
   ============================== */
.dmca-section {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 998;
  opacity: 0.7;
  transition: var(--transition);
}

.dmca-section:hover {
  opacity: 1;
}

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

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

  .hero-content h1 {
    font-size: 2.2rem;
  }

  .hero-form-card {
    max-width: 540px;
    margin: 0 auto;
  }

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

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

  .courses-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-contacts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  .section-padding {
    padding: 60px 0;
  }

  .hero {
    padding: 100px 0 40px;
  }

  .hero-content h1 {
    font-size: 1.9rem;
  }

  .section-title h2 {
    font-size: 1.7rem;
  }

  .courses-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 40px auto 0;
  }

  .features-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .features-grid .feature-card:last-child:nth-child(4n + 1) {
    grid-column: auto;
  }

  /* ---- Mobile scroll performance fix ---- */
  /* Disable heavy background effects that cause jank on mobile */
  .bg-orbs,
  .islamic-symbols,
  .mosque-silhouette {
    display: none !important;
  }

  .islamic-pattern,
  .islamic-pattern-2 {
    animation: none !important;
    opacity: 0.03;
  }

  .bg-ambient {
    animation: none !important;
  }

  .pillar-content-card.active {
    flex-direction: column;
    text-align: center;
  }

  .pillar-content-card .pillar-img {
    width: 140px;
    height: 140px;
  }

  .pillar-tabs {
    gap: 10px;
  }

  .pillar-tab {
    width: 52px;
    height: 52px;
    padding: 10px;
  }

  .about-card {
    padding: 28px 22px;
  }

  .about-card h2 {
    font-size: 1.5rem;
  }

  .hero-form-card {
    padding: 28px 22px;
  }

  .quote-card {
    padding: 28px 20px;
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 1.6rem;
  }

  .navbar-logo img {
    height: 38px;
  }

  .navbar-cta {
    padding: 8px 16px;
    font-size: 0.82rem;
  }
}

/* ---------- Form Note ---------- */
.form-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.85;
}

/* ---------- Button Animation Keyframes ---------- */
@keyframes btnShimmer {
  0% {
    left: -100%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes btnPulseGlow {

  0%,
  100% {
    box-shadow: 0 4px 15px rgba(13, 158, 110, 0.2);
  }

  50% {
    box-shadow: 0 4px 25px rgba(13, 158, 110, 0.45), 0 0 15px rgba(13, 158, 110, 0.15);
  }
}

@keyframes btnPulseGold {

  0%,
  100% {
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
  }

  50% {
    box-shadow: 0 4px 22px rgba(212, 175, 55, 0.5), 0 0 12px rgba(212, 175, 55, 0.15);
  }
}

@keyframes ringPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ========== Intl-Tel-Input Dark Theme ========== */
.iti__country-list {
  background: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
  max-height: 220px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Custom scrollbar for country list */
.iti__country-list::-webkit-scrollbar {
  width: 6px;
}

.iti__country-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.iti__country-list::-webkit-scrollbar-thumb {
  background: rgba(13, 158, 110, 0.4);
  border-radius: 3px;
}

.iti__country-list::-webkit-scrollbar-thumb:hover {
  background: rgba(13, 158, 110, 0.6);
}

.iti__country-list .iti__country {
  padding: 8px 12px !important;
}

.iti__country-name {
  color: #f0f0f0 !important;
  font-weight: 500 !important;
}

.iti__dial-code {
  color: var(--primary-light, #11c98d) !important;
  font-weight: 600 !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
  background: rgba(13, 158, 110, 0.25) !important;
}

.iti__selected-flag {
  background: transparent !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
  background: rgba(255, 255, 255, 0.06) !important;
}

.iti__selected-dial-code {
  color: #e8edf5 !important;
  font-weight: 500;
}

.iti__search-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  margin: 6px !important;
}

.iti__search-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.iti__divider {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ==============================
   REDUCED MOTION (performance + accessibility)
   ============================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .bg-orbs,
  .islamic-symbols,
  .islamic-pattern,
  .islamic-pattern-2,
  .mosque-silhouette {
    display: none;
  }

  html {
    scroll-behavior: auto;
  }
}