/* ================================================================
   CUSTOM DESIGN OVERRIDES — CustomerCare-Supports
   Premium redesign layer on top of Astra + Elementor base styles
   ================================================================ */

/* ── FORCE OVERRIDE all remaining red CSS variables ─────────── */
:root {
  /* Astra global color vars */
  --ast-global-color-1:       #1e3a8a !important;
  --ast-global-color-4:       #f0f4ff !important;
  --ast-global-color-6:       #d4e4ff !important;
  --ast-global-color-7:       #0a1628 !important;
  /* Elementor mirrored vars */
  --e-global-color-astglobalcolor1: #1e3a8a !important;
  --e-global-color-astglobalcolor4: #f0f4ff !important;
  --e-global-color-astglobalcolor6: #d4e4ff !important;
  --e-global-color-astglobalcolor7: #0a1628 !important;
}

/* Catch any element that still uses the old red as background */
[style*="#CC1939"],
[style*="#cc1939"],
[style*="#C61635"],
[style*="#DD183B"],
[style*="#FFEDE6"],
[style*="#FFD1BF"] {
  background-color: #f0f4ff !important;
  color: #1e3a8a !important;
}


/* ── Google Font Import ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

/* ── CSS Variables / Design Tokens ──────────────────────────── */
:root {
  --brand-blue:        #0f57fb;
  --brand-blue-dark:   #0a3dbf;
  --brand-blue-light:  #4a84ff;
  --brand-gradient:    linear-gradient(135deg, #0f57fb 0%, #1e3a8a 100%);
  --brand-gradient-h:  linear-gradient(135deg, #1e3a8a 0%, #0f57fb 100%);
  --accent-orange:     #ff6b2b;
  --text-dark:         #0f172a;
  --text-mid:          #334155;
  --text-light:        #64748b;
  --bg-light:          #f0f4ff;
  --bg-white:          #ffffff;
  --shadow-sm:         0 2px 8px rgba(15,87,251,.10);
  --shadow-md:         0 6px 24px rgba(15,87,251,.14);
  --shadow-lg:         0 16px 48px rgba(15,87,251,.18);
  --radius-sm:         8px;
  --radius-md:         14px;
  --radius-lg:         24px;
  --transition:        all 0.28s cubic-bezier(.4,0,.2,1);
}

/* ── Base Typography ─────────────────────────────────────────── */
body, button, input, select, textarea {
  font-family: 'Inter', 'Open Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-image-box-title,
.elementor-icon-box-title,
.hfe-infocard-title,
.site-title {
  font-family: 'Poppins', 'Josefin Sans', sans-serif !important;
  letter-spacing: -0.02em;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f0f4ff; }
::-webkit-scrollbar-thumb { background: var(--brand-blue); border-radius: 3px; }

/* ── HEADER / NAVIGATION ─────────────────────────────────────── */
.main-header-bar,
#masthead,
.ast-primary-header-bar {
  background: #fff !important;
  box-shadow: 0 2px 20px rgba(15,87,251,.09) !important;
  transition: box-shadow .3s ease !important;
}

/* Nav links */
.main-header-menu .menu-link,
.ast-builder-menu-1 .menu-item > .menu-link {
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  font-size: 0.88rem !important;
  position: relative;
  transition: color .25s ease !important;
}

/* Active nav underline indicator */
.ast-builder-menu-1 .menu-item > .menu-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  width: 0; height: 2px;
  background: var(--brand-blue);
  border-radius: 2px;
  transition: all .25s ease;
  transform: translateX(-50%);
}
.ast-builder-menu-1 .menu-item:hover > .menu-link::after,
.ast-builder-menu-1 .current-menu-item > .menu-link::after { width: 80%; }

/* CTA button in nav */
.ast-custom-button,
.ast-builder-button-wrap .ast-custom-button {
  background: var(--brand-gradient) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  box-shadow: 0 4px 14px rgba(15,87,251,.30) !important;
  border: none !important;
  transition: var(--transition) !important;
}
.ast-custom-button:hover,
.ast-builder-button-wrap .ast-custom-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(15,87,251,.40) !important;
  background: var(--brand-gradient-h) !important;
}

/* ── PAGE HERO BANNER (first elementor section) ──────────────── */
.elementor-element.e-parent:first-child,
.elementor .e-con.e-parent:first-of-type {
  position: relative;
}

/* Hero heading (h1 in first section) */
.elementor-element.e-parent:first-child .elementor-heading-title,
.elementor-element.e-parent:first-of-type h1 {
  text-shadow: 0 2px 20px rgba(15,87,251,.12);
}

/* ── SECTION BACKGROUNDS (alternating) ───────────────────────── */
/* Light blue tint for alternate sections — but NOT for sections with dark backgrounds */
.elementor-element.e-parent:nth-child(even):not([style*="background-color"]):not([style*="background-image"]) {
  background-color: #f7faff !important;
}

/* ── ELEMENTOR CONTAINERS — Cards/Boxes ──────────────────────── */
.e-con.e-child {
  border-radius: var(--radius-md);
  transition: var(--transition);
}

/* Service icon boxes */
.elementor-icon-box-wrapper {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 22px !important;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15,87,251,.06);
  transition: var(--transition);
  height: 100%;
}
.elementor-icon-box-wrapper:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: rgba(15,87,251,.18);
}

/* Icon color */
.elementor-icon-box-icon .elementor-icon,
.elementor-icon-box-icon i {
  color: var(--brand-blue) !important;
  background: var(--bg-light);
  border-radius: 50%;
  width: 60px; height: 60px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem !important;
  margin-bottom: 16px;
  transition: var(--transition);
}
.elementor-icon-box-wrapper:hover .elementor-icon-box-icon .elementor-icon,
.elementor-icon-box-wrapper:hover .elementor-icon-box-icon i {
  background: var(--brand-blue);
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(15,87,251,.35);
}

/* Icon box titles */
.elementor-icon-box-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin-bottom: 8px !important;
}

/* Icon box description text */
.elementor-icon-box-description {
  font-size: 0.88rem !important;
  color: var(--text-light) !important;
  line-height: 1.65 !important;
}

/* ── IMAGE BOX (brand logos + description) ───────────────────── */
.elementor-image-box-wrapper {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15,87,251,.07);
}
.elementor-image-box-img img {
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.elementor-image-box-img img:hover { transform: scale(1.03); }
.elementor-image-box-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
}
.elementor-image-box-description {
  color: var(--text-mid) !important;
  line-height: 1.7 !important;
}

/* ── INFO CARD (hfe-infocard) ────────────────────────────────── */
.hfe-infocard {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
  border-radius: var(--radius-lg);
  padding: 32px;
  border-left: 4px solid var(--brand-blue);
}
.hfe-infocard-title {
  font-size: 1.4rem !important;
  color: var(--brand-blue) !important;
  font-weight: 700 !important;
}
.hfe-infocard-text p {
  color: var(--text-mid) !important;
  line-height: 1.75 !important;
}

/* ── FORMS ───────────────────────────────────────────────────── */
.wpr-form,
.elementor-form {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(15,87,251,.10);
}

.wpr-form-field,
.elementor-field {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  font-size: 0.9rem !important;
  transition: var(--transition) !important;
  background: #f8fafc !important;
  color: var(--text-dark) !important;
  width: 100%;
}
.wpr-form-field:focus,
.elementor-field:focus {
  border-color: var(--brand-blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(15,87,251,.12) !important;
  outline: none !important;
}

.wpr-form-field-label,
.elementor-field-label {
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  color: var(--text-mid) !important;
  margin-bottom: 6px !important;
  display: block;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Select dropdown */
.wpr-select-wrap select,
.elementor-select-wrapper select {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  color: var(--text-dark) !important;
  font-size: 0.9rem !important;
  width: 100%;
  cursor: pointer;
  transition: var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.wpr-select-wrap select:focus { border-color: var(--brand-blue) !important; outline: none; }

/* Submit button */
.wpr-button,
.elementor-button[type="submit"],
button[type="submit"] {
  background: var(--brand-gradient) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(15,87,251,.35) !important;
  transition: var(--transition) !important;
  color: #fff !important;
  width: 100%;
  cursor: pointer;
}
.wpr-button:hover,
button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(15,87,251,.45) !important;
}

/* ── SECTION HEADINGS ────────────────────────────────────────── */
.elementor-heading-title {
  position: relative;
}

/* h2 section headings — add subtle underline accent */
h2.elementor-heading-title {
  display: inline-block;
}
h2.elementor-heading-title::after {
  content: '';
  display: block;
  width: 50px; height: 3px;
  background: var(--brand-gradient);
  border-radius: 2px;
  margin-top: 10px;
}

/* ── TEXT EDITOR SECTIONS ────────────────────────────────────── */
.elementor-widget-text-editor p {
  color: var(--text-mid) !important;
  line-height: 1.8 !important;
}

/* ── DIVIDER ─────────────────────────────────────────────────── */
.elementor-divider-separator {
  border-color: var(--brand-blue) !important;
  border-width: 2px !important;
  opacity: 0.25;
}

/* ── ICON LIST (checklist) ───────────────────────────────────── */
.elementor-icon-list-item {
  padding: 8px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: var(--transition);
}
.elementor-icon-list-item:last-child { border-bottom: none !important; }
.elementor-icon-list-item:hover { padding-left: 6px !important; }

.elementor-icon-list-icon i {
  color: var(--brand-blue) !important;
  font-size: 1.1rem !important;
}
.elementor-icon-list-text {
  color: var(--text-mid) !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
}

/* ── CONTACT INFO SECTION ────────────────────────────────────── */
/* Contact detail cards in service pages */
.elementor-element[data-id="760de87"] .elementor-icon-box-wrapper,
.elementor-element .e-con.e-child .elementor-icon-box-wrapper {
  text-align: center;
}

/* ── "WHY CHOOSE US" SECTION ─────────────────────────────────── */
.elementor-icon-box-title h3,
.elementor-icon-box-title span {
  color: var(--brand-blue) !important;
}

/* ── TESTIMONIAL / COUNTER SECTIONS ─────────────────────────── */
.elementor-counter-number-wrapper {
  color: var(--brand-blue) !important;
  font-weight: 800 !important;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-primary-footer-wrap,
.site-footer {
  background: linear-gradient(160deg, #0f172a 0%, #1e2d5a 100%) !important;
  color: #cbd5e1 !important;
}

.site-primary-footer-wrap .widget-title,
.site-primary-footer-wrap h2 {
  color: #fff !important;
  font-size: 1rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-blue);
  display: inline-block;
  margin-bottom: 16px !important;
}

.site-primary-footer-wrap .aheto-heading__title,
.site-primary-footer-wrap li,
.site-primary-footer-wrap p,
.site-primary-footer-wrap a {
  color: #94a3b8 !important;
  font-size: 0.9rem !important;
}
.site-primary-footer-wrap a:hover { color: var(--brand-blue-light) !important; }

/* Footer nav links */
.site-primary-footer-wrap .aheto-heading__title {
  font-weight: 400 !important;
  line-height: 2 !important;
}

/* Social icons in footer */
.ast-footer-social-wrap .ast-builder-social-element {
  background: rgba(255,255,255,.08) !important;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.ast-footer-social-wrap .ast-builder-social-element:hover {
  background: var(--brand-blue) !important;
  transform: translateY(-3px);
}
.ast-footer-social-wrap svg { fill: #94a3b8 !important; }
.ast-footer-social-wrap .ast-builder-social-element:hover svg { fill: #fff !important; }

/* Bottom bar */
.site-below-footer-wrap {
  background: #0a0f1e !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.ast-footer-copyright {
  color: #64748b !important;
  font-size: 0.82rem !important;
}

/* ── FLOATING CONTACT BUTTONS (WhatsApp / Phone) ─────────────── */
/* Chaty plugin buttons */
.chaty-channel-wrap,
[class*="chaty"] {
  border-radius: 50% !important;
}

/* ── PAGE TITLE BAND (section with service name) ─────────────── */
/* First Elementor section with the page heading */
.elementor-element.e-parent:first-child {
  background: linear-gradient(135deg, #0f57fb10 0%, #1e3a8a08 100%) !important;
  border-bottom: 3px solid rgba(15,87,251,.12);
  padding-bottom: 32px !important;
}

.elementor-element.e-parent:first-child h1.elementor-heading-title {
  color: var(--brand-blue) !important;
  font-size: clamp(1.8rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
}

/* ── ENQUIRY HEADING ─────────────────────────────────────────── */
h5.elementor-heading-title {
  color: var(--text-dark) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--brand-blue);
  display: inline-block;
  margin-bottom: 16px !important;
}

/* ── GLOBAL BUTTON overrides ─────────────────────────────────── */
button, .button,
input[type="submit"],
input[type="button"],
.ast-button {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  transition: var(--transition) !important;
}

/* ── ENTRY CONTENT ───────────────────────────────────────────── */
.entry-content { padding: 0 !important; }

/* ── SCROLL REVEAL ANIMATION (CSS only) ──────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.elementor-widget-container {
  animation: fadeInUp .5s ease both;
}

/* ── RESPONSIVE TWEAKS ───────────────────────────────────────── */
@media (max-width: 768px) {
  .elementor-icon-box-wrapper { padding: 20px 16px !important; }
  .wpr-form { padding: 18px 16px; }
  h2.elementor-heading-title::after { margin-left: auto; margin-right: auto; }
}

@media (max-width: 480px) {
  .elementor-element.e-parent:first-child h1.elementor-heading-title {
    font-size: 1.8rem !important;
  }
}

/* ── SELECTION ───────────────────────────────────────────────── */
::selection {
  background: var(--brand-blue);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   DARK SECTION TEXT FIX v3 — CORRECT APPROACH
   Only targets actual DARK SECTION containers, not icon widgets.
   Uses JS to add .has-dark-bg class at runtime (see footer script).
   ══════════════════════════════════════════════════════════════ */

/* Class added by JS dark-section detector */
.has-dark-bg,
.has-dark-bg .elementor-widget-container,
.has-dark-bg .e-con-inner {
  color: #ffffff !important;
}

.has-dark-bg .elementor-widget-text-editor p,
.has-dark-bg .elementor-widget-container p,
.has-dark-bg .elementor-heading-title,
.has-dark-bg h1, .has-dark-bg h2, .has-dark-bg h3,
.has-dark-bg h4, .has-dark-bg h5, .has-dark-bg h6,
.has-dark-bg .elementor-icon-box-title,
.has-dark-bg .elementor-icon-box-title span,
.has-dark-bg .elementor-icon-box-description,
.has-dark-bg .elementor-image-box-title,
.has-dark-bg .elementor-image-box-description,
.has-dark-bg a:not(.ast-custom-button):not(.elementor-button),
.has-dark-bg span:not(.elementor-icon):not(.elementor-toggle-icon-closed):not(.elementor-toggle-icon-opened),
.has-dark-bg li,
.has-dark-bg .elementor-toggle-title {
  color: #ffffff !important;
}

/* Icons inside dark sections */
.has-dark-bg .elementor-icon-box-icon .elementor-icon,
.has-dark-bg .elementor-icon-box-icon i {
  color: #ffffff !important;
  background: rgba(255,255,255,0.15) !important;
  box-shadow: none !important;
}

/* List item bullets in dark sections */
.has-dark-bg .elementor-icon-list-icon i {
  color: rgba(255,255,255,0.7) !important;
}

/* ── LIGHT-BG CHILDREN INSIDE DARK SECTIONS — restore dark text ── */
/* White cards / boxes inside dark sections should keep dark text   */
.has-dark-bg .has-light-bg,
.has-dark-bg .has-light-bg .elementor-widget-text-editor p,
.has-dark-bg .has-light-bg .elementor-heading-title,
.has-dark-bg .has-light-bg h1,
.has-dark-bg .has-light-bg h2,
.has-dark-bg .has-light-bg h3,
.has-dark-bg .has-light-bg h4,
.has-dark-bg .has-light-bg h5,
.has-dark-bg .has-light-bg h6,
.has-dark-bg .has-light-bg .elementor-icon-box-title,
.has-dark-bg .has-light-bg .elementor-icon-box-title span,
.has-dark-bg .has-light-bg .elementor-icon-box-description,
.has-dark-bg .has-light-bg .elementor-image-box-title,
.has-dark-bg .has-light-bg .elementor-image-box-description,
.has-dark-bg .has-light-bg p,
.has-dark-bg .has-light-bg span,
.has-dark-bg .has-light-bg a,
.has-dark-bg .has-light-bg li {
  color: var(--text-dark) !important;
}

/* Icons in light-bg cards inside dark sections — keep blue */
.has-dark-bg .has-light-bg .elementor-icon-box-icon .elementor-icon,
.has-dark-bg .has-light-bg .elementor-icon-box-icon i {
  color: var(--brand-blue) !important;
  background: var(--bg-light) !important;
}