/* =========================================================
   FOREST THEME
   Hero original rahega.
   Forest effects hero ke neeche + birds hero par bhi.
========================================================= */


/* =========================================================
   FOREST WORLD
========================================================= */

.site-content.forest-world{
    position:relative;
    background:#061008;
    isolation:isolate;
    overflow:clip;
}


/* =========================================================
   NAVIGATION FOREST COLORS
========================================================= */

.navbar a{
    color:#f7f1df !important;
}

.enquire-btn,
.btn-primary{
    background:#094d21cc !important;
    border-color:#bfa65c !important;
}


/* =========================================================
   STICKY FOREST BACKGROUND
========================================================= */

.forest-sticky-bg{
    position:sticky;
    top:0;

    width:100%;
    height:100vh;

    overflow:hidden;

    margin-bottom:-100vh;

    z-index:0;

    background:#061008;
}


/* =========================================================
   FOREST VIDEO
========================================================= */

.forest-bg-video{
    position:absolute;

    inset:-3%;

    width:106%;
    height:106%;

    object-fit:cover;
    object-position:center;

    filter:
        brightness(.62)
        saturate(1.08);

    transform:scale(1.03);

    z-index:0;
}


/* =========================================================
   DARK FOREST OVERLAY
========================================================= */

.forest-veil{
    position:absolute;
    inset:0;

    z-index:2;

    background:

        radial-gradient(
            circle at 50% 42%,
            rgba(4,16,7,.02),
            rgba(2,10,4,.22) 58%,
            rgba(2,10,4,.62)
        ),

        linear-gradient(
            90deg,
            rgba(2,12,5,.28),
            transparent 48%,
            rgba(2,12,5,.20)
        );

    pointer-events:none;
}


/* =========================================================
   SUN RAYS
========================================================= */

.forest-rays{
    position:absolute;

    z-index:3;

    top:-20%;
    right:-5%;

    width:65%;
    height:115%;

    opacity:.42;

    background:
        linear-gradient(
            115deg,
            transparent 22%,
            rgba(255,230,155,.03) 30%,
            rgba(255,230,155,.17) 40%,
            rgba(255,230,155,.04) 51%,
            transparent 63%
        );

    filter:blur(4px);

    animation:
        forestSunRays
        9s
        ease-in-out
        infinite alternate;

    pointer-events:none;
}


@keyframes forestSunRays{

    from{
        opacity:.24;

        transform:
            translateX(-20px)
            rotate(-1deg);
    }

    to{
        opacity:.52;

        transform:
            translateX(35px)
            rotate(2deg);
    }

}


/* =========================================================
   FOG
========================================================= */

.forest-fog{
    position:absolute;

    z-index:4;

    left:-45%;

    width:190%;

    filter:blur(38px);

    pointer-events:none;
}


/* FOG 1 */

.fog-one{
    top:20%;

    height:30%;

    opacity:.30;

    background:
        radial-gradient(
            ellipse,
            rgba(225,238,225,.30),
            rgba(210,225,215,.08) 45%,
            transparent 72%
        );

    animation:
        forestFogOne
        18s
        ease-in-out
        infinite alternate;
}


/* FOG 2 */

.fog-two{
    top:43%;

    height:32%;

    opacity:.24;

    background:
        radial-gradient(
            ellipse,
            rgba(230,240,230,.26),
            transparent 68%
        );

    animation:
        forestFogTwo
        25s
        ease-in-out
        infinite alternate;
}


/* FOG 3 */

.fog-three{
    top:63%;

    height:24%;

    opacity:.16;

    background:
        radial-gradient(
            ellipse,
            rgba(215,230,220,.22),
            transparent 70%
        );

    animation:
        forestFogThree
        31s
        ease-in-out
        infinite alternate;
}


@keyframes forestFogOne{

    from{
        transform:
            translate3d(-8%,0,0)
            scale(1);
    }

    to{
        transform:
            translate3d(18%,10px,0)
            scale(1.08);
    }

}


@keyframes forestFogTwo{

    from{
        transform:
            translate3d(15%,0,0)
            scale(1.05);
    }

    to{
        transform:
            translate3d(-12%,-12px,0)
            scale(1);
    }

}


@keyframes forestFogThree{

    from{
        transform:
            translate3d(-5%,0,0);
    }

    to{
        transform:
            translate3d(15%,-8px,0);
    }

}


/* =========================================================
   FOREST EFFECT CONTAINERS
========================================================= */

#forestParticles,
#forestLeaves,
#forestBirds,
#heroForestBirds{
    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;
}


#forestParticles{
    z-index:6;
}

#forestBirds{
    z-index:7;
}

#forestLeaves{
    z-index:8;
}


/* =========================================================
   HERO BIRDS
========================================================= */

#heroForestBirds{
    z-index:5;
}


/*
Hero ka text aur buttons
birds ke upar rahenge.
*/

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


/* =========================================================
   GOLDEN PARTICLES / FIREFLIES
========================================================= */

.forest-particle{
    position:absolute;

    border-radius:50%;

    background:#f1d176;

    box-shadow:
        0 0 5px #f1d176,
        0 0 12px rgba(241,209,118,.65);

    opacity:0;

    animation:
        forestParticleFloat
        linear
        infinite;
}


@keyframes forestParticleFloat{

    0%{
        opacity:0;

        transform:
            translate3d(0,80px,0)
            scale(.6);
    }

    20%{
        opacity:.7;
    }

    60%{
        opacity:.9;
    }

    100%{
        opacity:0;

        transform:
            translate3d(30px,-220px,0)
            scale(1.2);
    }

}


/* =========================================================
   FALLING LEAVES
========================================================= */

.forest-leaf{
    position:absolute;

    top:-30px;

    border-radius:
        100% 0
        100% 0;

    background:#66804b;

    opacity:.65;

    filter:
        drop-shadow(
            0 2px 2px
            rgba(0,0,0,.30)
        );

    animation:
        forestLeafFall
        linear
        forwards;
}


@keyframes forestLeafFall{

    0%{
        opacity:0;

        transform:
            translate3d(0,-30px,0)
            rotate(0deg);
    }

    10%{
        opacity:.7;
    }

    30%{
        transform:
            translate3d(40px,30vh,0)
            rotate(130deg);
    }

    60%{
        transform:
            translate3d(-30px,65vh,0)
            rotate(300deg);
    }

    100%{
        opacity:0;

        transform:
            translate3d(70px,105vh,0)
            rotate(540deg);
    }

}


/* =========================================================
   FLYING BIRDS
========================================================= */

.forest-bird{
    position:absolute;

    left:-12vw;
    top:20%;

    width:42px;
    height:24px;

    opacity:.80;

    /*
     JS random bird size
    */

    --bird-scale:1;

    animation:
        forestBirdFly
        linear
        forwards;

    filter:
        drop-shadow(
            0 2px 2px
            rgba(0,0,0,.35)
        );
}


/* Bird SVG */

.forest-bird svg{
    display:block;

    width:100%;
    height:100%;

    overflow:visible;
}


/* LEFT WING */

.forest-bird .wing-left{
    transform-origin:48% 55%;

    animation:
        birdWingLeft
        .38s
        ease-in-out
        infinite alternate;
}


/* RIGHT WING */

.forest-bird .wing-right{
    transform-origin:52% 55%;

    animation:
        birdWingRight
        .38s
        ease-in-out
        infinite alternate;
}


/* HERO BIRDS */

#heroForestBirds .forest-bird{
    opacity:.88;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0,0,0,.45)
        );
}


/* =========================================================
   BIRD FLIGHT
========================================================= */

@keyframes forestBirdFly{

    0%{
        opacity:0;

        transform:
            translate3d(0,0,0)
            scale(var(--bird-scale,1));
    }

    8%{
        opacity:.82;
    }

    25%{
        transform:
            translate3d(32vw,-2vh,0)
            scale(var(--bird-scale,1));
    }

    50%{
        transform:
            translate3d(65vw,-5vh,0)
            scale(var(--bird-scale,1));
    }

    75%{
        transform:
            translate3d(95vw,-1vh,0)
            scale(var(--bird-scale,1));
    }

    92%{
        opacity:.78;
    }

    100%{
        opacity:0;

        transform:
            translate3d(125vw,3vh,0)
            scale(var(--bird-scale,1));
    }

}


/* =========================================================
   BIRD WING FLAPPING
========================================================= */

@keyframes birdWingLeft{

    from{
        transform:
            rotate(8deg)
            translateY(0);
    }

    to{
        transform:
            rotate(-22deg)
            translateY(3px);
    }

}


@keyframes birdWingRight{

    from{
        transform:
            rotate(-8deg)
            translateY(0);
    }

    to{
        transform:
            rotate(22deg)
            translateY(3px);
    }

}


/* =========================================================
   FOREST CONTENT
========================================================= */

.forest-content{
    position:relative;

    z-index:20;
}


/* =========================================================
   CENTER 80% GLASS / BLUR AREA

   Left 10% = clear forest
   Center 80% = subtle blur
   Right 10% = clear forest
========================================================= */

.forest-content::before{
    content:"";

    position:absolute;

    z-index:-1;

    top:0;
    bottom:0;

    left:5%;

    width:90%;

    background:
        rgba(3,15,7,42%);

    

    pointer-events:none;
}


/* =========================================================
   EXISTING SECTIONS TRANSPARENT
========================================================= */

.forest-content > section,
.forest-content > footer{
    position:relative;

    background:
        transparent !important;

    color:#f5efdc;
}


.forest-content .container{
    position:relative;

    z-index:2;
}


/* =========================================================
   GLASS CARDS
========================================================= */

.forest-content .card,
.forest-content .price-card,
.forest-content .pricing-card,
.forest-content .amenity,
.forest-content .location-card{

    background:
        rgba(5,37,16,.53) !important;

    border-color:
        rgba(218,184,79,.24) !important;

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.20);
}


/* =========================================================
   WHITE TEXT PREMIUM SHINE
========================================================= */

.forest-content h1,
.forest-content h2,

.forest-content h4{

    color:#ffffff !important;

    text-shadow:

        0 2px 4px
        rgba(0,0,0,.90),

        0 0 8px
        rgba(255,255,255,.25),

        0 0 20px
        rgba(255,255,255,.12),

        0 0 35px
        rgba(255,255,255,.06);
}


/* Paragraph + list */

.forest-content p,
.forest-content li{

    color:
        rgba(255,255,255,.94) !important;

    text-shadow:

        0 1px 3px
        rgba(0,0,0,.90),

        0 0 7px
        rgba(255,255,255,.10);
}


/* Normal spans */

.forest-content span{
    --forest-text:1;
}


/* =========================================================
   SECTION TAG GOLD COLOR
========================================================= */

.forest-content .section-tag,
.forest-content .section-heading > span{

    color:#e1c46d !important;

    text-shadow:

        0 1px 4px
        rgba(0,0,0,.80),

        0 0 10px
        rgba(225,196,109,.18);
}


/* =========================================================
   PRICE CARDS
========================================================= */

.forest-content .price-card{

    box-shadow:

        0 15px 40px
        rgba(0,0,0,.25),

        inset 0 1px 0
        rgba(255,255,255,.04);
}


.forest-content .price-card:hover{

    border-color:
        rgba(218,184,79,.55) !important;

    background:
        rgba(5,45,18,.68) !important;
}


/* =========================================================
   AMENITIES
========================================================= */

.forest-content .amenities-overlay{
    background:
        rgba(2,12,5,.10) !important;
}


/* =========================================================
   LOCATION MAP
========================================================= */

.forest-content .location-map{

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.30);
}


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

.forest-content .gallery-item{

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.30);
}


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

@media(max-width:768px){


    /* VIDEO */

    .forest-bg-video{

        inset:0;

        width:100%;
        height:100%;

        transform:none;

        object-position:center;
    }


    /* RAYS */

    .forest-rays{

        width:100%;

        opacity:.28;
    }


    /* FOG */

    .forest-fog{

        width:220%;

        left:-60%;
    }


    /* CENTER GLASS */

    .forest-content::before{

        left:3%;

        width:94%;

        background:
            rgba(3,15,7,.1);

        
    }


    /* CONTAINER */

    .forest-content .container{

        padding-left:0px;
        padding-right:0px;
    }


    /* FOREST BIRDS */

    .forest-bird{

        width:30px;
        height:18px;
    }


    /* HERO BIRDS */

    #heroForestBirds .forest-bird{

        width:26px;
        height:16px;
    }


    /* Slightly reduce text glow mobile */

    .forest-content h1,
    .forest-content h2,
    .forest-content h3,
    .forest-content h4{

        text-shadow:

            0 2px 4px
            rgba(0,0,0,.90),

            0 0 7px
            rgba(255,255,255,.18),

            0 0 15px
            rgba(255,255,255,.08);
    }

}


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

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

    .forest-rays,
    .forest-fog,
    .forest-particle,
    .forest-leaf,
    .forest-bird,
    .forest-bird .wing-left,
    .forest-bird .wing-right{

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;
    }

}

/* =========================================================
   HERO FOREST EFFECTS
========================================================= */

.hero{
    position:relative;
    overflow:hidden;
}

.hero-forest-effects{
    position:absolute;
    inset:0;
    z-index:5;
    overflow:hidden;
    pointer-events:none;
}

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


/* HERO PARTICLES / BIRDS / LEAVES */

#heroForestParticles,
#heroForestBirds,
#heroForestLeaves{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

#heroForestParticles{
    z-index:3;
}

#heroForestBirds{
    z-index:4;
}

#heroForestLeaves{
    z-index:5;
}


/* =========================================================
   HERO SUN RAYS
========================================================= */

.hero-forest-rays{
    position:absolute;

    z-index:1;

    top:-20%;
    right:-10%;

    width:65%;
    height:120%;

    opacity:.30;

    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,235,175,.03) 31%,
            rgba(255,235,175,.16) 40%,
            rgba(255,235,175,.04) 50%,
            transparent 62%
        );

    filter:blur(5px);

    animation:
        heroForestRays
        10s
        ease-in-out
        infinite alternate;
}


@keyframes heroForestRays{

    from{
        opacity:.20;
        transform:
            translateX(-20px)
            rotate(-1deg);
    }

    to{
        opacity:.42;
        transform:
            translateX(35px)
            rotate(2deg);
    }

}


/* =========================================================
   HERO FOG
========================================================= */

.hero-forest-fog{
    position:absolute;

    z-index:2;

    left:-50%;

    width:200%;

    pointer-events:none;

    filter:blur(40px);
}


.hero-fog-one{
    top:28%;
    height:28%;

    opacity:.20;

    background:
        radial-gradient(
            ellipse,
            rgba(235,245,235,.32),
            rgba(220,235,225,.08) 48%,
            transparent 72%
        );

    animation:
        heroFogOne
        20s
        ease-in-out
        infinite alternate;
}


.hero-fog-two{
    top:52%;
    height:25%;

    opacity:.14;

    background:
        radial-gradient(
            ellipse,
            rgba(235,245,235,.25),
            transparent 70%
        );

    animation:
        heroFogTwo
        27s
        ease-in-out
        infinite alternate;
}


@keyframes heroFogOne{

    from{
        transform:
            translate3d(-8%,0,0)
            scale(1);
    }

    to{
        transform:
            translate3d(20%,8px,0)
            scale(1.06);
    }

}


@keyframes heroFogTwo{

    from{
        transform:
            translate3d(15%,0,0);
    }

    to{
        transform:
            translate3d(-12%,-8px,0);
    }

}


/* =========================================================
   HERO PARTICLES
========================================================= */

.hero-forest-particle{
    position:absolute;

    border-radius:50%;

    background:#f4d77d;

    box-shadow:
        0 0 5px #f4d77d,
        0 0 12px rgba(244,215,125,.60);

    opacity:0;

    animation:
        heroParticleFloat
        linear
        infinite;
}


@keyframes heroParticleFloat{

    0%{
        opacity:0;

        transform:
            translate3d(0,60px,0)
            scale(.5);
    }

    20%{
        opacity:.65;
    }

    60%{
        opacity:.85;
    }

    100%{
        opacity:0;

        transform:
            translate3d(25px,-180px,0)
            scale(1.15);
    }

}


/* =========================================================
   HERO LEAVES
========================================================= */

.hero-forest-leaf{
    position:absolute;

    top:-30px;

    border-radius:
        100% 0
        100% 0;

    background:#647d45;

    opacity:.65;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0,0,0,.35)
        );

    animation:
        heroLeafFall
        linear
        forwards;
}


@keyframes heroLeafFall{

    0%{
        opacity:0;

        transform:
            translate3d(0,-30px,0)
            rotate(0deg);
    }

    10%{
        opacity:.7;
    }

    35%{
        transform:
            translate3d(45px,35vh,0)
            rotate(150deg);
    }

    65%{
        transform:
            translate3d(-25px,68vh,0)
            rotate(330deg);
    }

    100%{
        opacity:0;

        transform:
            translate3d(65px,105vh,0)
            rotate(560deg);
    }

}


/* MOBILE */

@media(max-width:768px){

    .hero-forest-rays{
        width:100%;
        opacity:.25;
    }

    .hero-forest-fog{
        width:230%;
        left:-65%;
    }

}