/* ═══════════════════════════════════════════
   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;
  }
  .frame-8-heading-1 {
    font-size: 68px;
  }

  .frame-8-heading-2 {
    font-size: 30px;
  }

  .frame-8-heading-3 {
    font-size: 40px;
  }
  .frame-1-title-main {
    font-size: 32px;
  }
  .frame-1-title-row--left {
    text-align: right;
  }
}

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

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

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

  /* ── Frame 1 — Hero ── */
  .frame-1-decor {
    display: block;
  }

  .frame-1-img-1 {
    max-width: 750px;
    margin-right: -160px;
  }

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

  .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-decor-left,
  .frame-2-decor-right {
    display: block;
  }

  .frame-2-container .wrap {
    display: grid;
    grid-template-columns: 727px 476px;
    justify-content: center;
    gap: 1rem;
  }

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

  .frame-2-cta-card {
    width: 100%;
    min-height: 500px;
    margin: 0;
    padding: 40px;
    min-height: 100%;
  }

  .frame-2-cta-percent {
    font-size: 100px;
  }

  .frame-2-cta-title {
    font-size: 32px;
  }
  .navbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .frame-2-block {
    margin: 0;
    padding: 40px 40px 20px;
  }

  /* ── Frame 3 — Checklist ── */
  .frame-3-heading {
    text-align: center;
    text-align: center;
    display: flex;
    justify-content: 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 0 0;
    padding: 0;
    gap: 16px;
    justify-content: center;
  }

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

  /* ── Frame 4 — CTA Image ── */
  .frame-4-container {
    margin-top: 120px;
    background: url(../img/section/four-bg.png) center / cover no-repeat;
  }

  .frame-4-content {
    justify-content: space-between;
    padding: 60px 0;
  }

  .frame-4-elements {
    display: block;
  }

  /* ── Frame 5 — About ── */
  .frame-5-container {
    margin-top: var(--section-gap);
  }

  .frame-5-inner {
    display: grid;
    grid-template-columns: 608px 514px;
    align-items: center;
    gap: 80px;
    justify-content: center;
  }

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

  .frame-5-title {
    padding-top: 0;
  }
  .frame-5-name {
    padding: 0;
    line-height: 1.1;
  }

  .frame-4-img-2 {
    width: 100%;
    position: relative;
    z-index: 2;
  }

  .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-top: var(--section-gap);
  }

  .faq-accordion {
    margin-top: 64px;
  }

  /* ── 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 {
    margin-top: 60px;
    display: flex;
    flex-direction: row;
    column-gap: 15px;
    justify-content: center;
    padding: 0 0 100px;
  }

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

  .frame-8-card {
    width: 602px;
    height: 438px;
    padding: 50px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

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

  .frame-8-heading-1 {
    font-size: 100px;
  }

  .frame-8-heading-2 {
    font-size: 50px;
  }

  .frame-8-heading-3 {
    font-size: 86px;
  }

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

  .frame-7-title-accent {
    font-size: 134px;
  }

  .frame-7-title-main {
    font-size: 50px;
    line-height: 120%;
  }

  .frame-6-title-accent {
    font-size: 134px;
  }

  .frame-6-title-main {
    font-size: 50px;
    line-height: 120%;
  }

  .frame-3-title-accent-1 {
    font-size: 100px;
  }

  .frame-3-title-main {
    font-size: 50px;
    line-height: 1;
  }

  .frame-3-title-accent-2 {
    font-size: 80px;
  }

  .frame-3-title-row--right {
    text-align: right;
  }

  .frame-1-title-accent-1 {
    font-size: 134px;
  }

  .frame-1-title-accent-2 {
    font-size: 118px;
  }
}

/* ── 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-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;
  }
}