/* =====================================================
   VARIABLES
===================================================== */

:root {

    --forest-dark: #172315;

    --forest: #304d24;

    --forest-light: #557b32;

    --leaf: #7ea83e;

    --lime: #b9d96b;

    --cream: #f4f0dc;

    --paper: #e7edc9;

    --yellow: #d8df72;

    --orange: #c68b39;

    --white: #ffffff;

    --black: #171b15;

    --gray: #69705e;

    --heading: "Bebas Neue", sans-serif;

    --editorial: "Playfair Display", serif;

    --hand: "Kalam", cursive;

    --body: "DM Sans", sans-serif;

    --container: 1180px;

}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: var(--body);

    background: var(--cream);

    color: var(--black);

    line-height: 1.6;

    overflow-x: hidden;

}


img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font-family: inherit;

}


/* =====================================================
   CONTAINER
===================================================== */

.container {

    width: min(90%, var(--container));

    margin: auto;

}


/* =====================================================
   LOADER
===================================================== */

.loader {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background: var(--forest-dark);

    color: var(--cream);

    display: grid;

    place-items: center;

    transition: .7s ease;

}


.loader.hide {

    opacity: 0;

    visibility: hidden;

}


.loader-logo {

    text-align: center;

}


.loader-logo strong {

    display: block;

    font-family: var(--heading);

    font-size: 42px;

    letter-spacing: 4px;

}


.loader-logo span {

    display: block;

    color: var(--lime);

    font-size: 8px;

    letter-spacing: 4px;

}


.camp-icon {

    font-size: 30px;

    color: var(--lime);

    margin-bottom: 10px;

}


/* =====================================================
   HEADER
===================================================== */

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 85px;

    z-index: 1000;

    display: flex;

    align-items: center;

    padding: 0 5%;

    justify-content: space-between;

    color: white;

    transition: .3s;

}


.header.scrolled {

    background: rgba(23,35,21,.95);

    backdrop-filter: blur(12px);

    height: 70px;

}


.logo {

    display: flex;

    align-items: center;

    gap: 10px;

}


.logo-icon {

    width: 42px;

    height: 42px;

    border: 1px solid rgba(255,255,255,.7);

    display: grid;

    place-items: center;

    color: var(--lime);

}


.logo strong {

    display: block;

    font-family: var(--heading);

    letter-spacing: 2px;

    font-size: 20px;

}


.logo small {

    display: block;

    font-size: 7px;

    letter-spacing: 2px;

    color: var(--lime);

}


.desktop-nav {

    display: flex;

    gap: 30px;

}


.desktop-nav a {

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.header-book {

    padding: 12px 22px;

    background: var(--lime);

    color: var(--forest-dark);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}


.menu-button {

    display: none;

    width: 43px;

    height: 43px;

    border: 1px solid white;

    background: transparent;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

}


.menu-button span {

    width: 18px;

    height: 2px;

    background: white;

}


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

.mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 900;

    background: var(--forest-dark);

    color: white;

    transform: translateX(100%);

    transition: .5s ease;

}


.mobile-menu.active {

    transform: translateX(0);

}


.mobile-menu-inner {

    padding: 120px 10% 40px;

    display: flex;

    flex-direction: column;

    gap: 15px;

}


.mobile-menu-inner a {

    font-family: var(--heading);

    font-size: 40px;

    border-bottom: 1px solid rgba(255,255,255,.1);

}


.mobile-book {

    margin-top: 20px;

    padding: 15px;

    background: var(--lime);

    color: var(--forest-dark);

    text-align: center;

    font-family: var(--body) !important;

    font-size: 12px !important;

}


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

.hero {

    height: 100vh;

    min-height: 700px;

    position: relative;

    overflow: hidden;

    color: white;

}


.hero-photo {

    position: absolute;

    inset: 0;

    background:

        url("images/hero.jpg")

        center / cover no-repeat;

    animation: heroZoom 12s ease-out forwards;

}


@keyframes heroZoom {

    from {

        transform: scale(1.08);

    }

    to {

        transform: scale(1);

    }

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            90deg,

            rgba(13,28,12,.85),

            rgba(13,28,12,.42),

            rgba(13,28,12,.15)

        );

}


.hero-content {

    position: absolute;

    left: 9%;

    top: 50%;

    transform: translateY(-45%);

    max-width: 800px;

}


.hero-brand {

    margin-bottom: 20px;

}


.hero-brand-top {

    display: block;

    font-family: var(--hand);

    color: var(--lime);

    font-size: 20px;

}


.hero-brand strong {

    display: block;

    font-family: var(--heading);

    font-size: 28px;

    letter-spacing: 5px;

}


.hero-brand-bottom {

    font-size: 8px;

    letter-spacing: 4px;

}


.hero h1 {

    font-family: var(--heading);

    font-size: clamp(65px, 9vw, 125px);

    line-height: .82;

    letter-spacing: 2px;

}


.hero h1 span {

    color: var(--lime);

}


.hero-content > p {

    margin-top: 25px;

    font-family: var(--hand);

    font-size: 19px;

    color: var(--cream);

}


.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 35px;

    padding: 14px 25px;

    background: var(--lime);

    color: var(--forest-dark);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}


.hero-stamp {

    position: absolute;

    right: 8%;

    top: 30%;

    width: 125px;

    height: 125px;

    border: 2px dashed var(--lime);

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transform: rotate(12deg);

}


.hero-stamp span {

    font-size: 7px;

    letter-spacing: 2px;

}


.hero-stamp strong {

    font-family: var(--heading);

    color: var(--lime);

    font-size: 35px;

}


.hero-bottom {

    position: absolute;

    bottom: 30px;

    left: 9%;

    display: flex;

    gap: 15px;

    font-size: 8px;

    letter-spacing: 2px;

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

}


.hero-leaf {

    position: absolute;

    color: var(--lime);

    opacity: .5;

    font-size: 80px;

}


.leaf-one {

    right: 20%;

    bottom: 10%;

    transform: rotate(-30deg);

}


.leaf-two {

    right: 5%;

    bottom: 25%;

    transform: rotate(35deg);

}


/* =====================================================
   STORY
===================================================== */

.story {

    position: relative;

    background: var(--paper);

    padding: 120px 0;

    overflow: hidden;

}


.paper-decoration {

    position: absolute;

    width: 500px;

    height: 500px;

    right: -250px;

    top: -250px;

    border-radius: 50%;

    background: var(--lime);

    opacity: .12;

}


.section-top {

    display: flex;

    justify-content: space-between;

    border-bottom: 1px solid rgba(48,77,36,.25);

    padding-bottom: 15px;

    color: var(--forest);

}


.section-top span {

    font-size: 9px;

    letter-spacing: 3px;

}


.section-top small {

    font-family: var(--heading);

    font-size: 22px;

}


.story-grid {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 90px;

    align-items: center;

    padding-top: 70px;

}


.story-image {

    height: 570px;

    position: relative;

    border: 10px solid var(--forest);

}


.image-caption {

    position: absolute;

    bottom: -1px;

    left: -1px;

    right: -1px;

    background: rgba(23,35,21,.9);

    color: white;

    padding: 20px;

}


.image-caption span {

    display: block;

    font-size: 7px;

    letter-spacing: 3px;

    color: var(--lime);

}


.image-caption strong {

    display: block;

    font-family: var(--heading);

    font-size: 35px;

    line-height: .9;

    margin-top: 8px;

}


.hand-label {

    font-family: var(--hand);

    color: var(--forest-light);

    font-size: 18px;

}


.story-content h2 {

    font-family: var(--heading);

    font-size: clamp(55px, 6vw, 80px);

    line-height: .9;

    margin: 20px 0 30px;

}


.story-content h2 span {

    color: var(--forest-light);

}


.story-content .lead {

    font-family: var(--editorial);

    font-size: 22px;

    line-height: 1.5;

}


.story-content p:not(.lead) {

    margin-top: 20px;

    color: var(--gray);

    font-size: 14px;

}


.story-sign {

    margin-top: 35px;

    border-left: 4px solid var(--forest-light);

    padding-left: 15px;

}


.story-sign span {

    display: block;

    font-size: 8px;

    letter-spacing: 2px;

}


.story-sign strong {

    display: block;

    font-family: var(--hand);

    color: var(--forest);

    font-size: 18px;

}


/* =====================================================
   ACTIVITY INTRO
===================================================== */

.activity-intro {

    min-height: 600px;

    position: relative;

    display: grid;

    place-items: center;

    text-align: center;

    color: white;

}


.activity-intro-bg {

    position: absolute;

    inset: 0;

    background:

        url("images/wildlife.jpg")

        center / cover no-repeat;

}


.activity-intro-overlay {

    position: absolute;

    inset: 0;

    background: rgba(20,38,16,.72);

}


.activity-intro-content {

    position: relative;

}


.activity-intro-content > span {

    font-family: var(--hand);

    font-size: 20px;

    color: var(--lime);

}


.activity-intro-content h2 {

    font-family: var(--heading);

    font-size: clamp(70px, 10vw, 130px);

    line-height: .8;

    margin: 20px 0;

}


.activity-intro-content h2 em {

    color: var(--lime);

    font-style: normal;

}


.activity-intro-content p {

    font-family: var(--editorial);

    font-size: 20px;

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

}


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

.activities {

    padding: 130px 0;

    background: var(--cream);

}


.activities-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 70px;

}


.section-number {

    display: block;

    color: var(--forest);

    font-size: 8px;

    letter-spacing: 3px;

    margin-bottom: 15px;

}


.activities-heading h2 {

    font-family: var(--heading);

    font-size: clamp(55px, 7vw, 90px);

    line-height: .85;

}


.activities-heading h2 em {

    color: var(--forest-light);

    font-style: normal;

}


.activities-heading > p {

    max-width: 300px;

    color: var(--gray);

    font-family: var(--editorial);

    font-size: 18px;

}


/* GRID */

.activity-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.activity-card {

    background: var(--forest);

    color: white;

    position: relative;

}


.card-large {

    grid-row: span 2;

}


.card-wide {

    grid-column: span 1;

}


.activity-photo {

    height: 320px;

}


.card-large .activity-photo {

    height: 510px;

}


.activity-info {

    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 15px;

    padding: 22px;

}


.activity-info > span {

    font-family: var(--heading);

    font-size: 28px;

    color: var(--lime);

}


.activity-info h3 {

    font-family: var(--heading);

    font-size: 36px;

    line-height: 1;

}


.activity-info p {

    font-size: 12px;

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

    margin-top: 7px;

}


/* =====================================================
   LAKE
===================================================== */

.lake-feature {

    display: grid;

    grid-template-columns: 1.25fr .75fr;

    min-height: 650px;

}


.lake-image {

    min-height: 600px;

}


.lake-content {

    background: var(--forest-dark);

    color: white;

    padding: 80px 12%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.lake-content > span {

    color: var(--lime);

    font-size: 9px;

    letter-spacing: 3px;

}


.lake-content h2 {

    font-family: var(--heading);

    font-size: clamp(60px, 6vw, 90px);

    line-height: .85;

    margin: 20px 0 30px;

}


.lake-content h2 em {

    color: var(--lime);

    font-style: normal;

}


.lake-content p {

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

    font-size: 14px;

}


.lake-content ul {

    list-style: none;

    margin: 25px 0;

}


.lake-content li {

    font-size: 12px;

    margin-bottom: 8px;

}


.lake-content li i {

    color: var(--lime);

    margin-right: 10px;

}


.green-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    align-self: flex-start;

    padding: 13px 20px;

    background: var(--lime);

    color: var(--forest-dark);

    font-size: 9px;

    font-weight: 700;

}


/* =====================================================
   COOKING
===================================================== */

.cooking-feature {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    min-height: 600px;

    background: var(--paper);

}


.cooking-content {

    padding: 80px 12%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.cooking-content > span {

    color: var(--forest);

    font-size: 9px;

    letter-spacing: 3px;

}


.cooking-content h2 {

    font-family: var(--heading);

    font-size: clamp(55px, 6vw, 85px);

    line-height: .85;

    margin: 20px 0;

}


.cooking-content h2 em {

    color: var(--forest-light);

    font-style: normal;

}


.cooking-content p {

    color: var(--gray);

    font-size: 14px;

}


.cooking-note {

    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid rgba(48,77,36,.2);

}


.cooking-note strong {

    display: block;

    font-family: var(--heading);

    font-size: 24px;

    color: var(--forest);

}


.cooking-note span {

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--gray);

}


/* =====================================================
   DESTINATIONS
===================================================== */

.destinations {

    padding: 130px 0;

    background: var(--forest-dark);

    color: white;

}


.destinations-heading {

    max-width: 650px;

    margin-bottom: 70px;

}


.destinations-heading > span {

    font-size: 8px;

    letter-spacing: 3px;

    color: var(--lime);

}


.destinations-heading h2 {

    font-family: var(--heading);

    font-size: clamp(60px, 7vw, 90px);

    line-height: .85;

    margin: 20px 0;

}


.destinations-heading h2 em {

    color: var(--lime);

    font-style: normal;

}


.destinations-heading p {

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

    max-width: 500px;

}


/* DESTINATION GRID */

.destination-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

}


.destination {

    position: relative;

    overflow: hidden;

}


.destination-image {

    height: 300px;

    position: relative;

}


.destination-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.65),
        transparent 60%
    );

}


.destination-image img {

    transition: .6s;

}


.destination:hover img {

    transform: scale(1.08);

}


.destination-image > span {

    position: absolute;

    z-index: 2;

    top: 15px;

    left: 15px;

    font-family: var(--heading);

    color: var(--lime);

    font-size: 25px;

}


.destination-text {

    position: absolute;

    z-index: 3;

    bottom: 18px;

    left: 18px;

}


.destination-text h3 {

    font-family: var(--heading);

    font-size: 30px;

    line-height: .9;

}


.destination-text p {

    font-size: 9px;

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

    margin-top: 5px;

}


/* =====================================================
   DESTINATION QUOTE
===================================================== */

.destination-quote {

    min-height: 550px;

    position: relative;

    display: grid;

    place-items: center;

    text-align: center;

    color: white;

}


.destination-quote-bg {

    position: absolute;

    inset: 0;

    background:

        url("images/nature.jpg")

        center / cover no-repeat;

}


.destination-quote-overlay {

    position: absolute;

    inset: 0;

    background: rgba(25,45,19,.7);

}


.destination-quote-content {

    position: relative;

}


.destination-quote-content > span {

    font-size: 9px;

    letter-spacing: 4px;

    color: var(--lime);

}


.destination-quote-content h2 {

    font-family: var(--heading);

    font-size: clamp(70px, 9vw, 120px);

    line-height: .8;

    margin-top: 25px;

}


.destination-quote-content h2 em {

    color: var(--lime);

    font-style: normal;

}


/* =====================================================
   CONTACT
===================================================== */

.contact {

    background: var(--paper);

    position: relative;

    overflow: hidden;

    padding: 120px 0;

}


.contact-pattern {

    position: absolute;

    width: 700px;

    height: 700px;

    border-radius: 50%;

    border: 70px solid rgba(85,123,50,.08);

    right: -300px;

    top: -250px;

}


.contact-inner {

    position: relative;

    text-align: center;

}


.contact-heading > span {

    font-size: 8px;

    letter-spacing: 3px;

    color: var(--forest);

}


.contact-heading h2 {

    font-family: var(--heading);

    font-size: clamp(70px, 9vw, 120px);

    line-height: .8;

    margin: 20px 0;

}


.contact-heading h2 em {

    color: var(--forest-light);

    font-style: normal;

}


.contact-heading p {

    max-width: 500px;

    margin: auto;

    color: var(--gray);

}


.contact-buttons {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin: 40px 0 60px;

    flex-wrap: wrap;

}


.whatsapp-button,
.call-button,
.email-button {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 25px;

    font-size: 11px;

}


.whatsapp-button {

    background: #25d366;

    color: white;

}


.whatsapp-button small {

    display: block;

    font-size: 7px;

    letter-spacing: 2px;

}


.whatsapp-button span {

    text-align: left;

}


.call-button {

    background: var(--forest);

    color: white;

}


.email-button {

    border: 1px solid var(--forest);

    color: var(--forest);

}


.contact-details {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(48,77,36,.2);

    padding-top: 30px;

}


.contact-details span {

    display: block;

    font-size: 7px;

    letter-spacing: 2px;

    color: var(--gray);

}


.contact-details strong {

    display: block;

    margin-top: 8px;

    color: var(--forest);

    font-size: 13px;

}


/* =====================================================
   FOOTER
===================================================== */

.footer {

    background: var(--forest-dark);

    color: white;

    padding: 70px 0 25px;

}


.footer-top {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 50px;

    padding-bottom: 50px;

}


.footer-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: var(--heading);

    font-size: 25px;

    letter-spacing: 3px;

}


.footer-logo i {

    color: var(--lime);

}


.footer-brand p {

    max-width: 350px;

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

    font-size: 12px;

    margin-top: 15px;

}


.footer-links > span {

    display: block;

    color: var(--lime);

    font-size: 8px;

    letter-spacing: 2px;

    margin-bottom: 15px;

}


.footer-links a {

    display: block;

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

    font-size: 12px;

    margin-bottom: 8px;

}


.footer-bottom {

    border-top: 1px solid rgba(255,255,255,.1);

    padding-top: 20px;

    display: flex;

    justify-content: space-between;

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

    font-size: 8px;

    letter-spacing: 1px;

}


/* =====================================================
   FLOATING WHATSAPP
===================================================== */

.floating-whatsapp {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 500;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #25d366;

    color: white;

    display: grid;

    place-items: center;

    font-size: 27px;

    box-shadow: 0 8px 30px rgba(0,0,0,.25);

    transition: .3s;

}


.floating-whatsapp:hover {

    transform: scale(1.08);

}


/* =====================================================
   REVEAL
===================================================== */

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition: 1s ease;

}


.reveal.active {

    opacity: 1;

    transform: translateY(0);

}


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

@media (max-width: 1000px) {


    .desktop-nav,
    .header-book {

        display: none;

    }


    .menu-button {

        display: flex;

    }


    .story-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .activity-grid {

        grid-template-columns: 1fr 1fr;

    }


    .card-large {

        grid-row: auto;

    }


    .card-large .activity-photo {

        height: 320px;

    }


    .lake-feature,
    .cooking-feature {

        grid-template-columns: 1fr;

    }


    .lake-content,
    .cooking-content {

        padding: 80px 8%;

    }


    .destination-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .footer-top {

        grid-template-columns: 1fr 1fr;

    }

}


@media (max-width: 650px) {


    .header {

        height: 70px;

    }


    .hero {

        min-height: 680px;

    }


    .hero-content {

        left: 7%;

        right: 7%;

    }


    .hero h1 {

        font-size: 65px;

    }


    .hero-stamp {

        width: 90px;

        height: 90px;

        right: 6%;

        top: 18%;

    }


    .hero-stamp strong {

        font-size: 25px;

    }


    .hero-bottom {

        left: 7%;

        font-size: 7px;

    }


    .story,
    .activities,
    .destinations,
    .contact {

        padding: 90px 0;

    }


    .story-image {

        height: 420px;

    }


    .story-content h2 {

        font-size: 60px;

    }


    .activity-intro {

        min-height: 500px;

    }


    .activity-intro-content h2 {

        font-size: 75px;

    }


    .activities-heading {

        display: block;

    }


    .activities-heading > p {

        margin-top: 25px;

    }


    .activity-grid {

        grid-template-columns: 1fr;

    }


    .activity-photo,
    .card-large .activity-photo {

        height: 330px;

    }


    .lake-image {

        min-height: 400px;

    }


    .cooking-image {

        min-height: 400px;

    }


    .destination-grid {

        grid-template-columns: 1fr 1fr;

    }


    .destination-image {

        height: 230px;

    }


    .destination-text h3 {

        font-size: 25px;

    }


    .contact-details {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .footer-top {

        grid-template-columns: 1fr;

    }


    .footer-bottom {

        flex-direction: column;

        gap: 10px;

    }


    .floating-whatsapp {

        width: 52px;

        height: 52px;

        right: 18px;

        bottom: 18px;

    }

}