/* ═══════════════════════════════════════════
   RESP.CSS — Responsive / Mobile-First
   Breakpoints: 390 → 425 → 768 → 992 → 1440
   ═══════════════════════════════════════════ */


/* ── < 390px: Very small screens ── */
@media screen and (max-width: 389px) {
    .frame-3-step {
        width: 160px;
    }
}


/* ── 425–768px: Small tablets ── */
@media screen and (min-width: 426px) and (max-width: 768px) {
    .frame-2-cta-img-wrapper {
        text-align: center;
    }

    .frame-3-step {
        width: 240px;
    }

    .frame-5-info-container {
        justify-content: space-evenly;
    }

    .frame-8-cta {
        display: flex;
        gap: 16px;
    }

    .frame-8-cta-2 {
        margin-top: 0;
    }
}


/* ── ≤ 991px: Mobile / Tablet — hide desktop images ── */
@media screen and (max-width: 991px) {
    .frame-4-img-1-2 {
        display: none;
    }

    .frame-8-cta-img-1-1,
    .frame-8-cta-img-2-1 {
        display: none;
    }
}


/* ── ≥ 992px: Desktop layout ── */
@media screen and (min-width: 992px) {
    :root {
        --side-pad: 109px;
        --section-gap: 150px;
    }

    /* ── Navbar ── */
    #navbarNav {
        justify-content: center;
    }

    .navbar-nav {
        width: 70%;
        justify-content: space-evenly;
    }

    /* ── Frame 1 — Hero ── */
    .frame-1-img-1 {
        max-width: 750px;
        margin-right: -160px;
    }

    .frame-1-img-container {
        display: flex;
        flex-flow: row-reverse;
        align-items: baseline;
        padding-top: 50px;
        column-gap: 4rem;
        justify-content: center;
        overflow: hidden;
    }

    .frame-1-img-2 {
        flex-direction: column;
    }

    .main-content-container .frame-1-img-2 {
        padding: 0;
        max-width: 477px;
    }

    .frame-1-txt-container {
        padding: 0;
    }

    .frame-1-btn-wrapper {
        padding-top: 2.5rem;
    }

    .frame-1-btn {
        width: 230px;
    }

    /* ── Frame 2 — What's Inside ── */
    .frame-2-container {
        flex-direction: row;
        justify-content: center;
        column-gap: 1rem;
    }

    .frame-2-cta-img-wrapper {
        padding: 0;
    }

    .frame-2-block {
        margin: 0;
    }

    /* ── Frame 3 — Checklist ── */
    .frame-3-heading {
        text-align: center;
    }

    .frame-3-txt {
        text-align: center;
    }

    .frame-3-steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(auto, 293px));
        grid-template-rows: auto auto;
        margin: 76px var(--side-pad) 0;
        padding: 0;
        gap: 16px;
        justify-content: center;
    }

    .frame-3-step {
        width: 293px;
    }

    /* ── Frame 4 — CTA Image ── */
    .frame-4-img-1-1 {
        display: none;
    }

    .frame-4-container {
        margin-top: 186px;
    }

    /* ── Frame 5 — About ── */
    .frame-5-container {
        display: flex;
        margin: var(--section-gap) var(--side-pad) 0;
        column-gap: 5rem;
    }

    .frame-5-info-container {
        max-width: 534px;
    }

    .frame-4-img-2 {
        max-width: 608px;
    }

    .frame-5-heading-txt {
        margin-top: 80px;
    }

    .frame-5-img-1,
    .frame-5-heading-txt,
    .frame-5-img-2,
    .frame-5-txt-block,
    .frame-5-info-container {
        padding: 0;
    }

    /* ── Frame 6 — FAQ ── */
    .frame-6-heading-container,
    .faq-accordion {
        padding: 0;
    }

    .frame-6-heading-container {
        margin: var(--section-gap) var(--side-pad) 0;
    }

    .faq-accordion {
        margin: 64px var(--side-pad) 0;
        max-width: 1220px;
    }

    /* ── Frame 7 — Reviews: Grid layout ── */
    .carousel-item {
        display: block !important;
        opacity: 1 !important;
    }

    .carousel-inner {
        display: grid;
        grid-template-columns: repeat(3, minmax(auto, 389px));
        grid-template-rows: auto auto;
        gap: 16px;
        justify-content: center;
    }

    .carousel-dots,
    .btn-chevron {
        display: none;
    }

    .testimonial-wrap {
        padding: 90px var(--side-pad) 75px;
        background: url(../img/volan_frame_7_resized_shadow.webp) center no-repeat;
    }

    .carousel-item {
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* ── Frame 8 — Final CTA ── */
    .frame-8-cta-img-1,
    .frame-8-cta-img-2 {
        display: none;
    }

    .frame-8-cta {
        margin-top: 60px;
        display: flex;
        column-gap: 15px;
        justify-content: center;
        padding: 0 0 100px;
    }

    .frame-8-cta-2 {
        margin: 0;
    }

    .frame-8-heading {
        padding: 0;
    }

    .frame-8-container {
        padding: 0 var(--side-pad);
    }
}


/* ── 992–1439px: Tablet-Desktop tweaks ── */
@media screen and (min-width: 992px) and (max-width: 1439px) {
    .frame-3-steps {
        grid-template-columns: repeat(3, minmax(auto, 293px));
    }

    .frame-1-img-container {
        padding: 0 16px;
    }

    .frame-2-container {
        padding: 0 16px;
    }

    .frame-5-container {
        margin: 150px 16px 0;
    }

    .frame-4-img-2 {
        max-width: 50%;
    }

    .carousel-inner {
        grid-template-columns: repeat(3, minmax(auto, 250px));
    }

    .testimonial-card {
        height: 284px;
    }
}


/* ── ≥ 1440px: Wide desktop — grid placement ── */
@media screen and (min-width: 1440px) {
    .step-01 { grid-column: 1; grid-row: 2; }
    .step-02 { grid-column: 2; grid-row: 1; }
    .step-03 { grid-column: 2; grid-row: 2; }
    .step-04 { grid-column: 3; grid-row: 1; }
    .step-05 { grid-column: 4; grid-row: 1; }
    .step-06 { grid-column: 4; grid-row: 2; }
}