/* =========================
   RESIDENTIAL PAGE
   Sindholt Group
========================= */


/* NAVBAR */

.navbar {

    position:fixed;

    top:0;
    left:0;

    width:100%;

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

    padding:20px 60px;

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

    backdrop-filter:blur(10px);

    z-index:10;

}


.logo-container img {

    width:60px;

}


.navbar nav {

    display:flex;

    gap:30px;

}


.navbar a {

    color:white;

    font-size:1rem;

    transition:.3s;

}


.navbar a:hover {

    color:#d4af37;

}



/* HERO SECTION */


.hero {

    min-height:100vh;

    background:

    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.85)
    ),

    url("../images/residential/hero.jpg");


    background-size:cover;

    background-position:center;


    display:flex;

    align-items:center;

    justify-content:center;


    text-align:center;

    padding:40px;

}



.hero-content {

    max-width:900px;

}


.hero h1 {

    font-size:4rem;

    margin-bottom:25px;

    color:white;

}


.hero p {

    font-size:1.2rem;

    color:#ddd;

    line-height:1.7;

    margin-bottom:40px;

}



/* BUTTONS */


.buttons {

    display:flex;

    justify-content:center;

    gap:20px;

}


.btn {

    display:inline-block;

    padding:15px 35px;

    border-radius:50px;

    background:#d4af37;

    color:#000;

    font-weight:bold;

    transition:.3s;

}


.btn:hover {

    transform:translateY(-4px);

    box-shadow:
    0 10px 30px rgba(212,175,55,.35);

}


.secondary {

    background:transparent;

    color:white;

    border:1px solid #d4af37;

}



/* SERVICES */


.services-preview {

    padding:100px 60px;

    background:#0b0b0b;

    text-align:center;

}



.services-preview h2,
.why-us h2,
.cta h2 {

    font-size:2.8rem;

    margin-bottom:20px;

}



.section-text {

    color:#bbb;

    margin-bottom:60px;

}



.service-grid {

    display:grid;

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

    gap:30px;

}



.service-card {

    background:

    rgba(255,255,255,.05);


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


    padding:40px 25px;


    border-radius:20px;


    transition:.4s;

}



.service-card:hover {

    transform:translateY(-10px);

    border-color:#d4af37;

}



.service-card h3 {

    color:#d4af37;

    margin-bottom:15px;

}



.service-card p {

    color:#ccc;

    line-height:1.6;

}



/* WHY US */


.why-us {

    padding:100px 60px;

    background:#111;

    text-align:center;

}



.features {

    display:grid;

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

    gap:40px;

    margin-top:50px;

}



.features div {

    padding:35px;

}



.features h3 {

    color:#d4af37;

    margin-bottom:15px;

}



/* CTA */


.cta {

    padding:100px 40px;

    text-align:center;

    background:

    linear-gradient(
        rgba(0,0,0,.8),
        rgba(0,0,0,.8)
    ),

    url("../images/residential/cta.jpg");


    background-size:cover;

}



.cta p {

    color:#ccc;

    margin-bottom:35px;

}



/* FOOTER */


footer {

    padding:30px;

    text-align:center;

    background:#000;

    color:#777;

}



/* MOBILE */


@media(max-width:900px){


.navbar {

    padding:20px;

}


.navbar nav {

    display:none;

}


.hero h1 {

    font-size:2.5rem;

}


.service-grid {

    grid-template-columns:1fr;

}


.features {

    grid-template-columns:1fr;

}


}
.navbar {

    transition: transform .4s ease;

}


.navbar.hide {

    transform: translateY(-100%);

}