/* ==========================================================================
   Deep Dive Goa — responsive corrections
   --------------------------------------------------------------------------
   Loaded last in <head> (after assets/css/scuba/responsive.css AND after
   @yield('styles')), so these rules win ties against the theme files and the
   per-page inline <style> blocks without needing !important everywhere.

   Every rule below fixes a specific defect; the comment above each block says
   which file/rule it is correcting.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Hero banner headline
   main.css:1920 sets .banner_slider_2 h2 to 65px/102px and NEITHER
   responsive.css nor scuba/responsive.css ever overrides it, so the headline
   stayed 65px on a 390px phone. clamp() leaves the desktop size untouched
   (6.2vw reaches 65px at ~1048px wide) and scales down below that.
   -------------------------------------------------------------------------- */
.banner_slider_2 .slide__content--headings h2 {
    font-size: clamp(26px, 6.2vw, 65px);
    line-height: 1.16;
}

.banner_slider_2 .slide__content--headings span {
    font-size: clamp(14px, 2.2vw, 24px);
    line-height: 1.5;
}

/* h3 carries line-height:0 in main.css to pull the eyebrow text tight; that
   collapses badly once the text wraps on narrow screens. */
@media (max-width: 575px) {
    .banner_slider_2 .slide__content--headings h3 {
        line-height: 1.4;
        margin-bottom: 6px;
    }
}

/* index.blade.php sets .slide{height:100vh}. On mobile browsers 100vh counts
   the collapsing URL bar, so the CTA button sits below the fold. svh measures
   the small (stable) viewport; the 100vh above stays the fallback. */
.slide {
    height: 100svh;
}

@media (max-width: 575px) {
    .slide__content {
        padding: 16px;
    }
}


/* --------------------------------------------------------------------------
   3. Consistent side gutters on tablet / mobile
   responsive.css:315-317 strips `.ttm-row .container` to padding:0 and zeroes
   its row margins below 1200px, while `.prt-row` sections keep the Bootstrap
   defaults — so alternating sections had different gutters (12px vs 0).
   Restore the row's negative margin and put the gutter on the container, so
   every section lines up at exactly 16px (14px on phones).
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .ttm-row > .container,
    .ttm-row > .container-fluid,
    .prt-row > .container,
    .prt-row > .container-fluid,
    .footer .container,
    footer .container {
        padding-left: 16px;
        padding-right: 16px;
        max-width: 100%;
    }

    .ttm-row > .container > .row,
    .prt-row > .container > .row,
    .footer .container > .row,
    footer .container > .row {
        margin-left: -12px;
        margin-right: -12px;
    }
}

@media (max-width: 575px) {
    .ttm-row > .container,
    .ttm-row > .container-fluid,
    .prt-row > .container,
    .prt-row > .container-fluid,
    .footer .container,
    footer .container {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* --------------------------------------------------------------------------
   4. Duplicate about/feature sliders between 769px and 991px
   main.css:3020 hides .imagesmbhide only up to 768px, but the mobile copy of
   the same slider is marked .d-lg-none, which Bootstrap only hides from 992px
   up. Between 769-991px BOTH copies rendered. Align the two breakpoints.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .imagesmbhide {
        display: none !important;
    }
}


/* --------------------------------------------------------------------------
   6. Section titles and the "View All" header row
   .section-title with d-flex justify-content-between puts the heading and the
   View All button on one line; on phones the button squeezes the heading to
   two or three words per line.
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .section-title.d-flex {
        flex-wrap: wrap;
        gap: 12px;
    }

    .section-title.d-flex .title-header {
        width: 100%;
    }
}


/* --------------------------------------------------------------------------
   7. Video grid
   The iframes are 16:9; at two-per-row on a 390px phone each is ~170px wide,
   which is below YouTube's usable size (the play button and title overlap).
   index.blade.php now uses col-12 col-sm-6 col-md-4; this keeps the embeds
   from ever exceeding their column.
   -------------------------------------------------------------------------- */
.ratio iframe,
.featured-thumbnail img,
.featured-imagebox img {
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   8. Package cards (slick "Special Packages")
   The cards carry long feature lists; below 992px they run to two screens, so
   tighten the type and let the card grow instead of clipping.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .featured-imagebox-services.style2 .featured-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .featured-imagebox-services.style2 .featured-title h3 {
        font-size: 22px;
        line-height: 30px;
    }
}

@media (max-width: 575px) {
    .featured-imagebox-services.style2 .featured-title h3 {
        font-size: 20px;
        line-height: 28px;
    }

    /* "Book on Call" + WhatsApp icon overflow the card at ~360px */
    .featured-imagebox-services.style2 .featured-btn.d-flex {
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }

    .featured-imagebox-services.style2 .featured-btn .pl-40 {
        padding-left: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   9. Slick arrows
   The round arrows are positioned at left/right:10px and sit on top of the
   card content on narrow screens.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .slick-prev,
    .slick-next {
        width: 36px;
        height: 36px;
        line-height: 36px;
    }

    .slick-prev:before,
    .slick-next:before {
        font-size: 22px;
    }

    .slick-prev {
        left: 2px;
    }

    .slick-next {
        right: 2px;
    }
}


/* --------------------------------------------------------------------------
   10. Equipment grid ("Adventure. Comfort. Convenience.")
   Two-up on phones with the icon + caption block underneath each image.
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .featured-imagebox-post.style3 .featured-content {
        padding: 12px 8px;
    }

    .featured-imagebox-post.style3 .featured-title h6 {
        font-size: 14px;
        line-height: 20px;
    }

    .featured-imagebox-post.style3 .featured-content img {
        max-width: 42px;
        height: auto;
    }

    .featured-imagebox-post.style3 .mt-20 {
        margin-top: 10px !important;
    }
}


/* --------------------------------------------------------------------------
   11. Testimonials
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .testimonials.ttm-testimonial-box-view-style2 .testimonial-content {
        padding: 24px 18px;
    }

    .testimonials.ttm-testimonial-box-view-style2 .testimonial-text {
        font-size: 15px;
        line-height: 25px;
    }
}


/* --------------------------------------------------------------------------
   12. FAQ accordions
   Long question text wraps behind the +/- toggle at narrow widths.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .faq-section .accordion .toggle-title,
    .faq-section .accordion .toggle-title a {
        font-size: 15px;
        line-height: 24px;
        padding-right: 34px;
    }

    .faq-section .accordion .toggle-content {
        font-size: 14px;
        line-height: 24px;
    }
}


/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .footer .widget-area {
        margin-bottom: 28px;
    }
}

@media (max-width: 575px) {
    .footer .copyright-text {
        font-size: 13px;
        line-height: 22px;
        text-align: center;
    }
}


/* --------------------------------------------------------------------------
   14. Safety nets
   Nothing should be able to push the page wider than the screen.
   -------------------------------------------------------------------------- */
img,
iframe,
video,
table {
    max-width: 100%;
}

@media (max-width: 991px) {
    .sticky-section {
        background-image: none !important;
    }
}