/* =========================================================
   LAKES & RIVERS PAGE
   THE CURIOUS EXPLORER
========================================================= */


/* =========================================================
   GLOBAL WATER PAGE
========================================================= */

.water-hero,
.water-facts,
.water-intro,
.water-destinations,
.water-experience,
.water-tips,
.water-gallery,
.water-cta{

    position:relative;

    overflow:hidden;

}


.water-intro,
.water-destinations,
.water-experience,
.water-tips,
.water-gallery{

    background:#ffffff;

}


.section-kicker{

    display:inline-flex;

    align-items:center;

    gap:9px;

    margin-bottom:15px;

    color:#00897B;

    font-size:.85rem;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.section-kicker i{

    font-size:1rem;

}


/* =========================================================
   CINEMATIC WATER HERO
========================================================= */

.water-hero{

    position:relative;

    width:100%;

    height:92vh;

    min-height:620px;

    overflow:hidden;

    background:#063B46;

}


.water-hero .hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.05);

    filter:

        brightness(.82)
        contrast(1.05)
        saturate(1.15);

}


.water-hero .hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

        linear-gradient(
            180deg,
            rgba(0,25,35,.15) 0%,
            rgba(0,35,45,.05) 40%,
            rgba(0,20,30,.48) 100%
        );

}


/* =========================================================
   WATER HERO DECORATIVE GLOW
========================================================= */

.water-hero::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-250px;

    bottom:-350px;

    border-radius:50%;

    background:rgba(0,229,255,.18);

    filter:blur(100px);

    z-index:2;

    pointer-events:none;

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.water-hero .scroll-indicator{

    position:absolute;

    z-index:5;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    width:30px;

    height:52px;

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

    border-radius:30px;

    display:flex;

    justify-content:center;

    padding-top:9px;

}


.water-hero .scroll-indicator span{

    width:5px;

    height:10px;

    border-radius:20px;

    background:#fff;

    animation:waterScroll 1.8s infinite;

}


@keyframes waterScroll{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    70%{

        transform:translateY(20px);

        opacity:0;

    }

    100%{

        transform:translateY(0);

        opacity:0;

    }

}


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

.water-facts{

    padding:80px 0 !important;

    background:

        linear-gradient(
            180deg,
            #F0FDFA 0%,
            #ffffff 100%
        );

}


.water-facts::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-300px;

    left:-200px;

    border-radius:50%;

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

    filter:blur(80px);

}


.water-facts .fact-card{

    position:relative;

    z-index:2;

    height:100%;

    padding:35px 25px;

    border-radius:24px;

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

    border:1px solid rgba(0,137,123,.10);

    box-shadow:

        0 15px 40px rgba(0,70,80,.08);

    transition:

        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        border-color .45s ease;

}


.water-facts .fact-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,188,212,.35);

    box-shadow:

        0 25px 60px rgba(0,100,110,.15);

}


.water-facts .fact-card i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:62px;

    height:62px;

    margin:0 auto 20px;

    border-radius:20px;

    color:#00897B;

    background:#E0F7F5;

    font-size:1.5rem;

    transition:.4s;

}


.water-facts .fact-card:hover i{

    transform:

        rotate(-8deg)
        scale(1.1);

    background:#00897B;

    color:#fff;

}


.water-facts .fact-card h2{

    margin-bottom:8px;

    color:#083D48;

    font-size:2rem;

    font-weight:800;

}


.water-facts .fact-card p{

    margin:0;

    color:#64748B;

    font-weight:600;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.water-intro{

    padding:120px 0 !important;

}


.water-intro::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-220px;

    top:100px;

    border-radius:50%;

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

    filter:blur(90px);

}


.water-intro .section-title h2{

    max-width:650px;

    margin-bottom:25px;

    color:#083D48;

    font-size:3rem;

    line-height:1.15;

    font-weight:800;

}


.water-intro p{

    max-width:650px;

    color:#64748B;

    font-size:1.08rem;

    line-height:1.9;

}


.water-intro .btn{

    margin-top:15px;

    padding:13px 27px;

    border:none;

    border-radius:50px;

    font-weight:700;

    box-shadow:0 12px 25px rgba(0,137,123,.18);

    transition:.35s;

}


.water-intro .btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(0,137,123,.25);

}


.water-intro-image{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    box-shadow:

        0 30px 70px rgba(0,50,60,.15);

}


.water-intro-image img{

    width:100%;

    height:500px;

    object-fit:cover;

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

}


.water-intro-image:hover img{

    transform:scale(1.06);

}


.image-badge{

    position:absolute;

    left:25px;

    bottom:25px;

    display:flex;

    align-items:center;

    gap:9px;

    padding:12px 20px;

    border-radius:50px;

    color:#fff;

    background:rgba(0,50,60,.75);

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    font-weight:700;

}


.image-badge i{

    color:#5EEAD4;

}


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

.water-destinations .section-title,
.water-tips .section-title,
.water-gallery .section-title{

    position:relative;

}


.water-destinations .section-title h2,
.water-tips .section-title h2,
.water-gallery .section-title h2{

    margin-bottom:15px;

    color:#083D48;

    font-size:2.7rem;

    font-weight:800;

}


.water-destinations .section-title p{

    max-width:700px;

    margin:0 auto;

    color:#64748B;

    line-height:1.8;

}


/* =========================================================
   FEATURED WATER DESTINATIONS
========================================================= */

.water-destinations{

    padding:120px 0 !important;

    background:

        linear-gradient(
            180deg,
            #F8FEFF 0%,
            #ffffff 100%
        );

}


.water-card{

    height:100%;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(0,80,90,.08);

    border-radius:28px;

    box-shadow:

        0 15px 45px rgba(0,60,70,.08);

    transition:

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

}


.water-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 30px 70px rgba(0,70,80,.16);

}


.water-card-image{

    position:relative;

    height:280px;

    overflow:hidden;

}


.water-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

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

}


.water-card:hover .water-card-image img{

    transform:scale(1.09);

}


.water-card-tag{

    position:absolute;

    top:20px;

    left:20px;

    padding:8px 17px;

    border-radius:30px;

    color:#fff;

    background:rgba(0,100,110,.78);

    backdrop-filter:blur(12px);

    font-size:.8rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;

}


.water-card-content{

    padding:30px;

}


.water-card-content .location{

    display:flex;

    align-items:center;

    gap:7px;

    margin-bottom:10px;

    color:#00897B;

    font-size:.8rem;

    font-weight:700;

}


.water-card-content h3{

    margin-bottom:13px;

    color:#083D48;

    font-size:1.55rem;

    font-weight:800;

}


.water-card-content p{

    margin-bottom:22px;

    color:#64748B;

    line-height:1.75;

}


.water-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#00897B;

    text-decoration:none;

    font-weight:800;

    transition:.3s;

}


.water-link i{

    transition:.3s;

}


.water-link:hover{

    color:#00695C;

}


.water-link:hover i{

    transform:translateX(6px);

}


/* =========================================================
   WATER EXPERIENCE
========================================================= */

.water-experience{

    padding:120px 0 !important;

    background:#F3FBFC;

}


.experience-image{

    position:relative;

    border-radius:30px;

}


.experience-image > img{

    width:100%;

    height:550px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:

        0 30px 70px rgba(0,60,70,.15);

}


.experience-floating-card{

    position:absolute;

    right:-30px;

    bottom:35px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px 25px;

    border-radius:20px;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:

        0 20px 50px rgba(0,50,60,.15);

}


.experience-floating-card > i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    border-radius:15px;

    background:#E0F7F5;

    color:#00897B;

    font-size:1.2rem;

}


.experience-floating-card div{

    display:flex;

    flex-direction:column;

}


.experience-floating-card strong{

    color:#083D48;

}


.experience-floating-card span{

    color:#64748B;

    font-size:.8rem;

}


.water-experience h2{

    margin-bottom:25px;

    color:#083D48;

    font-size:2.8rem;

    font-weight:800;

    line-height:1.2;

}


.water-experience > .container p{

    color:#64748B;

    line-height:1.9;

}


.experience-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-top:30px;

}


.experience-list div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    border-radius:15px;

    background:#fff;

    box-shadow:0 8px 25px rgba(0,50,60,.06);

    color:#334155;

    font-size:.9rem;

    font-weight:700;

    transition:.3s;

}


.experience-list div:hover{

    transform:translateX(5px);

    box-shadow:0 12px 30px rgba(0,50,60,.10);

}


.experience-list i{

    color:#00897B;

    font-size:1.1rem;

}


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

.water-tips{

    padding:110px 0 !important;

}


.water-tips .tip-card{

    height:100%;

    padding:35px 25px;

    border:1px solid rgba(0,80,90,.08);

    border-radius:24px;

    background:#fff;

    text-align:center;

    box-shadow:

        0 15px 40px rgba(0,60,70,.06);

    transition:.4s;

}


.water-tips .tip-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 25px 55px rgba(0,60,70,.12);

}


.water-tips .tip-card > i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:65px;

    height:65px;

    margin:0 auto 22px;

    border-radius:20px;

    background:#E0F7F5;

    color:#00897B;

    font-size:1.4rem;

    transition:.4s;

}


.water-tips .tip-card:hover > i{

    color:#fff;

    background:#00897B;

    transform:

        rotate(8deg)
        scale(1.08);

}


.water-tips .tip-card h5{

    margin-bottom:12px;

    color:#083D48;

    font-weight:800;

}


.water-tips .tip-card p{

    margin:0;

    color:#64748B;

    line-height:1.75;

    font-size:.92rem;

}


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

.water-gallery{

    padding:110px 0 !important;

    background:#F4FAFB;

}


.gallery-item{

    position:relative;

    height:300px;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

}


.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

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

}


.gallery-item:hover img{

    transform:scale(1.1);

}


.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,60,70,.45);

    opacity:0;

    transition:.4s;

}


.gallery-item:hover .gallery-overlay{

    opacity:1;

}


.gallery-overlay i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:60px;

    height:60px;

    border-radius:50%;

    color:#083D48;

    background:#fff;

    transform:scale(.6);

    transition:.4s;

}


.gallery-item:hover .gallery-overlay i{

    transform:scale(1);

}


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

.water-cta{

    min-height:520px;

    padding:120px 0;

    display:flex;

    align-items:center;

    background:

        linear-gradient(
            rgba(0,50,60,.65),
            rgba(0,30,40,.75)
        ),

        url("../images/lakes-rivers/water-cta.jpg")
        center / cover no-repeat;

    color:#fff;

}


.water-cta-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(0,229,255,.22),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(0,255,180,.16),
            transparent 35%
        );

}


.water-cta .container{

    position:relative;

    z-index:2;

}


.water-cta .section-kicker{

    color:#5EEAD4;

}


.water-cta h2{

    margin:15px auto 20px;

    max-width:850px;

    color:#fff;

    font-size:3.5rem;

    line-height:1.15;

    font-weight:800;

}


.water-cta p{

    max-width:650px;

    margin:0 auto 30px;

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

    font-size:1.1rem;

    line-height:1.8;

}


.water-cta .btn{

    padding:14px 30px;

    border:none;

    border-radius:50px;

    font-weight:800;

    box-shadow:

        0 15px 35px rgba(0,0,0,.2);

    transition:.35s;

}


.water-cta .btn:hover{

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

    box-shadow:

        0 20px 45px rgba(0,0,0,.3);

}


/* =========================================================
   ANIMATION READY STATES
========================================================= */

.water-facts .fact-card,
.water-card,
.water-tips .tip-card,
.gallery-item,
.experience-image,
.water-intro-image{

    will-change:transform;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:991px){

    .water-hero{

        height:80vh;

        min-height:520px;

    }


    .water-intro .section-title h2{

        font-size:2.5rem;

    }


    .water-experience h2{

        font-size:2.4rem;

    }


    .experience-floating-card{

        right:20px;

    }


    .water-cta h2{

        font-size:2.8rem;

    }

}


@media(max-width:767px){

    .water-hero{

        height:70vh;

        min-height:450px;

    }


    .water-facts,
    .water-intro,
    .water-destinations,
    .water-experience,
    .water-tips,
    .water-gallery{

        padding-top:75px !important;

        padding-bottom:75px !important;

    }


    .water-intro .section-title h2{

        font-size:2.1rem;

    }


    .water-destinations .section-title h2,
    .water-tips .section-title h2,
    .water-gallery .section-title h2{

        font-size:2.2rem;

    }


    .water-intro-image img{

        height:350px;

    }


    .water-card-image{

        height:240px;

    }


    .experience-image > img{

        height:380px;

    }


    .experience-floating-card{

        right:10px;

        bottom:20px;

        padding:14px 17px;

    }


    .experience-list{

        grid-template-columns:1fr;

    }


    .gallery-item{

        height:240px;

    }


    .water-cta{

        min-height:450px;

        padding:90px 0;

    }


    .water-cta h2{

        font-size:2.25rem;

    }

}


@media(max-width:480px){

    .water-facts .fact-card{

        padding:28px 20px;

    }


    .water-card-content{

        padding:25px;

    }


    .water-cta h2{

        font-size:2rem;

    }


    .water-cta p{

        font-size:.95rem;

    }

}