/* HERO */

.gallery-hero{
    height:75vh;
    background:url('/static/images/hoseboatpagehero.webp') center/cover;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body{
    margin: 0;
    padding: 0;
}
.gallery-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(0,0,0,.68),
        rgba(0,0,0,.58)
    );
}

.gallery-hero-content{
    position:relative;
    z-index:2;
    max-width:850px;
    padding:20px;
}

.gallery-tag{
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:12px;
    font-weight:600;
}

.gallery-hero h1{
    color:white;
    font-size:78px;
    margin:25px 0;
    font-weight:800;
    line-height:1.1;
}

.gallery-hero h1 span{
    color:var(--teal);
}

.gallery-hero p{
    color:rgba(255,255,255,.78);
    line-height:1.9;
    font-size:17px;
}

/* INTRO */

.gallery-intro{
    padding:110px 20px 70px;
    text-align:center;
    background:white;
}

.gallery-intro-content{
    max-width:900px;
    margin:auto;
}

.section-tag{
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:12px;
    font-weight:600;
}

.gallery-intro h2,
.experience-content h2{
    font-size:58px;
    color:var(--ocean);
    margin:25px 0;
    line-height:1.2;
    font-weight:800;
}

.gallery-intro h2 span,
.experience-content h2 span{
    color:var(--teal);
}

.gallery-intro p{
    color:#666;
    line-height:2;
    font-size:16px;
}

/* GALLERY GRID */

.gallery-section{
    padding:40px 60px 120px;
    background:#f7fbfd;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:280px;
    gap:25px;
}

.gallery-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    cursor:pointer;
}

.gallery-card.large{
    grid-column:span 2;
}

.gallery-card.wide{
    grid-column:span 2;
}

.gallery-card.tall{
    grid-row:span 2;
}

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s;
}

.gallery-card:hover img{
    transform:scale(1.1);
}

.gallery-card-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        transparent,
        rgba(0,0,0,.8)
    );
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px;
}

.gallery-card-overlay span{
    color:var(--teal);
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:11px;
    font-weight:600;
    margin-bottom:10px;
}

.gallery-card-overlay h3{
    color:white;
    font-size:28px;
    line-height:1.3;
}

/* EXPERIENCE */

.gallery-experience{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    background:white;
}

.experience-image{
    height:100%;
}

.experience-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.experience-content{
    padding:90px;
}

.experience-content p{
    color:#666;
    line-height:2;
    margin-bottom:40px;
}

.experience-features{
    display:grid;
    gap:25px;
}

.experience-feature{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.experience-feature span{
    font-size:35px;
}

.experience-feature h4{
    color:var(--ocean);
    margin-bottom:8px;
    font-size:22px;
}

.experience-feature p{
    margin:0;
}

/* VIDEO */

.video-section{
    position:relative;
    padding:160px 20px;
    background:url('/static/images/hoseboatpagehero.webp')
    text-align:center;
}

.video-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.7);
}

.video-content{
    position:relative;
    z-index:2;
    max-width:850px;
    margin:auto;
}

.video-content span{
    color:var(--teal);
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:12px;
    font-weight:600;
}

.video-content h2{
    color:white;
    font-size:64px;
    margin:25px 0;
    line-height:1.2;
    font-weight:800;
}

.video-content p{
    color:rgba(255,255,255,.72);
    line-height:1.9;
    margin-bottom:40px;
}

.video-btn{
    width:90px;
    height:90px;
    border-radius:50%;
    border:none;
    background:var(--teal);
    color:white;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:.4s;
}

.video-btn:hover{
    transform:scale(1.1);
}

/* STATS */

.gallery-stats{
    padding:120px 60px;
    background:#07141d;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.stat-box{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:50px 30px;
    text-align:center;
    transition:.4s;
}

.stat-box:hover{
    transform:translateY(-10px);
    border-color:rgba(0,168,168,.3);
}

.stat-box h3{
    color:var(--teal);
    font-size:58px;
    margin-bottom:15px;
    font-weight:800;
}

.stat-box p{
    color:rgba(255,255,255,.7);
    font-size:18px;
}

/* CTA */

.gallery-cta{
    position:relative;
    padding:150px 20px;
    background:url('/static/images/hoseboatpagehero.webp')
    text-align:center;
}

.gallery-cta-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
}

.gallery-cta-content{
    position:relative;
    z-index:2;
    max-width:850px;
    margin:auto;
}

.gallery-cta-content span{
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:12px;
    font-weight:600;
}

.gallery-cta-content h2{
    color:white;
    font-size:64px;
    margin:25px 0;
    line-height:1.2;
    font-weight:800;
}

.gallery-cta-content p{
    color:rgba(255,255,255,.75);
    margin-bottom:40px;
    line-height:1.9;
}

.gallery-cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
}

.gallery-btn,
.gallery-outline-btn{
    padding:16px 34px;
    border-radius:50px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
    font-family:'Poppins',sans-serif;
}

.gallery-btn{
    border:none;
    background:var(--teal);
    color:white;
}

.gallery-outline-btn{
    border:1px solid rgba(255,255,255,.3);
    background:transparent;
    color:white;
}

.gallery-btn:hover,
.gallery-outline-btn:hover{
    transform:translateY(-4px);
}

/* MOBILE */

@media(max-width:991px){

    .gallery-grid{
        grid-template-columns:1fr 1fr;
    }

    .gallery-experience{
        grid-template-columns:1fr;
    }

    .stats-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:768px){

    .gallery-hero h1,
    .video-content h2,
    .gallery-cta-content h2{
        font-size:42px;
    }

    .gallery-intro h2,
    .experience-content h2{
        font-size:36px;
    }

    .gallery-section,
    .gallery-stats{
        padding-left:20px;
        padding-right:20px;
    }

    .gallery-grid{
        grid-template-columns:1fr;
        grid-auto-rows:260px;
    }

    .gallery-card.large,
    .gallery-card.wide,
    .gallery-card.tall{
        grid-column:unset;
        grid-row:unset;
    }

    .experience-content{
        padding:50px 20px;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .gallery-cta-buttons{
        flex-direction:column;
    }

}
/* IMAGE POPUP */

.image-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    opacity:0;
    visibility:hidden;
    transition:.4s;
    padding:30px;
}

.image-popup.active{
    opacity:1;
    visibility:visible;
}

.image-popup img{
    max-width:95%;
    max-height:95%;
    object-fit:contain;
    border-radius:18px;
    transform:scale(.8);
    transition:.4s;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.image-popup.active img{
    transform:scale(1);
}
.nav.scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 14px 48px;
    box-shadow: 0 4px 24px rgba(11, 60, 93, 0.1);
}

.nav.scrolled .nav-links a {
    color: #0B3C5D !important;
}

.nav.scrolled .nav-hamburger span {
    background: #0B3C5D !important;
}

.close-popup{
    position:absolute;
    top:25px;
    right:30px;
    width:50px;
    height:50px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.12);
    color:white;
    font-size:28px;
    cursor:pointer;
    backdrop-filter:blur(10px);
    transition:.3s;
}

.close-popup:hover{
    background:var(--teal);
    transform:rotate(90deg);
}
/* SCROLL REVEAL */

.gallery-hero-content,
.gallery-intro-content,
.gallery-card,
.experience-image,
.experience-content,
.experience-feature,
.video-content,
.stat-box,
.gallery-cta-content,
.footer-grid > div {
    opacity: 0;
    transform: translateY(80px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
    will-change: transform, opacity;
}

/* ACTIVE */

.show-scroll {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* STAGGER EFFECT */

.gallery-card:nth-child(1) { transition-delay: 0.1s; }
.gallery-card:nth-child(2) { transition-delay: 0.2s; }
.gallery-card:nth-child(3) { transition-delay: 0.3s; }
.gallery-card:nth-child(4) { transition-delay: 0.4s; }
.gallery-card:nth-child(5) { transition-delay: 0.5s; }
.gallery-card:nth-child(6) { transition-delay: 0.6s; }
.gallery-card:nth-child(7) { transition-delay: 0.7s; }
.gallery-card:nth-child(8) { transition-delay: 0.8s; }

.experience-feature:nth-child(1) {
    transition-delay: 0.2s;
}

.experience-feature:nth-child(2) {
    transition-delay: 0.4s;
}

.experience-feature:nth-child(3) {
    transition-delay: 0.6s;
}

.stat-box:nth-child(1) { transition-delay: 0.1s; }
.stat-box:nth-child(2) { transition-delay: 0.2s; }
.stat-box:nth-child(3) { transition-delay: 0.3s; }
.stat-box:nth-child(4) { transition-delay: 0.4s; }