/* ==========================================================================
   Responsive refinements — mobile-first overrides on top of style.css
   Breakpoints follow Bootstrap 5: 576 / 768 / 992 / 1200 / 1400
   ========================================================================== */

/* Large desktop polish */
@media (min-width: 1400px) {
    .container { max-width: 1260px; }
}

/* Desktop / laptop (992px+) is the default styling above — no overrides needed */

/* Tablet (768px – 991.98px) */
@media (max-width: 991.98px) {
    :root { --header-height: 72px; --header-height-scrolled: 64px; }

    section { padding: 3.75rem 0; }
    .section-head { margin-bottom: 2.25rem; }

    .brand-logo { height: 38px; }
    .site-header.scrolled .brand-logo { height: 34px; }

    .floating-whatsapp { width: 50px; height: 50px; font-size: 1.4rem; left: 16px; bottom: 16px; }
    .floating-back-to-top { width: 44px; height: 44px; right: 16px; bottom: 16px; }
}

/* Mobile (up to 767.98px) */
@media (max-width: 767.98px) {
    body { font-size: 0.96rem; }

    .hero-section { padding: 3.5rem 0 3rem; text-align: center; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-cta { justify-content: center; }
    .hero-visual { height: 300px; margin-top: 1rem; }
    .hero-card { font-size: 0.78rem; padding: 0.6rem 0.9rem; }
    .hero-card i { font-size: 1rem; }

    section { padding: 3rem 0; }
    .section-title { font-size: clamp(1.5rem, 1.2rem + 3vw, 2rem); }
    .section-subtitle { font-size: 0.96rem; }

    .btn { padding: 0.68rem 1.4rem; font-size: 0.9rem; }

    .brand-card { padding: 1.5rem; }
    .icon-circle { width: 52px; height: 52px; font-size: 1.35rem; }

    .footer-logo-link { margin-bottom: 1rem; }
    .footer-heading { margin-top: 1.5rem; }

    .floating-whatsapp { width: 48px; height: 48px; font-size: 1.3rem; }
    .floating-back-to-top { width: 42px; height: 42px; }

    /* Phase 2: Homepage mobile tweaks */
    .about-preview-img { height: 260px; }
    .stat-box { padding: 1rem 0.5rem; }

    /* Phase 3: About / Services / Solutions mobile tweaks */
    .step-badge { width: 44px; height: 44px; font-size: 1rem; }
    .hero-slider-img { height: 260px; }
}

/* Small phones (up to 424.98px) */
@media (max-width: 424.98px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
    .btn-nav-cta { display: none; } /* keep mobile offcanvas CTA instead of squeezing the collapsed toggler row */
}

/* Prevent any horizontal scroll from full-bleed sections */
html, body { max-width: 100%; overflow-x: hidden; }

/* Ensure dropdown becomes static/full width inside mobile offcanvas (no hover dropdowns on touch) */
@media (max-width: 991.98px) {
    .main-nav .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
}