/* ============================================================
   B-TECH / SERVICE TECHNOLOGIES (EXACT HOME MATCH)
   Exact replicate of Home page .b-tech (index.html:2430-2740)
   Colors & Design exactly matched to Home page (media_1793993070205_272fe6af.jpg)
   ============================================================ */
.techsec.b-tech,
.b-tech {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(238, 61, 37, 0.28), transparent 58%),
    radial-gradient(60% 70% at 100% 100%, rgba(238, 61, 37, 0.16), transparent 55%),
    radial-gradient(50% 60% at 70% 20%, rgba(42, 57, 104, 0.9), transparent 60%),
    #233058 !important;
  padding: 6.5vw 0 6.94vw !important;
}

.b-tech>.container,
.b-tech .container {
  max-width: 83.62269vw !important;
  width: 83.62269vw !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

.b-tech .bt-glow {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(7vw) !important;
  opacity: 0.28 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.b-tech .bt-glow-1 {
  width: 26vw !important;
  height: 26vw !important;
  background: #EE3D25 !important;
  top: -6vw !important;
  left: -8vw !important;
}

.b-tech .bt-glow-2 {
  width: 22vw !important;
  height: 22vw !important;
  background: #2a3968 !important;
  top: 18vw !important;
  right: -6vw !important;
}

.b-tech .bt-glow-3 {
  width: 20vw !important;
  height: 20vw !important;
  background: #EE3D25 !important;
  bottom: -4vw !important;
  left: 32vw !important;
}

.b-tech .tech-eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.2vw !important;
  width: 100% !important;
  font-family: "Geometria", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2vw !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 0 0 1.1vw !important;
  text-align: center !important;
}

.b-tech .tech-eyebrow:before,
.b-tech .tech-eyebrow:after {
  content: "" !important;
  display: block !important;
  flex: 1 1 0 !important;
  height: 1px !important;
  min-width: 2vw !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28)) !important;
}

.b-tech .tech-eyebrow:after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent) !important;
}

.b-tech .tech-head-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  grid-gap: 1.2vw !important;
  margin-bottom: 2.8vw !important;
}

.b-tech .tech-h2 {
  font-family: "Geometria", sans-serif !important;
  font-weight: 700 !important;
  font-size: 2.85vw !important;
  line-height: 112% !important;
  letter-spacing: -0.01em !important;
  color: #EE3D25 !important;
  max-width: 56vw !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding-bottom: 0 !important;
}

.b-tech .tech-h2:before,
.b-tech .tech-h2::before,
.b-tech .tech-h2:after,
.b-tech .tech-h2::after,
.techsec h2:before,
.techsec h2::before,
.techsec h2:after,
.techsec h2::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

.b-tech .tech-h2 b {
  font-weight: 700 !important;
  color: #ffffff !important;
}

.b-tech .tech-desc {
  font-family: "Raleway", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.98vw !important;
  line-height: 160% !important;
  color: rgba(255, 255, 255, 0.7) !important;
  max-width: 42vw !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.b-tech .tech-tabs-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 2.8vw !important;
  position: relative !important;
  z-index: 2 !important;
}

.b-tech .tech-tabs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-gap: 0.35vw !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border-radius: 2vw !important;
  padding: 0.45vw 0.6vw !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.b-tech .tech-tabs::-webkit-scrollbar {
  display: none !important;
}

.b-tech .tech-tab {
  font-family: "Geometria", sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.88vw !important;
  color: rgba(255, 255, 255, 0.72) !important;
  position: relative !important;
  background: linear-gradient(165deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  padding: 0.7vw 1.25vw !important;
  border-radius: 2vw !important;
  box-sizing: border-box !important;
  transition:
    color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease,
    border-color 0.28s ease !important;
}

.b-tech .tech-tab:hover {
  color: #fff !important;
  background: linear-gradient(165deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 0.35vw 1vw rgba(0, 0, 0, 0.22) !important;
  transform: translateY(-0.12vw) !important;
}

.b-tech .tech-tab.active {
  background: #EE3D25 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0.45vw 1.35vw rgba(238, 61, 37, 0.4) !important;
  transform: none !important;
}

.b-tech .tech-tab.active:hover {
  background: #ff4a31 !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow:
    0 0.55vw 1.6vw rgba(238, 61, 37, 0.5),
    0 0 1.2vw rgba(238, 61, 37, 0.35) !important;
  transform: translateY(-0.1vw) !important;
}

/* PANELS & CARDS (EXACT HOME 5-COL GRID & CARD SIZING) */
.b-tech .tech-panels {
  border-top: 0.0579vw solid rgba(255, 255, 255, 0.14) !important;
  padding-top: 2.3vw !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.b-tech .tech-panel {
  display: none !important;
}

.b-tech .tech-panel.active {
  display: block !important;
  animation: techPanelIn 0.45s ease both !important;
}

@keyframes techPanelIn {
  from {
    opacity: 0;
    transform: translateY(0.6vw);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.b-tech .tech-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.7vw !important;
  width: 100% !important;
}

.b-tech .tech-item {
  flex: 0 0 calc(20% - 0.6vw) !important;
  width: calc(20% - 0.6vw) !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 0.0579vw solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.6vw !important;
  padding: 0.85vw 1.2vw !important;
  min-height: 3.2vw !important;
  box-sizing: border-box !important;
  cursor: default !important;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease !important;
}

.b-tech .tech-item p {
  font-family: "Geometria", sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.88vw !important;
  color: #ffffff !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.b-tech .tech-item:hover {
  background: linear-gradient(165deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.07) 100%) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    0 0.55vw 1.3vw rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(238, 61, 37, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-0.28vw) !important;
}

/* Service pages (.mad): hide colored dots on tech chips + scrolling marquee */
.mad .tchips span:before,
.svc-marquee .track span:before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
}

.mad .tchips span,
.svc-marquee .track span {
  gap: 0 !important;
}

/* RESPONSIVE BREAKPOINTS (MATCHING HOME) */
@media (max-width: 991px) {
  .b-tech .tech-grid {
    gap: 1.2vw !important;
  }

  .b-tech .tech-item {
    flex: 0 0 calc(33.333% - 1.2vw) !important;
    width: calc(33.333% - 1.2vw) !important;
    min-width: 140px !important;
    padding: 1.2vw 1.5vw !important;
    min-height: 4.5vw !important;
  }

  .b-tech .tech-item p {
    font-size: 1.3vw !important;
  }
}

@media (max-width: 768px) {
  .b-tech {
    padding: 14vw 0 !important;
  }

  .b-tech>.container,
  .b-tech .container {
    max-width: 92vw !important;
    width: 92vw !important;
  }

  .b-tech .tech-eyebrow {
    font-size: 4vw !important;
    gap: 3vw !important;
  }

  .b-tech .tech-head-row {
    flex-direction: column !important;
    grid-gap: 4vw !important;
    margin-bottom: 6vw !important;
  }

  .b-tech .tech-h2 {
    font-size: 8.2vw !important;
    max-width: 100% !important;
    font-weight: 700 !important;
  }

  .b-tech .tech-desc {
    font-size: 3.6vw !important;
    max-width: 100% !important;
  }

  .b-tech .tech-tabs-wrap {
    margin-bottom: 6vw !important;
  }

  .b-tech .tech-tabs {
    border-radius: 3vw !important;
    padding: 1.2vw !important;
    grid-gap: 1.5vw !important;
  }

  .b-tech .tech-tab {
    font-size: 3.2vw !important;
    padding: 2.4vw 3.2vw !important;
    border-radius: 3vw !important;
  }

  .b-tech .tech-panels {
    padding-top: 5vw !important;
  }

  .b-tech .tech-grid {
    gap: 2.5vw !important;
  }

  .b-tech .tech-item {
    flex: 0 0 calc(50% - 2.5vw) !important;
    width: calc(50% - 2.5vw) !important;
    padding: 3vw 3.5vw !important;
    border-radius: 2.5vw !important;
    min-height: 11vw !important;
  }

  .b-tech .tech-item p {
    font-size: 3.4vw !important;
  }
}

/* ============================================================
   HOW WE WORK SECTION (CLEAN BUSINESS LIGHT)
   ============================================================ */
.how-we-work-sec,
.mad section:has(.g4),
.mad section:has(.grid.g4) {
  position: relative !important;
  background-color: #f8f9fc !important;
  background-image:
    radial-gradient(circle at 92% 14%, rgba(238, 61, 37, 0.05), transparent 48%),
    radial-gradient(circle at 8% 86%, rgba(35, 48, 88, 0.04), transparent 42%) !important;
  border-top: none !important;
  padding: clamp(65px, 7vw, 110px) 0 !important;
  overflow: hidden !important;
}

.how-we-work-sec::before,
.how-we-work-sec::after,
.mad section:has(.g4)::before,
.mad section:has(.g4)::after,
.mad section:has(.grid.g4)::before,
.mad section:has(.grid.g4)::after,
.mad section+section:has(.g4)::after,
.mad section+section:has(.grid.g4)::after,
.mad section+section.how-we-work-sec::after,
.mad section+section:not(.cta):not(.svc-marquee):has(.g4)::after,
.mad section+section:not(.cta):not(.svc-marquee):has(.grid.g4)::after {
  display: none !important;
  content: none !important;
}

/* Hide dark glow orbs inside clean light section */
.how-we-work-sec .glow,
.mad section:has(.g4) .glow,
.mad section:has(.grid.g4) .glow {
  display: none !important;
}

.how-we-work-sec > .w,
.mad section:has(.g4) > .w,
.mad section:has(.grid.g4) > .w {
  position: relative !important;
  z-index: 2 !important;
}

.how-we-work-sec h2,
.mad section:has(.g4) h2,
.mad section:has(.grid.g4) h2 {
  color: #233058 !important;
  font-size: clamp(32px, 3.8vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 20px !important;
  margin-bottom: clamp(36px, 4vw, 56px) !important;
}

.how-we-work-sec h2 em,
.mad section:has(.g4) h2 em,
.mad section:has(.grid.g4) h2 em {
  color: #ee3d25 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ee3d25 !important;
}

/* Completely KILL any line ABOVE the "How we work" heading */
.how-we-work-sec h2::before,
.how-we-work-sec h2:before,
.mad section:has(.g4) h2::before,
.mad section:has(.g4) h2:before,
.mad section:has(.grid.g4) h2::before,
.mad section:has(.grid.g4) h2:before,
.hw-section h2::before,
.hw-section h2:before,
.mad .how-we-work-sec h2::before,
.mad .how-we-work-sec h2:before,
.mad section:not(.hero):not(.cta):not(.svc-marquee):has(.g4) h2::before,
.mad section:not(.hero):not(.cta):not(.svc-marquee):has(.g4) h2:before,
.mad section:not(.hero):not(.cta):not(.svc-marquee):has(.grid.g4) h2::before,
.mad section:not(.hero):not(.cta):not(.svc-marquee):has(.grid.g4) h2:before,
.mad section.how-we-work-sec h2:before,
.mad section.how-we-work-sec h2::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
}

/* Signature Brand Red accent line strictly UNDER the heading */
.how-we-work-sec h2::after,
.how-we-work-sec h2:after,
.mad section:has(.g4) h2::after,
.mad section:has(.g4) h2:after,
.mad section:has(.grid.g4) h2::after,
.mad section:has(.grid.g4) h2:after,
.hw-section h2::after,
.hw-section h2:after,
.mad .how-we-work-sec h2::after,
.mad .how-we-work-sec h2:after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 56px !important;
  height: 3.5px !important;
  border-radius: 3px !important;
  background: #ee3d25 !important;
  box-shadow: 0 2px 8px rgba(238, 61, 37, 0.3) !important;
  display: block !important;
  transform: none !important;
}

.how-we-work-sec .card,
.mad section:has(.g4) .card,
.mad section:has(.grid.g4) .card {
  background: #ffffff !important;
  border: 1.5px solid rgba(35, 48, 88, 0.1) !important;
  border-radius: 20px !important;
  padding: clamp(26px, 2.5vw, 38px) !important;
  box-shadow: 0 8px 24px rgba(35, 48, 88, 0.05), 0 1px 3px rgba(35, 48, 88, 0.03) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    transform .35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color .3s ease,
    background-color .3s ease,
    box-shadow .35s ease !important;
  position: relative !important;
  overflow: hidden !important;
  animation: none !important;
}

/* Card Hover Top Accent Line (Restored on user request) */
.how-we-work-sec .card::before,
.mad section:has(.g4) .card::before,
.mad section:has(.grid.g4) .card::before,
.hw-section .hw-steps .card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 3.5px !important;
  background: linear-gradient(90deg, #ee3d25, #ff6a3d) !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
  z-index: 5 !important;
  display: block !important;
  pointer-events: none !important;
}

.how-we-work-sec .card:hover::before,
.mad section:has(.g4) .card:hover::before,
.mad section:has(.grid.g4) .card:hover::before,
.hw-section .hw-steps .card:hover::before {
  opacity: 1 !important;
  display: block !important;
}

/* Eliminate all unwanted lines, top beams, and border animations */
.how-we-work-sec .card::after,
.how-we-work-sec .card:hover::after,
.how-we-work-sec .card .hw-beam,
.how-we-work-sec .card:hover .hw-beam,
.mad section:has(.g4) .card::after,
.mad section:has(.g4) .card:hover::after,
.mad section:has(.g4) .card .hw-beam,
.mad section:has(.g4) .card:hover .hw-beam,
.mad section:has(.grid.g4) .card::after,
.mad section:has(.grid.g4) .card:hover::after,
.mad section:has(.grid.g4) .card .hw-beam,
.mad section:has(.grid.g4) .card:hover .hw-beam {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
  visibility: hidden !important;
}

/* Card Hover: Prominent elevation lift (-16px), warm brand tint background, solid Brand Red border, rich shadow */
.how-we-work-sec .card:hover,
.mad section:has(.g4) .card:hover,
.mad section:has(.grid.g4) .card:hover {
  background-color: #fff2ef !important;
  background-image: linear-gradient(175deg, #ffffff 10%, #ffe9e4 100%) !important;
  transform: translateY(-16px) !important;
  border-color: #ee3d25 !important;
  box-shadow:
    0 26px 52px rgba(35, 48, 88, 0.15),
    0 10px 24px rgba(238, 61, 37, 0.14) !important;
}

/* 4. Numbers: 01, 02, 03, 04 */
.how-we-work-sec .card .n,
.mad section:has(.g4) .card .n,
.mad section:has(.grid.g4) .card .n {
  font-size: clamp(44px, 4vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
  background: linear-gradient(180deg, #ee3d25 0%, rgba(238, 61, 37, 0.35) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -0.02em !important;
  transition: color .3s ease, filter .3s ease !important;
}

.how-we-work-sec .card:hover .n,
.mad section:has(.g4) .card:hover .n,
.mad section:has(.grid.g4) .card:hover .n {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ee3d25 !important;
  color: #ee3d25 !important;
  filter: drop-shadow(0 2px 10px rgba(238, 61, 37, 0.35)) !important;
}

/* Accent separator line under number inside card */
.how-we-work-sec .card .n::after,
.mad section:has(.g4) .card .n::after,
.mad section:has(.grid.g4) .card .n::after {
  content: "" !important;
  display: block !important;
  height: 2.5px !important;
  width: 100% !important;
  margin-top: 14px !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, #ee3d25, rgba(238, 61, 37, 0.06)) !important;
  opacity: 0.7 !important;
  transition: opacity .3s ease, background .3s ease !important;
}

.how-we-work-sec .card:hover .n::after,
.mad section:has(.g4) .card:hover .n::after,
.mad section:has(.grid.g4) .card:hover .n::after {
  background: #ee3d25 !important;
  opacity: 1 !important;
}

/* 5. Card Title */
.how-we-work-sec .card h3,
.mad section:has(.g4) .card h3,
.mad section:has(.grid.g4) .card h3 {
  color: #1e294b !important;
  font-size: clamp(20px, 1.6vw, 24px) !important;
  font-weight: 700 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em !important;
  transition: color .3s ease !important;
}

.how-we-work-sec .card:hover h3,
.mad section:has(.g4) .card:hover h3,
.mad section:has(.grid.g4) .card:hover h3 {
  color: #141b30 !important;
}

/* 6. Card Description */
.how-we-work-sec .card p,
.mad section:has(.g4) .card p,
.mad section:has(.grid.g4) .card p {
  color: #55627a !important;
  font-size: clamp(14px, 1.05vw, 16px) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  transition: color .3s ease !important;
}

.how-we-work-sec .card:hover p,
.mad section:has(.g4) .card:hover p,
.mad section:has(.grid.g4) .card:hover p {
  color: #3e4b63 !important;
}

/* ============================================================
   COMMON QUESTIONS (FAQ) — DEEP NAVY WITH AMBIENT RED GLOW
   Premium high-contrast theme breaking the light sequence
   - Rich Deep Navy (#233058) canvas with subtle red radial glows
   - Crisp White heading with Brand Red emphasis
   - Glassy dark cards with Brand Red borders on hover
   - When opened: Brand Red header with white text & minus icon
   - Answer panel in CLEAN CRISP WHITE (#ffffff) with Deep Navy text (#233058)
   - Balanced vertical spacing
   ============================================================ */

/* 1. Section Container & Canvas */
.faq-sec,
.mad section:has(details) {
  background-color: #233058 !important;
  background-image:
    radial-gradient(circle at 10% 18%, rgba(238, 61, 37, 0.18), transparent 48%),
    radial-gradient(circle at 90% 82%, rgba(238, 61, 37, 0.14), transparent 45%),
    radial-gradient(circle at 80% 16%, rgba(46, 64, 122, 0.65), transparent 50%) !important;
  padding: clamp(55px, 6vw, 85px) 0 clamp(40px, 4.5vw, 65px) !important;
  position: relative !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.faq-sec::before,
.faq-sec::after,
.mad section:has(details)::before,
.mad section:has(details)::after,
.mad section+section:has(details)::after {
  display: none !important;
  content: none !important;
}

.faq-sec .glow,
.mad section:has(details) .glow {
  display: none !important;
}

/* 2. Heading: Crisp White with Brand Red emphasis */
.faq-sec h2,
.mad section:has(details) h2 {
  color: #ffffff !important;
  font-size: clamp(32px, 3.8vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 20px !important;
  margin-bottom: clamp(28px, 3.5vw, 44px) !important;
}

.faq-sec h2 em,
.mad section:has(details) h2 em {
  color: #ee3d25 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ee3d25 !important;
}

/* Remove any line above heading */
.faq-sec h2::before,
.faq-sec h2:before,
.mad section:has(details) h2::before,
.mad section:has(details) h2:before {
  display: none !important;
  content: none !important;
}

/* Red accent line strictly under the heading */
.faq-sec h2::after,
.faq-sec h2:after,
.mad section:has(details) h2::after,
.mad section:has(details) h2:after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 56px !important;
  height: 3.5px !important;
  border-radius: 3px !important;
  background: #ee3d25 !important;
  box-shadow: 0 2px 10px rgba(238, 61, 37, 0.6) !important;
  display: block !important;
}

/* 3. Accordion Item (<details>) */
.mad details,
.mad section:has(details) details {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    background-color 0.25s ease !important;
}

/* Remove dark vertical line on details */
.mad details::before,
.mad details:before,
.mad details::after,
.mad details:after {
  display: none !important;
  content: none !important;
}

/* 4. Question Item Hover */
.mad details:hover,
.mad section:has(details) details:hover {
  border-color: #ee3d25 !important;
  background-color: rgba(238, 61, 37, 0.08) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(238, 61, 37, 0.22) !important;
  transform: translateY(-2px) !important;
}

/* 5. Summary / Question Title */
.mad details summary,
.mad section:has(details) details summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 1.15rem 1.4rem !important;
  cursor: pointer !important;
  font-family: "Geometria", sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
  list-style: none !important;
  outline: none !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

.mad details summary::-webkit-details-marker,
.mad details summary::marker {
  display: none !important;
}

.mad details:hover summary,
.mad section:has(details) details:hover summary {
  color: #ee3d25 !important;
}

/* Plus/Minus icon */
.mad details summary::after,
.mad section:has(details) details summary::after {
  content: "+" !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #ee3d25 !important;
  flex: none !important;
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

.mad details:hover summary::after,
.mad section:has(details) details:hover summary::after {
  color: #ee3d25 !important;
}

/* 6. OPEN STATE — Red Header with Pure White Crisp Answer Panel */
.mad details[open],
.mad section:has(details) details[open] {
  border: 1px solid #ee3d25 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 24px rgba(238, 61, 37, 0.25) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transform: none !important;
}

.mad details[open] summary,
.mad section:has(details) details[open] summary {
  background: #ee3d25 !important;
  color: #ffffff !important;
}

.mad details[open]:hover summary,
.mad section:has(details) details[open]:hover summary {
  background: #ee3d25 !important;
  color: #ffffff !important;
}

.mad details[open] summary::after,
.mad section:has(details) details[open] summary::after {
  content: "–" !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: none !important;
  transform: none !important;
}

/* Answer Body — Crisp High-Contrast Light Surface (White with Deep Navy Text) */
.mad details[open] p,
.mad section:has(details) details[open] p {
  padding: 22px 26px !important;
  margin: 0 !important;
  background: #ffffff !important;
  color: #233058 !important;
  font-family: "Raleway", sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(15px, 1.05vw, 16.5px) !important;
  line-height: 1.65 !important;
  border-top: 1px solid rgba(238, 61, 37, 0.2) !important;
  max-width: 100% !important;
}

/* ============================================================
   READY TO BUILD YOUR... (CTA SECTION)
   Light Background Wrapper (#f8f9fc) with Floating Navy Rounded Card
   ============================================================ */

.mad section.cta {
  background-color: #f8f9fc !important;
  background-image: none !important;
  padding: clamp(38px, 5vw, 70px) 0 clamp(50px, 6vw, 85px) !important;
  position: relative !important;
  border-top: 1px solid rgba(35, 48, 88, 0.08) !important;
}

.mad section.cta::before,
.mad section.cta::after {
  display: none !important;
  content: none !important;
}

/* CTA Navy Box with Red Shades */
.mad section.cta > .w {
  background:
    radial-gradient(75% 85% at 0% 0%, rgba(238, 61, 37, 0.38) 0%, transparent 60%),
    radial-gradient(65% 75% at 100% 100%, rgba(238, 61, 37, 0.28) 0%, transparent 55%),
    radial-gradient(60% 70% at 85% 15%, rgba(46, 64, 122, 0.95) 0%, transparent 60%), #233058 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 32px !important;
  padding: clamp(36px, 4.5vw, 56px) clamp(24px, 4vw, 56px) !important;
  box-shadow:
    0 24px 60px rgba(35, 48, 88, 0.22),
    0 8px 24px rgba(238, 61, 37, 0.15) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Floating Red Ambient Orbs inside CTA Box */
.mad section.cta > .w::before {
  content: "" !important;
  position: absolute !important;
  width: 340px !important;
  height: 340px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(238, 61, 37, 0.32), transparent 70%) !important;
  top: -120px !important;
  left: -90px !important;
  pointer-events: none !important;
  filter: blur(40px) !important;
  z-index: -1 !important;
}

.mad section.cta > .w::after {
  content: "" !important;
  position: absolute !important;
  width: 300px !important;
  height: 300px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(238, 61, 37, 0.25), transparent 70%) !important;
  bottom: -90px !important;
  right: -70px !important;
  pointer-events: none !important;
  filter: blur(40px) !important;
  z-index: -1 !important;
}

/* CTA Heading */
.mad section.cta h2 {
  color: #ffffff !important;
  font-size: clamp(30px, 3.8vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  max-width: 24ch !important;
  margin: 0 auto 16px !important;
  display: block !important;
  padding-bottom: 0 !important;
}

.mad section.cta h2 em {
  color: #ee3d25 !important;
  background: linear-gradient(90deg, #ee3d25, #ff7a63) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.mad section.cta h2::before,
.mad section.cta h2::after {
  display: none !important;
  content: none !important;
}

/* CTA Description */
.mad section.cta p {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  max-width: 52ch !important;
  margin: 0 auto clamp(20px, 2.5vw, 28px) !important;
  line-height: 1.6 !important;
}

/* CTA Buttons — Flex Row & Perfect Alignment */
.mad section.cta .btns {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 0 !important;
  width: 100% !important;
}

/* Shared button styling */
.mad section.cta .accent-btn,
.mad section.cta .dark-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 9px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 30px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-family: "Geometria", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, border-color 0.25s ease !important;
  will-change: transform, box-shadow !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* Clean Reset on Button Text (<p>) for absolute vertical and horizontal centering */
.mad section.cta .accent-btn p,
.mad section.cta .dark-btn p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: #ffffff !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Primary Button (CONTACT US) — Default Brand Red, Hover Vibrant Purple */
.mad section.cta .accent-btn {
  background: #ee3d25 !important;
  border: 2px solid #ee3d25 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(238, 61, 37, 0.45) !important;
}

.mad section.cta .accent-btn:hover {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border: 2px solid #8b78de !important;
  color: #ffffff !important;
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 18px 42px rgba(110, 92, 191, 0.58), 0 8px 18px rgba(0, 0, 0, 0.28), 0 0 24px rgba(139, 120, 222, 0.45) !important;
}

/* Arrow inside CONTACT US — guaranteed 100% visible and centered */
.mad section.cta .accent-btn span {
  display: inline-block !important;
  width: 13px !important;
  height: 9px !important;
  min-width: 13px !important;
  min-height: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.244 2.894L5.102 0.5H6.684L9.30199 3.524L6.684 6.534H5.102L7.244 4.126H1V2.894H7.244Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transition: transform .25s ease !important;
  vertical-align: middle !important;
}

.mad section.cta .accent-btn:hover span {
  transform: translateX(4px) !important;
}

/* Secondary Button (ALL SERVICES) — Vibrant Purple with Brand Red Hover */
.mad section.cta .dark-btn {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border: 2px solid #8b78de !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(110, 92, 191, 0.4) !important;
}

.mad section.cta .dark-btn:hover {
  background: #ee3d25 !important;
  border: 2px solid #ee3d25 !important;
  color: #ffffff !important;
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 18px 42px rgba(238, 61, 37, 0.58), 0 8px 18px rgba(0, 0, 0, 0.28), 0 0 24px rgba(238, 61, 37, 0.4) !important;
}

.mad section.cta .dark-btn:hover p {
  color: #ffffff !important;
}


/* Service icon inside ALL SERVICES button */
.mad section.cta .dark-btn span {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.00732 9.08203H8.99048L2.00732 2.09888V9.08203Z' fill='white'/%3E%3Cpath d='M8.99023 9.08203H15.9734L8.99023 2.09888V9.08203Z' fill='white'/%3E%3Cpath d='M2.00732 17.0273H8.99048L2.00732 10.0442V17.0273Z' fill='white'/%3E%3Cpath d='M8.98999 17.0273H15.9738L8.98999 10.0445V17.0273Z' fill='white'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transition: transform .25s ease !important;
  vertical-align: middle !important;
}

.mad section.cta .dark-btn:hover span {
  transform: rotate(90deg) !important;
}


/* Active press-down feel on CTA buttons */
.mad section.cta .accent-btn:active,
.mad section.cta .dark-btn:active {
  transform: translateY(-2px) scale(0.99) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  transition-duration: 0.1s !important;
}