/* ==========================
   COMMERCIAL SOLUTIONS
   Sindholt Group
========================== */


.commercial-solutions-hero {

    min-height: 80vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 120px 40px 70px;

    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-solutions-hero > div {

    max-width: 900px;

}


.commercial-solutions-hero h1 {

    font-size: 3.8rem;

    margin-bottom: 25px;

}


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

    color: #ccc;

    font-size: 1.15rem;

    line-height: 1.8;

    margin-bottom: 40px;

}



/* SOLUTION SECTIONS */


.commercial-solution {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 600px;

    background: #0b0b0b;

}


.commercial-solution.reverse {

    direction: rtl;

}


.commercial-solution.reverse
.commercial-solution-content {

    direction: ltr;

}


.commercial-solution-image {

    background-size: cover;

    background-position: center;

}


.maintenance-image {

    background-image:
        url("../images/backgrounds/commercial.jpg");

}


.exterior-image {

    background-image:
        url("../images/backgrounds/commercial.jpg");

}


.facility-image {

    background-image:
        url("../images/backgrounds/commercial.jpg");

}


.coordination-image {

    background-image:
        url("../images/backgrounds/commercial.jpg");

}


.commercial-solution-content {

    padding: 90px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.commercial-solution-content h2 {

    font-size: 2.8rem;

    margin-bottom: 25px;

}


.commercial-solution-content > p:not(.eyebrow) {

    color: #bbb;

    line-height: 1.8;

    max-width: 600px;

    margin-bottom: 30px;

}


.commercial-solution-content ul {

    list-style: none;

    padding: 0;

}


.commercial-solution-content li {

    color: #eee;

    margin-bottom: 14px;

    padding-left: 25px;

    position: relative;

}


.commercial-solution-content li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 8px;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #d4af37;

}



/* CTA */


.commercial-solutions-cta {

    text-align: center;

    padding: 120px 40px;

    background: #111;

}


.commercial-solutions-cta h2 {

    font-size: 3rem;

    margin-bottom: 20px;

}


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

    color: #ccc;

    margin-bottom: 35px;

}



/* MOBILE */


@media(max-width: 900px) {

    .commercial-solution {

        grid-template-columns: 1fr;

    }


    .commercial-solution.reverse {

        direction: ltr;

    }


    .commercial-solution-image {

        min-height: 400px;

    }


    .commercial-solution-content {

        padding: 60px 30px;

    }


    .commercial-solutions-hero h1 {

        font-size: 2.6rem;

    }


    .commercial-solutions-cta h2 {

        font-size: 2.3rem;

    }

}