/* ═══════════════════════════════════════════════════════════════════════════
   INSURE WITH AHAD — "Warm Trust / Human Premium" design system
   Loaded LAST. Single authoritative layer over the legacy Bootstrap theme.
   Fonts: Fraunces (display serif) + Inter (grotesk body). Navy + teal, warm paper.
═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1. Tokens ───────────────────────────── */
:root {
  /* Fonts */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ink / navy */
  --ink:        #0A1733;   /* primary "black" */
  --ink-900:    #060E22;   /* footer / deepest */
  --ink-700:    #1B2A4E;   /* hovers on dark, button hover */

  /* Teal — split */
  --teal:       #3DCEB2;   /* decorative / fills / on-dark only */
  --teal-ink:   #117C68;   /* AA-safe teal for small text on light */
  --teal-soft:  #E9F4F0;   /* tint wash */

  /* Surfaces */
  --paper:      #FBFAF7;   /* warm page bg */
  --stone:      #F4F2EC;   /* alternating band */
  --card:       #FFFFFF;   /* elevated cards */

  /* Text */
  --text:       #3A4860;
  --muted:      #5F687B;   /* AA on paper (5.36:1), stone (5.0:1) and white */
  --sand:       #C9A36A;   /* single heritage accent */

  /* Lines */
  --line:       #E7E3DA;
  --line-dark:  rgba(255,255,255,0.12);

  /* Radii */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;

  /* Elevation — hairline-first */
  --shadow-hairline: inset 0 0 0 1px var(--line);
  --shadow-xs: 0 1px 2px rgba(10,23,51,0.04);
  --shadow-sm: 0 2px 8px rgba(10,23,51,0.05), 0 1px 2px rgba(10,23,51,0.04);
  --shadow-md: 0 10px 28px rgba(10,23,51,0.08), 0 2px 6px rgba(10,23,51,0.04);
  --shadow-lg: 0 20px 48px rgba(10,23,51,0.10), 0 4px 12px rgba(10,23,51,0.05);
  --shadow-focus: 0 0 0 3px rgba(61,206,178,0.65); /* >=3:1 non-text contrast */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: all 0.4s var(--ease);

  /* Re-point legacy theme variables so existing rules inherit the new palette */
  --e-global-color-primary: var(--ink);
  --e-global-color-secondary: var(--ink);
  --e-global-color-text: var(--text);
  --e-global-color-accent: var(--teal);
  --color-border: var(--line);
  --color-off-white: var(--paper);
}

/* ───────────────────────────── 2. Base ───────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-text);
  color: var(--text);
  background: var(--paper);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--teal-soft); color: var(--ink); }

/* Headings — Fraunces display with fluid clamp scale */
h1, h2, h3 {
  font-family: var(--font-display) !important;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.014em;
}
h1 { font-size: clamp(2.5rem, 1.55rem + 3.8vw, 4.25rem) !important; line-height: 1.08 !important; letter-spacing: -0.018em !important; font-weight: 500 !important; }
h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem) !important; line-height: 1.12 !important; font-weight: 500 !important; }
h3 { font-size: clamp(1.5rem, 1.3rem + 0.85vw, 1.875rem) !important; line-height: 1.22 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }

/* h4/h5/h6 switch to Inter — small headings read cleaner in grotesk */
h4, h5, h6 { font-family: var(--font-text) !important; color: var(--ink); }
h4 { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem) !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: -0.005em !important; }
h5 { font-size: 1.125rem !important; line-height: 1.4 !important; font-weight: 600 !important; letter-spacing: -0.005em !important; }

/* Body copy */
p {
  font-family: var(--font-text) !important;
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem) !important;
  line-height: 1.7 !important;
  color: var(--text);
  letter-spacing: -0.011em;
}
.text-size-18, .text-size-16, .text-size-14 { font-family: var(--font-text) !important; }
.text-size-18 { font-size: 1.1875rem !important; line-height: 1.65 !important; }  /* lead = 19px (honest) */
.text-size-16 { font-size: 1rem !important; line-height: 1.7 !important; }
.text-size-14 { font-size: 0.9375rem !important; line-height: 1.65 !important; }
/* honest utility set (spec) */
.text-lead { font-size: 1.1875rem !important; line-height: 1.65 !important; font-family: var(--font-text) !important; }
.text-body { font-size: 1.0625rem !important; line-height: 1.7 !important; font-family: var(--font-text) !important; }
.text-sm   { font-size: 0.9375rem !important; line-height: 1.65 !important; font-family: var(--font-text) !important; }
.text-caption { font-size: 0.8125rem !important; line-height: 1.5 !important; color: var(--muted); font-family: var(--font-text) !important; }
a { color: var(--teal-ink); }

/* ───────────────────────────── 3. Eyebrow (one system) ─────────────────────────────
   Replaces 3 competing h6/hero-h5 eyebrow treatments + 4 tracking values. */
.benefit_content h6, .about_content h6, .service_content h6,
.faq_content h6, .testimonial_content h6, .contact_content h6,
.choose_content h6, .banner_content h5, .sub_banner_content h6 {
  font-family: var(--font-text) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--teal-ink) !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px !important;
}
.benefit_content h6::before, .about_content h6::before, .service_content h6::before,
.faq_content h6::before, .testimonial_content h6::before, .contact_content h6::before,
.choose_content h6::before, .banner_content h5::before, .sub_banner_content h6::before {
  content: ""; width: 24px; height: 1px; background: currentColor; display: inline-block; flex: 0 0 24px;
}
/* centered eyebrows (service/testimonial headers) */
.service_content.text-center h6, .testimonial_content.text-center h6 { justify-content: center; }
/* on-dark eyebrows */
.choose_content h6, .banner_content h5 { color: var(--teal) !important; }

/* heading → lead gap */
.benefit_content h2, .about_content h2, .service_content h2, .faq_content h2,
.testimonial_content h2, .contact_content h2, .choose_content h2 { margin-bottom: 20px !important; }

/* ───────────────────────────── 4. Buttons ───────────────────────────── */
.all_button, .cta-btn, .contact_us, .submit_now, .learn_more {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-text) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  transition: var(--transition);
  cursor: pointer;
}
/* Base / primary */
.all_button, .cta-btn, .contact_us, .submit_now {
  padding: 16px 32px !important;
  min-height: 52px;
  border-radius: var(--radius-sm) !important;
  font-size: 15px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  box-shadow: none !important;
}
/* reset legacy icon margins (style.css .all_button i{margin-left:22px}) — gap controls spacing */
.all_button i, .cta-btn i, .contact_us i, .submit_now i, .learn_more i {
  transition: transform 0.3s var(--ease) !important; margin-left: 0 !important;
}
.all_button:hover, .cta-btn:hover, .contact_us:hover, .submit_now:hover {
  background: var(--ink-700) !important;
  color: var(--paper) !important;
  border-color: var(--ink-700) !important;
}
.all_button:hover i, .cta-btn:hover i, .contact_us:hover i, .submit_now:hover i { transform: translateX(4px); }
.all_button:focus-visible, .cta-btn:focus-visible, .contact_us:focus-visible, .submit_now:focus-visible,
.learn_more:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--teal-ink); outline-offset: 2px; box-shadow: var(--shadow-focus) !important;
}
/* hero CTAs: defeat legacy fixed width:184px clamp so long labels never wrap */
.banner_content .all_button, .banner-con .banner_content .all_button { width: auto !important; }

/* Secondary (outline) */
.all_button.get_quote {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}
.all_button.get_quote:hover { background: var(--ink) !important; color: var(--paper) !important; }

/* Nav CTA — compact (override legacy height:52px / min-width:164px) */
.contact_us { padding: 12px 24px !important; min-height: 44px; height: auto !important; min-width: 0 !important; font-size: 14px !important; }

/* Ghost / learn-more */
.learn_more {
  padding: 12px 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  min-height: auto;
}
.learn_more:hover { color: var(--teal-ink) !important; background: transparent !important; }
.learn_more:hover i { transform: translateX(4px); }

/* On-dark buttons (hero + choose band) */
.banner_content .all_button.get_started,
.choose_content .all_button.get_started {
  background: var(--paper) !important; color: var(--ink) !important; border-color: var(--paper) !important;
}
.banner_content .all_button.get_started:hover,
.choose_content .all_button.get_started:hover { background: rgba(255,255,255,0.88) !important; color: var(--ink) !important; }
.banner_content .all_button.get_quote {
  background: transparent !important; color: var(--paper) !important; border: 1px solid rgba(255,255,255,0.4) !important;
}
.banner_content .all_button.get_quote:hover { border-color: var(--teal) !important; color: var(--teal) !important; background: transparent !important; }
.button_wrapper { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* ───────────────────────────── 5. Universal card ───────────────────────────── */
.beneft-box, .service-box, .testimonial-box, .accordion-card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease) !important;
  position: relative;
  box-shadow: none !important;
  overflow: hidden;
}
.beneft-box { padding: 32px !important; margin-bottom: 24px; }
.service-box { padding: 40px 32px !important; height: 100%; display: flex; flex-direction: column; }
/* hover — one governed lift + teal top accent (universal across all 3 card types) */
.beneft-box::before, .service-box::before, .testimonial-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--teal-ink); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.beneft-box:hover, .service-box:hover, .testimonial-box:hover {
  transform: translateY(-4px) !important;
  border-color: #DAD5C9 !important;
  box-shadow: var(--shadow-md) !important;
}
.beneft-box:hover::before, .service-box:hover::before, .testimonial-box:hover::before { transform: scaleX(1); }

/* card icons */
.beneft-box .icon, .service-box .icon {
  width: 56px; height: 56px; margin-bottom: 20px !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-soft); border-radius: var(--radius-sm);
  color: var(--teal-ink); transition: var(--transition);
}
.beneft-box .icon img, .service-box .icon img { width: 28px; height: 28px; object-fit: contain; }
.beneft-box .icon .svc-svg, .service-box .icon .svc-svg { width: 26px; height: 26px; display: block; }
.service-box:hover .icon, .beneft-box:hover .icon { background: var(--ink); color: var(--paper); }
.service-box h4, .beneft-box h5 { margin-bottom: 10px !important; }
.service-box p, .beneft-box p { color: var(--text); flex: 1; margin-bottom: 18px !important; }
.service-box .learn_more { margin-top: auto; }

/* ───────────────────────────── 6. Section rhythm + backgrounds ───────────────────────────── */
.benefit-con, .about-con, .service-con, .choose-con,
.faq-con, .testimonial-con, .contact-con {
  padding: clamp(72px, 8vw, 128px) 0 !important;
  position: relative;
}
.benefit-con, .about-con, .faq-con, .contact-con { background: var(--paper) !important; }
.service-con, .testimonial-con { background: var(--stone) !important; }

/* Section header → content gap */
.service_content, .testimonial_content { margin-bottom: clamp(40px, 5vw, 64px) !important; }

/* ───────────────────────────── 7. Hero ───────────────────────────── */
.family_banner_outer, .banner-con {
  background: radial-gradient(120% 90% at 85% 8%, rgba(61,206,178,0.12) 0%, rgba(61,206,178,0) 42%),
              linear-gradient(145deg, #0A1733 0%, #0E1E40 100%) !important;
}
.banner-con { padding: clamp(110px, 12vw, 168px) 0 clamp(80px, 9vw, 140px) !important; }
.banner_content h1 { color: var(--paper) !important; margin: 14px 0 22px !important; }
.banner_content p { color: rgba(251,250,247,0.82) !important; max-width: 52ch; font-size: 1.1875rem !important; line-height: 1.65 !important; }
/* hero floating stat card */
.banner_wrapper .box {
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 24px;
}
.banner_wrapper .box .value { font-family: var(--font-display); color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.banner_wrapper .box .review { font-family: var(--font-text); color: var(--muted); font-size: 13px; letter-spacing: 0.01em; }
.banner-image1 img, .banner-image2 img, .banner-image3 img, .banner-image4 img { border-radius: var(--radius-md); }

/* ───────────────────────────── 8. About ───────────────────────────── */
.about-con .about_content .all_button { margin-top: 28px; }
.about_wrapper .box { background: var(--ink) !important; border-radius: var(--radius-md); }
.about_wrapper .box h6 { font-family: var(--font-display) !important; font-style: italic; font-weight: 400 !important; text-transform: none !important; letter-spacing: -0.01em !important; line-height: 1.45 !important; color: var(--paper) !important; }
.about_wrapper .box span { color: var(--teal) !important; font-family: var(--font-text); font-weight: 500; }
.about-image1 img, .about-image2 img { border-radius: var(--radius-lg); }

/* ───────────────────────────── 9. Choose (dark stats band) ───────────────────────────── */
.choose-con {
  background: radial-gradient(110% 100% at 12% 10%, rgba(61,206,178,0.10) 0%, rgba(61,206,178,0) 45%),
              linear-gradient(145deg, #0A1733 0%, #0E1E40 100%) !important;
}
.choose-con h2 { color: var(--paper) !important; }
.choose-con p { color: rgba(251,250,247,0.80) !important; }
.choose_wrapper ul { display: flex !important; flex-wrap: wrap !important; gap: 24px !important; }
.choose_wrapper li {
  flex: 1 1 150px !important; padding: 28px 24px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-dark);
}
.choose_wrapper .value { display: flex; align-items: baseline; gap: 2px; }
/* 3-class specificity to beat legacy custom.css !important */
.choose_wrapper .value .number, .choose_wrapper .value .expression {
  font-family: var(--font-display) !important; font-weight: 500 !important; color: var(--paper) !important;
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem) !important; line-height: 1 !important; font-variant-numeric: tabular-nums;
}
.choose_wrapper .value .expression { color: var(--teal) !important; }
.choose_wrapper .text { color: rgba(255,255,255,0.66) !important; font-size: 14px; font-family: var(--font-text); display: block; margin-top: 10px; }

/* ───────────────────────────── 10. FAQ accordion ───────────────────────────── */
.accordion-card { margin-bottom: 12px !important; padding: 0 !important; }
.accordion-card .card-header { background: transparent !important; border: none !important; padding: 0; transition: background 0.3s var(--ease); }
/* override legacy .btn-link white bg + teal border (specificity 0,3,1) */
.accordion-card .btn-link { display: block !important; width: 100%; text-align: left; padding: 20px 24px !important; text-decoration: none; background: transparent !important; border: none !important; box-shadow: none !important; }
.accordion-card .btn-link h5 { color: var(--ink) !important; transition: var(--transition); }
.accordion-card .card-body { padding: 0 24px 22px; }
/* Open state — robust WITHOUT :has(): the open panel itself + Bootstrap's class toggle on the
   trigger (.btn-link loses .collapsed when open) drive the tint. :has() adds the header tint
   where supported but is not required for the core open styling. */
.accordion-card .btn-link:not(.collapsed) { background: var(--teal-soft) !important; border-left: 3px solid var(--teal-ink) !important; }
.accordion-card .btn-link:not(.collapsed) h5 { color: var(--teal-ink) !important; }
.accordion-card .collapse.show { background: var(--teal-soft); border-left: 3px solid var(--teal-ink); }
.accordion-card:has(.collapse.show) { border-color: #DAD5C9 !important; }
.accordion-card:has(.collapse.show) > .card-header > .btn-link { background: var(--teal-soft) !important; border-left: 3px solid var(--teal-ink) !important; }
.accordion-card:has(.collapse.show) .btn-link h5 { color: var(--teal-ink) !important; }

/* ───────────────────────────── 11. Testimonials ───────────────────────────── */
.testimonial-con .testimonial-box, .testimonial-box { padding: 40px !important; text-align: center; }
.testimonial-box ul li i { color: var(--sand) !important; }
.testimonial-box .paragarph {
  font-family: var(--font-display) !important; font-style: italic; font-weight: 400 !important;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem) !important; line-height: 1.45 !important; color: var(--ink) !important;
}
.testimonial-box .lower_content .name { font-family: var(--font-text); font-weight: 600; color: var(--ink); font-size: 15px; display: block; }
.testimonial-box .lower_content .review { color: var(--muted) !important; font-size: 13px; font-family: var(--font-text); }
.carousel-indicators li.active figure { box-shadow: 0 0 0 2px var(--teal-ink); border-radius: var(--radius-md); }
.pagination_outer button { color: var(--ink); border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-sm); transition: var(--transition); }
.pagination_outer button:hover { background: var(--ink); color: var(--paper); }

/* ───────────────────────────── 12. Contact form ───────────────────────────── */
.form_style, .contact_form .form-control, .contact_form textarea, .contact_form select {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 16px !important;
  font-family: var(--font-text) !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  transition: var(--transition);
}
/* fill the float/grid field boxes at every breakpoint (legacy locks inputs to 232px at 992–1199) */
.contact-con .contact_form .form_style, .contact-con .contact_form .form-control,
.contact-con .contact_form textarea, .contact-con .contact_form select,
.contact_form .form_style, .contact_form .form-control { width: 100% !important; }
.form_style:focus, .contact_form .form-control:focus, .contact_form textarea:focus, .contact_form select:focus {
  border-color: var(--teal-ink) !important; box-shadow: var(--shadow-focus) !important; outline: none;
}
.form_style::placeholder, .contact_form textarea::placeholder { color: var(--muted); }

/* ───────────────────────────── 13. Pre-footer CTA ───────────────────────────── */
.footer-cta-strip {
  background: linear-gradient(145deg, #0A1733 0%, #0E1E40 100%) !important;
  padding: clamp(48px, 6vw, 72px) 0 !important;
}
.footer-cta-strip h3 { color: var(--paper) !important; }
.footer-cta-strip p { color: rgba(251,250,247,0.78) !important; margin-bottom: 0; }
.footer-cta-strip .cta-btn { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--paper) !important; }
.footer-cta-strip .cta-btn:hover { background: rgba(255,255,255,0.88) !important; color: var(--ink) !important; }

/* ───────────────────────────── 14. Footer ───────────────────────────── */
.footer-con { background: var(--ink-900) !important; padding: clamp(64px, 8vw, 96px) 0 0 !important; }
.footer-con .links .heading, .footer-con .contact .heading {
  font-family: var(--font-text) !important; font-weight: 600 !important; font-size: 15px !important;
  letter-spacing: 0.04em; color: var(--paper) !important; margin-bottom: 18px;
}
.footer-con p, .footer-con .text, .footer-con .links a, .footer-con .contact a {
  color: #C2CBD8 !important; font-family: var(--font-text) !important; font-size: 14px !important;
}
.footer-con .links a, .footer-con .contact a { transition: var(--transition); }
.footer-con .links a:hover, .footer-con .contact a:hover { color: var(--teal) !important; }
.footer-con .links li i.fa-circle { font-size: 5px; color: var(--teal); vertical-align: middle; margin-right: 9px; }
.footer-con .contact li i { color: var(--teal); margin-right: 10px; }
.footer-con .social-icons li a {
  width: 38px; height: 38px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: #C2CBD8 !important; transition: var(--transition); border: 1px solid var(--line-dark);
}
.footer-con .social-icons li a:hover { color: var(--teal) !important; border-color: var(--teal); }
.footer-con .copyright { border-top: 1px solid var(--line-dark); margin-top: clamp(40px, 5vw, 64px); padding: 22px 0; }
.footer-con .copyright p { color: #93A0B5 !important; font-size: 13px !important; text-align: center; }

/* ───────────────────────────── 15. Header / nav ───────────────────────────── */
.header { background: transparent !important; box-shadow: none !important; border-bottom: 1px solid transparent !important; transition: var(--transition); }
.header .navbar-nav .nav-link { color: rgba(251,250,247,0.92) !important; font-family: var(--font-text) !important; font-weight: 500 !important; font-size: 15px !important; padding: 10px 16px !important; position: relative; }
.header .navbar-nav .nav-link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px;
  background: var(--teal); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--ease);
}
.header .navbar-nav .nav-item:hover .nav-link::after,
.header .navbar-nav .nav-item.active .nav-link::after { transform: scaleX(1); }
.header .navbar-nav .nav-link:hover, .header .navbar-nav .nav-item.active .nav-link { color: var(--paper) !important; background: transparent !important; }

/* scrolled state */
.header.scrolled {
  background: rgba(251,250,247,0.96) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(10,23,51,0.04) !important; border-bottom: 1px solid var(--line) !important;
}
.header.scrolled .navbar-nav .nav-link { color: var(--ink) !important; }
.header.scrolled .navbar-nav .nav-link:hover, .header.scrolled .navbar-nav .nav-item.active .nav-link { color: var(--teal-ink) !important; }
.header.scrolled .navbar-nav .nav-link::after { background: var(--teal-ink); }
.header.scrolled .contact_us { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }
/* transparent header: outline-paper CTA for contrast over the navy hero */
.header:not(.scrolled) .contact_us {
  background: transparent !important; color: var(--paper) !important; border: 1px solid rgba(255,255,255,0.45) !important;
}
.header:not(.scrolled) .contact_us:hover { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--paper) !important; }

/* Services dropdown — 2-col mega-menu on desktop */
.drop-down-content { border: 1px solid var(--line) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; padding: 16px !important; background: var(--card) !important; }
@media (min-width: 992px) {
  .drop-down-content { min-width: 460px !important; }
  .drop-down-pages { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
}
/* Prefixed with .header .navbar-nav so this beats the floating-nav rule
   (.header .navbar-nav .nav-link -> near-white) which otherwise makes these
   items render as invisible white-on-white while the header is unscrolled. */
.header .navbar-nav .drop-down-pages .nav-link, .header .navbar-nav .drop-down-pages .dropdown-item,
.header.scrolled .navbar-nav .drop-down-pages .nav-link, .header.scrolled .navbar-nav .drop-down-pages .dropdown-item {
  font-family: var(--font-text) !important; font-size: 14px !important; font-weight: 500 !important;
  color: var(--ink) !important; border-radius: var(--radius-sm) !important; padding: 10px 14px !important; transition: var(--transition);
}
.drop-down-pages .nav-link:hover, .drop-down-pages .dropdown-item:hover,
.navbar-nav .nav-item .drop-down-pages .dropdown-item:hover {
  background: var(--teal-soft) !important; color: var(--teal-ink) !important; background-image: none !important;
}

/* hamburger — light bars on the navy (unscrolled) header, dark once it turns white.
   !important + .header-prefixed specificity beats the theme's dark default in
   responsive.css/mobile.css that otherwise made the icon invisible on the navy bar. */
.navbar-toggler { border: none !important; }
.header .navbar-toggler .navbar-toggler-icon { background: var(--paper) !important; height: 2px; width: 24px; border-radius: 2px; transition: var(--transition); }
.header.scrolled .navbar-toggler .navbar-toggler-icon { background: var(--ink) !important; }

/* The white nav-link color is for desktop (header floats over the navy hero). On mobile the
   menu opens into a WHITE drawer panel, so links must be dark — else they're invisible. */
@media (max-width: 991px) {
  .header .navbar-nav .nav-link,
  .header:not(.scrolled) .navbar-nav .nav-link { color: var(--ink) !important; }
  .header .navbar-nav .nav-link:hover,
  .header .navbar-nav .nav-item.active .nav-link { color: var(--teal-ink) !important; }
  .header .navbar-nav .nav-link::after { display: none; }
  .navbar-toggler .navbar-toggler-icon { background: var(--ink); }
  /* CTA lives inside the white drawer on mobile — keep it solid ink, not outline-paper */
  .header:not(.scrolled) .contact_us, .header .contact_us {
    background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important;
    width: 100%; margin-top: 8px;
  }
}

/* ───────────────────────────── 16. Sub-banner (inner page hero) ───────────────────────────── */
.sub_banner, .sub_banner_con {
  background: radial-gradient(120% 120% at 85% 0%, rgba(61,206,178,0.12) 0%, rgba(61,206,178,0) 45%),
              linear-gradient(145deg, #0A1733 0%, #0E1E40 100%) !important;
}
.sub_banner_content h1, .sub_banner_content h2 { color: var(--paper) !important; }
.sub_banner_content, .sub_banner_content p, .sub_banner_content a { color: rgba(251,250,247,0.85) !important; }
.sub_banner_content .breadcrumb, .sub_banner_content nav a { color: var(--teal) !important; }

/* service detail sidebar */
.service_sidebar { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); }

/* ───────────────────────────── 16b. Decorative restraint ─────────────────────────────
   Suppress loud full-bleed teal/photo decorative panels from the legacy theme;
   let framed photography + whitespace carry the premium look. */
.faq-con::before { display: none !important; }
.faq-con .faq_wrapper .faq-image img { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-hairline); }
.faq-con .faq_content { padding-left: clamp(0px, 4vw, 50px) !important; }
.faq-image { position: relative; }
/* a single restrained ink offset frame behind the FAQ photo (replaces teal slab) */
.faq_wrapper.position-relative::before {
  content: ""; position: absolute; left: -18px; top: 22px; width: 64%; height: 86%;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--teal-soft); z-index: 0;
}
.faq_wrapper.position-relative .faq-image { position: relative; z-index: 1; }
@media (max-width: 991px) { .faq_wrapper.position-relative::before { display: none; } }

/* ───────────────────────────── 17. Mobile bottom CTA ───────────────────────────── */
.mobile-bottom-cta { background: rgba(251,250,247,0.98); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(10,23,51,0.06); }
.mcta-call { color: var(--ink) !important; font-family: var(--font-text); font-weight: 600; }
.mcta-book { background: var(--ink) !important; color: var(--paper) !important; font-family: var(--font-text); font-weight: 600; border-radius: var(--radius-sm); }

/* back-to-top */
#button { background: var(--ink) !important; }
#button:hover { background: var(--ink-700) !important; }

/* ───────────────────────────── 17b. Hero icon alignment ─────────────────────────────
   The teal circle used line-height/text-align, leaving the <img> baseline-aligned (low).
   Flex-center it so the line icon sits dead-centre. */
.banner-con .banner_wrapper .icon { display: flex !important; align-items: center; justify-content: center; padding: 0; }
.banner-con .banner_wrapper .icon img { vertical-align: middle; display: block; }

/* ───────────────────────────── 17c. Legal pages ───────────────────────────── */
.legal-con { padding: clamp(56px, 7vw, 104px) 0; background: var(--paper); }
.legal_content { max-width: 820px; }
.legal_content h2 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem) !important; margin: 34px 0 12px; }
.legal_content h3 { margin: 24px 0 8px; }
.legal_content p { margin-bottom: 14px; }
.legal_content .legal-updated { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.legal_content a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }

/* footer legal links */
.footer-con .copyright .legal-links { margin-top: 8px; font-size: 13px; }
.footer-con .copyright .legal-links a { color: #93A0B5 !important; text-decoration: none; }
.footer-con .copyright .legal-links a:hover { color: var(--teal) !important; }

/* ───────────────────────────── 18. Motion ───────────────────────────── */
[data-aos] { transition-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  /* neutralize instant hover transforms too (the underline/border accents remain as the cue) */
  .beneft-box:hover, .service-box:hover, .testimonial-box:hover { transform: none !important; }
  .all_button:hover i, .cta-btn:hover i, .contact_us:hover i, .submit_now:hover i, .learn_more:hover i { transform: none !important; }
}

/* ───────────────────────────── 19. Responsive ───────────────────────────── */
@media (max-width: 991px) {
  .button_wrapper { gap: 12px; }
  .about-rightimage, .choose-leftimage, .testimonial-sideimage { display: none !important; }
  .about_wrapper, .banner_wrapper { margin-bottom: 32px; }
  /* footer: kill Bootstrap nested-row negative margins + legacy responsive.css negative
     margins on the Contact column (margin-left:-28px/-20px/-10px) that pushed content
     off the left edge on mobile. */
  .footer-con .container { padding-left: 24px !important; padding-right: 24px !important; }
  .footer-con .row { margin-left: 0 !important; margin-right: 0 !important; }
  .footer-con [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  .footer-con .middle_portion .contact,
  .footer-con .middle_portion .links { margin-left: 0 !important; padding-left: 0 !important; }
  .footer-con .copyright { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 767px) {
  .service-box { margin-bottom: 24px; }
  .choose_wrapper ul { gap: 16px; }
}
@media (max-width: 575px) {
  .button_wrapper { flex-direction: column; align-items: stretch; }
  .button_wrapper .all_button { width: 100%; }
  .footer-con .copyright p { font-size: 12px !important; }
  .testimonial-box { padding: 28px !important; }
  .beneft-box, .service-box { padding: 28px !important; }
}

/* ═══════════════════════════ Premium fixes ═══════════════════════════ */

/* Testimonial nav: the theme absolutely-positioned the arrow <i> out of its
   button (left:275px), leaving two empty circles + stray top arrows. Pin the
   icon back inside its button so we get two clean circular controls. */
.testimonial-con .carousel-control-prev,
.testimonial-con .carousel-control-next { position: static !important; transform: none !important; }
.testimonial-con .carousel-control-prev i,
.testimonial-con .carousel-control-next i {
  position: static !important; top: auto !important; left: auto !important; right: auto !important;
  font-size: 15px !important; color: inherit !important;
}
.testimonial-con .pagination_outer { position: static !important; margin-top: 30px; }

/* About portrait: present the (head-cropped stock) photo as a deliberate,
   consistent executive-portrait card instead of an accidental cut. Replace the
   real headshot via admin → image slot img11 to show the full face. */
.about-con .about-image1 img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%;
  border-radius: var(--radius-lg) !important;
}
@media (min-width: 992px) { .about-con .about-image1 img { aspect-ratio: 5 / 6; max-height: 560px; } }

/* Crisper rendering for the line-art service icons */
.svc-svg { stroke-width: 1.75; }