/* ═══════════════════════════════════════════════════════════════════
   hero-fix.css — P2B Services — NUCLEAR OVERRIDE v2
   ─────────────────────────────────────────────────────────────────
   Uses "html body" prefix on EVERY selector for maximum specificity.
   This beats inline <style> blocks, external CSS, everything.

   ADD THIS AS THE VERY LAST <link> BEFORE </head>:
   <link rel="stylesheet" href="css/hero-fix.css">
   
   IMPORTANT: After uploading, HARD REFRESH your browser:
   Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. HERO SIZE ─────────────────────────────────────────── */
html body .ilg-hero,
html body section.ilg-hero {
  min-height: 420px !important;
  max-height: 560px !important;
  padding: 70px 0 65px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
}

/* ─── 2. HERO GRADIENT ─────────────────────────────────────── */
html body .ilg-hero,
html body section.ilg-hero {
  background: linear-gradient(135deg, #1a1464 0%, #2d2d8f 60%, #E91E8C 100%) !important;
  background-color: #1a1464 !important;
}

/* ─── 3. CROSS PATTERN (::before) ──────────────────────────── */
html body .ilg-hero::before,
html body section.ilg-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(233,30,140,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(45,45,143,.2) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(233,30,140,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(45,45,143,.2) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-color: transparent !important;
  background-repeat: repeat !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

/* ─── 4. WAVE CLIP (::after) ───────────────────────────────── */
html body .ilg-hero::after,
html body section.ilg-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  height: 60px !important;
  width: 100% !important;
  background: #fff !important;
  background-color: #fff !important;
  clip-path: ellipse(55% 100% at 50% 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

/* ─── 5. CONTAINER Z-INDEX ─────────────────────────────────── */
html body .ilg-hero .container,
html body section.ilg-hero .container {
  position: relative !important;
  z-index: 2 !important;
}

/* ─── 6. HEADING ───────────────────────────────────────────── */
html body .ilg-hero h1 {
  color: #fff !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-bottom: 14px !important;
  font-family: 'Sora', sans-serif !important;
}
html body .ilg-hero h1 span {
  color: #ff4db8 !important;
  -webkit-text-fill-color: #ff4db8 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* ─── 7. EYEBROW ───────────────────────────────────────────── */
html body .hero-eyebrow {
  display: inline-block !important;
  font-size: 11px !important;
  padding: 4px 14px !important;
  margin-bottom: 12px !important;
}

/* ─── 8. SUB TEXT ──────────────────────────────────────────── */
html body .ilg-hero .hero-sub {
  font-size: 15px !important;
  color: rgba(255,255,255,.88) !important;
  max-width: 650px !important;
  margin: 0 auto 20px !important;
  line-height: 1.65 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ─── 9. BADGES ────────────────────────────────────────────── */
html body .hero-badges {
  gap: 8px !important;
  margin-bottom: 22px !important;
  max-width: 750px !important;
}
html body .badge-pill {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-family: 'Sora', sans-serif !important;
}
html body .badge-pill span {
  color: #ff4db8 !important;
}

/* ─── 10. BUTTONS ──────────────────────────────────────────── */
html body .btn-hero-primary {
  background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important;
  color: #fff !important;
  padding: 13px 32px !important;
  border-radius: 50px !important;
  font-size: 15px !important;
  box-shadow: 0 6px 24px rgba(233,30,140,.50) !important;
  font-family: 'Sora', sans-serif !important;
}
html body .btn-hero-outline {
  border: 2px solid rgba(255,255,255,.55) !important;
  color: #fff !important;
  padding: 11px 28px !important;
  border-radius: 50px !important;
  background: transparent !important;
  font-family: 'Sora', sans-serif !important;
}

/* ─── 11. STATS STRIP ──────────────────────────────────────── */
html body .ilg-stats {
  background: #1a1464 !important;
  padding: 24px 0 !important;
}
html body .ilg-stats .s-num {
  font-size: 32px !important;
  color: #ff4db8 !important;
  font-family: 'Sora', sans-serif !important;
}
html body .counter-strip {
  background: #1a1464 !important;
}
html body .c-num {
  font-size: 32px !important;
  color: #ff4db8 !important;
  font-family: 'Sora', sans-serif !important;
}

/* ─── 12. URGENCY BAR ──────────────────────────────────────── */
html body .urgency-bar {
  background: linear-gradient(135deg, #1a1464 0%, #2d2d8f 60%, #E91E8C 100%) !important;
}
html body .urgency-bar a {
  color: #ff4db8 !important;
}

/* ─── 13. BREADCRUMB ───────────────────────────────────────── */
html body .ilg-breadcrumb {
  background: #f8f4fb !important;
}
html body .ilg-breadcrumb a {
  color: #E91E8C !important;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — NEW PAGES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:991px) {
  html body .ilg-hero { min-height:380px !important; max-height:520px !important; padding:65px 0 60px !important; }
  html body .ilg-hero h1 { font-size:34px !important; }
  html body .ilg-hero .hero-sub { font-size:14px !important; }
}
@media (max-width:767px) {
  html body .ilg-hero { min-height:auto !important; max-height:none !important; padding:80px 0 55px !important; }
  html body .ilg-hero h1 { font-size:28px !important; }
  html body .ilg-hero .hero-sub { font-size:13px !important; }
  html body .badge-pill { font-size:11px !important; padding:4px 10px !important; }
  html body .ilg-stats .s-num, html body .c-num { font-size:26px !important; }
}
@media (max-width:576px) {
  html body .ilg-hero { padding:90px 0 55px !important; }
  html body .ilg-hero h1 { font-size:24px !important; }
  html body .badge-pill { font-size:10px !important; padding:3px 8px !important; }
  html body .hero-btn-group { flex-direction:column !important; align-items:center !important; }
  html body .btn-hero-primary, html body .btn-hero-outline { width:80% !important; text-align:center !important; }
}


/* ═══════════════════════════════════════════════════════════════
   OLD HERO (.breadcrumb_bg pages)
   ═══════════════════════════════════════════════════════════════ */

/* Kill ALL bg_ background images */
html body .breadcrumb_bg[class*="bg_"],
html body section.breadcrumb[class*="bg_"],
html body .breadcrumb_bg,
html body .breadcrumb_bg1,
html body .breadcrumb_bg2 {
  background-image: none !important;
}

/* Apply gradient + sizing */
html body section.breadcrumb.breadcrumb_bg,
html body .breadcrumb.breadcrumb_bg,
html body section.breadcrumb[class*="bg_"] {
  background: linear-gradient(135deg, #1a1464 0%, #2d2d8f 60%, #E91E8C 100%) !important;
  min-height: 420px !important;
  max-height: 560px !important;
  padding: 70px 0 65px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* Wave clip */
html body .breadcrumb::after,
html body .breadcrumb:after {
  content: '' !important;
  background: #fff !important;
  background-color: #fff !important;
  opacity: 1 !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  height: 60px !important;
  width: 100% !important;
  clip-path: ellipse(55% 100% at 50% 100%) !important;
  z-index: 1 !important;
}

/* Cross pattern */
html body .breadcrumb::before,
html body .breadcrumb:before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(233,30,140,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(45,45,143,.2) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(233,30,140,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(45,45,143,.2) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-color: transparent !important;
  background-repeat: repeat !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

/* Old hero content above overlays */
html body .breadcrumb .breadcrumb_iner {
  position: relative !important;
  z-index: 2 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .breadcrumb .breadcrumb_iner .breadcrumb_iner_item {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  text-align: center !important;
}
html body .breadcrumb_iner .breadcrumb_iner_item h1,
html body .breadcrumb .breadcrumb_iner .breadcrumb_iner_item h2 {
  font-size: 40px !important;
  font-weight: 800 !important;
  font-family: 'Sora', sans-serif !important;
  color: #fff !important;
  text-transform: none !important;
}
html body .breadcrumb .breadcrumb_iner .breadcrumb_iner_item p {
  color: #c3d9f5 !important;
  font-family: 'DM Sans', sans-serif !important;
}
html body .breadcrumb_bg .custom-btn,
html body .breadcrumb_bg .btnaa-12,
html body .breadcrumb_iner .custom-btn,
html body .breadcrumb_iner .btnaa-12 {
  background: linear-gradient(135deg, #E91E8C 0%, #c4176f 100%) !important;
  color: #fff !important;
  padding: 14px 36px !important;
  border-radius: 50px !important;
  font-family: 'Sora', sans-serif !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(233,30,140,.50) !important;
}

/* Old hero responsive */
@media (max-width:991px) {
  html body section.breadcrumb.breadcrumb_bg,
  html body section.breadcrumb[class*="bg_"] { min-height:380px !important; max-height:520px !important; padding:65px 0 60px !important; }
}
@media (max-width:767px) {
  html body section.breadcrumb.breadcrumb_bg,
  html body section.breadcrumb[class*="bg_"] { min-height:auto !important; max-height:none !important; padding:80px 0 55px !important; }
  html body .breadcrumb_iner .breadcrumb_iner_item h1,
  html body .breadcrumb .breadcrumb_iner .breadcrumb_iner_item h2 { font-size:28px !important; }
}
@media (max-width:576px) {
  html body section.breadcrumb.breadcrumb_bg,
  html body section.breadcrumb[class*="bg_"] { padding:90px 0 55px !important; }
  html body .breadcrumb_iner .breadcrumb_iner_item h1,
  html body .breadcrumb .breadcrumb_iner .breadcrumb_iner_item h2 { font-size:24px !important; }
}