@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700;800&display=swap');
/* ==========================================================================
   THEME 6 — "Friendly Rounded"  (generated base: topbar2.css with re-mapped tokens)
   Palette: purple #5A2D82 · mint #6FD6A8 · lavender #F7F5FB. No red, no black.
   The hand-written design layer is appended below the base.
   ⚠ GENERATED FILE — do not edit here. Edit scripts/theme6/<this file name> (design layer)
     then run:  node scripts/build_theme6_base.js   (and bump ASSET_VERSION before deploying)
   ========================================================================== */
/* ============================================
   TOPBAR — THEME 2: OBSIDIAN GOLD (LIGHT)
   ============================================ */

:root {
  /* ===============================
     TOPBAR COLORS (LUXURY GOLD)
  =============================== */
  --ebtb20-topbar-background-color: #F7F5FB;
  --ebtb20-topbar-border-color: #ECE6F5;
  --ebtb20-topbar-social-icon-color: #3D2C54;
  --ebtb20-topbar-social-icon-hover-color: #6FD6A8;
  --ebtb20-topbar-contact-text-color: #3D2C54;
  --ebtb20-topbar-contact-icon-color: #6FD6A8;
  --ebtb20-topbar-contact-hover-text-color: #5A2D82;

  /* ===============================
     TOPBAR TYPOGRAPHY
  =============================== */
  --ebtb20-topbar-font-size: 0.8rem;
  --ebtb20-contact-link-font-weight: 600;

  /* ===============================
     TOPBAR SPACING
  =============================== */
  --ebtb20-topbar-padding-y: 0.6rem;
  --ebtb20-topbar-padding-x: 2rem;
  --ebtb20-social-icons-gap: 1.25rem;
  --ebtb20-contact-info-gap: 1.5rem;
  --ebtb20-contact-link-gap: 0.5rem;

  /* ===============================
     TOPBAR LAYOUT
  =============================== */
  --ebtb20-container-max-width: 1200px;

  /* ===============================
     TOPBAR BORDER
  =============================== */
  --ebtb20-topbar-border-bottom-width: 1px;

  /* ===============================
     TOPBAR ANIMATION
  =============================== */
  --ebtb20-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ebtb20-transition-duration: 0.3s;

  /* ===============================
     TOPBAR RESPONSIVE
  =============================== */
  --ebtb20-container-gap-tablet: 0.6rem;
  --ebtb20-contact-info-gap-tablet: 1.25rem;
}

/* ============================================
   TOP BAR
   ============================================ */
.ebtb20-top-bar {
  background-color: var(--ebtb20-topbar-background-color);
  border-bottom: var(--ebtb20-topbar-border-bottom-width) solid var(--ebtb20-topbar-border-color);
  padding: var(--ebtb20-topbar-padding-y) var(--ebtb20-topbar-padding-x);
  font-size: var(--ebtb20-topbar-font-size);
}

.ebtb20-top-bar-container {
  max-width: var(--ebtb20-container-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ebtb20-social-icons {
  display: flex;
  gap: var(--ebtb20-social-icons-gap);
}

.ebtb20-social-icon {
  color: var(--ebtb20-topbar-social-icon-color);
  transition: color var(--ebtb20-transition-duration) var(--ebtb20-ease);
}

.ebtb20-social-icon:hover {
  color: var(--ebtb20-topbar-social-icon-hover-color);
}

.ebtb20-contact-info {
  display: flex;
  gap: var(--ebtb20-contact-info-gap);
}

.ebtb20-contact-link {
  display: flex;
  align-items: center;
  gap: var(--ebtb20-contact-link-gap);
  color: var(--ebtb20-topbar-contact-text-color);
  font-weight: var(--ebtb20-contact-link-font-weight);
  transition: color var(--ebtb20-transition-duration) var(--ebtb20-ease);
  text-decoration: none;
}

.ebtb20-contact-link i {
  color: var(--ebtb20-topbar-contact-icon-color);
}

.ebtb20-contact-link:hover {
  color: var(--ebtb20-topbar-contact-hover-text-color);
}

/* ============================================
   TOPBAR RESPONSIVE OVERRIDES
   ============================================ */
@media (max-width: 768px) {
  .ebtb20-top-bar-container {
    flex-direction: column;
    gap: var(--ebtb20-container-gap-tablet);
    align-items: center;
  }

  .ebtb20-social-icons {
    justify-content: center;
  }

  .ebtb20-contact-info {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ebtb20-contact-info-gap-tablet);
  }
}

@media (max-width: 350px) {
  .ebtb20-contact-link span {
    display: none;
  }
}

@media (max-width: 768px) {
  .ebtb20-top-bar { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}
@media (max-width: 480px) {
  .ebtb20-top-bar { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
}
@media (max-width: 380px) {
  .ebtb20-top-bar { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
}




/* ==========================================================================
   THEME 6 — Friendly Rounded · GLOBAL LAYER (loaded first on every page)
   Feels like a friendly mobile app: soft, rounded, calm purple + fresh mint.
   Rules: no sharp corners · purple = trust (text, primary buttons)
          mint = relief (icons, chips, secondary accents) · lavender/white rhythm
          no red, no black · shadows are soft, spread and purple-tinted
   ========================================================================== */

body.theme-6 {
  --t6-purple: #5A2D82;
  --t6-purple-deep: #34184F;
  --t6-purple-soft: #E4D8F2;
  --t6-mint: #6FD6A8;
  --t6-mint-soft: #E2F7EE;
  --t6-lavender: #F7F5FB;
  --t6-lavender-mid: #ECE6F5;
  --t6-ink: #3D2C54;
  --t6-muted: #786C8C;
  --t6-shadow-sm: 0 6px 18px rgba(90, 45, 130, 0.08);
  --t6-shadow: 0 18px 40px -12px rgba(90, 45, 130, 0.18);
  --t6-shadow-lg: 0 28px 60px -18px rgba(90, 45, 130, 0.28);
  --t6-radius-lg: 2rem;
  --t6-radius-md: 1.25rem;
  --t6-ease: cubic-bezier(.34, 1.56, .64, 1);
  background: #ffffff;
  color: var(--t6-ink);
  -webkit-font-smoothing: antialiased;
}

/* Rounded, friendly Arabic type everywhere (icons keep their icon font) */
body.theme-6,
body.theme-6 *:not(i):not([class*="fa-"]):not(svg):not(path) {
  font-family: 'Baloo Bhaijaan 2', 'Tajawal', 'Cairo', sans-serif;
}
body.theme-6 h1, body.theme-6 h2, body.theme-6 h3 { letter-spacing: 0; }

body.theme-6 ::selection { background: var(--t6-mint); color: var(--t6-purple-deep); }
body.theme-6 a:focus-visible,
body.theme-6 button:focus-visible { outline: 3px solid var(--t6-mint); outline-offset: 3px; border-radius: 999px; }

/* gentle, shared motion */
@keyframes t6-morph {
  0%, 100% { border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%; }
  33%      { border-radius: 42% 58% 45% 55% / 58% 42% 58% 42%; }
  66%      { border-radius: 50% 50% 38% 62% / 44% 56% 44% 56%; }
}
@keyframes t6-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes t6-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -18px); } }
@media (prefers-reduced-motion: reduce) {
  body.theme-6 *, body.theme-6 *::before, body.theme-6 *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------------- TOP BAR: a calm lavender strip with pill links ---------------- */
body.theme-6 .ebtb20-top-bar {
  background: var(--t6-lavender);
  border: 0;
  box-shadow: none;
}
body.theme-6 .ebtb20-contact-link {
  background: #fff;
  color: var(--t6-purple);
  border-radius: 999px;
  padding: 5px 14px 5px 6px;
  box-shadow: var(--t6-shadow-sm);
  font-weight: 600;
  gap: 8px;
  transition: transform .3s var(--t6-ease), box-shadow .3s ease;
}
body.theme-6 .ebtb20-contact-link i {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--t6-mint-soft); color: var(--t6-purple);
  font-size: 11px;
}
body.theme-6 .ebtb20-contact-link:hover { transform: translateY(-2px); box-shadow: var(--t6-shadow); color: var(--t6-purple); }
body.theme-6 .ebtb20-social-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--t6-purple);
  box-shadow: var(--t6-shadow-sm);
  transition: background .3s ease, transform .3s var(--t6-ease);
}
body.theme-6 .ebtb20-social-icon:hover { background: var(--t6-mint); color: var(--t6-purple-deep); transform: translateY(-2px); }

/* phones: every section header is centred (label, title, subtitle), matching the centred eyebrow pill */
@media (max-width: 768px) {
  body.theme-6 :is(.ebsrv20-header, .ebpt20-header, .ebfq20-header, .ebabo20-header, .ebsrvl1__header, .ebci20-header, .ebtst1__header, .ebprvw1__header, .ebhro-serv20-sec-header) {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.theme-6 :is(.ebsrv20-title, .ebpt20-title, .ebfq20-title, .ebabo20-title, .ebsrvl1__title, .ebci20-title, .ebtst1__title, .ebprvw1__title, .ebhro-serv20-sec-title,
                   .ebsrv20-subtitle, .ebpt20-subtitle, .ebfq20-subtitle, .ebabo20-subtitle, .ebsrvl1__subtitle, .ebci20-subtitle, .ebtst1__subtitle, .ebprvw1__subtitle) {
    text-align: center !important;
    margin-inline: auto !important;
  }
  body.theme-6 .ebpt20-step-desc,
  body.theme-6 .ebpt20-step-title { text-align: center !important; }
}