/* ==========================================================================
   DIGITECHZO - ECOMMERCE APP DEVELOPMENT SERVICES STYLESHEET
   Design Tokens, Rule 19 Hero & Dark Contrast Standard, Modal Scroll Isolation
   ========================================================================== */

:root {
  --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --color-accent: #57B71B;
  --color-accent-light: rgba(87, 183, 27, 0.1);
  --color-accent-glow: rgba(87, 183, 27, 0.25);
  --color-dark: #0F172A;
  --color-dark-surface: #1E293B;
  --color-dark-bg: #0B1120;
  --color-light-bg: #F8FAFC;
  --color-border: #E2E8F0;
  --color-border-dark: rgba(255, 255, 255, 0.18);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.12);
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-ecommerce-app {
  font-family: var(--font-primary) !important;
  color: #334155;
  background-color: #FFFFFF;
  overflow-x: clip;
  overflow-y: visible;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* DigiTechzo Standard Sticky Header Support */
header,
header.sticky-top,
header.site-header,
header[data-component*="navbar.html"],
.site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1030 !important;
  overflow: visible !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.section-title-dark,
.hero-title,
.hero-title-dark,
.hero-title-accent,
.hero-lead-text,
.service-card-title,
.service-card-desc,
.portal-card-title,
.portal-card-desc,
.btn,
p, span, label, input, select, textarea, button, a {
  font-family: var(--font-primary) !important;
}

.font-monospace, code, pre, .font-mono {
  font-family: var(--font-mono) !important;
}

/* Utilities */
.max-w-700 { max-width: 700px; }
.max-w-750 { max-width: 750px; }
.max-w-850 { max-width: 850px; }
.max-w-900 { max-width: 900px; }

.section-badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent-light);
  color: var(--color-accent);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid rgba(87, 183, 27, 0.25);
}

.section-badge-dark {
  display: inline-flex;
  align-items: center;
  background: rgba(87, 183, 27, 0.15);
  color: #6CD424;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid rgba(108, 212, 36, 0.3);
}

.section-title {
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.section-desc {
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.7;
  color: #475569;
}

/* ==========================================================================
   1. HERO SECTION & RULE 19 HERO TITLE STYLING
   ========================================================================== */
.section-hero {
  padding: clamp(50px, 6.5vh, 70px) 0 clamp(36px, 4.5vh, 48px) !important;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  position: relative;
}

.hero-glow-bg {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(circle, rgba(87, 183, 27, 0.12) 0%, rgba(87, 183, 27, 0.02) 60%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* Mandatory Rule 19 Hero Title Standards */
.hero-title {
  font-size: clamp(2rem, 2.75vw, 2.75rem) !important;
  font-weight: 800;
  line-height: 1.18 !important;
  letter-spacing: -0.025em;
  margin-bottom: 14px !important;
  animation: heroTitleFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroTitleFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title-dark {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  display: inline-block;
}

.hero-title-accent {
  background: linear-gradient(135deg, #57B71B 0%, #6CD424 50%, #469A14 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% auto !important;
  animation: heroGradientShine 4s linear infinite;
  display: inline-block;
}

@keyframes heroGradientShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-lead-text {
  font-size: clamp(0.88rem, 1vw, 0.96rem) !important;
  line-height: 1.52 !important;
  color: #334155;
  max-width: 580px;
  margin-bottom: 14px !important;
}

.btn-accent {
  background: var(--color-accent);
  color: #FFFFFF !important;
  border: 1px solid var(--color-accent);
  transition: var(--transition);
}

.btn-accent:hover {
  background: #469A14;
  border-color: #469A14;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(87, 183, 27, 0.3);
}

.btn-outline-dark-custom {
  background: #FFFFFF;
  color: #0F172A !important;
  border: 1px solid #CBD5E1;
  transition: var(--transition);
}

.btn-outline-dark-custom:hover {
  border-color: #0F172A;
  background: #F8FAFC;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.hero-tags-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-top: 0 !important;
}

.hero-tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  box-shadow: var(--shadow-sm);
}

/* Mobile Commerce Visual Showcase Card */
.app-visual-showcase {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  padding: 14px 18px !important;
  border-radius: 16px !important;
  max-width: 100%;
}

.status-indicator-dot {
  width: 10px;
  height: 10px;
  background: #10B981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #10B981;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.app-feature-tile {
  transition: var(--transition);
}

.app-feature-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(87, 183, 27, 0.3) !important;
}

/* ==========================================================================
   2. FOUNDATION & JOURNEY SECTION
   ========================================================================= -->
.foundation-bullet {
  transition: var(--transition);
}

.foundation-bullet:hover {
  transform: translateX(4px);
  border-color: rgba(87, 183, 27, 0.3) !important;
}

.step-num-badge {
  width: 38px;
  height: 38px;
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
}

/* ==========================================================================
   3. SECTION SERVICES DARK - MANDATORY RULE 19 HIGH-CONTRAST STANDARDS
   ========================================================================== */
.section-services-dark {
  background: #0B1120;
  position: relative;
}

.section-title-dark {
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 800;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  line-height: 1.25;
}

.section-desc-dark {
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.7;
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
}

.service-dark-card {
  background: #141E33;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: var(--transition);
}

.service-dark-card:hover {
  transform: translateY(-5px);
  border-color: #57B71B;
  box-shadow: 0 15px 35px rgba(87, 183, 27, 0.15);
}

.service-dark-card .service-card-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 1.18rem;
  font-weight: 700;
}

.service-dark-card .service-card-desc {
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
  font-size: 0.95rem;
  line-height: 1.68;
}

/* ==========================================================================
   4. FEATURES CHECKLIST CARDS
   ========================================================================= -->
.feature-checklist-card {
  transition: var(--transition);
}

.feature-checklist-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-accent) !important;
}

/* ==========================================================================
   5. INDUSTRY SOLUTIONS CARDS
   ========================================================================= -->
.model-solution-card {
  transition: var(--transition);
}

.model-solution-card:hover {
  transform: translateY(-4px);
  background: #FFFFFF !important;
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent) !important;
}

/* ==========================================================================
   6. PORTALS DARK CARDS (RULE 19)
   ========================================================================= -->
.section-portals-dark {
  background: #0F172A;
}

.portal-dark-card {
  background: #131A2E;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
  transition: var(--transition);
}

.portal-dark-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.3);
}

.portal-dark-card .portal-card-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 1.35rem;
  font-weight: 800;
}

.portal-dark-card .portal-card-desc {
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
  font-size: 0.95rem;
  line-height: 1.68;
}

.portal-badge-pill {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.portal-features-list li {
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
  font-size: 0.92rem;
}

/* ==========================================================================
   7. PROCESS & WHY US CARDS
   ========================================================================= -->
.process-step-box {
  transition: var(--transition);
}

.process-step-box:hover {
  background: #FFFFFF !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.process-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-accent);
}

.why-card {
  transition: var(--transition);
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
  border-color: var(--color-accent) !important;
}

/* ==========================================================================
   8. COST ESTIMATE BANNER
   ========================================================================= -->
.cost-estimate-banner {
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
}

/* ==========================================================================
   9. FAQ ACCORDION
   ========================================================================= -->
.custom-faq-accordion .accordion-item {
  background: #FFFFFF;
  border: 1px solid var(--color-border) !important;
}

.custom-faq-accordion .accordion-button {
  font-size: 1.02rem;
  padding: 1.25rem 1.5rem;
  background: #FFFFFF;
  box-shadow: none !important;
}

.custom-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--color-accent) !important;
  background-color: var(--color-accent-light) !important;
}

/* ==========================================================================
   10. FINAL CTA SECTION & CARD
   ========================================================================= -->
.section-final-cta {
  padding: 80px 0;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  position: relative;
}

.final-cta-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-xl);
}

.final-cta-card .section-title {
  color: #0F172A !important;
}

/* ==========================================================================
   11. STICKY BOTTOM BAR
   ========================================================================= -->
.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 0;
  z-index: 9998;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-cta-bar.visible {
  transform: translateY(0);
}

.sticky-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sticky-text {
  display: flex;
  flex-direction: column;
}

.sticky-text strong {
  color: #FFFFFF;
  font-size: 0.95rem;
}

.sticky-text span {
  color: #94A3B8;
  font-size: 0.8rem;
}

/* ==========================================================================
   12. MODAL SCROLL LOCK, ISOLATION & CUSTOM SCROLLBAR SYSTEM
   ========================================================================== */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
}

.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overscroll-behavior: contain !important;
}

.modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-card.modal-card-lg {
  max-width: 680px !important;
  width: 100% !important;
  max-height: calc(100vh - 48px) !important;
  max-height: calc(100dvh - 48px) !important;
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 34px 28px !important;
  position: relative !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: #94A3B8 #F1F5F9 !important;
}

/* Custom Sleek Scrollbar for Modal Card */
.modal-card.modal-card-lg::-webkit-scrollbar {
  width: 7px !important;
}
.modal-card.modal-card-lg::-webkit-scrollbar-track {
  background: #F1F5F9 !important;
  border-radius: 10px !important;
  margin: 10px 0 !important;
}
.modal-card.modal-card-lg::-webkit-scrollbar-thumb {
  background: #94A3B8 !important;
  border-radius: 10px !important;
}
.modal-card.modal-card-lg::-webkit-scrollbar-thumb:hover {
  background: #57B71B !important;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #F1F5F9;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.modal-close:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: rotate(90deg);
}

/* Form Controls Inside Modal */
.form-label-custom {
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
  display: block;
}

.form-control-custom,
.form-select-custom {
  width: 100%;
  padding: 0.68rem 0.95rem;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  font-size: 0.92rem;
  color: #1E293B;
  background-color: #FFFFFF;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control-custom:focus,
.form-select-custom:focus {
  border-color: #57B71B;
  box-shadow: 0 0 0 3px rgba(87, 183, 27, 0.15);
  outline: none;
}

/* ==========================================================================
   13. RESPONSIVE BREAKPOINT SYSTEM (MOBILE, TABLET & DESKTOP ZERO OVERFLOW)
   ========================================================================== */
@media (max-width: 991.98px) {
  .section-hero {
    padding: 100px 0 60px;
  }
}

@media (max-width: 767.98px) {
  .section-hero {
    padding: 85px 0 45px;
  }
  .section-title {
    font-size: 1.85rem;
  }
  .section-title-dark {
    font-size: 1.85rem;
  }
  .hero-tags-bar {
    gap: 10px;
  }
  .hero-tag-item {
    padding: 6px 14px;
    font-size: 0.8rem;
  }
  .section-final-cta {
    padding: 50px 0 70px !important;
  }
  .final-cta-card {
    padding: 28px 18px !important;
  }
  .sticky-container {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 8px;
  }
  .sticky-text span {
    display: none;
  }
  .modal-overlay {
    padding: 12px 10px !important;
  }
  .modal-card.modal-card-lg {
    padding: 24px 16px !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 16px !important;
  }
}


/* ==========================================================================
   MOBILE RESPONSIVENESS & PROPORTIONATE BUTTONS FIX (ALL SCREEN SIZES >= 320PX)
   Fixes Image 1 (Button Sizing) and Image 2 (Horizontal Overflow & Cropping)
   ========================================================================== */

@media (max-width: 767.98px) {
  html {
    overflow-x: clip !important;
    width: 100% !important;
  }
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    width: 100% !important;
  }

  * {
    box-sizing: border-box !important;
  }

  .container, .container-fluid, section, main, footer {
    max-width: 100% !important;
  }

  /* Image 1 Fix: Sleek, Proportionate Mobile Buttons (no more massive, bulky buttons) */
  .btn,
  .btn-accent,
  .btn-outline-dark,
  .btn-outline-dark-custom,
  .btn-pill-primary,
  .btn-pill-secondary,
  .btn-primary-custom,
  .btn-hero-cta,
  button.open-booking-modal,
  a.open-booking-modal {
    padding: 0.56rem 1.15rem !important;
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    min-height: auto !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
  }

  .btn i,
  .btn-accent i,
  .btn-outline-dark-custom i,
  .btn-pill-primary i,
  button.open-booking-modal i,
  a.open-booking-modal i {
    font-size: 0.82rem !important;
  }

  /* Compact button grouping on mobile */
  .d-flex.gap-3:has(.btn),
  .d-flex.flex-wrap:has(.btn) {
    gap: 0.65rem !important;
  }

  /* Image 2 Fix: Prevent wide glow backgrounds and mockups from pushing viewport */
  .hero-glow-bg,
  .section-glow-bg,
  [class*="glow-bg"] {
    display: none !important;
  }

  /* Dashboard simulation cards and headers */
  .pm-visual-dashboard,
  .re-visual-dashboard,
  .dashboard-card,
  .trading-board-card,
  .exchange-card,
  .automation-card-preview,
  .preview-stage-box {
    padding: 1rem 0.85rem !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  .pm-dashboard-header,
  .re-dashboard-header,
  .dashboard-header,
  .visual-card-header {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .pm-dashboard-header > div,
  .re-dashboard-header > div {
    max-width: 100% !important;
  }

  /* Clean word wrapping: preserve whole words, wrap between words naturally, prevent mid-word cuts */
  p, span, h1, h2, h3, h4, h5, h6, li, a, label, div, th, td {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  /* Only allow arbitrary breaks for unbreakable technical identifiers like code, hashes, or addresses */
  .font-monospace, code, pre, .hash-code, .wallet-addr, [class*="hash"] {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  .word-nowrap {
    display: inline-block;
    white-space: nowrap;
  }
}
}

@media (max-width: 575.98px) {
  /* Fine-tuned compact button sizing for handheld mobile screens (< 576px down to 320px) */
  .btn,
  .btn-accent,
  .btn-outline-dark,
  .btn-outline-dark-custom,
  .btn-pill-primary,
  .btn-pill-secondary,
  .btn-primary-custom,
  .btn-hero-cta,
  button.open-booking-modal,
  a.open-booking-modal {
    padding: 0.52rem 0.95rem !important;
    font-size: 0.84rem !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-section .d-flex.flex-wrap.justify-content-center,
  .section-hero .d-flex.flex-wrap.justify-content-center,
  .cta-buttons-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.55rem !important;
  }

  .hero-tags-bar {
    gap: 6px !important;
  }

  .hero-tag-item {
    padding: 5px 10px !important;
    font-size: 0.74rem !important;
  }

  .sticky-cta-bar,
  #sticky-bar {
    padding: 8px 12px !important;
  }

  .sticky-cta-bar .btn,
  #sticky-bar .btn {
    padding: 0.45rem 1rem !important;
    font-size: 0.8rem !important;
    max-width: 260px !important;
  }
}

/* Hero CTA Buttons */
.hero-cta-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}
.hero-cta-buttons .btn,
.hero-cta-buttons a.btn,
.hero-cta-buttons button.btn,
.hero-cta-buttons .btn-pill-primary,
.hero-cta-buttons .btn-pill-secondary {
  padding: 10px 20px !important;
  font-size: 0.92rem !important;
  max-width: 100% !important;
}
@media (max-width: 575.98px) {
  .hero-cta-buttons {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .hero-cta-buttons .btn,
  .hero-cta-buttons a.btn,
  .hero-cta-buttons button.btn,
  .hero-cta-buttons .btn-pill-primary,
  .hero-cta-buttons .btn-pill-secondary {
    width: 100% !important;
    max-width: 320px !important;
    white-space: normal !important;
  }
}