/*
 * Responsive fixes - Local Dive Khaolak
 * Loaded after responsive.css. Overrides only: the vendor theme files
 * (style.css / responsive.css) stay untouched so a theme update stays trivial.
 */

/* ------------------------------------------------------------------
 * 1. "One day trip" schedule on tablet and mobile
 *
 * The theme's <=1139px rules hide .image-layer and expect a
 * <figure class="image"> instead, which this site's markup never renders.
 * The block therefore lost both its photo and its height, and the
 * always-visible hover text stacked on top of itself.
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 1139px) {
    /* The section heading sat close under the sticky header on small screens.
     * Drop it further into the section and keep it clear of the first row. */
    .day-trip-schedule {
        padding-top: 64px;
    }

    .day-trip-schedule .sec-title {
        margin-bottom: 50px;
    }

    .day-trip-schedule-block .image-layer {
        display: block;
    }

    .day-trip-schedule-block .inner-box {
        height: 260px;
    }

    .day-trip-schedule-block .hover-inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 10px 15px 20px;
    }

    /* The theme hides the day label on small screens, which leaves the card
     * with no way to say which day it is. Keep it, moved clear of the
     * destination text that is permanently visible below it. */
    .day-trip-schedule-block .caption-box,
    .day-trip-schedule-block:hover .inner-box .caption-box {
        display: block;
        top: 12px;
        bottom: auto;
        opacity: 1;
        visibility: visible;
        z-index: 3;
    }
}

@media only screen and (max-width: 767px) {
    .day-trip-schedule .day-trip-schedule-box .outer-box .day-trip-schedule-block,
    .day-trip-schedule .day-trip-schedule-box .outer-box:hover .day-trip-schedule-block,
    .day-trip-schedule .day-trip-schedule-box .outer-box .day-trip-schedule-block:hover {
        width: 50%;
    }

    .day-trip-schedule-block .inner-box {
        height: 220px;
    }

    .day-trip-schedule-block .hover-box {
        padding: 15px;
    }
}

/* Destination name and price sit on a dark photo gradient, so they read
 * white - the default dark heading colour was unreadable there. */
.day-trip-schedule-block .hover-box h4,
.day-trip-schedule-block .hover-box .text {
    color: #ffffff;
}

.day-trip-schedule-block .hover-inner {
    padding-top: 10px;
}

.day-trip-schedule-block a.schedule-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.day-trip-schedule-block .hover-inner .schedule-more {
    display: inline-block;
    margin-top: 14px;
    pointer-events: none;
}

.day-trip-schedule-block .hover-inner .schedule-more .btn-title {
    font-size: 13px;
    text-transform: uppercase;
    padding-left: 16px;
    padding-right: 16px;
}

/* ------------------------------------------------------------------
 * 2. Banner slider dots: 4px visual dot, but also a 4px tap target.
 * Keep the dot, grow the target to 24px.
 * ------------------------------------------------------------------ */
.banner-two .owl-theme .owl-dots button.owl-dot {
    /* owl.css sets "padding: 0 !important" on every dot button, so matching it
     * is the only way to grow the hit area without editing the vendor file. */
    padding: 10px !important;
    margin: 0px;
}

/* ------------------------------------------------------------------
 * 3. iOS Safari zooms the whole page when a focused field is under 16px.
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
    .contact-form .form-group input,
    .contact-form .form-group textarea,
    .contact-form .form-group select,
    .default-form .form-group input[type="text"],
    .default-form .form-group input[type="email"],
    .default-form .form-group textarea {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------------
 * 4. CKEditor / tour body images: keep natural size, never force full
 * column width. Inline style="width:100%" from the editor is overridden.
 * ------------------------------------------------------------------ */
.text-block img,
.tour-detail-content img,
.trip-details .content-column img,
.welcome-section .text img {
    max-width: 100%;
    width: auto !important;
    height: auto;
}

/* The large tour photo opens in Fancybox. The cursor marks it as clickable. */
.gallery-carousel .tour-zoom {
    display: block;
    cursor: zoom-in;
    color: inherit;
}

.trip-details .thumb-carousel .owl-item.current .slide-item {
    border-width: 2px;
}

.trip-details .content-column .main-image-box {
    margin-bottom: 28px;
}

/* Native horizontal thumbnail rail: small image files plus a visible scrollbar. */
.trip-details .thumb-carousel {
    display: flex;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 10px;
    scrollbar-color: #061138 #e5e7eb;
    scrollbar-width: auto;
    overscroll-behavior-x: contain;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.trip-details .thumb-carousel.is-dragging {
    cursor: grabbing;
}

.trip-details .thumb-carousel .slide-item {
    flex: 0 0 112px;
    min-width: 112px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 15px;
    background: #fff;
    cursor: grab;
}

.trip-details .thumb-carousel.is-dragging .slide-item {
    cursor: grabbing;
}

.trip-details .thumb-carousel .slide-item.current {
    border-color: #061138;
}

.trip-details .thumb-carousel .slide-item:focus-visible {
    outline: 3px solid #d5ae82 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #061138;
}

.trip-details .thumb-carousel .image-layer {
    display: block;
}

.trip-details .thumb-carousel::-webkit-scrollbar {
    height: 10px;
}

.trip-details .thumb-carousel::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #e5e7eb;
}

.trip-details .thumb-carousel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #061138;
}

.page-banner.page-banner--compact .inner-container {
    padding: 36px 0 24px;
}

.trip-details .basic-info .tour-package-name {
    display: block;
    margin: 0;
    color: #061138;
    font-size: 32px;
    line-height: 1.2;
    text-transform: uppercase;
}

.trip-details .basic-info .tour-package-rating {
    display: block;
    clear: both;
    margin-top: 6px;
}

.trip-details .basic-info .tour-package-rating .tour-stars {
    display: block;
    margin-top: 0;
}

.trip-details .basic-info .tour-price {
    float: right;
    text-align: right;
}

.trip-details .basic-info .tour-price .p-title {
    font-size: 13px;
    text-transform: uppercase;
    line-height: 20px;
    color: #7f8a99;
}

.trip-details .basic-info .tour-price .p-amount {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 30px;
    color: #061138;
}

@media (max-width: 767px) {
    .trip-details .basic-info .tour-package-name {
        font-size: 24px;
    }

    .trip-details .basic-info .tour-price {
        float: none;
        text-align: left;
        margin-top: 12px;
    }
}

.gallery-carousel.owl-theme .owl-nav button.owl-prev,
.gallery-carousel.owl-theme .owl-nav button.owl-next,
.gallery-carousel.owl-theme .owl-nav button.owl-prev:hover,
.gallery-carousel.owl-theme .owl-nav button.owl-next:hover,
.gallery-carousel.owl-theme .owl-nav button.owl-prev:focus,
.gallery-carousel.owl-theme .owl-nav button.owl-next:focus {
    background: transparent;
    box-shadow: none;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

.gallery-carousel.owl-theme .owl-nav button.owl-prev:hover,
.gallery-carousel.owl-theme .owl-nav button.owl-next:hover {
    color: #d5ae82;
}

.trip-details .content-column .gallery-carousel.owl-theme .owl-nav .owl-prev,
.trip-details .content-column .gallery-carousel.owl-theme .owl-nav .owl-next {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    background: transparent;
}

.trip-details .content-column .gallery-carousel.owl-theme .owl-nav .owl-prev {
    left: 12px;
}

.trip-details .content-column .gallery-carousel.owl-theme .owl-nav .owl-next {
    right: 12px;
}

.tour-booking-card,
.tour-enquiry-card {
    border: 1px solid #ead9c4;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    padding: 0 0 16px;
    margin-bottom: 22px;
    box-shadow: none;
}

.tour-booking-card h4,
.tour-enquiry-card h4 {
    text-transform: uppercase;
    color: #fff;
    background: #061138;
    border-bottom: 3px solid #d5ae82;
    margin: 0 0 16px;
    padding: 14px 16px;
    font-size: 16px;
    letter-spacing: 0.04em;
}

.tour-booking-card .tour-booking-form {
    padding: 0 16px;
}

.tour-booking-card .default-form .form-group {
    margin-bottom: 12px;
}

.tour-booking-card .default-form .form-group .field-label {
    color: #061138;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.tour-booking-card .default-form .form-group .field-inner {
    display: block;
    width: 100%;
}

.tour-booking-card .default-form .form-group input[type="text"],
.tour-booking-card .default-form .form-group input[type="email"],
.tour-booking-card .default-form .form-group input[type="tel"],
.tour-booking-card .default-form .form-group input[type="number"],
.tour-booking-card .default-form .form-group input[type="date"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 48px;
    padding: 8px 14px;
    color: #061138;
    background: #fbf8f4;
    border: 1px solid #ead9c4;
    border-radius: 8px;
}

.tour-booking-card .default-form .form-group input.datepicker {
    cursor: pointer;
}

#ui-datepicker-div {
    z-index: 10001 !important;
    width: 18em;
    border: 1px solid #ead9c4;
    border-radius: 12px;
    padding: 8px;
    background: #fff;
    box-shadow: none;
}

#ui-datepicker-div .ui-widget-header {
    background: #061138;
    background-image: none;
    border: 0;
    border-radius: 8px;
    color: #fff;
}

#ui-datepicker-div .ui-datepicker-title select {
    color: #061138;
    background: #fff;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    cursor: pointer;
    top: 6px;
}

#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
    background: none;
    text-indent: 0;
    overflow: visible;
    color: #fff;
    font-size: 0;
}

#ui-datepicker-div .ui-datepicker-prev span:before,
#ui-datepicker-div .ui-datepicker-next span:before {
    font-size: 22px;
    line-height: 16px;
}

#ui-datepicker-div .ui-datepicker-prev span:before {
    content: "‹";
}

#ui-datepicker-div .ui-datepicker-next span:before {
    content: "›";
}

#ui-datepicker-div .ui-state-default {
    background: #fbf8f4;
    background-image: none;
    border: 1px solid transparent;
    color: #061138;
    text-align: center;
}

#ui-datepicker-div .ui-state-active,
#ui-datepicker-div .ui-state-hover {
    background: #d5ae82;
    background-image: none;
    border-color: #d5ae82;
    color: #061138;
}

.tour-booking-card .default-form .form-group input[type="text"]:focus,
.tour-booking-card .default-form .form-group input[type="email"]:focus,
.tour-booking-card .default-form .form-group input[type="tel"]:focus,
.tour-booking-card .default-form .form-group input[type="number"]:focus,
.tour-booking-card .default-form .form-group input[type="date"]:focus {
    background: #fff;
    border-color: #d5ae82;
    box-shadow: 0 0 0 3px rgba(213, 174, 130, 0.28);
}

.tour-booking-card .theme-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 4px;
}

.tour-booking-card .btn-style-one .btn-title {
    width: 100%;
    border-radius: 8px;
    background: #d5ae82;
    color: #061138;
}

.tour-booking-card .btn-style-one:hover .btn-title {
    background: #061138;
    color: #fff;
}

.tour-enquiry-card p {
    margin: 0 14px 10px;
}

.tour-enquiry-card p:last-child {
    margin-bottom: 0;
}

.tour-enquiry-card a,
.tour-enquiry-card .tour-enquiry-plain {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #061138;
    background: #fbf8f4;
    border: 1px solid #ead9c4;
    border-radius: 10px;
    padding: 10px 10px;
    text-decoration: none;
}

.tour-enquiry-card a:hover {
    background: #fff;
    border-color: #d5ae82;
    color: #061138;
}

.tour-enquiry-card i {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #061138;
    color: #d5ae82;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.tour-enquiry-card .fa-whatsapp {
    background: #128c7e;
    color: #fff;
}

.tour-enquiry-card a span {
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.2;
}

.tour-include-tabs {
    margin-bottom: 22px;
    border: 1px solid #ead9c4;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
}

.tour-include-tabs .tab-buttons {
    display: flex;
}

.tour-include-tabs .tab-btn {
    flex: 1 1 50%;
    margin: 0;
    border: 0;
    border-bottom: 3px solid transparent;
    background: #fbf8f4;
    color: #061138;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    padding: 14px 8px;
    cursor: pointer;
}

.tour-include-tabs .tab-btn.active-btn {
    background: #061138;
    color: #fff;
    border-bottom-color: #d5ae82;
}

.tour-include-tabs .price-info {
    padding: 14px 14px 4px;
}

.tour-include-tabs .price-info ul {
    margin: 0;
}

.related-tours {
    padding-top: 20px;
    border-bottom: 0;
}

.tour-stars {
    display: inline-block;
    color: #d5ae82;
    letter-spacing: 2px;
    font-size: 14px;
    line-height: 1.4;
    margin-top: 6px;
}

.tour-review-list {
    margin-top: 28px;
}

.tour-review-list h4 {
    text-transform: uppercase;
    color: #061138;
    margin-bottom: 8px;
}

.tour-review-item {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 14px 0;
}

.tour-review-item h5 {
    margin: 6px 0 4px;
    color: #061138;
}

.tour-review-item p {
    margin-bottom: 0;
}

.header-style .header-upper .info li,
.header-style .header-upper .info li a,
.main-footer .info-widget .info li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.header-style .header-upper .info li .icon,
.main-footer .info-widget .info li .icon {
    flex: 0 0 16px;
    width: 16px;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* ------------------------------------------------------------------
 * 5. Keep the primary navigation on one row on landscape tablets and
 * small laptops. Below 1200px the header uses the hamburger instead.
 *
 * The theme reserves 180px for the logo at these widths but leaves the
 * desktop links at 50px horizontal padding each. With this site's nine
 * menu items, FAQ / Blog / Contact wrapped to a second row from roughly
 * 1200px through 1280px, doubling the nav height. Compacting the logo and
 * link spacing preserves readable 13px labels and the full 60px target.
 * The long street address is hidden only in this tight range; phone and
 * email remain visible and the complete address is still in the footer.
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 1199px) {
    .header-style .primary-menu {
        justify-content: space-between;
    }

    .header-style .logo-box {
        flex: 0 0 135px;
        width: 135px;
        padding: 0 18px 0 0;
    }

    .header-style .logo-box img {
        margin: 12px 0;
    }

    .main-header .nav-outer .main-menu,
    .sticky-header {
        display: none !important;
    }

    .nav-outer .mobile-nav-toggler {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .header-style .header-top {
        display: flex;
        align-items: center;
        margin-left: auto;
        border-left: 0;
    }

    .header-style .header-upper {
        display: block;
        padding: 0;
    }

    .header-style .header-upper .info ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .header-style .nav-content {
        display: flex;
        align-items: center;
    }

    .header-style .nav-outer .mobile-nav-toggler {
        float: none;
        display: flex;
        align-items: center;
        margin: 0 0 0 20px;
        line-height: 1;
    }

    .header-style .header-upper .info li,
    .header-style .header-upper .info li a {
        float: none;
        display: block;
        margin: 0;
        line-height: 1;
    }

    .header-style .header-upper .info li.header-address,
    .header-style .header-contact-label {
        display: none;
    }

    .header-style .header-upper .info li:before {
        display: none;
    }

    .header-style .header-upper .icon {
        font-size: 18px;
        padding-right: 0;
    }

    /* Phone / email icons: 44x44 tap area (icon itself stays 18px). */
    .header-style .header-upper .info ul {
        gap: 0;
    }

    .header-style .header-upper .info li a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Phone / email glyphs match the 30px hamburger icon next to them. */
    .header-style .header-upper .info li a .icon {
        width: auto;
        font-size: 28px;
        line-height: 1;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1339px) {
    .header-style .logo-box {
        flex: 0 0 160px;
        width: 160px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .header-style .header-top {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-style .main-menu .navigation {
        display: flex;
        flex-wrap: nowrap;
    }

    .header-style .main-menu .navigation > li {
        float: none;
        flex: 0 0 auto;
    }

    .header-style .main-menu .navigation > li > a {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 13px;
        white-space: nowrap;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .header-style .primary-menu {
        justify-content: flex-start;
    }

    .header-style .header-top {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .header-style .header-upper {
        display: block;
        flex: 0 1 auto;
        padding: 0 0 0 28px;
    }

    .header-style .nav-content {
        margin-left: auto;
    }

    .header-style .header-upper .info ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-style .header-upper .info li,
    .header-style .header-upper .info li a {
        float: none;
        display: flex;
        align-items: center;
        gap: 8px;
        width: auto;
        margin: 0;
        font-size: 13px;
        line-height: 24px;
        white-space: nowrap;
    }

    .header-style .header-upper .info li.header-address {
        display: none;
    }

    .header-style .header-upper .header-phone {
        order: 1;
    }

    .header-style .header-upper .header-email {
        order: 2;
        margin-right: 0;
    }

    .header-style .header-upper .info li:before {
        display: none;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1366px) {
    .header-style .header-upper .info ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-style .header-upper .info li.header-address {
        display: none;
    }

    .header-style .header-upper .header-phone,
    .header-style .header-upper .header-email,
    .header-style .header-upper .header-phone a,
    .header-style .header-upper .header-email a {
        float: none;
        display: flex;
        align-items: center;
        gap: 8px;
        width: auto;
        margin: 0;
        line-height: 24px;
        white-space: nowrap;
    }

    .header-style .header-upper .header-phone {
        order: 1;
    }

    .header-style .header-upper .header-email {
        order: 2;
    }

    .header-style .header-upper .info li:before {
        display: none;
    }
}

/* ------------------------------------------------------------------
 * 6. Wide data tables on phones
 *
 * A three-column price table has a natural width of about 365-450px.
 * The surrounding sections hide overflow, so on 320/360px screens the
 * final price column was clipped with no way to reach it. Make the table
 * wrapper the scroll owner while keeping short two-column tables fluid.
 * ------------------------------------------------------------------ */
/* .table-scroll is added by custom-script.js around tables pasted into CMS content. */
.custom-table-wrap,
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.custom-table-wrap .custom-table {
    margin-bottom: 0;
}

.table-scroll {
    margin-bottom: 1rem;
}

.table-scroll > table {
    margin-bottom: 0;
}

/* Global CMS safety: editor content must never widen the document. */
.text-block iframe,
.tour-detail-content iframe,
.trip-details iframe,
.welcome-section iframe,
.text-block video,
.tour-detail-content video,
.trip-details video,
.welcome-section video {
    display: block;
    max-width: 100%;
}

.text-block,
.tour-detail-content,
.trip-details .content-column,
.welcome-section .text,
.contact-section,
.main-footer {
    overflow-wrap: anywhere;
}

/* Tour booking / inquiry form: labels are real <label>s, inquiry mode adds a textarea. */
.tour-booking-card .default-form .form-group label.field-label {
    display: block;
    margin-bottom: 6px;
}

.tour-booking-card .default-form .form-group textarea {
    display: block;
    width: 100%;
    min-height: 110px;
    box-sizing: border-box;
    padding: 10px 14px;
    color: #061138;
    background: #fbf8f4;
    border: 1px solid #ead9c4;
    border-radius: 8px;
    resize: vertical;
}

.tour-booking-card .alert {
    margin: 0 16px 12px;
}

/* Tour detail main gallery: larger Previous / Next arrows (owl default ‹ › glyphs). */
.trip-details .content-column .gallery-carousel.owl-theme .owl-nav {
    margin-top: -28px;
}

.trip-details .content-column .gallery-carousel.owl-theme .owl-nav button.owl-prev,
.trip-details .content-column .gallery-carousel.owl-theme .owl-nav button.owl-next {
    width: 56px;
    height: 56px;
    padding: 0 !important;
    border-radius: 50%;
    background: rgba(6, 17, 56, 0.45);
    font-size: 52px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trip-details .content-column .gallery-carousel.owl-theme .owl-nav button.owl-prev:hover,
.trip-details .content-column .gallery-carousel.owl-theme .owl-nav button.owl-next:hover,
.trip-details .content-column .gallery-carousel.owl-theme .owl-nav button.owl-prev:focus-visible,
.trip-details .content-column .gallery-carousel.owl-theme .owl-nav button.owl-next:focus-visible {
    background: rgba(6, 17, 56, 0.75);
    color: #d5ae82;
}

/* The ‹ › glyphs are tiny in this font: hide them and draw a Font Awesome chevron instead. */
.trip-details .content-column .gallery-carousel.owl-theme .owl-nav button span {
    font-size: 0;
    line-height: 1;
}

.trip-details .content-column .gallery-carousel.owl-theme .owl-nav button span::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 24px;
}

.trip-details .content-column .gallery-carousel.owl-theme .owl-nav button.owl-prev span::before {
    content: '\f053';
}

.trip-details .content-column .gallery-carousel.owl-theme .owl-nav button.owl-next span::before {
    content: '\f054';
}

/* Touch screens cannot hover, so keep the arrows visible there. */
@media (hover: none) {
    .trip-details .content-column .gallery-carousel.owl-theme .owl-nav {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .trip-details .content-column .gallery-carousel.owl-theme .owl-nav {
        margin-top: -22px;
    }

    .trip-details .content-column .gallery-carousel.owl-theme .owl-nav button.owl-prev,
    .trip-details .content-column .gallery-carousel.owl-theme .owl-nav button.owl-next {
        width: 44px;
        height: 44px;
    }

    .trip-details .content-column .gallery-carousel.owl-theme .owl-nav button span::before {
        font-size: 19px;
    }

    .trip-details .content-column .gallery-carousel.owl-theme .owl-nav .owl-prev {
        left: 8px;
    }

    .trip-details .content-column .gallery-carousel.owl-theme .owl-nav .owl-next {
        right: 8px;
    }
}

/* Tour detail main gallery: 3:2 frame (was 45%, which cropped most of each photo). */
.trip-details .content-column .gallery-carousel .slide-item .image-layer {
    padding-bottom: 66.667%;
}

/* Keep every tour-detail slide and thumbnail filled like a cover image. */
.trip-details .content-column .gallery-carousel .image-layer,
.trip-details .content-column .thumb-carousel .image-layer {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 767px) {
    .trip-details .thumb-carousel .slide-item {
        flex-basis: 92px;
        min-width: 92px;
    }
}

/* Responsive audit: allow pricing tables to shrink within their grid. */
.home-speedboat-rates > div > * { min-width: 0; }
.home-speedboat-rates .custom-table { table-layout: fixed; }
.home-speedboat-rates .custom-table th,
.home-speedboat-rates .custom-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Contact details grow naturally, including long addresses and emails. */
.contact-section .info-block { display: flex; }
.contact-section .info-block .inner-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}
.contact-section .info-block p {
    height: auto;
    overflow: visible;
    overflow-wrap: anywhere;
}
.contact-section .info-block .link-box { margin-top: auto; }
.contact-section .info-block .link-box a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
@media (max-width: 767px) {
    .welcome-section, .top-destinations, .yacht-rental-section, .news-section {
        padding-top: 40px;
        padding-bottom: 32px;
    }
    .day-trip-schedule .sec-title { margin-bottom: 28px; }
    .contact-section { padding-top: 40px; padding-bottom: 16px; }
    .contact-section .info-block { margin-bottom: 20px; }
    .contact-section .info-block .inner-box { padding: 24px 20px; }
    .contact-section .info-block .content-box { padding-bottom: 8px; margin-bottom: 8px; }
    .contact-section .info-block p { padding-bottom: 12px; margin-bottom: 0; }
    .home-snorkel-book { min-width: 0; max-width: 100%; padding-left: 24px; padding-right: 24px; }
    .tour-booking-card .default-form input,
    .tour-booking-card .default-form select { font-size: 16px; }
}

/* Plain CKEditor content pages (e.g. Land Tour). */
.content-page-section {
    padding: 60px 0 80px;
}

.content-page-body {
    max-width: 960px;
    margin: 0 auto;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.8;
}

.content-page-body img {
    max-width: 100%;
    height: auto;
}

.content-page-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 767px) {
    .content-page-section {
        padding: 36px 0 50px;
    }
}

/* Home Macro Dive: on desktop the tour photos stretch to the full height of the intro column. */
@media (min-width: 992px) {
    .home-macro.is-equal .sec-title.mt-5 {
        margin-top: 0 !important;
    }

    .home-macro.is-equal .content > p:last-of-type {
        margin-bottom: 0;
    }

    .home-macro.is-equal .content .theme-btn {
        vertical-align: top;
    }

    .home-macro.is-equal .destinations,
    .home-macro.is-equal .destinations > .row {
        height: 100%;
    }

    .home-macro.is-equal .destination-block-three {
        margin-bottom: 0;
    }

    .home-macro.is-equal .destination-block-three .inner-box {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .home-macro.is-equal .destination-block-three .image-box {
        position: relative;
        flex: 1 1 auto;
        min-height: 280px;
    }

    .home-macro.is-equal .destination-block-three .image-box figure.image {
        position: absolute;
        inset: 0;
        height: auto;
        padding-bottom: 0;
        margin: 0;
    }
}

/* Home Macro Dive: when the photos stack under the intro (<992px), keep the
 * same 40px gap under "View More Info" that the Wreck Dive section has. */
@media (max-width: 991px) {
    .home-macro .content {
        margin-bottom: 40px;
    }
}

/* ------------------------------------------------------------------
 * Mobile readability (<=767px)
 *
 * The theme sets body copy at 15px and secondary text at 13-14px, which is
 * hard to read on phones. Body copy -> 16px with a looser line height,
 * secondary text -> 15px, small labels -> 14px. CKEditor content carries
 * inline font-size:13px spans, so those are reset to inherit.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
    body {
        font-size: 16px;
    }

    .text-block,
    .text-block p,
    .text-block li,
    .text-block strong,
    .content-box p,
    .content p,
    .team-text p,
    .text p,
    div.text,
    .title-text,
    .auto-container p,
    .price-info li,
    .home-welcome-box p,
    .content-page-body {
        font-size: 16px;
        line-height: 1.7;
    }

    .text-block span[style*="font-size"],
    .content-page-body span[style*="font-size"] {
        font-size: inherit !important;
    }

    .rental-block .title-box .info,
    .widgets-section .info,
    .info span:not(.icon),
    .copyright {
        font-size: 15px;
    }

    .page-banner .bread-crumb li,
    .secondary-breadcrumb .bread-crumb li,
    .tour-enquiry-card a span,
    .sec-title .upper-text,
    .lower-text,
    .under-text,
    .home-odt-route {
        font-size: 14px;
    }

    /* Logo: the theme box is 135px, which shrinks the "LOCAL DIVE KHAOLAK" wordmark to ~8px text.
     * Up to 190px still leaves room for the phone/email icons and the menu toggle at 360px. */
    .header-style .logo-box {
        flex: 0 0 auto;
        width: clamp(150px, 46vw, 190px);
    }

    /* Tour titles under card photos (Dive Sites, home Wreck/Macro): 14px -> 18px. */
    .destination-block-three .caption-box .title {
        font-size: 18px;
        line-height: 1.35;
    }

    /* Home "Wreck Dive" / "Macro Dive" headings: theme drops .sec-title h2 to 24px,
     * well below the other home section titles (32-44px). */
    .top-destinations .playful-head h2 {
        font-size: 34px;
        line-height: 1.2;
    }
}

/* ------------------------------------------------------------------
 * Data tables on tablet / mobile (<=991px)
 *
 * Keep tables at a readable width (desktop is ~680px) and let the wrapper
 * scroll sideways, instead of squeezing three columns into a phone width.
 * table-cols-N is set by custom-script.js; 1-column layout tables and the
 * home speedboat rates table (already designed for phones) are left alone.
 * ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .table-cols-2 > table {
        min-width: 480px;
    }

    .table-cols-3 > table {
        min-width: 640px;
    }

    .table-cols-2,
    .table-cols-3 {
        padding-bottom: 8px;
        scrollbar-width: thin;
        scrollbar-color: #061138 #e5e7eb;
    }

    .table-cols-2::-webkit-scrollbar,
    .table-cols-3::-webkit-scrollbar {
        height: 6px;
    }

    .table-cols-2::-webkit-scrollbar-track,
    .table-cols-3::-webkit-scrollbar-track {
        background: #e5e7eb;
        border-radius: 3px;
    }

    .table-cols-2::-webkit-scrollbar-thumb,
    .table-cols-3::-webkit-scrollbar-thumb {
        background: #061138;
        border-radius: 3px;
    }
}

/* ------------------------------------------------------------------
 * About Us: team members (sub-pages of the team block)
 * Photo beside the bio on tablet/desktop, stacked above it on phones.
 * ------------------------------------------------------------------ */
.about-team {
    display: grid;
    gap: 48px;
    margin-top: 30px;
}

.about-team-member {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

.about-team-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 8px;
}

.about-team-name {
    margin: 0 0 14px;
    color: #061138;
    font-size: 26px;
    line-height: 1.3;
}

.about-team-body .content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .about-team-member {
        grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 767px) {
    .about-team {
        gap: 40px;
    }

    .about-team-member {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .about-team-photo {
        max-width: 340px;
    }

    .about-team-name {
        font-size: 22px;
    }
}