/* ======================================================
   CAMP MIKEY
   Mobile First
====================================================== */

/* ---------- Reset ---------- */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    color:#222;
    background:#fff;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

/* ---------- Variables ---------- */

:root{

    --blue:#20A8F4;
    --dark:#222;
    --light:#f7f8fb;
    --white:#fff;

    --radius:22px;

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

}

/* ---------- Typography ---------- */

h1,h2,h3{
    font-family:"Poppins",sans-serif;
}

h1{
    font-size:3.2rem;
    line-height:1.05;
    margin-bottom:24px;
}

h2{
    font-size:2.3rem;
    margin-bottom:20px;
}

p{
    color:#555;
}

/* ---------- Buttons ---------- */

.button{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    background:var(--blue);
    color:white;

    padding:18px 34px;

    border-radius:999px;

    font-weight:700;

    transition:.25s;

}

.button:hover{

    transform:translateY(-3px);

}

/* ---------- Hero ---------- */

.hero{

    position:relative;

    min-height:78vh;

    background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url(images/hero.jpeg);

    background-size:cover;
    background-position:center;

    color:white;

    display:flex;
    flex-direction:column;

}

.hero-overlay{

    position:absolute;
    inset:0;

}

.navbar{

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

    padding:18px 28px;
    position:relative;
    z-index:2;

}

.logo img{
    width:150px;
    height:auto;

    filter:
        drop-shadow(0 3px 3px rgba(0,0,0,.35))
        drop-shadow(0 8px 18px rgba(0,0,0,.22));
}

.logo{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.logo-name{
    margin-top:0px;

    font-family:"Poppins", sans-serif;
    font-size:1.5rem;
    font-weight:800;

    color:white;

    line-height:1;
    letter-spacing:.5px;

    text-shadow:
        0 2px 4px rgba(0,0,0,.45),
        0 5px 14px rgba(0,0,0,.25);
}

.nav-links{

    display:none;

    list-style:none;

}

.desktop-button{

    display:none;

}

.hero-content{

    position:relative;
    z-index:2;

    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    padding:0px 32px 25px;

    max-width:620px;

}

.eyebrow{

    color:white;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.85rem;

    margin-bottom:18px;

}

.hero h1{

    color:white;

}

.hero-text{

    color:white;

    font-size:1.1rem;

    margin-bottom:38px;

}

.hero-button{

    width:100%;

}

.scroll-indicator{

    color:white;

    text-align:center;

    padding-bottom:8px;

    font-size:30px;

}

/* ---------- Timeline ---------- */

.timeline{
    position:relative;
    margin-top:40px;
    margin-left:12px;
    padding-left:32px;
    border-left:3px solid #e6eef7;
}

.timeline-item{
    position:relative;
    margin-bottom:24px;
}

.timeline-item:last-child{
    margin-bottom:0;
}

.timeline-dot{
    position:absolute;
    left:-43px;
    top:8px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--blue);
    border:4px solid #fff;
    box-shadow:0 0 0 3px var(--blue);
}

.timeline-content h3{
    font-size:1.25rem;
    color:var(--dark);
    margin-bottom:2px;
    line-height:1.2;
}

.timeline-content p{
    color:#666;
    font-size:1rem;
}

#day{
    padding-top:70px;
    padding-bottom:70px;
}

/* ---------- Sections ---------- */

.section{

    padding:110px 28px;

}

.light{

    background:var(--light);

}

.container{

    width:min(1100px,100%);
    margin:auto;

}

.section-tag{

    color:var(--blue);

    font-weight:700;

    margin-bottom:12px;

}

.section-intro{

max-width:700px;

font-size:1.15rem;

line-height:1.9;

margin-bottom:60px;

color:#666;

}

.features{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    margin-top:50px;
}

.feature-card{

    background:white;

    border-radius:24px;

    padding:36px 30px;

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

    transition:.3s;

    border-top:5px solid var(--blue);

}

.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(0,0,0,.12);

}

.feature-card h3{

    font-size:1.4rem;

    margin-bottom:16px;

}

.feature-card p{

    line-height:1.8;

}

@media(min-width:900px){

    .features{
        grid-template-columns:repeat(2,1fr);
    }

}

/* ---------- Instagram ---------- */

.instagram-callout{

    text-align:left;

    margin-top:60px;

}

.instagram-callout p{

    font-size:1.1rem;

    margin-bottom:24px;

}

/* ---------- Gallery ---------- */

.gallery{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

    margin-top:50px;

}

.gallery img{

    width:100%;

    height:280px;

    object-fit:cover;

    border-radius:24px;

    box-shadow:var(--shadow);

    transition:transform .3s ease;

}

.gallery img:hover{

    transform:scale(1.03);

}

@media(min-width:768px){

    .gallery{

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

    }

}

@media(min-width:1100px){

    .gallery{

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

        gap:28px;

    }

}

/* ---------- Desktop ---------- */

@media(min-width:992px){

.hero{

min-height:90vh;

}

.navbar{
    padding:28px 5%;
    justify-content:space-between;
}

.logo img{
    width:190px;
    height:auto;
}

.nav-links{

display:flex;

gap:36px;

}

.nav-links a{

color:white;
font-weight:600;

}

.desktop-button{

display:inline-flex;

}

.hero-content{

padding-left:6%;

}

.hero-button{

width:auto;

}

h1{
    font-size:5rem;
    line-height:1.12;
    letter-spacing:-1px;
}

}

/* ---------- Dog Bus ---------- */

.split{
    display:grid;
    gap:80px;
    align-items:center;
}

.split img{

    width:100%;

    border-radius:32px;

    display:block;

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

}

.split p{
    margin:24px 0;
    max-width:550px;
}

@media(min-width:992px){

    .split{
        grid-template-columns:1fr 1fr;
    }

}

.split > div:last-child{
    margin-top:20px;
}

@media(min-width:992px){

    .split > div:last-child{
        margin-top:0;
    }

}

.split h2{

    margin-bottom:24px;

}

.split p{

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:24px;

}

.split .button{

    margin:20px 0 50px;

}

/* ---------- CTA ---------- */

.cta{

    background:white;

    text-align:center;

    padding:110px 28px;

}

.cta h2{

    font-size:2.8rem;

    margin:20px 0;

}

.cta .section-intro{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.cta .button{

    margin-top:20px;

}

.button i{

    margin-right:10px;

    font-size:1rem;

}

.button .fa-instagram{

    color:#E4405F;

    font-size:1.5rem;

    margin-right:5px;

    vertical-align:middle;

}

/* ---------- Footer ---------- */

footer{

    background:#222;

    color:white;

    padding:90px 28px;

}

.footer-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:50px;

}

.footer-logo{

    width:180px;

}

.footer-details{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-details h3{

    color:var(--white);

    margin-bottom:8px;

}

.footer-details p{

    color:#858383;

    line-height:1.8;

    margin:0;

}

.footer-social{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

}

.footer-social h3{

    color:rgb(255, 255, 255);

}

.footer-social p{

    color:#858383;

    max-width:340px;

    line-height:1.7;

}

.footer-social .button{

    margin-top:8px;

}

/* ---------- Booking Page ---------- */

.booking-page{
    background:#f7f8fb;
    color:var(--dark);
}

.booking-header{
    background:white;
    padding:24px 28px;
    text-align:center;
}

.booking-logo{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
}

.booking-logo img{
    width:140px;
    height:auto;
}

.booking-logo span{
    margin-top:4px;
    font-family:"Poppins", sans-serif;
    font-size:1.5rem;
    font-weight:800;
    color:var(--dark);
}

.booking-container{
    width:100%;
    max-width:850px;
    margin:0 auto;
}

.booking-intro{
    background:white;
    padding:10px 28px 70px;
}

.booking-intro h1{
    font-size:2.7rem;
    line-height:1.1;
    margin:16px 0 28px;
}

.booking-intro > .booking-container > p:not(.section-tag){
    font-size:1.05rem;
    line-height:1.8;
    color:#555;
    margin-bottom:18px;
}

.booking-notice{
    margin-top:35px;
    padding:24px;
    background:#eef5fc;
    border-left:5px solid var(--blue);
    border-radius:12px;
    line-height:1.7;
}

.booking-form-section{
    padding:70px 28px 100px;
}

.booking-form{
    display:flex;
    flex-direction:column;
    gap:35px;
}

.booking-form fieldset{
    background:white;
    border:none;
    border-radius:24px;
    padding:32px 24px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.form-section-title{
    font-family:"Poppins", sans-serif;
    font-size:1.5rem;
    font-weight:700;
    color:var(--dark);
    margin:0 0 28px;
    line-height:1.3;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:24px;
}

.form-grid .form-group{
    margin-bottom:0;
}

.form-group label{
    font-weight:600;
    line-height:1.5;
}

.form-group label small{
    display:block;
    margin-top:4px;
    font-size:.8rem;
    font-weight:400;
    color:#777;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:15px 16px;

    font:inherit;
    color:var(--dark);

    background:#fafafa;

    border:1px solid #d8d8d8;
    border-radius:12px;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.form-group textarea{
    resize:vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(0,119,200,.12);
    background:white;
}

.form-next-steps{
    background:#eef5fc;
    border-radius:20px;
    padding:30px 24px;
}

.form-next-steps h2{
    font-size:1.6rem;
    margin-bottom:12px;
}

.form-next-steps p{
    line-height:1.8;
    color:#555;
}

.form-confirmation{
    background:white;
    border-radius:16px;
    padding:22px;
}

.form-confirmation label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
    line-height:1.6;
}

.form-confirmation input{
    width:20px;
    height:20px;
    margin-top:2px;
    flex-shrink:0;
}

.booking-submit{
    border:none;
    cursor:pointer;
    align-self:stretch;
    text-align:center;
    font-family:inherit;
    font-size:1rem;
}

.booking-footer{
    background:#222;
    color:#eee;
    padding:50px 28px;
    text-align:center;
}

.booking-footer p{
    color:#eee;
    line-height:1.7;
    margin-bottom:15px;
}

.booking-footer a{
    color:white;
    font-weight:700;
}

/* ---------- Thank You Page ---------- */

.thanks-page{
    background:#f7f8fb;
}

.thanks-main{
    min-height:100vh;

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

    padding:50px 28px;
}

.thanks-content{
    width:100%;
    max-width:650px;

    background:white;

    text-align:center;

    padding:50px 28px;

    border-radius:28px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.thanks-logo{
    display:inline-flex;
    flex-direction:column;
    align-items:center;

    margin-bottom:45px;

    text-decoration:none;
}

.thanks-logo img{
    width:150px;
    height:auto;
}

.thanks-logo span{
    margin-top:4px;

    font-family:"Poppins", sans-serif;
    font-size:1.6rem;
    font-weight:800;

    color:var(--dark);
}

.thanks-content h1{
    font-size:2.5rem;
    line-height:1.15;

    margin:16px 0 22px;
}

.thanks-content > p:not(.section-tag){
    max-width:500px;

    margin:0 auto 35px;

    color:#555;

    font-size:1.05rem;
    line-height:1.8;
}

/* production refresh */