/*!
Theme Name: yatch-hire-custom
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: yatch-hire-custom
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

yatch-hire-custom is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
- Normalize
- Box sizing
# Base
- Typography
- Elements
- Links
- Forms
## Layouts
# Components
- Navigation
- Posts and pages
- Comments
- Widgets
- Media
- Captions
- Galleries
# plugins
- Jetpack infinite scroll
# Utilities
- Accessibility
- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

@font-face {
    font-family: helvetica-custom;
    src: url(./assets/fonts/helvetica/HelveticaNeueLTProEx.otf) format("opentype");
    font-style: normal;
}


/* rest of your CSS below */

:root {
    /* FONT FAMILY */
    --font-main: "helvetica-custom", sans-serif;
    
    /* FONT WEIGHT */
    --fw-regular: 400;
    
    --p-color: white;
    /* FONT SIZES */
    --fs-nav: 12px;
    --fs-small: 12px;
    --fs-mid: 14px;
    --fs-p: 16px;
    --fs-banner-title: 52px;
    --fs-banner-2title: 52px;
    
    /* LINE HEIGHT */
    --lh-nav: 32px;
    
}

html {
    font-family: var(--font-main);
    overflow-x: hidden;
    /* FIXED: prevent horizontal scroll */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: 0.3s ease-in-out all;
        font-family: var(--font-main);

}

/* Classes applicabele on all */
.container {
    font-weight: var(--fw-regular);
    max-width: 1410px;
    margin: 0 auto;
    padding-left:24px;
    padding-right:24px;
}




.topmain {
    color: var(--p-color);
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 580px;
}

.navbar {
    text-transform: uppercase;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    height: 82px;
    display: flex;
}

.leftnav {
    width: 523px;
    gap: 36px;
    display: flex;
}

.leftnav li {
    line-height: 32px;
    letter-spacing: 5%;
    height: 32px;
    width: 129px;
    list-style: none;
}

.leftnav li a {
    color: var(--p-color);
    font-size: var(--fs-nav);
    text-decoration: none;
}

.rightnav {
    
    justify-content: space-between;
    width: 529px;
    display: flex;
    gap: 36px;
    
}

.rightnav li {
    margin-top: 8px;
    line-height: 32px;
    letter-spacing: 20%;
    font-size: var(--fs-nav);
    list-style: none;
}

.rightnav li a {
    color: var(--p-color);
    text-decoration: none;
}

.cont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 50px;
    height: 40px;
    
}

.rightnav a {
    color: white;
    
    margin-top: 8px;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-nav);
    text-decoration: none;
}

.midnav {
    display: flex;
    height: 82px;
    width: 241.9px;
}

.midnav a div img {
    object-fit: cover;
    height: 82px;
    width: 241.9px;
}


.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.video-container {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  
  .video-container iframe {
    width: 100%;
    height: 100%;
    transform: scale(1.15);
    transform-origin: center center;
    border: 0;
  }
  
  /* Mobile: 100vh */
  @media (max-width: 768px) {
    .video-container {
      height: 612px;
      iframe{
        transform: scale(2.2);
      }
    }
  }
  
  /* Desktop: 16:9 aspect ratio */
  @media (min-width: 769px) {
    .video-container {
      aspect-ratio: 16/10;
    }
  }

.swiper {
    width: 100%;
}

.swiper-pagination-bullet {
    width: 6px !important;
    height: 34px !important;
    background: rgb(255, 255, 255) !important;
}

.bannertittle {
    transform: translatex(300px);
    transition: 0.3s ease-in-out transform;
    color: white;
    width: 100%;
    
}

.swiper-slide-active .bannertittle {
    transform: translate(0);
}

.bannertittle h2 {
    font-size: 52px;
    font-weight: 400;
    text-transform: uppercase;
}

.bannertittle h3 {
    font-size: var(--fs-nav);
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 48px;
    padding-bottom: 6px;
    width: 108px;
    border-bottom: 2px solid rgb(255, 255, 255);
}


/* 
FOOTER
*/

.fotter-wrap {
    position: relative;
    background-color: #0C2240;
    overflow: hidden;
    background-blend-mode: color-burn;
}

.fotter-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-repeat: repeat;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.fotter-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(100, 150, 220, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.fotter-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 24px 24px 24px;
}

.fotter-main {
    display: flex;
    gap: 240px;
    flex-wrap: wrap;
    .wp-block-paragraph{
        br{
            display: none;
        }
    }
}

/* Brand Column */
.fotter-brand {
    flex: 0 0 280px;
    min-width: 240px;
}

.fotter-logo {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
}

.fotter-logo-img {
    width: 259.6px;
    height: 88px;
    display: block;
    object-fit: contain;
    color: white;
}

.fotter-tagline {
    font-size: var(--fs-p);
    color: #c8d6e8;
    margin-bottom: 22px;
    font-weight: var(--fw-regular);
}

.fotter-cta-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 50px;
    padding: 8px 18px;
    margin-bottom: 10px;
    width: fit-content;
    color: #ffffff;
    opacity: 0.7;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 400;
    background: transparent;
    transition: border-color 0.2s;
}

.fotter-cta-btn:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.fotter-cta-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    opacity: 0.9;
}

/* Links Grid */
.fotter-links-wrap {
    flex: 1;
    display: flex;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    min-width: 0;
}

.fotter-link-col h4 {
    font-size: var(--fs-mid);
    color: #7a96b2;
    font-weight: var(--fw-regular);
    letter-spacing: 0.3px;
    margin-bottom: 20px;
}

.fotter-link-col a {
    display: block;
    font-size: 16px;
    color: #dce8f5;
    text-decoration: none;
    margin-bottom: 12px;
    font-weight: 400;
    transition: color 0.2s;
    line-height: 24px;
}

.fotter-link-col a:hover {
    color: #ffffff;
}

/* Bottom Bar */
.fotter-bottom-outer {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 48px 170px 0;
    padding: 0 24px;
}

.fotter-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fotter-bottom p {
    font-size: var(--fs-mid);
    color: #6a88a8;
}

/* Footer Responsive */
@media (max-width: 1100px) {
    .fotter-inner {
        padding: 56px 32px 0;
    }
    
    .fotter-bottom-outer {
        padding: 0 32px;
    }
}

@media (max-width: 900px) {
    .fotter-main {
        flex-direction: column;
        gap: 40px;
        margin-left: 0;
    }
    
    .fotter-brand {
        flex: unset;
        width: 100%;
    }
    
    .fotter-links-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
        padding-right: 0;
    }
    
    .fotter-inner {
        padding: 40px 24px 24px;
    }
    
    .fotter-bottom-outer {
        margin: 32px 0 0;
        padding: 0 24px;
    }
}

@media (max-width: 540px) {
    .fotter-inner {
        padding: 32px 18px 18px;
    }
    
    .fotter-bottom-outer {
        margin: 24px 0 0;
        padding: 0 18px;
    }
    
    .fotter-links-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }
    
    .fotter-logo-img {
        width: 180px;
        height: auto;
    }
    
    .fotter-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}


/* 
NAVBAR
*/
.nav-wrap {
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
    z-index: 100;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 82px;
}
.submenuOpen{
    background-color: #fff;

    .nav-links-left  ul li a{
        opacity: 0.2;
        color:#414651;
    }
    
    .nav-links-right ul li a{
        opacity: 0.2;
        color:#414651;
    }
}

.nav-links-left,
.nav-links-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: space-between;
    ul{
        display: flex;
        align-items: center;
        gap: 32px;
        flex: 1;
        list-style: none;
        padding-left: 0;
        justify-content: space-between;
        > li:hover{
            a{
                text-decoration: underline;
                color:#414651;
                opacity: 1;
                text-underline-offset: 2px;

            }
        }
        ul{
            li{
                a{
                    font-size: 40px;
                    line-height: 100%;
                    letter-spacing: 0;
                    text-transform: uppercase;
                }
            }
        }
        .hasSubmenu{
            .submenuList{
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                top:82px;
                margin-top: 0;
                padding:40px;
                overflow-y: auto;
                li{
                    a{
                        opacity: 1;
                        color:#0C2240;
                        text-decoration: none;
                    }
                }
                &.overSubMenu{
                    li{
                        a{
                            opacity: 0.2;
                            &.activeSubA{
                                opacity: 1;
                            }
                        }
                    }
                }
            }
            img{
                height: 400px;
                border-radius: 12px;
                object-fit: cover;
            }
            &:hover{
                .submenuList{
                    display: block;
                }
            }
        }
    }
    .menuListInner {
        display: flex;
        justify-content: space-between;
        gap:35px;
        max-width: 1360px; 
        margin:0 auto;
        ul {
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            li{
                &:last-child{
                    margin-top: 80px;
                    a{
                        font-weight: 400;
                        font-size: 26px;
                        line-height: 100%;
                        text-transform: uppercase;

                    }
                }
            }
        }
    }
}


.nav-link {
    font-size: var(--fs-nav);
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.2s;
    padding-top: 35px;
    padding-bottom: 35px;
}

.nav-link:hover {
    color: #C9A96E;
}

.nav-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    text-decoration: none;
    margin: 0 48px;
    img{
        width: 241.9px;
        height: 72px;
        display: block;
    }
}
.dynamicImg {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    max-width:390px;
}

.nav-contact-btn,.nav-links-right ul li:last-child a  {
    font-size: var(--fs-nav);
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #FFFFFF;
    border-radius: 50px;
    padding: 12px 43px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
    margin-left: 8px;
}

.nav-contact-btn:hover,.nav-links-right ul li:last-child a:hover {
    background: #1a2a3a;
    text-decoration: none !important;
    color: #fff !important;
}
.dynamicImg img[src=""] {
    display: none;
}
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}

.nav-hamburger span {
    display: block;
    width: 16px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.nav-hamburger{
    padding:12px 30px ;
    border-radius: 34px;
    border: 1px #fff solid;
}
.nav-mobile-menu {
    display: none;
    flex-direction: column;
    background: #ffffff;
    border-top: 1px solid #eee;
    padding: 16px 24px 24px;
    max-height:calc(100svh - 82px);
        overflow-y: auto;
}
body.nav-open {
    overflow: hidden !important;
}
.nav-mobile-menu.nav-open {
    display: flex;
}
button.nav-hamburger.nav-open-ham span:nth-child(2) {
    display: none;
}
button.nav-hamburger.nav-open-ham span:nth-child(1) {
transform: rotate(45deg);
    position: relative;
    top: 1px;
}
button.nav-hamburger.nav-open-ham span:nth-child(3) {
    transform: rotate(-45deg);
    position: relative;
    top: -3px;
}
.nav-mobile-link {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #1a2a3a;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s;
}

.nav-mobile-link:last-child {
    border-bottom: none;
}

.nav-mobile-link:hover {
    color: #C9A96E;
}

.nav-mobile-btn {
    margin-top: 12px;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #1a2a3a;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid #1a2a3a;
    border-radius: 50px;
    padding: 10px 22px;
    text-align: center;
    width: fit-content;
}

@media (max-width: 900px) {
    
    .nav-links-left,
    .nav-links-right,
    .nav-contact-btn {
        display: none;
    }
    
    .nav-hamburger {
        display: flex;
    }
    
    .nav-logo {
        margin: 0;
    }
    

    .nav-logo-img {
        width: 180px;
        height: auto;
    }
}


/* 
SECTION 1 – CONTACT US HERO
*/
.contact-hero {
    position: relative;
    background: #FAFAFA;
    padding: 72px 80px 56px;
    overflow: hidden;
    min-height: 380px;
}

.contact-hero-map {
    position: absolute;
    inset: 0;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/World_map_-_low_resolution.svg/1200px-World_map_-_low_resolution.svg.png');
    background-size: 72%;
    background-repeat: no-repeat;
    background-position: right 40px center;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}

.contact-hero-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.contact-hero h1 {
    font-size: var(--fs-banner-title);
    font-weight: var(--fw-regular);
    color: #0C2240;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 32px;
    line-height: 1;
}

.contact-hero p {
    font-size: var(--fs-p);
    color: #666666;
    line-height: 24px;
    max-width: 642px;
    margin-bottom: 40px;
}

.contact-hero-divider {
    position: relative;
    z-index: 1;
    border: none;
    border-top: 1px solid rgba(169, 169, 169, 1);
    margin-bottom: 100px;
}


.contact-mid-wrapper {
    position: relative;
}

.contact-hero {
    padding-bottom: 0 !important;
}

.contact-hero-spacer {
    height: 200px;
}


.contact-directors {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none;
}

.contact-directors-map {
    display: none;
}

.contact-directors-inner {
    pointer-events: all;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding: 0 0;
    transform: translateY(-50%);
}

.directorbg {
    pointer-events: all;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding: 40px 40px;
    background-color: #F5F5F5;
    width: 100%;
    max-width: 940px;
    position: relative;
}

.contact-director-card {
    background: #ffffff;
    border: 1px solid rgba(165, 165, 165, 1);
    border-radius: 6px;
    padding: 32px 28px;
    width: 100%;
    max-width: calc(50% - 10px);
    height: auto;
    min-height: 90%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.contact-director-card-decor {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 140px;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 0;
    
}
.contact-director-card-decor img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.contact-director-card > *:not(.contact-director-card-decor) {
    position: relative;
    z-index: 1;
}

@media(min-width:1280px){
.contact-director-card > *:not(.contact-director-card-decor){
    white-space: nowrap;
}
}
.contact-director-avatar {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    display: block;
}

.contact-director-role {
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    color: #B48F62;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.contact-director-name {
    font-size: 25px;
    font-weight: 400;
    color: #2E2D2C;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    line-height: 1.1;
}

.contact-director-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

.contact-director-phone svg {
    width: 16px;
    height: 16px;
    color: #C9A96E;
    flex-shrink: 0;
}

/* 
SECTION 2 – FORM
*/
.contact-form-section {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    
}

.contact-form-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    overflow: hidden;
    z-index: 0;
}

.contact-form-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}















.contact-form-bg::after {
    content: '';
    position: absolute;
    inset: 0;
background: linear-gradient(180deg, rgba(12, 34, 64, 0.1) 0%, #0C2240 100%);
    pointer-events: none;
}

.contact-form-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 420px 80px 80px;
    display: flex;
    justify-content: center;
    gap: 120px;
}

.contact-form-left {
    flex: 0 0 auto;
    width: clamp(260px, 45%, 560px);
    min-width: 0;
    padding-top: 56px;
    display: flex;
    flex-direction: column;
}

.contact-form-left h2 {
    font-size: 48px;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 100%;
    letter-spacing: 0;
    margin-bottom: 32px;
}

.contact-form-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    padding: 10px 20px;
    margin-bottom: 12px;
    width: 340px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}

.contact-form-cta:hover {
    border-color: rgba(255, 255, 255, 0.9);
}

.contact-form-cta svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.85;
}

.contact-form-logo-watermark {
    margin-top: auto;
    padding-top: 48px;
    margin-left: -28px;
    margin-bottom: -70px;
    opacity: 0.3;
    width: 305px;
    height: 428px;
}

.contact-form-logo-watermark img {
    height: 100%;
    width: 100%;
}

.contact-form-card {
    flex: 1;
    background: #ffffff;
    border-radius: 4px;
    padding: 48px 48px 40px;
    max-width: 696px;
    min-width: 0;
}

.contact-form-field {
    margin-bottom: 28px;
}

.contact-form-label {
    display: block;
    font-size: var(--fs-nav);
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    color: #0C2240;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.contact-form-label span {
    color: #0C2240;
}

.contact-form-input,
.contact-form-select,
.contact-form-textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    background: transparent;
    padding: 8px 0;
    font-size: var(--fs-p);
    color: #aaa;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.contact-form-input:focus,
.contact-form-select:focus,
.contact-form-textarea:focus {
    border-bottom-color: #C9A96E;
    color: #333;
}

.contact-form-select {
    cursor: pointer;
    background-image: url("media\export.png");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 24px;
}

.contact-form-textarea {
    resize: none;
    height: 80px;
    line-height: 1.6;
}

.contact-form-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
    position: relative;
}

.contact-form-checkbox {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin-top: 0;
    cursor: pointer;
}

.contact-form-checkbox-label {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    padding-left: 28px;
    cursor: pointer;
}

.contact-form-checkbox-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-form-checkbox-label::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 4px;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: scale(0) rotate(45deg);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.contact-form-checkbox:checked + .contact-form-checkbox-label::before {
    background: #C9A96E;
    border-color: #C9A96E;
}

.contact-form-checkbox:checked + .contact-form-checkbox-label::after {
    transform: scale(1) rotate(45deg);
    opacity: 1;
}

.contact-form-submit {
    width: 100%;
    background: rgba(190, 151, 108, 1);
    border: none;
    border-radius: 50px;
    padding: 14px 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 20%;
    color: #ffffff;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}

.contact-form-submit:hover {
    background: #b8945a;
}


/* 
RESPONSIVE – CONTACT SECTIONS
*/

/* 1280px */
@media (max-width: 1280px) {
    .contact-form-inner {
        padding-top: 360px;
        gap: 60px;
    }
    
    .contact-form-left h2 {
        font-size: 40px;
    }
}

/* 1024px */
@media (max-width: 1024px) {
    .contact-hero {
        padding: 56px 40px 0 !important;
    }
    
    .contact-directors-inner {
        padding: 0 40px;
    }
    
    .directorbg {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 32px 40px;
        gap: 20px;
    }
    
    .contact-director-card {
        width: 100%;
        max-width: 400px;
        height: auto;
        min-height: 240px;
    }
    
    .contact-form-inner {
        padding: 260px 40px 60px;
        gap: 40px;
    }
    
    .contact-form-left {
        width: clamp(220px, 32%, 360px);
    }
    
    .contact-form-left h2 {
        font-size: 34px;
    }
}

/* 860px   */
@media (max-width: 860px) {
    
    .contact-hero {
        padding: 40px 20px 0 !important;
        min-height: auto;
    }
    
    .contact-hero h1 {
        font-size: 40px;
    }
    
    .contact-hero p {
        font-size: 14px;
        line-height: 22px;
    }
    
    .contact-hero-divider {
        margin-bottom: 32px;
    }
    
    .contact-hero-spacer {
        height: 0;
    }
    
    .contact-directors {
        position: static;
        padding: 0;
    }
    
    .contact-directors-inner {
        transform: none;
        padding: 0;
        gap: 0;
    }
    
    .directorbg {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 20px;
        gap: 16px;
        align-items: stretch;
    }
    
    .contact-director-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: unset;
        padding: 24px 20px;
    }
    
    .contact-director-avatar {
        width: 64px;
        height: 64px;
        margin-bottom: 14px;
    }
    
    .contact-director-name {
        font-size: 20px;
    }
    
    .contact-form-section {
        min-height: auto;
    }
    
    .contact-form-inner {
        flex-direction: column;
        padding: 48px 20px 40px;
        gap: 32px;
    }
    
    .contact-form-left {
        width: 100%;
        padding-top: 0;
    }
    
    .contact-form-left h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }
    
    .contact-form-cta {
        width: 100%;
        max-width: 340px;
    }
    
    .contact-form-card {
        width: 100%;
        max-width: 100%;
        padding: 28px 20px 24px;
    }
    
    .contact-form-logo-watermark {
        display: none;
    }
}

/* 480px */
@media (max-width: 480px) {
    .contact-hero h1 {
        font-size: 32px;
    }
    
    .contact-hero p {
        font-size: 13px;
    }
    
    .contact-form-left h2 {
        font-size: 26px;
    }
    
    .contact-form-cta {
        font-size: 13px;
        padding: 10px 16px;
    }
    
    .contact-form-card {
        padding: 24px 16px 20px;
    }
    
    .contact-form-field {
        margin-bottom: 20px;
    }
    
    .contact-form-label {
        font-size: 11px;
    }
    
    .contact-form-submit {
        font-size: 11px;
        padding: 13px 0;
    }
}


/* guides section css start form here  */


/* 
SECNAV – NAVBAR
*/
.secnav-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
}

.secnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1410px;
    margin: 0 auto;
    padding: 0 48px;
    height: 82px;
}

.secnav-links-left {
    display: flex;
    align-items: center;
    gap: 36px;
    flex: 1;
}

.secnav-link {
    font-size: var(--fs-nav);
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.2s;
}

.secnav-link:hover {
    color: #C9A96E;
}

.secnav-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    text-decoration: none;
    margin: 0 40px;
}

.secnav-logo-img {
    height: 82px;
    width: 241.9px;
    display: block;
    object-fit: contain;
}

.secnav-links-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 36px;
    flex: 1;
}

.secnav-contact-btn {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    padding: 9px 24px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.secnav-contact-btn:hover {
    background: #ffffff;
    color: #0C2240;
}

.secnav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    background: none;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
}

.secnav-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
}

.secnav-mobile-menu {
    display: none;
    flex-direction: column;
    background: #0C2240;
    padding: 16px 24px 24px;
}

.secnav-mobile-menu.secnav-open {
    display: flex;
}

.secnav-mobile-link {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: color 0.2s;
}

.secnav-mobile-link:last-child {
    border-bottom: none;
}

.secnav-mobile-link:hover {
    color: #C9A96E;
}

.secnav-mobile-btn {
    margin-top: 14px;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50px;
    padding: 10px 22px;
    text-align: center;
    width: fit-content;
}

/* 
GUIDES – BANNER / HERO
*/
.guides-banner {
    position: relative;
    width: 100%;
    height: 713px;
    overflow: hidden;
    background: #0C2240;
}

.guides-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.guides-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
    rgba(5, 18, 40, 0.35) 0%,
    rgba(5, 18, 40, 0.50) 60%,
    rgba(5, 18, 40, 0.70) 100%);
    pointer-events: none;
}

.guides-banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 48px 102px;
    max-width: 1410px;
    margin: 0 auto;
}

.guides-banner-content-inner {
    max-width: 1410px;
    margin: 0 auto;
}

.guides-breadcrumb {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    margin-bottom: 32px;
}

.guides-breadcrumb span {
    color: rgba(255, 255, 255, 0.55);
}

.guides-title {
    font-size: var(--fs-banner-2title);
    font-weight: var(--fw-regular);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}

/* 
GRID SECTION
*/
.guides-grid-section {
    max-width: 1410px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    overflow: hidden;
}

.guides-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* CARD */
.guides-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    height: 512px;
    background: #1a2a3a;
}

.guides-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.guides-card:hover img {
    transform: scale(1.04);
}

.guides-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 28%,
    rgba(0, 0, 0, 0.20) 60%,
    rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

.guides-card-content {
    position: absolute;
    inset: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}

.guides-card-title {
    font-size: var(--lh-nav);
    font-weight: var(--fw-regular);
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 0.5px;
    margin: 0;
    max-width: calc(100% - 220px);
}

.guides-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 50px;
    padding: 0 22px;
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    color: #ffffff;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.guides-card-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 1);
}

/* PAGINATION */
.guides-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
}

.guides-page-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1.5px solid #cccccc;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: var(--fw-regular);
    color: #0E0E0E;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.guides-page-btn:hover {
    border-color: #0C2240;
    color: #0E0E0E;
}

.guides-page-btn.active {
    background: #0E0E0E;
    border-color: #0C2240;
    color: #ffffff;
}

.guides-page-arrow {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1.5px solid #cccccc;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.guides-page-arrow:hover {
    border-color: #0C2240;
}

.guides-page-arrow svg {
    width: 18px;
    height: 18px;
    stroke: #0E0E0E;
}

.guides-page-arrow:hover svg {
    stroke: #0C2240;
}

/* 
RESPONSIVE 
*/

/* Mobile ≤ 768px */
@media (max-width: 768px) {
    
    .secnav-links-left,
    .secnav-links-right,
    .secnav-contact-btn {
        display: none;
    }
    
    .secnav-hamburger {
        display: flex;
    }
    
    .secnav-inner {
        padding: 0 20px;
        height: 68px;
        justify-content: space-between;
    }
    
    .secnav-logo {
        margin: 0;
    }
    
    .secnav-logo-img {
        height: 52px;
        width: auto;
    }
    
    .guides-banner {
        height: 100svh;
        max-height: 700px;
        min-height: 480px;
    }
    
    .guides-banner-content {
        padding: 0 20px 44px;
    }
    
    .guides-breadcrumb {
        font-size: 12px;
        margin-bottom: 10px;
    }
    
    .guides-title {
        font-size: 48px;
    }
    
    .guides-grid-section {
        padding: 24px 16px 48px;
    }
    
    .guides-grid {
        grid-template-columns: 1fr;
        /* gap: 10px; */
    }
    
    .guides-card {
        width: 100%;
        height: 512px;
    }
    
    .guides-card-title {
        font-size: 16px;
        max-width: 180px;
        margin-bottom: 10px;
    }
    
    .guides-card-content {
        padding: 16px 14px 14px;
    }
}

/* Tablet 769–1023px */
@media (min-width: 769px) and (max-width: 1023px) {
    .secnav-inner {
        padding: 0 32px;
    }
    
    .secnav-links-left,
    .secnav-links-right {
        gap: 20px;
    }
    
    .secnav-logo {
        margin: 0 20px;
    }
    
    .guides-banner-content {
        padding: 0 32px 48px;
    }
    
    .guides-title {
        font-size: 56px;
    }
    
    .guides-grid-section {
        padding: 32px 20px 56px;
    }
    
    .guides-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .guides-card {
        width: 100%;
        height: 512px;
    }
    
    .guides-card-title {
        font-size: 16px;
        max-width: 180px;
    }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
    .guides-grid-section {
        padding: 48px 40px 80px;
    }
    
    .guides-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    
    .guides-card {
        width: 100%;
        height: 512px;
    }
    
    .guides-card-title {
        font-size: 20px;
        max-width: 220px;
        margin-bottom: 16px;
    }
    
    .guides-card-content {
        padding: 24px 22px 20px;
    }
    
    .guides-card-btn {
        font-size: 9px;
        letter-spacing: 1.6px;
        padding: 7px 14px;
    }
}

@media (min-width: 1280px) {
    .guides-card-title {
        font-size: 22px;
    }
}






































/* gallery css section start form here */


/* wrapper */
.gallery-section {
    
    width: 100%;
    background: #F5F5F5;
    padding: 60px 24px 70px;
    box-sizing: border-box;
    overflow: hidden;
}

.gallery-section__inner {
    max-width: 1410px;
    margin: 0 auto;
}

.gallery-section .gs-page {
    display: none;
    flex-direction: column;
    gap: 20px;
}

.gallery-section .gs-page.gs-active {
    display: flex;
}

.gallery-section .gs-row {
    display: flex;
    gap: 20px;
    width: 100%;
}

.gallery-section .gs-cell {
    overflow: hidden;
    border-radius: 14px;
    flex-shrink: 0;
}

.gallery-section .gs-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-section .gs-row--2eq .gs-cell {
    flex: 1;
    height: 500px;
}

.gallery-section .gs-row--3eq .gs-cell {
    flex: 1;
    height: 512px;
}

.gallery-section .gs-row--wn .gs-cell:first-child {
    flex: 1;
    height: 500px;
}

.gallery-section .gs-row--wn .gs-cell:last-child {
    flex: 1;
    height: 500px;
}

.gallery-section .gs-row--full .gs-cell {
    flex: 1;
    height: 580px;
}

.gallery-section .gs-row--3bot .gs-cell {
    flex: 1;
    height: 512px;
}

/* play-button overlay (interior image) */
.gallery-section .gs-play-wrap {
    position: relative;
}

.gallery-section .gs-play-wrap .gs-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.gallery-section .gs-play-icon {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* MOBILE GRID */
.gallery-section .gs-mob-page {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.gallery-section .gs-mob-page.gs-active {
    display: flex;
}

.gallery-section .gs-m {
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
}

.gallery-section .gs-m img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-section .gs-m--tall {
    height: 240px;
}

.gallery-section .gs-m--full {
    height: 220px;
}

.gallery-section .gs-m-row2 {
    display: flex;
    gap: 8px;
}

.gallery-section .gs-m-row2 .gs-m {
    flex: 1;
    height: 140px;
}

/* PAGINATION */
.gallery-section .gs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
    width: 354px;
    height: 58px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50px;
    padding: 0 8px;
    box-sizing: border-box;
}

.gallery-section .gs-pagination .gs-arrow {
    background: none;
    border: none;
    cursor: pointer;
    color: #0E0E0E;
    font-size: 28px;
    line-height: 1;
    width: 58px;
    height: 58px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    transition: opacity 0.2s;
    flex-shrink: 0;
    border-radius: 50%;
}

.gallery-section .gs-pagination .gs-arrow:hover {
    opacity: 0.6;
}

.gallery-section .gs-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: solid 2px rgb(0, 0, 0);
    background: transparent;
    color: #0E0E0E;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.gallery-section .gs-dot.gs-active {
    background: #0E0E0E;
    color: #ffffff;
    border-radius: 50%;
}

.gallery-section .gs-dot:hover:not(.gs-active) {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
}

/* RESPONSIVE SHOW/HIDE */
@media (min-width: 640px) {
    
    .gallery-section .gs-mob-page,
    .gallery-section .gs-mob-page.gs-active {
        display: none !important;
    }
    
    .gallery-section .gs-page.gs-active {
        display: flex;
    }
}

@media (max-width: 639px) {
    

    
    .gallery-section .gs-mob-page.gs-active {
        display: flex !important;
    }
    
    .gallery-section {
        padding: 32px 12px 48px;
    }
    
    .gallery-section .gs-pagination {
        width: 100%;
        max-width: 354px;
    }
}











































/* home page css start from here  */




























/* 
HOMEPAGE BANNER SECTION 
*/
.homepage-banner-section {
    
    position: relative;
    width: 100%;
    height: 862px;
    margin: 0 auto;
    overflow: hidden;
    background: #0a1612;
    color: #fff;
}

.homepage-banner-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.homepage-banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.homepage-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 18, 0.28);
    z-index: 2;
}

.homepage-banner-inner {
    position: relative;
    z-index: 4;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}


.homepage-navbar {
    position: relative;
    z-index: 5;
    height: 90px;
}

.homepage-banner-content {
    position: relative;
    z-index: 4;
    height: calc(100% - 90px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.homepage-banner-title {
    font-size: 44px;
    line-height: 1.18;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-weight: var(--fw-regular);
    margin-bottom: 22px;
}

.homepage-banner-discover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.homepage-banner-bottom-row {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-left: 50px;
    padding-right: 56px;
    gap: 24px;
}

.homepage-banner-swiper {
    width: 100%;
    max-width: 1329px;
    height: 287px;
    overflow: hidden;
}

.homepage-banner-swiper .swiper-wrapper {
    height: 100%;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.homepage-banner-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    
}

.homepage-banner-slide-textblock {
    width: 100%;
    max-width: 1329px;
    height: 176px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.homepage-banner-slide-title {
    font-size: 52px;
    line-height: 1.18;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-weight: var(--fw-regular);
    margin-bottom: 22px;
}

.homepage-banner-slide-discover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 32px;
    letter-spacing: 20%;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    width: fit-content;
    &:hover{
        border-color: #BE976C;
        color:#BE976C;
    }
}

.homepage-banner-sidebar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: flex-end;
    height: 189px;
    padding-bottom: 6px;
}

.homepage-banner-sidebar-dash {
    width: 3px;
    height: 0;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    transition: height 0.5s ease, background 0.5s ease;
    flex: 1;
}

.homepage-banner-sidebar-dash.is-active {
    background: #fff;
}


.homepage-navbar-logo {
    position: absolute;
    top: 26px;
    left: 60px;
    z-index: 6;
    display: flex;
    align-items: center;
}

.homepage-navbar-logo-img {
    height: 38px;
    width: auto;
    display: block;
}


.homepage-mobile-topbar {
    display: none;
}


.homepage-banner-mobile-play {
    display: none;
}

/* 
RESPONSIVE — TABLET
*/
@media (max-width: 1024px) {
    .homepage-banner-section {
        height: 760px;
    }
    
    .homepage-banner-title {
        font-size: 36px;
    }
    
    .homepage-banner-bottom-row {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .homepage-banner-swiper {
        height: 250px;
    }
    
    .homepage-banner-slide-textblock {
        height: 150px;
    }
}

/* 
RESPONSIVE - MOBILE

*/
@media (max-width: 640px) {
    .homepage-banner-section {
        height: 612px;
        min-height: 560px;
        max-height: 760px;
    }
    
    .homepage-navbar {
        height: 0;
    }
    
    .homepage-navbar-logo {
        display: none;
    }
    
    .homepage-banner-content {
        height: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 18px;
        padding-top: 24px;
    }
    
    .homepage-mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0 16px;
        margin: 0 auto;
        gap: 12px;
    }
    
    .homepage-mobile-topbar-logo {
        flex-shrink: 0;
        /* width: 75px;
        height: 98px; */
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    
    .homepage-mobile-topbar-logo img {
        width: 100%;
        height: auto;
        /* max-height: 38px; */
        object-fit: contain;
        display: block;
    }
    
    .homepage-banner-mobile-play {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        flex-shrink: 0;
        justify-content: flex-end;
    }
    
    .homepage-banner-mobile-play-btn {
        width: 81px;
        height: 81px;
        border-radius: 50%;
                background-color: transparent;
        border: 0px solid transparent; 
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }
    
    /* .homepage-banner-mobile-play-btn svg {
        width: 18px;
        height: 18px;
        margin-left: 3px;
    } */
    
    .homepage-banner-mobile-play-label {
        font-size: 16px;
        letter-spacing: 0;
        color: #fff;
        white-space: nowrap;
    }
    
    .homepage-banner-bottom-row {
        flex-direction: column;
        align-items: center;
        padding: 0 16px;
        margin-bottom: 0;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
        gap: 16px;
    }
    
    .homepage-banner-swiper {
        height: auto;
        max-width: 380px;
        width: 100%;
        margin-bottom:35px;
    }
    
    .homepage-banner-slide {
        align-items: center;
        justify-content: center;
    }
    
    .homepage-banner-slide-textblock {
        height: auto;
        min-height: 202px;
        max-width: 380px;
        width: 100%;
        align-items: center;
        text-align: center;
        justify-content: center;
        gap: 8px;
    }
    
    .homepage-banner-slide-title {
        font-size: 42px;
    }
    
    .homepage-banner-slide-discover {
        margin: 0 auto;
    }
    
    .homepage-banner-sidebar {
        display: none;
    }
    
    .homepage-banner-sidebar-mobile {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin: 55px auto 0;
        padding: 0 16px;
    }
    
    .homepage-banner-sidebar-mobile-dash {
        flex: 1;
        max-width: 59px;
        height: 3px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.5);
        transition: background 0.4s ease;
    }
    
    .homepage-banner-sidebar-mobile-dash.is-active {
        background: #fff;
    }
    
    .homepage-banner-video {
        object-position: center;
    }
}



































/* lower herobanner section css start form here  */



/* 
SECTION WRAPPER
*/
.yofb-section {
    width: 100%;
    background: #fff;

}
.yboSecContainer{
    max-width:1920px;
    margin:0 auto;
}

/*  Panel visibility (all breakpoints)  */
.yofb-panel {
    display: none;
}

.yofb-panel.yofb-panel-active {
    display: flex;
}

    .yofb-topbar-col {
           padding: 47px 24px;

    }
@media (min-width: 768px) {
    
    .yofb-section .yboSecContainer {
        display: flex;
        flex-wrap: wrap;
    }
    
    .yofb-accordion-item {
        display: contents;
    }
    
    /* Tab cols form the top row */
    .yofb-topbar-col {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-right: 1px solid #d0d5dd;
        border-bottom: 1px solid #d0d5dd;
        cursor: pointer;
        box-sizing: border-box;
        order: 1;

    }
    
    .yofb-accordion-item:last-child .yofb-topbar-col {
        border-right: none;
    }
    
    .yofb-col-label {
        font-size: 24px;
        text-transform: uppercase;
        line-height: 100%;
        margin: 0;
    }
    
    .yofb-col-active .yofb-col-label {
        color: #0C2240;
        font-weight: var(--fw-regular);
    }
    
    .yofb-topbar-col:not(.yofb-col-active) .yofb-col-label {
        color: #AEAEAE;
        font-weight: var(--fw-regular, 400);
    }
    
    .yofb-topbar-col:not(.yofb-col-active):hover {
        background: #f8f9fa;
    }
    
    /* Panels sit below all tab cols */
    .yofb-lower {
        order: 2;
        width: 100%;
        padding: 80px 0px 77px 0px;
        align-items: center;
        gap: 0;
        position: relative;
        overflow: hidden;
    }
    
    .yofb-img-wrap {
        flex: 0 0 690px;
        max-width: 690px;
        height: 478px;
        border-radius:  0 10px 10px 0;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }
    
    .yofb-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    .yofb-content {
        flex: 1;
        min-width: 0;
        
        padding-left: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        font-size: 36px;
        z-index: 1;
    }
    
    .yofb-sublabel {
        
        font-weight: var(--fw-regular, 400);
        font-size: 12px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #0C2240;
        padding-bottom: 32px;
    }
    
    .yofb-divider {
        width: 100%;
        height: 1px;
        background: #d0d5dd;
        margin-bottom: 32px;
        margin-right: 148px;
    }
    
    .yofb-title-block {
        width: 664px;
        margin-bottom: 78px;
        font-size: 32px;
    }
    
    .yofb-title {
        
        font-weight: var(--fw-regular);
        font-size: 36px;
        text-transform: uppercase;
        color: #0C2240;
        line-height: 100%;
    }
    
    .yofb-text-block {
        margin-right: 118px;
    }
    
    .yofb-text-block p {
        
        font-weight: var(--fw-regular);
        font-size: 16px;
        line-height: 24px;
        color: #666666;
        margin: 0 0 32px;
    }
    
    .yofb-text-block p:last-child {
        margin-bottom: 8px;
    }
}

/* 
TABLET  768–1023px
*/
@media (min-width: 768px) and (max-width: 1023px) {
    
    .yofb-topbar-col {
        padding: 12px 10px;
    }
    
    .yofb-col-label {
        font-size: 13px;
    }
    
    .yofb-lower {
        padding: 36px 16px 44px;
        align-items: flex-start;
    }
    
    .yofb-img-wrap {
        flex: 0 0 340px;
        width: 340px;
        height: 320px;
    }
    
    .yofb-content {
        padding-left: 32px;
        justify-content: flex-start;
    }
    
    .yofb-title {
        font-size: 32px;
    }
    
    .yofb-text-block p {
        font-size: 15px;
    }
}

/* 
MOBILE  < 768px
*/
@media (max-width: 767px) {
    
    .yofb-section {
        display: block;
    }
    
    .yofb-accordion-item {
        display: block;
    }
    
    .yofb-topbar-col {
        display: flex;
        width: 100%;
        border-right: none;
        border-bottom: none;
        border-top: 1px solid #d0d5dd;
        text-align: center;
        justify-content: center;
        align-items: center;
        background: #fff;
        cursor: pointer;
        box-sizing: border-box;
           padding: 30px 24px;

    }
    
    .yofb-accordion-item:last-child .yofb-topbar-col {
        border-bottom: 1px solid #d0d5dd;
    }
    
    .yofb-accordion-item .yofb-col-active {
        border-bottom: none;
    }
    
    .yofb-col-label {
        
        font-size: 24px;
        text-transform: uppercase;
        line-height: 1.3;
        margin: 0;
    }
    
    .yofb-topbar-col .yofb-col-label {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        line-height: 1.3;
        color: #b0b8c4;
        font-weight: 400;
        margin: 0 auto;
    }
    
    .yofb-topbar-col.yofb-col-active .yofb-col-label {
        color: #0C2240;
    }
    
    .yofb-lower.yofb-panel.yofb-panel-active {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 0;
        align-items: stretch;
    }
    
    .yofb-lower::after {
        display: none;
    }
    
    .yofb-img-wrap {
        flex: none;
        width: 100%;
        height: 270px;
        border-radius: 2px;
        overflow: visible;
    }
    
    .yofb-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        margin-right:40px;
        border-top-right-radius:12px ;
                border-bottom-right-radius:12px ;

    }
    
    .yofb-content {
        padding: 40px 20px 28px;
        justify-content: flex-start;
        display: flex;
        flex-direction: column;
    }
    
    .yofb-sublabel {
        
        font-weight: var(--fw-regular, 400);
        font-size: 12px;
        letter-spacing: 20%;
        text-transform: uppercase;
        color: #0C2240;
        margin: 0 0 32px;
    }
    
    .yofb-divider {
        width: 100%;
        height: 1px;
        background: #d0d5dd;
        margin-bottom: 32px;
    }
    
    .yofb-title-block {
        margin-bottom: 20px;
    }
    
    .yofb-title {
        
        font-weight: var(--fw-regular);
        font-size: 30px;
        text-transform: uppercase;
        color: #0C2240;
        line-height: 100%;
        margin: 0;
    }
    
    .yofb-text-block p {
        
        font-weight: var(--fw-regular);
        font-size: 15px;
        line-height: 24px;
        color: #666666;
        margin: 0 0 18px;
    }
    
    .yofb-text-block p:last-child {
        margin-bottom: 0;
    }

}

/* Small mobile < 480px */
@media (max-width: 479px) {
    
    .yofb-img-wrap {
        height: 270px;
        border-radius: 0;
    }
    
    .yofb-title {
        font-size: 26px;
    }
    
    .yofb-topbar-col {
        height: 122px;
    }
    
    .yofb-topbar-col .yofb-col-label {
        width: 90%;
        font-size: 22px;
    }
}







/* coll section css start form here  */





/* 
SECTION — 1440 × 644 
*/
.coll-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding:60px 0; 
}

.coll-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    z-index: 0;
}

/* Dark overlay */
.coll-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.18) 40%,
    rgba(0, 0, 0, 0.52) 100%);
    z-index: 1;
    pointer-events: none;
}

.coll-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left:24px;
    padding-right:24px;
}


.coll-tabs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    width: 799px;
    height: 40px;
    flex-shrink: 0;
    margin-bottom: 32px;
}

.coll-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 24px;
    border-radius: 30px;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    background: transparent;
    font-weight: var(--fw-regular, 400);
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0;
    letter-spacing: 20%;
}

.coll-tab:hover {
    background: rgba(255, 255, 255, 0.15);
}

.coll-tab.coll-tab-active {
    background: #fff;
    color: #0C2240;
    border-color: #fff;
}


.coll-text {
    width: 659px;
    min-height: 127px;
    flex-shrink: 0;
    margin-bottom: 36px;
}

.coll-location-title {
    
    font-weight: 400;
    font-size: 36px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 16px;
    line-height: 100%;
}

.coll-location-desc {
    
    font-weight: var(--fw-regular);
    font-size: 16px;
    line-height: 24px;
    color: #ffff;
    margin: 0;
    max-width: 659px;
}

.swiper {
    margin-left: 0px;
}

.coll-swiper-clip {
    width: 100%;
    flex-shrink: 0;
    margin-top: 80px;
}

.coll-swiper {
    width: 1410px;
    height: 151px;
    overflow: visible;
}

.coll-swiper .swiper-slide {
    width: 241px !important;
    height: 151px !important;
    flex-shrink: 0;
}

/* CARD */
.coll-card {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #1a2a3a;
    border: 1px white solid;
}

.coll-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.coll-card:hover img {
    transform: scale(1.05);
}

/* First card  */
.coll-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.65) 100%);
    z-index: 1;
    pointer-events: none;
    display: none;
}

.coll-card-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 14px;
    display: none;
}
.coll-card:hover {
    .coll-card-body, .coll-card-overlay{
        display: flex;
    }
}
.coll-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.coll-card-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    
    font-weight: var(--fw-regular, 400);
    font-size: 10px;
    color: #000000;
    white-space: nowrap;
}

/* Card title */
.coll-card-title {
    
    font-weight: var(--fw-regular);
    font-size: 16px;
    color: #fff;
    line-height: 24px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    a{
    color: #fff;
    }
}


.coll-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    flex-shrink: 0;
}

.coll-btn-prev,
.coll-btn-next {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 0px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s;
}

.coll-btn-prev:hover,
.coll-btn-next:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* .coll-btn-prev svg,
.coll-btn-next svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
} */

/* 
TABLET  768 – 1023px
*/
@media (min-width: 768px) and (max-width: 1023px) {
    .coll-section {
        height: auto;
    }
    
    .coll-inner {
        padding: 32px 28px 32px;
    }
    
    .coll-tabs {
        width: 100%;
        flex-wrap: wrap;
        height: auto;
        gap: 10px;
        margin-bottom: 24px;
    }
    
    .coll-tab {
        height: 36px;
        font-size: 12px;
        padding: 0 18px;
    }
    
    .coll-text {
        width: 100%;
        min-height: auto;
        margin-bottom: 28px;
    }
    
    .coll-location-title {
        font-size: 36px;
    }
    
    .coll-location-desc {
        font-size: 15px;
        max-width: 100%;
    }
    
    .coll-swiper {
        width: 100%;
        height: 151px;
    }
    
    .coll-swiper .swiper-slide {
        width: 220px !important;
        height: 151px !important;
    }
    
    .coll-nav {
        margin-top: 16px;
    }
    
    .coll-btn-prev,
    .coll-btn-next {
        width: 40px;
        height: 40px;
    }
}

/* 
MOBILE  < 768px
Tabs wrap 2 rows, single col layout
*/
@media (max-width: 767px) {
    .coll-section {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    
    .coll-bg {
        height: 100%;
        min-height: 100%;
    }
    
    .coll-overlay {
        height: 100%;
    }
    
    .coll-inner {
        padding: 28px 20px 32px;
        height: auto;
    }
    
    .coll-tabs {
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 24px;
    }
    
    .coll-tab {
        height: 36px;
        font-size: 12px;
        padding: 0 16px;
    }
    
    .coll-text {
        width: 100%;
        min-height: auto;
        margin-bottom: 24px;
    }
    
    .coll-location-title {
        font-size: 32px;
        margin-bottom: 12px;
    }
    
    .coll-location-desc {
        font-size: 15px;
        max-width: 100%;
    }
    
    .coll-swiper-clip {
    }
    
    .coll-swiper {
        width: 100%;
        height: 151px;
        overflow: visible;
    }
    
    .coll-swiper .swiper-slide {
        width: 240px !important;
        height: 151px !important;
    }
    
    .coll-nav {
        margin-top: 18px;
        padding-bottom: 28px;
    }
    
    .coll-btn-prev,
    .coll-btn-next {
        width: 40px;
        height: 40px;
    }
    

}

/* Small mobile < 480px */
@media (max-width: 479px) {
    .coll-inner {
        padding: 24px 16px 28px;
    }
    
    .coll-location-title {
        font-size: 36px;
    }
    
    .coll-location-desc {
        font-size: 16px;
        line-height: 24px;
    }
    
    .coll-tab {
        font-size: 12px;
        padding: 0 13px;
        height: 34px;
        letter-spacing: 20%;
    }
    
    .coll-swiper .swiper-slide {
        width: 241px !important;
    }
}


















/* details css strat form here    */




/*  SECTION SHELL    */


.om {
    width: 100%;
    
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 60px 0; */
    overflow-x: clip;
}

.yc-section {
    width: 100%;
    
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    overflow-x: clip;
    background-color: #E2E2E2;
}

.yc-inner {
    max-width: 1410px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;
    position: relative;
    z-index: 1;
    padding-left: 24px;
    padding-right:24px;
}

/*  HEADER  */
.nav-wrap.dark-menu {
    position: relative;
    border-bottom: 1px rgba(217, 217, 217, 1) solid;
    .nav-link {
    color: rgba(65, 70, 81, 1);
}
.nav-links-right ul li:last-child a{
    border: 1px rgba(65, 65, 65, 1) solid;
}
}

.yc-header {
    width: 1410px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.yc-eyebrow {
    
    font-weight: var(--fw-regular);
    font-size: 13px;
    letter-spacing: 0.22em;
    color: #122340;
    margin-bottom: 32px;
    padding-bottom: 0;
}

.yc-hr {
    width: 100%;
    height: 1px;
    background: #A9A9A9;
    margin-bottom: 32px;
}

.yc-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.yc-title {
    
    font-weight: var(--fw-regular);
    font-size: 36px;
    line-height: 100%;
    color: #0C2240;
    text-transform: uppercase;
    max-width: 700px;
}

.yc-btn {
    appearance: none;
    background: transparent;
    color: #0C2240;
    border: 1px #0C2240 solid;
    font-weight: var(--fw-regular);
    font-size: 12px;
    letter-spacing: 20%;
    text-transform: uppercase;
    padding: 13px 57px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, transform .2s ease;
}

.yc-btn:hover {
    background: #122340;
    color: #ffffff;
}

.yc-btn:active {
    transform: scale(0.97);
}

.yc-btn:focus-visible {
    outline: 2px solid #c9a45c;
    outline-offset: 3px;
}

/*  SLIDER WRAP  */
.yc-slider-wrap {
    width: 1400px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.yc-swiper {
    width: 100%;
    overflow: visible !important;
}

.yc-swiper .swiper-wrapper {
    align-items: stretch;
}

.yc-slide {
    flex:0 0 320px;
    height: 582px;
    transition: width .5s ease;
    will-change: width;
}

.yc-slide.swiper-slide-active {
   flex:0 0 480px;
}

.yc-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    isolation: isolate;
    opacity: 0.94;
    transition: opacity .4s ease, box-shadow .4s ease;
}

.yc-slide.swiper-slide-active .yc-card {
    opacity: 1;
}

/*  card background image  */
.yc-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.yc-card-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.35);
    transition: background .35s ease;
}

.yc-slide.swiper-slide-active .yc-card-vignette {
background: linear-gradient(314.04deg, rgba(0, 0, 0, 0) -16.13%, rgba(0, 0, 0, 0.75) 73.81%);
}

/*  card content: pinned to TOP  */
.yc-card-content {
    position: relative;
    z-index: 2;
    padding: 32px 32px 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    color: #ffffff;
}

.yc-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.yc-tag {
    background: rgba(255, 255, 255, 0.92);
    color: #122340;
    
    font-weight: var(--fw-regular);
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.yc-card-title {
    font-weight: var(--fw-regular);
    font-size: 32px;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.yc-card-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    margin: 2px 0 4px;
}

.yc-card-price {
    
    font-weight: var(--fw-regular);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
}

/*  footer   */
.yc-card-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding: 0 32px 32px;
}

.yc-card-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 1);
    background: transparent;
    color: #ffffff; 
    font-weight: var(--fw-regular);
    font-size: 12px;
    letter-spacing: 20%;
    text-transform: uppercase;
    padding: 13px 40px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
    white-space: nowrap;
}

.yc-card-btn:hover {
    background: #ffffff;
    color: #122340;
}

.yc-card-btn:focus-visible {
    outline: 2px solid #d8bd87;
    outline-offset: 3px;
}

.yc-card-mark {
    width: 65px;
    height: 91px;
    object-fit: contain;
    opacity: 0.95;
    flex-shrink: 0;
}

.yc-card-content,
.yc-card-footer {
    display: none;
}

.yc-slide.swiper-slide-active .yc-card-content,
.yc-slide.swiper-slide-active .yc-card-footer {
    display: flex;
}

.yc-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 11px;
    width: 1400px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.yc-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.yc-pagination .yc-dash {
    height: 3px;
    width: 28px;
    background: rgba(18, 35, 64, 0.18);
    border-radius: 999px;
    cursor: pointer;
    transition: background .3s ease, width .3s ease;
}

.yc-pagination .yc-dash.is-active {
    background: #122340;
    width: 44px;
}

.yc-arrows {
    display: flex;
    align-items: center;
    gap: 14px;
}

.yc-arrow {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .15s ease;
    color: #122340;
    border: 0px transparent solid;
}

.yc-arrow svg {
    width: 24px;
    height: 24px;
}

/* .yc-arrow:hover {
    background: #122340;
    border-color: #122340;
    color: #ffffff;
} */

.yc-arrow:active {
    transform: scale(0.93);
}

.yc-arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.yc-arrow.swiper-button-disabled:hover {
    background: transparent;
    border-color: rgba(18, 35, 64, 0.25);
    color: #122340;
}

.yc-arrow:focus-visible {
    outline: 2px solid #c9a45c;
    outline-offset: 2px;
}

/*  RESPONSIVE  */

/* Tablet */
@media (max-width: 1100px) {
    .yc-title {
        font-size: 36px;
    }
    
    

}

/* Mobile */
@media (max-width: 720px) {
    .yc-section {
        padding: 40px 0 44px;
        min-height: auto;
        overflow-x: clip;
    }
    
    .yc-inner {
        width: 100%;
        gap: 40px;
        padding: 0 20px;
    }
    
    .yc-header {
        width: 100%;
        min-height: auto;
    }
    
    .yc-eyebrow {
        
        font-weight: var(--fw-regular);
        font-size: 11px;
        line-height: 32px;
    }
    
    .yc-hr {
        margin-bottom: 32px;
    }
    
    .yc-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    
    .yc-title {
        
        font-weight: var(--fw-regular);
        font-size: 40px;
        line-height: 1;
        max-width: 100%;
    }
    
    .yc-btn {
        
        font-weight: var(--fw-regular);
        padding: 14px 57px;
        font-size: 12px;
    }
    
    .yc-slider-wrap {
        width: 100%;
    }
    
    .yc-swiper {
        overflow: visible !important;
        padding-right: 0;
    }
    
    .yc-slide {
        height: 449px;
        
    }
    
    .yc-slide--active {
        flex:0 0 85vw;
    }
    
    .yc-card-title {
        font-size: 32px;
    }
    
    .yc-card-content {
        padding: 22px 20px 0;
        gap: 22px;
    }
    
    .yc-card-footer {
        padding: 0 20px 24px;
    }
    
    .yc-card-mark {
        width: 36px;
        height: 42px;
    }
    
    .yc-card-btn {
        
        font-weight: var(--fw-regular);
        padding: 12px 38px;
        font-size: 12px;
    }
    
    .yc-card-price {
        
        font-weight: var(--fw-regular);
    }
    
    .yc-tag {
        
        font-weight: var(--fw-regular);
    }
    
    .yc-nav-row {
        width: 100%;
        margin-top: 20px;
    }
    
    .yc-arrow {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 380px) {
    .yc-slide {
        width: 80vw;
        height: 420px;
    }
    
    .yc-swiper {
        height: 420px;
    }
    
    .yc-title {
        
        font-weight: var(--fw-regular);
        font-size: 24px;
    }
}



















/* yatch share finder css start form hrere  */

/* OUTER SECTION */
.ysf-section {
    width: 100%;
    margin-left: calc(50% - 49.5vw);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.ysf-inner {
    width: 100%;
    min-width: 0;
    height: 608px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    align-items: center;
    position: relative;
}


.ysf-left {
    flex: 1 1 50%;
    min-width: 0;
    height: 608px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 80px 0 100px;
    overflow: hidden;
}

.ysf-left-bg {
    position: absolute;
    inset: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.stepNum{
    font-size: 512px;
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.05);
    z-index: 9;
}
.ysf-left-overlay {
    position: absolute;
    inset: 0;
    background: #09254aed;
    z-index: 1;
}


.ysf-left-content {
    position: relative;
    z-index: 10;
}

.ysf-title {
    
    font-weight: var(--fw-regular);
    font-size: 40px;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 100%;
    margin-bottom: 28px;
}

.ysf-body {
    
    font-weight: var(--fw-regular);
    font-size: 16px;
    color: #ffffff;
    line-height: 24px;
    max-width: 554px;
    margin-bottom: 44px;
}

.ysf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 235px;
    height: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    
    font-weight: var(--fw-regular);
    font-size: 12px;
    letter-spacing: 20%;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
}

.ysf-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}


.ysf-right {
    flex: 1 1 50%;
    min-width: 0;
    height: 608px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.ysf-right video,
.ysf-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
    pointer-events: none;
    min-height: 400px;
}

/* 
RESPONSIVE
*/
@media (max-width: 1200px) {
    .ysf-inner {
        width: 100%;
        height: auto;
    }
    
    .ysf-left {
        width: 50%;
        height: auto;
        padding: 80px 48px 80px 60px;
    }
    
    .ysf-right {
        width: 50%;
        height: auto;
        min-height: 400px;
    }
    
    .ysf-title {
        font-size: 34px;
    }
}

@media (max-width: 900px) {
    .ysf-left {
        padding: 60px 36px 60px 44px;
    }
    
    .ysf-title {
        font-size: 28px;
        margin-bottom: 20px;
    }
    
    .ysf-body {
        font-size: 14px;
        margin-bottom: 32px;
    }
    
    .ysf-ghost-num {
        font-size: 180px;
    }
}

@media (max-width: 640px) {
    .ysf-inner {
        flex-direction: column;
    }
    
    .ysf-section {
        margin-left: calc(50% - 50vw);
        overflow: hidden;
    }
    
    .ysf-left {
        
        width: 100%;
        height: 380px;
        padding: 52px 28px;
    }
    
    .ysf-right {
        width: 428px;
        height: 428px;
    }
    
    .ysf-right video {
        height: 428px;
        object-fit: cover;
    }
    
    .ysf-title {
        font-size: 32px;
        letter-spacing: 0.03em;
    }
    
    .ysf-body {
        max-width: 100%;
        font-size: 16px;
        line-height: 24px;
    }
    
    .ysf-ghost-num {
        font-size: 140px;
        left: -12px;
    }
    
    .ysf-btn {
        width: 200px;
        font-size: 11px;
    }
}









/* Curated Boating Experiences section css start from here  start form here   */





.exp-section {
    width: 100%;
    background: #fff;
    position: relative;
    padding-bottom: 60px;
    font-weight: var(--fw-regular);
}

.exp-deco {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 360px;
    height: 360px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* 
INNER CONTAINER
*/
.exp-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 1706px;
    padding: 0 80px;
}


.exp-inner::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 138px;
    bottom: 178px;
    width: 1px;
    z-index: 1;
    pointer-events: none;
    background-image: url('data:image/svg+xml,<svg width="1" height="1335" viewBox="0 0 1 1335" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_588_2)"><path opacity="0.2" d="M0.5 0L0.500058 1335" stroke="black" stroke-dasharray="8 4"/></g><defs><clipPath id="clip0_588_2"><rect width="1" height="1335" fill="white"/></clipPath></defs></svg>');
}

/* 
TITLE
*/
.exp-title {
    text-align: center;
    font-size: 36px;
    font-weight: var(--fw-regular);
    line-height: 100%;
    text-transform: uppercase;
    color: #0C2240;
    padding-top: 76px;
    position: relative;
    z-index: 2;
}

/* 
TIMELINE
*/
.exp-timeline {
    position: relative;
    width: 100%;
    margin-top: 100px;
    height: 1450px;
}

.exp-hbranch {
    position: absolute;
    height: 1px;
    z-index: 2;
    pointer-events: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="202" height="1" viewBox="0 0 202 1" fill="none"><g clip-path="url(%23clip0_586_7)"><path opacity="0.2" d="M0 0.5H101" stroke="black" stroke-dasharray="8 4"/></g><g clip-path="url(%23clip1_586_7)"><path opacity="0.2" d="M101 0.5H202" stroke="black" stroke-dasharray="8 4"/></g><defs><clipPath id="clip0_586_7"><rect width="101" height="1" fill="white"/></clipPath><clipPath id="clip1_586_7"><rect width="101" height="1" fill="white" transform="translate(101)"/></clipPath></defs></svg>');
}


.exp-hbranch--1 {
    top: 256px;
    right: calc(50% + 0px);
    width: 110px;
}

.exp-hbranch--2 {
    top: 596px;
    left: calc(50% + 0px);
    width: 110px;
}

.exp-hbranch--3 {
    top: 1076px;
    right: calc(50% + 0px);
    width: 110px;
}

.exp-card {
    
    position: absolute;
    width: 464px;
    height: 512px;
    border-radius: 18px;
    overflow: hidden;
    z-index: 3;
    background: #c8d4dc;
    iframe,img{
        opacity: 0.5;
    }
        &:hover{
        iframe,img{
            opacity: 1;
        }
    }
}

.exp-card--1 {
    left: calc(50% - 464px - 110px);
    top: 0;
}

.exp-card--2 {
    left: calc(50% + 110px);
    top: 340px;
}

.exp-card--3 {
    left: calc(50% - 464px - 110px);
    top: 820px;
}

/* Video bg */
.exp-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.exp-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
    pointer-events: none;
}

.exp-card-label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px 26px;
    z-index: 2;
    font-size: 32px;
    font-weight: var(--fw-regular);
    color: #fff;
    line-height: 1.3;
}


.exp-btn-wrap {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.exp-btn-ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
        background-position: center;
    background-repeat: no-repeat;
    background-size: 120px;
    background-image: url('data:image/svg+xml,<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><foreignObject x="-74.6391" y="-74.6391" width="269.278" height="269.278"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(37.32px);clip-path:url(%23bgblur_0_48409_1176_clip_path);height:100%;width:100%"></div></foreignObject><circle opacity="0.3" data-figma-bg-blur-radius="74.6391" cx="60" cy="60" r="59.5" stroke="black" stroke-linecap="round" stroke-dasharray="4 4"/><defs><clipPath id="bgblur_0_48409_1176_clip_path" transform="translate(74.6391 74.6391)"><circle cx="60" cy="60" r="59.5"/></clipPath></defs></svg>');
}

.exp-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #0C2240;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--fw-regular);
    text-transform: capitalize;
    text-align: center;
    line-height: 16px;
    transition: background 0.2s, transform 0.2s;
    border: none;
    cursor: pointer;
}

.exp-btn:hover {
    background: #183660;
    transform: scale(1.04);
}
.exp-section{

}
/* 
TABLET  768–1199px
*/
@media (min-width: 768px) and (max-width: 1199px) {
    .exp-inner {
        padding: 0 32px;
        min-height: 0;
    }
    
    .exp-inner::before {
        top: 116px;
        bottom: 150px;
    }
    
    .exp-title {
        font-size: 19px;
        padding-top: 56px;
    }
    
    .exp-timeline {
        height: 1180px;
        margin-top: 60px;
    }
    
    .exp-card {
        width: 340px;
        height: 380px;
    }
    
    .exp-card--1 {
        left: calc(50% - 340px - 56px);
        top: 0;
    }
    
    .exp-card--2 {
        left: calc(50% + 56px);
        top: 250px;
    }
    
    .exp-card--3 {
        left: calc(50% - 340px - 56px);
        top: 610px;
    }
    
    .exp-hbranch--1 {
        top: 190px;
        width: 56px;
    }
    
    .exp-hbranch--2 {
        top: 440px;
        width: 56px;
    }
    
    .exp-hbranch--3 {
        top: 800px;
        width: 56px;
    }
    
    .exp-card-label {
        font-size: 16px;
        padding: 14px 18px 20px;
    }
}

/* 
MOBILE ≤ 767px
*/
@media (max-width: 767px) {
    .exp-deco {
        display: none;
    }
    
    .exp-inner {
        padding: 0 20px;
        min-height: 0;
    }
    
    .exp-inner::before {
        top: 116px;
        bottom: 100px;
    }
    
    .exp-title {
        font-size: 40px;
        letter-spacing: 0.05em;
        padding-top: 44px;
        line-height: 1.25;
    }
    
    .exp-timeline {
        height: auto;
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 130px;
    }
    
    /* Hide horizontal branches on mobile */
    .exp-hbranch {
        display: none;
    }
    
    .exp-card {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        max-width: 400px;
        height: 512px;
        border-radius: 14px;
        margin-bottom: 28px;
        z-index: 3;
        flex-shrink: 0;
    }
    
    .exp-card-label {
        font-size: 32px;
        font-weight: 400;
        padding: 12px 16px 20px;
    }
    
    .exp-btn-wrap {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 479px) {
    .exp-title {
        font-size: 40px;
    }
    
    .exp-card {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        max-width: 400px;
        height: 512px;
        border-radius: 14px;
        margin-bottom: 28px;
        z-index: 3;
        flex-shrink: 0;
    }
    
    .exp-section {
        padding-bottom: 12px;
    }
}




/* story slider css start form here  */

.share-story-section {
    width: 100%;
    height: 797px;
    background-color: #000000;
    background-image: radial-gradient(ellipse at 50% 0%, rgba(0, 90, 110, 0.5) 0%, transparent 60%);
    position: relative;
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
}

.share-story-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.share-story-header {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 101px 70px 80px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.share-story-title {
    font-weight: var(--fw-regular);
    font-size: 36px;
    text-transform: uppercase;
    color: #fff;
    line-height: 100%;
}

.share-story-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 235px;
    height: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 30px;
    font-size: 12px;
    letter-spacing: 20%;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}

.share-story-view-all:hover {
    background: rgba(255, 255, 255, 0.1);
}


.share-story-swiper-outer {
    position: relative;
    z-index: 2;
    width: 100%;
    flex: 1;
    min-height: 0;
    
    overflow: hidden;
}

.share-story-swiper {
    width: 100%;
    height: 519px;
    overflow: visible !important;
}

.share-story-swiper-outer {
    overflow: visible;
}

.share-story-card {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #1a3a4a;
    border:1px #DEDEDE solid;
}

.share-story-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.share-story-card:hover img {
    transform: scale(1.04);
}

.share-story-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.65) 100%);
    pointer-events: none;
    z-index: 1;
}

.share-story-card-bottom {
    position: absolute;
    bottom: 24px;
    left: 20px;
    display: flex;
    gap: 14px;
    z-index: 2;
    a{
    display: flex;
        gap: 14px;
    align-items: center;
    &:focus-visible{
        outline: unset;
    }
    }
}

.share-story-play {
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
}

/* .share-story-card:hover .share-story-play {
    background: rgba(255, 255, 255, 0.22);
} */

.share-story-play svg {
    margin-left: 5px;
}

.share-story-watch {
    font-weight: var(--fw-regular);
    font-size: 16px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* 
PAGINATION DOTS — mobile only
*/
.share-story-pagination {
    display: none;
    justify-content: center;
    gap: 8px;
    padding: 20px 0 36px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.share-story-dot {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.25s;
}

.share-story-dot.share-story-dot-active {
    background: #fff;
}

/* 
TABLET  768–1023px
*/
@media (min-width: 768px) and (max-width: 1023px) {
    .share-story-section {
        height: auto;
        min-height: 620px;
        padding-bottom: 48px;
    }
    
    .share-story-header {
        padding: 40px 32px 28px;
    }
    
    .share-story-title {
        font-size: 28px;
    }
    
    .share-story-view-all {
        width: 200px;
        height: 36px;
        font-size: 11px;
    }
    
    .share-story-swiper {
        height: 420px;
        padding-left: 32px !important;
    }

    
    .share-story-play {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }
    
    .share-story-watch {
        font-size: 14px;
    }
    
    .share-story-card-bottom {
        bottom: 18px;
        left: 16px;
    }
}

/* 
MOBILE  < 768px
*/
@media (max-width: 767px) {
    .share-story-section {
        height: auto;
        background-image: radial-gradient(ellipse at 50% 0%, rgba(0, 90, 110, 0.5) 0%, transparent 50%);
    }
    
    .share-story-bg-img {
        height: 140px;
        opacity: 0.4;
    }
    
    .share-story-header {
        padding: 32px 20px 24px;
    }
    
    .share-story-title {
        font-size: 28px;
        letter-spacing: 0.04em;
    }
    
    .share-story-view-all {
        display: none;
    }
    
    .share-story-swiper {
        height: 440px;
        padding-left: 0 !important;
    }
    
    
    .share-story-watch {
        font-size: 14px;
    }
    
    .share-story-card-bottom {
        bottom: 16px;
        left: 14px;
        gap: 10px;
    }
    
    .share-story-pagination {
        display: flex;
    }
    .yc-slide.swiper-slide-active,.yc-slide{
       flex: 0 0 100%;
    }
    .yc-arrows{
        gap:0
    }
}

/* Small mobile < 480px */
@media (max-width: 479px) {
    .share-story-title {
        font-size: 24px;
    }
    
    .share-story-swiper {
        height: 390px;
    }
}











/* slider css start form here  */

/* OUTER WRAPPER */
.faq-section {
    width: 100%;
    background: #fff;
    padding: 90px 0 40px 0;
}

.faq-inner {
    max-width: 1410px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding-left: 24px;
    padding-right:24px;
}


.faq-left {
    flex: 0 0 580px;
    width: 527px;
    position: relative;
    min-height: 86px;
}

.faq-bg-img {
    position: absolute;
    top: -30px;
    right: -20px;
    width: 220px;
    height: 220px;
    object-fit: contain;
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}


.faq-title {
    position: relative;
    z-index: 1;
    font-size: 36px;
    font-weight: var(--fw-regular);
    
    
    text-transform: uppercase;
    color: #0C2240;
    line-height: 100%;
    margin: 0;
    padding-top: 0;
    
}


.faq-right {
    flex: 1;
    min-width: 0;
}

.faq-item {
    border-top: 1px solid #00000080;
    padding: 0;
}

/* .faq-item:last-child {
    border-bottom: 1px solid #00000080;
} */

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 24px 0;
    cursor: pointer;
    user-select: none;
}

.faq-question-text {
    
    font-weight: var(--fw-regular);
    font-size: 24px;
    color: #0C2240;
    line-height: 100%;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.faq-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0C2240;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}

.faq-toggle:hover {
    background: #163260;
}

.faq-toggle svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.faq-item.faq-open .faq-toggle svg {
    transform: rotate(180deg);
}

.faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease, padding 0.3s ease;
}

.faq-item.faq-open .faq-answer {
    max-height: 800px;
}

.faq-answer-inner {
    padding: 0 52px 32px 0px;
}

.faq-answer-inner p {
    
    font-weight: var(--fw-regular, 400);
    font-size: 16px;
    line-height: 24px;
    color: #666666;
    margin: 0 0 16px;
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

/* 
TABLET  768–1023px
*/
@media (min-width: 768px) and (max-width: 1023px) {
    .faq-section {
        padding: 48px 0 64px;
    }
    
    .faq-inner {
        padding: 0 28px;
        gap: 0;
    }
    
    .faq-left {
        flex: 0 0 280px;
        width: 280px;
        min-height: 200px;
    }
    
    .faq-title {
        font-size: 30px;
    }
    
    .faq-bg-img {
        width: 170px;
        height: 170px;
        top: -20px;
        right: -10px;
    }
    
    .faq-question-text {
        font-size: 17px;
    }
}

/* 
MOBILE  < 768px
*/
@media (max-width: 767px) {
    .faq-section {
        padding: 36px 0 30px;
    }
    
    .faq-inner {
        flex-direction: column;
        padding: 0 24px;
        gap: 0;
    }
    
    .faq-left {
        flex: none;
        width: 100%;
        min-height: 160px;
        margin-bottom: 32px;
    }
    
    .faq-bg-img {
        width: 140px;
        height: 140px;
        top: -10px;
        right: 0;
        opacity: 0.45;
    }
    
    .faq-title {
        font-size: 36px;
        max-width: calc(100% - 120px);
    }
    
    .faq-right {
        width: 100%;
    }
    
    .faq-question-text {
        font-size: 16px;
    }
    
    .faq-question {
        padding: 20px 0;
    }
    
    .faq-toggle {
        width: 32px;
        height: 32px;
    }
    
    .faq-toggle svg {
        width: 12px;
        height: 12px;
    }
}

/* Small mobile < 480px */
@media (max-width: 479px) {
    .faq-title {
        font-size: 40px;
    }
    
    .faq-bg-img {
        width: 110px;
        height: 110px;
    }
    
    .faq-left {
        min-height: 130px;
        margin-bottom: 24px;
    }
    
    .faq-title {
        max-width: calc(100% - 90px);
    }
    
    .faq-question-text {
        font-size: 24px;
    }
}



.hps-section {
    width: 100%;
    
    height: 580px;
    margin: 50px 0 0 0px;
    position: relative;
    overflow: hidden;
    background: #fff;
    font-family: var(--font-main, sans-serif);
    display: flex;
    justify-content: center;
}

.inner-hps-section {
    width: 100%;
    max-width: 1440px;
    height: 580px;
    margin: 50px 0 0 0px;
    position: relative;
    overflow: hidden;
    background: #fff;
    font-family: var(--font-main, sans-serif);
}

.hps-swiper {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hps-swiper .swiper-slide {
    width: 1130px;
    height: 100%;
    flex-shrink: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 0.38;
    transform: scale(0.97);
}

.hps-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.hps-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hps-btn-prev,
.hps-btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.hps-btn-prev:hover,
.hps-btn-next:hover {
    background: #f2f2f2;
}

.hps-btn-prev {
    left: 48px;
}

.hps-btn-next {
    right: 48px;
}

.hps-btn-prev svg,
.hps-btn-next svg {
    width: 20px;
    height: 20px;
    stroke: #0C2240;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}





























/* 
HPM — MARQUEE 
*/
.main-hpm-section {
    width: 100%;
    height: 168px;
    background: #fff;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    
}

.hpm-section {
    width: 100%;
    background: #fff;
    overflow: hidden;
    position: relative;
    
    
}

.hpm-track {
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
    animation: hpm-scroll 26s linear infinite;
}

.hpm-section:hover .hpm-track {
    animation-play-state: paused;
}

@keyframes hpm-scroll {
    0% {
        transform: translateX(0);
    }
    
    100% {
        transform: translateX(-50%);
    }
}

.hpm-chunk {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hpm-text {
    font-family: var(--font-main, sans-serif);
    font-weight: var(--fw-regular, 400);
    font-size: 40px;
    text-transform: uppercase;
    color: #0C2240;
    white-space: nowrap;
    padding: 0 48px;
    flex-shrink: 0;
}
.hpmHunk{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
        background-position: center;
    background-repeat: no-repeat;
    background-size: 120px;
    background-image: url('data:image/svg+xml,<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><foreignObject x="-74.6391" y="-74.6391" width="269.278" height="269.278"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(37.32px);clip-path:url(%23bgblur_0_48409_1176_clip_path);height:100%;width:100%"></div></foreignObject><circle opacity="0.3" data-figma-bg-blur-radius="74.6391" cx="60" cy="60" r="59.5" stroke="black" stroke-linecap="round" stroke-dasharray="4 4"/><defs><clipPath id="bgblur_0_48409_1176_clip_path" transform="translate(74.6391 74.6391)"><circle cx="60" cy="60" r="59.5"/></clipPath></defs></svg>');

}
.hpm-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #0C2240;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--fw-regular);
    text-transform: capitalize;
    text-align: center;
    line-height: 16px;
    transition: background 0.2s, transform 0.2s;
    border: none;
    cursor: pointer;
    &:hover{
            background: #183660;
    transform: scale(1.04);
    }
}

.hpm-contact:hover {
    background: #163260;
}

/* 
RESPONSIVE — TABLET  768–1023px
*/
@media (min-width: 768px) and (max-width: 1023px) {
    
    /* Slider */
    .hps-section {
        height: 420px;
        margin: 48px auto 48px;
    }
    
    .hps-swiper .swiper-slide {
        width: 660px;
    }
    
    .hps-btn-prev {
        left: 20px;
    }
    
    .hps-btn-next {
        right: 20px;
    }
    
    .hps-btn-prev,
    .hps-btn-next {
        width: 44px;
        height: 44px;
    }
    
    .hps-btn-prev svg,
    .hps-btn-next svg {
        width: 17px;
        height: 17px;
    }
    
    /* Marquee */
    .hpm-section {
        margin: 0 auto 48px;
    }
    
}

/* 
RESPONSIVE — MOBILE  480–767px
*/
@media (min-width: 480px) and (max-width: 767px) {
    
    /* Slider */
    .hps-section {
        height: 280px;
        margin: 32px auto 32px;
    }
    
    .hps-swiper .swiper-slide {
        width: 360px;
    }
    
    .hps-btn-prev {
        left: 12px;
    }
    
    .hps-btn-next {
        right: 12px;
    }
    
    .hps-btn-prev,
    .hps-btn-next {
        width: 38px;
        height: 38px;
    }
    
    .hps-btn-prev svg,
    .hps-btn-next svg {
        width: 14px;
        height: 14px;
    }
    
    /* Marquee */
    .hpm-section {
        margin: 0 auto 32px;
    }
    
    
    .hpm-track {
        animation-duration: 18s;
    }
}

/* 
RESPONSIVE — SMALL MOBILE  < 480px
*/
@media (max-width: 479px) {
    
    /* Slider */
    .hps-section {
        height: 220px;
        margin: 30px auto 30px;
    }
    
    .hps-swiper .swiper-slide {
        width: 260px;
    }
    
    .hps-btn-prev {
        left: 8px;
    }
    
    .hps-btn-next {
        right: 8px;
    }
    
    .hps-btn-prev,
    .hps-btn-next {
        width: 32px;
        height: 32px;
    }
    
    .hps-btn-prev svg,
    .hps-btn-next svg {
        width: 12px;
        height: 12px;
        stroke-width: 2.5;
    }
    
    /* Marquee */
    .hpm-section {
        margin: 0 auto 24px;
    }
    
    .hpm-track {
        animation-duration: 14s;
    }
}














































/* blog css start form here  */



/* 
BLOGS – HERO BANNER
*/
.blogs-herobanner {
    position: relative;
    width: 100%;
    height: 713px;
    overflow: hidden;
    background: #0C2240;
    padding-left: 24px;
    padding-right: 24px;
}

.blogs-herobanner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.blogs-herobanner-overlay {
    position: absolute;
    inset: 0;
background: #00000073;

    pointer-events: none;
}

.blogs-herobanner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 24px 64px;
    max-width: 1410px;
    margin: 0 auto;
}

.blogs-herobanner-content-inner {
    max-width: 1410px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 0;
    /* reserves room so button never overlaps the title */
}

.blogs-herobanner-breadcrumb {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    margin-bottom: 32px;
}

.blogs-herobanner-breadcrumb span {
    color: rgba(255, 255, 255, 0.55);
}

.blogs-herobanner-title {
    font-size: var(--fs-banner-2title);
    font-weight: var(--fw-regular);
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1;
}


.blogs-herobanner-btn {
    /* position: absolute; */
    /* right: 40px;
    bottom: 0; */
    width: 194px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 50px;
    font-size: var(--fs-nav);
    font-weight: var(--fw-regular);
    letter-spacing: 0.15em;
    color: #ffffff;
    text-transform: uppercase;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.blogs-herobanner-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 1);
}

/* 
RESPONSIVE 
*/

/* Desktop 1024–1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
    .blogs-herobanner-btn {
        right: 40px;
        bottom: 0;
    }
}

/* Tablet 769–1023px */
@media (min-width: 769px) and (max-width: 1023px) {
    .blogs-herobanner {
        height: 560px;
    }
    
    .blogs-herobanner-content {
        padding: 0 32px 48px;
    }
    
    .blogs-herobanner-content-inner {
        padding-bottom: 48px;
    }
    
    .blogs-herobanner-content-inner .blogs-btnss {
        padding-left: 0;
        padding-top: 18px;
        display: flex;
        justify-content: flex-start;
    }
    
    .blogs-herobanner-title {
        font-size: 56px;
        max-width: calc(100% - 200px);
    }
    
    .blogs-herobanner-btn {
        right: 32px;
        bottom: 0;
        width: 170px;
        height: 40px;
    }
}

/* Mobile ≤ 768px */
@media (max-width: 768px) {
    .blogs-herobanner {
        min-height: 810px;
    }
    
    .blogs-herobanner-content {
        padding: 0 20px 32px;
    }
    
    .blogs-herobanner-content-inner {
        padding-bottom: 44px;
    }
    
    .blogs-herobanner-content-inner .blogs-btnss {
        padding-left: 0;
        padding-top: 16px;
        display: flex;
        justify-content: flex-start;
    }
    
    .blogs-herobanner-breadcrumb {
        font-size: 12px; 
        margin-bottom: 10px;
    }
    
    .blogs-herobanner-title {
        font-size: 42px;
    }
    
    .blogs-herobanner-btn {
        right: 20px;
        bottom: 0;
        width: 150px;
        height: 38px;
        font-size: 10px;
    }
    .yatchPageBanner {
        .blogs-herobanner-content-inner {
            flex-direction: column;
            justify-content: flex-start !important;
            align-items: flex-start !important;
            .priceBox{
                margin-top: 30px;
                border-top: 1px #FFFFFF80 solid;
            }
            .bannerFlexBox{
                flex: 0 0 100%;
                ul{
                    flex-direction: column;
                    li{
                        font-size: 12px;
                        border-right: 0;
                        border-bottom: 1px #FFFFFF80 solid;
                        padding:24px 0;
                        line-height: 24px;
                        &:last-child{
                            border-bottom: 0;
                        }
                    }
                }
            }
            .bannerRightOne{
                flex: 0 0 100% !important;
                text-align: left;
                                width: 100%;
                 .blogs-btnss{

                 }
            }
        }
    }
}

/* Small mobile ≤ 480px */
@media (max-width: 480px) {
    .blogs-herobanner-content-inner .blogs-btnss {
        padding-top: 14px;
    }
    
    .blogs-herobanner-title {
        font-size: 38px;
    }
    
    .blogs-herobanner-btn {
        right: 16px;
        bottom: 0;
        height: 36px;
        font-size: 9px;
        letter-spacing: 0.08em;
    }
}

/* Extra small mobile ≤ 380px */
@media (max-width: 380px) {
    .blogs-herobanner-content-inner .blogs-btnss {
        padding-top: 12px;
    }
    
    .blogs-herobanner-title {
        font-size: 30px;
    }
    
    .blogs-herobanner-btn {
        right: 14px;
        width: 110px;
        height: 34px;
        font-size: 8px;
        letter-spacing: 0.06em;
    }
}

/* 
BLOG SECTION  
*/

/*  SECTION WRAPPER  */
.blog-section {
    width: 100%;
    background: #F5F5F5;
    padding: 48px 0 60px;
    box-sizing: border-box;
    
    font-weight: var(--fw-regular);
}

.blog-inner {
    max-width: 1410px;
    margin: 0 auto;
    padding: 0 clamp(16px, 2.5vw, 40px);
    box-sizing: border-box;
}

.blog-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.blog-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 20px;
    border-radius: 30px;
    border: 1.5px solid #222;
    background: transparent;
    color: #222;
    line-height: 100%;
    letter-spacing: 20%;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.blog-filter-btn:hover {
    background: #222;
    color: #fff;
}

.blog-filter-btn.blog-filter-active {
    background: #111;
    color: #fff;
    border-color: #111;
    height: 40px;
    min-width: 76px;
    font-weight: var(--fw-regular);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.blog-page {
    display: none;
}

.blog-page.blog-active {
    display: contents;
}

.blog-card {
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 512;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #111;
    flex-shrink: 0;
}

.blog-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.04);
}

.blog-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.18) 52%,
    rgba(0, 0, 0, 0.55) 100%);
}


.blog-card-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 20px;
    box-sizing: border-box;
}

.blog-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.blog-card-date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.04em;
    font-weight: 400;
}

.blog-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 20px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: #ffffff;
    backdrop-filter: blur(4px);
    color: #000000;
    font-size: 12px;
    font-weight: var(--fw-regular);
    flex-shrink: 0;
}

.blog-card-title {
    font-size: 32px;
    font-weight: var(--fw-regular);
    line-height: 1;
    color: #fff;
    margin: 0 0 0;
    flex: 1;
    padding: 22px 22px 22px 0px;
}

.blog-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border-radius: 30px;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    margin-top: auto;
    box-sizing: border-box;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.blog-card-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* 
PAGINATION

*/
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    width: 354px;
    height: 58px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.blog-page-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.22);
    background: #fff;
    color: #111;
    font-size: 14px;
    font-weight: var(--fw-regular);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.blog-page-btn.blog-page-active {
    background: #111;
    color: #fff;
    border-color: #111;
}

.blog-page-btn:hover:not(.blog-page-active) {
    border-color: #111;
}

/* Arrow buttons */
.blog-page-arrow {
    width: 58px;
    height: 58px;
    border: none;
    background: none;
    border-radius: 50%;
    color: #111;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
    background-color: #ffffff;
}

.blog-page-arrow:hover {
    opacity: 1;
}

/* 
TABLET  640–1023px  
*/
@media (min-width: 640px) and (max-width: 1023px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .blog-card {
        aspect-ratio: 440 / 512;
    }
    
    .blog-card-title {
        font-size: clamp(20px, 2.8vw, 28px);
    }
    
    .blog-card-btn {
        width: clamp(140px, 16vw, 194px);
    }
}

/* 
MOBILE  < 640px  
*/
@media (max-width: 639px) {
    .blog-section {
        padding: 28px 0 40px;
    }
    
    .blog-inner {
        padding: 0 16px;
    }
    
    .blog-filters {
        gap: 8px;
        margin-bottom: 20px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .blog-filters::-webkit-scrollbar {
        display: none;
    }
    
    .blog-filter-btn {
        flex-shrink: 0;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .blog-card {
        aspect-ratio: 390 / 420;
        border-radius: 12px;
    }
    
    .blog-card-title {
        font-size: clamp(20px, 6vw, 28px);
    }
    
    .blog-card-body {
        padding: 14px 14px 16px;
    }
    
    .blog-card-btn {
        width: clamp(130px, 50vw, 170px);
        height: 36px;
        font-size: 11px;
    }
    
    .blog-card-badge {
        width: 60px;
        height: 18px;
        font-size: 9px;
    }
    
    /* Pagination mobile */
    .blog-pagination {
        width: auto;
        height: auto;
        gap: 4px;
        margin-top: 28px;
    }
    
    .blog-page-btn,
    .blog-page-arrow {
        width: 44px;
        height: 44px;
        font-size: 13px;
    }
    
    .blog-page-arrow {
        font-size: 22px;
    }
}















/* guides details start from here  */





/* ── HERO CONTENT SECTION ── */
.guide-details-hero {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 72px 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.guide-details-back {
    
    font-weight: var(--fw-regular);
    font-size: 12px;
    text-transform: uppercase;
    color: #0E0E0E;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 20%;
    line-height: 32px;
    margin-bottom: 28px;
}

.guide-details-back::before {
    content: '‹';
    font-size: 16px;
    line-height: 1;
}

.guide-details-content-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 56px;
}

.guide-details-title-col {
    width: 662px;
    flex-shrink: 0;
}

.guide-details-title {
    
    font-weight: var(--fw-regular);
    font-size: 52px;
    line-height: 1;
    color: #0C2240;
    text-transform: uppercase;
}

.guide-details-desc-col {
    width: 642px;
    flex-shrink: 0;
    padding-top: 8px;
}

.guide-details-desc {
    
    font-weight: var(--fw-regular);
    font-size: 16px;
    
    
    color: #666666;
    line-height: 24px;
    max-width: 642px;
}

/* ── IMAGE SECTION ── */
.guide-details-image-section {
    width: 100%;
    
    margin: 0 auto;
    height: 580px;
    overflow: hidden;
}

.guide-details-image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
    .guide-details-hero {
        padding: 32px 24px;
    }
    
    .guide-details-back {
        margin-bottom: 20px;
    }
    
    .guide-details-content-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .guide-details-title-col,
    .guide-details-desc-col {
        width: 100%;
    }
    
    .guide-details-title {
        font-size: 36px;
        line-height: 1.05;
    }
    
    .guide-details-desc {
        font-size: 14px;
        max-width: 100%;
    }
    
    .guide-details-image-section {
        height: 280px;
    }
}

@media (max-width: 480px) {
    .guide-details-hero {
        padding: 24px 20px;
    }
    
    .guide-details-title {
        font-size: 30px;
    }
    
    .guide-details-image-section {
        height: 220px;
    }
}






/* Guide Detail section — start */

.guide-det-section {
    width: 100%;
    background: #f5f5f5;
    position: relative;
    font-weight: var(--fw-regular);
    padding-bottom: 80px;
}


/* INNER CONTAINER */
.guide-det-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

.guide-det-inner::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 300px;
    height: 1484px;
    width: 0;
    border-left: 1px dotted #c3ccd4;
    z-index: 1;
    pointer-events: none;
}

/* TITLE + DESCRIPTION BLOCK — 900x136 */
.guide-det-content {
    width: 900px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 104px;
    min-height: 136px;
    position: relative;
    z-index: 2;
}

.guide-det-title {
    font-size: 40px;
    font-weight: var(--fw-regular);
    line-height: 100%;
    text-transform: uppercase;
    color: #0C2240;
    margin: 0 0 16px;
}

.guide-det-desc {
    font-size: 16px;
    line-height: 24px;
    color: #4a5a6b;
    max-width: 720px;
    margin: 0 auto;
}

/* TIMELINE */
.guide-det-timeline {
    position: relative;
    width: 100%;
    margin-top: 100px;
    height: 1444px;
}

.guide-det-hbranch {
    position: absolute;
    height: 0;
    border-top: 1px dotted #c3ccd4;
    z-index: 2;
    pointer-events: none;
}

.guide-det-hbranch--1 {
    top: 256px;
    right: calc(50% + 0px);
    width: 110px;
}

.guide-det-hbranch--2 {
    top: 436px;
    left: calc(50% + 0px);
    width: 110px;
}

.guide-det-hbranch--3 {
    top: 948px;
    right: calc(50% + 0px);
    width: 110px;
}

.guide-det-hbranch--4 {
    top: 1128px;
    left: calc(50% + 0px);
    width: 110px;
}

.guide-det-card {
    position: absolute;
    width: 464px;
    height: 512px;
    border-radius: 18px;
    overflow: hidden;
    z-index: 3;
    background: #c8d4dc;
}

/* Left column: card 1 & 3 */
.guide-det-card--1 {
    left: calc(50% - 464px - 110px);
    top: 0;
}

.guide-det-card--3 {
    left: calc(50% - 464px - 110px);
    top: 692px;
    /* card1 bottom (512) + 180 gap */
}

/* Right column: card 2 & 4, offset 180 down from left column */
.guide-det-card--2 {
    left: calc(50% + 110px);
    top: 180px;
}

.guide-det-card--4 {
    left: calc(50% + 110px);
    top: 872px;
}

.guide-det-card img.guide-det-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.guide-det-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
    pointer-events: none;
}

.guide-det-card-label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 22px 26px;
    z-index: 2;
    font-size: 32px;
    font-weight: var(--fw-regular);
    color: #fff;
    line-height: 1.3;
}

/* TABLET 768–1199px */
@media (min-width: 768px) and (max-width: 1199px) {
    .guide-det-inner {
        padding: 0 32px;
    }
    
    .guide-det-inner::before {
        top: 170px;
        height: 1040px;
    }
    
    .guide-det-content {
        padding-top: 56px;
        width: 100%;
        min-height: 0;
    }
    
    .guide-det-title {
        font-size: 26px;
    }
    
    .guide-det-desc {
        font-size: 14px;
        line-height: 22px;
        max-width: 500px;
    }
    
    .guide-det-timeline {
        height: 1060px;
        margin-top: 60px;
    }
    
    .guide-det-card {
        width: 340px;
        height: 380px;
    }
    
    .guide-det-card--1 {
        left: calc(50% - 340px - 56px);
        top: 0;
    }
    
    .guide-det-card--2 {
        left: calc(50% + 56px);
        top: 130px;
    }
    
    .guide-det-card--3 {
        left: calc(50% - 340px - 56px);
        top: 510px;
        /* card1 bottom(380)+130 gap */
    }
    
    .guide-det-card--4 {
        left: calc(50% + 56px);
        top: 640px;
        /* card2 bottom(510)+130 gap */
    }
    
    .guide-det-hbranch--1 {
        top: 190px;
        width: 56px;
    }
    
    .guide-det-hbranch--2 {
        top: 320px;
        width: 56px;
    }
    
    .guide-det-hbranch--3 {
        top: 700px;
        width: 56px;
    }
    
    .guide-det-hbranch--4 {
        top: 830px;
        width: 56px;
    }
    
    .guide-det-card-label {
        font-size: 16px;
        padding: 14px 18px 20px;
    }
}

/* MOBILE ≤ 767px */
@media (max-width: 767px) {
    .guide-det-deco {
        display: none;
    }
    
    .guide-det-inner {
        padding: 0 20px;
    }
    
    .guide-det-inner::before {
        display: none;
    }
    
    .guide-det-content {
        padding-top: 44px;
        width: 100%;
        min-height: 0;
    }
    
    .guide-det-title {
        font-size: 28px;
        letter-spacing: 0.03em;
        line-height: 1.15;
    }
    
    .guide-det-desc {
        font-size: 14px;
        line-height: 22px;
        max-width: 100%;
    }
    
    .guide-det-timeline {
        height: auto;
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
    }
    
    .guide-det-hbranch {
        display: none;
    }
    
    .guide-det-card {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100%;
        max-width: 400px;
        height: 512px;
        border-radius: 14px;
        margin-bottom: 28px;
        z-index: 3;
        flex-shrink: 0;
    }
    
    .guide-det-card-label {
        font-size: 28px;
        font-weight: 400;
        padding: 12px 16px 20px;
    }
}

@media (max-width: 479px) {
    .guide-det-title {
        font-size: 26px;
    }
    
    .guide-det-section {
        padding-bottom: 12px;
    }
}




/* ── SECTION WRAPPER ── */
.guide-details-keyfeature-section {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ── TOP BLOCK: 1360×174 ── */
.guide-details-keyfeature-top {
    width: 1410px;
    height: 174px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 48px;
}

.guide-details-keyfeature-label {
    
    font-weight: var(--fw-regular);
    font-size: 12px;
    letter-spacing: 20%;
    text-transform: uppercase;
    color: #0C2240;
    padding-top: 80px;
    padding-bottom: 32px;
    margin-bottom: 48px;
    border-bottom: 1px solid #b0aba0;
    line-height: 100%;
}

/* Title block: 845×96 */
.guide-details-keyfeature-title {
    width: 845px;
    height: 96px;
    
    font-weight: var(--fw-regular);
    font-size: 40px;
    line-height: 1;
    
    text-transform: uppercase;
    color: #0C2240;
    display: flex;
    align-items: center;
}

/* ── BOTTOM BLOCK: 1360×600 ── */
.guide-details-keyfeature-bottom {
    width: 1410px;
    height: 600px;
    display: flex;
    gap: 78px;
    padding-top: 40px;
}

/* Left image: 650×600 */
.guide-details-keyfeature-image-col {
    width: 650px;
    height: 600px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 16px;
}

.guide-details-keyfeature-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Right features col: 650×460 */
.guide-details-keyfeature-features-col {
    width: 650px;
    height: 460px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: center;
    gap: 32px;
}

/* Each feature item: 650×93 */
.guide-details-keyfeature-feature-item {
    width: 650px;
    height: 93px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
}

.guide-details-keyfeature-feature-item:last-child {
    border-bottom: none;
}

.guide-details-keyfeature-feature-title {
    
    font-weight: var(--fw-regular);
    font-size: 24px;
    line-height: 1;
    color: #0C2240;
    margin-bottom: 14px;
    
}

.guide-details-keyfeature-feature-desc {
    
    font-weight: var(--fw-regular);
    font-size: 16px;
    line-height: 24px;
    color: #666666;
}

/* ── TABLET: 768px–1199px ── */
@media (max-width: 1199px) {
    .guide-details-keyfeature-section {
        padding: 0 32px;
    }
    
    .guide-details-keyfeature-top,
    .guide-details-keyfeature-bottom {
        width: 100%;
    }
    
    .guide-details-keyfeature-top {
        height: auto;
        padding: 32px 0 24px;
    }
    
    .guide-details-keyfeature-title {
        width: 100%;
        height: auto;
        font-size: 34px;
    }
    
    .guide-details-keyfeature-bottom {
        height: auto;
        gap: 36px;
    }
    
    .guide-details-keyfeature-image-col {
        width: 48%;
        height: 480px;
    }
    
    .guide-details-keyfeature-features-col {
        width: 48%;
        height: auto;
    }
    
    .guide-details-keyfeature-feature-item {
        width: 100%;
        height: auto;
        padding: 16px 0;
    }
}

/* ── MOBILE: ≤767px ── */
@media (max-width: 767px) {
    .guide-details-keyfeature-section {
        padding: 0 20px;
    }
    
    .guide-details-keyfeature-top {
        height: auto;
        padding: 28px 0 20px;
    }
    
    .guide-details-keyfeature-title {
        width: 100%;
        height: auto;
        font-size: 26px;
        line-height: 1.1;
    }
    
    .guide-details-keyfeature-bottom {
        flex-direction: column;
        height: auto;
        gap: 28px;
        padding-top: 24px;
        padding-bottom: 32px;
    }
    
    .guide-details-keyfeature-image-col {
        width: 100%;
        height: 260px;
    }
    
    .guide-details-keyfeature-features-col {
        width: 100%;
        height: auto;
    }
    
    .guide-details-keyfeature-feature-item {
        width: 100%;
        height: auto;
        padding: 16px 0;
    }
    
    .guide-details-keyfeature-feature-title {
        font-size: 17px;
    }
    
    .guide-details-keyfeature-feature-desc {
        font-size: 13px;
    }
}

/* ── SMALL MOBILE: ≤480px ── */
@media (max-width: 480px) {
    .guide-details-keyfeature-section {
        padding: 0 16px;
    }
    
    .guide-details-keyfeature-title {
        font-size: 22px;
    }
    
    .guide-details-keyfeature-image-col {
        height: 220px;
    }
}





















/* more guides section css start form here  */










/* ─── Section ─── */
.m-guides-section {
    width: 100%;
    min-height: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 60px;
    gap: 40px;
}

/* ─── Top Bar ─── */
.m-guides-topbar {
    width: 1410px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.m-guides-heading {
    
    font-weight: var(--fw-regular);
    font-size: 40px;
    color: #0C2240;
    text-transform: uppercase;
    line-height: 1;
}

.m-guides-view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border: 1.5px solid #0E0E0E;
    border-radius: 999px;
    background: transparent;
    color: #0E0E0E;
    
    font-size: 12px;
    font-weight: var(--fw-regular, 400);
    letter-spacing: 20%;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s, color 0.25s;
    flex-shrink: 0;
}

.m-guides-view-all-btn:hover {
    background: #0C2240;
    color: #fff;
}

/* ─── Cards Row ─── */
.m-guides-cards {
    width: 1410px;
    height: 512px;
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex-shrink: 0;
}

/* ─── Single Card ─── */
.m-guides-card {
    width: 440px;
    height: 512px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.m-guides-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.m-guides-card:hover .m-guides-card-img {
    transform: scale(1.04);
}

/* overlay gradient */
.m-guides-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
    rgba(10, 20, 50, 0.45) 0%,
    rgba(10, 20, 50, 0.10) 40%,
    rgba(10, 20, 50, 0.05) 60%,
    rgba(10, 20, 50, 0.55) 100%);
    pointer-events: none;
}

/* title top-left */
.m-guides-card-title {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    
    font-weight: var(--fw-regular);
    font-size: 32px;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
}

/* read more btn bottom-left */
.m-guides-card-btn {
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font-family: var(--font-main, 'Helvetica Neue', Arial, sans-serif);
    font-size: 11px;
    font-weight: var(--fw-regular, 400);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.m-guides-card-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
}

/* 
RESPONSIVE
*/

/* 1280px – slight shrink */
@media (max-width: 1280px) {
    .m-guides-section {
        width: 100%;
        padding: 60px 32px;
    }
    
    .m-guides-topbar,
    .m-guides-cards {
        width: 100%;
    }
    
    .m-guides-cards {
        height: 460px;
    }
    
    .m-guides-card {
        width: calc(33.333% - 14px);
        height: 460px;
    }
}

/* 1024px */
@media (max-width: 1024px) {
    .m-guides-section {
        padding: 48px 24px;
        gap: 32px;
    }
    
    .m-guides-heading {
        font-size: 28px;
    }
    
    .m-guides-topbar {
        height: auto;
    }
    
    .m-guides-cards {
        height: 420px;
    }
    
    .m-guides-card {
        width: calc(33.333% - 14px);
        height: 420px;
        padding-bottom: 0;
    }
    
    .m-guides-card-title {
        font-size: 18px;
    }
}

/* 768px – 2 column */
@media (max-width: 768px) {
    .m-guides-section {
        padding: 48px 20px;
        gap: 28px;
        min-height: auto;
    }
    
    .m-guides-topbar {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 16px;
    }
    
    .m-guides-heading {
        font-size: 26px;
    }
    
    .m-guides-cards {
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
        gap: 16px;
    }
    
    .m-guides-card {
        width: 100%;
        height: 360px;
    }
    
    .m-guides-card:last-child {
        width: 100%;
    }
}

/* 480px – single column (mobile) */
@media (max-width: 480px) {
    .m-guides-section {
        padding: 40px 16px;
        gap: 24px;
    }
    
    .m-guides-heading {
        font-size: 24px;
    }
    
    .m-guides-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    
    .m-guides-view-all-btn {
        width: 160px;
        font-size: 11px;
    }
    
    .m-guides-cards {
        flex-direction: column;
        height: auto;
        gap: 16px;
    }
    
    .m-guides-card {
        width: 100%;
        height: 340px;
    }
    
    .m-guides-card-title {
        font-size: 17px;
        top: 20px;
        left: 20px;
        right: 20px;
    }
    
    .m-guides-card-btn {
        bottom: 20px;
        left: 20px;
        width: 160px;
        font-size: 10px;
    }
}

/* very small: 360px */
@media (max-width: 380px) {
    .m-guides-card {
        height: 300px;
    }
    
    .m-guides-heading {
        font-size: 20px;
    }
}


















































/* owner story details css start form here  */











/* 
HERO HEADER  — 1440 x 274
*/
.owner-storydet-hero {
    width: 100%;
    
    font-weight: var(--fw-regular);
    min-height: 274px;
    background: #f5f5f5;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 40px 0;
}

.owner-storydet-hero-inner {
    width: 1410px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.owner-storydet-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    text-transform: uppercase;
    color: #0E0E0E;
    text-decoration: none;
    margin-bottom: 48px;
}

.owner-storydet-back svg {
    width: 14px;
    height: 14px;
}

.owner-storydet-hero-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.owner-storydet-main-title {
    font-size: 52px;
    font-weight: var(--fw-regular);
    line-height: 1;
    text-transform: uppercase;
    color: #0C2240;
    max-width: 662px;
    flex-shrink: 0;
}

.owner-storydet-hero-desc {
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 24px;
    color: #4a5568;
    max-width: 560px;
    padding-top: 6px;
}

/* 
VIDEO SECTION — 1440 x 580
*/
.owner-storydet-video-section {
    width: 100%;
    height: 580px;
    background: #0C2240;
    position: relative;
    overflow: hidden;
    margin-top: 48px;
    cursor: pointer;
}

.owner-storydet-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.75;
    transition: opacity 0.3s;
}

.owner-storydet-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.owner-storydet-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10, 20, 50, 0.45) 0%, rgba(10, 20, 50, 0.1) 100%);
    pointer-events: none;
    transition: opacity 0.3s;
}

.owner-storydet-play-btn {
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.3s;
}

.owner-storydet-play-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    
    background: rgba(74, 72, 72, 0.574);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s;
}

.owner-storydet-play-btn:hover .owner-storydet-play-circle {
    background: rgba(255, 255, 255, 0.25);
}

.owner-storydet-play-circle svg {
    width: 18px;
    height: 18px;
    margin-left: 3px;
}

.owner-storydet-play-label {
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 24px;
    text-transform: uppercase;
    color: #ffffff;
}

/* hidden state when playing */
.owner-storydet-video-section.is-playing .owner-storydet-video-bg {
    display: none;
}

.owner-storydet-video-section.is-playing .owner-storydet-video-el {
    display: block;
}

.owner-storydet-video-section.is-playing .owner-storydet-video-overlay {
    opacity: 0;
}

.owner-storydet-video-section.is-playing .owner-storydet-play-btn {
    opacity: 0;
    pointer-events: none;
}

/* 
DETAIL CONTENT — 1100 wide, centered
*/
.owner-storydet-content {
    width: 100%;
    padding: 72px 70px;
}

.owner-storydet-content-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* section block: label + title + text + image */
.owner-storydet-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}



.owner-storydet-block-title {
    font-size: 40px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1;
    margin-bottom: 32px;
}

.owner-storydet-block-text {
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 24px;
    color: #666666;
    max-width: 1100px;
    margin-bottom: 32px;
}

.owner-storydet-block-text p+p {
    margin-top: 24px;
}

/* images inside content: 1100 x 565 */
.owner-storydet-block-img {
    width: 100%;
    height: 565px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* 
TESTIMONIAL SPLIT — 1440 x 617
left image 680x617 | right content 680x617
contact circle 112x112 centered on seam
*/
.owner-storydet-testimonial {
    max-width: 1410px;
    height: 617px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
}

.owner-storydet-test-left {
    width: 680px;
    height: 617px;
    flex-shrink: 0;
    position: relative;
}

.owner-storydet-test-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.owner-storydet-test-right {
    flex: 1;
    height: 617px;
    background: #0C2240;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 64px;
    gap: 24px;
}

.owner-storydet-test-eyebrow {
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* dashed separator */
.owner-storydet-test-divider {
    width: 100%;
    height: 1px;
    border: none;
    border-top: 1.5px dashed rgba(255, 255, 255, 0.25);
    margin: 0;
}

.owner-storydet-test-title {
    font-size: 40px;
    
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.15;
}

.owner-storydet-test-quote {
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 24px;
    color: rgba(255, 255, 255, 0.75);
    max-width: 480px;
}

/* contact us circular button — 112x112 — centered inside left image */
.owner-storydet-contact-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(138, 137, 137, 0.579);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    text-decoration: none;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: background 0.25s, transform 0.25s;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    
}

.owner-storydet-contact-circle:hover {
    background: #ffffff;
    transform: translate(-50%, -50%) scale(1.05);
}

.owner-storydet-contact-circle span {
    font-size: 14px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 16px;
    text-align: center;
}

/* 
RESPONSIVE
*/

/* 1280px */
@media (max-width: 1280px) {
    .owner-storydet-hero-inner {
        width: 100%;
    }
    
    .owner-storydet-hero {
        padding: 40px 32px 0;
    }
    
    .owner-storydet-content {
        padding: 60px 32px;
    }
    
    .owner-storydet-block-img {
        height: 480px;
    }
    
    .owner-storydet-main-title {
        font-size: 42px;
    }
    
    .owner-storydet-test-left {
        width: 50%;
    }
    
    .owner-storydet-contact-circle {
        left: 25%;
    }
    
    .owner-storydet-test-right {
        padding: 48px 48px;
    }
    
    .owner-storydet-test-title {
        font-size: 28px;
    }
}

/* 1024px */
@media (max-width: 1024px) {
    .owner-storydet-video-section {
        height: 460px;
    }
    
    .owner-storydet-main-title {
        font-size: 34px;
    }
    
    .owner-storydet-block-title {
        font-size: 26px;
    }
    
    .owner-storydet-block-img {
        height: 380px;
    }
    
    .owner-storydet-test-title {
        font-size: 24px;
    }
    
    .owner-storydet-test-right {
        padding: 40px 36px;
    }
    
    .owner-storydet-contact-circle {
        left: 25%;
        width: 90px;
        height: 90px;
    }
}

/* 768px — stack testimonial */
@media (max-width: 768px) {
    .owner-storydet-hero {
        padding: 32px 20px 0;
    }
    
    .owner-storydet-hero-grid {
        flex-direction: column;
        gap: 20px;
    }
    
    .owner-storydet-main-title {
        font-size: 30px;
        max-width: 100%;
    }
    
    .owner-storydet-hero-desc {
        max-width: 100%;
    }
    
    .owner-storydet-video-section {
        height: 360px;
        margin-top: 32px;
    }
    
    .owner-storydet-content {
        padding: 48px 20px;
    }
    
    .owner-storydet-content-inner {
        gap: 48px;
    }
    
    .owner-storydet-block-img {
        height: 280px;
        border-radius: 10px;
    }
    
    .owner-storydet-block-title {
        font-size: 22px;
    }
    
    /* testimonial stacks vertically */
    .owner-storydet-testimonial {
        flex-direction: column;
        height: auto;
    }
    
    .owner-storydet-test-left {
        width: 100%;
        height: 320px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .owner-storydet-test-right {
        width: 100%;
        height: auto;
        padding: 48px 24px;
    }
    
    .owner-storydet-test-title {
        font-size: 22px;
    }
    
    /* contact circle stays centered inside test-left via CSS, no override needed */
    .owner-storydet-contact-circle {
        width: 88px;
        height: 88px;
    }
    
    .owner-storydet-contact-circle:hover {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* 480px */
@media (max-width: 480px) {
    .owner-storydet-main-title {
        font-size: 24px;
    }
    
    .owner-storydet-hero-desc {
        font-size: 14px;
    }
    
    .owner-storydet-video-section {
        height: 280px;
    }
    
    .owner-storydet-play-circle {
        width: 44px;
        height: 44px;
    }
    
    .owner-storydet-play-label {
        font-size: 11px;
    }
    
    .owner-storydet-block-title {
        font-size: 20px;
    }
    
    .owner-storydet-block-img {
        height: 220px;
    }
    
    .owner-storydet-test-left {
        height: 260px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .owner-storydet-contact-circle {
        width: 80px;
        height: 80px;
    }
    
    .owner-storydet-test-right {
        padding: 40px 20px;
    }
    
    .owner-storydet-test-title {
        font-size: 20px;
    }
    
    .owner-storydet-test-quote {
        font-size: 13px;
    }
}











/* ── SECTION ── */
.m-stories-section {
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    gap: 40px;
}

/* ── TOP BAR  1360x48 ── */
.m-stories-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding-top: 0;
    padding-bottom: 60px;
}

.m-stories-heading {
    font-size: 40px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1;
}

.m-stories-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border: 1.5px solid #0E0E0E;
    border-radius: 999px;
    background: transparent;
    color: #0E0E0E;
    font-size: 12px;
    font-weight: var(--fw-regular, 400);
    letter-spacing: 12%;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
    flex-shrink: 0;
}

.m-stories-view-all:hover {
    background: #0C2240;
    color: #fff;
}

/* ── CARDS ROW  1360x512 ── */
.m-stories-cards {
    width: 1410px;
    height: 512px;
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex-shrink: 0;
}

/* ── CARD  440x512 ── */
.m-stories-card {
    width: 440px;
    height: 512px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.m-stories-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.m-stories-card:hover .m-stories-card-img {
    transform: scale(1.04);
}

/* gradient overlay — heavier at top & bottom */
.m-stories-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
    rgba(10, 20, 50, 0.55) 0%,
    rgba(10, 20, 50, 0.15) 45%,
    rgba(10, 20, 50, 0.35) 70%,
    rgba(10, 20, 50, 0.65) 100%);
    pointer-events: none;
}

/* ── CARD CONTENT ── */
.m-stories-card-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 24px 28px;
}

/* top: title + desc */
.m-stories-card-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* title  392x114 */
.m-stories-card-title {
    width: 392px;
    
    font-size: 32px;
    font-weight: var(--fw-regular);
    line-height: 108%;
    
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
}

/* thin divider line between title and desc */
.m-stories-card-divider {
    width: 392px;
    margin-top: 12px;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

/* desc  392x48 */
.m-stories-card-desc {
    width: 392px;
    font-size: 16px;
    padding-top: 12px;
    font-weight: var(--fw-regular, 400);
    line-height: 1.6;
    color: rgba(255, 255, 255, 1);
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* bottom: read more circle  112x112 */
.m-stories-card-btn-wrap {
    display: flex;
    align-items: flex-end;
}

.m-stories-card-btn {

    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
    position: relative;
}

/* inner solid ring */



.m-stories-card-btn span {
    font-size: 14px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    line-height: 16px;
    position: relative;
    z-index: 1;
}

/* 
RESPONSIVE
*/

/* 1280px */
@media (max-width: 1280px) {
    .m-stories-section {
        width: 100%;
        padding: 60px 32px;
    }
    
    .m-stories-topbar,
    .m-stories-cards {
        width: 100%;
    }
    
    .m-stories-cards {
        height: 480px;
    }
    
    .m-stories-card {
        width: calc(33.333% - 14px);
        height: 480px;
    }
    
    .m-stories-card-title,
    .m-stories-card-divider,
    .m-stories-card-desc {
        width: 100%;
    }
}

/* 1024px */
@media (max-width: 1024px) {
    .m-stories-section {
        padding: 48px 24px;
        gap: 32px;
    }
    
    .m-stories-heading {
        font-size: 28px;
    }
    
    .m-stories-cards {
        height: 420px;
    }
    
    .m-stories-card {
        height: 420px;
    }
    
    .m-stories-card-title {
        font-size: 18px;
    }
    
}

/* 768px — single column */
@media (max-width: 768px) {
    .m-stories-section {
        padding: 48px 20px;
        gap: 28px;
        min-height: auto;
    }
    
    .m-stories-topbar {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 16px;
    }
    
    .m-stories-heading {
        font-size: 26px;
    }
    
    .m-stories-cards {
        flex-direction: column;
        height: auto;
        gap: 16px;
    }
    
    .m-stories-card {
        width: 100%;
        height: 400px;
    }
    
    .m-stories-card-title,
    .m-stories-card-divider,
    .m-stories-card-desc {
        width: 100%;
    }
    
    .m-stories-card-title {
        font-size: 20px;
    }
}

/* 480px */
@media (max-width: 480px) {
    .m-stories-section {
        padding: 40px 16px;
    }
    
    .m-stories-heading {
        font-size: 22px;
    }
    
    .m-stories-view-all {
        width: 140px;
        font-size: 11px;
    }
    
    .m-stories-card {
        height: 360px;
    }
    
    .m-stories-card-body {
        padding: 20px 20px 24px;
    }
    
    .m-stories-card-title {
        font-size: 18px;
    }
    
    .m-stories-card-desc {
        font-size: 12px;
    }
    
    
    .m-stories-card-btn span {
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .m-stories-card {
        height: 320px;
    }
    
    .m-stories-heading {
        font-size: 20px;
    }
}




















































/* owner story section css start form here  */









/* ── OUTER WRAPPER ── */
.owner-story-section {
    width: 100%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    padding: 60px 40px;
}

/* ── INNER  1410px centered ── */
.owner-story-inner {
    width: 100%;
    max-width: 1410px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* 
STORY ROW  — 1360x597
*/
.owner-story-row {
    width: 100%;
    min-height: 597px;
    display: flex;
    align-items: center;
    gap: 70px;
    padding: 60px 0;
    border-bottom: 1px solid rgba(26, 39, 68, 0.12);
}

.owner-story-row:last-of-type {
    border-bottom: none;
}

/* image-left rows: image left, content right */
.owner-story-row.img-left {
    flex-direction: row;
}

/* image-right rows: content left, image right */
.owner-story-row.img-right {
    flex-direction: row-reverse;
}

/* ── IMAGE SIDE  535x519 ── */
.owner-story-img-wrap {
    width: 535px;
    height: 519px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.owner-story-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* gradient overlay for play btn legibility */
.owner-story-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 20, 50, 0.45) 0%, rgba(10, 20, 50, 0.05) 50%);
    pointer-events: none;
}

/* ── PLAY BUTTON  81x81 ── */
.owner-story-play-btn {
    position: absolute;
    bottom: 28px;
    left: 28px;
    display: flex;
    align-items: center;
    background-color: transparent;
    gap: 12px;
    z-index: 2;
    cursor: pointer;
    text-decoration: none;
    border: 0px solid;
}

.owner-story-play-circle {
    width: 81px;
    height: 81px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s;
}

.owner-story-play-btn:hover .owner-story-play-circle {
    background: rgba(255, 255, 255, 0.30);
}

.owner-story-play-circle svg {
    width: 26px;
    height: 26px;
    margin-left: 4px;
}

/* 154x24 label */
.owner-story-play-label {
    width: 154px;
    height: 24px;
    font-size: 16px;
    font-weight: var(--fw-regular, 400);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* ── CONTENT SIDE  755px ── */
.owner-story-content {
    flex: 1;
    max-width: 755px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* logo  271.4x92 */
.owner-story-logo {
    width: 271.4px;
    height: 92px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.owner-story-logo-img {
    width: 271.4px;
    height: 92px;
    object-fit: contain;
    object-position: left center;
    display: block;
}

/* quote  755x145 */
.owner-story-quote {
    width: 100%;
    max-width: 755px;
    font-size: 24px;
    font-weight: var(--fw-regular, 400);
    line-height: 1.1;
    color: #0C2240;
}

/* author */
.owner-story-author {
    font-size: 14px;
    font-weight: var(--fw-regular, 400);
    color: #4a5568;
    letter-spacing: 0.01em;
}

/* divider below author */
.owner-story-divider {
    width: 100%;
    height: 1px;
    background: rgba(26, 39, 68, 0.15);
    margin-top: 20px;
    margin-bottom: 46px;
}

/* read story btn  194x40 */
.owner-story-read-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border: 1.5px solid #0C2240;
    border-radius: 999px;
    background: transparent;
    color: #0C2240;
    font-size: 11px;
    font-weight: var(--fw-regular, 400);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
    margin-top: 8px;
}

.owner-story-read-btn:hover {
    background: #0C2240;
    color: #fff;
}

/* 
PAGINATION  354x58
*/
.owner-story-pagination {
    width: 354px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 40px auto 0;
}

/* arrow + number buttons  58x58 */
.owner-story-pg-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1.5px solid rgba(26, 39, 68, 0.20);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    color: #0C2240;
    letter-spacing: 0.02em;
    transition: background 0.22s, border-color 0.22s, color 0.22s;
    flex-shrink: 0;
}

.owner-story-pg-btn:hover {
    background: #0C2240;
    border-color: #0C2240;
    color: #ffffff;
}

.owner-story-pg-btn.active {
    background: #0C2240;
    border-color: #0C2240;
    color: #ffffff;
}

.owner-story-pg-btn svg {
    width: 16px;
    height: 16px;
}

/* 
RESPONSIVE
*/

/* 1280px */
@media (max-width: 1280px) {
    .owner-story-section {
        padding: 60px 32px;
    }
    
    .owner-story-img-wrap {
        width: 460px;
        height: 445px;
    }
    
    .owner-story-row {
        gap: 48px;
    }
}

/* 1024px */
@media (max-width: 1024px) {
    .owner-story-section {
        padding: 48px 24px;
    }
    
    .owner-story-row {
        gap: 36px;
        min-height: auto;
    }
    
    .owner-story-img-wrap {
        width: 380px;
        height: 370px;
    }
    
    .owner-story-quote {
        font-size: 16px;
    }
    
    .owner-story-logo-name {
        font-size: 22px;
    }
}

/* 768px — stack vertically */
@media (max-width: 768px) {
    .owner-story-section {
        padding: 48px 20px;
    }
    
    .owner-story-row,
    .owner-story-row.img-left,
    .owner-story-row.img-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 48px 0;
    }
    
    .owner-story-img-wrap {
        width: 100%;
        height: 320px;
    }
    
    .owner-story-content {
        max-width: 100%;
    }
    
    .owner-story-logo {
        width: 220px;
        height: 72px;
    }
    
    .owner-story-logo-name {
        font-size: 20px;
    }
    
    .owner-story-quote {
        font-size: 15px;
    }
    
    .owner-story-pagination {
        width: 100%;
    }
}

/* ── VIDEO MODAL ── */
.owner-story-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.owner-story-modal-backdrop.open {
    display: flex;
}

.owner-story-modal-box {
    position: relative;
    width: 90vw;
    max-width: 960px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.owner-story-modal-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.owner-story-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
    line-height: 1;
}

.owner-story-modal-close:hover {
    background: rgba(255, 255, 255, 0.30);
}

/* ── PAGE VISIBILITY ── */
.owner-story-page {
    display: none;
    border-bottom: 0.8px solid #A9A9A9;
}

.owner-story-page.active {
    display: block;
}

.owner-story-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.owner-story-modal-backdrop.open {
    display: flex;
}

.owner-story-modal-box {
    position: relative;
    width: 90vw;
    max-width: 960px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.owner-story-modal-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.owner-story-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
    line-height: 1;
}

.owner-story-modal-close:hover {
    background: rgba(255, 255, 255, 0.30);
}

/* ── PAGE TRANSITIONS ── */
.owner-story-page {
    display: none;
}

.owner-story-page.active {
    display: block;
}








/* all yatch share seciton css start from here  */







/* ---- hide slide source data ---- */
.ays-slides-data {
    display: none;
}

/* ================================================================
SECTION
================================================================ */
.ays-section {
    position: relative;
    width: 100%;
    height: 741px;
    overflow: hidden;
    background: #0a1612;
    color: #fff;
}

/* Two background layers — crossfade, nothing ever slides */
.ays-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: opacity 0.7s ease;
}

.ays-bg--a {
    opacity: 1;
}

.ays-bg--b {
    opacity: 0;
}

.ays-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 18, 14, 0.52);
    z-index: 2;
}

/* ================================================================
INNER WRAPPER
Desktop spec: top 184 · left 40 · right 836 (= 564px wide) · bottom 44
================================================================ */
.ays-inner {
    position: relative;
    z-index: 3;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding: 184px 836px 60px 40px;
    /* bottom 60 = margin-bottom breathing room */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Content fade: both top and bottom fade together */
.ays-inner.is-fading .ays-top,
.ays-inner.is-fading .ays-bottom {
    opacity: 0;
}

/* ---- TOP: title + description ---- */
.ays-top {
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: opacity 0.22s ease;
}

/* Title: 564 × 62 */
.ays-title {
    font-size: 52px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 100%;
    max-width: 564px;
}

.ays-desc {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    max-width: 767px;
    color: rgba(255, 255, 255, 0.82);
}

/* ---- BOTTOM: tags + yacht name + actions — 499 × 180 ---- */
.ays-bottom {
    width: 499px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    transition: opacity 0.22s ease;
}

/* Tags row — ~84 × 20 pills with WHITE background */
.ays-tags {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ays-tag {
    padding: 4px 12px;
    border-radius: 10px;
    background: #ffffff;
    color: #000;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Yacht name — 499 × 76 (~2 lines at 36px) */
.ays-yacht-name {
    font-size: 32px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    max-width: 499px;
}

/* Actions row */
.ays-actions {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: 6px;
}

/* VIEW DETAILS — 194 × 40 */
.ays-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.ays-view-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Arrow buttons — always 81 × 81 */
.ays-arrow-btn {
background-color: transparent;
border:0;
cursor: pointer;
line-height: 0;
}



/* ================================================================
DESKTOP RIGHT SIDEBAR — clickable vertical dashes
================================================================ */
.ays-sidebar {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    height: 189px;
}

.ays-sidebar-dash {
    width: 3px;
    flex: 1;
    background: rgba(255, 255, 255, 0.32);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.4s ease;
}

.ays-sidebar-dash.is-active {
    background: #fff;
}

.ays-sidebar-dash:hover {
    background: rgba(255, 255, 255, 0.65);
}

/* ================================================================
YACHT FINDER — 112 × 112, dotted ring, #FFFFFF66 inner (40% white)
================================================================ */
.ays-yacht-finder-wrap {
    position: absolute;
    bottom: 36px;
    right: 36px;
    z-index: 10;
    width: 112px;
    height: 112px;
}

.ays-yacht-finder {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    background-image: url('data:image/svg+xml,<svg width="112" height="112" viewBox="0 0 112 112" fill="none" xmlns="http://www.w3.org/2000/svg"><foreignObject x="-74.6391" y="-74.6391" width="261.278" height="261.278"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(37.32px);clip-path:url(%23bgblur_0_48409_1802_clip_path);height:100%;width:100%"></div></foreignObject><circle opacity="0.3" data-figma-bg-blur-radius="74.6391" cx="56" cy="56" r="55.5" stroke="white" stroke-linecap="round" stroke-dasharray="4 4"/><defs><clipPath id="bgblur_0_48409_1802_clip_path" transform="translate(74.6391 74.6391)"><circle cx="56" cy="56" r="55.5"/></clipPath></defs></svg>');
        background-size: 112px;
    border: 0;
}

.ays-yacht-finder:hover {
    border-color: rgba(255, 255, 255, 0.9);
}

.ays-yacht-finder-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #FFFFFF66;
    /* 40% white */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    backdrop-filter: blur(74.63912963867188px);

}

.ays-yacht-finder-inner span {
    font-size: 16px;
    letter-spacing: 0;
    text-transform: capitalize;
    color: #fff;
    line-height: 1.5;
}

/* ================================================================
LAPTOP 1025px – 1439px
Fixed intermediate sizes so this range doesn't inherit the full
1440px desktop spec (836px right padding / 52px title) unshrunk.
================================================================ */
@media (min-width: 1025px) and (max-width: 1439px) {
    .ays-inner {
        padding: 150px 520px 60px 40px;
    }
    
    .ays-title {
        font-size: 44px;
        max-width: 460px;
    }
    
    .ays-desc {
        max-width: 420px;
    }
    
    .ays-bottom {
        width: 420px;
    }
    
    .ays-yacht-name {
        font-size: 32px;
        max-width: 420px;
    }
}

/* ================================================================
TABLET ≤ 1024px
================================================================ */
@media (max-width: 1024px) {
    .ays-section {
        height: 680px;
    }
    
    .ays-inner {
        padding: 120px 480px 60px 40px;
    }
    
    .ays-title {
        font-size: 40px;
        max-width: 460px;
    }
    
    .ays-desc {
        max-width: 420px;
    }
    
    .ays-bottom {
        width: 420px;
    }
    
    .ays-yacht-name {
        font-size: 28px;
    }
    
    /* arrows stay 81×81 — no override */
    
    .ays-sidebar {
        right: 16px;
    }
    
    .ays-yacht-finder-wrap {
        right: 20px;
        bottom: 24px;
    }
}

/* ================================================================
MOBILE ≤ 640px
top padding 100px · left/right padding 24px
Content stacks top-down inside .ays-inner (justify-content: flex-start)

SPACING MAP (top → bottom), matching the design exactly:
.ays-top gap             → 16px   (title → description)
.ays-bottom margin-top   → 28px   (description → tags row)
.ays-bottom gap          → 12px   (tags → yacht name → actions row)
.ays-actions margin-top  → 16px   (yacht name → View Details button)
Everything below the button (Yacht Finder + dashes) is absolutely
positioned and pinned to the bottom of the section — it is NOT part
of this flex flow, so its distance from the button is whatever is
left over, not a controlled gap.
================================================================ */
@media (max-width: 640px) {
    .ays-section {
        min-height: 875px;
    }
    
    /* Hide desktop chrome */
    .ays-sidebar {
        display: none;
    }
    
    .ays-yacht-finder-wrap {
        display: none;
    }
    
    .ays-arrow-btn {
        display: none;
    }
    
    .ays-inner {
        padding: 100px 24px 155px 24px;
        justify-content: flex-start;
        gap: 0;
    }
    
    /* title → description */
    .ays-top {
        gap: 16px;
    }
    
    /* description → tags/yacht-name/button block */
    .ays-bottom {
        width: 100%;
        max-width: 380px;
        margin-top: 28px;
        gap: 22px;
        /* tags → yacht name → actions row */
    }
    
    /* yacht name → View Details button — needs more room than the
    6px desktop value, so override it here */
    .ays-actions {
        margin-top: 16px;
    }
    
    .ays-title {
        font-size: 42px;
        max-width: 380px;
        letter-spacing: 0.01em;
        line-height: 1.15;
    }
    
    .ays-desc {
        font-size: 16px;
        line-height: 1.65;
    }
    
    .ays-yacht-name {
        font-size: 24px;
        line-height: 1.1;
    }
    
    .ays-view-btn {
        width: 194px;
    }
    
    /* Mobile progress bars — bottom: 24px, left: 24px */
    .ays-mobile-dashes {
        position: absolute;
        bottom: 60px;
        left: 24px;
        z-index: 10;
        display: flex;
        gap: 8px;
        align-items: center;
    }
    
    
    .ays-mobile-dash {
        width: 56px;
        height: 3px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.32);
        cursor: pointer;
        transition: background 0.4s ease;
    }
    
    .ays-mobile-dash.is-active {
        background: #fff;
    }
    
    .ays-mobile-dash:hover {
        background: rgba(255, 255, 255, 0.65);
    }
    
    /* Mobile Yacht Finder — 112×112, directly above the dashes
    bottom = 24(bar gap) + 3(bar h) + 16(gap between) = 43px */
    .ays-mobile-finder-wrap {
        position: absolute;
        bottom: 95px;
        left: 24px;
        z-index: 10;
        width: 112px;
        height: 112px;
    }
    
    .ays-mobile-finder {
        width: 112px;
        height: 112px;
        border-radius: 50%;
        border: 1.5px dashed rgba(255, 255, 255, 0.55);
        background: transparent;
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    .all-share-hero-image-wrap{
            padding-right: 40px;
    }
}

img {
    display: block;
    max-width: 100%;
}



.all-share-bgmap {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top right;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/*  HERO / INTRO SECTION  */
.all-share-hero-section {
    font-weight: var(--fw-regular);
    position: relative;
    padding: 64px 0 56px;
    overflow: hidden;
}

.all-share-hero-grid {
    display: grid;
    grid-template-columns: 690px 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.all-share-hero-image-wrap {
    width: 100%;
    max-width: 690px;
    aspect-ratio: 690/476;
    overflow: hidden;
    img{
            border-radius: 0 12px 12px 0;
    }
}

.all-share-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.all-share-hero-content {
    width: 100%;
}

.all-share-eyebrow {
    width: 100%;
    height: 14px;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: #2A3E57;
    text-transform: uppercase;
    margin: 0 0 14px 0;
    line-height: 14px;
}

.all-share-rule {
    width: 100%;
    height: 1px;
    background: #A9A9A9;
    border: none;
    margin: 0 0 32px 0;
}

.all-share-title {
    width: 100%;
    min-height: 96px;
    font-weight: var(--fw-regular);
    font-size: 40px;
    line-height: 1;
    color: #0C2240;
    margin: 0 0 24px 0;
    text-transform: uppercase;
}

.all-share-desc {
    width: 100%;
    min-height: 140px;
    font-size: 16px;
    line-height: 24px;
    color: #666666;
    margin: 0 0 28px 0;
}

.all-share-desc p {
    margin: 0 0 16px 0;
}

.all-share-desc p:last-child {
    margin-bottom: 0;
}

.all-share-cta-btn {
    width: 244px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0C2240;
    border-radius: 30px;
    background: transparent;
    color: #0C2240;
    
    font-size: 12px;
    
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.all-share-cta-btn:hover {
    background: #0C2240;
    color: #fff;
}

/*  OUR YACHTS / FILTER SECTION  */
.all-share-yachts-section {
    position: relative;
    padding: 48px 0 0;
    z-index: 1;
}

.all-share-section-title {
    
    font-weight: var(--fw-regular);
    font-size: 40px;
    line-height: 100%;
    color: #0C2240;
    margin: 0 0 60px 0;
    text-transform: uppercase;
}

.all-share-filter-block {
    margin-bottom: 64px;
}

.all-share-location-label {
    font-size: 25px;
    letter-spacing: -0.1px;
    text-transform: uppercase;
    color: #0C2240;
    margin: 0 0 20px 0;
    line-height: 25px;
}

.all-share-category-row {
    width: 100%;
    max-width: 917px;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.all-share-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    
    font-size: 16px;
    color: #2A3E57;
    cursor: pointer;
    white-space: nowrap;
    line-height: 24px;
}

.all-share-radio-option input[type="radio"] {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.4px solid #9AA3AD;
    margin: 0;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.all-share-radio-option input[type="radio"]:checked {
    border-color: #0C2240;
}

.all-share-radio-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0C2240;
}

/*  CARDS GRID  */
.all-share-cards-grid {
    width: 100%;
    max-width: 1352px;
    display: grid;
    grid-template-columns: repeat(2, 660px);
    gap: 32px 32px;
    justify-content: start;
    position: relative;
    z-index: 1;
    padding-bottom: 64px;
}

.all-share-card {
    position: relative;
    width: 100%;
    max-width: 660px;
    aspect-ratio: 660/584;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: #0C2240;
}

.all-share-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.all-share-card-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(180deg,
    rgba(6, 16, 28, 0.35) 0%,
    rgba(6, 16, 28, 0.15) 35%,
    rgba(4, 12, 22, 0.55) 70%,
    rgba(3, 9, 18, 0.82) 100%);
}

.all-share-card-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 32px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.all-share-card-top {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.all-share-badge-row {
    width: 100%;
    max-width: 596px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.all-share-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    color: #000000;
    font-size: 10px;
    padding:5px 8px;
    letter-spacing: 0;
    white-space: nowrap;    
}

/* .all-share-badge--wide {
    width: auto;
    min-width: 76px;
    padding: 0 10px;
} */

.all-share-card-title {
    width: 100%;
    max-width: 566px;
    min-height: auto;
    font-weight: var(--fw-regular);
    font-size: 32px;
    line-height: 1.25;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
}

.all-share-card-rule {
    width: 100%;
    max-width: 596px;
    height: 1px;
    background: rgba(255, 255, 255, 1);
    border: none;
    margin: 0 0 0 0;
}

.all-share-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.all-share-card-price {
    width: 100%;
    max-width: 596px;
    min-height: 32px;
    font-size: 12px;
    letter-spacing: 20%;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    line-height: 32px;
}

.all-share-card-action-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.all-share-view-btn {
    width: 194px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    
    font-size: 12px;
    
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s ease;
    flex-shrink: 0;
}

.all-share-view-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

.all-share-card-logo {
    width: 65px;
    height: 91px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.92;
}

.all-share-existed-section {
    position: relative;
    padding: 80px 0 80px;
    z-index: 1;
}

.all-share-existed-title {
    width: 100%;
    max-width: 1352px;
    font-size: 20px;
    text-transform: uppercase;
    color: #0C2240;
    margin: 0 0 26px 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.all-share-existed-rule {
    width: 100%;
    height: 1px;
    background: #2E2D2C;
    border: none;
    margin: 0 0 60px 0;
}

.all-share-existed-grid {
    width: 100%;
    max-width: 1352px;
    display: grid;
    grid-template-columns: repeat(2, 660px);
    gap: 32px 32px;
    justify-content: start;
}

/*  RESPONSIVE  */
@media (max-width: 1440px) {
    
    .all-share-cards-grid,
    .all-share-existed-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .all-share-card {
        max-width: none;
    }
}

@media (max-width: 1100px) {
    .all-share-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .all-share-hero-image-wrap {
        max-width: 100%;
    }
    
    .all-share-hero-content {
        max-width: 100%;
        padding:0 24px;
    }
    
    .all-share-eyebrow,
    .all-share-rule,
    .all-share-title,
    .all-share-desc {
        max-width: 100%;
    }
}

@media (max-width: 860px) {
    
    .all-share-cards-grid,
    .all-share-existed-grid {
        grid-template-columns: 1fr;
    }
    
    .all-share-card {
        aspect-ratio: 660/584;
    }
}

@media (max-width: 640px) {
    .all-share-hero-content{
        padding-left:24px;
        padding-right:24px;
    }
    .all-share-hero-section {
        padding: 60px 0 30px;
    }
    
    .all-share-title {
        font-size: 40px;
        min-height: auto;
    }
    
    .all-share-desc {
        font-size: 14px;
        min-height: auto;
    }
    
    .all-share-cta-btn {
        width: 100%;
        max-width: 244px;
    }
    
    .all-share-section-title {
        font-size: 26px;
        width: auto;
        height: auto;
    }
    
    .all-share-category-row {
        gap: 16px 20px;
        max-width: 100%;
        height: auto;
    }
    
    .all-share-card-content {
        padding: 24px;
    }
    
    .all-share-card-title {
        font-size: 19px;
        max-width: 100%;
    }
    
    .all-share-card-action-row {
        flex-wrap: nowrap;
    }
    
    .all-share-view-btn {
        width: 150px;
        font-size: 10px;
    }
    
    .all-share-card-logo {
        width: 48px;
        height: 67px;
    }
    
    .all-share-existed-title {
        font-size: 12px;
    }
    .all-share-eyebrow{
        margin-bottom:30px;
    }
    .all-share-existed-section{
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media (max-width: 420px) {
    .all-share-view-btn {
        width: 128px;
        height: 36px;
        font-size: 9px;
    }
    
    .all-share-card-logo {
        width: 40px;
        height: 56px;
    }
    
    .all-share-badge {
        font-size: 8px;
        height: 18px;
    }
}











































/* only yatch share section csss start form here  */
/* =
1. PROFILE SECTION 
*/
.yatch-shares-profile {
    width: 100%;
    border-bottom: 1px solid #A5A5A5;
padding: 0 24px;
}

.contactInfoBox{
        display: flex;
        max-width:1410px;
        margin: 0 auto;
         .yatch-shares-profile__col {
    flex: 0 0 50%;
}
}
.yatch-shares-profile__col--left {
    border-right: 1px solid #A5A5A5;
}

.yatch-shares-profile__inner {
    display: flex;
    align-items: center;
    gap: 14px;
        padding: 40px 0 40px;
}
.yatch-shares-profile__col--right{
    .yatch-shares-profile__inner{
                padding-left: 40px;
    }
}
.yatch-shares-profile__avatar {
    width: 126px;
    height: 126px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.yatch-shares-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yatch-shares-profile__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.yatch-shares-profile__eyebrow {
    font-size: 12px;
    font-weight: var(--fw-regular, 500);
    letter-spacing: 20%;
    color: #B48F62;
    text-transform: uppercase;
}

.yatch-shares-profile__name {
    font-size: 24px;
    font-weight: var(--fw-regular, 500);
    letter-spacing: -0.1px;
    color: #16242C;
}

.yatch-shares-profile__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #3C4A52;
}

.yatch-shares-profile__row a {
    color: inherit;
    text-decoration: none;
    color:#000000;
    font-size: 15px;
    &:hover{
        color: #B48F62;
    }
}
.flexContact{
    display: flex;
    .yatch-shares-profile__row{
        padding-right:24px;
        border-right: 1px #A9A9A9 solid;
            padding-left: 24px;
            white-space: nowrap;
        &:nth-child(1){
            padding-left: 0;
        }
        &:last-child{
            border-right: 0;
        }
    }
}

.yatch-shares-profile__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* =
2. BRAND NEW RELEASE SECTION  
*/
.yatch-shares-newrelease {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: center;
    padding: 80px 24px 80px;
}

.yatch-shares-newrelease__media {
    position: relative;
    flex-shrink: 0;
    max-width: 47%;
}


.yatch-shares-newrelease__swiper img {
    width: 100%;
    height: 475px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

/* Dots sit ON TOP of the image, bottom-left corner.
Positioned relative to .yatch-shares-newrelease__media (see position:relative above) */
.yatch-shares-newrelease__dots {
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

.yatch-shares-newrelease__dot {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 59px;
    height: 3px;
    border-radius: 2px;
    background-color: #ffffff;
    opacity: 0.45;
    border: 0;
    outline: none;
    margin: 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    transition: width 0.3s ease, opacity 0.3s ease;
}

.yatch-shares-newrelease__dot.is-active {
    opacity: 1;
}

.yatch-shares-newrelease__info {
    flex: 1;

}

.yatch-shares-newrelease__title,.yatch-shares-newrelease__info h2 {
    max-width: 100%;
    font-size: 34px;
    font-weight: var(--fw-regular, 500);
    line-height: 1.05;
    color: #16242C;
    margin-bottom: 18px;
}

.yatch-shares-newrelease__facts, .yatch-shares-newrelease__info ul {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 0;
}

.yatch-shares-newrelease__facts li,.yatch-shares-newrelease__info ul li {
    font-size: 14px;
    font-weight: var(--fw-regular, 500);
    color: #16242C;
    line-height: 1.6;
    margin: 0;
}


.yatch-shares-newrelease__desc, .yatch-shares-newrelease__info p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin-bottom: 24px;
}
.yatch-shares-newrelease__facts b,.yatch-shares-newrelease__info b{
 color: #0C2240;   
}
.yatch-shares-newrelease__desc p,.yatch-shares-newrelease__info p {
    margin-bottom: 18px;
}
    .desktopHidden{
        display: none;
    }
    .mobileHidden{
        display: block;
    }
.videoBox{
    position: relative;
    img{
        height: 580px;
        width: 100%;
        object-fit: cover;
    }
    svg{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% -50%);
    }
}
/* =
RESPONSIVE — Mobile
*/
@media (max-width: 768px) {
    
    .yatch-shares-profile {
        flex-direction: column;
    }
    
    .yatch-shares-profile__col,
    .yatch-shares-profile__col--left {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #A5A5A5;
        padding: 40px 24px 28px;
    }
    
    .yatch-shares-profile__inner {
        width: 100%;
        height: auto;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .yatch-shares-profile__avatar {
        width: 56px;
        height: 56px;
    }
    
    .yatch-shares-profile__content {
               flex: 0 0 calc(100% - 72px);
        height: auto;
    }
    
    .yatch-shares-profile__name {
        font-size: 16px;
    }
    
    .yatch-shares-newrelease {
        flex-direction: column;
        padding: 60px 20px 60px;
        gap: 24px;
    }
    
    .yatch-shares-newrelease__media {
        width: 100%;
        max-width: 100%;
    }
    
    .yatch-shares-newrelease__swiper,
    .yatch-shares-newrelease__swiper img {
        height: 320px;
    }
    
    .yatch-shares-newrelease__dots {
        display: flex;
        bottom: 24px;
        left: 24px;
    }
    
    .yatch-shares-newrelease__title {
        width: 100%;
        height: auto;
        font-size: 24px;
        margin-bottom: 12px;
    }
    
    .yatch-shares-newrelease__desc {
        width: 100%;
        min-height: auto;
    }
    
    .yatch-shares-video {
        height: 320px;
    }
    
    .yatch-shares-video__play {
        width: 56px;
        height: 56px;
    }
    
    .yatch-shares-layout__tabs {
        flex-direction: column;
        height: auto;
    }
    
    .yatch-shares-layout__tab {
        width: 100%;
        height: auto;
        min-height: 110px;
        border-right: none;
        border-bottom: 1px solid #ffffff;
        padding: 18px 20px;
    }
    
    .yatch-shares-layout__tab-eyebrow {
        width: 100%;
        height: auto;
        font-size: 12px;
        margin-bottom: 10px;
    }
    
    .yatch-shares-layout__tab-media {
        display: none;
    }
    
    .yatch-shares-layout__tab.is-active .yatch-shares-layout__tab-media {
        display: flex;
        width: 100%;
        margin-top: 14px;
    }
    
    .yatch-shares-layout__tab-label {
        width: auto;
        text-align: left;
    }
    
    .yatch-shares-layout__tab-number {
        font-size: 28px;
    }
    
    .yatch-shares-layout__viewer {
        height: 260px;
    }
    
    .yatch-shares-layout__viewer-swiper .swiper-slide img {
        height: 260px;
    }
    
    .yatch-shares-layout__viewer-nav {
        width: 38px;
        height: 38px;
    }
    
    .yatch-shares-layout__viewer-nav--prev {
        left: 10px;
    }
    
    .yatch-shares-layout__viewer-nav--next {
        right: 10px;
    }
    .desktopHidden{
        display: block;
    }
    .mobileHidden{
        display: none;
    }
    .videoBox{
    img{
        height: 428px;
        object-fit: cover;
    }
}
}





/* location share section csss start from here  */



*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    font-family: var(--font-main, 'Helvetica Neue', Arial, sans-serif);
    color: #0C2240;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
}

/* 
SECTION 1 — INFO & BENEFITS + GATEWAY
*/
.location-inners-info {
    width: 100%;
    padding: 48px 0 0;
    background: #fff;
}

.location-inners-info-inner {
    max-width: 1410px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-left:24px;
    padding-right: 24px;
}

/* eyebrow 249x14 */
.location-inners-eyebrow {
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    text-transform: uppercase;
    color: rgba(12, 34, 64, 1);
}

/* divider 1360x1 */
.location-inners-divider {
    width: 100%;
    height: 1px;
    background: rgba(169, 169, 169, 1);
    margin: 0;
}

/* title 845x96 */
.location-inners-main-title {
    font-size: 40px;
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    color: rgba(12, 34, 64, 1);
    line-height: 1.1;
    max-width: 845px;
}

/* ── GATEWAY SWIPER 1360x617 ── */
.location-inners-gateway {
    width: 100%;
    padding: 40px 0 72px;
    background: #fff;
}

.location-inners-gateway-inner {
    max-width: 1410px;
    margin: 0 auto;
    position: relative;
    padding-left: 24px;
    padding-right: 24px;
}

.location-inners-gateway-swiper {
    width: 100%;
    border-radius: 0;
    height: 100%;
    overflow: hidden;
}

/* each slide = two columns 680+680 */
.location-inners-gateway-slide {
    width: 100%;
    height: 617px;
    display: flex;
}

/* LEFT IMAGE 680x617 */
.location-inners-gw-left {
    height: 617px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    flex: 0 0 47%;
}

.location-inners-gw-left>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .location-inners-gw-left-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 50, 0.28);
    pointer-events: none;
} */

/* contact circle 112x112 centered on image */
.location-inners-contact-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    z-index: 3;
    transition: background 0.25s, transform 0.25s;
    background-color: transparent;
}

.location-inners-contact-circle:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.location-inners-contact-circle span {
    font-size: 11px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1.25;
    text-align: center;
}

/* RIGHT CONTENT 680x617 — dark navy bg with img */
.location-inners-gw-right {
    flex: 1;
    height: 617px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.location-inners-gw-right>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.location-inners-gw-right-overlay {
    position: absolute;
    inset: 0;
    background: rgba(12, 34, 64, 1);
    z-index: 1;
}

/* content 596x492 */
.location-inners-gw-content {
    position: relative;
    z-index: 2;
    padding: 52px 52px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* divider dashed */
.location-inners-gw-dashed {
    border: none;
    width:100%;
    border-top: 1.5px dashed rgba(186, 186, 186, 1);
}

/* title 596x192 */
.location-inners-gw-title {
    font-size: 32px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.15;
    max-width: 596px;
}

/* desc 596x236 */
.location-inners-gw-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.72);
    max-width: 596px;
}

.location-inners-gw-desc p+p {
    margin-top: 12px;
}

/* swiper pagination dots */
.location-inners-gateway-dots {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 23px;
}

.location-inners-gw-dot {
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: rgba(61, 61, 61, 1);
    opacity: 0.5;
    cursor: pointer;
    transition: background 0.3s, width 0.3s;
}

.location-inners-gw-dot.active {
    opacity: 1;
}

/* 
SECTION 2 — YACHT CARDS GRID
*/
.location-inners-yachts {
    width: 100%;
    padding: 64px 40px 80px;
    background: #f5f5f5;
}

.location-inners-yachts-inner {
    max-width: 1410px;
    margin: 0 auto;
}

.location-inners-yachts-title {
    font-size: 22px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0C2240;
    margin-bottom: 32px;
}

.location-inners-yachts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* card */
.location-inners-yacht-card {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 320px;
    cursor: pointer;
}

.location-inners-yacht-card>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.location-inners-yacht-card:hover>img {
    transform: scale(1.04);
}

.location-inners-yacht-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 20, 50, 0.80) 0%, rgba(10, 20, 50, 0.25) 50%, rgba(10, 20, 50, 0.40) 100%);
    pointer-events: none;
}

.location-inners-yacht-card-body {
    position: absolute;
    inset: 0;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
}

.location-inners-yacht-card-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.location-inners-yacht-pills {
    display: flex;
    gap: 6px;
}

.location-inners-yacht-pill {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.10);
    font-size: 9px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #ffffff;
}

.location-inners-yacht-card-title {
    font-size: 17px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.2;
}

.location-inners-yacht-card-price {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    margin-top: 4px;
}

.location-inners-yacht-card-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    margin: 6px 0;
}

.location-inners-yacht-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.location-inners-yacht-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s;
}

.location-inners-yacht-view-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* logo watermark on card */
.location-inners-yacht-logo {
    width: 44px;
    height: 44px;
    opacity: 0.55;
    object-fit: contain;
    flex-shrink: 0;
}

/* 
SECTION 3 — CORAL SEA MARINA SLIDER
.location-inners-imageslider 1440x646
*/
.location-inners-imageslider {
    width: 100%;
    height: 646px;
    position: relative;
    overflow: hidden;
    background: #0C2240;
}

/* slides */
/* .location-inners-marina-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
} */

/* .location-inners-marina-slide.active {
    opacity: 1;
} */

.location-inners-marina-slide>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-inners-marina-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10, 20, 50, 0.75) 0%, rgba(10, 20, 50, 0.25) 55%, rgba(10, 20, 50, 0.05) 100%);
    pointer-events: none;
    z-index: 1;
}

/* content overlay */
.location-inners-marina-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding-top: 52px ;
    padding-bottom: 52px ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

/* pill 215x40 */
.location-inners-marina-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width:204px;
    max-width: 204px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(4px);
    font-size: 11px;
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    text-transform: uppercase;
    color: rgba(24, 29, 39, 1);
    margin-bottom:17px;
}
.contentContainerSearch{
    gap:16px;
    display: flex;
    flex-direction: column;
}
/* title 443x48 */
.location-inners-marina-title {
    font-size: 36px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.1;
    max-width: 443px;
}

/* desc 659x140 */
.location-inners-marina-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: rgba(255, 255, 255, 1);
    max-width: 659px;
}

.location-inners-marina-desc p+p {
    margin-top: 10px;
}

/* arrows row */
.location-inners-marina-arrows {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* each arrow 58x58 */
.location-inners-marina-arrow {

    border-radius: 50%;
    border: 0px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background 0.25s, border-color 0.25s;
    flex-shrink: 0;
}

/* .location-inners-marina-arrow:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.8);
}

.location-inners-marina-arrow svg {
    width: 16px;
    height: 16px;
} */

/* 
SECTION 4 — CONTACT  1440x866
*/
.location-inners-contact {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 0;
}

.location-inners-contact-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.location-inners-contact-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1;
}

.location-inners-contact-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1410px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-left: 24px;
    padding-right: 24px;
}

/* title 885x48 */
.location-inners-contact-title {
    font-size: 36px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.1;
    max-width: 885px;
}

/* two col row */
.location-inners-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* LEFT 860x600 */
.location-inners-contact-left {
    flex: 0 0 63%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px;
    background-color: #fff;
    border-radius: 6px;

    *{
        color: #252B37;
    }
}

/* form subtitle 551x38 */
.location-inners-contact-subtitle {
    font-size: 32px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    color: #252B37;
    line-height: 1.2;
    padding-bottom: 10px;
}

/* enquiry type btns row 553x44 */
.location-inners-enquiry-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 44px;
    align-items: center;
}

.location-inners-enquiry-btn {
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid 000000;
    background: transparent;
    color: 000000;
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.22s, color 0.22s, border-color 0.22s;
    min-width: 209px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px #0E0E0E solid;
}

.location-inners-enquiry-btn.active,
.location-inners-enquiry-btn:hover {
    background: #000000;
    border-color: #000000;
    color: #fff;
}

/* form 780x316 */
.location-inners-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* name+email row 780x64 — each 378x64 */
.location-inners-form-row {
    display: flex;
    gap: 24px;
}

.location-inners-form-field {
    flex: 1;
    display: flex;
    align-items: center;
}

.location-inners-form-field input {
    width: 100%;
    background: transparent;
    border: 1px #949494 solid;
    outline: none;
    font-size: 12px;
    letter-spacing: 20%;
    text-transform: uppercase;
    color: #0E0E0E;
        height: 64px;
            border-radius: 6px;
    padding: 0 20px;
        background: rgba(255, 255, 255, 0.07);



}

.location-inners-form-field input::placeholder {
    color: #0E0E0E;
}

/* message 780x124 */
.location-inners-form-message {

}

.location-inners-form-message textarea {
        width: 100%;
    height: 124px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px #949494 solid;
    border-radius: 6px;
    padding: 16px 20px;
    outline: none;
    resize: none;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0E0E0E;
        letter-spacing: 20%;

}

.location-inners-form-message textarea::placeholder {
    color: #0E0E0E;
}

/* agree row 317x26 */
.location-inners-agree {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 26px;
}

.location-inners-agree input[type="checkbox"] {
    width: 26px;
    height: 26px;
    accent-color: #c9a96e;
    cursor: pointer;
    flex-shrink: 0;
}

.location-inners-agree label {
    font-size: 14px;
    color: rgba(12, 12, 12, 0.8);
    cursor: pointer;
    line-height: 1.4;
}

.location-inners-agree label a {
    color: rgba(12, 12, 12, 0.8);
    text-decoration: underline;
}
.contactButtonsLink{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* submit 194x40 */
.location-inners-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: #BE976C;
    color: #ffffff;
    font-size: 11px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s;
}

.location-inners-submit-btn:hover {
    background: #b8966a;
}

/* RIGHT profiles 420x600 */
.location-inners-contact-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 600px;
    justify-content: flex-start;
}

/* profile card 420x299 */
.location-inners-profile-card {
    position: relative;
    width: 100%;
    border-radius: 12px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.10);
    overflow: hidden;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* bg logo watermark img 230x322 */
.location-inners-profile-card-logo {
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 230px;
    height: 322px;
    object-fit: contain;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

/* avatar 116x116 */
.location-inners-profile-avatar {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.18);
    position: relative;
    z-index: 1;
}

/* profile info 190x92 */
.location-inners-profile-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.location-inners-profile-role {
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    text-transform: uppercase;
    color: rgba(180, 143, 98, 1);
}

.location-inners-profile-name {
    font-size: 25px;
    font-weight: var(--fw-regular);
    letter-spacing: -0.1px;
    text-transform: uppercase;
    color: rgba(37, 43, 55, 1);
}

.location-inners-profile-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
    margin-top: 2px;
}

.location-inners-profile-contact svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

.location-inners-profile-contact:hover {
    color: rgba(190, 151, 108, 1);
}

/* 
RESPONSIVE
*/
@media (max-width: 1280px) {
    

    
    .location-inners-gw-left {
        width: 540px;
    }
    
    
    .location-inners-form {
        width: 100%;
        gap:24px
    }
    
    .location-inners-main-title {
        font-size: 42px;
    }
}

@media (max-width: 1024px) {
    

    
    .location-inners-gateway-slide {
        height: auto;
        flex-direction: column;
    }
    
    .location-inners-gw-left {
        width: 100%;
        height: 380px;
        flex: unset
    }
    
    .location-inners-gw-right {
        height: auto;
        min-height: 320px;
    }
    
    .location-inners-gw-content {
        padding: 36px 36px;
    }
    

    
    .location-inners-main-title {
        font-size: 34px;
    }
    
    .location-inners-contact-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .location-inners-contact-left {
        width: 100%;
        padding: 32px 24px;
    }
    
    .location-inners-form {
        width: 100%;
    }
    
    .location-inners-contact-right {
        width: 100%;
        min-height: auto;
        flex-direction: row;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .location-inners-profile-card {
        flex: 1;
    }
    
    .location-inners-imageslider {
        height: 520px;
    }
    
    .location-inners-marina-content {
        padding: 36px 36px;
    }
    
    
    .location-inners-contact-title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    

    
    .location-inners-main-title {
        font-size: 26px;
    }
    
    
    
    .location-inners-gw-desc {
        font-size: 13px;
    }
    
    .location-inners-gw-content {
        padding: 40px 24px;
    }
    
    .location-inners-yachts-grid {
        grid-template-columns: 1fr;
    }
    
    .location-inners-yacht-card {
        height: 280px;
    }
    
    .location-inners-imageslider {
        height: 480px;
    }
    
    .location-inners-marina-content {
        padding: 28px 24px;
        max-width: 100%;
    }
    
    
    .location-inners-marina-desc {
        font-size: 13px;
    }
    
    .location-inners-contact-row {
        gap: 20px;
    }
    
    .location-inners-form-row {
        flex-direction: column;
        gap: 24px;
    }
    .contactButtonsLink{
                flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 24px;
    }
    .location-inners-contact-right {
        flex-direction: column;
    }
    
    .location-inners-profile-card {
        min-width: auto;
        padding: 24px;
    }
    
    .location-inners-contact-title {
        font-size: 22px;
    }
    
    .location-inners-contact-subtitle {
        font-size: 20px;
    }
    
    .location-inners-enquiry-row {
        gap: 8px;
    }
    
    .location-inners-enquiry-btn {
        min-width: auto;
        padding: 0 16px;
    }
    
}

@media (max-width: 480px) {
    .location-inners-main-title {
        font-size: 22px;
    }
    
    
    
    .location-inners-imageslider {
        height: 400px;
    }
    
    .location-inners-marina-content {
        padding: 20px 20px;
    }
    
    .location-inners-contact-title {
        font-size: 20px;
    }
    

}





/* about us section csss start form here  */




/* 
ABOUT-US — HERO BANNER

*/

.about-us-hero {
    position: relative;
    width: 100%;
    height: 862px;
    overflow: hidden;
    background: #0a1424;
    
}

.about-us-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    
}


.about-us-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 34, 35, 0) 0%, #2B394D 100%);
    z-index: 1;
    pointer-events: none;
}

.about-us-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
    rgba(4, 10, 22, 0.82) 0%,
    rgba(4, 10, 22, 0.35) 28%,
    rgba(4, 10, 22, 0) 55%);
    z-index: 2;
    pointer-events: none;
}

.about-us-hero-content {
    position: absolute;
    top: 636px;
    right: 148px;
    bottom: 92px;
    left: 40px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
}

.about-us-hero-eyebrow {
    display: none;
    font-weight: var(--fw-regular);
    font-size: 12px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: #ffffff;
}

.about-us-hero-title {
    font-weight: var(--fw-regular);
    font-size: 56px;
    line-height: 100%;
    text-transform: uppercase;
    color: #ffffff;
    max-width: 1252px;
}

/* 
RESPONSIVE     */

@media (max-width: 1280px) {
    .about-us-hero {
        height: 760px;
    }
    
    .about-us-hero-content {
        top: 560px;
        right: 100px;
        bottom: 80px;
        left: 32px;
    }
    
    .about-us-hero-title {
        font-size: 48px;
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    .about-us-hero {
        height: 680px;
    }
    
    .about-us-hero-content {
        top: 480px;
        right: 64px;
        bottom: 72px;
        left: 24px;
        gap: 16px;
    }
    
    .about-us-hero-eyebrow {
        display: block;
        font-size: 11px;
    }
    
    .about-us-hero-title {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .about-us-hero {
        height: 600px;
    }
    
    .about-us-hero-content {
        top: 400px;
        right: 40px;
        bottom: 64px;
        left: 20px;
        gap: 16px;
    }
    
    .about-us-hero-eyebrow {
        display: block;
        font-size: 11px;
    }
    
    .about-us-hero-title {
        font-size: 36px;
    }
}


@media (max-width: 480px) {
    .about-us-hero {
        height: 530px;
    }
    
    .about-us-hero-content {
        top: 148px;
        right: 43px;
        bottom: 80px;
        left: 43px;
        gap: 20px;
    }
    
    .about-us-hero-eyebrow {
        display: block;
        font-size: 11px;
    }
    
    .about-us-hero-title {
        font-size: 38px;
    }
}

body {
    margin: 0;
}




/* 
SECTION 1 
*/
.aboutus-exp-section {
    width: 100%;
    position: relative;
    background: rgba(12, 34, 64, 1);
    z-index: 9;

}

.aboutus-exp-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.35;
}
/* 
.aboutus-exp-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

} */

.aboutus-exp-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 94px 40px 157px 40px;
    gap: 60px;
}

.aboutus-exp-title {
    max-width: 610px;
    text-align: center;
    font-size: 36px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 56px;
}

/* ── TIMELINE ── */
.aboutus-timeline {
    width: 100%;
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aboutus-timeline-years {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 292px;
    width: 100%;
    padding: 0 40px;
    margin-bottom: 0;
}

.aboutus-timeline-year-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    min-width: 0;
}

.aboutus-timeline-year-label {
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s, font-size 0.3s, font-weight 0.3s;
    white-space: nowrap;
}

.aboutus-timeline-year-item.active .aboutus-timeline-year-label {
    color: #ffffff;
    font-size: 36px;
    font-weight: var(--fw-regular);
}

.aboutus-timeline-track {
    width: 100%;
    padding: 0 40px;
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
    margin: 8px 0 40px;
}

.aboutus-timeline-line {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background-image: url('data:image/svg+xml,<svg width="1440" height="1" viewBox="0 0 1440 1" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="-4.37114e-08" y1="0.500122" x2="1440" y2="0.499996" stroke="white" stroke-dasharray="12 12"/></svg>');
}

.aboutus-timeline-dots {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aboutus-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
    flex-shrink: 0;
}

.aboutus-timeline-dot.active {
    background: #4ecdc4;
    border-color: #4ecdc4;
    box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.25), 0 0 12px rgba(78, 205, 196, 0.5);
    transform: scale(1.4);
}

.aboutus-timeline-content {
    width: 684px;
    min-height: 120px;
    text-align: center;
    padding: 40px 0 0 20px;
}

.aboutus-timeline-panel {
    display: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(255, 255, 255, 1);
}

.aboutus-timeline-panel.active {
    display: block;
}
/* =========================================================
   TIMELINE — SCROLL / CENTERING (additive)
   ========================================================= */
.aboutus-timeline{
  --tl-pad: 40px;    /* left/right inset            */
  --tl-col: 240px;   /* one column width (JS sets)  */
  --tl-shift: 0px;   /* centering offset (JS sets)  */
  overflow: hidden;  /* clip years/dots that scroll out */
}
@media (max-width:768px){ .aboutus-timeline{ --tl-pad: 20px; } }

/* years + dots share the exact same column grid so they stay aligned */
.aboutus-timeline-years,
.aboutus-timeline-dots{
  width: max-content !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  flex-wrap: nowrap;
  will-change: transform;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}

/* years row: pin to the inset origin, then slide */
.aboutus-timeline-years{
  align-self: flex-start;
  padding: 0 !important;
  margin: 0 var(--tl-pad);
  transform: translateX(var(--tl-shift));
}

/* track/line/dots share the same inset so columns line up */
.aboutus-timeline-track{ padding: 0 !important; }
.aboutus-timeline-line{ left: var(--tl-pad) !important; right: var(--tl-pad) !important; }
.aboutus-timeline-dots{
  left: var(--tl-pad) !important;
  right: auto !important;
  transform: translateY(-50%) translateX(var(--tl-shift));
}

/* each year is a fixed-width column, label centered */
.aboutus-timeline-year-item{
  flex: 0 0 var(--tl-col) !important;
  width: var(--tl-col);
}

/* each dot becomes a fixed-width column; the visible circle moves to ::before
   so the 10px dot stays a perfect circle while the column carries the width */
.aboutus-timeline-dots .aboutus-timeline-dot{
  flex: 0 0 var(--tl-col);
  width: var(--tl-col);
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;      /* cancel base .active scale on the box */
}
.aboutus-timeline-dots .aboutus-timeline-dot::before{
  content: '';
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,1);
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.aboutus-timeline-dots .aboutus-timeline-dot.active::before{
  background: rgba(91, 185, 192, 1);
  border-color: rgba(91, 185, 192, 1);
}

@media (max-width:768px){
  .aboutus-timeline-years,
  .aboutus-timeline-track{ cursor: grab; }
}
/* 
SECTION 2: AWARDS MARQUEE
*/
.aboutus-awards {
    width: 100%;
    background: #0C2240;
    
    overflow: hidden;
    padding: 0;
}

.aboutus-awards-track {
    padding-top: 32px;
    display: flex;
    align-items: center;
    animation: aboutus-marquee 28s linear infinite;
    width: max-content;
}

.aboutus-awards:hover .aboutus-awards-track {
    animation-play-state: paused;
}

@keyframes aboutus-marquee {
    0% {
        transform: translateX(0);
    }
    
    100% {
        transform: translateX(-50%);
    }
}

.aboutus-award-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px dotted white;
    flex-shrink: 0;
    padding: 0 32px;
}

.aboutus-award-item-text {
    font-size: 24px;
    font-weight: var(--fw-regular);
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    max-width:275px;
}

/* 
SECTION 3: MEET THE NEPTUNE TEAM
*/
.aboutus-team {
    width: 100%;
    background: rgba(12, 34, 64, 1);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.aboutus-team::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(78, 205, 196, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.aboutus-team-inner {
    width: 100%;
    max-width: 1410px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 60px;
    position: relative;
        padding: 0 24px;

}

.aboutus-team-left {
    width: 450px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 8px;
    justify-content: space-between;
}

.aboutus-team-title {
    font-size: 36px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.1;
    max-width: 447px;
}

.aboutus-team-desc {
    max-width: 448px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #fff;
}

.aboutus-team-desc p+p {
    margin-top: 12px;
}

.aboutus-team-arrows {
    display: flex;
    gap: 16px;
    margin-top: 236px;
    align-items: center;
}

.aboutus-team-arrow {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    flex-shrink: 0;
    border: 0;
}

.aboutus-team-arrow:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.60);
    color: #fff;
}


.aboutus-team-slider-wrap {
    flex: 1;
    min-width: 0;
    height: 598.61px;
    position: relative;
    overflow: hidden;
}

/* desktop edge gradients */
.aboutus-team-slider-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to right, #0C2240 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.aboutus-team-slider-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(to left, #0C2240 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.aboutus-team-swiper {
    height: 100%;
    overflow: visible;
}

/* card */
.aboutus-team-card {
    width: 333.81px !important;
    height: 598.61px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 2px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.aboutus-team-card-header {
    padding: 16px 16px 12px;
    background: #0C2240;
    flex-shrink: 0;
}

.aboutus-team-card-role {
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    text-transform: uppercase;
    color: #BE976C;
    margin-bottom: 16px;
}

.aboutus-team-card-name {
    font-size: 22px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 16px;
}

.aboutus-team-card-img {
    width: 100%;
    flex: 1;
    object-fit: cover;
    display: block;
}
section.aboutus-exp-section:before {
    content: '';
    height: 65px;
    width: 2px;
    background-image: url('data:image/svg+xml,<svg width="4" height="67" viewBox="0 0 4 67" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 1H1V66H3V1Z" stroke="white" stroke-width="2" stroke-dasharray="2 6"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    display: block;
    left: 50%;
    transform: translate(-50%);
    top: -28px;
}

/* 
RESPONSIVE — tablet
*/
@media (max-width: 1280px) {
    .aboutus-exp-title {
        font-size: 40px;
        width: auto;
        max-width: 90%;
    }
    
    .aboutus-team {
        padding: 64px 32px;
    }
    
    .aboutus-team-left {
        width: 320px;
    }
    
    .aboutus-team-title {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {
    .aboutus-exp-inner {
        padding: 56px 24px;
    }
    
    .aboutus-exp-title {
        font-size: 32px;
    }
    
    .aboutus-timeline-year-label {
        font-size: 32px;
    }
    
    .aboutus-timeline-year-item.active .aboutus-timeline-year-label {
        font-size: 32px;
    }
    
    .aboutus-timeline-content {
        width: 90%;
    }
    
    .aboutus-team {
        padding: 56px 24px;
    }
    
    .aboutus-team-inner {
        gap: 40px;
    }
    
    .aboutus-team-left {
        width: 280px;
    }
    
    .aboutus-team-title {
        font-size: 32px;
    }
    
    .aboutus-team-card {
        width: 280px !important;
    }
    
    .aboutus-team-slider-wrap {
        height: 520px;
    }
    
    .aboutus-team-card {
        height: 520px;
    }
}

/* 
RESPONSIVE — MOBILE ≤768
*/
@media (max-width: 768px) {
    
    /* --- Section 1: exp 428x687.49 --- */
    
    .aboutus-exp-inner {
        padding: 90px 0 100px;
        justify-content: center;
        gap: 0;
    }
    
    .aboutus-exp-title {
        font-size: 32px;
        margin-bottom: 53px;
        width: auto;
    }
    
    .aboutus-timeline {
        min-height: auto;
    }
    
    .aboutus-timeline-years {
        padding: 0 16px;
    }
    
    .aboutus-timeline-year-label {
        font-size: 32px;
    }
    
    .aboutus-timeline-year-item.active .aboutus-timeline-year-label {
        font-size: 32px;
    }
    
    .aboutus-timeline-track {
        padding: 0 16px;
        margin: 30px 0 28px;
    }
    
    .aboutus-timeline-line {
        left: 16px;
        right: 16px;
    }
    
    .aboutus-timeline-dots {
        left: 16px;
        right: 16px;
    }
    
    .aboutus-timeline-content {
        padding: 0 16px;
        min-height: 80px;
    }
    
    /* --- Marquee 428x153.64 --- */
    .aboutus-awards {
        height: 153.64px;
        display: flex;
        align-items: center;
    }
    

    
    /* --- Team section 428x598.61 --- */
    .aboutus-team {
        padding: 0;
        overflow: visible;
    }
    
    .aboutus-team::before {
        display: none;
    }
    
    .aboutus-team-inner {
        flex-direction: column;
        gap: 0;
        min-height: 598.61px;
        align-items: stretch;
    }
    
    /* left content: padded, normal */
    .aboutus-team-left {
        width: 100%;
        padding: 53px 0 0;
        gap: 20px;
    }
    
    .aboutus-team-title {
        font-size: 32px;
    }
    
    .aboutus-team-desc {
        max-width: 100%;
    }
    
    .aboutus-team-arrows {
        margin-top: 8px;
    }
    
    /* slider: full bleed, NO edge gradients */
    .aboutus-team-slider-wrap {
        width: 100%;
        height: auto;
        overflow: visible;
        padding: 0 0;
    }
    
    /* remove both edge gradients on mobile */
    .aboutus-team-slider-wrap::before,
    .aboutus-team-slider-wrap::after {
        display: none;
    }
    
    /* swiper visible on mobile */
    .aboutus-team-swiper {
        overflow: visible;
    }
    
    /* card: role+name header on top, image fills below — 598.61px tall */
    .aboutus-team-card {
        width: 333px !important;
        height: 500px;
        overflow: hidden;
    }
    
    .aboutus-team-card-header {
        padding: 14px 14px 10px;
        flex-shrink: 0;
    }
    
    .aboutus-team-card-img {
        flex: 1;
        min-height: 0;
    }
    .otherPagesBanner{
    .all-location-hero-right {
    position: unset;
    padding: 0;
}
    .exp-overview-speak {
    position: absolute;
    bottom: -186px;
    background-color: #fff;
    right: 0;
    min-height: 186px;
    display: flex;
    flex-direction: column;
    min-width: 388px;
    justify-content: center;
    align-items: flex-start;
    padding: 40px;
}
}
}

@media (max-width: 480px) {
    .aboutus-exp-title {
        font-size: 32px;
    }
    
    .aboutus-timeline-year-label {
        font-size: 32px;
    }
    
    .aboutus-timeline-year-item.active .aboutus-timeline-year-label {
        font-size: 32px;
    }
    
    .aboutus-team-title {
        font-size: 32px;
    }
    

}

















































/* how yatch share work seciton css start form here  */






















/* 
BREADCRUMB — 232x18
*/
.exp-overview-breadcrumb {
    width: 100%;
    padding: 50px 0 50px 0px;
    background: #fff;
}

.exp-overview-breadcrumb-inner {
    max-width: 1410px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 100%;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #000000;
}

.exp-overview-breadcrumb-inner a {
    color: #6b7c93;
    text-decoration: none;
}

.exp-overview-breadcrumb-inner a:hover {
    color: #0C2240;
}

.exp-overview-breadcrumb-sep {
    color: #b0bac6;
}

.exp-overview-breadcrumb-current {
    font-weight: var(--fw-regular);
    color: #0C2240;
}

/* 
HERO HEADER — title + desc + speak btn
*/
.exp-overview-header {
    width: 100%;
}

.exp-overview-header-inner {
    max-width: 1410px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* title 680x124 */
.exp-overview-title {
    width: 680px;
    flex-shrink: 0;
    font-size: 62px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1.1;
}

/* right side: desc + speak */
.exp-overview-header-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 6px;
}

/* desc 641x96 */
.exp-overview-desc {
    max-width: 641px;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: #666666;
}

/* speak section 720x120 */
.exp-overview-speak {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
    min-height: 69px;
    width: 100%;
}

.exp-overview-speak-label {
    font-size: 24px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0C2240;
}

/* arrow button 69x69 */
.exp-overview-arrow-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #0C2240;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.25s, transform 0.25s;
}

.exp-overview-arrow-btn:hover {
    background: #2d4070;
    transform: translateX(4px);
}

.exp-overview-arrow-btn svg {
    width: 22px;
    height: 22px;
}

/* 
HERO BANNER IMAGE — 1440x580
*/
.exp-overview-banner {
    width: 100%;
    height: 580px;
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}

.exp-overview-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 
PROFILE SECTION — 1440x206
*/
.exp-overview-profiles {
    width: 100%;
    height: 206px;
    background: #fff;
    border-top: 1px solid rgba(26, 39, 68, 0.10);
    border-bottom: 1px solid rgba(26, 39, 68, 0.10);
    display: flex;
}

/* each profile half: 720x206 */
.exp-overview-profile-half {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 40px;
    border-right: 1px solid rgba(26, 39, 68, 0.10);
}

.exp-overview-profile-half:last-child {
    border-right: none;
}

/* profile detail 640x126 */
.exp-overview-profile-detail {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 640px;
}

/* avatar 126x126 — but show as 72 for visual balance */
.exp-overview-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(26, 39, 68, 0.12);
}

/* info 495x92 */
.exp-overview-profile-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.exp-overview-profile-role {
    font-size: 10px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c9a96e;
}

.exp-overview-profile-name {
    font-size: 20px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1;
}

.exp-overview-profile-contacts {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.exp-overview-profile-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #4a5568;
    text-decoration: none;
}

.exp-overview-profile-contact-item:hover {
    color: #0C2240;
}

.exp-overview-profile-contact-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.exp-overview-profile-divider {
    width: 1px;
    height: 14px;
    background: rgba(26, 39, 68, 0.18);
}

/* 
THE NEPTUNE OCEANIC EXPERIENCE — title
*/
.exp-overview-exp-section {
    width: 100%;
    padding: 72px 0 0;
}

.exp-overview-exp-inner {
    max-width: 1410px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-left: 24px;
    padding-right: 24px;
}

/* title 680x96 */
.exp-overview-exp-title {
    font-size: 40px;
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1.1;
    max-width: 680px;
}

/* lower div 1358x478 */
.exp-overview-exp-row {
    width: 100%;
    display: flex;
    gap: 60px;
    align-items: stretch;
}

/* left 690x478 */
.exp-overview-exp-left {
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.exp-overview-exp-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* right 608px — content */
.exp-overview-exp-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 24px 0;
}

/* content title 608x96 */
.exp-overview-content-title {
    font-size: 40px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1.15;
    max-width: 608px;
    padding-bottom: 32px;
}

/* desc 608x184 */
.exp-overview-content-desc {
    max-width: 608px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #4a5568;
}

.exp-overview-content-desc p+p {
    margin-top: 16px;
}

/* contact us 194x40 */
.exp-overview-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 244px;
    height: 40px;
    border: 1.5px solid #0C2240;
    border-radius: 999px;
    background: transparent;
    color: #0E0E0E;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 20%;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
    margin-top: 8px;
    flex-shrink: 0;
}

.exp-overview-contact-btn:hover {
    background: #0C2240;
    color: #fff;
}

/* ── FULL BANNER between rows ── */
.exp-overview-full-banner {
    width: 100%;
    height: 580px;
    overflow: hidden;
}

.exp-overview-full-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── ROW REVERSED: image right, content left ── */
.exp-overview-exp-row.reversed {
    flex-direction: row-reverse;
}

/* 
HOW IT WORKS
*/
.hiw-section {
    width: 100%;
    padding: 72px 0 80px;
    overflow: hidden;
}

.hiw-header {
padding-bottom: 37px;    
}

/* title 343x48 */
.hiw-title {
    font-size: 40px;
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1;
}

/* swiper wrapper: left edge aligned to inner, overflow right */
.hiw-swiper-outer {
    width: 100%;
    box-sizing: border-box;
}

.hiw-swiper {
    overflow: visible !important;
    width: 100%;
}

/* card 640x320 */
.hiw-slide {
    width: 640px !important;
    height: 320px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.hiw-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* flat dark tint over image */
.hiw-slide-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 50, 0.35);
    pointer-events: none;
}

.hiw-slide-body {
    position: absolute;
    inset: 0;
    padding-top: 167px;
    box-sizing: border-box;
    z-index: 2;
}

/* title: top 167, left 32, right 405 (width 373) */
.hiw-slide-title {
    width: 373px;
    margin: 0 0 12px 32px;
    font-size: 32px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.2;
}

/* paragraph: left 33, right 32, gap-top 12, bottom 31 */
.hiw-slide-desc {
    margin: 0 32px 31px 33px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.92);
}

/* 
RESPONSIVE
*/

/* 1280 */
@media (max-width: 1280px) {
    .hiw-header {
        padding: 0 32px;
    }
    
    .hiw-swiper-outer {
        padding-left: 32px;
    }
    
    .hiw-title {
        font-size: 30px;
    }
    
    .hiw-slide {
        width: 540px !important;
    }
}

/* 1024 */
@media (max-width: 1024px) {
    .hiw-header {
        padding: 0 24px;
    }
    
    .hiw-swiper-outer {
        padding-left: 24px;
    }
    
    .hiw-title {
        font-size: 26px;
    }
    
    .hiw-slide {
        width: 460px !important;
        height: 280px;
    }
    
    .hiw-slide-body {
        padding-top: 140px;
    }
    
    .hiw-slide-title {
        width: 300px;
        margin: 0 0 10px 24px;
        font-size: 16px;
    }
    
    .hiw-slide-desc {
        margin: 0 24px 20px 25px;
        font-size: 13px;
    }
}

/* 768 */
@media (max-width: 768px) {
    .hiw-header {
        padding: 0 20px;
    }
    
    .hiw-swiper-outer {
        padding-left: 20px;
    }
    
    .hiw-title {
        font-size: 22px;
    }
    
    .hiw-slide {
        width: 380px !important;
        height: 320px;
    }
    
    .hiw-slide-body {
        padding-top: 167px;
    }
    
    .hiw-slide-title {
        width: 300px;
        margin: 0 0 12px 24px;
        font-size: 16px;
    }
    
    .hiw-slide-desc {
        margin: 0 24px 24px 24px;
        font-size: 13px;
    }
}

/* 480 */
@media (max-width: 480px) {
    .hiw-header {
        padding: 0 16px;
    }
    
    .hiw-swiper-outer {
        padding-left: 16px;
    }
    
    .hiw-title {
        font-size: 20px;
    }
    
    .hiw-slide {
        width: 320px !important;
        height: 280px;
    }
    
    .hiw-slide-body {
        padding-top: 110px;
    }
    
    .hiw-slide-title {
        width: 256px;
        margin: 0 0 8px 16px;
        font-size: 15px;
    }
    
    .hiw-slide-desc {
        margin: 0 16px 16px 16px;
        font-size: 12px;
    }
}





/* experions section css start from here  */













/* 
CURATED BOATING EXPERIENCES
*/
.exp-overview-curated {
    width: 100%;
    padding: 72px 0 0 46px;
    overflow: hidden;
}

.exp-overview-curated-header {
    max-width: 1410px;
    margin: 0 auto;
    padding: 0 0px;
    margin-bottom: 36px;
}

/* title 741x48 */
.exp-overview-curated-title {
    font-size: 36px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1;
}

/* swiper wrapper: left edge aligned to inner, overflow right */
.exp-overview-swiper-outer {
    padding-left: 40px;
    width: 100%;
    box-sizing: border-box;
}

.exp-overview-swiper {
    overflow: visible !important;
    width: 100%;
}

/* card 640x320 */
.exp-overview-slide {
    width: 640px !important;
    height: 320px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.exp-overview-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.exp-overview-slide:hover img {
    transform: scale(1.04);
}

.exp-overview-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
    rgba(10, 20, 50, 0.42) 0%,
    rgba(10, 20, 50, 0.05) 50%,
    rgba(10, 20, 50, 0.50) 100%);
    pointer-events: none;
}

.exp-overview-slide-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 24px 24px;
    z-index: 2;
}

/* card title 418x38 */
.exp-overview-slide-title {
    width: 418px;
    font-size: 32px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.2;
}

/* centered play button */
.exp-overview-slide-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.80);
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background 0.25s;
}

.exp-overview-slide:hover .exp-overview-slide-play {
    background: rgba(255, 255, 255, 0.28);
}

.exp-overview-slide-play svg {
    width: 22px;
    height: 22px;
    margin-left: 3px;
}

/* ── VIDEO MODAL ── */
.exp-overview-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.exp-overview-modal.open {
    display: flex;
}

.exp-overview-modal-box {
    position: relative;
    width: 90vw;
    max-width: 960px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
}

.exp-overview-modal-box video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

.exp-overview-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 2;
}

.exp-overview-modal-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* 
RESPONSIVE
*/

/* 1280 */
@media (max-width: 1280px) {
    .exp-overview-curated-header {
        padding: 0 32px;
    }
    
    .exp-overview-swiper-outer {
        padding-left: 32px;
    }
    
    .exp-overview-slide {
        width: 540px !important;
    }
    
    .exp-overview-slide-title {
        width: 100%;
    }
}

/* 1024 */
@media (max-width: 1024px) {
    .exp-overview-curated-header {
        padding: 0 24px;
    }
    
    .exp-overview-swiper-outer {
        padding-left: 24px;
    }
    
    .exp-overview-slide {
        width: 460px !important;
        height: 280px;
    }
    
    .exp-overview-curated-title {
        font-size: 28px;
    }
}

/* 768 */
@media (max-width: 768px) {
    .exp-overview-curated-header {
        padding: 0 20px;
    }
    
    .exp-overview-swiper-outer {
        padding-left: 20px;
    }
    
    /* mobile card: 380px wide, 320px tall, overflow right */
    .exp-overview-slide {
        width: 380px !important;
        height: 320px;
    }
    
    .exp-overview-curated-title {
        font-size: 22px;
    }
    
    .exp-overview-slide-play {
        width: 56px;
        height: 56px;
    }
}

/* 480 */
@media (max-width: 480px) {
    .exp-overview-curated-header {
        padding: 0 16px;
    }
    
    .exp-overview-swiper-outer {
        padding-left: 16px;
    }
    
    .exp-overview-slide {
        width: 320px !important;
        height: 280px;
    }
    
    .exp-overview-slide-title {
        font-size: 15px;
    }
    
    .exp-overview-slide-play {
        width: 50px;
        height: 50px;
    }
}

























/* blog details section css start form here  */

/* ════════════════════════════════════════
BLOG DETAIL SECTION — 1440 wide
════════════════════════════════════════ */
.blog-det-section {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    padding: 0 40px;
}

/* inner 1410px */
.blog-det-inner {
    width: 100%;
    max-width: 1410px;
    display: flex;
    flex-direction: column;
}

/* ── BACK + TITLE BLOCK — 1360x150 ── */
.blog-det-header {
    width: 100%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 40px 0 32px;
}

.blog-det-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1a2744;
    text-decoration: none;
    padding-bottom: 40px;
}

.blog-det-back svg {
    width: 14px;
    height: 14px;
}

.blog-det-main-title {
    font-size: 52px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1.05;
    max-width: 1410px;
}

/* ── ALL BLOG DETAILS — 1360x4471 ── */
.blog-det-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 0 80px;
    gap: 64px;
}

/* ── INTRO BLOCK — 1100 wide ── */
.blog-det-intro {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* date — 1100x14 */
.blog-det-date {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 20%;
    line-height: 100%;
    color: #000000;
    text-transform: uppercase;
}

.blog-det-intro-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #666666;
    max-width: 1100px;
}

/* ── FULL-WIDTH IMAGE — 1360x565 ── */
.blog-det-full-img {
    width: 100%;
    max-width: 1410px;
    height: 565px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.blog-det-full-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── CONTENT BLOCK — 1100 wide ── */
.blog-det-block {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* block title — 690x96 */
.blog-det-block-title {
    max-width: 690px;
    font-size: 40px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #1a2744;
    line-height: 1;
    padding-bottom: 20px;
}

/* block desc — 1100x140 */
.blog-det-block-desc {
    max-width: 1100px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    padding-bottom: 12px;
    color: #4a5568;
}

.blog-det-block-desc p+p {
    margin-top: 14px;
}

/* block image — 1100x565 */
.blog-det-block-img {
    width: 100%;
    max-width: 1100px;
    height: 565px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.blog-det-block-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── VIDEO BLOCK (play icon overlay) ── */
.blog-det-video-wrap {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 565px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.blog-det-video-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-det-video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 50, 0.25);
    pointer-events: none;
}

.blog-det-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.25s;
}

.blog-det-video-wrap:hover .blog-det-play-icon {
    background: rgba(255, 255, 255, 0.28);
}

.blog-det-play-icon svg {
    width: 24px;
    height: 24px;
    margin-left: 4px;
}

/* ════════════════════════════════════════
EXPLORE MORE SECTION — 1440x780
════════════════════════════════════════ */
.blog-det-explore {
    width: 100%;
    min-height: 740px;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 40px;
}

/* inner 1410px */
.blog-det-explore-inner {
    width: 100%;
    max-width: 1410px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* top bar 1360x48 */
.blog-det-explore-topbar {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.blog-det-explore-heading {
    font-size: 40px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1;
}

/* view all 194x40 */
.blog-det-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border: 1.5px solid #1a2744;
    border-radius: 999px;
    background: transparent;
    color: black;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
    flex-shrink: 0;
}

.blog-det-view-all:hover {
    background: #1a2744;
    color: #fff;
}

/* cards row 1360x512 */
.blog-det-cards {
    width: 100%;
    height: 512px;
    display: flex;
    gap: 20px;
    flex-shrink: 0;
}

/* card 440x512 */
.blog-det-card {
    width: 440px;
    height: 512px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.blog-det-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.blog-det-card:hover .blog-det-card-img {
    transform: scale(1.04);
}

.blog-det-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
    rgba(10, 20, 50, 0.50) 0%,
    rgba(10, 20, 50, 0.08) 45%,
    rgba(10, 20, 50, 0.55) 100%);
    pointer-events: none;
}

/* card body */
.blog-det-card-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 24px 24px;
}

/* top: date + blog tag row — 392x20 */
.blog-det-card-meta {
    width: 392px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-det-card-date {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 20%;
    color: rgba(255, 255, 255, 0.80);
    text-transform: uppercase;
}

.blog-det-card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 22px;
    height: 20px;
    width: 76;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: black;
    text-transform: uppercase;
}

/* title — 392x76 */
.blog-det-card-title {
    width: 392px;
    font-size: 32px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.1;
    margin-top: 18px;
}

/* bottom: read more — 194x40 */
.blog-det-card-bottom {
    display: flex;
    align-items: flex-end;
}

.blog-det-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
}

.blog-det-card-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
}

/* ── VIDEO MODAL ── */
.blog-det-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.blog-det-modal.open {
    display: flex;
}

.blog-det-modal-box {
    position: relative;
    width: 90vw;
    max-width: 960px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.blog-det-modal-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-det-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}

.blog-det-modal-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1280px) {
    .blog-det-section {
        padding: 0 32px;
    }
    
    .blog-det-explore {
        padding: 60px 32px;
    }
    
    .blog-det-main-title {
        font-size: 38px;
    }
    
    .blog-det-full-img {
        height: 460px;
    }
    
    .blog-det-block-img,
    .blog-det-video-wrap {
        height: 460px;
    }
    
    .blog-det-cards {
        height: 480px;
    }
    
    .blog-det-card {
        width: calc(33.333% - 14px);
        height: 480px;
    }
    
    .blog-det-card-meta,
    .blog-det-card-title {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .blog-det-section {
        padding: 0 24px;
    }
    
    .blog-det-explore {
        padding: 48px 24px;
    }
    
    .blog-det-main-title {
        font-size: 30px;
    }
    
    .blog-det-block-title {
        font-size: 26px;
    }
    
    .blog-det-full-img {
        height: 380px;
    }
    
    .blog-det-block-img,
    .blog-det-video-wrap {
        height: 380px;
    }
    
    .blog-det-explore-heading {
        font-size: 28px;
    }
    
    .blog-det-cards {
        height: 420px;
    }
    
    .blog-det-card {
        height: 420px;
    }
}

@media (max-width: 768px) {
    .blog-det-section {
        padding: 0 20px;
    }
    
    .blog-det-explore {
        padding: 48px 20px;
        min-height: auto;
    }
    
    .blog-det-main-title {
        font-size: 26px;
    }
    
    .blog-det-block-title {
        font-size: 22px;
    }
    
    .blog-det-full-img {
        height: 280px;
        border-radius: 10px;
    }
    
    .blog-det-block-img,
    .blog-det-video-wrap {
        height: 260px;
        border-radius: 10px;
    }
    
    .blog-det-content {
        gap: 40px;
        padding: 40px 0 60px;
    }
    
    .blog-det-explore-topbar {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 16px;
    }
    
    .blog-det-explore-heading {
        font-size: 24px;
    }
    
    .blog-det-cards {
        flex-direction: column;
        height: auto;
        gap: 16px;
    }
    
    .blog-det-card {
        width: 100%;
        height: 360px;
    }
    
    .blog-det-card-meta,
    .blog-det-card-title {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .blog-det-section {
        padding: 0 16px;
    }
    
    .blog-det-explore {
        padding: 40px 16px;
    }
    
    .blog-det-main-title {
        font-size: 22px;
    }
    
    .blog-det-block-title {
        font-size: 18px;
    }
    
    .blog-det-intro-desc,
    .blog-det-block-desc {
        font-size: 14px;
    }
    
    .blog-det-full-img {
        height: 220px;
    }
    
    .blog-det-block-img,
    .blog-det-video-wrap {
        height: 210px;
    }
    
    .blog-det-card {
        height: 320px;
    }
    
    .blog-det-card-title {
        font-size: 17px;
    }
    
    .blog-det-explore-heading {
        font-size: 20px;
    }
    
    .blog-det-view-all {
        width: 150px;
        font-size: 10px;
    }
}




























/* resourse hub section css start from here  */

/* ── Outer wrapper ── */
.resources-hub-section {
    width: 100%;
    max-width: 1440px;
    margin: 28px auto;
    padding: 0 40px;
}

/* ════════════════════════════
TAB NAV — plain text links
exactly as in screenshot
════════════════════════════ */
.resources-hub-tabs {
    display: flex;
    align-items: center;
    gap: 32px;
    border-bottom: 1px solid rgba(169, 169, 169, 1);
    padding: 0;
}

.resources-hub-tab {
    /* no fixed width — natural text width */
    display: inline-flex;
    align-items: center;
    padding: 32px 0;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    /* sit on top of the nav border */
    font-family: var(--font-main);
    font-size: 32px;
    text-transform: uppercase;
    font-weight: var(--fw-regular);
    color: #aaa;
    cursor: pointer;
    transition: color 0.15s;
    user-select: none;
    white-space: nowrap;
}

/* Active: bold dark navy, no underline (matches screenshot) */
.resources-hub-tab.resources-hub-tab--active {
    font-weight: var(--fw-regular);
    color: rgba(12, 34, 64, 1);
}

.resources-hub-tab:hover:not(.resources-hub-tab--active) {
    color: #555;
}

/* ════════════════════════════
PANELS
════════════════════════════ */
.resources-hub-panel {
    display: none;
}

.resources-hub-panel.resources-hub-panel--active {
    display: block;
}

/* ════════════════════════════
FEATURED BLOG (top panel — only this changes per tab)
════════════════════════════ */
.resources-hub-top-panel {
    border-bottom: 1px solid #d8d8d8;
}

.resources-hub-featured-blog {
    padding: 56px 0 64px;
}

/* Section title — FEATURED BLOG */
.resources-hub-section-title {
    font-family: var(--font-main);
    font-size: 40px;
    font-weight: var(--fw-regular, 400);
    text-transform: uppercase;
    color: #1a2330;
    line-height: 1;
    margin-bottom: 63px;
}

/* Blog two-column row */
.resources-hub-blog-row {
    display: flex;
    gap: 66px;
}

/* Left media box — image/video */
.resources-hub-blog-media {
    position: relative;
    width: 660px;
    height: 408px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.resources-hub-blog-media img,
.resources-hub-blog-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play overlay */
.resources-hub-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background 0.2s;
}

.resources-hub-play-btn:hover {
    background: rgba(0, 0, 0, 0.28);
}

.resources-hub-play-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.resources-hub-play-btn:hover .resources-hub-play-circle {
    transform: scale(1.07);
}

.resources-hub-play-circle svg {
    margin-left: 4px;
}

.resources-hub-play-btn.resources-hub-hidden {
    display: none;
}

/* Right info block */
.resources-hub-blog-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 8px;
}

.resources-hub-blog-date {
    font-family: var(--font-main);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #000;
    margin-bottom: 18px;
}

.resources-hub-blog-title {
    /* height: 634px;
    width: 96px; */
    font-family: var(--font-main);
    font-size: 40px;
    font-weight: var(--fw-regular, 400);
    line-height: 1.25;
    text-transform: uppercase;
    color: #0C2240;
    margin-bottom: 22px;
}

.resources-hub-blog-desc {
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 24px;
    color: #666;
    margin-bottom: 48px;
}

/* ── Shared button: 194 × 40 pill outline ── */
.resources-hub-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid #1a2330;
    border-radius: 100px;
    font-family: var(--font-main);
    font-size: 12px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #1a2330;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.resources-hub-btn-outline:hover {
    background: #1a2330;
    color: #fff;
}

/* White variant for cards */
.resources-hub-btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 100px;
    font-family: var(--font-main);
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #fff;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.resources-hub-btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
}


/* ════════════════════════════
FEATURED GUIDES — always visible below, separate
════════════════════════════ */
.resources-hub-featured-guides {
    padding: 64px 0 80px;
}

.resources-hub-guides-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-top: 50px;
}

.resources-hub-guides-title {
    font-family: var(--font-main);
    font-size: 32px;
    font-weight: var(--fw-regular, 400);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1a2330;
    line-height: 1;
}

/* Cards grid: 3 × 440 × 512 */
.resources-hub-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.resources-hub-card {
    /* aspect-ratio keeps card proportional at any grid width — no overflow */
    aspect-ratio: 440 / 512;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.resources-hub-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.resources-hub-card:hover img {
    transform: scale(1.04);
}

.resources-hub-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 24px 28px;
}

.resources-hub-card-title {
    font-family: var(--font-main);
    font-size: 32px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1.2;
}

/* ════════════════════════════
RESPONSIVE
════════════════════════════ */
@media (max-width: 1200px) {
    .resources-hub-blog-media {
        width: 460px;
    }
}

@media (max-width: 1060px) {
    .resources-hub-blog-row {
        flex-direction: column;
        gap: 28px;
    }
    
    .resources-hub-blog-media {
        width: 100%;
        height: 320px;
    }
}

@media (max-width: 900px) {
    
    /* 2-col grid on tablet — aspect-ratio keeps cards proportional, no fixed height needed */
    .resources-hub-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .resources-hub-dummy-card-row {
        flex-direction: column;
    }
    
    .resources-hub-dummy-card {
        height: 160px;
    }
}

@media (max-width: 640px) {
    .resources-hub-section {
        padding: 0 20px;
    }
    
    .resources-hub-tabs {
        gap: 20px;
    }
    
    .resources-hub-tab {
        font-size: 11px;
    }
    
    .resources-hub-section-title,
    .resources-hub-guides-title,
    .resources-hub-dummy-label {
        font-size: 24px;
    }
    
    .resources-hub-blog-media {
        height: 240px;
    }
    
    .resources-hub-blog-title {
        font-size: 20px;
    }
    
    /* 1-col on mobile — aspect-ratio still governs height */
    .resources-hub-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .resources-hub-featured-blog {
        padding: 40px 0 48px;
    }
    
    .resources-hub-featured-guides {
        padding: 40px 0 60px;
    }
}

@media (max-width: 420px) {
    .resources-hub-blog-media {
        height: 200px;
    }
    
    .resources-hub-play-circle {
        width: 50px;
        height: 50px;
    }
    
    .resources-hub-btn-outline,
    .resources-hub-btn-outline-white {
        width: 160px;
        font-size: 10px;
    }
}














































/* all location section css start from here  */




/* ══════════════════════════════════════════
BREADCRUMB  142x18
══════════════════════════════════════════ */
.all-location-breadcrumb {
    width: 100%;
    max-width: 1410px;
    margin: 0 auto;
    padding: 48px 24px;
}

.all-location-breadcrumb-text {
    font-size: 15px;
    font-weight: 400;
    color: #6b7280;
    letter-spacing: 0.01em;
    height: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.all-location-breadcrumb-text a {
    color: #6b7280;
    text-decoration: none;
}

.all-location-breadcrumb-text span {
    color: #0d1b2a;
}

/* ══════════════════════════════════════════
HERO HEADER — two-col
left: 662x186 title | right: 642x96 desc + 194x40 btn
══════════════════════════════════════════ */
.all-location-hero {
    width: 100%;
    max-width: 1410px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    padding: 0 24px;
    gap: 60px;
    padding-bottom: 45px;
}

.all-location-hero-left {
    flex-shrink: 0;
    max-width:45%;
    min-width: 45%;
}

.all-location-hero-title {
    font-size: 52px;
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1.1;
}

.all-location-hero-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 68px;
    padding-top: 8px;
}

.all-location-hero-desc {
    max-width: 642px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(102, 102, 102, 1);
    min-height: 96px;
}

/* CONTACT US btn 194x40 */
.all-location-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 194px;
    height: 40px;
    border-radius: 34px;
    border: 1.5px solid #0d1b2a;
    background: transparent;
    color: #0d1b2a;
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.all-location-hero-btn:hover {
    background: #0d1b2a;
    color: #fff;
}

/* ══════════════════════════════════════════
FULL-WIDTH HERO IMAGE  1440x580
══════════════════════════════════════════ */
.all-location-hero-img-wrap {
    width: 100%;
    height: 580px;
    overflow: hidden;
    flex-shrink: 0;
}

.all-location-hero-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ══════════════════════════════════════════
PROFILE SECTION  1440x206
two halves each 720x206, inner div 640x126
══════════════════════════════════════════ */
.all-location-profiles {
    width: 100%;
    height: 206px;
    display: flex;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.all-location-profile-half {
    width: 50%;
    height: 206px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.all-location-profile-half+.all-location-profile-half {
    border-left: 1px solid #e5e7eb;
}

/* inner div 640x126 */
.all-location-profile-inner {
    width: 640px;
    height: 126px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* profile image 126x126 */
.all-location-profile-img {
    width: 126px;
    height: 126px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* right details 495x92 */
.all-location-profile-details {
    width: 495px;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.all-location-profile-role {
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    text-transform: uppercase;
    color: #B48F62;
    margin-bottom: 2px;
}

.all-location-profile-name {
    font-size: 25px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0d1b2a;
    margin-bottom: 4px;
}

.all-location-profile-contacts {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.all-location-profile-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #374151;
    text-decoration: none;
}

.all-location-profile-contact-item svg {
    width: 14px;
    height: 14px;
    color: #B48F62;
    flex-shrink: 0;
}

.all-location-profile-divider {
    width: 1px;
    height: 14px;
    background: #d1d5db;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
LOCATIONS GRID — 1360x2300 outer
each row: 1360x495
══════════════════════════════════════════ */
.all-location-grid {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* each row: inner content 1360x495 */
.all-location-row {
    width: 100%;
    max-width: 1410px;
    height: 495px;
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* left image block 636x495 */
.all-location-row-img-wrap {
    flex: 0 0 47%;
    height: 495px;
    position: relative;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.all-location-row-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* marina label bottom-left: 293x38 */
.all-location-img-label {
    position: absolute;
    bottom: 52px;
    left: 20px;
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
    pointer-events: none;
    padding-bottom: 52px;
}

/* COMING SOON badge (top left) 170x40 */
.all-location-coming-badge {
    position: absolute;
    top: 40px;
    left: 24px;
    width: 170px;
    height: 40px;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 20%;
    text-transform: uppercase;
    color: #0d1b2a;
    border-radius: 34px;
    z-index: 3;
}

/* COMING SOON overlay text on image 277x38 */
.all-location-img-coming-text {
    position: absolute;
    bottom: 50px;
    left: 24px;
    display: flex;
    align-items: center;
    font-size: 30px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    z-index: 2;
    pointer-events: none;
}

/* grayscale for coming soon images */
.all-location-row-img-wrap.all-location-coming img {
    filter: grayscale(100%);
}

/* dark overlay for coming soon */
.all-location-row-img-wrap.all-location-coming::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 27, 42, 0.35);
    z-index: 1;
}

/* arrow buttons row — 132x58, each btn 58x58 */
.all-location-img-arrows {
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: flex;
    gap: 16px;
    z-index: 3;
    width: 132px;
    height: 58px;
    align-items: center;
}

.all-location-img-arrow {
    cursor: pointer;
    color: #ffffff;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
    border: 0;
    background-color: transparent;
        border-radius: 50%;
    overflow: hidden;
    svg{
        height: 58px;
        width: 58px;
            border-radius: 50%;

    }    
}

/* .all-location-img-arrow:hover {
    background: rgba(255, 255, 255, 0.30);
    border-color: rgba(255, 255, 255, 0.85);
} */


/* right content block */
.all-location-row-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 60px;
}

/* standard row right content — 664x218 */
.all-location-row-content-inner {
    width: 664px;
    max-width: 100%;
}

/* title 664x48 */
.all-location-row-title {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1.1;
    margin-bottom: 20px;
}

/* desc 664x96 */
.all-location-row-desc p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 24px;
}

/* FIND OUT MORE btn 244x40 */
.all-location-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 244px;
    height: 40px;
    border-radius: 36px;
    border: 1.5px solid #0d1b2a;
    background: transparent;
    color: #0E0E0E;
    font-size: 12px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.all-location-row-btn:hover {
    background: #0d1b2a;
    color: #fff;
}

/* coming-soon right content — 664x356 */
.all-location-row-content-coming {
    width: 664px;
    max-width: 100%;
}

/* coming title 664x96 */
.all-location-row-title-coming {
    font-size: 40px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #0C2240;
    line-height: 1;
    margin-bottom: 16px;
}

/* coming desc 664x164 */
.all-location-row-desc-coming {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.72;
    color: #374151;
    min-height: 164px;
    margin-bottom: 20px;
}

/* email input row 664x62 */
.all-location-row-email-wrap {
    width: 664px;
    height: 62px;
    display: flex;
    align-items: stretch;
    border: 1.5px solid #d1d5db;
    background: #fff;
    overflow: hidden;
    max-width: 100%;
    border-radius: 32px;
}

.all-location-row-email-input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 20px;
    font-size: 14px;
    color: #374151;
    background: transparent;
    font-family: var(--font-main);
}

.all-location-row-email-input::placeholder {
    color: #9ca3af;
}

/* submit btn 145x52 — sits inside the email wrapper */
.all-location-row-submit {
    width: 145px;
    height: 52px;
    background: #1e3a5f;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 20px;
    margin: 4px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.08em;
    font-family: var(--font-main, 'Helvetica Neue', Arial, sans-serif);
    transition: background 0.2s;
    flex-shrink: 0;
}

.all-location-row-submit:hover {
    background: #0d2a4a;
}

.desktopOnly{
    display: block;
}
.mobileOnly{
    display: none;
}
.all-yatchSecWrap{
    background-repeat: no-repeat;
    background-size: cover;
}
.yatchPageBanner{
    .blogs-herobanner-content-inner{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        .bannerFlexBox{
            flex: 0 0 80%;
        }
        .bannerRightOne{
            flex: 0 0 20%;
            text-align: right;
        }
    }
    .ays-tags{
        margin-bottom:30px;
        .ays-tag{
            font-size: 15px;
            color: #000000;
            padding: 4.5px 13px;
            text-transform: unset;
            border-radius: 999px;
        }
    }
    .priceBox{
            font-weight: 400;
            font-size: 32px;
            line-height: 100%;
            text-transform: uppercase;
            color:#fff;
            padding:30px 0;
        }
    ul.boatBasics {
        list-style: none;
        display: flex;
        li{
            font-weight: 400;
            font-size: 12px;
            line-height: 32px;
            letter-spacing: 20%;
            text-transform: uppercase;
            padding: 0 40px ;
            border-right: 1px #FFFFFF80 solid;
            color:#fff;
            &:nth-child(1){
                padding-left: 0;
            }
            &:last-child{
                border-right:0;
                
            }
        }
    }
}
.flexResources{
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div{
        flex: 0 0 50%;
        max-width: 662px;
        p{
            color:rgba(102, 102, 102, 1);
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
        }
    }
}
.exp-overview-content-desc {
    h3 {
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: rgba(12, 34, 64, 1);
    margin-bottom: 16px;
    padding-top: 16px;
}
p{
    padding-bottom: 16px;
}
}
/* ══════════════════════════════════════════
RESPONSIVE — TABLET ≤1200px
══════════════════════════════════════════ */
@media (max-width: 1200px) {
    .all-location-hero-title {
        font-size: 40px;
        width: auto;
        min-height: auto;
    }
    
    .all-location-hero-left {
        width: 50%;
    }
    
    .all-location-row {
        height: auto;
    }
    
    .all-location-row-img-wrap {
        width: 45%;
        height: 420px;
    }
    
    .all-location-row-content {
        padding-left: 40px;
    }
    
    .all-location-row-content-inner,
    .all-location-row-content-coming {
        width: 100%;
    }
    
    .all-location-row-email-wrap {
        width: 100%;
    }
    
    .all-location-profile-inner {
        width: 90%;
    }
    
    .all-location-profile-details {
        width: auto;
        flex: 1;
    }
    .flexContact {
        flex-direction: column;
        .yatch-shares-profile__row {
            border-right: 0;
            border-bottom:1px #a9a9a933 solid;
            padding-left: 0;
            padding-bottom: 12px;
            padding-top: 12px;
            &:last-child{
                border-bottom: 0;
            }
        }
    }
            .yatch-shares-profile__avatar{
            height: 60px;
            width: 60px;
        }
        .yatch-shares-profile__col--right {
                    .yatch-shares-profile__inner{
                padding-left: 24px;
    }
        }
}

/* ══════════════════════════════════════════
RESPONSIVE — MOBILE ≤768px
══════════════════════════════════════════ */
@media (max-width: 768px) {
    
    /* breadcrumb */
    
    /* hero — stacks */
    .all-location-hero {
        flex-direction: column;
        gap: 20px;
        padding: 0 24px 40px;
        position: relative;
    }
    
    .all-location-hero-left {
        width: 100%;
        max-width:100%;
    }
    
    .all-location-hero-title {
        font-size: 32px;
        width: 100%;
        min-height: auto;
    }
    
    .all-location-hero-right {
                      width: 100%;
        position: absolute;
        padding: 40px;
        background-color: #fff;
        top: 100%;
        right: 0;
        max-width: 388px;
    }
    
    .all-location-hero-desc {
        min-height: auto;
    }
    
    /* hero image */
    .all-location-hero-img-wrap {
        height: 580px;
    }
    
    /* profiles — stack vertically */
    .all-location-profiles {
        flex-direction: column;
        height: auto;
    }
    
    .all-location-profile-half {
        width: 100%;
        height: auto;
        padding: 28px 20px;
        justify-content: flex-start;
    }
    
    .all-location-profile-half+.all-location-profile-half {
        border-left: none;
        border-top: 1px solid #e5e7eb;
    }
    
    .all-location-profile-inner {
        width: 100%;
        height: auto;
        align-items: flex-start;
    }
    
    .all-location-profile-img {
        width: 80px;
        height: 80px;
    }
    
    .all-location-profile-details {
        width: 100%;
    }
    
    .all-location-profile-contacts {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .all-location-profile-divider {
        display: none;
    }
    
    /* grid */
    .all-location-grid {
        padding: 40px 20px;
        gap: 60px;
    }
    
    .all-location-row {
        flex-direction: column;
        height: auto;
    }
    
    .all-location-row-img-wrap {
        width: 100%;
        min-height: 360px;
        flex: 0 0 100%;
        img{
        min-height: 360px;

        }
    }
    
    .all-location-row-content {
        padding-left: 0;
        padding-top: 24px;
    }
    
    .all-location-row-content-inner,
    .all-location-row-content-coming {
        width: 100%;
    }
    
    

    
    .all-location-row-desc {
        min-height: auto;
    }
    
    .all-location-row-desc-coming {
        min-height: auto;
    }
    
    .all-location-row-email-wrap {
        width: 100%;
    }
    
    .all-location-img-label {
        font-size: 32px;
        min-width: auto;
        padding-bottom:36px;
    }
    
    .all-location-img-arrows {
        bottom: 14px;
    }
    .desktopOnly{
        display: none;
    }
    .mobileOnly{
        display: block;
    }
    .contactInfoBox{
        flex-direction: column;
    }
    .yatch-shares-profile{
        padding:0;
        border-bottom:0;
    }
    .yatch-shares-profile__inner{
        padding:0; 
        border-bottom: 0;
    }
    .yatch-shares-profile__col--right {
                    .yatch-shares-profile__inner{
                        padding:0;
                    }
                }
                .all-location-breadcrumb{
                    padding-top: 40px;
                    padding-bottom: 24px;
                }
                    .location-inners-gateway{
        padding:24px 0;
    }
    .gallery-section .gs-row--2eq .gs-cell{
        height:160px;
    }
    .gallery-section .gs-row.gs-row--3eq .gs-cell,.gallery-section .gs-row.gs-row--3bot .gs-cell{
    height: 135px;
}
.gallery-section .gs-row{
    gap:16px;
}
.gallery-section .gs-page.gs-active{
    gap:16px;
}
.flexResources{
    flex-direction: column;
    > div{
        flex: unset;
    }
}
.exp-overview-exp-row{
    flex-direction: column;
}
}

@media (max-width: 480px) {
    .all-location-hero-title {
        font-size: 42px;
    }
    

}

/* More  */
.flexBoxInnertitle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .viewAllBtn{
        a{
            display: flex;
            gap: 16px;
            font-size: 11px;
            white-space: nowrap;
            color: #2E2D2C;
            letter-spacing: 1.4px;
            line-height: 14px;
        }
    }
}

/* ============================================================
   LAYOUT & ARRANGEMENT
   ============================================================ */
.la{
  --navy:#0C2240;
  --grey:#E2E2E2;
  --line:#A5A5A5;
  --muted:#666666;
  --title:#2E2D2C;
  --active:0;                 /* set by JS – drives mobile order */
 
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--navy);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3,1fr);
  min-height:760px;
  background:#fff;
}
.la *{box-sizing:border-box;}
 
/* ---------- LEFT PANEL ---------- */
.la__panel{
  grid-column:1;
  grid-row:1 / 5;
  background:#E2E2E2;
  display:flex;
  flex-direction:column;
  padding:40px 48px 64px;
  overflow:hidden;
}
.la__heading{
  margin:0;
  text-align:center;
  font-size:25px;
  font-weight:400;
  letter-spacing:-0.1px;
  color:#2E2D2C;
  text-transform:uppercase;
}
 
/* ---------- SWIPER ---------- */
.la__swiper{
  flex:1 1 auto;
  width:100%;
  min-height:0;
  margin-top:24px;
}
.la__swiper .swiper-wrapper{align-items:stretch;}
.la__slide{
  display:flex;
  flex-direction:column;
  height:auto;
}
.la__figure{
  flex:1 1 auto;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
}
.la__figure img{
  width:100%;
  height:280px;
  object-fit:cover;
  display:block;
}
.la__name{
  margin:0;
  padding:0 68px;
  text-align:center;
  font-size:40px;
  line-height:1.1;
  font-weight:400;
                         color:var(--navy);
  text-transform:uppercase;
}
 
/* ---------- ARROWS ---------- */
.la__nav{
  position:absolute;
  bottom:0;
  z-index:5;
  border:0;
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.la__nav:hover{background:#c4c4c4;}
.la__nav:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
.la__nav--prev{left:0;}
.la__nav--next{right:0;}
 
.la__stage{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
 
/* ---------- TABS ---------- */
.la__tab{
  grid-column:2;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:0 40px 26px;
  background:var(--grey);
  border:0;
  border-top:1px solid var(--line);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .35s ease;
    border-left:1px solid var(--line);
    min-height: 160px;

}
.la__tab:first-of-type{border-top:0;}
.la__tab.is-active{background:#fff;}
.la__tab:focus-visible{outline:2px solid var(--navy);outline-offset:-4px;}
.la__num{
  font-size:48px;
  line-height:1;
  font-weight:400;
  color:var(--navy);
}
.la__label{
  font-size:16px;
  letter-spacing:0;
  color:var(--muted);
  padding-bottom:4px;


}
section#layoutArrangement {
    border-bottom: 1px #A5A5A5 solid;
}
 
.blogs-herobanner-content-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.videoBoxWrap{
    position: relative;
    .singleVideo{
        position: absolute;
        bottom:40px;
        left: 40px;
    }
}

.arrangemnetBox{
    p.la__desc {
    max-width: 444px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    padding: 40px 24px;
    position: relative;
    z-index: 9;
    font-weight: 400;
}
    img{
        height: 640px;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }
    .la__panel{
        padding:0;
        .la__slide{
&:after{
            content: '';
            position: absolute;
            left: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 50%, #000000 100%);
            z-index: 1;
        }
        }
        .la__nav--prev{
            left: 40px;
            bottom: 40px;
        }
                .la__nav--next{
            right: 40px;
            bottom: 40px;
        }
        
    }
    .la__name{
                max-width: 520px;
        margin: 0 auto;
        padding: 40px 24px;
        position: relative;
        z-index: 9;
        color: #fff;
        font-size: 25px;
        text-transform: uppercase;
    }
    .la__swiper{
        margin-top: 0;
    }
    
}
/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .la{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  /* panel slots itself directly under the active tab */
  .la__panel{order:calc(var(--active) * 2 + 1);padding:34px 20px 30px;}
  .la__tab{order:calc(var(--i) * 2);min-height:145px;padding:0 24px 22px;}
  .la__tab.is-active{border-bottom:1px solid var(--line);}
 
  .la__heading{font-size:19px;line-height:1.45;}
  .la__name{font-size:40px;padding:0 52px;}
  .la__num{font-size:40px;}
  .la__label{font-size:14px;}
  .la__tab{
    border-left: 0;
  }

  .la__figure img{
    object-fit: contain;
  }
  .arrangemnetBox {
    p.la__desc {
        max-width:160px;
        padding-left:0;
        padding-right: 0;
    }
    .la__figure img{
        object-fit: cover;
    }
  }
}
 
@media (prefers-reduced-motion:reduce){
  .la *{transition:none !important;}
}