/* ==========================================================================
   WIND CAPITALS — RESPONSIVE STYLESHEET
   Bootstrap breakpoints: xxl 1400 / xl 1200 / lg 992 / md 768 / sm 576 / xs <576
   Desktop-first overrides (base rules live in style.css).
   ========================================================================== */

/* ==========================================================================
   BELOW XXL (<1399.98px)
   ========================================================================== */
@media (max-width: 1399.98px) {
  .navbar-phone {
    display: none;
  }

  .hero-blob-1 {
    width: 400px;
    height: 400px;
  }

  .hero-blob-2 {
    width: 320px;
    height: 320px;
  }
}

/* ==========================================================================
   BELOW XL (<1199.98px) — Navbar collapses to hamburger
   ========================================================================== */
@media (max-width: 1199.98px) {
  .nav-menu {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .hero-grid {
    gap: 40px;
  }

  .about-grid,
  .why-grid {
    gap: 44px;
  }

  .faq-layout {
    gap: 40px;
  }

  .partner-detail-grid {
    gap: 36px;
  }

  section {
    overflow-x: clip;
  }
}

/* ==========================================================================
   BELOW LG (<991.98px) — Major stacking tier / tablet padding
   ========================================================================== */
@media (max-width: 991.98px) {
  :root {
    --section-padding-y: 80px;
  }

  .hero {
    padding-top: calc(var(--header-height) + 40px);
    text-align: center;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
    max-width: 440px;
    margin: 0 auto 30px;
  }

  .hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .hero-trust {
    justify-content: center;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-collage {
    order: -1;
    max-width: 420px;
    margin: 0 auto 60px;
    padding: 30px 30px 40px 0;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-visual {
    max-width: 460px;
    margin: 0 auto 56px;
  }

  .faq-layout {
    grid-template-columns: 1fr;
  }

  .faq-side-text {
    position: static;
    text-align: center;
    margin: 0 auto 44px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .partner-detail-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .partner-detail-head {
    justify-content: center;
  }

  .service-detail-row,
  .service-detail-row.is-reverse {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 50px 0;
  }

  .service-detail-row.is-reverse .service-detail-visual {
    order: 0;
  }

  .service-detail-visual-frame {
    max-width: 420px;
    margin: 0 auto;
  }

  .partner-detail-badges {
    justify-content: center;
  }

  .process-track {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    margin-top: 50px;
  }

  .process-track-line,
  .process-track-line-fill {
    display: none;
  }

  .process-step {
    flex-direction: row;
    text-align: left;
    max-width: 100%;
    gap: 0;
  }

  .process-icon-wrap {
    margin-bottom: 0;
    margin-right: 24px;
  }

  .process-desc {
    max-width: 100%;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .stat-strip-dark .stat-col {
    border-right: none;
    margin-bottom: 30px;
  }

  .plan-card.is-featured {
    transform: none;
  }

  .footer-top {
    padding: 80px 0 56px;
  }

  .footer-brand {
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   BELOW MD (<767.98px) — Mobile padding tier
   ========================================================================== */
@media (max-width: 767.98px) {
  :root {
    --section-padding-y: 60px;
  }

  .section-header {
    margin-bottom: 44px;
  }

  .page-header {
    padding-bottom: 64px;
  }

  .cta-banner {
    padding: 56px 26px;
    border-radius: 18px;
  }

  .contact-form-panel,
  .contact-info-panel {
    padding: 40px 28px;
  }

  .contact-quick-cards {
    grid-template-columns: 1fr 1fr;
  }

  .feature-grid-list {
    grid-template-columns: 1fr;
  }

  .stats-bar {
    margin-top: -36px;
    border-radius: 16px;
  }

  .stat-item {
    padding: 20px;
    gap: 14px;
  }

  .mobile-menu {
    padding: 30px 8%;
  }

  .breadcrumb-custom {
    flex-wrap: wrap;
    justify-content: center;
  }

  .partner-detail-card {
    padding: 40px 28px;
  }

  .testimonial-card {
    padding: 32px 26px;
  }
}

/* ==========================================================================
   BELOW SM (<575.98px) — Small phones
   ========================================================================== */
@media (max-width: 575.98px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-actions,
  .cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn-brand,
  .hero-actions .btn-outline-brand,
  .cta-actions .btn-brand,
  .cta-actions .btn-outline-white {
    width: 100%;
  }

  .floating-badge {
    padding: 8px 14px 8px 8px;
    font-size: .72rem;
    gap: 8px;
    border-radius: 16px;
  }

  .floating-badge .badge-icon {
    width: 28px;
    height: 28px;
    font-size: .68rem;
  }

  .floating-badge--1 {
    left: 0;
    top: 2%;
  }

  .floating-badge--2 {
    right: 0;
    top: 36%;
  }

  .floating-badge--3 {
    left: 0;
    bottom: 14%;
  }

  .floating-badge--4 {
    right: 4%;
    bottom: -2%;
  }

  .experience-badge-card {
    position: static;
    margin: 20px auto 0;
    max-width: none;
    justify-content: center;
  }

  .stat-strip-dark {
    padding: 44px 24px;
  }

  .partner-detail-card {
    padding: 32px 20px;
  }

  .partner-meta {
    gap: 14px;
  }

  .contact-info-panel,
  .contact-form-panel {
    padding: 32px 20px;
  }

  .plan-card {
    padding: 36px 24px;
  }

  .service-card {
    padding: 34px 24px;
  }

  .blog-body {
    padding: 22px;
  }

  .process-icon {
    width: 62px;
    height: 62px;
    font-size: 1.3rem;
  }

  .contact-quick-cards {
    grid-template-columns: 1fr;
  }

  .service-detail-features {
    grid-template-columns: 1fr;
  }

  .service-quicknav {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }

  .service-quicknav a {
    flex-shrink: 0;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  .back-to-top {
    width: 44px;
    height: 44px;
    bottom: calc(20px + var(--dock-lift, 0px));
    right: 20px;
  }

  .whatsapp-float {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    bottom: calc(20px + var(--dock-lift, 0px));
    left: 20px;
  }
}