/* ============================================================
   Bravo Fence — responsive.css
   Version: 2.0 (Refactored)
   ============================================================
   BREAKPOINT MAP
   ─────────────────────────────────────────────────────────
   ≤ 1600px  — Large widescreen
   ≤ 1500px  — Wide desktop
   ≤ 1300px  — Desktop (xl)
   ≤ 1199px  — Laptop / small desktop (lg)
   ≤  991px  — Tablet landscape (md)
   ≤  767px  — Tablet portrait (sm)
   ≤  575px  — Large mobile (xs)
   ≤  479px  — Mobile (xxs)
   ≤  380px  — Small mobile
   ============================================================ */


/* ============================================================
   ≤ 1600px  LARGE WIDESCREEN
   ============================================================ */
@media (max-width: 1600px) {
    /* reserved for future rules */
}


/* ============================================================
   ≤ 1500px  WIDE DESKTOP
   ============================================================ */
@media (max-width: 1500px) {
    /* reserved for future rules */
}


/* ============================================================
   ≤ 1300px  DESKTOP (xl)
   ============================================================ */
@media (max-width: 1300px) {
    /* Slider arrow positioning */
    .client-reviews-slider-wrapper .swiper-button-next, .client-reviews-slider-wrapper .swiper-rtl .swiper-button-prev {
        right: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(50%);
        margin-right: -25px;
    }
    .client-reviews-slider-wrapper .swiper-button-prev, .client-reviews-slider-wrapper .swiper-rtl .swiper-button-next {
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: 0;
        margin-left: -25px;
    }
    .client-reviews-slider-wrapper {
         padding-bottom: clamp(60px, 6vw, 80px);
    }
    /* Slider arrow positioning */
}



/* ============================================================
   ≤ 1199px  LAPTOP / SMALL DESKTOP (lg)
   ============================================================ */
@media (max-width: 1199.98px) {

    /* --- Header --- */
    .bravo-header-logo img {
        max-width: clamp(100px, 50vw, 120px);
    }

    .bravo-header-actions,
    .bravo-header-right {
        gap: 10px;
    }

    .bravo-nav ul li       { margin-right: 5px; }
    .bravo-nav ul li a     { font-size: 12px; }
    .bravo-header-actions .bravo-btn { font-size: 10px; }

    /* --- Service Coverage --- */
    .service-locations-info {
        max-width: clamp(560px, 80vw, 630px);
    }




}


/* ============================================================
   ≤ 991px  TABLET LANDSCAPE (md)
   ============================================================ */
@media (max-width: 991.98px) {

    /* padding-bottom */
   
    

    /* --- Header --- */
    .bravo-header-contact { gap: 10px; }

    .bravo-header-logo img {
        max-width: clamp(100px, 50vw, 165px);
    }


    

    

    /* --- About Intro — full-width columns --- */
    .financing-banner-card .col,
    .about-intro-area .col {
        flex: 1 0 100%;
    }


    /* --- Auto-center elements that stack --- */
    .process-timeline-step-title,
    .branch-office-card,
    .financing-options-img,
    .financing-banner-card-img-info,
    .about-intro-img-wrapper,
    .about-intro-img-wrapper img {
        margin-right: auto;
        margin-left: auto;
    }

    .about-intro-img-wrapper {
        width: clamp(280px, 90vw, 700px);
    }

    .financing-banner-card-img-info { max-width: 380px; }

    .benefits-card-content p,
    .service-locations-info,
    .financing-banner-card-img-wrapper,
    .financing-banner-card.version-2 .financing-banner-card-img-wrapper {
        max-width: 100%;
    }

    .branch-office-card { max-width: 500px; }

    /* --- Hide <br> tags on tablet --- */
    br { display: none; }

    /* --- Financing card — border-radius swap when stacked --- */
    .financing-banner-card.version-2 .financing-banner-card-content {
        border-top-left-radius: 16px;
        border-bottom-left-radius: 0;
        border-top-right-radius: 16px;
    }

    .financing-banner-card.version-2 .financing-banner-card-img-wrapper {
        border-top-right-radius: 0;
        border-bottom-right-radius: 16px;
        border-bottom-left-radius: 16px;
    }

    /* --- Process Timeline --- */
    .timeline-line {
        max-width: calc(100% - 250px);
        top: 22px;
    }

    .process-timeline-step-title { max-width: 400px; }

    /* --- Team Member Modal — narrower image column --- */
    .team-member-bg          { width: 250px; }
    .team-member-modal-content { width: calc(100% - 250px); }

    /* fence-materials-section */
    .maintenance-services-card-wrapper .col{
        flex: 1 0 100%;
    }
    /* fence-materials-section */


    /* fence-materials-section */
    .maintenance-services-card {
        max-width: clamp(280px, 60vw, 500px);
        width: 100%;
    }
    .maintenance-services-card-wrapper .col{
        flex: 1 0 50%;
    }
    /* fence-materials-section */
}


/* ============================================================
   ≤ 767px  TABLET PORTRAIT (sm)
   ============================================================ */
@media (max-width: 767.98px) {

    .banner-content .bottom-sub-title { letter-spacing: 0.25px; }
    .banner-content p                  { letter-spacing: 0.5px; }

    /* --- Team Member Modal — fully stacked --- */
    .team-member-bg {
        width: 100%;
        position: relative;
        height: 350px;
        margin-bottom: 30px;
    }

    .team-member-modal-content { width: 100%; }
}


/* ============================================================
   ≤ 575px  LARGE MOBILE (xs)
   ============================================================ */
@media (max-width: 575.98px) {

    /* --- Banner --- */
    .banner-content .bottom-sub-title { letter-spacing: 0.10px; }
    .bottom-sub-title { font-size: 20px; }


}


/* ============================================================
   ≤ 479px  MOBILE (xxs)
   ============================================================ */
@media (max-width: 479.98px) {

    /* --- Base typography scale-down --- */
    body          { font-size: 16px; }
    .top-sub-title { font-size: 12px; }

    /* --- Residential fencing list — single column --- */
    .residential-fencing-solutions ul > li {
        flex: 1 0 100%;
    }
    /* fence-materials-section */
    .maintenance-services-card-wrapper .col{
        flex: 1 0 100%;
    }
    /* fence-materials-section */
}


/* ============================================================
   ≤ 380px  SMALL MOBILE
   ============================================================ */
@media (max-width: 380px) {

    /* --- Heading scale-down --- */
    h1 { font-size: 36px; }
    h2 { font-size: 30px; }
    h3 { font-size: 24px; }

    /* --- Sub-title & body scale-down --- */
    .bottom-sub-title { font-size: 16px; }

    .banner-content .bottom-sub-title,
    .banner-content p {
        letter-spacing: 0;
    }

    body { font-size: 14px; }
    .title-48 {
        font-size: clamp(24px, 4vw, 48px);
    }
}

/* ============================================================
   37. FIX ALL SECTION
============================================================ */
@media (max-width: 1271px) {
    .form.blue-card {
        margin-right: 15px;
    }
}
@media(max-width:1024px){
    .loc-sectiion-x1 .row {
        --bs-gutter-y: 30px;
    }
    .loc-sectiion-x1.section-area .card {
        padding-left: 0;
    }
    .stp-item {
        min-height: 158px;
    }
}

@media (max-width: 768px) {

    .owl-carousel .owl-nav button span {
        transform: translateY(0px);
    }
}