.elementor-kit-1645{--e-global-color-primary:#0B1220;--e-global-color-secondary:#0E2A47;--e-global-color-text:#F5F7FA;--e-global-color-accent:#E5C44A;--e-global-color-c9170cd:#B6C0CC;--e-global-color-7d2f798:#223047;--e-global-color-62b8169:#F7F9FC;--e-global-color-e23c0c0:#121B2F;--e-global-color-2df9dc2:#2ECC71;--e-global-color-c24a90d:#F5A623;--e-global-color-c69f239:#E74C3C;--e-global-color-b681175:#D45121;--e-global-color-4be79d3:#B8860B;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-1645 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =====================================================
   SUFI APPAREL — HERO FOCUSED, CLEAN & ELITE
   - This stylesheet keeps only the classes you said you use
     (`sa-hero`, `sa-hero-card`, `saho-card`, `sa-hero-card--left`,
      `sa-hero-card--right`, `sa-hero-kicker`, `sa-hero-copy`, `sa-cta`,
      `sa-cta--secondary`, and `sa-btn`).
   - Upgraded spacing, typography, glass card treatment, and CTA polish.
   - Accessibility and reduced-motion respected.
   ===================================================== */

:root{
  --sa-navy: #0F2A44;
  --sa-gold: #E6C84F;
  --sa-text: #F5F7FA;
  --sa-ink: rgba(10,20,34,0.92);
  --sa-transition: 240ms;
  --sa-shadow-strong: 0 24px 64px rgba(0,0,0,0.55);
  --sa-shadow-soft: 0 10px 30px rgba(0,0,0,0.4);
}

/* screen-reader helper */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --------------------
   HERO SECTION WRAPPER
   -------------------- */
.sa-hero{
  padding: 56px 20px;
  display:flex;               /* two-column hero using your markup */
  gap:28px;
  align-items:flex-start;
  justify-content:center;
  background: transparent;
}

/* optional inner limiter: wrap your two cards in a container with class `sa-hero-inner` */
.sa-hero-inner{ max-width:1240px; width:100%; margin:0 auto; display:flex; gap:28px; }

/* direct children layout when you use `sa-hero` without `.sa-hero-inner` */
.sa-hero > .sa-hero-card{ flex: 0 1 48%; min-width:320px; box-sizing:border-box; }
.sa-hero > .sa-hero-card:first-child{ flex-basis:56%; }
.sa-hero > .sa-hero-card:last-child{ flex-basis:40%; }

@media (max-width:900px){
  .sa-hero{ display:block; padding:28px 16px; }
  .sa-hero > .sa-hero-card{ width:100%; flex-basis:auto; min-width:0; margin-bottom:18px; }
  .sa-hero-inner{ display:block; }
}

/* --------------------
   GLASS CARD (shared)
   -------------------- */
.saho-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(9,20,36,0.64), rgba(9,20,36,0.44));
  box-shadow: var(--sa-shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ======================
   Aurora multi-shade drift
   Adds moving soft multi-gradient glow behind the glass card
   ====================== */
.saho-card::before{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:-1;
  background:
    radial-gradient(55% 45% at 15% 25%, rgba(61,130,255,.35) 0%, rgba(61,130,255,0) 60%),
    radial-gradient(45% 40% at 85% 20%, rgba(230,196,92,.28) 0%, rgba(230,196,92,0) 62%),
    radial-gradient(60% 55% at 70% 85%, rgba(22,199,255,.18) 0%, rgba(22,199,255,0) 60%),
    radial-gradient(55% 50% at 25% 80%, rgba(120,90,255,.16) 0%, rgba(120,90,255,0) 60%),
    linear-gradient(120deg, rgba(8,31,68,1) 0%, rgba(5,12,26,1) 55%, rgba(8,31,68,1) 100%);
  filter: blur(26px) saturate(115%);
  transform: translate3d(0,0,0);
  animation: saAuroraDrift 14s ease-in-out infinite;
}

.saho-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 25%, rgba(0,0,0,.18) 100%);
  pointer-events:none;
}

@keyframes saAuroraDrift{
  0%   { transform: translate(-2%, -1%) scale(1.02) rotate(0deg); }
  25%  { transform: translate( 3%, -2%) scale(1.06) rotate(2deg); }
  50%  { transform: translate( 2%,  3%) scale(1.03) rotate(0deg); }
  75%  { transform: translate(-3%,  2%) scale(1.06) rotate(-2deg); }
  100% { transform: translate(-2%, -1%) scale(1.02) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce){
  .saho-card::before{ animation: none !important; }
}

/* utility glass class (keeps semantic `saho-card` but available separately too) */
.sa-glass{
  background: rgba(10, 22, 45, .55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.sa-hero-card{ padding:34px; }
.sa-hero-card--left{ padding:42px; }
.sa-hero-card--right{ padding:28px; }

/* make sure long words wrap instead of forcing narrow columns */
.sa-hero-card{ overflow-wrap:break-word; word-break:break-word; }


/* --------------------
   HERO KICKER / HEADING
   (you use `sa-hero-kicker` for the visual headline)
   -------------------- */
.sa-hero-kicker{
  display:block;
  color: var(--sa-gold);
  font-weight:800;
  line-height:1.02;
  /* responsive heading size — tune as needed in Elementor */
  font-size: clamp(28px, 5.2vw, 48px);
  letter-spacing: -0.5px;
  margin: 0 0 10px 0;
  text-shadow: 0 6px 22px rgba(0,0,0,0.45);
  word-break:break-word;
  hyphens:auto;
  position: relative;
}

/* refined hand-drawn underline that sits under the kicker */
/* EXTRAORDINARY: Dynamic glowing gradient bar with shimmer animation */
.sa-hero-kicker::after{
  content:"";
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  width: min(88%, 600px);
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, 
    rgba(230,196,79, 0) 0%, 
    rgba(230,196,79, 0.8) 15%, 
    rgba(230,196,79, 0.98) 50%, 
    rgba(230,196,79, 0.8) 85%, 
    rgba(230,196,79, 0) 100%);
  filter: blur(1px) saturate(130%) brightness(1.08);
  transform: translateX(-50%) rotate(-0.5deg);
  opacity: 0.96;
  box-shadow: 
    0 0 16px rgba(230,196,79, 0.25),
    0 6px 18px rgba(230,196,79, 0.15),
    inset 0 1px 4px rgba(255,255,255, 0.12);
  transition: all var(--sa-transition) cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: saUnderlineShimmer 3.5s ease-in-out infinite;
}

/* Extraordinary shimmer & glow animation */
@keyframes saUnderlineShimmer {
  0% {
    opacity: 0.92;
    filter: blur(1px) saturate(120%) brightness(1.05);
    box-shadow: 
      0 0 12px rgba(230,196,79, 0.18),
      0 6px 18px rgba(230,196,79, 0.12),
      inset 0 1px 3px rgba(255,255,255, 0.08);
  }
  50% {
    opacity: 0.99;
    filter: blur(0.8px) saturate(135%) brightness(1.12);
    box-shadow: 
      0 0 28px rgba(230,196,79, 0.35),
      0 8px 26px rgba(230,196,79, 0.22),
      inset 0 1px 6px rgba(255,255,255, 0.16);
  }
  100% {
    opacity: 0.92;
    filter: blur(1px) saturate(120%) brightness(1.05);
    box-shadow: 
      0 0 12px rgba(230,196,79, 0.18),
      0 6px 18px rgba(230,196,79, 0.12),
      inset 0 1px 3px rgba(255,255,255, 0.08);
  }
}

/* small variation when you want a subtler kicker */
.sa-hero-kicker--small{ font-size: clamp(14px, 1.6vw, 18px); font-weight:700; color:var(--sa-gold); }

/* Responsive underline adjustments for tablet and mobile */
@media (max-width: 768px) {
  .sa-hero-kicker {
    margin: 0 0 8px 0;
  }
  
  .sa-hero-kicker::after {
    width: min(90%, 480px);
    height: 11px;
    top: calc(100% + 2px);
    filter: blur(0.9px) saturate(125%) brightness(1.06);
  }
}

@media (max-width: 480px) {
  .sa-hero-kicker {
    margin: 0 0 6px 0;
  }
  
  .sa-hero-kicker::after {
    width: min(92%, 340px);
    height: 10px;
    top: calc(100% + 1px);
    filter: blur(0.85px) saturate(128%) brightness(1.06);
  }
}
/* --------------------
   HERO BODY COPY
   -------------------- */
.sa-hero-copy{
  color: rgba(245,247,250,0.95);
  font-size:16px;
  line-height:1.66;
  margin:18px 0 22px 0;
  max-width: 54ch; /* keeps readable measure */
}

/* --------------------
   CTA WRAPPER & BUTTON
   `.sa-cta` is the wrapper, `.sa-btn` is the real clickable pill
   -------------------- */
.sa-cta{ display:flex; justify-content:center; align-items:center; padding:0; background:transparent; border:none; box-shadow:none; }
.sa-cta.sa-cta--secondary{ /* visual variant for wrapper if needed */ border-color: rgba(230,200,79,0.18); }

/* PRIME BUTTON — use this on the actual Button element or link */
.sa-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 28px; border-radius:999px; cursor:pointer;
  color: var(--sa-text); background: linear-gradient(180deg, rgba(8,30,52,0.98), var(--sa-navy));
  border: 1px solid rgba(230,200,79,0.44);
  box-shadow: 0 16px 50px rgba(8,28,50,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
  transition: transform var(--sa-transition) ease, box-shadow var(--sa-transition) ease, filter var(--sa-transition) ease;
}
.sa-btn::before{
  content:""; width:14px; height:14px; border-radius:50%; background:var(--sa-gold); display:inline-block; box-shadow:0 6px 18px rgba(230,200,79,0.16); flex:0 0 14px; margin-left: -8px; margin-right:6px;
}
.sa-btn:hover{ transform: translateY(-4px) scale(1.01); box-shadow: 0 30px 80px rgba(8,28,50,0.66), 0 0 22px rgba(230,200,79,0.08); }
.sa-btn:focus{ outline:none; box-shadow: 0 0 0 6px rgba(230,200,79,0.10), 0 20px 50px rgba(8,28,50,0.5); }

/* compact variant */
.sa-btn--compact{ padding:10px 18px; font-size:14px; }

/* make sure parent Elementor wrappers don't re-style the button into a second pill */
.sa-cta .elementor-widget-container{ padding:0 !important; }
.sa-cta a:not(.sa-btn), .sa-cta .elementor-icon-box-wrapper:not(.sa-btn){ padding:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; }

/* --------------------
   Accessibility & reduced-motion
   -------------------- */
@media (prefers-reduced-motion: reduce){
  .sa-btn, .sa-hero-kicker::after{ transition: none !important; animation: none !important; }
}

/* ================================
   SA SHADOW CARD (updated + premium)
   How to use:
   Put class "sa-card" on the INNER CONTAINER (your blue/black card)
================================== */

.sa-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(8,24,52,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 50px rgba(0,0,0,.30),
    0 10px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sa-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg,
    rgba(255,196,64,.22),
    rgba(65,140,255,.18),
    rgba(120,255,220,.12)
  );
  opacity:.55;
  filter: blur(14px);
}

.sa-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(520px 260px at 90% 80%, rgba(255,255,255,.06), transparent 60%);
  mix-blend-mode: overlay;
  opacity: .9;
}

/* Optional: hover lift (nice on desktop, harmless on mobile) */
.sa-card.sa-card--hover{
  transition: transform .25s ease, box-shadow .25s ease;
}
.sa-card.sa-card--hover:hover{
  transform: translateY(-3px);
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    0 12px 30px rgba(0,0,0,.20);
}

/* --------------------
   Designer notes (keep in-file for reference)
   - Use these classes exactly where indicated in Elementor widgets:
     * Section wrapper: `sa-hero`
     * (Optional) inner limiter: wrap the two hero cards in an element with `sa-hero-inner`
     * Left card: `sa-hero-card saho-card sa-hero-card--left`
         - Put the heading in an element with `sa-hero-kicker` (this replaces `sa-hero-title` usage)
         - Body paragraph(s): `sa-hero-copy`
         - CTA wrapper: `sa-cta`, actual button/link: `sa-btn`
     * Right card: `sa-hero-card saho-card sa-hero-card--right`
   - If the left heading still wraps too aggressively, increase its max font-size or
     reduce the text to a shorter headline. For ultimate polish, limit the copy
     width to `max-width:54ch` (already applied to `sa-hero-copy`).
   -------------------- */
/*Add this CSS also to stop highlighting:*/

body {
  user-select: none;
}/* End custom CSS */