:root {

  /* =========================================================
     CORE BRAND PALETTE
     Modern Islamic • Luxury • AI/Education Identity
  ========================================================== */

  /* Base */
  --color-white: #FFFFFF;
  --color-ivory: #F7F5F1;
  --color-soft-bg: #EEE8DF;
  --color-stone: #DAD1C2;

  /* =========================================================
     PRIMARY TEAL SYSTEM
  ========================================================== */

  --color-primary: #1A939E;
  --color-primary-700: #116D76;
  --color-primary-900: #0A4F56;

  --color-primary-light: #4FB8C0;
  --color-primary-soft: #CDEBED;

  --color-primary-hover: #116D76;
  --color-primary-active: #0A4F56;

  /* =========================================================
     HERITAGE GOLD SYSTEM
  ========================================================== */

  --color-gold: #BAA213;
  --color-gold-700: #8F7B0D;
  --color-gold-900: #6F5D08;

  --color-gold-light: #D7C14D;
  --color-gold-soft: #F3E9B2;

  --color-gold-hover: #8F7B0D;

  /* =========================================================
     ACCENT COLORS
  ========================================================== */

  --color-emerald: #1F7A6C;
  --color-sand: #C8A97E;
  --color-copper: #A66B3D;
  --color-navy: #17324D;

  /* =========================================================
     TEXT COLORS
  ========================================================== */

  --color-heading: #1E1E1E;
  --color-text: #2A2A2A;
  --color-muted: #8B857B;

  --color-text-light: #F7F5F1;
  --color-text-inverse: #FFFFFF;

  /* =========================================================
     DARK MODE / LUXURY BACKGROUNDS
  ========================================================== */

  --color-charcoal: #1E1E1E;
  --color-black: #0D0D0D;

  --color-dark-surface: #111827;
  --color-dark-card: #17324D;

  /* =========================================================
     UI STATES
  ========================================================== */

  --color-success: #1F7A6C;
  --color-warning: #BAA213;
  --color-info: #1A939E;

  /* =========================================================
     GRADIENTS
  ========================================================== */

  --gradient-primary:
    linear-gradient(
      135deg,
      #116D76,
      #1A939E,
      #4FB8C0
    );

  --gradient-gold:
    linear-gradient(
      135deg,
      #8F7B0D,
      #BAA213,
      #D7C14D
    );

  --gradient-dark:
    linear-gradient(
      135deg,
      #0D0D0D,
      #17324D
    );

  --gradient-premium:
    linear-gradient(
      135deg,
      #0A4F56,
      #1A939E,
      #BAA213
    );

  /* =========================================================
     BORDERS
  ========================================================== */

  --border-light: 1px solid #EEE8DF;
  --border-soft: 1px solid #DAD1C2;
  --border-gold: 1px solid #BAA213;

  /* =========================================================
     SHADOWS
  ========================================================== */

  --shadow-soft:
    0 12px 30px rgba(0, 0, 0, 0.08);

  --shadow-primary:
    0 10px 25px rgba(26, 147, 158, 0.18);

  --shadow-gold:
    0 10px 25px rgba(186, 162, 19, 0.18);

  --shadow-dark:
    0 12px 35px rgba(0, 0, 0, 0.25);

  /* =========================================================
     RADIUS
  ========================================================== */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* =========================================================
     TRANSITIONS
  ========================================================== */

  --transition-fast: 0.2s ease;
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* =========================================================
     LAYOUT
  ========================================================== */

  --navbar-height: 80px;
  --container-width: 1280px;

}

/* =========================================================
   2. RESET
========================================================= */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;

  /* Better text rendering */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Tajawal", sans-serif;
  direction: rtl;

  background: var(--color-ivory);
  color: var(--color-text);

  line-height: 1.8;
  font-size: 16px;
  font-weight: 400;

  overflow-x: hidden;

  /* Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Prevent layout jump for fixed navbar */
  padding-top: var(--navbar-height);

  /* Smooth transition */
  transition:
    background var(--transition),
    color var(--transition);
}

/* =========================================================
   SELECTION
========================================================= */

::selection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

::-moz-selection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-soft-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 999px;
  border: 2px solid var(--color-soft-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-700);
}

/* =========================================================
   MEDIA ELEMENTS
========================================================= */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* =========================================================
   FORM ELEMENTS
========================================================= */

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

button {
  cursor: pointer;
  background: none;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition-fast),
    box-shadow var(--transition);
}

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

/* =========================================================
   LINKS
========================================================= */

a {
  text-decoration: none;
  color: inherit;

  transition:
    color var(--transition),
    opacity var(--transition);
}

a:hover {
  color: var(--color-primary);
}

/* =========================================================
   LISTS
========================================================= */

ul,
ol {
  list-style: none;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */


p {
  color: var(--color-text);
}

small {
  color: var(--color-muted);
}

/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.container {
  width: 100%;
  max-width: var(--container-width);

  margin-inline: auto;

  padding-inline: 24px;
}

/* =========================================================
   GLOBAL SECTION SPACING
========================================================= */

section {
  position: relative;
  padding-block: 100px;
}

/* =========================================================
   FOCUS STATES
========================================================= */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* =========================================================
   UTILITY
========================================================= */

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

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

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

.bg-dark {
  background: var(--color-black);
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-gold {
  background: var(--gradient-gold);
}

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-primary {
  box-shadow: var(--shadow-primary);
}

.shadow-gold {
  box-shadow: var(--shadow-gold);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

/* =========================================================
   3. NAVBAR — ALWAYS FIXED (NO HIDE/SHOW)
========================================================= */

.navbar-wrapper {
  position: fixed;
  top: 0;
  right: 0;

  width: 100%;
  height: 134px;

  background: rgba(247, 245, 241, 0.92);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(186, 162, 19, 0.12);

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.05),
    0 2px 10px rgba(26, 147, 158, 0.04);

  z-index: 1000;

  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

/* =========================================================
   NAVBAR LAYOUT
========================================================= */

.navbar {
  max-width: 1200px;
  height: 100%;

  margin: 0 auto;
  padding: 0 1.5rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  position: relative;
}

/* =========================================================
   LOGO
========================================================= */

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  font-size: 1.3rem;
  font-weight: 800;

  color: var(--color-heading);

  text-decoration: none;

  transition:
    color var(--transition),
    transform var(--transition-fast);
}

.navbar__logo:hover {
  color: var(--color-primary);
  transform: translateY(-1px);
}



.navbar__logo img {
  height: 72px;
  width: auto;

  object-fit: contain;
}

.navbar__logo-img.alfawz-logo {
    height: 115px;
}

.navbar__logo-img.alhasan-logo {
    height: 95px;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.navbar__links {
  list-style: none;

  display: flex;
  align-items: center;

  gap: 1.4rem;
}

.navbar__links li {
  position: relative;
}

.navbar__links a {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.55rem 0.2rem;

  text-decoration: none;

  font-size: 0.96rem;
  letter-spacing: 0.2px;

  color: var(--color-text);

  transition:
    color var(--transition),
    opacity var(--transition),
    transform var(--transition-fast);
}

.navbar__links a:hover {
  color: var(--color-primary);
  transform: translateY(-1px);
}

/* =========================================================
   OPTIONAL ACTIVE STATE
========================================================= */

.navbar__links a.active {
  color: var(--color-primary);
  position: relative;
}

.navbar__links a.active::after {
  content: "";

  position: absolute;

  bottom: -8px;
  right: 0;

  width: 100%;
  height: 3px;

  background: var(--gradient-primary);

  border-radius: 999px;

  box-shadow: 0 4px 10px rgba(26, 147, 158, 0.25);
}

/* =========================================================
   HOVER UNDERLINE EFFECT
========================================================= */

.navbar__links a::before {
  content: "";

  position: absolute;

  bottom: -8px;
  right: 50%;

  width: 0;
  height: 2px;

  background: var(--color-gold);

  border-radius: 999px;

  transform: translateX(50%);

  transition:
    width var(--transition),
    background var(--transition);
}

.navbar__links a:hover::before {
  width: 100%;
}

/* =========================================================
   ACTIONS
========================================================= */

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* =========================================================
   NAVBAR BUTTONS
========================================================= */

.navbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;

  padding: 0.8rem 1.4rem;

  border-radius: var(--radius-lg);

  font-size: 0.92rem;

  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition-fast),
    box-shadow var(--transition);
}

/* Primary Button */

.navbar__btn--primary {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);

  box-shadow: var(--shadow-primary);
}

.navbar__btn--primary:hover {
  transform: translateY(-2px);

  box-shadow:
    0 14px 28px rgba(26, 147, 158, 0.25);
}

/* Secondary Button */

.navbar__btn--secondary {
  background: transparent;

  color: var(--color-gold);

  border: 1px solid rgba(186, 162, 19, 0.4);
}

.navbar__btn--secondary:hover {
  background: var(--color-gold);
  color: var(--color-black);

  border-color: var(--color-gold);

  transform: translateY(-2px);

  box-shadow: var(--shadow-gold);
}

/* =========================================================
   MOBILE TOGGLE
========================================================= */

.navbar__toggle {
  display: none;

  width: 46px;
  height: 46px;

  align-items: center;
  justify-content: center;

  border-radius: var(--radius-md);

  background: rgba(26, 147, 158, 0.08);

  color: var(--color-primary);

  transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition-fast);
}

.navbar__toggle:hover {
  background: rgba(26, 147, 158, 0.14);
  transform: scale(1.03);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

  .navbar-wrapper {
    height: 110px;
  }

  .navbar {
    padding-inline: 1rem;
  }

  .navbar__links {
    gap: 1rem;
  }

}

@media (max-width: 768px) {

  .navbar-wrapper {
    height: 96px;
  }

  .navbar {
    padding-inline: 1rem;
  }

  .navbar__links {
    display: none;
  }

  .navbar__actions {
    gap: 0.5rem;
  }

  .navbar__btn {
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
  }

  .navbar__toggle {
    display: inline-flex;
  }

  .navbar__logo img {
    height: 58px;
  }

}

@media (max-width: 480px) {

  .navbar-wrapper {
    height: 88px;
  }

  .navbar__btn--secondary {
    display: none;
  }

  .navbar__logo {
    font-size: 1.05rem;
  }

  .navbar__logo img {
    height: 50px;
  }

}

/* =========================================
   NAVBAR BRAND / LOGO
========================================= */

.navbar__brand {
  display: flex;
  align-items: center;

  position: relative;
}

/* =========================================
   LOGO LINK
========================================= */

.navbar__logo {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 0.85rem;

  text-decoration: none;

  position: relative;

  transition:
    transform var(--transition-fast),
    opacity var(--transition);
}

/* =========================================
   LOGO IMAGE
========================================= */

.navbar__logo-img {

  height: 100px;
  width: 100px;

  object-fit: contain;

  filter:
    drop-shadow(0 6px 18px rgba(26, 147, 158, 0.12));

  transition:
    transform var(--transition),
    filter var(--transition),
    opacity var(--transition);

}

/* =========================================
   SUBTLE HOVER EFFECT
========================================= */

.navbar__logo:hover .navbar__logo-img {

  transform:
    scale(1.05)
    translateY(-1px);

  filter:
    drop-shadow(0 10px 22px rgba(26, 147, 158, 0.18));

}

/* =========================================
   OPTIONAL LOGO TEXT
========================================= */

.navbar__logo-text {

  display: flex;
  flex-direction: column;

  line-height: 1.1;

}

.navbar__logo-title {

  font-size: 1.2rem;
  font-weight: 800;

  color: var(--color-heading);

  transition:
    color var(--transition);

}

.navbar__logo-subtitle {

  font-size: 0.82rem;
  font-weight: 600;

  color: var(--color-muted);

  margin-top: 0.2rem;

  transition:
    color var(--transition);

}

/* =========================================
   LOGO HOVER TEXT EFFECT
========================================= */

.navbar__logo:hover .navbar__logo-title {
  color: var(--color-primary);
}

.navbar__logo:hover .navbar__logo-subtitle {
  color: var(--color-gold);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 992px) {

  .navbar__logo-img {
    height: 84px;
    width: 84px;
  }

}

@media (max-width: 768px) {

  .navbar__logo-img {
    height: 68px;
    width: 68px;
  }

  .navbar__logo-title {
    font-size: 1rem;
  }

  .navbar__logo-subtitle {
    font-size: 0.74rem;
  }

}

@media (max-width: 480px) {

  .navbar__logo-img {
    height: 58px;
    width: 58px;
  }

  .navbar__logo-subtitle {
    display: none;
  }

}


/* =========================================================
   4. BUTTONS
========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;

  padding: 0.78rem 1.35rem;

  min-height: 48px;

  border: none;
  border-radius: var(--radius-md);

  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;

  cursor: pointer;
  user-select: none;

  position: relative;
  overflow: hidden;

  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition-fast),
    box-shadow var(--transition),
    opacity var(--transition);
}

/* =========================================================
   GLOBAL BUTTON HOVER
========================================================= */

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================
   GHOST BUTTON
========================================================= */

.btn--ghost {
  background: transparent;

  color: var(--color-text);

  border: 1px solid transparent;
}

.btn--ghost:hover {
  color: var(--color-primary);

  background: rgba(26, 147, 158, 0.06);
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.btn--primary {
  background: var(--gradient-primary);

  color: var(--color-text-inverse);

  box-shadow: var(--shadow-primary);
}

.btn--primary:hover {
  background: var(--gradient-primary);

  color: var(--color-text-inverse);

  box-shadow:
    0 16px 32px rgba(26, 147, 158, 0.24);
}

.btn--primary:focus-visible {
  outline-color: var(--color-primary-light);
}

/* =========================================================
   OUTLINE BUTTON
========================================================= */

.btn--outline {
  border: 1px solid rgba(26, 147, 158, 0.35);

  color: var(--color-primary);

  background: transparent;
}

.btn--outline:hover {
  background: var(--color-primary);

  color: var(--color-text-inverse);

  border-color: var(--color-primary);

  box-shadow: var(--shadow-primary);
}

/* =========================================================
   GOLD BUTTON
========================================================= */

.btn--gold {
  background: var(--gradient-gold);

  color: var(--color-black);

  box-shadow: var(--shadow-gold);
}

.btn--gold:hover {
  color: var(--color-black);

  box-shadow:
    0 16px 32px rgba(186, 162, 19, 0.24);
}

/* =========================================================
   DARK BUTTON
========================================================= */

.btn--dark {
  background: var(--gradient-dark);

  color: var(--color-text-light);

  border: 1px solid rgba(186, 162, 19, 0.18);

  box-shadow: var(--shadow-dark);
}

.btn--dark:hover {
  border-color: rgba(186, 162, 19, 0.4);

  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.32);
}

/* =========================================================
   LIGHT BUTTON
========================================================= */

.btn--light {
  background: var(--color-white);

  color: var(--color-heading);

  border: 1px solid var(--color-soft-bg);

  box-shadow: var(--shadow-soft);
}

.btn--light:hover {
  background: var(--color-ivory);

  border-color: var(--color-stone);
}

/* =========================================================
   ICON BUTTON
========================================================= */

.btn--icon {
  width: 48px;
  height: 48px;

  padding: 0;

  border-radius: 50%;
}

/* =========================================================
   BUTTON SIZES
========================================================= */

.btn--sm {
  min-height: 40px;

  padding: 0.6rem 1rem;

  font-size: 0.84rem;
}

.btn--lg {
  min-height: 56px;

  padding: 1rem 1.8rem;

  font-size: 1rem;
}

/* =========================================================
   FULL WIDTH BUTTON
========================================================= */

.btn--block {
  width: 100%;
}

/* =========================================================
   SHINE EFFECT
========================================================= */

.btn::before {
  content: "";

  position: absolute;

  top: 0;
  right: -120%;

  width: 100%;
  height: 100%;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent
    );

  transition: right 0.7s ease;
}

.btn:hover::before {
  right: 120%;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

  .btn {
    min-height: 44px;

    padding: 0.72rem 1.15rem;

    font-size: 0.88rem;
  }

  .btn--lg {
    min-height: 52px;

    padding: 0.95rem 1.5rem;
  }

}

@media (max-width: 480px) {

  .btn {
    width: auto;
  }

  .btn--block-mobile {
    width: 100%;
  }

}

/* =========================================================
   5. HERO SECTION
========================================================= */

.hero {
  position: relative;

  min-height: calc(100vh - var(--navbar-height));

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding-block: 120px 90px;

  background:
    radial-gradient(
      circle at top right,
      rgba(26, 147, 158, 0.10),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(186, 162, 19, 0.08),
      transparent 35%
    ),
    var(--color-ivory);

  isolation: isolate;
}

/* =========================================================
   HERO BACKGROUND DECORATION
========================================================= */

.hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -120px;

  width: 420px;
  height: 420px;

  background:
    radial-gradient(
      circle,
      rgba(26, 147, 158, 0.14),
      transparent 70%
    );

  border-radius: 50%;

  z-index: -1;

  pointer-events: none;
}

.hero::after {
  content: "";

  position: absolute;

  bottom: -160px;
  left: -120px;

  width: 460px;
  height: 460px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.12),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;

  pointer-events: none;
}

/* =========================================================
   HERO CONTAINER
========================================================= */

.hero__container {
  width: 100%;
  max-width: 1280px;

  margin-inline: auto;

  padding-inline: 24px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  align-items: center;
  gap: 4rem;

  position: relative;
  z-index: 2;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 1.5rem;
}

/* =========================================================
   HERO BADGE
========================================================= */

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  padding: 0.65rem 1rem;

  border-radius: 999px;

  background: rgba(26, 147, 158, 0.08);

  border: 1px solid rgba(26, 147, 158, 0.14);

  color: var(--color-primary);

  font-size: 0.88rem;
  font-weight: 700;

  backdrop-filter: blur(8px);
}

/* =========================================================
   HERO TITLE
========================================================= */

.hero__title {
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 1.15;

  color: var(--color-heading);

  letter-spacing: -1px;
}

.hero__title span {
  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
}

/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero__description {
  max-width: 640px;

  font-size: 1.08rem;
  line-height: 2;

  color: var(--color-muted);
}

/* =========================================================
   HERO ACTIONS
========================================================= */

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 0.5rem;
}

/* =========================================================
   HERO STATS
========================================================= */

.hero__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 2rem;

  margin-top: 1.5rem;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hero__stat-number {
  font-size: 1.8rem;
  font-weight: 900;

  color: var(--color-primary);
}

.hero__stat-label {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* =========================================================
   HERO VISUAL
========================================================= */

.hero__visual {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   HERO IMAGE
========================================================= */

.hero__image {
  width: 100%;
  max-width: 560px;

  border-radius: var(--radius-xl);

  overflow: hidden;

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.12),
    0 10px 28px rgba(26, 147, 158, 0.12);

  position: relative;
}

.hero__image img {
  width: 100%;
  height: auto;

  object-fit: cover;

  display: block;
}

/* =========================================================
   FLOATING CARD
========================================================= */

.hero__card {
  position: absolute;

  bottom: 30px;
  left: -40px;

  padding: 1rem 1.2rem;

  border-radius: var(--radius-lg);

  background: rgba(255, 255, 255, 0.88);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(186, 162, 19, 0.16);

  box-shadow: var(--shadow-soft);

  min-width: 220px;
}

.hero__card-title {
  font-size: 0.95rem;
  font-weight: 800;

  color: var(--color-heading);

  margin-bottom: 0.35rem;
}

.hero__card-text {
  font-size: 0.88rem;
  line-height: 1.7;

  color: var(--color-muted);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .hero__container {
    gap: 3rem;
  }

  .hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
  }

}

@media (max-width: 992px) {

  .hero {
    padding-block: 100px 80px;
  }

  .hero__container {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .hero__content {
    align-items: center;
  }

  .hero__description {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__stats {
    justify-content: center;
  }

  .hero__card {
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
  }

}

@media (max-width: 768px) {

  .hero {
    min-height: auto;

    padding-block: 80px 70px;
  }

  .hero__container {
    gap: 2.5rem;
  }

  .hero__title {
    font-size: 2.5rem;
  }

  .hero__description {
    font-size: 1rem;
  }

  .hero__stats {
    gap: 1.5rem;
  }

}

@media (max-width: 480px) {

  .hero {
    padding-block: 70px 60px;
  }

  .hero__title {
    font-size: 2rem;
  }

  .hero__badge {
    font-size: 0.8rem;
  }

  .hero__description {
    font-size: 0.96rem;
    line-height: 1.9;
  }

  .hero__actions {
    width: 100%;
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__card {
    position: relative;

    left: auto;
    bottom: auto;

    transform: none;

    margin-top: 1.5rem;

    width: 100%;
  }

}

/* =========================================================
   6. HERO CAROUSEL BACKGROUND
========================================================= */

.hero__carousel {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  z-index: 0;
}

/* =========================================================
   HERO SLIDES WRAPPER
========================================================= */

.hero__slides {
  position: relative;

  width: 100%;
  height: 100%;
}

/* =========================================================
   SINGLE HERO SLIDE
========================================================= */

.hero__slide {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  opacity: 0;

  transition:
    opacity 1.2s ease-in-out,
    transform 8s ease;

  /* Enhanced cinematic clarity */
  filter:
    contrast(108%)
    brightness(102%)
    saturate(108%);

  transform: scale(1.02);

  will-change: opacity, transform;
}

/* =========================================================
   ACTIVE SLIDE
========================================================= */

.hero__slide.active {
  opacity: 1;

  transform: scale(1.08);

  z-index: 1;
}

/* =========================================================
   HERO OVERLAY
========================================================= */

.hero__overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  background:

    /* Main readability layer */
    linear-gradient(
      to left,
      rgba(247, 245, 241, 0.82),
      rgba(247, 245, 241, 0.52),
      rgba(247, 245, 241, 0.28)
    ),

    /* Elegant dark cinematic fade */
    linear-gradient(
      to top,
      rgba(13, 13, 13, 0.20),
      transparent 45%
    ),

    /* Teal atmosphere */
    radial-gradient(
      circle at top right,
      rgba(26, 147, 158, 0.12),
      transparent 32%
    ),

    /* Gold atmosphere */
    radial-gradient(
      circle at bottom left,
      rgba(186, 162, 19, 0.10),
      transparent 30%
    );
}

/* =========================================================
   OPTIONAL DARK HERO VARIANT
========================================================= */

.hero--dark .hero__overlay {

  background:

    linear-gradient(
      to left,
      rgba(13, 13, 13, 0.78),
      rgba(13, 13, 13, 0.54),
      rgba(13, 13, 13, 0.32)
    ),

    linear-gradient(
      to top,
      rgba(23, 50, 77, 0.38),
      transparent 55%
    ),

    radial-gradient(
      circle at top right,
      rgba(26, 147, 158, 0.16),
      transparent 34%
    ),

    radial-gradient(
      circle at bottom left,
      rgba(186, 162, 19, 0.14),
      transparent 34%
    );
}

/* =========================================================
   DARK HERO TEXT SUPPORT
========================================================= */

.hero--dark .hero__title,
.hero--dark .hero__description,
.hero--dark .hero__stat-label,
.hero--dark .hero__card-title,
.hero--dark .hero__card-text {
  color: var(--color-text-light);
}

.hero--dark .hero__badge {
  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.12);

  color: var(--color-text-light);
}

/* =========================================================
   HERO IMAGE ANIMATION
========================================================= */

@keyframes heroZoom {

  0% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1.08);
  }

}

.hero__slide.active {
  animation: heroZoom 8s ease forwards;
}

/* =========================================================
   SLIDE TRANSITION HELPERS
========================================================= */

.hero__slide--left {
  object-position: left center;
}

.hero__slide--center {
  object-position: center;
}

.hero__slide--right {
  object-position: right center;
}

/* =========================================================
   PERFORMANCE OPTIMIZATION
========================================================= */

.hero__slide,
.hero__overlay {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

  .hero__overlay {

    background:

      linear-gradient(
        to top,
        rgba(247, 245, 241, 0.88),
        rgba(247, 245, 241, 0.62),
        rgba(247, 245, 241, 0.34)
      ),

      linear-gradient(
        to top,
        rgba(13, 13, 13, 0.14),
        transparent 42%
      );

  }

}

@media (max-width: 768px) {

  .hero__slide {
    filter:
      contrast(106%)
      brightness(100%)
      saturate(104%);
  }

  .hero__overlay {

    background:

      linear-gradient(
        to top,
        rgba(247, 245, 241, 0.92),
        rgba(247, 245, 241, 0.70),
        rgba(247, 245, 241, 0.40)
      ),

      linear-gradient(
        to top,
        rgba(13, 13, 13, 0.12),
        transparent 40%
      );

  }

}

@media (max-width: 480px) {

  .hero__overlay {

    background:

      linear-gradient(
        to top,
        rgba(247, 245, 241, 0.95),
        rgba(247, 245, 241, 0.78),
        rgba(247, 245, 241, 0.52)
      );

  }

}
/* =========================================================
   7. HERO CONTENT
========================================================= */

.hero__container {
  position: relative;
  z-index: 3;

  width: 100%;
  max-width: 1200px;

  margin-inline: auto;
  margin-block: auto;

  padding: 2rem 1.5rem;

  display: grid;
  grid-template-columns: 1fr;

  justify-content: center;
  align-items: center;

  gap: 1.75rem;

  text-align: center;
}

/* =========================================================
   HERO CONTENT WRAPPER
========================================================= */

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 1.4rem;

  position: relative;
}

/* =========================================================
   HERO BADGE
========================================================= */

.hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;

  padding: 0.72rem 1.1rem;

  border-radius: 999px;

  background: rgba(26, 147, 158, 0.08);

  border: 1px solid rgba(26, 147, 158, 0.14);

  color: var(--color-primary);

  font-size: 0.88rem;
  font-weight: 700;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 8px 20px rgba(26, 147, 158, 0.08);
}

/* =========================================================
   HERO TITLE
========================================================= */

.hero__title {
  font-size: clamp(2.2rem, 5vw, 4.4rem);

  font-weight: 900;
  line-height: 1.15;

  letter-spacing: -1px;

  color: var(--color-heading);

  max-width: 14ch;

  margin-inline: auto;

  text-wrap: balance;
}

/* Gradient Highlight */

.hero__title span {

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

}

/* =========================================================
   HERO SUBTITLE
========================================================= */

.hero__subtitle {
  font-size: 1.08rem;
  line-height: 2;

  max-width: 52ch;

  color: var(--color-muted);

  margin-inline: auto;

  text-wrap: pretty;
}

/* =========================================================
   HERO CTA
========================================================= */

.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 0.9rem;

  margin-top: 0.4rem;
}

/* =========================================================
   HERO CTA BUTTON IMPROVEMENTS
========================================================= */

.hero__cta .btn {
  min-width: 170px;
}

/* =========================================================
   HERO STATS
========================================================= */

.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 2rem;

  margin-top: 1rem;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.3rem;
}

.hero__stat-number {
  font-size: 1.7rem;
  font-weight: 900;

  color: var(--color-primary);
}

.hero__stat-label {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* =========================================================
   HERO GLASS PANEL
========================================================= */

.hero__glass {
  position: relative;

  padding: 2rem;

  border-radius: var(--radius-xl);

  background: rgba(255, 255, 255, 0.55);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255, 255, 255, 0.24);

  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.08),
    0 10px 30px rgba(26, 147, 158, 0.06);
}

/* =========================================================
   HERO DARK VARIANT
========================================================= */

.hero--dark .hero__title,
.hero--dark .hero__subtitle,
.hero--dark .hero__stat-label {
  color: var(--color-text-light);
}

.hero--dark .hero__glass {

  background: rgba(13, 13, 13, 0.34);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.24);

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

  .hero__container {
    max-width: 900px;
  }

  .hero__title {
    max-width: 16ch;
  }

  .hero__subtitle {
    max-width: 48ch;
  }

}

@media (max-width: 768px) {

  .hero__container {
    padding: 1.5rem 1.2rem;

    gap: 1.5rem;
  }

  .hero__title {
    font-size: clamp(2rem, 8vw, 3.1rem);

    max-width: 100%;
  }

  .hero__subtitle {
    font-size: 1rem;

    line-height: 1.9;
  }

  .hero__cta {
    width: 100%;
  }

  .hero__cta .btn {
    min-width: 150px;
  }

  .hero__glass {
    padding: 1.5rem;
  }

}

@media (max-width: 480px) {

  .hero__container {
    padding-inline: 1rem;
  }

  .hero__title {
    font-size: 1.9rem;

    line-height: 1.2;
  }

  .hero__subtitle {
    font-size: 0.96rem;

    max-width: 100%;
  }

  .hero__cta {
    flex-direction: column;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .hero__stats {
    gap: 1.25rem;
  }

  .hero__stat-number {
    font-size: 1.45rem;
  }

  .hero__glass {
    padding: 1.25rem;
  }

}
/* =========================================================
   8. HERO STATS
========================================================= */

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.2rem;

  width: 100%;

  margin-top: 1.5rem;
}

/* =========================================================
   SINGLE STAT CARD
========================================================= */

.stat {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 1.35rem 1rem;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92),
      rgba(247, 245, 241, 0.96)
    );

  border: 1px solid rgba(186, 162, 19, 0.10);

  border-radius: var(--radius-lg);

  overflow: hidden;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.06),
    0 4px 14px rgba(26, 147, 158, 0.05);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background var(--transition);
}

/* =========================================================
   TOP ACCENT LINE
========================================================= */

.stat::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 4px;

  background: var(--gradient-primary);

  opacity: 0.95;
}

/* =========================================================
   GOLD GLOW EFFECT
========================================================= */

.stat::after {
  content: "";

  position: absolute;

  inset: auto auto -80px -80px;

  width: 160px;
  height: 160px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.10),
      transparent 70%
    );

  pointer-events: none;
}

/* ========================================================= 
    
    ADVERTISEMENT section 

*/

/* =========================================================
   LICENSE SECTION
========================================================= */

.license-section {

  padding: 100px 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.4),
      rgba(247,245,241,1)
    );

  position: relative;

  overflow: hidden;
}

/* Decorative Glow */

.license-section::before {

  content: "";

  position: absolute;

  top: -150px;
  right: -150px;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(26,147,158,0.08),
      transparent 70%
    );

}

.license-section::after {

  content: "";

  position: absolute;

  bottom: -150px;
  left: -150px;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(186,162,19,0.08),
      transparent 70%
    );

}

.license-header {

  text-align: center;

  max-width: 850px;

  margin: 0 auto 4rem;
}

.license-badge {

  display: inline-flex;

  align-items: center;

  padding: .7rem 1.2rem;

  border-radius: 999px;

  background:
    rgba(26,147,158,0.08);

  border:
    1px solid rgba(26,147,158,0.15);

  color:
    var(--color-primary);

  font-weight: 700;

  margin-bottom: 1rem;
}

.license-description {

  max-width: 700px;

  margin: auto;

  color: var(--color-muted);

  line-height: 2;
}

.license-card {

  display: grid;

  grid-template-columns: 1.4fr .8fr;

  gap: 2rem;

  align-items: center;

  background:
    rgba(255,255,255,0.7);

  backdrop-filter: blur(14px);

  border-radius: var(--radius-xl);

  padding: 2rem;

  border:
    1px solid rgba(186,162,19,0.12);

  box-shadow:
    0 20px 50px rgba(0,0,0,.08);
}

.license-image-wrapper {

  overflow: hidden;

  border-radius: var(--radius-xl);

  background: white;

  box-shadow:
    0 12px 30px rgba(0,0,0,.08);
}

.license-image {

  display: block;

  width: 100%;

  height: auto;
}

.license-info {

  display: flex;

  flex-direction: column;

  gap: 1rem;
}

.license-item {

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.95),
      rgba(247,245,241,.95)
    );

  border-radius: var(--radius-lg);

  padding: 1rem 1.25rem;

  border:
    1px solid rgba(186,162,19,0.08);
}

.license-label {

  display: block;

  color: var(--color-muted);

  font-size: .9rem;

  margin-bottom: .4rem;
}

.license-item strong {

  color: var(--color-heading);

  font-size: 1rem;
}

.license-status {

  color: var(--color-success);

  font-weight: 800;
}

@media (max-width: 992px) {

  .license-card {

    grid-template-columns: 1fr;
  }

}

@media (max-width: 768px) {

  .license-section {

    padding: 80px 0;
  }

}

@media (max-width: 480px) {

  .license-card {

    padding: 1.25rem;
  }

}

/* ======================================================== */

.tracks-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:2rem;
}

.track-card{
    background:white;
    border-radius:var(--radius-xl);
    padding:2rem;
    border:1px solid rgba(186,162,19,.15);
    box-shadow:var(--shadow-md);
    transition:.35s ease;
}

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

/* =========================================================
   HOVER EFFECT
========================================================= */

.stat:hover {
  transform:
    translateY(-6px);

  border-color: rgba(26, 147, 158, 0.18);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(247, 245, 241, 1)
    );

  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.10),
    0 10px 24px rgba(26, 147, 158, 0.10);
}

/* =========================================================
   STAT VALUE
========================================================= */

.stat__value {
  position: relative;
  z-index: 2;

  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 900;

  line-height: 1;

  letter-spacing: -1px;

  margin-bottom: 0.45rem;

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
}

/* =========================================================
   STAT LABEL
========================================================= */

.stat__label {
  position: relative;
  z-index: 2;

  font-size: 0.92rem;
  font-weight: 600;

  line-height: 1.7;

  color: var(--color-muted);
}

/* =========================================================
   OPTIONAL ICON
========================================================= */

.stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  margin-bottom: 0.9rem;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      rgba(26, 147, 158, 0.12),
      rgba(186, 162, 19, 0.12)
    );

  color: var(--color-primary);

  font-size: 1.2rem;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.3);
}

/* =========================================================
   DARK HERO VARIANT
========================================================= */

.hero--dark .stat {

  background:
    linear-gradient(
      180deg,
      rgba(17, 24, 39, 0.82),
      rgba(13, 13, 13, 0.88)
    );

  border-color: rgba(255, 255, 255, 0.06);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28);

}

.hero--dark .stat:hover {

  border-color: rgba(26, 147, 158, 0.22);

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.34);

}

.hero--dark .stat__label {
  color: rgba(247, 245, 241, 0.78);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

  .hero__stats {
    gap: 1rem;
  }

  .stat {
    padding: 1.2rem 0.95rem;
  }

}

@media (max-width: 768px) {

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

    gap: 1rem;
  }

  .stat__value {
    font-size: 1.9rem;
  }

}

@media (max-width: 480px) {

  .hero__stats {
    grid-template-columns: 1fr;

    gap: 0.9rem;
  }

  .stat {
    padding: 1.15rem 1rem;
  }

  .stat__value {
    font-size: 1.75rem;
  }

  .stat__label {
    font-size: 0.88rem;
  }

}


/* =========================================================
   9. RESPONSIVE
========================================================= */

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

  .container,
  .hero__container,
  .navbar {
    max-width: 1320px;
  }

  .hero__title {
    font-size: 5rem;
  }

  .hero__subtitle {
    font-size: 1.15rem;
  }

}

/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {

  .hero__container {
    /* grid-template-columns: 1.1fr 0.9fr; */

    align-items: center;
    justify-content: center;

    gap: 2rem;
  }

  .hero__content {
    max-width: 760px;

    margin-inline: auto;
  }

  .hero__cta {
    justify-content: center;
  }

  .hero__stats {
    max-width: 900px;

    margin-inline: auto;
  }

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

  /* =========================
     NAVBAR
  ========================= */

  .navbar-wrapper {
    height: 110px;
  }

  .navbar {
    padding-inline: 1rem;
  }

  .navbar__links {
    gap: 0.9rem;
  }

  .navbar__links a {
    font-size: 0.9rem;
  }

  .navbar__logo-img {
    height: 82px;
    width: 82px;
  }

  /* =========================
     HERO
  ========================= */

  .hero {
    padding-block: 100px 80px;
  }

  .hero__container {
    gap: 2rem;

    padding-inline: 1.2rem;
  }

  .hero__title {
    font-size: clamp(2.4rem, 6vw, 3.8rem);
  }

  .hero__subtitle {
    font-size: 1rem;

    max-width: 48ch;
  }

  .hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;
  }

  /* =========================
     BUTTONS
  ========================= */

  .btn {
    min-height: 46px;

    padding: 0.75rem 1.2rem;
  }

}

/* =========================================================
   MOBILE LARGE
========================================================= */

@media (max-width: 768px) {

  /* =========================
     BODY
  ========================= */

  body {
    padding-top: 96px;
  }

  /* =========================
     NAVBAR
  ========================= */

  .navbar-wrapper {
    height: 96px;
  }

  .navbar {
    padding-inline: 1rem;
  }

  .navbar__links {
    display: none;
  }

  .navbar__actions {
    gap: 0.5rem;
  }

  .navbar__logo-img {
    height: 66px;
    width: 66px;
  }

  .navbar__toggle {
    display: inline-flex;
  }

  /* =========================
     HERO
  ========================= */

  .hero {
    min-height: auto;

    padding-block: 80px 70px;
  }

  .hero__container {
    padding-inline: 1rem;

    gap: 1.75rem;
  }

  .hero__content {
    gap: 1.2rem;
  }

  .hero__title {
    font-size: clamp(2rem, 8vw, 3rem);

    max-width: 100%;
  }

  .hero__subtitle {
    font-size: 0.98rem;

    line-height: 1.9;

    max-width: 100%;
  }

  .hero__cta {
    width: 100%;

    justify-content: center;
  }

  .hero__cta .btn {
    min-width: 150px;
  }

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

    gap: 1rem;
  }

  /* =========================
     STAT CARD
  ========================= */

  .stat {
    padding: 1.15rem 0.95rem;
  }

  .stat__value {
    font-size: 1.8rem;
  }

  .stat__label {
    font-size: 0.88rem;
  }

  /* =========================
     BUTTONS
  ========================= */

  .btn {
    min-height: 44px;

    padding: 0.72rem 1.1rem;

    font-size: 0.88rem;
  }

  .btn--lg {
    min-height: 50px;
  }

}

/* =========================================================
   MOBILE SMALL
========================================================= */

@media (max-width: 480px) {

  /* =========================
     BODY
  ========================= */

  body {
    padding-top: 88px;
  }

  /* =========================
     NAVBAR
  ========================= */

  .navbar-wrapper {
    height: 88px;
  }

  .navbar {
    padding-inline: 0.9rem;
  }

  .navbar__logo-img {
    height: 56px;
    width: 56px;
  }

  .navbar__btn--secondary {
    display: none;
  }

  /* =========================
     HERO
  ========================= */

  .hero {
    padding-block: 70px 60px;
  }

  .hero__container {
    padding-inline: 0.9rem;

    gap: 1.5rem;
  }

  .hero__title {
    font-size: 1.9rem;

    line-height: 1.2;
  }

  .hero__subtitle {
    font-size: 0.94rem;

    line-height: 1.85;
  }

  .hero__badge {
    font-size: 0.78rem;

    padding: 0.65rem 0.95rem;
  }

  .hero__cta {
    flex-direction: column;

    width: 100%;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .hero__stats {
    grid-template-columns: 1fr;

    gap: 0.9rem;
  }

  /* =========================
     STAT CARD
  ========================= */

  .stat {
    padding: 1.1rem 0.95rem;
  }

  .stat__value {
    font-size: 1.65rem;
  }

  .stat__label {
    font-size: 0.85rem;
  }

  /* =========================
     BUTTONS
  ========================= */

  .btn {
    width: 100%;
  }

}

/* =========================================================
   ULTRA SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

  .hero__title {
    font-size: 1.7rem;
  }

  .hero__subtitle {
    font-size: 0.9rem;
  }

  .navbar__logo-img {
    height: 50px;
    width: 50px;
  }

  .btn {
    font-size: 0.84rem;
  }

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  position: relative;

  background:
    linear-gradient(
      180deg,
      var(--color-ivory),
      var(--color-soft-bg)
    );

  padding-top: 4rem;

  margin-top: 5rem;

  overflow: hidden;

  border-top: 1px solid rgba(186, 162, 19, 0.10);
}

/* =========================================================
   FOOTER DECORATION
========================================================= */

.site-footer::before {
  content: "";

  position: absolute;

  top: -120px;
  left: -120px;

  width: 320px;
  height: 320px;

  background:
    radial-gradient(
      circle,
      rgba(26, 147, 158, 0.08),
      transparent 72%
    );

  border-radius: 50%;

  pointer-events: none;
}

.site-footer::after {
  content: "";

  position: absolute;

  bottom: -140px;
  right: -140px;

  width: 360px;
  height: 360px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.08),
      transparent 72%
    );

  border-radius: 50%;

  pointer-events: none;
}

/* =========================================================
   FOOTER CONTAINER
========================================================= */

.footer-container {
  position: relative;
  z-index: 2;

  max-width: 1200px;

  margin-inline: auto;

  padding-inline: 1.5rem;
  padding-bottom: 2rem;

  display: grid;
  gap: 2.5rem;
}

/* =========================================================
   FOOTER COLUMN
========================================================= */

.footer-col {
  display: flex;
  flex-direction: column;

  gap: 1rem;
}

/* =========================================================
   FOOTER HEADINGS
========================================================= */

.footer-col h3,
.footer-col h4 {
  position: relative;

  margin-bottom: 0.4rem;

  color: var(--color-heading);

  font-size: 1.1rem;
  font-weight: 800;

  line-height: 1.3;
}

/* Elegant underline */

.footer-col h3::after,
.footer-col h4::after {
  content: "";

  position: absolute;

  bottom: -10px;
  right: 0;

  width: 48px;
  height: 3px;

  background: var(--gradient-primary);

  border-radius: 999px;
}

/* =========================================================
   FOOTER TEXT
========================================================= */

.footer-col p {
  color: var(--color-muted);

  font-size: 0.96rem;
  line-height: 2;
}

/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-col a {
  position: relative;

  display: inline-flex;
  align-items: center;

  width: fit-content;

  color: var(--color-text);

  font-size: 0.95rem;
  font-weight: 500;

  text-decoration: none;

  transition:
    color var(--transition),
    transform var(--transition-fast),
    opacity var(--transition);
}

.footer-col a:hover {
  color: var(--color-primary);

  transform: translateX(-3px);
}

/* =========================================================
   FOOTER LIST
========================================================= */

.footer-col ul {
  list-style: none;

  display: flex;
  flex-direction: column;

  gap: 0.75rem;
}

.footer-col ul li {
  margin-bottom: 0;
}

/* =========================================================
   SOCIAL LINKS
========================================================= */

.footer-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 0.8rem;

  margin-top: 0.4rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: rgba(26, 147, 158, 0.08);

  color: var(--color-primary);

  border: 1px solid rgba(26, 147, 158, 0.10);

  transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition-fast),
    box-shadow var(--transition);
}

.footer-social a:hover {
  background: var(--gradient-primary);

  color: var(--color-text-inverse);

  transform:
    translateY(-3px)
    scale(1.04);

  box-shadow:
    0 14px 28px rgba(26, 147, 158, 0.20);
}

/* =========================================================
   FOOTER NEWSLETTER
========================================================= */

.footer-newsletter {
  display: flex;
  flex-direction: column;

  gap: 1rem;
}

.footer-newsletter form {
  display: flex;
  align-items: center;

  gap: 0.75rem;
}

.footer-newsletter input {
  flex: 1;

  height: 50px;

  padding-inline: 1rem;

  background: rgba(255, 255, 255, 0.88);

  border: 1px solid rgba(186, 162, 19, 0.14);

  border-radius: var(--radius-md);

  color: var(--color-text);

  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

.footer-newsletter input:focus {
  border-color: var(--color-primary);

  background: var(--color-white);

  box-shadow:
    0 0 0 4px rgba(26, 147, 158, 0.10);
}

.footer-newsletter input::placeholder {
  color: var(--color-muted);
}

/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
  position: relative;
  z-index: 2;

  text-align: center;

  padding: 1.6rem 1rem;

  margin-top: 1rem;

  border-top: 1px solid rgba(186, 162, 19, 0.10);

  font-size: 0.92rem;
  font-weight: 500;

  color: var(--color-muted);

  background:
    rgba(255, 255, 255, 0.35);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================================================
   FOOTER BOTTOM LINKS
========================================================= */

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

  font-weight: 700;

  transition:
    color var(--transition);
}

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

/* =========================================================
   DARK FOOTER VARIANT
========================================================= */

.site-footer--dark {
  background:
    linear-gradient(
      180deg,
      var(--color-dark-card),
      var(--color-black)
    );

  border-top: 1px solid rgba(255,255,255,0.06);
}

.site-footer--dark .footer-col h3,
.site-footer--dark .footer-col h4,
.site-footer--dark .footer-col a,
.site-footer--dark .footer-bottom {
  color: var(--color-text-light);
}

.site-footer--dark .footer-col p {
  color: rgba(247, 245, 241, 0.72);
}

.site-footer--dark .footer-bottom {
  border-top-color: rgba(255,255,255,0.08);

  background:
    rgba(255,255,255,0.02);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px) {

  .footer-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 992px) {

  .site-footer {
    padding-top: 3.5rem;
  }

  .footer-container {
    gap: 2rem;
  }

}

@media (max-width: 768px) {

  .site-footer {
    margin-top: 4rem;
  }

  .footer-container {
    grid-template-columns: 1fr;

    gap: 2rem;

    padding-inline: 1.2rem;
  }

  .footer-newsletter form {
    flex-direction: column;
  }

  .footer-newsletter .btn {
    width: 100%;
  }

}

@media (max-width: 480px) {

  .site-footer {
    padding-top: 3rem;
  }

  .footer-container {
    padding-inline: 1rem;
  }

  .footer-col h3,
  .footer-col h4 {
    font-size: 1rem;
  }

  .footer-col p,
  .footer-col a {
    font-size: 0.9rem;
  }

  .footer-social {
    gap: 0.65rem;
  }

  .footer-social a {
    width: 42px;
    height: 42px;
  }

  .footer-bottom {
    font-size: 0.84rem;

    line-height: 1.8;
  }

}

/* =========================================================
   ABOUT PAGE
========================================================= */

/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.container {
  width: 100%;
  max-width: 1200px;

  margin-inline: auto;

  padding: 2rem 1.5rem;
}

/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {
  position: relative;

  overflow: hidden;

  background:

    radial-gradient(
      circle at top right,
      rgba(26, 147, 158, 0.10),
      transparent 32%
    ),

    radial-gradient(
      circle at bottom left,
      rgba(186, 162, 19, 0.10),
      transparent 32%
    ),

    linear-gradient(
      135deg,
      var(--color-white),
      var(--color-soft-bg)
    );

  text-align: center;

  padding: 6rem 1rem 5rem;

  isolation: isolate;
}

/* Decorative glow */

.about-hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -120px;

  width: 320px;
  height: 320px;

  background:
    radial-gradient(
      circle,
      rgba(26, 147, 158, 0.14),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

.about-hero::after {
  content: "";

  position: absolute;

  bottom: -140px;
  left: -140px;

  width: 360px;
  height: 360px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.12),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

/* =========================================================
   ABOUT HERO CONTENT
========================================================= */

.about-hero__content {
  position: relative;
  z-index: 2;

  max-width: 850px;

  margin-inline: auto;
}

/* =========================================================
   ABOUT HERO TITLE
========================================================= */

.about-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);

  font-weight: 900;

  line-height: 1.12;

  letter-spacing: -1px;

  margin-bottom: 1.2rem;

  color: var(--color-heading);

  text-wrap: balance;
}

/* Gradient highlight */

.about-hero h1 span {

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

}

/* =========================================================
   ABOUT HERO TEXT
========================================================= */

.about-hero p {
  max-width: 680px;

  margin-inline: auto;

  color: var(--color-muted);

  font-size: 1.08rem;
  line-height: 2;

  text-wrap: pretty;
}

/* =========================================================
   ABOUT HERO ACTIONS
========================================================= */

.about-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 2rem;
}

/* =========================================================
   ABOUT VALUES
========================================================= */

.about-values {
  display: grid;

  gap: 1.5rem;

  margin-top: 4rem;
}

/* =========================================================
   ABOUT CARD
========================================================= */

.about-card {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92),
      rgba(247, 245, 241, 0.96)
    );

  padding: 2rem;

  border-radius: var(--radius-xl);

  border: 1px solid rgba(186, 162, 19, 0.10);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.06),
    0 6px 18px rgba(26, 147, 158, 0.05);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background var(--transition);
}

/* Top accent */

.about-card::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 4px;

  background: var(--gradient-primary);
}

/* Gold atmosphere */

.about-card::after {
  content: "";

  position: absolute;

  bottom: -80px;
  left: -80px;

  width: 160px;
  height: 160px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.10),
      transparent 70%
    );

  pointer-events: none;
}

/* =========================================================
   ABOUT CARD HOVER
========================================================= */

.about-card:hover {
  transform:
    translateY(-8px);

  border-color: rgba(26, 147, 158, 0.18);

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.10),
    0 10px 28px rgba(26, 147, 158, 0.10);
}

/* =========================================================
   ABOUT CARD TITLE
========================================================= */

.about-card h2 {
  position: relative;
  z-index: 2;

  margin-bottom: 1rem;

  font-size: 1.35rem;
  font-weight: 800;

  color: var(--color-primary);
}

/* =========================================================
   ABOUT CARD TEXT
========================================================= */

.about-card p {
  position: relative;
  z-index: 2;

  color: var(--color-muted);

  line-height: 2;

  font-size: 0.98rem;
}

/* =========================================================
   SECTION TITLE
========================================================= */

.section-title {
  position: relative;

  text-align: center;

  margin-bottom: 3rem;

  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 900;

  color: var(--color-heading);

  letter-spacing: -0.5px;
}

/* Elegant underline */

.section-title::after {
  content: "";

  position: absolute;

  bottom: -14px;
  right: 50%;

  transform: translateX(50%);

  width: 80px;
  height: 4px;

  background: var(--gradient-primary);

  border-radius: 999px;
}

/* =========================================================
   FEATURES GRID
========================================================= */

.features-grid {
  display: grid;

  gap: 1.5rem;
}

/* =========================================================
   FEATURE CARD
========================================================= */

.feature {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.95),
      rgba(247,245,241,0.98)
    );

  padding: 1.8rem;

  border-radius: var(--radius-xl);

  border: 1px solid rgba(186, 162, 19, 0.10);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.05);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

/* =========================================================
   FEATURE HOVER
========================================================= */

.feature:hover {
  transform:
    translateY(-6px);

  border-color: rgba(26, 147, 158, 0.18);

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.09),
    0 10px 26px rgba(26, 147, 158, 0.08);
}

/* =========================================================
   FEATURE ICON
========================================================= */

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 60px;
  height: 60px;

  margin-bottom: 1rem;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      rgba(26, 147, 158, 0.12),
      rgba(186, 162, 19, 0.12)
    );

  color: var(--color-primary);

  font-size: 1.3rem;
}

/* =========================================================
   FEATURE TITLE
========================================================= */

.feature h3 {
  margin-bottom: 0.9rem;

  font-size: 1.2rem;
  font-weight: 800;

  color: var(--color-heading);
}

/* =========================================================
   FEATURE TEXT
========================================================= */

.feature p {
  color: var(--color-muted);

  line-height: 1.9;

  font-size: 0.96rem;
}

/* =========================================================
   ABOUT CTA
========================================================= */

.about-cta {
  position: relative;

  overflow: hidden;

  background: var(--gradient-premium);

  text-align: center;

  padding: 4rem 1.2rem;

  margin-top: 5rem;

  border-radius: var(--radius-xl);

  color: var(--color-text-light);

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18);

  isolation: isolate;
}

/* Decorative glow */

.about-cta::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -120px;

  width: 320px;
  height: 320px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.14),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

/* =========================================================
   ABOUT CTA TITLE
========================================================= */

.about-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);

  font-weight: 900;

  margin-bottom: 1.4rem;

  line-height: 1.2;
}

/* =========================================================
   ABOUT CTA TEXT
========================================================= */

.about-cta p {
  max-width: 640px;

  margin-inline: auto;

  color: rgba(247,245,241,0.88);

  line-height: 2;

  font-size: 1.05rem;
}

/* =========================================================
   ABOUT CTA ACTIONS
========================================================= */

.about-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 2rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px) {

  .about-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

}

@media (max-width: 992px) {

  .about-hero {
    padding: 5rem 1rem 4rem;
  }

  .about-card,
  .feature {
    padding: 1.7rem;
  }

}

@media (max-width: 768px) {

  .container {
    padding-inline: 1.2rem;
  }

  .about-hero {
    padding: 4.5rem 1rem 3.5rem;
  }

  .about-hero h1 {
    font-size: clamp(2.1rem, 8vw, 3.2rem);
  }

  .about-hero p {
    font-size: 1rem;
  }

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

  .about-cta {
    padding: 3rem 1rem;
  }

}

@media (max-width: 480px) {

  .container {
    padding-inline: 1rem;
  }

  .about-hero {
    padding: 4rem 1rem 3rem;
  }

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

  .about-hero p {
    font-size: 0.95rem;

    line-height: 1.9;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .about-card,
  .feature {
    padding: 1.4rem;
  }

  .about-cta h2 {
    font-size: 1.8rem;
  }

  .about-cta p {
    font-size: 0.96rem;
  }

  .about-cta__actions {
    flex-direction: column;
  }

  .about-cta__actions .btn {
    width: 100%;
  }

}


/* =========================================================
   CONTACT PAGE
========================================================= */

/* =========================================================
   CONTACT HERO
========================================================= */

.contact-hero {
  position: relative;

  overflow: hidden;

  text-align: center;

  padding: 5rem 1rem 3rem;

  background:

    radial-gradient(
      circle at top right,
      rgba(26, 147, 158, 0.10),
      transparent 34%
    ),

    radial-gradient(
      circle at bottom left,
      rgba(186, 162, 19, 0.10),
      transparent 34%
    ),

    linear-gradient(
      135deg,
      var(--color-white),
      var(--color-soft-bg)
    );

  isolation: isolate;
}

/* Decorative glow */

.contact-hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -120px;

  width: 320px;
  height: 320px;

  background:
    radial-gradient(
      circle,
      rgba(26, 147, 158, 0.14),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

.contact-hero::after {
  content: "";

  position: absolute;

  bottom: -140px;
  left: -140px;

  width: 360px;
  height: 360px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.12),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

/* =========================================================
   CONTACT HERO TITLE
========================================================= */

.contact-hero h1 {
  font-size: clamp(2.3rem, 5vw, 4rem);

  font-weight: 900;

  line-height: 1.15;

  letter-spacing: -1px;

  margin-bottom: 1rem;

  color: var(--color-heading);

  text-wrap: balance;
}

/* Gradient highlight */

.contact-hero h1 span {

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

}

/* =========================================================
   CONTACT HERO TEXT
========================================================= */

.contact-hero p {
  max-width: 680px;

  margin-inline: auto;

  color: var(--color-muted);

  font-size: 1.05rem;
  line-height: 2;
}

/* =========================================================
   CONTACT CONTAINER
========================================================= */

.contact-container {
  width: 100%;
  max-width: 1100px;

  margin-inline: auto;

  padding: 2rem 1.5rem;

  display: grid;

  gap: 2rem;
}

/* =========================================================
   CONTACT FORM CARD
========================================================= */

.contact-form {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.94),
      rgba(247,245,241,0.98)
    );

  padding: 2rem;

  border-radius: var(--radius-xl);

  border: 1px solid rgba(186, 162, 19, 0.10);

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.06),
    0 8px 22px rgba(26, 147, 158, 0.05);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

/* Top accent */

.contact-form::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 4px;

  background: var(--gradient-primary);
}

/* =========================================================
   CONTACT FORM HOVER
========================================================= */

.contact-form:hover {
  transform:
    translateY(-5px);

  border-color: rgba(26, 147, 158, 0.16);

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.10),
    0 10px 28px rgba(26, 147, 158, 0.08);
}

/* =========================================================
   FORM GROUP
========================================================= */

.form-group {
  margin-bottom: 1.35rem;
}

/* =========================================================
   FORM LABEL
========================================================= */

.form-group label {
  display: block;

  margin-bottom: 0.55rem;

  font-size: 0.95rem;
  font-weight: 700;

  color: var(--color-heading);
}

/* =========================================================
   FORM INPUTS
========================================================= */

.form-group input,
.form-group textarea {
  width: 100%;

  padding: 0.95rem 1rem;

  border-radius: var(--radius-md);

  border: 1px solid rgba(186, 162, 19, 0.14);

  background: rgba(255,255,255,0.92);

  color: var(--color-text);

  font-family: inherit;
  font-size: 0.96rem;

  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    transform var(--transition-fast);
}

/* =========================================================
   FORM TEXTAREA
========================================================= */

.form-group textarea {
  min-height: 160px;

  resize: vertical;

  line-height: 1.9;
}

/* =========================================================
   FORM FOCUS
========================================================= */

.form-group input:focus,
.form-group textarea:focus {
  outline: none;

  border-color: var(--color-primary);

  background: var(--color-white);

  box-shadow:
    0 0 0 4px rgba(26, 147, 158, 0.10);
}

/* =========================================================
   PLACEHOLDER
========================================================= */

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-muted);
}

/* =========================================================
   ALERTS
========================================================= */

.alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  padding: 1rem 1rem;

  margin-bottom: 1.2rem;

  border-radius: var(--radius-md);

  font-size: 0.92rem;
  font-weight: 600;

  border: 1px solid transparent;
}

/* =========================================================
   ERROR ALERT
========================================================= */

.alert.error {
  background:
    rgba(180, 0, 32, 0.08);

  color: #9B1024;

  border-color:
    rgba(180, 0, 32, 0.14);
}

/* =========================================================
   SUCCESS ALERT
========================================================= */

.alert.success {
  background:
    rgba(31, 122, 108, 0.10);

  color: var(--color-emerald);

  border-color:
    rgba(31, 122, 108, 0.14);
}

/* =========================================================
   CONTACT INFO CARD
========================================================= */

.contact-info {
  display: flex;
  flex-direction: column;

  gap: 1.5rem;
}

/* =========================================================
   CONTACT CARD
========================================================= */

.contact-card {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.95),
      rgba(247,245,241,0.98)
    );

  padding: 1.8rem;

  border-radius: var(--radius-xl);

  border: 1px solid rgba(186, 162, 19, 0.10);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.05);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.contact-card:hover {
  transform:
    translateY(-5px);

  border-color: rgba(26, 147, 158, 0.16);

  box-shadow:
    0 22px 50px rgba(0,0,0,0.08),
    0 10px 26px rgba(26,147,158,0.08);
}

/* =========================================================
   CONTACT CARD TITLE
========================================================= */

.contact-card h3 {
  margin-bottom: 0.9rem;

  font-size: 1.2rem;
  font-weight: 800;

  color: var(--color-heading);
}

/* =========================================================
   CONTACT CARD TEXT
========================================================= */

.contact-card p,
.contact-card a {
  color: var(--color-muted);

  line-height: 1.9;

  text-decoration: none;

  transition:
    color var(--transition);
}

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

/* =========================================================
   WHATSAPP CARD
========================================================= */

.contact-whatsapp {
  position: relative;

  overflow: hidden;

  text-align: center;

  padding: 2.2rem;

  border-radius: var(--radius-xl);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.96),
      rgba(247,245,241,1)
    );

  border: 1px solid rgba(37, 211, 102, 0.12);

  box-shadow:
    0 18px 42px rgba(0,0,0,0.06);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.contact-whatsapp:hover {
  transform:
    translateY(-6px);

  box-shadow:
    0 24px 55px rgba(0,0,0,0.10);
}

/* =========================================================
   WHATSAPP ICON
========================================================= */

.contact-whatsapp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 72px;
  height: 72px;

  margin-bottom: 1rem;

  border-radius: 50%;

  background:
    rgba(37, 211, 102, 0.10);

  color: #25D366;

  font-size: 2rem;
}

/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.65rem;

  min-height: 52px;

  background:
    linear-gradient(
      135deg,
      #25D366,
      #1ebe57
    );

  color: var(--color-white);

  padding: 0.9rem 1.4rem;

  border-radius: 999px;

  text-decoration: none;

  font-size: 0.95rem;
  font-weight: 700;

  box-shadow:
    0 14px 30px rgba(37, 211, 102, 0.22);

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition),
    filter var(--transition);
}

/* =========================================================
   WHATSAPP BUTTON HOVER
========================================================= */

.whatsapp-btn:hover {
  transform:
    translateY(-3px);

  filter: brightness(1.03);

  box-shadow:
    0 20px 40px rgba(37, 211, 102, 0.28);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px) {

  .contact-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: start;
  }

}

@media (max-width: 992px) {

  .contact-hero {
    padding: 4.5rem 1rem 2.5rem;
  }

}

@media (max-width: 768px) {

  .contact-container {
    padding-inline: 1.2rem;
  }

  .contact-form,
  .contact-card,
  .contact-whatsapp {
    padding: 1.7rem;
  }

}

@media (max-width: 480px) {

  .contact-hero {
    padding: 4rem 1rem 2rem;
  }

  .contact-hero h1 {
    font-size: 2rem;
  }

  .contact-hero p {
    font-size: 0.95rem;

    line-height: 1.9;
  }

  .contact-container {
    padding-inline: 1rem;
  }

  .contact-form,
  .contact-card,
  .contact-whatsapp {
    padding: 1.4rem;
  }

  .whatsapp-btn {
    width: 100%;
  }

}


/* =========================================================
   BLOG PAGE
========================================================= */

/* =========================================================
   BLOG HERO
========================================================= */

.blog-hero {
  position: relative;

  overflow: hidden;

  text-align: center;

  padding: 5rem 1rem 3rem;

  background:

    radial-gradient(
      circle at top right,
      rgba(26, 147, 158, 0.10),
      transparent 34%
    ),

    radial-gradient(
      circle at bottom left,
      rgba(186, 162, 19, 0.10),
      transparent 34%
    ),

    linear-gradient(
      135deg,
      var(--color-white),
      var(--color-soft-bg)
    );

  isolation: isolate;
}

/* Decorative glow */

.blog-hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -120px;

  width: 320px;
  height: 320px;

  background:
    radial-gradient(
      circle,
      rgba(26, 147, 158, 0.14),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

.blog-hero::after {
  content: "";

  position: absolute;

  bottom: -140px;
  left: -140px;

  width: 360px;
  height: 360px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.12),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

/* =========================================================
   BLOG HERO TITLE
========================================================= */

.blog-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);

  font-weight: 900;

  line-height: 1.15;

  letter-spacing: -1px;

  margin-bottom: 1rem;

  color: var(--color-heading);

  text-wrap: balance;
}

/* Gradient highlight */

.blog-hero h1 span {

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

}

/* =========================================================
   BLOG HERO TEXT
========================================================= */

.blog-hero p {
  max-width: 680px;

  margin-inline: auto;

  color: var(--color-muted);

  font-size: 1.08rem;
  line-height: 2;

  text-wrap: pretty;
}

/* =========================================================
   BLOG CONTAINER
========================================================= */

.blog-container {
  width: 100%;
  max-width: 1200px;

  margin-inline: auto;

  padding: 2rem 1.5rem;

  display: grid;

  gap: 2rem;
}

/* =========================================================
   BLOG CARD
========================================================= */

.blog-card {
  position: relative;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  height: 100%;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.96),
      rgba(247,245,241,0.98)
    );

  border-radius: var(--radius-xl);

  border: 1px solid rgba(186, 162, 19, 0.10);

  box-shadow:
    0 16px 40px rgba(0,0,0,0.06),
    0 8px 22px rgba(26,147,158,0.05);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background var(--transition);
}

/* Top accent line */

.blog-card::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 4px;

  background: var(--gradient-primary);

  z-index: 2;
}

/* Gold glow */

.blog-card::after {
  content: "";

  position: absolute;

  bottom: -80px;
  left: -80px;

  width: 180px;
  height: 180px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.10),
      transparent 70%
    );

  pointer-events: none;
}

/* =========================================================
   BLOG CARD HOVER
========================================================= */

.blog-card:hover {
  transform:
    translateY(-8px);

  border-color: rgba(26, 147, 158, 0.18);

  box-shadow:
    0 26px 60px rgba(0,0,0,0.10),
    0 12px 30px rgba(26,147,158,0.10);
}

/* =========================================================
   BLOG CARD IMAGE
========================================================= */

.blog-card__image {
  position: relative;

  overflow: hidden;

  width: 100%;
  height: 240px;
}

.blog-card__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.7s ease,
    filter var(--transition);
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.06);

  filter:
    contrast(106%)
    saturate(106%);
}

/* =========================================================
   BLOG CATEGORY BADGE
========================================================= */

.blog-card__category {
  position: absolute;

  top: 1rem;
  right: 1rem;

  z-index: 3;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.5rem 0.85rem;

  border-radius: 999px;

  background:
    rgba(255,255,255,0.88);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(26,147,158,0.12);

  color: var(--color-primary);

  font-size: 0.78rem;
  font-weight: 700;
}

/* =========================================================
   BLOG CARD CONTENT
========================================================= */

.blog-card__content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  flex: 1;

  padding: 2rem;
}

/* =========================================================
   BLOG DATE
========================================================= */

.blog-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  margin-bottom: 0.8rem;

  font-size: 0.82rem;
  font-weight: 600;

  color: var(--color-muted);
}

/* =========================================================
   BLOG TITLE
========================================================= */

.blog-card h2 {
  margin-bottom: 0.9rem;

  font-size: 1.4rem;
  font-weight: 800;

  line-height: 1.35;

  color: var(--color-heading);

  transition:
    color var(--transition);
}

.blog-card:hover h2 {
  color: var(--color-primary);
}

/* =========================================================
   BLOG TEXT
========================================================= */

.blog-card p {
  margin-bottom: 1.5rem;

  color: var(--color-muted);

  line-height: 2;

  font-size: 0.97rem;

  flex: 1;
}

/* =========================================================
   BLOG READ MORE
========================================================= */

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  width: fit-content;

  color: var(--color-primary);

  font-size: 0.92rem;
  font-weight: 700;

  text-decoration: none;

  transition:
    color var(--transition),
    transform var(--transition-fast),
    gap var(--transition);
}

.blog-card__link:hover {
  color: var(--color-gold);

  gap: 0.7rem;

  transform: translateX(-2px);
}

/* =========================================================
   BLOG PAGINATION
========================================================= */

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 0.7rem;

  padding: 3rem 1rem;
}

/* =========================================================
   PAGINATION BUTTON
========================================================= */

.blog-pagination .page {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 46px;
  height: 46px;

  padding-inline: 1rem;

  border-radius: var(--radius-md);

  text-decoration: none;

  background:
    rgba(255,255,255,0.92);

  border: 1px solid rgba(186, 162, 19, 0.10);

  color: var(--color-text);

  font-size: 0.92rem;
  font-weight: 700;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.04);

  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition-fast),
    box-shadow var(--transition);
}

/* =========================================================
   PAGINATION ACTIVE / HOVER
========================================================= */

.blog-pagination .page.active,
.blog-pagination .page:hover {
  background: var(--gradient-primary);

  color: var(--color-text-inverse);

  border-color: transparent;

  transform:
    translateY(-2px);

  box-shadow:
    0 16px 30px rgba(26,147,158,0.18);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px) {

  .blog-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 992px) {

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

  .blog-card__content {
    padding: 1.7rem;
  }

}

@media (max-width: 768px) {

  .blog-hero {
    padding: 4.5rem 1rem 2.5rem;
  }

  .blog-container {
    grid-template-columns: 1fr;

    padding-inline: 1.2rem;
  }

  .blog-card__image {
    height: 220px;
  }

}

@media (max-width: 480px) {

  .blog-hero {
    padding: 4rem 1rem 2rem;
  }

  .blog-hero h1 {
    font-size: 2rem;
  }

  .blog-hero p {
    font-size: 0.95rem;

    line-height: 1.9;
  }

  .blog-container {
    padding-inline: 1rem;
  }

  .blog-card__content {
    padding: 1.4rem;
  }

  .blog-card h2 {
    font-size: 1.2rem;
  }

  .blog-card p {
    font-size: 0.92rem;
  }

  .blog-pagination {
    gap: 0.5rem;
  }

  .blog-pagination .page {
    min-width: 42px;
    height: 42px;

    font-size: 0.86rem;
  }

}



/* =========================================================
   MODERN FAQ PAGE
========================================================= */

/* =========================================================
   FAQ HERO
========================================================= */

.faq-modern__hero {
  position: relative;

  overflow: hidden;

  text-align: center;

  padding: 5rem 1rem 3rem;

  background:

    radial-gradient(
      circle at top right,
      rgba(26, 147, 158, 0.10),
      transparent 34%
    ),

    radial-gradient(
      circle at bottom left,
      rgba(186, 162, 19, 0.10),
      transparent 34%
    ),

    linear-gradient(
      135deg,
      var(--color-white),
      var(--color-soft-bg)
    );

  isolation: isolate;
}

/* Decorative glow */

.faq-modern__hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -120px;

  width: 320px;
  height: 320px;

  background:
    radial-gradient(
      circle,
      rgba(26, 147, 158, 0.14),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

.faq-modern__hero::after {
  content: "";

  position: absolute;

  bottom: -140px;
  left: -140px;

  width: 360px;
  height: 360px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.12),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

/* =========================================================
   FAQ HERO TITLE
========================================================= */

.faq-modern__hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);

  font-weight: 900;

  line-height: 1.15;

  letter-spacing: -1px;

  margin-bottom: 1rem;

  color: var(--color-heading);

  text-wrap: balance;
}

/* Gradient highlight */

.faq-modern__hero h1 span {

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

}

/* =========================================================
   FAQ HERO TEXT
========================================================= */

.faq-modern__hero p {
  max-width: 680px;

  margin-inline: auto;

  color: var(--color-muted);

  font-size: 1.05rem;
  line-height: 2;
}

/* =========================================================
   FAQ CONTAINER
========================================================= */

.faq-modern__container {
  width: 100%;
  max-width: 860px;

  margin-inline: auto;

  padding: 2rem 1.5rem 4rem;
}

/* =========================================================
   FAQ ITEM
========================================================= */

.faq-modern__item {
  position: relative;

  overflow: hidden;

  margin-bottom: 1rem;

  border-radius: var(--radius-xl);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.96),
      rgba(247,245,241,0.98)
    );

  border: 1px solid rgba(186, 162, 19, 0.10);

  box-shadow:
    0 14px 34px rgba(0,0,0,0.05),
    0 6px 18px rgba(26,147,158,0.04);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background var(--transition);
}

/* Top accent */

.faq-modern__item::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 4px;

  background: var(--gradient-primary);

  opacity: 0;

  transition:
    opacity var(--transition);
}

/* =========================================================
   FAQ ITEM HOVER
========================================================= */

.faq-modern__item:hover {
  transform:
    translateY(-4px);

  border-color: rgba(26, 147, 158, 0.16);

  box-shadow:
    0 22px 50px rgba(0,0,0,0.08),
    0 10px 26px rgba(26,147,158,0.08);
}

.faq-modern__item:hover::before {
  opacity: 1;
}

/* =========================================================
   ACTIVE FAQ ITEM
========================================================= */

.faq-modern__item.active {
  border-color: rgba(26, 147, 158, 0.20);

  box-shadow:
    0 26px 60px rgba(0,0,0,0.10),
    0 12px 30px rgba(26,147,158,0.10);
}

.faq-modern__item.active::before {
  opacity: 1;
}

/* =========================================================
   FAQ QUESTION BUTTON
========================================================= */

.faq-modern__question {
  position: relative;
  z-index: 2;

  width: 100%;

  padding: 1.4rem 1.5rem;

  border: none;

  background: transparent;

  font-size: 1rem;
  font-weight: 700;

  text-align: right;

  cursor: pointer;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 1rem;

  color: var(--color-heading);

  transition:
    color var(--transition),
    background var(--transition);
}

.faq-modern__question:hover {
  color: var(--color-primary);
}

/* =========================================================
   FAQ ICON
========================================================= */

.faq-modern__icon {
  position: relative;

  flex-shrink: 0;

  width: 22px;
  height: 22px;
}

/* Horizontal line */

.faq-modern__icon::before,
.faq-modern__icon::after {
  content: "";

  position: absolute;

  background: var(--color-primary);

  border-radius: 999px;

  transition:
    transform var(--transition),
    opacity var(--transition),
    background var(--transition);
}

/* Horizontal */

.faq-modern__icon::before {
  width: 22px;
  height: 2.5px;

  top: 50%;
  right: 0;

  transform: translateY(-50%);
}

/* Vertical */

.faq-modern__icon::after {
  width: 2.5px;
  height: 22px;

  top: 0;
  right: 50%;

  transform: translateX(50%);
}

/* =========================================================
   ACTIVE ICON
========================================================= */

.faq-modern__item.active .faq-modern__icon::after {
  transform:
    translateX(50%)
    rotate(90deg);

  opacity: 0;
}

.faq-modern__item.active .faq-modern__icon::before {
  background: var(--color-gold);
}

/* =========================================================
   FAQ ANSWER
========================================================= */

.faq-modern__answer {
  height: 0;

  overflow: hidden;

  transition:
    height 0.45s ease;
}

/* =========================================================
   FAQ ANSWER INNER
========================================================= */

.faq-modern__answer-inner {
  position: relative;
  z-index: 2;

  padding: 0 1.5rem 1.5rem;

  color: var(--color-muted);

  line-height: 2;

  font-size: 0.97rem;
}

/* =========================================================
   FAQ LINKS
========================================================= */

.faq-modern__answer-inner a {
  color: var(--color-primary);

  font-weight: 700;

  text-decoration: none;

  transition:
    color var(--transition);
}

.faq-modern__answer-inner a:hover {
  color: var(--color-gold);
}

/* =========================================================
   FAQ CTA
========================================================= */

.faq-modern__cta {
  position: relative;

  overflow: hidden;

  text-align: center;

  padding: 5rem 1rem;

  background:
    linear-gradient(
      135deg,
      rgba(26,147,158,0.06),
      rgba(186,162,19,0.06)
    );
}

/* =========================================================
   FAQ CTA TITLE
========================================================= */

.faq-modern__cta h2 {
  font-size: clamp(1rem, 4vw, 2rem);

  font-weight: 900;

  line-height: 1.2;

  margin-bottom: 1rem;

  color: var(--color-heading);
}

/* =========================================================
   FAQ CTA TEXT
========================================================= */

.faq-modern__cta p {
  max-width: 620px;

  margin-inline: auto;

  color: var(--color-muted);

  line-height: 2;

  font-size: 1rem;
}

/* =========================================================
   FAQ CTA ACTIONS
========================================================= */

.faq-modern__cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 2rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

  .faq-modern__hero {
    padding: 4.5rem 1rem 2.5rem;
  }

}

@media (max-width: 768px) {

  .faq-modern__container {
    padding-inline: 1.2rem;
  }

  .faq-modern__question {
    padding: 1.25rem 1.3rem;

    font-size: 0.96rem;
  }

  .faq-modern__answer-inner {
    padding:
      0 1.3rem 1.3rem;
  }

}

@media (max-width: 480px) {

  .faq-modern__hero {
    padding: 4rem 1rem 2rem;
  }

  .faq-modern__hero h1 {
    font-size: 2rem;
  }

  .faq-modern__hero p {
    font-size: 0.95rem;

    line-height: 1.9;
  }

  .faq-modern__container {
    padding-inline: 1rem;
  }

  .faq-modern__question {
    padding: 1.1rem 1.1rem;

    font-size: 0.92rem;

    gap: 0.8rem;
  }

  .faq-modern__answer-inner {
    padding:
      0 1.1rem 1.2rem;

    font-size: 0.92rem;
  }

  .faq-modern__cta {
    padding: 4rem 1rem;
  }

  .faq-modern__cta h2 {
    font-size: 1.8rem;
  }

  .faq-modern__cta p {
    font-size: 0.95rem;
  }

  .faq-modern__cta-actions {
    flex-direction: column;
  }

  .faq-modern__cta-actions .btn {
    width: 100%;
  }

}

/* =========================================================
   AUTH PAGES (Register / Login)
========================================================= */

/* =========================================================
   AUTH PAGE
========================================================= */

.auth-page {
  position: relative;

  overflow: hidden;

  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 5rem 1rem;

  background:

    radial-gradient(
      circle at top right,
      rgba(26, 147, 158, 0.10),
      transparent 34%
    ),

    radial-gradient(
      circle at bottom left,
      rgba(186, 162, 19, 0.10),
      transparent 34%
    ),

    linear-gradient(
      180deg,
      var(--color-ivory),
      var(--color-white)
    );

  isolation: isolate;
}

/* Decorative glow */

.auth-page::before {
  content: "";

  position: absolute;

  top: -140px;
  right: -140px;

  width: 360px;
  height: 360px;

  background:
    radial-gradient(
      circle,
      rgba(26, 147, 158, 0.14),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

.auth-page::after {
  content: "";

  position: absolute;

  bottom: -160px;
  left: -160px;

  width: 420px;
  height: 420px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.12),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

/* =========================================================
   AUTH CONTAINER
========================================================= */

.auth-container {
  width: 100%;
  max-width: 480px;

  position: relative;
  z-index: 2;
}

/* =========================================================
   AUTH CARD
========================================================= */

.auth-card {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.96),
      rgba(247,245,241,0.98)
    );

  padding: 2.7rem 2.2rem;

  border-radius: var(--radius-xl);

  border: 1px solid rgba(186, 162, 19, 0.10);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 24px 60px rgba(0,0,0,0.08),
    0 12px 30px rgba(26,147,158,0.06);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

/* Top accent */

.auth-card::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 4px;

  background: var(--gradient-primary);
}

/* Gold glow */

.auth-card::after {
  content: "";

  position: absolute;

  bottom: -100px;
  left: -100px;

  width: 220px;
  height: 220px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.10),
      transparent 70%
    );

  pointer-events: none;
}

/* =========================================================
   AUTH CARD HOVER
========================================================= */

.auth-card:hover {
  transform:
    translateY(-4px);

  border-color: rgba(26, 147, 158, 0.16);

  box-shadow:
    0 30px 70px rgba(0,0,0,0.10),
    0 14px 34px rgba(26,147,158,0.08);
}

/* =========================================================
   AUTH TITLE
========================================================= */

.auth-card h1 {
  text-align: center;

  margin-bottom: 0.6rem;

  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 900;

  line-height: 1.15;

  letter-spacing: -1px;

  color: var(--color-heading);
}

/* Gradient highlight */

.auth-card h1 span {

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

}

/* =========================================================
   AUTH SUBTITLE
========================================================= */

.auth-subtitle {
  text-align: center;

  margin-bottom: 2rem;

  color: var(--color-muted);

  font-size: 0.95rem;
  line-height: 1.9;
}

/* =========================================================
   FORM GROUP
========================================================= */

.form-group {
  margin-bottom: 1.35rem;
}

/* =========================================================
   FORM LABEL
========================================================= */

.form-group label {
  display: block;

  margin-bottom: 0.55rem;

  font-size: 0.94rem;
  font-weight: 700;

  color: var(--color-heading);
}

/* =========================================================
   FORM INPUT
========================================================= */

.form-group input {
  width: 100%;

  height: 54px;

  padding-inline: 1rem;

  border-radius: var(--radius-md);

  border: 1px solid rgba(186, 162, 19, 0.14);

  background:
    rgba(255,255,255,0.92);

  color: var(--color-text);

  font-family: inherit;
  font-size: 0.96rem;

  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    transform var(--transition-fast);
}

/* =========================================================
   FORM INPUT PLACEHOLDER
========================================================= */

.form-group input::placeholder {
  color: var(--color-muted);
}

/* =========================================================
   FORM INPUT FOCUS
========================================================= */

.form-group input:focus {
  outline: none;

  border-color: var(--color-primary);

  background: var(--color-white);

  box-shadow:
    0 0 0 4px rgba(26,147,158,0.10);
}

/* =========================================================
   PASSWORD GROUP
========================================================= */

.password-group {
  position: relative;
}

/* =========================================================
   TOGGLE PASSWORD
========================================================= */

.toggle-password {
  position: absolute;

  left: 14px;
  top: 50%;

  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  cursor: pointer;

  font-size: 0.95rem;

  color: var(--color-muted);

  background:
    rgba(26,147,158,0.06);

  transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition-fast),
    opacity var(--transition);

  opacity: 0.75;
}

.toggle-password:hover {
  opacity: 1;

  color: var(--color-primary);

  background:
    rgba(26,147,158,0.12);

  transform:
    translateY(-50%)
    scale(1.05);
}

/* =========================================================
   AUTH ACTIONS
========================================================= */

.auth-actions {
  margin-top: 1.8rem;
}

/* =========================================================
   AUTH FOOTER
========================================================= */

.auth-footer {
  text-align: center;

  margin-top: 1.6rem;

  font-size: 0.92rem;

  color: var(--color-muted);

  line-height: 1.8;
}

/* =========================================================
   AUTH FOOTER LINK
========================================================= */

.auth-footer a {
  color: var(--color-primary);

  font-weight: 700;

  text-decoration: none;

  transition:
    color var(--transition);
}

.auth-footer a:hover {
  color: var(--color-gold);

  text-decoration: underline;
}

/* =========================================================
   ALERT
========================================================= */

.alert {
  display: flex;
  align-items: center;
  gap: 0.7rem;

  padding: 1rem 1rem;

  border-radius: var(--radius-md);

  margin-bottom: 1.2rem;

  font-size: 0.92rem;
  font-weight: 600;

  border: 1px solid transparent;
}

/* =========================================================
   ERROR ALERT
========================================================= */

.alert--error {
  background:
    rgba(180, 0, 32, 0.08);

  color: #9B1024;

  border-color:
    rgba(180, 0, 32, 0.14);
}

/* =========================================================
   SUCCESS ALERT
========================================================= */

.alert--success {
  background:
    rgba(31, 122, 108, 0.10);

  color: var(--color-emerald);

  border-color:
    rgba(31, 122, 108, 0.14);
}

/* =========================================================
   AUTH DIVIDER
========================================================= */

.auth-divider {
  position: relative;

  text-align: center;

  margin: 1.8rem 0;
}

.auth-divider::before {
  content: "";

  position: absolute;

  top: 50%;
  right: 0;

  width: 100%;
  height: 1px;

  background:
    rgba(186, 162, 19, 0.12);
}

.auth-divider span {
  position: relative;
  z-index: 2;

  display: inline-block;

  padding-inline: 1rem;

  background:
    rgba(247,245,241,1);

  color: var(--color-muted);

  font-size: 0.85rem;
}

/* =========================================================
   SOCIAL AUTH
========================================================= */

.auth-social {
  display: flex;
  flex-direction: column;

  gap: 0.9rem;
}

/* =========================================================
   SOCIAL BUTTON
========================================================= */

.auth-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;

  width: 100%;

  min-height: 52px;

  padding-inline: 1rem;

  border-radius: var(--radius-md);

  border: 1px solid rgba(186, 162, 19, 0.12);

  background:
    rgba(255,255,255,0.92);

  color: var(--color-heading);

  font-size: 0.94rem;
  font-weight: 700;

  text-decoration: none;

  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition-fast),
    box-shadow var(--transition);
}

.auth-social__btn:hover {
  transform:
    translateY(-2px);

  border-color: rgba(26,147,158,0.16);

  box-shadow:
    0 14px 28px rgba(0,0,0,0.06);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

  .auth-page {
    padding: 4rem 1rem;
  }

  .auth-card {
    padding: 2.2rem 1.7rem;
  }

}

@media (max-width: 480px) {

  .auth-page {
    padding: 3rem 0.9rem;
  }

  .auth-card {
    padding: 1.8rem 1.3rem;
  }

  .auth-card h1 {
    font-size: 1.9rem;
  }

  .auth-subtitle {
    font-size: 0.9rem;
  }

  .form-group input {
    height: 50px;

    font-size: 0.92rem;
  }

  .toggle-password {
    width: 32px;
    height: 32px;

    left: 12px;
  }

}


/* =========================================================
   RESOURCE PAGE
========================================================= */

/* =========================================================
   RESOURCE HERO
========================================================= */

.resource-hero {
  position: relative;

  overflow: hidden;

  text-align: center;

  padding: 5rem 1rem 3rem;

  background:

    radial-gradient(
      circle at top right,
      rgba(26, 147, 158, 0.10),
      transparent 34%
    ),

    radial-gradient(
      circle at bottom left,
      rgba(186, 162, 19, 0.10),
      transparent 34%
    ),

    linear-gradient(
      135deg,
      var(--color-white),
      var(--color-soft-bg)
    );

  isolation: isolate;
}

/* Decorative glow */

.resource-hero::before {
  content: "";

  position: absolute;

  top: -120px;
  right: -120px;

  width: 320px;
  height: 320px;

  background:
    radial-gradient(
      circle,
      rgba(26, 147, 158, 0.14),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

.resource-hero::after {
  content: "";

  position: absolute;

  bottom: -140px;
  left: -140px;

  width: 360px;
  height: 360px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.12),
      transparent 72%
    );

  border-radius: 50%;

  z-index: -1;
}

/* =========================================================
   RESOURCE HERO TITLE
========================================================= */

.resource-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.3rem);

  font-weight: 900;

  line-height: 1.15;

  letter-spacing: -1px;

  margin-bottom: 1rem;

  color: var(--color-heading);

  text-wrap: balance;
}

/* Gradient highlight */

.resource-hero h1 span {

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

}

/* =========================================================
   RESOURCE HERO TEXT
========================================================= */

.resource-hero p {
  max-width: 700px;

  margin-inline: auto;

  color: var(--color-muted);

  font-size: 1.08rem;
  line-height: 2;

  text-wrap: pretty;
}

/* =========================================================
   RESOURCE GRID
========================================================= */

.resource-grid {
  width: 100%;
  max-width: 1280px;

  margin-inline: auto;

  display: grid;

  gap: 2rem;

  padding: 2rem 1.5rem 5rem;
}

/* =========================================================
   RESOURCE CARD
========================================================= */

.resource-card {
  position: relative;

  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  height: 100%;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.96),
      rgba(247,245,241,0.98)
    );

  border-radius: var(--radius-xl);

  border: 1px solid rgba(186, 162, 19, 0.10);

  padding: 2.2rem 2rem;

  box-shadow:
    0 16px 40px rgba(0,0,0,0.06),
    0 8px 22px rgba(26,147,158,0.05);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background var(--transition);
}

/* Top accent line */

.resource-card::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 4px;

  background: var(--gradient-primary);
}

/* Gold glow */

.resource-card::after {
  content: "";

  position: absolute;

  bottom: -90px;
  left: -90px;

  width: 190px;
  height: 190px;

  background:
    radial-gradient(
      circle,
      rgba(186, 162, 19, 0.10),
      transparent 70%
    );

  pointer-events: none;
}

/* =========================================================
   RESOURCE CARD HOVER
========================================================= */

.resource-card:hover {
  transform:
    translateY(-8px);

  border-color: rgba(26, 147, 158, 0.18);

  box-shadow:
    0 28px 65px rgba(0,0,0,0.10),
    0 12px 30px rgba(26,147,158,0.10);
}

/* =========================================================
   RESOURCE ICON
========================================================= */

.resource-card__icon {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 90px;
  height: 90px;

  margin-bottom: 1.4rem;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      rgba(26,147,158,0.12),
      rgba(186,162,19,0.12)
    );

  color: var(--color-primary);

  font-size: 2.4rem;

  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.28),
    0 10px 24px rgba(26,147,158,0.08);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

/* Icon hover */

.resource-card:hover .resource-card__icon {
  transform:
    scale(1.06)
    translateY(-2px);

  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.30),
    0 16px 32px rgba(26,147,158,0.14);
}

/* =========================================================
   RESOURCE TITLE
========================================================= */

.resource-card h3 {
  position: relative;
  z-index: 2;

  margin-bottom: 0.9rem;

  font-size: 1.35rem;
  font-weight: 800;

  line-height: 1.35;

  color: var(--color-heading);

  transition:
    color var(--transition);
}

.resource-card:hover h3 {
  color: var(--color-primary);
}

/* =========================================================
   RESOURCE TEXT
========================================================= */

.resource-card p {
  position: relative;
  z-index: 2;

  flex: 1;

  font-size: 0.96rem;

  color: var(--color-muted);

  margin-bottom: 1.6rem;

  line-height: 2;
}

/* =========================================================
   RESOURCE ACTIONS
========================================================= */

.resource-card__actions {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 0.8rem;

  width: 100%;
}

/* =========================================================
   RESOURCE META
========================================================= */

.resource-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 0.9rem;

  margin-bottom: 1rem;
}

/* =========================================================
   RESOURCE BADGE
========================================================= */

.resource-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.45rem 0.8rem;

  border-radius: 999px;

  background:
    rgba(26,147,158,0.08);

  border: 1px solid rgba(26,147,158,0.10);

  color: var(--color-primary);

  font-size: 0.76rem;
  font-weight: 700;
}

/* =========================================================
   RESOURCE LINK
========================================================= */

.resource-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  color: var(--color-primary);

  font-size: 0.92rem;
  font-weight: 700;

  text-decoration: none;

  transition:
    color var(--transition),
    transform var(--transition-fast),
    gap var(--transition);
}

.resource-card__link:hover {
  color: var(--color-gold);

  gap: 0.7rem;

  transform: translateX(-2px);
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (min-width: 768px) {

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

}

/* =========================================================
   RESPONSIVE — LARGE DESKTOP
========================================================= */

@media (min-width: 1100px) {

  .resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

/* =========================================================
   RESPONSIVE — MEDIUM
========================================================= */

@media (max-width: 992px) {

  .resource-hero {
    padding: 4.5rem 1rem 2.5rem;
  }

  .resource-card {
    padding: 2rem 1.7rem;
  }

}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 768px) {

  .resource-grid {
    grid-template-columns: 1fr;

    padding-inline: 1.2rem;
  }

  .resource-card {
    padding: 1.8rem 1.5rem;
  }

  .resource-card__icon {
    width: 80px;
    height: 80px;

    font-size: 2rem;
  }

}

@media (max-width: 480px) {

  .resource-hero {
    padding: 4rem 1rem 2rem;
  }

  .resource-hero h1 {
    font-size: 2rem;
  }

  .resource-hero p {
    font-size: 0.95rem;

    line-height: 1.9;
  }

  .resource-grid {
    padding-inline: 1rem;
  }

  .resource-card {
    padding: 1.5rem 1.3rem;
  }

  .resource-card h3 {
    font-size: 1.2rem;
  }

  .resource-card p {
    font-size: 0.92rem;
  }

  .resource-card__icon {
    width: 72px;
    height: 72px;

    font-size: 1.8rem;
  }

  .resource-card__actions {
    flex-direction: column;
  }

  .resource-card__actions .btn {
    width: 100%;
  }

}

/* =========================================================
   MEDIA & BURGER ICONS
========================================================= */

/* =========================================================
   NAVBAR TOGGLE
========================================================= */

.navbar__toggle {
    position: relative;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    width: 48px;
    height: 48px;

    background:
        rgba(26, 147, 158, 0.08);

    border: 1px solid rgba(26, 147, 158, 0.10);

    border-radius: var(--radius-md);

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition-fast),
        box-shadow var(--transition);

    z-index: 10001;
}

/* Hover */

.navbar__toggle:hover {
    background:
        rgba(26, 147, 158, 0.14);

    border-color:
        rgba(26, 147, 158, 0.18);

    transform:
        scale(1.03);

    box-shadow:
        0 12px 24px rgba(26,147,158,0.12);
}

/* =========================================================
   BURGER LINES
========================================================= */

.navbar__toggle span {
    display: block;

    width: 24px;
    height: 2.5px;

    border-radius: 999px;

    background: var(--color-primary);

    transition:
        transform 0.35s ease,
        opacity 0.3s ease,
        width 0.3s ease,
        background var(--transition);
}

/* =========================================================
   ACTIVE BURGER ANIMATION
========================================================= */

.navbar__toggle.active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.navbar__toggle.active span:nth-child(2) {
    opacity: 0;

    transform:
        translateX(10px);
}

.navbar__toggle.active span:nth-child(3) {
    transform:
        translateY(-8px)
        rotate(-45deg);
}

/* =========================================================
   MOBILE MENU OVERLAY
========================================================= */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;

    background:
        rgba(13, 13, 13, 0.45);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--transition),
        visibility var(--transition);

    z-index: 9997;
}

/* Active overlay */

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {
    position: fixed;

    top: 0;
    right: -100%;

    width: min(82%, 360px);
    height: 100vh;

    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(247,245,241,0.98)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-left: 1px solid rgba(186, 162, 19, 0.10);

    box-shadow:
        -10px 0 40px rgba(0,0,0,0.12);

    transition:
        right 0.45s ease;

    z-index: 9999;

    padding: 2rem 1.5rem;

    display: flex;
    flex-direction: column;
}

/* Gold glow */

.mobile-menu::before {
    content: "";

    position: absolute;

    top: -120px;
    left: -120px;

    width: 260px;
    height: 260px;

    background:
        radial-gradient(
            circle,
            rgba(186, 162, 19, 0.10),
            transparent 72%
        );

    border-radius: 50%;

    pointer-events: none;
}

/* =========================================================
   ACTIVE MOBILE MENU
========================================================= */

.mobile-menu.active {
    right: 0;
}

/* =========================================================
   MOBILE MENU HEADER
========================================================= */

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 2rem;
}

/* =========================================================
   MOBILE MENU LOGO
========================================================= */

.mobile-menu__logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    text-decoration: none;
}

.mobile-menu__logo img {
    width: 54px;
    height: 54px;

    object-fit: contain;
}

.mobile-menu__logo-text {
    font-size: 1rem;
    font-weight: 800;

    color: var(--color-heading);
}

/* =========================================================
   MOBILE MENU CLOSE
========================================================= */

.mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        rgba(26,147,158,0.08);

    color: var(--color-primary);

    border: 1px solid rgba(26,147,158,0.10);

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition-fast);
}

.mobile-menu__close:hover {
    background:
        rgba(26,147,158,0.14);

    transform:
        rotate(90deg);
}

/* =========================================================
   MOBILE MENU LINKS
========================================================= */

.mobile-menu__links {
    list-style: none;

    padding: 0;
    margin: 0 0 2rem 0;

    display: flex;
    flex-direction: column;

    gap: 0.4rem;
}

/* =========================================================
   MOBILE MENU ITEM
========================================================= */

.mobile-menu__links li {
    width: 100%;
}

/* =========================================================
   MOBILE MENU LINK
========================================================= */

.mobile-menu__links a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 1rem 1rem;

    border-radius: var(--radius-md);

    text-decoration: none;

    font-size: 1rem;
    font-weight: 700;

    color: var(--color-heading);

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition-fast),
        padding var(--transition);
}

/* Hover */

.mobile-menu__links a:hover {
    background:
        rgba(26,147,158,0.08);

    color: var(--color-primary);

    transform:
        translateX(-3px);
}

/* Active */

.mobile-menu__links a.active {
    background:
        linear-gradient(
            135deg,
            rgba(26,147,158,0.12),
            rgba(186,162,19,0.10)
        );

    color: var(--color-primary);
}

/* =========================================================
   MOBILE USER
========================================================= */

.mobile-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding: 1rem;

    margin-bottom: 1.5rem;

    border-radius: var(--radius-lg);

    background:
        rgba(26,147,158,0.06);

    border: 1px solid rgba(26,147,158,0.10);

    font-size: 0.95rem;
    font-weight: 700;

    color: var(--color-heading);
}

/* =========================================================
   MOBILE MENU ACTIONS
========================================================= */

.mobile-menu__actions {
    display: flex;
    flex-direction: column;

    gap: 0.9rem;

    margin-top: auto;
}

/* =========================================================
   MOBILE MENU BUTTONS
========================================================= */

.mobile-menu__actions .btn {
    width: 100%;
}

/* =========================================================
   MOBILE SOCIALS
========================================================= */

.mobile-menu__social {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 0.8rem;

    margin-top: 2rem;
}

/* =========================================================
   MOBILE SOCIAL LINK
========================================================= */

.mobile-menu__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        rgba(26,147,158,0.08);

    color: var(--color-primary);

    border: 1px solid rgba(26,147,158,0.10);

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition-fast),
        box-shadow var(--transition);
}

.mobile-menu__social a:hover {
    background: var(--gradient-primary);

    color: var(--color-text-inverse);

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 28px rgba(26,147,158,0.18);
}

/* =========================================================
   RESPONSIVE NAVBAR — 996px
========================================================= */

@media (max-width: 996px) {

    .navbar__toggle {
        display: inline-flex;
    }

    .navbar__links {
        display: none;
    }

}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 480px) {

    .mobile-menu {
        width: 88%;

        padding: 1.5rem 1.2rem;
    }

    .mobile-menu__links a {
        padding: 0.95rem 0.9rem;

        font-size: 0.95rem;
    }

    .mobile-user {
        font-size: 0.9rem;
    }

}

/* =========================================================
   MEDIA QUERY
========================================================= */

@media (max-width: 996px) {

    .navbar__links,
    .navbar__actions {
        display: none;
    }

    .navbar__toggle {
        display: inline-flex;
    }

}

/* =========================================================
   QURAN CHANNEL FRAME
========================================================= */
/* =========================================================
   QURAN CHANNEL FRAME
========================================================= */

.live-section {
  position: relative;

  overflow: hidden;

  margin: 90px 0;

  text-align: center;

  padding-inline: 1rem;
}

/* Decorative atmosphere */

.live-section::before {
  content: "";

  position: absolute;

  top: -140px;
  right: -140px;

  width: 320px;
  height: 320px;

  background:
    radial-gradient(
      circle,
      rgba(26,147,158,0.10),
      transparent 72%
    );

  border-radius: 50%;

  pointer-events: none;
}

.live-section::after {
  content: "";

  position: absolute;

  bottom: -160px;
  left: -160px;

  width: 380px;
  height: 380px;

  background:
    radial-gradient(
      circle,
      rgba(186,162,19,0.10),
      transparent 72%
    );

  border-radius: 50%;

  pointer-events: none;
}

/* =========================================================
   LIVE TITLE
========================================================= */

.live-title {
  position: relative;

  display: inline-block;

  padding-bottom: 14px;

  margin-bottom: 30px;

  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;

  line-height: 1.2;

  letter-spacing: -0.5px;

  color: var(--color-heading);
}

/* Subtitle */

.live-title span {
  display: block;

  font-size: 1rem;
  font-weight: 600;

  line-height: 1.8;

  color: var(--color-muted);

  margin-top: 0.6rem;
}

/* Decorative underline */

.live-title::after {
  content: "";

  position: absolute;

  bottom: 0;
  right: 50%;

  transform: translateX(50%);

  width: 65%;
  height: 4px;

  border-radius: 999px;

  background: var(--gradient-primary);

  box-shadow:
    0 6px 16px rgba(26,147,158,0.18);
}

/* =========================================================
   LIVE VIDEO WRAPPER
========================================================= */

.live-video-wrapper {
  position: relative;

  width: 90%;
  max-width: 1100px;

  aspect-ratio: 16 / 9;

  margin: 60px auto;

  padding: 14px;

  overflow: hidden;

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,0.96),
      rgba(247,245,241,0.98)
    );

  border-radius: 28px;

  border: 1px solid rgba(186,162,19,0.10);

  box-shadow:
    0 20px 55px rgba(0,0,0,0.08),
    0 10px 24px rgba(26,147,158,0.05);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

/* Top accent */

.live-video-wrapper::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 5px;

  background: var(--gradient-primary);

  z-index: 2;
}

/* Gold glow */

.live-video-wrapper::after {
  content: "";

  position: absolute;

  bottom: -90px;
  left: -90px;

  width: 220px;
  height: 220px;

  background:
    radial-gradient(
      circle,
      rgba(186,162,19,0.10),
      transparent 72%
    );

  pointer-events: none;
}

/* Hover */

.live-video-wrapper:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(26,147,158,0.16);

  box-shadow:
    0 30px 70px rgba(0,0,0,0.12),
    0 14px 34px rgba(26,147,158,0.08);
}

/* =========================================================
   IFRAME
========================================================= */

.live-video-wrapper iframe {
  width: 100%;
  height: 100%;

  border: none;

  border-radius: 20px;

  display: block;
}

/* =========================================================
   QURAN API APP
========================================================= */

.quran-app {
  position: relative;

  overflow: hidden;

  max-width: 960px;

  margin: 90px auto;

  padding: 3rem 2.5rem;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,0.96),
      rgba(247,245,241,0.98)
    );

  border-radius: 30px;

  border: 1px solid rgba(186,162,19,0.10);

  box-shadow:
    0 24px 60px rgba(0,0,0,0.08),
    0 12px 30px rgba(26,147,158,0.05);

  text-align: center;
}

/* Top accent */

.quran-app::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 5px;

  background: var(--gradient-primary);
}

/* =========================================================
   QURAN TITLE
========================================================= */

.quran-title {
  font-size: clamp(2rem, 4vw, 3rem);

  font-weight: 900;

  line-height: 1.2;

  margin-bottom: 2rem;

  color: var(--color-heading);
}

/* Gradient highlight */

.quran-title span {

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

}

/* =========================================================
   SURAH SELECT
========================================================= */

#surahSelect {
  min-width: 240px;

  padding: 0.9rem 1rem;

  border-radius: var(--radius-md);

  border: 1px solid rgba(186,162,19,0.14);

  background:
    rgba(255,255,255,0.92);

  color: var(--color-heading);

  font-size: 1rem;
  font-weight: 600;

  margin-bottom: 2.2rem;

  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

/* Focus */

#surahSelect:focus {
  outline: none;

  border-color: var(--color-primary);

  box-shadow:
    0 0 0 4px rgba(26,147,158,0.10);
}

/* =========================================================
   AYAH CONTAINER
========================================================= */

.ayah-container {
  text-align: right;

  direction: rtl;

  line-height: 2.5;

  font-size: 1.5rem;
  font-weight: 500;

  color: var(--color-heading);

  background:
    rgba(255,255,255,0.55);

  border: 1px solid rgba(186,162,19,0.08);

  border-radius: var(--radius-xl);

  padding: 2rem;

  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.20);
}

/* =========================================================
   AYAH
========================================================= */

.ayah {
  position: relative;

  margin-bottom: 1.5rem;

  padding-bottom: 1rem;

  border-bottom:
    1px dashed rgba(186,162,19,0.16);
}

.ayah:last-child {
  margin-bottom: 0;

  border-bottom: none;

  padding-bottom: 0;
}

/* Ayah number */

.ayah-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 38px;
  height: 38px;

  margin-inline-start: 0.5rem;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      rgba(26,147,158,0.12),
      rgba(186,162,19,0.12)
    );

  color: var(--color-primary);

  font-size: 0.9rem;
  font-weight: 800;
}

/* =========================================================
   ALMADINAH MOSHAF
========================================================= */
/* =========================================================
   ALMADINAH MOSHAF
========================================================= */
/* =========================================================
   ALMADINAH MOSHAF
========================================================= */

/* =========================================================
   QURAN EMBED SECTION
========================================================= */

.quran-embed-section {
  position: relative;

  width: 100%;

  margin: 120px 0;

  text-align: center;

  padding-inline: 1rem;
}

/* =========================================================
   QURAN EMBED WRAPPER
========================================================= */

.quran-embed-wrapper {
  position: relative;

  overflow: hidden;

  width: min(100%, 1200px);

  margin-inline: auto;

  border-radius: 32px;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,0.96),
      rgba(247,245,241,0.98)
    );

  border: 1px solid rgba(186,162,19,0.10);

  padding: 1.2rem;

  box-shadow:
    0 24px 60px rgba(0,0,0,0.08),
    0 12px 30px rgba(26,147,158,0.05);
}

/* Top accent */

.quran-embed-wrapper::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 5px;

  background: var(--gradient-primary);
}

/* =========================================================
   QURAN EMBED IFRAME
========================================================= */

.quran-embed-wrapper iframe {
  width: 100%;
  min-height: 780px;

  border: none;

  border-radius: 24px;

  display: block;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 996px) {

  .live-video-wrapper {
    width: 94%;
  }

  .quran-app {
    margin: 70px 1rem;

    padding: 2.5rem 2rem;
  }

}

@media (max-width: 768px) {

  .live-section {
    margin: 70px 0;
  }

  .live-video-wrapper {
    width: 96%;

    padding: 10px;

    border-radius: 22px;
  }

  .live-video-wrapper iframe {
    border-radius: 16px;
  }

  .quran-app {
    padding: 2rem 1.5rem;
  }

  .ayah-container {
    font-size: 1.3rem;

    line-height: 2.3;

    padding: 1.5rem;
  }

  .quran-embed-wrapper iframe {
    min-height: 650px;
  }

}

@media (max-width: 480px) {

  .live-title {
    font-size: 1.8rem;
  }

  .live-title span {
    font-size: 0.9rem;
  }

  .live-video-wrapper {
    width: calc(100% - 1.2rem);

    margin: 40px auto;
  }

  .quran-app {
    margin: 60px 1rem;

    padding: 1.7rem 1.2rem;
  }

  .quran-title {
    font-size: 1.8rem;
  }

  #surahSelect {
    width: 100%;
  }

  .ayah-container {
    font-size: 1.15rem;

    line-height: 2.2;

    padding: 1.2rem;
  }

  .quran-embed-section {
    margin: 80px 0;
  }

  .quran-embed-wrapper {
    padding: 0.8rem;

    border-radius: 24px;
  }

  .quran-embed-wrapper iframe {
    min-height: 520px;

    border-radius: 18px;
  }

}


/* =========================================================
   EMBED CONTAINER
========================================================= */

.embed-container {
  position: relative;

  width: 94%;
  max-width: 1500px;

  margin-inline: auto;

  padding: 24px;

  overflow: hidden;

  background:

    radial-gradient(
      circle at top right,
      rgba(26,147,158,0.08),
      transparent 28%
    ),

    radial-gradient(
      circle at bottom left,
      rgba(186,162,19,0.08),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      rgba(247,245,241,0.98),
      rgba(255,255,255,1)
    );

  border-radius: 32px;

  border: 1px solid rgba(186,162,19,0.12);

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.08),
    0 12px 34px rgba(26,147,158,0.05);

  transition:
    box-shadow var(--transition),
    transform var(--transition),
    border-color var(--transition),
    background var(--transition);

  isolation: isolate;
}

/* =========================================================
   EMBED CONTAINER HOVER
========================================================= */

.embed-container:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(26,147,158,0.16);

  box-shadow:
    0 36px 95px rgba(0,0,0,0.12),
    0 16px 42px rgba(26,147,158,0.08);
}

/* =========================================================
   DECORATIVE GOLDEN BORDER EFFECT
========================================================= */

.embed-container::before {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 32px;

  padding: 2px;

  background:
    linear-gradient(
      135deg,
      rgba(186,162,19,0.95),
      rgba(243,233,178,0.95),
      rgba(26,147,158,0.75)
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.95;
}

/* =========================================================
   SOFT ATMOSPHERIC GLOW
========================================================= */

.embed-container::after {
  content: "";

  position: absolute;

  bottom: -120px;
  left: -120px;

  width: 260px;
  height: 260px;

  background:
    radial-gradient(
      circle,
      rgba(186,162,19,0.10),
      transparent 72%
    );

  border-radius: 50%;

  pointer-events: none;

  z-index: -1;
}

/* =========================================================
   EMBED HEADER
========================================================= */

.embed-container__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 1rem;

  margin-bottom: 1.5rem;
}

/* =========================================================
   EMBED TITLE
========================================================= */

.embed-container__title {
  font-size: clamp(1.6rem, 3vw, 2.5rem);

  font-weight: 900;

  line-height: 1.2;

  letter-spacing: -0.5px;

  color: var(--color-heading);
}

/* Gradient highlight */

.embed-container__title span {

  background: var(--gradient-primary);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;

}

/* =========================================================
   EMBED SUBTITLE
========================================================= */

.embed-container__subtitle {
  max-width: 720px;

  color: var(--color-muted);

  font-size: 1rem;

  line-height: 2;
}

/* =========================================================
   EMBED FRAME WRAPPER
========================================================= */

.embed-frame-wrapper {
  position: relative;

  overflow: hidden;

  border-radius: 24px;

  background:
    rgba(255,255,255,0.82);

  border: 1px solid rgba(186,162,19,0.10);

  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.25),
    0 10px 24px rgba(0,0,0,0.04);
}

/* =========================================================
   EMBED IFRAME
========================================================= */

.embed-frame-wrapper iframe {
  width: 100%;
  min-height: 820px;

  border: none;

  display: block;

  border-radius: 22px;

  background: var(--color-white);
}

/* =========================================================
   EMBED LOADER
========================================================= */

.embed-loader {
  position: absolute;

  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 1rem;

  background:
    rgba(255,255,255,0.92);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  z-index: 5;
}

/* =========================================================
   EMBED SPINNER
========================================================= */

.embed-loader__spinner {
  width: 52px;
  height: 52px;

  border-radius: 50%;

  border: 3px solid rgba(186,162,19,0.16);

  border-top-color: var(--color-primary);

  animation:
    embed-spin 0.9s linear infinite;
}

/* =========================================================
   SPINNER ANIMATION
========================================================= */

@keyframes embed-spin {

  to {
    transform: rotate(360deg);
  }

}

/* =========================================================
   EMBED LOADER TEXT
========================================================= */

.embed-loader__text {
  color: var(--color-muted);

  font-size: 0.95rem;
  font-weight: 600;
}

/* =========================================================
   RESPONSIVE — LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

  .embed-container {
    width: 96%;

    padding: 20px;
  }

  .embed-frame-wrapper iframe {
    min-height: 720px;
  }

}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 768px) {

  .embed-container {
    width: calc(100% - 1.4rem);

    padding: 16px;

    border-radius: 26px;
  }

  .embed-container::before {
    border-radius: 26px;
  }

  .embed-container__header {
    margin-bottom: 1.2rem;
  }

  .embed-container__subtitle {
    font-size: 0.95rem;
  }

  .embed-frame-wrapper {
    border-radius: 20px;
  }

  .embed-frame-wrapper iframe {
    min-height: 620px;

    border-radius: 18px;
  }

}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 480px) {

  .embed-container {
    width: calc(100% - 1rem);

    padding: 12px;

    border-radius: 22px;
  }

  .embed-container::before {
    border-radius: 22px;
  }

  .embed-container__title {
    font-size: 1.7rem;
  }

  .embed-container__subtitle {
    font-size: 0.92rem;

    line-height: 1.9;
  }

  .embed-frame-wrapper {
    border-radius: 18px;
  }

  .embed-frame-wrapper iframe {
    min-height: 520px;

    border-radius: 16px;
  }

  .embed-loader__spinner {
    width: 46px;
    height: 46px;
  }

  .embed-loader__text {
    font-size: 0.88rem;
  }

}

/* =========================================================
   HOVER EFFECT (LIGHT & SAFE)
========================================================= */

.embed-container:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.12),
    0 15px 40px rgba(26,147,158,0.06);
}

/* =========================================================
   IFRAME STYLING
========================================================= */

.embed-container iframe {
  width: 100%;

  height: 88vh;
  min-height: 720px;

  border: none;

  border-radius: 20px;

  display: block;

  background: var(--color-white);

  pointer-events: auto;
}

/* =========================================================
   GLOBAL RESET
========================================================= */

* {
    box-sizing: border-box;

    margin: 0;
    padding: 0;

    font-family: "Tajawal", sans-serif;
}

/* =========================================================
   BODY
========================================================= */

body {
    background:
        linear-gradient(
            180deg,
            var(--color-ivory),
            var(--color-soft-bg)
        );

    color: var(--color-text);

    min-height: 100vh;
}

/* =========================================================
   APP LAYOUT
========================================================= */

.app-layout {
    display: flex;

    min-height: 100vh;

    position: relative;
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    position: relative;

    width: 270px;

    display: flex;
    flex-direction: column;

    background:

        linear-gradient(
            180deg,
            var(--color-navy),
            #10263B
        );

    color: var(--color-text-light);

    border-left: 1px solid rgba(255,255,255,0.04);

    box-shadow:
        10px 0 30px rgba(0,0,0,0.10);

    transition:
        width var(--transition),
        transform var(--transition);

    overflow: hidden;

    z-index: 20;
}

/* Decorative glow */

.sidebar::before {
    content: "";

    position: absolute;

    top: -120px;
    left: -120px;

    width: 260px;
    height: 260px;

    background:
        radial-gradient(
            circle,
            rgba(186,162,19,0.12),
            transparent 72%
        );

    border-radius: 50%;

    pointer-events: none;
}

/* =========================================================
   SIDEBAR HEADER
========================================================= */

.sidebar-header {
    position: relative;

    padding: 1.8rem 1.5rem;

    text-align: center;

    background:
        rgba(0,0,0,0.16);

    border-bottom:
        1px solid rgba(255,255,255,0.05);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* =========================================================
   SIDEBAR BRAND
========================================================= */

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.8rem;
}

.sidebar-brand img {
    width: 56px;
    height: 56px;

    object-fit: contain;
}

.sidebar-brand__text {
    font-size: 1.05rem;
    font-weight: 800;

    color: var(--color-text-light);
}

/* =========================================================
   SIDEBAR MENU
========================================================= */

.sidebar-menu {
    list-style: none;

    padding: 1.2rem 0.9rem;

    display: flex;
    flex-direction: column;

    gap: 0.4rem;

    flex: 1;
}

/* =========================================================
   SIDEBAR ITEM
========================================================= */

.sidebar-menu li {
    position: relative;

    display: flex;
    align-items: center;

    gap: 0.85rem;

    padding: 0.95rem 1rem;

    border-radius: var(--radius-md);

    cursor: pointer;

    color: rgba(247,245,241,0.88);

    font-size: 0.96rem;
    font-weight: 600;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition-fast),
        box-shadow var(--transition);
}

/* Hover */

.sidebar-menu li:hover {
    background:
        linear-gradient(
            135deg,
            rgba(26,147,158,0.16),
            rgba(186,162,19,0.12)
        );

    color: var(--color-text-light);

    transform:
        translateX(-4px);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.12);
}

/* Active */

.sidebar-menu li.active {
    background:
        linear-gradient(
            135deg,
            rgba(26,147,158,0.22),
            rgba(186,162,19,0.16)
        );

    color: var(--color-text-light);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.16);
}

/* =========================================================
   MAIN AREA
========================================================= */

.main-area {
    flex: 1;

    display: flex;
    flex-direction: column;

    min-width: 0;
}

/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    position: sticky;

    top: 0;

    height: 74px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-inline: 1.5rem;

    background:
        rgba(255,255,255,0.82);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-bottom:
        1px solid rgba(186,162,19,0.10);

    box-shadow:
        0 6px 18px rgba(0,0,0,0.04);

    z-index: 15;
}

/* =========================================================
   TOPBAR TITLE
========================================================= */

.topbar__title {
    font-size: 1.2rem;
    font-weight: 800;

    color: var(--color-heading);
}

/* =========================================================
   TOPBAR ACTIONS
========================================================= */

.topbar__actions {
    display: flex;
    align-items: center;

    gap: 1rem;
}

/* =========================================================
   NOTIFICATIONS ICON
========================================================= */

.notifications-icon {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background:
        rgba(26,147,158,0.08);

    color: var(--color-primary);

    border: 1px solid rgba(26,147,158,0.10);

    cursor: pointer;

    transition:
        background var(--transition),
        transform var(--transition-fast),
        box-shadow var(--transition);
}

/* Hover */

.notifications-icon:hover {
    background:
        rgba(26,147,158,0.14);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 24px rgba(26,147,158,0.12);
}

/* =========================================================
   BADGE
========================================================= */

.badge {
    position: absolute;

    top: -4px;
    left: -4px;

    min-width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding-inline: 0.35rem;

    background:
        linear-gradient(
            135deg,
            #D7263D,
            #B00020
        );

    color: var(--color-white);

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(176,0,32,0.28);
}

/* =========================================================
   NOTIFICATIONS PANEL
========================================================= */

.notifications-panel {
    position: absolute;

    top: 78px;
    left: 1.5rem;

    width: 340px;

    background:
        rgba(255,255,255,0.96);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-radius: var(--radius-xl);

    border: 1px solid rgba(186,162,19,0.10);

    box-shadow:
        0 26px 60px rgba(0,0,0,0.12);

    padding: 1.2rem;

    display: none;

    z-index: 50;
}

/* =========================================================
   NOTIFICATION ITEM
========================================================= */

.notification-item {
    display: flex;
    align-items: flex-start;

    gap: 0.8rem;

    padding: 0.9rem 0;

    border-bottom:
        1px solid rgba(186,162,19,0.08);
}

.notification-item:last-child {
    border-bottom: none;

    padding-bottom: 0;
}

/* =========================================================
   CONTENT
========================================================= */

.content {
    flex: 1;

    padding: 2rem;

    overflow-y: auto;
}

/* =========================================================
   CONTENT CARD
========================================================= */

.content-card {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(247,245,241,0.98)
        );

    border-radius: var(--radius-xl);

    border: 1px solid rgba(186,162,19,0.10);

    padding: 2rem;

    box-shadow:
        0 18px 46px rgba(0,0,0,0.06);

    margin-bottom: 1.5rem;
}

/* =========================================================
   QUICK ACTIONS
========================================================= */

.quick-actions {
    position: fixed;

    bottom: 24px;
    left: 24px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.8rem;

    z-index: 100;
}

/* =========================================================
   QUICK ACTION BUTTON
========================================================= */

.quick-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0.85rem 1.2rem;

    background:
        var(--gradient-premium);

    color: var(--color-text-light);

    border: none;

    border-radius: var(--radius-md);

    cursor: pointer;

    font-size: 0.92rem;
    font-weight: 700;

    box-shadow:
        0 16px 34px rgba(23,50,77,0.22);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition),
        filter var(--transition);
}

/* Hover */

.quick-actions button:hover {
    transform:
        translateY(-3px);

    filter: brightness(1.04);

    box-shadow:
        0 22px 42px rgba(23,50,77,0.28);
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 996px) {

    .sidebar {
        position: fixed;

        top: 0;
        right: -100%;

        height: 100vh;

        z-index: 9999;
    }

    .sidebar.active {
        right: 0;
    }

    .content {
        padding: 1.5rem;
    }

}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 768px) {

    .topbar {
        padding-inline: 1rem;
    }

    .notifications-panel {
        width: calc(100% - 2rem);

        left: 1rem;
    }

    .content {
        padding: 1rem;
    }

    .content-card {
        padding: 1.5rem;
    }

    .quick-actions {
        bottom: 18px;
        left: 18px;

        flex-direction: column;
        align-items: stretch;
    }

}

@media (max-width: 480px) {

    .sidebar {
        width: 88%;
    }

    .topbar {
        height: 68px;
    }

    .topbar__title {
        font-size: 1rem;
    }

    .notifications-icon {
        width: 42px;
        height: 42px;
    }

    .content-card {
        padding: 1.2rem;
    }

    .quick-actions {
        left: 12px;
        right: 12px;

        bottom: 12px;
    }

    .quick-actions button {
        width: 100%;
    }

    .embed-container iframe {
        min-height: 520px;
    }

}


/* =========================================================
   SELECT INPUT STYLING
========================================================= */

.form-group select {

    width: 100%;
    height: 55px;

    padding-inline: 1rem 3.2rem;

    border-radius: var(--radius-md);

    border: 1px solid rgba(186,162,19,0.14);

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(247,245,241,0.98)
        );

    color: var(--color-heading);

    font-size: 0.95rem;
    font-weight: 600;

    font-family: inherit;

    outline: none;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition),
        transform var(--transition-fast),
        color var(--transition);

    box-shadow:
        0 6px 16px rgba(0,0,0,0.03);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%231A939E' viewBox='0 0 20 20'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position:
        left 16px center;

    background-size: 18px;

}

/* =========================================================
   SELECT HOVER
========================================================= */

.form-group select:hover {

    border-color:
        rgba(26,147,158,0.18);

    box-shadow:
        0 10px 22px rgba(26,147,158,0.06);

}

/* =========================================================
   SELECT FOCUS
========================================================= */

.form-group select:focus {

    border-color:
        var(--color-primary);

    background:
        rgba(255,255,255,1);

    box-shadow:
        0 0 0 4px rgba(26,147,158,0.10);

}

/* =========================================================
   SELECT OPTION
========================================================= */

.form-group select option {

    background:
        var(--color-white);

    color:
        var(--color-heading);

    font-size: 0.94rem;

}

/* =========================================================
   DISABLED SELECT
========================================================= */

.form-group select:disabled {

    opacity: 0.7;

    cursor: not-allowed;

    background:
        rgba(238,232,223,0.65);

}

/* =========================================================
   INVALID SELECT
========================================================= */

.form-group select:invalid {

    color:
        var(--color-muted);

}

/* =========================================================
   SELECT WRAPPER
========================================================= */

.select-wrapper {

    position: relative;

    width: 100%;

}

/* =========================================================
   CUSTOM GLOW EFFECT
========================================================= */

.select-wrapper::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: var(--radius-md);

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(26,147,158,0.04),
            rgba(186,162,19,0.03)
        );

    opacity: 0;

    transition:
        opacity var(--transition);

}

.select-wrapper:focus-within::after {

    opacity: 1;

}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 768px) {

    .form-group select {

        height: 52px;

        font-size: 0.92rem;

        padding-inline:
            0.95rem 3rem;

        background-position:
            left 14px center;

    }

}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 480px) {

    .form-group select {

        height: 50px;

        font-size: 0.9rem;

        border-radius: 12px;

        padding-inline:
            0.9rem 2.8rem;

        background-size: 16px;

    }

}

/* =========================================================
   FOCUS EFFECT
========================================================= */

.form-group select:focus {

    border-color:
        var(--color-primary);

    background:
        rgba(255,255,255,1);

    box-shadow:
        0 0 0 4px rgba(26,147,158,0.10),
        0 10px 24px rgba(26,147,158,0.08);

    transform:
        translateY(-1px);

}

/* =========================================================
   HOVER EFFECT
========================================================= */

.form-group select:hover {

    border-color:
        rgba(26,147,158,0.18);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(247,245,241,0.98)
        );

    box-shadow:
        0 10px 24px rgba(26,147,158,0.05);

}

/* =========================================================
   OPTION STYLE
========================================================= */

.form-group select option {

    background:
        var(--color-white);

    color:
        var(--color-heading);

    font-size: 0.94rem;
    font-weight: 500;

    padding:
        0.75rem 1rem;

}

/* =========================================================
   RTL SUPPORT
========================================================= */

html[dir="rtl"] .form-group select {

    background-position:
        left 16px center;

    padding-right:
        1rem;

    padding-left:
        3rem;

}

/* =========================================================
   LTR SUPPORT
========================================================= */

html[dir="ltr"] .form-group select {

    background-position:
        right 16px center;

    padding-left:
        1rem;

    padding-right:
        3rem;

}

/* =========================================================
   SELECT PLACEHOLDER STATE
========================================================= */

.form-group select.placeholder {

    color:
        var(--color-muted);

}

/* =========================================================
   DISABLED OPTION
========================================================= */

.form-group select option:disabled {

    color:
        var(--color-slate);

}

/* =========================================================
   SELECT WITH ICON
========================================================= */

.select-with-icon {

    position: relative;

}

.select-with-icon select {

    padding-inline:
        3rem 3rem;

}

.select-with-icon__icon {

    position: absolute;

    top: 50%;

    right: 1rem;

    transform:
        translateY(-50%);

    color:
        var(--color-primary);

    font-size: 1rem;

    pointer-events: none;

}

/* =========================================================
   ERROR STATE
========================================================= */

.form-group select.error {

    border-color:
        #D7263D;

    box-shadow:
        0 0 0 4px rgba(215,38,61,0.10);

}

/* =========================================================
   SUCCESS STATE
========================================================= */

.form-group select.success {

    border-color:
        var(--color-emerald);

    box-shadow:
        0 0 0 4px rgba(31,122,108,0.10);

}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 768px) {

    html[dir="rtl"] .form-group select {

        background-position:
            left 14px center;

        padding-left:
            2.8rem;

    }

    html[dir="ltr"] .form-group select {

        background-position:
            right 14px center;

        padding-right:
            2.8rem;

    }

}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 480px) {

    .form-group select option {

        font-size: 0.9rem;

    }

    html[dir="rtl"] .form-group select {

        padding-right:
            0.9rem;

        padding-left:
            2.6rem;

    }

    html[dir="ltr"] .form-group select {

        padding-left:
            0.9rem;

        padding-right:
            2.6rem;

    }

}



.section-description {
    margin-bottom: 20px;
    text-align: center;
}



/* =========================================
   WHY ALFAWZ SECTION
========================================= */

.why-alfawz-section {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.55),
        rgba(247,245,241,1)
    );
}

/* =========================================
   DECORATIVE GLOW
========================================= */

.why-alfawz-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;

    width: 320px;
    height: 320px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(26,147,158,.08),
        transparent 70%
    );
}

.why-alfawz-section::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -120px;

    width: 320px;
    height: 320px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(186,162,19,.08),
        transparent 70%
    );
}

/* =========================================
   HEADER
========================================= */

.section-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 4rem;
}

.section-badge {
    display: inline-flex;
    align-items: center;

    padding: 0.7rem 1.2rem;
    margin-bottom: 1rem;

    border-radius: 999px;
    border: 1px solid rgba(26,147,158,.15);

    background: rgba(26,147,158,.08);

    color: var(--color-primary);
    font-weight: 700;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;

    color: var(--color-heading);

    margin-bottom: 1rem;
}

.section-description {
    max-width: 700px;
    margin: auto;

    color: var(--color-muted);
    line-height: 2;
}

/* =========================================
   GRID
========================================= */

.why-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 2rem;
}

/* =========================================
   CARD
========================================= */

.why-card {
    position: relative;
    overflow: hidden;

    padding: 2rem;

    background: rgba(255,255,255,.85);
    backdrop-filter: blur(14px);

    border-radius: var(--radius-xl);
    border: 1px solid rgba(186,162,19,.12);

    box-shadow: 0 20px 45px rgba(0,0,0,.06);

    transition: .35s ease;
}

.why-card:hover {
    transform: translateY(-8px);

    border-color: rgba(26,147,158,.18);

    box-shadow:
        0 25px 55px rgba(26,147,158,.12);
}

/* =========================================
   CARD TOP ACCENT
========================================= */

.why-card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 4px;

    background: var(--gradient-primary);
}

/* =========================================
   ICON
========================================= */

.why-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-bottom: 1.5rem;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        rgba(26,147,158,.12),
        rgba(186,162,19,.12)
    );

    color: var(--color-primary);
    font-size: 1.5rem;
}

/* =========================================
   CARD TITLE
========================================= */

.why-card h3 {
    margin-bottom: 1rem;

    font-size: 1.25rem;
    font-weight: 800;

    color: var(--color-heading);
}

/* =========================================
   CARD TEXT
========================================= */

.why-card p {
    color: var(--color-muted);
    line-height: 2;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

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

}



/* =========================================
   EDUCATIONAL GOALS
========================================= */

.goals-section {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.55),
        rgba(247,245,241,1)
    );
}

/* =========================================
   DECORATIVE GLOW
========================================= */

.goals-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;

    width: 320px;
    height: 320px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(26,147,158,.08),
        transparent 70%
    );
}

.goals-section::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -120px;

    width: 320px;
    height: 320px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(186,162,19,.08),
        transparent 70%
    );
}

/* =========================================
   GRID
========================================= */

.goals-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 2rem;
}

/* =========================================
   CARD
========================================= */

.goal-card {
    position: relative;
    overflow: hidden;

    padding: 2rem;

    background: rgba(255,255,255,.85);
    backdrop-filter: blur(14px);

    border-radius: var(--radius-xl);
    border: 1px solid rgba(186,162,19,.12);

    box-shadow: 0 20px 45px rgba(0,0,0,.06);

    transition: .35s ease;
}

.goal-card:hover {
    transform: translateY(-8px);

    border-color: rgba(26,147,158,.18);

    box-shadow:
        0 25px 55px rgba(26,147,158,.12);
}

/* =========================================
   TOP ACCENT
========================================= */

.goal-card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 4px;

    background: var(--gradient-primary);
}

/* =========================================
   ICON
========================================= */

.goal-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-bottom: 1.5rem;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        rgba(26,147,158,.12),
        rgba(186,162,19,.12)
    );

    color: var(--color-primary);
    font-size: 1.5rem;
}

/* =========================================
   TITLE
========================================= */

.goal-card h3 {
    margin-bottom: 1rem;

    font-size: 1.25rem;
    font-weight: 800;

    color: var(--color-heading);
}

/* =========================================
   TEXT
========================================= */

.goal-card p {
    color: var(--color-muted);
    line-height: 2;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

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

    .goal-card {
        padding: 1.6rem;
    }

}




/* =========================================
   FEATURES SECTION
========================================= */

.features-section {
    position: relative;
    overflow: hidden;

    background: #fff;
}

/* =========================================
   DECORATIVE ELEMENTS
========================================= */

.features-section::before {
    content: "";

    position: absolute;
    top: -120px;
    left: -120px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(26,147,158,.08),
        transparent 70%
    );
}

.features-section::after {
    content: "";

    position: absolute;
    bottom: -120px;
    right: -120px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(186,162,19,.08),
        transparent 70%
    );
}

/* =========================================
   GRID
========================================= */

.features-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;
}

/* =========================================
   CARD
========================================= */

.feature-card {
    position: relative;
    overflow: hidden;

    padding: 2rem;

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);

    border-radius: var(--radius-xl);
    border: 1px solid rgba(186,162,19,.12);

    box-shadow: 0 20px 45px rgba(0,0,0,.06);

    transition: .35s ease;
}

/* =========================================
   TOP ACCENT
========================================= */

.feature-card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 4px;

    background: var(--gradient-primary);
}

.feature-card:hover {
    transform: translateY(-10px);

    border-color: rgba(26,147,158,.18);

    box-shadow:
        0 28px 60px rgba(26,147,158,.12);
}

/* =========================================
   ICON
========================================= */

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 75px;
    height: 75px;

    margin-bottom: 1.5rem;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        rgba(26,147,158,.12),
        rgba(186,162,19,.12)
    );

    color: var(--color-primary);
    font-size: 1.6rem;
}

/* =========================================
   CONTENT
========================================= */

.feature-card h3 {
    margin-bottom: .8rem;

    font-size: 1.35rem;
    font-weight: 800;

    color: var(--color-heading);
}

.feature-card p {
    margin-bottom: 1.5rem;

    color: var(--color-muted);
    line-height: 2;
}

/* =========================================
   FEATURE LIST
========================================= */

.feature-list {
    display: flex;
    flex-direction: column;

    gap: .8rem;
}

.feature-list li {
    position: relative;

    padding-right: 1.5rem;

    color: var(--color-text);
}

.feature-list li::before {
    content: "✓";

    position: absolute;
    right: 0;

    color: var(--color-primary);
    font-weight: 800;
}