:root{
    --charcoal:#151515;
    --black:#090909;
    --crimson:#8B1E2D;
    --ivory:#F7F4EE;
    --sand:#E8DFD1;
    --gray:#B8B8B8;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--ivory);
    color:#222;
    line-height:1.6;
}

h1,h2,h3{
    font-family:'Montserrat',sans-serif;
}

header{
    position:sticky;
    top:0;
    z-index:999;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 50px;
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,.92),
      rgba(0,0,0,.75)
    );
    backdrop-filter:blur(4px);
}

.brand{
    color:white;
    font-weight:800;
    letter-spacing:2px;
}

.nav-links{
    display:flex;
    gap:32px;
    list-style:none;
}

.nav-links a{
    color:white;
    text-decoration:none;
    font-weight:500;
}

.nav-links a:hover{
    color:var(--crimson);
}

.contact-btn{
    background:var(--crimson);
    padding:12px 20px;
    border-radius:8px;
}

.hero{
    height:100vh;
    position:relative;
    background-image:url('images/hero-desert-logo.jpg');
    background-position:center top;
    background-size:contain;
    background-repeat: no-repeat;
    background-color: #111;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.22);
}

.tagline-wrap {
    position: absolute;
    left: 62%;
    top: 40%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    width: 800px;
}

.tagline-wrap h1{
    color:white;
    font-size:2rem;
    letter-spacing:2px;
    text-transform:uppercase;
}

.tagline-wrap p{
    color:#f0f0f0;
    margin-top:18px;
    font-size:1.15rem;
}

.hero-btn{
    display:inline-block;
    margin-top:30px;
    padding:15px 32px;
    background:var(--crimson);
    color:white;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
}

.section-label{
    color:var(--crimson);
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:15px;
}

.services{
    padding:100px 40px;
    text-align:center;
}

.services h2{
    font-size:2.3rem;
    margin-bottom:50px;
}

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.card{
    background:white;
    border-radius:18px;
    padding:35px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.card h3{
    color:var(--crimson);
    margin-bottom:15px;
}

.why-bard{
    background:var(--charcoal);
    color:white;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    padding:100px 60px;
}

.why-left h2{
    font-size:2.2rem;
    margin-bottom:20px;
}

.why-right{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.benefit{
    padding:20px;
}

.benefit h3{
    color:var(--crimson);
    margin-bottom:10px;
}

footer{
    background:var(--black);
    color:#ccc;
    padding:60px 20px;
}

.footer-content{
    max-width:1000px;
    margin:auto;
    text-align:center;
}

.email{
    color:white;
    margin:20px 0;
    font-weight:700;
}

#menu-toggle{
    display:none;
}

.hamburger{
    display:none;
    color:white;
    font-size:2rem;
    cursor:pointer;
}

@media (max-width:950px){
    .hamburger{
        display:block;
    }

    .nav-links{
        display:none;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#111;
        flex-direction:column;
        padding:30px;
    }

    #menu-toggle:checked ~ .nav-links{
        display:flex;
    }

    .why-bard{
        grid-template-columns:1fr;
    }

    .tagline-wrap{
        margin-top:140px;
    }

    .tagline-wrap h1{
        font-size:1.35rem;
    }

    .navbar{
        padding:20px;
    }
}