/* ==========================
   COMMERCIAL HOME PAGE
   Sindholt Group
========================== */
/* ==========================
   COMMERCIAL NAVBAR
========================== */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 60px;

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

    backdrop-filter: blur(12px);

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

    z-index: 1000;

    transition: transform .4s ease;

}


.logo-container {

    display: flex;

    align-items: center;

}


.logo-container img {

    width: 60px;

    height: auto;

}


.navbar nav {

    display: flex;

    align-items: center;

    gap: 35px;

}


.navbar nav a {

    color: white;

    text-decoration: none;

    font-size: .95rem;

    transition: .3s;

}


.navbar nav a:hover {

    color: #d4af37;

}


.navbar.hide {

    transform: translateY(-100%);

}
@media(max-width:900px) {

    .navbar {

        padding: 10px 25px;

    }


    .navbar nav {

        gap: 15px;

    }


    .navbar nav a {

        font-size: .8rem;

    }

}

/* HERO */

.commercial-hero {

    min-height: 90vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 120px 40px 80px;

    background:

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

    url("../images/backgrounds/commercial.jpg");

    background-size: cover;

    background-position: center;

}


.commercial-hero-content {

    max-width: 950px;

}


.eyebrow {

    color: #d4af37;

    font-size: .8rem;

    letter-spacing: 3px;

    font-weight: 600;

    margin-bottom: 20px;

}


.commercial-hero h1 {

    font-size: 4rem;

    line-height: 1.1;

    margin-bottom: 30px;

}


.commercial-hero p:not(.eyebrow) {

    max-width: 800px;

    margin: 0 auto 40px;

    color: #d0d0d0;

    font-size: 1.15rem;

    line-height: 1.8;

}


/* BUTTONS */

.hero-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

}


.secondary-btn {

    display: inline-block;

    padding: 14px 30px;

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

    border-radius: 8px;

    color: white;

    text-decoration: none;

    transition: .3s;

}


.secondary-btn:hover {

    border-color: #d4af37;

    color: #d4af37;

}


/* INTRO */

.commercial-intro {

    padding: 120px 40px;

    text-align: center;

    background: #0b0b0b;

}


.commercial-intro h2 {

    font-size: 3rem;

    margin-bottom: 25px;

}


.commercial-intro > p:last-child {

    max-width: 850px;

    margin: auto;

    color: #bbb;

    line-height: 1.8;

    font-size: 1.05rem;

}


/* SERVICES */

.commercial-services {

    display: grid;

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

    gap: 1px;

    background: rgba(212,175,55,.15);

}


.commercial-service-card {

    min-height: 380px;

    padding: 60px;

    background: #101010;

    transition: .4s;

}


.commercial-service-card:hover {

    background: #151515;

}


.service-number {

    color: #d4af37;

    font-size: .85rem;

    letter-spacing: 2px;

    margin-bottom: 50px;

}


.commercial-service-card h3 {

    font-size: 2rem;

    margin-bottom: 20px;

}


.commercial-service-card p {

    max-width: 500px;

    color: #aaa;

    line-height: 1.7;

    margin-bottom: 30px;

}


.commercial-service-card a {

    color: #d4af37;

    text-decoration: none;

    font-weight: 600;

}


.commercial-service-card a:hover {

    text-decoration: underline;

}


/* CTA */

.commercial-cta {

    padding: 120px 40px;

    text-align: center;

    background:

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

    url("../images/backgrounds/commercial.jpg");

    background-size: cover;

    background-position: center;

}


.commercial-cta h2 {

    font-size: 3rem;

    margin-bottom: 20px;

}


.commercial-cta p:not(.eyebrow) {

    color: #ccc;

    margin-bottom: 35px;

}


/* MOBILE */

@media(max-width: 900px) {

    .commercial-hero h1 {

        font-size: 2.6rem;

    }


    .hero-buttons {

        flex-direction: column;

    }


    .commercial-services {

        grid-template-columns: 1fr;

    }


    .commercial-service-card {

        padding: 45px 30px;

    }


    .commercial-intro h2,
    .commercial-cta h2 {

        font-size: 2.3rem;

    }

}
.logo-container img {
    width: 60px;
}