/* =========================================================
   CURIOUS EXPLORER — BEACHES PAGE
   Premium Tropical / Coastal Design
========================================================= */


/* =========================================================
   GLOBAL BEACH PAGE
========================================================= */

.beaches-page{

    font-family:'Inter', sans-serif;

    background:
        linear-gradient(
            180deg,
            #f8fdff 0%,
            #eefaff 45%,
            #fffaf0 100%
        );

    color:#17324d;

}


/* =========================================================
   BEACH HERO
========================================================= */

.beach-hero{

    position:relative;

    width:100%;
    height:88vh;
    min-height:620px;

    overflow:hidden;

    background:#0b7891;

}


.beach-hero .hero-video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.03);

    filter:
        brightness(1.12)
        saturate(1.18)
        contrast(.96);

}


.beach-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(0,55,75,.18) 0%,
            rgba(0,80,100,.08) 35%,
            rgba(0,25,45,.48) 100%
        );

    z-index:2;

}


.beach-hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-1px;

    height:150px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #f8fdff
        );

    z-index:3;

    pointer-events:none;

}


/* =========================================================
   BEACH HERO SCROLL INDICATOR
========================================================= */

.beach-hero .scroll-indicator{

    position:absolute;

    left:50%;
    bottom:45px;

    transform:translateX(-50%);

    width:34px;
    height:58px;

    border:2px solid rgba(255,255,255,.8);

    border-radius:30px;

    z-index:10;

    display:flex;
    justify-content:center;

    padding-top:9px;

}


.beach-hero .scroll-indicator span{

    width:6px;
    height:12px;

    border-radius:10px;

    background:#fff;

    animation:
        beachScroll 1.8s infinite ease-in-out;

}


@keyframes beachScroll{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    60%{

        transform:translateY(20px);

        opacity:.3;

    }

    100%{

        transform:translateY(0);

        opacity:1;

    }

}


/* =========================================================
   SECTION TITLES
========================================================= */

.beaches-page .section-title{

    max-width:750px;

    margin-left:auto;
    margin-right:auto;

}


.beaches-page .section-title h2{

    font-family:'Plus Jakarta Sans', sans-serif;

    font-size:clamp(2rem,4vw,3.3rem);

    font-weight:800;

    color:#123b50;

    margin-bottom:15px;

}


.beaches-page .section-title h2::after{

    content:"";

    display:block;

    width:65px;
    height:4px;

    margin:18px auto 0;

    border-radius:20px;

    background:

        linear-gradient(
            90deg,
            #00a8c6,
            #ffd166,
            #ff7f50
        );

}


.beaches-page .section-title p{

    color:#5f7580;

    font-size:1.05rem;

    line-height:1.8;

}


/* =========================================================
   QUICK FACTS
========================================================= */

.beach-facts{

    position:relative;

    margin-top:-20px;

    z-index:10;

}


.beach-facts .fact-card{

    position:relative;

    height:100%;

    padding:32px 20px;

    border-radius:24px;

    background:rgba(255,255,255,.92);

    border:1px solid rgba(0,170,190,.12);

    box-shadow:


        0 15px 45px rgba(16,72,90,.10),

        0 4px 12px rgba(0,0,0,.04);

    overflow:hidden;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;

}


.beach-facts .fact-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:

        linear-gradient(
            90deg,
            #00a8c6,
            #00c2a8,
            #ffd166
        );

}


.beach-facts .fact-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 25px 55px rgba(16,72,90,.16);

}


.beach-facts .fact-card i{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:65px;
    height:65px;

    margin-bottom:18px;

    border-radius:50%;

    background:

        linear-gradient(
            135deg,
            #dffaff,
            #fff3c4
        );

    color:#008da8;

    font-size:1.5rem;

}


.beach-facts .fact-card h2{

    margin:0 0 5px;

    font-size:2rem;

    font-weight:800;

    color:#123b50;

}


.beach-facts .fact-card p{

    margin:0;

    color:#71838a;

}


/* =========================================================
   FEATURED BEACHES
========================================================= */

.beach-card{

    position:relative;

    height:100%;

    min-height:500px;

    overflow:hidden;

    border-radius:30px;

    background:#fff;

    box-shadow:

        0 18px 50px rgba(18,59,80,.12);

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        box-shadow .5s ease;

}


.beach-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 30px 70px rgba(18,59,80,.20);

}


.beach-card img{

    width:100%;
    height:100%;

    min-height:500px;

    object-fit:cover;

    transition:
        transform .8s cubic-bezier(.22,1,.36,1);

}


.beach-card:hover img{

    transform:scale(1.08);

}


.beach-content{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:80px 30px 30px;

    color:#fff;

    background:

        linear-gradient(
            to top,
            rgba(0,30,45,.90),
            rgba(0,40,60,.60) 45%,
            transparent
        );

}


.beach-content span{

    display:inline-block;

    margin-bottom:10px;

    padding:6px 12px;

    border-radius:30px;

    background:rgba(255,209,102,.95);

    color:#17324d;

    font-size:.78rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.7px;

}


.beach-content h3{

    margin:0 0 10px;

    font-family:'Plus Jakarta Sans', sans-serif;

    font-size:1.8rem;

    font-weight:800;

}


.beach-content p{

    margin-bottom:20px;

    color:rgba(255,255,255,.88);

    line-height:1.7;

}


.beach-content .btn{

    border:none;

    border-radius:50px;

    padding:10px 22px;

    font-weight:700;

    background:#ffd166;

    color:#17324d;

    transition:.3s;

}


.beach-content .btn:hover{

    background:#fff;

    color:#008da8;

    transform:translateY(-3px);

}


/* =========================================================
   COASTAL EXPERIENCES
========================================================= */

.beach-experiences{

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            #e9fbff,
            #f7ffff 50%,
            #fff8df
        );

}


.beach-experiences::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    top:-250px;
    right:-150px;

    background:rgba(0,188,212,.12);

    filter:blur(70px);

}


.beach-experiences img{

    width:100%;

    border-radius:30px;

    box-shadow:

        0 25px 60px rgba(0,80,100,.16);

    transition:
        transform .5s ease;

}


.beach-experiences img:hover{

    transform:scale(1.025);

}


.beach-experiences h2{

    font-family:'Plus Jakarta Sans', sans-serif;

    font-size:clamp(2rem,4vw,3rem);

    font-weight:800;

    color:#123b50;

    margin-bottom:20px;

}


.beach-experiences p{

    color:#607780;

    line-height:1.9;

}


.beach-experiences ul{

    margin-top:25px;

}


.beach-experiences li{

    margin-bottom:14px;

    color:#355762;

    font-weight:500;

}


.beach-experiences li::first-letter{

    color:#00a8c6;

}


/* =========================================================
   BEACH ACTIVITIES
========================================================= */

.beach-activities{

    background:#fff;

}


.activity-card{

    position:relative;

    height:100%;

    padding:35px 25px;

    text-align:center;

    border-radius:25px;

    background:#fff;

    border:1px solid rgba(0,120,150,.10);

    box-shadow:

        0 12px 35px rgba(20,70,90,.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

    overflow:hidden;

}


.activity-card::after{

    content:"";

    position:absolute;

    width:100px;
    height:100px;

    border-radius:50%;

    right:-45px;
    top:-45px;

    background:rgba(255,209,102,.20);

}


.activity-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 25px 55px rgba(20,70,90,.15);

}


.activity-card i{

    display:flex;

    align-items:center;
    justify-content:center;

    width:70px;
    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:

        linear-gradient(
            135deg,
            #dffaff,
            #fff1bd
        );

    color:#008da8;

    font-size:1.6rem;

}


.activity-card h5{

    font-weight:800;

    color:#173d50;

    margin-bottom:12px;

}


.activity-card p{

    color:#6b7d84;

    line-height:1.7;

    margin:0;

}


/* =========================================================
   TRAVEL TIPS
========================================================= */

.beach-travel-tips{

    background:

        linear-gradient(
            180deg,
            #f0fbfd,
            #ffffff
        );

}


.beach-travel-tips .tip-card{

    height:100%;

    padding:30px 24px;

    border-radius:24px;

    background:#fff;

    border:1px solid rgba(0,150,170,.10);

    box-shadow:

        0 10px 35px rgba(20,70,90,.07);

    transition:.4s;

}


.beach-travel-tips .tip-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 20px 50px rgba(20,70,90,.13);

}


.beach-travel-tips .tip-card i{

    color:#00a8c6;

    font-size:1.7rem;

    margin-bottom:18px;

}


.beach-travel-tips .tip-card h5{

    color:#173d50;

    font-weight:800;

}


.beach-travel-tips .tip-card p{

    color:#687c84;

    line-height:1.7;

    margin-bottom:0;

}


/* =========================================================
   BEACH GALLERY
========================================================= */

.beach-gallery{

    background:#fff;

}


.beach-gallery img{

    width:100%;

    height:270px;

    object-fit:cover;

    border-radius:24px;

    transition:
        transform .6s cubic-bezier(.22,1,.36,1),
        filter .4s ease,
        box-shadow .4s ease;

}


.beach-gallery a{

    display:block;

    overflow:hidden;

    border-radius:24px;

}


.beach-gallery a:hover img{

    transform:scale(1.08);

    filter:saturate(1.15);

    box-shadow:

        0 20px 45px rgba(0,60,80,.18);

}


/* =========================================================
   BEACH CTA
========================================================= */

.beach-cta{

    position:relative;

    overflow:hidden;

    padding:110px 0;

    color:#fff;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(255,255,255,.18),
            transparent 25%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(255,209,102,.22),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #007f9b,
            #00a8b8 48%,
            #008c83
        );

}


.beach-cta::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    top:-180px;
    right:-100px;

    background:rgba(255,255,255,.12);

    filter:blur(15px);

}


.beach-cta::after{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    border-radius:50%;

    bottom:-150px;
    left:-70px;

    background:rgba(255,209,102,.18);

    filter:blur(20px);

}


.beach-cta .container{

    position:relative;

    z-index:2;

}


.beach-cta h2{

    font-family:'Plus Jakarta Sans', sans-serif;

    font-size:clamp(2rem,4vw,3.4rem);

    font-weight:800;

    margin-bottom:15px;

}


.beach-cta p{

    max-width:650px;

    margin:0 auto 30px;

    color:rgba(255,255,255,.88);

    font-size:1.08rem;

    line-height:1.8;

}


.beach-cta .btn{

    padding:14px 30px;

    border:0;

    border-radius:50px;

    background:#ffd166;

    color:#17324d;

    font-weight:800;

    box-shadow:

        0 10px 30px rgba(0,0,0,.15);

    transition:.35s;

}


.beach-cta .btn:hover{

    transform:
        translateY(-5px)
        scale(1.03);

    background:#fff;

    color:#008da8;

    box-shadow:

        0 15px 40px rgba(0,0,0,.22);

}


/* =========================================================
   IMAGE REVEAL ANIMATION
========================================================= */

.beach-reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1);

}


.beach-reveal.visible{

    opacity:1;

    transform:translateY(0);

}


/* =========================================================
   BEACH CARD STAGGER
========================================================= */

.beach-card,
.activity-card,
.tip-card{

    will-change:transform;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

    .beach-hero{

        height:78vh;

        min-height:540px;

    }

    .beach-card{

        min-height:460px;

    }

    .beach-card img{

        min-height:460px;

    }

    .beach-content{

        padding:70px 25px 25px;

    }

}


@media(max-width:768px){

    .beach-hero{

        height:70vh;

        min-height:480px;

    }

    .beach-hero::after{

        height:100px;

    }

    .beach-facts{

        margin-top:0;

    }

    .beach-facts .fact-card{

        padding:28px 18px;

    }

    .beach-card{

        min-height:430px;

        border-radius:24px;

    }

    .beach-card img{

        min-height:430px;

    }

    .beach-content h3{

        font-size:1.5rem;

    }

    .beach-gallery img{

        height:230px;

    }

    .beach-cta{

        padding:80px 20px;

    }

}


@media(max-width:576px){

    .beach-hero{

        height:65vh;

        min-height:430px;

    }

    .beach-hero .scroll-indicator{

        bottom:25px;

    }

    .beach-card{

        min-height:400px;

    }

    .beach-card img{

        min-height:400px;

    }

    .beach-content{

        padding:60px 20px 20px;

    }

    .beach-content p{

        font-size:.92rem;

    }

    .beach-gallery img{

        height:210px;

        border-radius:18px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .beach-card,
    .activity-card,
    .tip-card,
    .beach-gallery img,
    .beach-experiences img{

        transition:none;

    }

    .beach-hero .scroll-indicator span{

        animation:none;

    }

}