/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */

/* Large screens & up (min-width: 1200px) */
@media (min-width: 1200px) {
  .fda-sphere-left {
    left: -120px;
    /* Bring them slightly more in on very wide screens */
  }

  .fda-sphere-right {
    right: -120px;
  }
}

/* Medium & large tablets/laptops (max-width: 991.98px) */
@media (max-width: 991.98px) {
  .fda-navbar {
    background-color: var(--color-navbar-mobile-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: var(--spacing-xs) 0 !important;
  }

  .fda-navbar-brand img {
    height: 32px;
  }

  .fda-navbar-collapse {
    background-color: transparent;
    padding: var(--spacing-md) 0 var(--spacing-sm) 0;
  }

  .fda-navbar .navbar-nav {
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
  }

  .fda-navbar .navbar-nav .nav-link {
    font-size: var(--fs-sm);
    padding: 10px 0 !important;
  }

  .fda-navbar .navbar-nav .nav-link::after {
    left: 0;
    right: 0;
  }

  .fda-navbar-btn-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--spacing-xs);
  }

  .fda-btn-nav-filled,
  .fda-btn-nav-outlined {
    text-align: center;
    width: 100%;
  }

  /* Decorative Spheres scale down on tablets to avoid overlapping content */
  .fda-sphere-container {
    width: 320px;
    height: 320px;
  }

  .fda-sphere-left {
    left: -160px;
  }

  .fda-sphere-right {
    right: -160px;
  }

  .fda-hero-section {
    padding: 10px 0 80px 0;
    min-height: 80svh;
  }
}

/* Small tablets & mobile devices (max-width: 767.98px) */
@media (max-width: 767.98px) {

  /* Homepage-wide mobile heading system */
  .fda-homepage {
    --fda-mobile-heading-badge-size: 0.625rem;
    --fda-mobile-heading-title-size: clamp(1.9rem, 7vw, 2.35rem);
    --fda-mobile-heading-desc-size: 0.95rem;
    --fda-mobile-heading-title-line: 1.14;
    --fda-mobile-heading-desc-line: 1.65;
    --fda-mobile-heading-gap: 12px;
    --fda-mobile-heading-width: min(100%, 620px);
  }

  .fda-homepage .fda-hero-badge,
  .fda-homepage .fda-why-badge,
  .fda-homepage .fda-testimonials-badge,
  .fda-homepage .fda-faq-badge,
  .fda-homepage .fda-blog-badge,
  .fda-homepage .fda-growth-badge {
    gap: 8px;
    padding: 6px 14px !important;
    border-radius: 999px;
    margin-bottom: var(--fda-mobile-heading-gap) !important;
  }

  .fda-homepage .fda-hero-badge-text,
  .fda-homepage .fda-why-badge-text,
  .fda-homepage .fda-testimonials-badge,
  .fda-homepage .fda-faq-badge,
  .fda-homepage .fda-blog-badge,
  .fda-homepage .fda-growth-badge-text,
  .fda-homepage .fda-metrics-eyebrow {
    font-size: var(--fda-mobile-heading-badge-size) !important;
    line-height: 1.2 !important;
    letter-spacing: 1.5px !important;
  }

  .fda-homepage .fda-hero-title,
  .fda-homepage .fda-why-title,
  .fda-homepage .fda-industries-title,
  .fda-homepage .fda-testimonials-title,
  .fda-homepage .fda-faq-title,
  .fda-homepage .fda-blog-title,
  .fda-homepage .fda-metrics-title,
  .fda-homepage .fda-contact-heading,
  .fda-homepage .fda-growth-headline {
    font-size: var(--fda-mobile-heading-title-size) !important;
    line-height: var(--fda-mobile-heading-title-line) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 12px !important;
  }

  .fda-homepage .fda-hero-desc,
  .fda-homepage .fda-why-desc,
  .fda-homepage .fda-industries-desc,
  .fda-homepage .fda-testimonials-subtext,
  .fda-homepage .fda-faq-subtext,
  .fda-homepage .fda-blog-subtext,
  .fda-homepage .fda-metrics-subtext,
  .fda-homepage .fda-contact-subtext,
  .fda-homepage .fda-growth-desc {
    font-size: var(--fda-mobile-heading-desc-size) !important;
    line-height: var(--fda-mobile-heading-desc-line) !important;
    max-width: var(--fda-mobile-heading-width) !important;
    margin-left: auto;
    margin-right: auto;
  }

  .fda-homepage .fda-hero-title .text-gradient,
  .fda-homepage .fda-why-title .text-gradient,
  .fda-homepage .fda-industries-title .text-gradient,
  .fda-homepage .fda-testimonials-title .text-purple,
  .fda-homepage .fda-faq-title .text-purple-italic,
  .fda-homepage .fda-blog-title .text-purple-italic,
  .fda-homepage .fda-metrics-title .fda-metrics-accent,
  .fda-homepage .fda-growth-headline em {
    font-size: inherit;
    line-height: inherit;
  }

  .fda-homepage .fda-industries-left,
  .fda-homepage .fda-testimonials-header,
  .fda-homepage .fda-faq-header,
  .fda-homepage .fda-blog-header,
  .fda-homepage .fda-contact-left,
  .fda-homepage .fda-growth-inner {
    text-align: center;
  }

  .fda-homepage .fda-industries-left,
  .fda-homepage .fda-testimonials-header,
  .fda-homepage .fda-faq-header,
  .fda-homepage .fda-blog-header,
  .fda-homepage .fda-contact-left,
  .fda-homepage .fda-growth-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .fda-homepage .fda-blog-subheader-row,
  .fda-homepage .fda-testimonials-header-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-bottom: 36px !important;
  }

  .fda-homepage .fda-metrics-header .row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .fda-homepage .fda-metrics-header .col-lg-4,
  .fda-homepage .fda-metrics-header .col-lg-8 {
    text-align: center;
  }

  .fda-homepage .fda-blog-nav,
  .fda-homepage .fda-testimonials-nav {
    position: static;
    transform: none;
  }

  .fda-homepage .fda-contact-heading,
  .fda-homepage .fda-contact-subtext {
    text-align: center;
  }

  .fda-hero-section {
    padding: 10px 0 80px 0;
    min-height: 100vh;
  }

  .fda-hero-title {
    font-size: var(--fs-3xl);
  }

  .fda-hero-desc {
    font-size: var(--fs-base);
    margin-bottom: var(--spacing-lg);
  }

  /* Shrink decorative spheres on small screens so they don't cover text */
  .fda-sphere-container {
    width: 280px;
    height: 280px;
    opacity: 0.75;
    top: 38% !important;
    /* Move higher up to align next to heading */
  }

  .fda-sphere-left {
    left: -140px;
  }

  .fda-sphere-right {
    right: -140px;
  }

  .fda-hero-badge {
    margin-bottom: var(--spacing-md);
  }

  /* Global section spacing override for mobile screens (tighter vertical layout) */
  .fda-services-section,
  .fda-solutions-section,
  .fda-roadmap-section,
  .fda-testimonials-section,
  .fda-faq-section,
  .fda-contact-section,
  .fda-expertise-section,
  .fda-purpose-section,
  .fda-about-cta-banner,
  .fda-ind-carousel-section,
  .fda-why-section,
  .fda-industries-section,
  .fda-metrics-section,
  .fda-blog-section {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}

/* Extra small mobile devices (max-width: 575.98px) */
@media (max-width: 575.98px) {
  .fda-hero-title {
    font-size: var(--fs-2xl);
  }

  .fda-hero-desc {
    font-size: var(--fs-sm);
  }

  .fda-hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    /* Tight vertical spacing */
    width: 100%;
    max-width: 330px;
    /* Restrict width for neat mobile columns */
    margin: 0 auto;
  }

  .fda-hero-ctas .fda-btn {
    width: 100%;
    font-size: 13px !important;
    /* Smaller text size */
    padding: 6px 6px 6px 18px !important;
    /* Slimmer padding */
    height: 46px !important;
    /* Slimmer button height */
    display: inline-flex;
    align-items: center;
    justify-content: space-between !important;
  }

  .fda-hero-ctas .fda-btn-circle {
    width: 34px !important;
    height: 34px !important;
    margin-left: auto;
    flex-shrink: 0;
  }

  .fda-hero-ctas .fda-btn-circle svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Scale spheres very small or let them slide more outward */
  .fda-sphere-container {
    width: 240px;
    height: 240px;
    opacity: 0.75;
    top: 38% !important;
    /* Move higher up to align next to heading */
  }

  .fda-sphere-left {
    left: -120px;
  }

  .fda-sphere-right {
    right: -120px;
  }
}