/* =========================================================
   FORESTS PAGE
   THE CURIOUS EXPLORER
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

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

    position:relative;
    overflow:hidden;

}


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

.forest-hero{

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

    overflow:hidden;

    position:relative;

    background:#071F16;

}


.forest-hero .hero-video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;
	

    object-fit:cover;

    transform:scale(1.05);

    filter:
        brightness(.82)
        contrast(1.08)
        saturate(1.15);

}


.forest-hero .hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

        linear-gradient(
            180deg,
            rgba(3,25,17,.08) 0%,
            rgba(3,35,22,.08) 42%,
            rgba(2,18,12,.70) 100%
        );

}


/* =========================================================
   FOREST ATMOSPHERIC LIGHT
========================================================= */

.forest-hero::before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    top:-300px;
    left:-180px;

    border-radius:50%;

    background:rgba(76,175,80,.20);

    filter:blur(100px);

    z-index:2;

    pointer-events:none;

}


.forest-hero::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-200px;
    bottom:-250px;

    border-radius:50%;

    background:rgba(0,255,170,.13);

    filter:blur(100px);

    z-index:2;

    pointer-events:none;

}


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

.forest-hero .scroll-indicator{

    position:absolute;

    left:50%;
    bottom:35px;

    transform:translateX(-50%);

    z-index:5;

    width:30px;
    height:52px;

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

    border-radius:30px;

    display:flex;

    justify-content:center;

    padding-top:9px;

}


.forest-hero .scroll-indicator span{

    width:5px;
    height:10px;

    border-radius:20px;

    background:#fff;

    animation:forestScroll 1.8s infinite;

}


@keyframes forestScroll{

    0%{
        transform:translateY(0);
        opacity:1;
    }

    70%{
        transform:translateY(20px);
        opacity:0;
    }

    100%{
        transform:translateY(0);
        opacity:0;
    }

}


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

.forest-facts{

    padding:80px 0 !important;

    background:

        linear-gradient(
            180deg,
            #F1FAF3 0%,
            #FFFFFF 100%
        );

}


.forest-facts::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-250px;
    top:-300px;

    border-radius:50%;

    background:rgba(76,175,80,.10);

    filter:blur(80px);

}


.forest-facts .fact-card{

    position:relative;

    z-index:2;

    height:100%;

    padding:35px 25px;

    border-radius:25px;

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

    border:1px solid rgba(27,94,32,.10);

    box-shadow:

        0 15px 40px rgba(20,70,30,.07);

    transition:

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

}


.forest-facts .fact-card:hover{

    transform:translateY(-12px);


    border-color:rgba(67,160,71,.30);

    box-shadow:

        0 25px 60px rgba(20,80,35,.14);

}


.forest-facts .fact-card i{

    display:flex;

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

    width:64px;
    height:64px;

    margin:0 auto 20px;

    border-radius:20px;

    color:#2E7D32;

    background:#E8F5E9;

    font-size:1.5rem;

    transition:.4s;

}


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

    background:#2E7D32;

    color:#fff;

    transform:

        rotate(-8deg)
        scale(1.1);

}


.forest-facts .fact-card h2{

    margin-bottom:8px;

    color:#173A25;

    font-size:2rem;

    font-weight:800;

}


.forest-facts .fact-card p{

    margin:0;

    color:#64748B;

    font-weight:600;

}


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

.forest-intro{

    padding:120px 0 !important;

    background:#fff;

}


.forest-intro::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-250px;
    top:100px;

    border-radius:50%;

    background:rgba(76,175,80,.07);

    filter:blur(90px);

}


.forest-intro .section-title h2{

    max-width:680px;

    margin-bottom:25px;

    color:#173A25;

    font-size:3rem;

    line-height:1.15;

    font-weight:800;

}


.forest-intro p{

    max-width:650px;

    color:#64748B;

    font-size:1.07rem;

    line-height:1.9;

}


.forest-intro .btn{

    margin-top:15px;

    padding:13px 28px;

    border:none;

    border-radius:50px;

    font-weight:800;

    box-shadow:

        0 12px 25px rgba(46,125,50,.18);

    transition:.35s;

}


.forest-intro .btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 18px 35px rgba(46,125,50,.25);

}


/* =========================================================
   INTRO IMAGE
========================================================= */

.forest-intro-image{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    box-shadow:

        0 30px 70px rgba(20,60,30,.16);

}


.forest-intro-image img{

    width:100%;

    height:500px;

    object-fit:cover;

    transition:

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

}


.forest-intro-image:hover img{

    transform:scale(1.06);

}


.forest-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(17,55,30,.76);

    backdrop-filter:blur(15px);

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

    font-weight:700;

}


.forest-image-badge i{

    color:#81C784;

}


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

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

    margin-bottom:15px;

    color:#173A25;

    font-size:2.7rem;

    font-weight:800;

}


.forest-destinations .section-title p{

    max-width:700px;

    margin:0 auto;

    color:#64748B;

    line-height:1.8;

}


/* =========================================================
   FEATURED FORESTS
========================================================= */

.forest-destinations{

    padding:120px 0 !important;

    background:

        linear-gradient(
            180deg,
            #F6FBF6 0%,
            #FFFFFF 100%
        );

}


.forest-card{

    height:100%;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    border:1px solid rgba(30,80,40,.08);

    box-shadow:

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

    transition:

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

}


.forest-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 30px 70px rgba(25,70,35,.16);

}


.forest-card-image{

    position:relative;

    height:280px;

    overflow:hidden;

}


.forest-card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:

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

}


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

    transform:scale(1.09);

}


.forest-card-tag{

    position:absolute;

    top:20px;
    left:20px;

    padding:8px 17px;

    border-radius:30px;

    color:#fff;

    background:rgba(27,94,32,.80);

    backdrop-filter:blur(12px);

    font-size:.78rem;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


.forest-card-content{

    padding:30px;

}


.forest-card-content .location{

    display:flex;

    align-items:center;

    gap:7px;

    margin-bottom:10px;

    color:#388E3C;

    font-size:.8rem;

    font-weight:800;

}


.forest-card-content h3{

    margin-bottom:13px;

    color:#173A25;

    font-size:1.55rem;

    font-weight:800;

}


.forest-card-content p{

    margin-bottom:22px;

    color:#64748B;

    line-height:1.75;

}


.forest-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#2E7D32;

    text-decoration:none;

    font-weight:800;

    transition:.3s;

}


.forest-link i{

    transition:.3s;

}


.forest-link:hover{

    color:#1B5E20;

}


.forest-link:hover i{

    transform:translateX(6px);

}


/* =========================================================
   FOREST EXPERIENCE
========================================================= */

.forest-experience{

    padding:120px 0 !important;

    background:#EEF7EF;

}


.forest-experience-image{

    position:relative;

}


.forest-experience-image > img{

    width:100%;

    height:550px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:

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

}


.forest-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,.93);

    backdrop-filter:blur(20px);

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

    box-shadow:

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

}


.forest-floating-card > i{

    display:flex;

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

    width:50px;
    height:50px;

    border-radius:15px;

    color:#2E7D32;

    background:#E8F5E9;

}


.forest-floating-card div{

    display:flex;

    flex-direction:column;

}


.forest-floating-card strong{

    color:#173A25;

}


.forest-floating-card span{

    color:#64748B;

    font-size:.8rem;

}


.forest-experience h2{

    margin-bottom:25px;

    color:#173A25;

    font-size:2.8rem;

    line-height:1.2;

    font-weight:800;

}


.forest-experience .experience-description{

    color:#64748B;

    line-height:1.9;

}


.forest-experience-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-top:30px;

}


.forest-experience-list div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    border-radius:15px;

    background:#fff;

    box-shadow:

        0 8px 25px rgba(20,60,30,.06);

    color:#334155;

    font-size:.9rem;

    font-weight:700;

    transition:.3s;

}


.forest-experience-list div:hover{

    transform:translateX(5px);

    box-shadow:

        0 12px 30px rgba(20,60,30,.10);

}


.forest-experience-list i{

    color:#388E3C;

    font-size:1.1rem;

}


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

.forest-tips{

    padding:110px 0 !important;

}


.forest-tips .tip-card{

    height:100%;

    padding:35px 25px;

    border:1px solid rgba(30,80,40,.08);

    border-radius:24px;

    background:#fff;

    text-align:center;

    box-shadow:

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

    transition:.4s;

}


.forest-tips .tip-card:hover{

    transform:translateY(-10px);

    box-shadow:

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

}


.forest-tips .tip-card > i{

    display:flex;

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

    width:65px;
    height:65px;

    margin:0 auto 22px;

    border-radius:20px;

    background:#E8F5E9;

    color:#2E7D32;

    font-size:1.4rem;

    transition:.4s;

}


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

    color:#fff;

    background:#2E7D32;

    transform:

        rotate(8deg)
        scale(1.08);

}


.forest-tips .tip-card h5{

    margin-bottom:12px;

    color:#173A25;

    font-weight:800;

}


.forest-tips .tip-card p{

    margin:0;

    color:#64748B;

    line-height:1.75;

    font-size:.92rem;

}


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

.forest-gallery{

    padding:110px 0 !important;

    background:#F2F8F3;

}


.forest-gallery-item{

    position:relative;

    height:300px;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

}


.forest-gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:

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

}


.forest-gallery-item:hover img{

    transform:scale(1.1);

}


.forest-gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

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

    background:rgba(20,70,30,.48);

    opacity:0;

    transition:.4s;

}


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

    opacity:1;

}


.forest-gallery-overlay i{

    display:flex;

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

    width:60px;
    height:60px;

    border-radius:50%;

    background:#fff;

    color:#1B5E20;

    transform:scale(.6);

    transition:.4s;

}


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

    transform:scale(1);

}


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

.forest-cta{

    min-height:520px;

    padding:120px 0;

    display:flex;

    align-items:center;

    background:

        linear-gradient(
            rgba(8,45,20,.64),
            rgba(4,28,14,.78)
        ),

        url("../images/forests/forest-cta.jpg")
        center / cover no-repeat;

    color:#fff;

}


.forest-cta-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(76,175,80,.22),
            transparent 35%
        ),

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

}


.forest-cta .container{

    position:relative;

    z-index:2;

}


.forest-cta .section-kicker{

    color:#81C784;

}


.forest-cta h2{

    max-width:850px;

    margin:15px auto 20px;

    color:#fff;

    font-size:3.5rem;

    line-height:1.15;

    font-weight:800;

}


.forest-cta p{

    max-width:650px;

    margin:0 auto 30px;

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

    font-size:1.1rem;

    line-height:1.8;

}


.forest-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;

}


.forest-cta .btn:hover{

    transform:

        translateY(-5px)
        scale(1.03);

    box-shadow:

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

}


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

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

    will-change:transform;

}


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

@media(max-width:991px){

    .forest-hero{

        height:80vh;

        min-height:520px;

    }


    .forest-intro .section-title h2{

        font-size:2.5rem;

    }


    .forest-experience h2{

        font-size:2.4rem;

    }


    .forest-floating-card{

        right:20px;

    }


    .forest-cta h2{

        font-size:2.8rem;

    }

}


@media(max-width:767px){

    .forest-hero{

        height:70vh;

        min-height:450px;

    }


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

        padding-top:75px !important;

        padding-bottom:75px !important;

    }


    .forest-intro .section-title h2{

        font-size:2.1rem;

    }


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

        font-size:2.2rem;

    }


    .forest-intro-image img{

        height:350px;

    }


    .forest-card-image{

        height:240px;

    }


    .forest-experience-image > img{

        height:380px;

    }


    .forest-floating-card{

        right:10px;

        bottom:20px;

        padding:14px 17px;

    }


    .forest-experience-list{

        grid-template-columns:1fr;

    }


    .forest-gallery-item{

        height:240px;

    }


    .forest-cta{

        min-height:450px;

        padding:90px 0;

    }


    .forest-cta h2{

        font-size:2.25rem;

    }

}


@media(max-width:480px){

    .forest-facts .fact-card{

        padding:28px 20px;

    }


    .forest-card-content{

        padding:25px;

    }


    .forest-cta h2{

        font-size:2rem;

    }


    .forest-cta p{

        font-size:.95rem;

    }

}