/* ═══════════════════════════════════════════════════════════════════════════
   GATEWAY SPEED BOAT — LAYOUT FIX & RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════
   Purpose: Fixes viewport overflow, hero alignment, breadcrumb cut-off,
            and inconsistent spacing across all pages.
   Targets: 15" laptops (1366-1536px), tablets, mobile
   Loaded LAST so these rules win the cascade.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. GLOBAL VIEWPORT FIX — Stop horizontal scroll bleed
   This is the ROOT CAUSE of the left-cutoff problem.
   ───────────────────────────────────────────────────────────── */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

.body_wrap,
.body_wrap.o-clip {
    overflow-x: hidden !important;
    max-width: 100vw;
    position: relative;
}

/* Prevent any element from breaking page width */
img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
}


/* ─────────────────────────────────────────────────────────────
   2. CONTAINER STANDARDIZATION
   Consistent max-width across all .container instances.
   ───────────────────────────────────────────────────────────── */
.container {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1536px) {
    .container { max-width: 1280px; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 1440px) {
    .container { max-width: 1200px; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 1366px) {  /* 15-inch laptops — primary fix */
    .container { max-width: 1140px; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1199px) {
    .container { max-width: 960px; }
}
@media (max-width: 991px) {
    .container { max-width: 720px; }
}
@media (max-width: 767px) {
    .container { max-width: 100%; padding-left: 16px; padding-right: 16px; }
}


/* ─────────────────────────────────────────────────────────────
   3. HERO SECTION FIXES (Home page)
   Reduce excess height, contain background images.
   ───────────────────────────────────────────────────────────── */
.hero,
.hero-style,
.hero-slider-wrap,
.hero-slide-content,
.swiper-slide {
    overflow: hidden;
    max-width: 100vw;
}

.hero-slide-content {
    min-height: 600px;
    padding-top: 120px;
    padding-bottom: 80px;
    position: relative;
}

.hero-slider-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.hero .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 1536px) {
    .hero-slide-content { min-height: 560px; padding-top: 100px; padding-bottom: 70px; }
}
@media (max-width: 1366px) {
    .hero-slide-content { min-height: 520px; padding-top: 90px; padding-bottom: 60px; }
}
@media (max-width: 991px) {
    .hero-slide-content { min-height: 460px; padding-top: 80px; padding-bottom: 50px; }
}
@media (max-width: 767px) {
    .hero-slide-content { min-height: 400px; padding-top: 70px; padding-bottom: 40px; }
}

/* Hero title scaling */
.xb-hero_content .title,
.hero .title {
    font-size: clamp(2rem, 4.5vw, 4.5rem);
    line-height: 1.15;
    word-wrap: break-word;
}


/* ─────────────────────────────────────────────────────────────
   4. BREADCRUMB SECTION FIXES (About, Boats, Services, etc)
   The MAIN issue — content was overflowing left of viewport.
   ───────────────────────────────────────────────────────────── */
.breadcrumb,
section.breadcrumb {
    position: relative;
    overflow: hidden !important;
    padding-top: 160px;
    padding-bottom: 80px;
    max-width: 100vw;
}

.breadcrumb .container {
    position: relative;
    z-index: 2;
}

.breadcrumb__content {
    max-width: 720px;
    position: relative;
    z-index: 2;
}

.breadcrumb__title {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.15;
    word-wrap: break-word;
    margin-bottom: 16px;
}

.breadcrumb__text {
    font-size: clamp(0.9rem, 1.05vw, 1rem);
    line-height: 1.6;
    max-width: 600px;
}

.breadcrumb__list {
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* The decorative boat/shape images — keep them inside viewport */
.breadcrumb__shape {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.breadcrumb__shape .img,
.breadcrumb__shape .img--1,
.breadcrumb__shape .img--2,
.breadcrumb__shape .img--3 {
    position: absolute;
    max-width: 50%;
    max-height: 100%;
}

.breadcrumb__shape .img--1 {
    right: 0;
    bottom: 0;
    max-width: 45%;
}

.breadcrumb__shape img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 1536px) {
    .breadcrumb { padding-top: 140px; padding-bottom: 70px; }
    .breadcrumb__shape .img--1 { max-width: 42%; }
}
@media (max-width: 1366px) {
    .breadcrumb { padding-top: 130px; padding-bottom: 60px; }
    .breadcrumb__shape .img--1 { max-width: 40%; }
    .breadcrumb__content { max-width: 640px; }
}
@media (max-width: 991px) {
    .breadcrumb { padding-top: 110px; padding-bottom: 50px; }
    .breadcrumb__shape .img--1 { max-width: 35%; opacity: 0.5; }
}
@media (max-width: 767px) {
    .breadcrumb { padding-top: 100px; padding-bottom: 40px; }
    .breadcrumb__shape .img--1 { display: none; }  /* Hide decorative on mobile for clarity */
}


/* ─────────────────────────────────────────────────────────────
   5. HEADER / NAVBAR ALIGNMENT
   ───────────────────────────────────────────────────────────── */
.header-area,
#xb-header-area {
    width: 100%;
    max-width: 100vw;
    z-index: 100;
}

.xb-header,
.xb-header > .container {
    width: 100%;
    box-sizing: border-box;
}

.header__wrap {
    align-items: center;
}

.xb-header-logo img {
    max-height: 60px;
    width: auto;
}

@media (max-width: 1366px) {
    .xb-header-logo img { max-height: 54px; }
}
@media (max-width: 991px) {
    .xb-header-logo img { max-height: 48px; }
}


/* ─────────────────────────────────────────────────────────────
   6. CONSISTENT SECTION SPACING (8px scale)
   ───────────────────────────────────────────────────────────── */
section {
    position: relative;
    overflow: hidden;
}

.pt-140 { padding-top: 112px !important; }
.pt-135 { padding-top: 104px !important; }
.pt-130 { padding-top: 96px !important; }
.pt-120 { padding-top: 88px !important; }
.pb-140 { padding-bottom: 112px !important; }
.pb-135 { padding-bottom: 104px !important; }
.pb-130 { padding-bottom: 96px !important; }
.pb-120 { padding-bottom: 88px !important; }
.pb-100 { padding-bottom: 72px !important; }
.pb-50  { padding-bottom: 40px !important; }
.pt-50  { padding-top: 40px !important; }
.mt-150 { margin-top: 96px !important; }

@media (max-width: 1536px) {
    .pt-140 { padding-top: 96px !important; }
    .pt-135, .pt-130 { padding-top: 88px !important; }
    .pb-140 { padding-bottom: 96px !important; }
    .pb-135, .pb-130 { padding-bottom: 88px !important; }
    .pb-180, .pt-180, .pb-195 { padding-top: 96px !important; padding-bottom: 96px !important; }
    .mt-150 { margin-top: 80px !important; }
}
@media (max-width: 1366px) {
    .pt-140 { padding-top: 80px !important; }
    .pt-135, .pt-130 { padding-top: 72px !important; }
    .pt-120 { padding-top: 64px !important; }
    .pb-140 { padding-bottom: 80px !important; }
    .pb-135, .pb-130 { padding-bottom: 72px !important; }
    .pb-120 { padding-bottom: 64px !important; }
    .pb-100 { padding-bottom: 56px !important; }
    .pb-180, .pt-180, .pb-195 { padding-top: 80px !important; padding-bottom: 80px !important; }
    .mt-150 { margin-top: 64px !important; }
}
@media (max-width: 991px) {
    .pt-140, .pt-135, .pt-130, .pt-120 { padding-top: 56px !important; }
    .pb-140, .pb-135, .pb-130, .pb-120, .pb-100 { padding-bottom: 56px !important; }
    .pb-180, .pt-180, .pb-195 { padding-top: 56px !important; padding-bottom: 56px !important; }
    .mt-150 { margin-top: 48px !important; }
}
@media (max-width: 767px) {
    .pt-140, .pt-135, .pt-130, .pt-120 { padding-top: 40px !important; }
    .pb-140, .pb-135, .pb-130, .pb-120, .pb-100 { padding-bottom: 40px !important; }
    .pb-180, .pt-180, .pb-195 { padding-top: 40px !important; padding-bottom: 40px !important; }
    .mt-150 { margin-top: 32px !important; }
}


/* ─────────────────────────────────────────────────────────────
   7. CARD GRID FIXES (Boats, Services, Destinations)
   Equal heights, consistent gaps.
   ───────────────────────────────────────────────────────────── */
.row {
    margin-left: -12px;
    margin-right: -12px;
}
.row > [class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 24px;
}

.xb-yacht-item,
.xb-blog-item.services-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.xb-item--inner,
.xb-yacht-item .xb-item--inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.xb-item--holder {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.xb-item--bottom {
    margin-top: auto;
}

/* Card images */
.xb-yacht-item .xb-item--img img,
.xb-blog-item .xb-item--img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1366px) {
    .xb-yacht-item .xb-item--img img,
    .xb-blog-item .xb-item--img img { height: 220px; }
}
@media (max-width: 767px) {
    .xb-yacht-item .xb-item--img img,
    .xb-blog-item .xb-item--img img { height: 200px; }
}


/* ─────────────────────────────────────────────────────────────
   8. ABOUT PAGE — Vision/Mission alignment
   ───────────────────────────────────────────────────────────── */
.xb-about-vission-wrap,
.xb-about-mission-wrap {
    overflow: hidden;
}
.xb-about-right-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}


/* ─────────────────────────────────────────────────────────────
   9. SERVICE / FEATURE SECTIONS
   ───────────────────────────────────────────────────────────── */
.xb-service-wrap,
.xb-service-imges {
    overflow: hidden;
    max-width: 100%;
}
.xb-service-imges .img-item {
    background-size: cover;
    background-position: center;
}


/* ─────────────────────────────────────────────────────────────
   10. CONTACT / FORM SECTIONS
   ───────────────────────────────────────────────────────────── */
.contact,
.contact-padding-md {
    overflow: hidden;
}
.xb-contact-form,
.xb-about-form {
    max-width: 100%;
    box-sizing: border-box;
}
.yr-contact-img iframe {
    max-width: 100%;
    border-radius: 8px;
}


/* ─────────────────────────────────────────────────────────────
   11. FOOTER
   ───────────────────────────────────────────────────────────── */
.footer {
    overflow: hidden;
    max-width: 100vw;
}
.footer .container {
    padding-left: 24px;
    padding-right: 24px;
}
.xb-footer_widget {
    margin-bottom: 24px;
}
.xb-footer_bottom {
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 991px) {
    .xb-footer_bottom {
        flex-direction: column;
        text-align: center;
    }
    .xb-footer_bottom ul {
        justify-content: center;
        flex-wrap: wrap;
    }
}


/* ─────────────────────────────────────────────────────────────
   12. PROJECT / TESTIMONIAL SLIDERS
   ───────────────────────────────────────────────────────────── */
.project-slider,
.xb-testimonial-slider {
    overflow: hidden;
    max-width: 100vw;
}
.swiper-container {
    overflow: hidden;
}
.project-slide-item,
.xb-testimonial-item {
    box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────
   13. DECORATIVE ROTATING SHAPES — keep inside viewport
   ───────────────────────────────────────────────────────────── */
.xb-about-shape,
.xb-contact-shape,
.xb-service-shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    max-width: 250px;
    overflow: hidden;
}
.xb-about-shape img,
.xb-contact-shape img,
.xb-service-shape img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .xb-about-shape,
    .xb-contact-shape,
    .xb-service-shape {
        max-width: 150px;
        opacity: 0.4;
    }
}


/* ─────────────────────────────────────────────────────────────
   14. UTILITY — Prevent any rogue absolute positioning bleed
   ───────────────────────────────────────────────────────────── */
[data-bg-color],
[data-background] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg_img {
    background-size: cover !important;
    background-position: center !important;
    max-width: 100%;
}


/* ─────────────────────────────────────────────────────────────
   15. RESPONSIVE TYPOGRAPHY
   ───────────────────────────────────────────────────────────── */
.sec-title .title,
.sec-title h2.title {
    font-size: clamp(1.75rem, 3vw, 3rem);
    line-height: 1.2;
    word-wrap: break-word;
}

.xb-item--title {
    word-wrap: break-word;
}

@media (max-width: 767px) {
    h1, .h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    h2, .h2 { font-size: clamp(1.5rem, 5vw, 2rem); }
    h3, .h3 { font-size: clamp(1.25rem, 4vw, 1.75rem); }
}


/* ─────────────────────────────────────────────────────────────
   16. WHATSAPP FLOATING BUTTON — keep on top, not blocking
   ───────────────────────────────────────────────────────────── */
#WAButton,
.floating-wpp {
    z-index: 9999 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   END — All viewport, alignment & spacing issues addressed.
   ═══════════════════════════════════════════════════════════════════════════ */