/*=========================================================
 CAMPBELL RIVER LODGE
 Version 2.0
 Designed & Built by Haydn Picton
 Development assisted by ChatGPT
=========================================================*/


/*=========================================================
 1. GLOBAL SETTINGS
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    /* Brand */

    --green:#31553a;
    --green-light:#467452;
    --green-dark:#243128;

    /* Backgrounds */

    --white:#ffffff;
    --cream:#f7f7f4;

    /* Text */

    --text:#333333;
    --heading:#222222;
    --body:#555555;
    --light:#ffffff;

    /* Effects */

    --shadow-soft:0 18px 45px rgba(0,0,0,.12);
    --shadow-large:0 30px 70px rgba(0,0,0,.18);

    --radius:22px;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:var(--cream);

    color:var(--text);

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

section{

    position:relative;

}

h1,h2,h3,h4{

    color:var(--heading);

    font-weight:300;

}

p{

    color:var(--body);

    line-height:1.8;

}

.section-tag{

    color:var(--green);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:18px;

}


/*=========================================================
 2. NAVIGATION
=========================================================*/

.nav{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:22px 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(20,35,25,.88);

    backdrop-filter:blur(12px);

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

    z-index:1000;

}

.logo{

    text-decoration:none;

    color:white;

}

.logo-top{

    display:block;

    letter-spacing:4px;

    font-size:.9rem;

}

.logo-bottom{

    display:block;

    font-size:2rem;

    font-weight:700;

    letter-spacing:7px;

}

.nav-right{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav ul{

    display:flex;

    list-style:none;

    gap:34px;

}

.nav ul a{

    color:white;

    text-decoration:none;

    font-weight:500;

    transition:.3s;

}

.nav ul a:hover{

    color:#9bd39b;

}


/*=========================================================
 NAVIGATION BUTTON
=========================================================*/

.nav-book{

    display:inline-block;

    background:white;

    color:var(--green);

    padding:14px 28px;

    border-radius:40px;

    text-decoration:none;

    font-weight:700;

    box-shadow:0 10px 24px rgba(0,0,0,.18);

    transition:all .3s ease;

}

.nav-book:hover{

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

    background:#f4f4f4;

    box-shadow:0 18px 35px rgba(0,0,0,.28);

}


/*=========================================================
 3. HERO
=========================================================*/

.hero{

    position:relative;

    height:100vh;

    min-height:760px;

    overflow:hidden;

}

.slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transition:opacity 2.5s ease;

    animation:kenburns 22s linear infinite;

}

.slide.active{

    opacity:1;

}

.one{

    background-image:url("../Images/Hero/hero.jpg");

}

.two{

    background-image:url("../Images/Hero/hero2.jpg");

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.03),
        rgba(0,0,0,.10)
    );

    z-index:1;

}

.hero-panel{

    position:absolute;

    left:8%;

    bottom:10%;

    width:min(560px,90%);

    padding:48px;

    border-radius:var(--radius);

    backdrop-filter:blur(12px);

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

    background:rgba(20,30,25,.10);

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

    color:white;

    z-index:10;

}

.hero-small{

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:.8rem;

    margin-bottom:18px;

}

.hero-panel h1{

    color:white;

    font-size:4.2rem;

    line-height:1.08;

    margin-bottom:22px;

}

.hero-text{

    color:white;

    font-size:1.15rem;

    line-height:1.8;

    margin-bottom:34px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}
/*=========================================================
WHY STAY WITH US
=========================================================*/

.amenities{

    position:relative;

    min-height:850px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:120px 8%;

}

.amenities-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.amenities::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.25);

}

.amenities-overlay{

    position:relative;

    z-index:2;

    width:min(760px,90%);

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

    backdrop-filter:blur(16px);

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

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

    border-radius:26px;

    padding:55px;

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

}

.amenities-overlay h2{

    color:white;

    font-size:3.2rem;

    margin:18px 0 25px;

}

.amenities-overlay p{

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

    margin-bottom:40px;

    font-size:1.1rem;

}

.amenities .section-tag{

    color:#d7edd6;

}

.amenities-grid{

    display:grid;

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

    gap:18px;

}

.amenity-card{

    display:flex;

    align-items:flex-start;

    gap:15px;

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

    padding:18px;

    border-radius:16px;

    transition:.35s;

}

.amenity-card:hover{

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

    transform:translateY(-5px);

}

.amenity-card span{

    font-size:1.8rem;

}

.amenity-card h3{

    color:white;

    margin-bottom:5px;

    font-size:1.15rem;

}

.amenity-card p{

    margin:0;

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

    font-size:.9rem;

}

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

@media(max-width:1000px){

    .amenities{

        grid-template-columns:1fr;

        gap:50px;

        padding:90px 6%;

    }

    .amenities-grid{

        grid-template-columns:1fr;

    }

}

/*=========================================================
 4. BUTTONS
=========================================================*/

.btn-primary,
.btn-secondary{

    display:inline-block;

    padding:16px 32px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    transition:all .3s ease;

}

.btn-primary{

    background:var(--green);

    color:white;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.btn-primary:hover{

    background:var(--green-light);

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

    box-shadow:0 18px 40px rgba(0,0,0,.28);

}

.btn-secondary{

    color:white;

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

    background:transparent;

}

.btn-secondary:hover{

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

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

}


/*=========================================================
 5. ANIMATIONS
=========================================================*/

@keyframes kenburns{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}


/*=========================================================
 6. MOBILE
=========================================================*/

@media(max-width:900px){

.nav{

    padding:12px 18px;

    gap:12px;

}

.logo-bottom{

    font-size:1.6rem;
    letter-spacing:5px;

}

.logo-top{

    font-size:.75rem;
    letter-spacing:3px;

}

.nav ul{

    gap:12px;

}

.nav ul a{

    font-size:.95rem;

}

.nav-book{

    padding:10px 22px;

    font-size:.95rem;

}

    .hero-panel{

        left:5%;
        right:5%;

        width:auto;

        padding:30px;

    }

    .hero-panel h1{

        font-size:2.8rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

}
/*=========================================================
7. CORPORATE
=========================================================*/

.corporate{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;

    padding:130px 8%;

    background:#ffffff;

}

.corporate-image img{

    width:100%;
    border-radius:var(--radius);

    box-shadow:var(--shadow-large);

}

.corporate-content{

    max-width:700px;

}

.corporate h2{

    font-size:3rem;

    margin:20px 0 30px;

}

.corporate p{

    font-size:1.15rem;

    margin-bottom:35px;

}

.corporate ul{

    display:grid;

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

    gap:18px;

    list-style:none;

    margin-bottom:40px;

}

.corporate li{

    background:#f6f6f3;

    padding:18px 22px;

    border-radius:12px;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.corporate li:hover{

    transform:translateY(-5px);

    background:white;

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}



/*=========================================================
8. ROOMS
=========================================================*/

.rooms{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    padding:130px 8%;

    background:#f8f8f5;

}

.rooms-content{

    max-width:720px;

}

.rooms h2{

    font-size:3rem;

    margin:20px 0 30px;

}

.rooms p{

    font-size:1.1rem;

    margin-bottom:35px;

}

.rooms-grid{

    display:grid;

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

    gap:22px;

    margin:40px 0;

}

.room-card{

    background:white;

    border-radius:18px;

    padding:26px;

    border:1px solid #ececec;

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

    transition:.35s;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    height:100%;

}

.room-card:hover{

    transform:translateY(-6px);

    box-shadow:0 24px 45px rgba(0,0,0,.16);

}

.room-card h3{

    color:var(--green);

    font-size:1.2rem;

    margin-bottom:12px;

}

.room-card p{

    font-size:.95rem;

    line-height:1.7;

    margin:0;

}

.rooms-features{

    display:grid;

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

    gap:18px;

    margin:40px 0;

}

.rooms-features div{

    background:#f6f6f3;

    padding:18px 22px;

    border-radius:12px;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.rooms-features div:hover{

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

    background:white;

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.rooms-image img{

    width:100%;

    border-radius:var(--radius);

    box-shadow:var(--shadow-large);

}



/*=========================================================
9. BEER & WINE
=========================================================*/

.beer-wine{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    padding:130px 8%;

    background:white;

}

.beer-content{

    max-width:680px;

}

.beer-content h2{

    font-size:3rem;

    margin:20px 0 30px;

}

.beer-content p{

    font-size:1.15rem;

    margin-bottom:35px;

}

.beer-content ul{

    display:grid;

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

    gap:18px;

    list-style:none;

    margin-bottom:40px;

}

.beer-content li{

    background:#f6f6f3;

    padding:18px;

    border-radius:12px;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.beer-content li:hover{

    transform:translateY(-5px);

    background:white;

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.beer-image img{

    width:100%;

    border-radius:var(--radius);

    box-shadow:var(--shadow-large);

    transition:.45s;

}

.beer-image img:hover{

    transform:scale(1.03);

}



/*=========================================================
10. GOOSE & GANDER
=========================================================*/

.goose-gander{

    display:grid;

    grid-template-columns:1.15fr 1fr;

    gap:80px;

    align-items:center;

    padding:130px 8%;

    background:#2d3f31;

    color:white;

}

.goose-gander h2{

    color:white;

    font-size:3rem;

    margin:20px 0 30px;

}

.goose-gander p{

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

    font-size:1.15rem;

    margin-bottom:35px;

}

.goose-gander .section-tag{

    color:#bddcb7;

}

.gng-image img{

    width:100%;

    border-radius:var(--radius);

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

}

.gng-features{

    display:grid;

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

    gap:18px;

    margin-bottom:40px;

}

.gng-features div{

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

    padding:18px;

    border-radius:12px;

    transition:.3s;

}

.gng-features div:hover{

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

    transform:translateY(-4px);

}

.goose-gander .btn-primary{

    background:white;

    color:var(--green);

}

.goose-gander .btn-primary:hover{

    background:#f3f3f3;

}



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

@media(max-width:1000px){

    .corporate,
    .rooms,
    .beer-wine,
    .goose-gander{

        grid-template-columns:1fr;

        gap:50px;

        padding:90px 6%;

    }

    .rooms-grid,
    .corporate ul,
    .beer-content ul,
    .gng-features,
    .rooms-features{

        grid-template-columns:1fr;

    }

}
/*=========================================================
11. FISHING
=========================================================*/

.fishing{

    position:relative;

    display:flex;

    align-items:center;

    min-height:760px;

    padding:140px 8%;

    background:url("../Images/Fishing/Fishing-Don.jpg") center 35%/cover no-repeat;

}

.fishing::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(20,35,25,.18);

}

.fishing-overlay{

    position:relative;

    z-index:2;

    max-width:650px;

    padding:55px;

    border-radius:var(--radius);

    backdrop-filter:blur(6px);

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

    background:rgba(20,35,25,.10);

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

}

.fishing h2{

    color:white;

    font-size:3.4rem;

    line-height:1.15;

    margin:20px 0 30px;

}

.fishing p{

    color:white;

    font-size:1.15rem;

    line-height:1.9;

}

.fish-stats{

    display:flex;

    gap:25px;

    margin-top:45px;

    padding-top:30px;

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

}

.fish-stats div{

    flex:1;

}

.fish-stats span{

    display:block;

    color:white;

    font-size:2rem;

    font-weight:700;

}

.fish-stats small{

    display:block;

    margin-top:8px;

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

    line-height:1.4;

}


/*=========================================================
12. EXPERIENCE
=========================================================*/

.experience{

    background:#f4f4f1;

    padding:140px 8%;

}

.experience-heading{

    max-width:900px;

    margin:0 auto 80px;

    text-align:center;

}

.experience-heading h2{

    font-size:3.2rem;

    margin:20px 0;

}

.experience-heading p{

    font-size:1.15rem;

    max-width:760px;

    margin:auto;

}

.experience-grid{

    display:grid;

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

    gap:35px;

}

.experience-card{

    background:white;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-soft);

    transition:.35s;

}

.experience-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-large);

}

.experience-card img{

    width:100%;

    height:480px;

    object-fit:cover;

    transition:.6s;

}

.experience-card:hover img{

    transform:scale(1.06);

}

.experience-info{

    padding:35px;

}

.experience-info h3{

    font-size:1.5rem;

    margin-bottom:18px;

}

.experience-info p{

    margin:0;

}


/*=========================================================
13. GALLERY
=========================================================*/

.gallery-section{

    background:white;

    padding:160px 8% 140px;

}

.gallery-header{

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.gallery-header h2{

    font-size:3.2rem;

    margin:20px 0;

}

.gallery-header p{

    max-width:760px;

    margin:auto;

}

.gallery-grid{

    display:grid;

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

    grid-auto-rows:260px;

    gap:24px;

}

.gallery-item{

    overflow:hidden;

    border-radius:var(--radius);

    box-shadow:var(--shadow-soft);

    transition:.35s;

}

.gallery-item:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-large);

}

.gallery-item.large{

    grid-row:span 2;

}

.gallery-item.wide{

    grid-column:span 2;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:transform .6s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/* Individual Image Positioning */

.gallery-item.eagle img{

    object-position:center 25%;

}

.gallery-item.bear img{

    object-position:70% center;

}


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

@media(max-width:1000px){

    .experience-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item.large,

    .gallery-item.wide{

        grid-column:auto;

        grid-row:auto;

    }

    .fish-stats{

        flex-direction:column;

    }

    .fishing{

        padding:100px 6%;

    }

    .gallery-section,

    .experience{

        padding:100px 6%;

    }
.hero{

    padding-top:150px;

}
}
/*=========================================================
14. FOOTER
=========================================================*/

.footer{

    background:var(--green-dark);

    color:white;

    padding:90px 8% 35px;

}

.footer-container{

    display:grid;

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

    gap:60px;

    margin-bottom:60px;

}

.footer h3{

    color:white;

    font-size:2rem;

    margin-bottom:25px;

}

.footer h4{

    color:#d8e6d8;

    margin-bottom:22px;

    font-size:1.15rem;

}

.footer p{

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

    line-height:1.9;

    margin-bottom:18px;

}

.footer ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer li{

    margin-bottom:14px;

}

.footer a{

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

    text-decoration:none;

    transition:all .3s ease;

}

.footer a:hover{

    color:white;

}


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

.footer .btn-primary{

    display:inline-block;

    margin-top:25px;

    padding:15px 30px;

    background:var(--green-light);

    color:white !important;

    font-weight:700;

    border-radius:40px;

    text-decoration:none;

    box-shadow:0 12px 28px rgba(0,0,0,.22);

    transition:all .3s ease;

}

.footer .btn-primary:hover{

    background:#5c8c68;

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

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

}


/*=========================================================
FOOTER SOCIAL LINKS
=========================================================*/

.footer-social{

    display:flex;

    gap:16px;

    margin-top:22px;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:.3s;

}

.footer-social a:hover{

    background:var(--green-light);

    transform:translateY(-3px);

}


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

.footer-bottom{

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

    padding-top:32px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    font-size:.92rem;

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

}

.footer-bottom strong{

    color:white;

}


/*=========================================================
GLOBAL CARD HOVER EFFECTS
=========================================================*/

.room-card,
.gallery-item,
.experience-card,
.corporate li,
.beer-content li,
.rooms-features div,
.gng-features div{

    transition:all .35s ease;

}

.room-card:hover,
.gallery-item:hover,
.experience-card:hover,
.corporate li:hover,
.beer-content li:hover,
.rooms-features div:hover,
.gng-features div:hover{

    transform:translateY(-6px);

}


/*=========================================================
IMAGE HOVER EFFECT
=========================================================*/

.rooms-image img,
.beer-image img,
.corporate-image img,
.gng-image img{

    transition:transform .45s ease;

}

.rooms-image:hover img,
.beer-image:hover img,
.corporate-image:hover img,
.gng-image:hover img{

    transform:scale(1.02);

}


/*=========================================================
UTILITY CLASSES
=========================================================*/

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}


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

@media(max-width:1000px){

    .footer-container{

        grid-template-columns:1fr;

        gap:40px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer .btn-primary{

        width:100%;

        text-align:center;

    }

}

@media(max-width:700px){

    .nav{

        padding:18px;

    }

    .hero-panel h1{

        font-size:2.3rem;

    }

    h2{

        font-size:2.2rem !important;

    }

    .rooms-grid,
    .experience-grid,
    .gallery-grid,
    .corporate ul,
    .beer-content ul,
    .rooms-features,
    .gng-features{

        grid-template-columns:1fr;

    }

}
/*=========================================================
BOOK HERO
=========================================================*/

.book-hero{

    position:relative;

    height:78vh;

    min-height:760px;

    overflow:hidden;

    padding-top:200px;

}

.book-hero-image{

    position:absolute;

    inset:0;

    background:url("../Images/River/River15.jpg");

    background-size:cover;

    background-position:center;

    animation:kenburns 25s linear infinite;

}

.book-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.25);

    z-index:1;

}

.book-hero-overlay{

    position:absolute;

    z-index:2;

    left:50%;

    top:62%;

    transform:translate(-50%,-50%);

    width:min(720px,90%);

    text-align:center;

    background:linear-gradient(
    180deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.08)
);

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

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

    border-radius:32px;

    padding:80px 70px;

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

}

.book-hero-overlay h1{

    color:white;

        font-size:4.3rem;

    font-weight:600;

    margin:20px 0;

}

.book-hero-overlay p{

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

    font-size:1.18rem;

   line-height:2.2;

    margin-bottom:45px;

}

.book-hero .section-tag{

    color:#d8ecd8;

}
.book-subtitle{

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

    font-size:2rem;

    font-weight:300;

    margin:-5px 0 30px;

    line-height:1.3;

}
.book-hero .btn-primary{

    padding:18px 38px;

    font-size:1.05rem;

}
/*=========================================================
BOOKING SECTION
=========================================================*/

.booking-section{

    padding:120px 8%;

    background:#f7f7f4;

}

.booking-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.booking-heading h2{

    font-size:3rem;

    margin:20px 0;

}

.booking-heading p{

    font-size:1.15rem;

    line-height:1.9;

    color:#555;

}

.booking-wrapper{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:50px;

    align-items:start;

}

.booking-form{

    background:white;

    border-radius:25px;

    padding:50px;

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

}

.booking-info{

    background:var(--green);

    color:white;

    border-radius:25px;

    padding:45px;

    position:sticky;

    top:120px;

}

.booking-info h3{

    margin-bottom:25px;

    font-size:2rem;

}

.booking-info ul{

    list-style:none;

    padding:0;

    margin:0;

}

.booking-info li{

    margin-bottom:18px;

    line-height:1.6;

}

.booking-note{

    margin-top:40px;

    padding:25px;

    border-radius:18px;

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

    line-height:1.8;

}
.booking-small{

    margin-top:25px;

    font-size:.95rem;

    color:#666;

    line-height:1.8;

}
/*=========================================================
BOOKING FORM
=========================================================*/

.enquiry-form h3{

    font-size:1.6rem;

    margin:0 0 30px;

    color:var(--green);

}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    margin-bottom:40px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    font-weight:600;

    margin-bottom:10px;

    color:#333;

}

.form-group input,
.form-group select,
.enquiry-form textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid #ddd;

    border-radius:14px;

    font-size:1rem;

    font-family:inherit;

    transition:.25s;

    background:white;

}

.form-group input:focus,
.form-group select:focus,
.enquiry-form textarea:focus{

    outline:none;

    border-color:var(--green);

    box-shadow:0 0 0 4px rgba(53,91,59,.15);

}

.enquiry-form textarea{

    resize:vertical;

    min-height:170px;

    margin-bottom:35px;

}

.checkbox-grid{

    display:grid;

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

    gap:15px;

    margin:30px 0;

}

.checkbox-grid label{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

.enquiry-form hr{

    border:none;

    border-top:1px solid #eee;

    margin:50px 0;

}

.enquiry-form .btn-primary{

    padding:18px 40px;

    font-size:1rem;

}
.booking-benefits{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:40px 0;

    flex-wrap:wrap;

}

.benefit-card{

    background:white;

    padding:15px 28px;

    border-radius:50px;

    font-weight:600;

    color:var(--green);

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

}
/*=========================================================
BOOKING FORM IMPROVEMENTS
=========================================================*/

.form-intro{

    margin-bottom:25px;

    color:#666;

    line-height:1.8;

}

.request-grid{

    display:grid;

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

    gap:16px;

    margin:35px 0;

}

.request-chip{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 20px;

    border:1px solid #ddd;

    border-radius:14px;

    cursor:pointer;

    transition:.3s;

    background:white;

}

.request-chip:hover{

    border-color:var(--green);

    background:#f6fbf6;

    transform:translateY(-2px);

}

.request-chip input{

    width:18px;

    height:18px;

    accent-color:var(--green);

}

.booking-disclaimer{

    background:#f6f6f3;

    border-left:5px solid var(--green);

    padding:20px;

    margin:35px 0;

    border-radius:12px;

    line-height:1.8;

    color:#555;

}

.submit-booking{

    width:100%;

    margin-top:15px;

    padding:20px;

    font-size:1.1rem;

}

.response-time{

    margin-top:20px;

    text-align:center;

    color:#666;

    font-size:.95rem;

}

@media(max-width:900px){

    .booking-wrapper{

        grid-template-columns:1fr;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .request-grid{

        grid-template-columns:1fr;

    }

}
/*=========================================================
LOCATION
=========================================================*/

.location{

    background:#f7f7f4;

    padding:110px 40px;

}

.location-header{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.location-header h2{

    font-size:clamp(2.4rem,5vw,4rem);

    color:#2d4532;

    margin:20px 0;

}

.location-header p{

    color:#666;

    line-height:1.9;

    max-width:760px;

    margin:auto;

}

.location-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:45px;

    align-items:stretch;

}

.map-container{

    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

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

    min-height:550px;

    transition:.35s;

}

.map-container:hover{

    transform:translateY(-6px);

    box-shadow:0 28px 65px rgba(0,0,0,.18);

}

.location-card{

    background:#fff;

    border-radius:24px;

    padding:40px;

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

    display:flex;

    flex-direction:column;

}

.location-card h3{

    font-size:2rem;

    color:#355b3b;

    margin-bottom:25px;

}

.location-card p{

    line-height:1.8;

    color:#555;

    margin-bottom:18px;

}

.location-card hr{

    margin:25px 0;

    border:none;

    border-top:1px solid #ddd;

}

.location-card ul{

    list-style:none;

    padding:0;

    margin:0 0 35px;

}

.location-card li{

    padding:12px 0;

    color:#444;

    border-bottom:1px solid #eee;

}

.location-card li:last-child{

    border-bottom:none;

}

.location-card .btn-primary{

    margin-top:auto;

    text-align:center;

}

@media(max-width:1000px){

.location-grid{

grid-template-columns:1fr;

}

.map-container{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    min-height:550px;

    box-shadow:0 20px 55px rgba(0,0,0,.18);

    transition:.35s;

    background:#ddd;

}

.map-container iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:0;

}

.map-container:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 75px rgba(0,0,0,.22);

}

.location{

padding:80px 20px;

}

}
.map-tag{

    display:inline-block;

    background:#355b3b;

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:15px;

}

.map-features{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:20px 0;

}

.map-features span{

    background:#f4f4f4;

    padding:8px 14px;

    border-radius:25px;

    font-size:.85rem;

}
/*=========================================================
MAP BADGES
=========================================================*/

.map-badge{

    position:absolute;

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

    backdrop-filter:blur(12px);

    padding:12px 18px;

    border-radius:16px;

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

    font-weight:700;

    color:#355b3b;

    animation:floatBadge 5s ease-in-out infinite;

}

.map-badge small{

    display:block;

    color:#666;

    font-size:.8rem;

    margin-top:4px;

    font-weight:500;

}

.badge-one{
    bottom:30px;
    right:25px;
}

.badge-two{
    bottom:110px;
    right:25px;
}

.badge-three{
    bottom:110px;
  left:25px;
}

@keyframes floatBadge{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.map-badge{

    text-decoration:none;
    cursor:pointer;
    color:#355b3b;

}

.map-badge:hover{

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

}
/*=========================================================
END OF FILE

Campbell River Lodge
Version 2.0

Designed & Built by Haydn Picton

July 2026
=========================================================*/