/* ==========================================================================
   VOLOS ENERGY — Responsive overrides
   Breakpoints follow Bootstrap 5: 1399 / 1199 / 991 / 767 / 575
   ========================================================================== */

@media (max-width: 1399.98px) {
    .why-body { padding: 80px 0 80px 50px; }
    .process-circle { width: 240px; min-height: 240px; height: auto; padding: 26px 28px; }
}

@media (max-width: 1199.98px) {
    :root {
        --fs-5xl: 3rem;
        --fs-4xl: 2.5rem;
        --fs-3xl: 2.125rem;
        --space-section: 84px;
    }
    .navbar-volos .nav-link { padding: 10px 12px; }
    .navbar-volos .navbar-brand { margin-right: 20px; }
    .hero-slide { padding: 175px 0 110px; }
    .hero-prev { left: 18px; }
    .hero-next { right: 18px; }

    .feature-cell { padding: 30px 26px; }
    .process-circle { width: 230px; min-height: 230px; height: auto; padding: 24px 22px; }
    .process-circle .ico { font-size: 2.75rem; margin-bottom: 8px; }
    .process-circle h3 { font-size: 1.05rem; }
    .process-circle p { font-size: .9rem; }
    .process-num { width: 54px; height: 54px; font-size: var(--fs-lg); }

    /* At these widths the container has little side margin left to absorb
       the nav buttons' -26px overhang past the carousel edge — that's what
       was pushing the page into horizontal scroll at ~992px. Inset them
       instead of overhanging once space gets tight. */
    .product-carousel .owl-nav button.owl-prev { left: 6px; }
    .product-carousel .owl-nav button.owl-next { right: 6px; }
    .marquee-track span { font-size: 2.75rem; }
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
    :root {
        --fs-5xl: 2.5rem;
        --fs-4xl: 2.125rem;
        --fs-3xl: 1.875rem;
        --space-section: 68px;
    }

    .navbar-volos { padding: 10px 12px 10px 20px; }
    .navbar-volos .navbar-brand img { height: 44px; }

    .hero-slide { padding: 160px 0 100px; }
    .hero-nav { display: none; }

    /* The three-cell bar stacks, so it no longer overlaps the hero */
    .feature-bar { grid-template-columns: 1fr; margin-top: -50px; }
    .feature-cell + .feature-cell { border-top: 1px solid rgba(22, 51, 0, .08); }
    .feature-cell.is-active + .feature-cell,
    .feature-cell.is-active { border-top-color: transparent; }

    .about-media { margin-bottom: 40px; }

    .why-split { grid-template-columns: 1fr; }
    .why-media { min-height: 340px; }
    .why-body { padding: 60px 0; max-width: none; }

    /* Circles and connecting arrows do not survive a narrow column */
    .process-grid { grid-template-columns: 1fr; gap: 28px; }
    .process-circle {
        width: 100%; min-height: 0; height: auto;
        border-radius: var(--radius-lg);
        padding: 32px 28px;
        text-align: center;
    }
    .process-num { top: 14px; right: 14px; }
    .process-arrow { display: none; }

    .cta-band { text-align: center; }
    .cta-band p { margin-inline: auto; }
    .cta-band-actions { justify-content: center; margin-top: 26px; }

    .footer-strip-grid { grid-template-columns: 1fr; gap: 22px; }
    .footer-main { padding: 56px 0 30px; }
    .footer-col { margin-bottom: 38px; }
    .marquee-track span { font-size: 2.25rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
    :root {
        --fs-5xl: 2.125rem;
        --fs-4xl: 1.875rem;
        --fs-3xl: 1.625rem;
        --fs-lg:  1.0625rem;
        --space-section: 56px;
    }

    body { line-height: 1.68; }

    .topbar-contact { display: none; }
    .topbar { padding: 12px 0; }

    .hero-slide { padding: 140px 0 90px; }
    .hero-points { flex-direction: column; align-items: flex-start; text-align: left; }
    .hero-actions { gap: 10px; }

    .btn-lime, .btn-outline-lime, .btn-dark-pill { padding: 13px 26px; font-size: var(--fs-xs); }

    .section-head { margin-bottom: 34px; }

    .about-pills { position: static; margin-top: 16px; left: auto; right: auto; bottom: auto; }
    .about-stats { gap: 24px; }

    .product-body { flex-direction: column; gap: 14px; }
    .solution-caption { left: 12px; right: 12px; bottom: 12px; padding: 14px 14px 14px 16px; }

    .marquee { padding: 20px 0; }
    .marquee-track span { font-size: 1.625rem; -webkit-text-stroke-width: 1px; }

    .footer-bottom-inner { border-radius: var(--radius-lg); justify-content: center; text-align: center; }

    .page-banner { padding: 160px 0 60px; }
    .form-card { padding: 24px; }

    .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 575.98px) {
    .hero-actions .btn-lime,
    .hero-actions .btn-outline-lime { width: 100%; justify-content: center; }

    .offcanvas-volos { width: 85vw; }

    .about-pills { grid-template-columns: 1fr; }
    .about-pill + .about-pill { border-left: 0; border-top: 1px solid var(--line); }

    .brand-block { padding: 24px; gap: 20px; }
    .brand-plate {
        flex: 1 1 100%; border-right: 0;
        border-bottom: 1px solid var(--line); padding: 0 0 18px;
    }

    .footer-badge { max-width: none; }
}