:root {
    --black: #111122;
    --gray: #3e3e4c;
    --blue: #1785CE;
    font-family: "Oxanium", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: .1rem;
}

@keyframes fade {
    from {
        opacity: .5;
    }

    to {
        opacity: 1;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    color: white;
}

#header {
    width: 100vw;
    height: fit-content;
    padding: 2em;

    background-color: var(--black);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    border-bottom-width: .25em;
    border-bottom-color: var(--blue);
    border-bottom-style: inset;
}

.header-brand {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
}

.header-brand * {
    margin-right: 1em;
}

.logo {
    width: 5em;
    aspect-ratio: 1/1;
}

.company-name {
    font-size: 2em;
}

.nav-links {
    width: fit-content;
    height: fit-content;
    align-items: center;
    display: flex;
}

.nav-links * {
    margin-left: 1em;
}

.nav-separator {
    width: .1em;
    height: 1.75em;
    background-color: white;
}

.link {
    font-size: 1.5em;
    text-decoration-line: none;
}

#hero {
    width: 100vw;
    padding: 5em;
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--black);
}

.hero-image {
    width: 30em;
    aspect-ratio: 1/1;
    margin-bottom: 2em;
    border-radius: 2em;
}

.hero-container {
    width: 30em;
}

.hero-p1 {
    width: 100%;
    margin-bottom: .5em;
    font-size: 2.5em;
    line-height: 1.5em;
}

.hero-p2 {
    width: 100%;
    margin-bottom: 1.5em;
    font-size: 1.5em;
}

.hero-request {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-button {
    margin-bottom: .5rem;
    padding: 1.5rem 2rem;
    display: inline-block;
    background-color: var(--blue);
    border-radius: 1rem;

    font-size: 1.75em;
    font-weight: 700;
    text-decoration-line: none;
}

.hero-espanol {
    font-size: 1em;
    font-style: italic;
}


#services {
    width: 100vw;
    padding: 5em;
    gap: 3em;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--gray);
}

.section-header * {
    margin-bottom: .2em;
}

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

.section-title {
    font-size: 4em;
    text-align: center;
}

.section-separator {
    width: 20%;
    height: .5em;
    margin-bottom: 1em;
    border-radius: .2em;
    background-color: var(--blue);
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
}

.card, .main-card {
    min-width: 20em;
    max-width: 40em;
    height: fit-content;
    padding: 2em;

    border-radius: 2em;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;

    background-color: var(--black);
}

.card-title, .main-card-title {
    font-size: 2.5em;
}

.card p, .main-card p {
    text-align: center;
}

.card-desc, .main-card-desc {
    width: 80%;
    padding: 2em 0;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.main-card-desc {
    width: 100%;
}

.card-desc p, .main-card-desc p{
    font-weight: 800;
    text-align: left;
}

.card-list *, .main-card-list * {
    padding-left: 1.5em;
    display: list-item;
    list-style-position: inside;
    list-style-type: disc;
}

.main-card-list * {
    padding-left: unset;
}

.card-emergency {
    width: 9em;
    aspect-ratio: 1/1;
    background-color: white;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    border-radius: 2em;
    color: var(--black);
}

.card-emergency * {
    font-size: 2em;
    font-weight: 700;
    color: var(--blue);
}

.main-card {
    min-width: 20em;
    max-width: 100%;
}

.area-container {
    width: 70%;
    height: 20em;
    overflow: hidden;
    padding: 1.5em 4em;

    display: flex;
    flex-direction: column;
    gap: 2em;

    border-radius: 2em;

    background-image: url('images/site/chicago.webp');
    background-size: stretch;
    background-position: center;
    background-color: var(--gray);
    background-blend-mode: multiply;
}

.area-title {
    height: 2em;
    font-size: 2em;
}

.area-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.area-list * {
    font-size: 1.5em;
    display: list-item;
    list-style-position: inside;
    list-style-type: disc;
}

#about {
    width: 100vw;
    padding: 5em;
    gap: 3em;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--black);
}

.about-desc {
    width: 50em;
    height: fit-content;
    text-align: center;
    font-size: 1.5em;
}

.review {
    width: fit-content;
    height: fit-content;
    display: flex;
    padding: 3em;
    flex-wrap: wrap-reverse;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.review-desc {
    font-size: 1.75em;
    text-align: center;
}

.review-link {
    color: var(--blue);
    text-decoration: none;
}

.review-icons {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-wrap: nowrap;
    text-decoration: none;
}

.review-icon {
    width: 6em;
    aspect-ratio: 1/1;
    margin: 1em;
}

.work-container {
    width: 100%;
    height: fit-content;
    padding: 3em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    background-color: var(--gray);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.work-title {
    font-size: 2.5em;
}

.carousel {
    position: relative;
    width: 100%;
    height: fit-content;
    margin: auto;
}

.carousel-inner {
    display: flex;
    justify-content: center;
}

.carousel img {
    height: 60vh;
    object-fit: contain;
    display: none;
}

img.displayImage {
    display: block;
    animation-name: fade;
    animation-duration: 1.5s;
}

.carousel-controls {
    margin-top: 2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.carousel button {
    width: 2em;
    aspect-ratio: 1/1;
    border-radius: 1em;
    font-size: 2em;
    background-color: var(--blue);
    color: white;
    border: none;
    cursor: pointer;
    padding-bottom: .2em;
}

.carousel button:active {
    opacity: .5;
}

.carousel-number {
    font-size: 2em;
}

#quote {
    width: 100%;
    height: fit-content;
    overflow: hidden;
    padding: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--gray);
}

.form {
    width: 40em;
    height: 95em;
    margin: 0;
    padding: 0;
    padding-top: .5em;
    background-color: var(--gray);
    border: 3px solid var(--gray);
}

#footer {
    width: 100%;
    height: fit-content;
    overflow: hidden;
    padding: 2em;
    background-color: var(--black);
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap-reverse;
    justify-content: space-evenly;
    align-items: flex-end;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1em;
}

.footer-info {
    height: fit-content;
    display: flex;
    gap: 3em;
    justify-content: space-between;
}

.footer-link {
    text-decoration: none;
}

.copyright {
    font-size: .75em;
    text-align: center;
}

.contact,
.hours {
    width: fit-content;
    height: fit-content;
}

.footer-subtitle {
    font-size: 1.25em;
    font-weight: 700;
}

.footer-desc,
.footer-hours * {
    margin: .5em 0em;
    font-size: 1em;
}

/*ICONS*/
.service-icons {
    width: 70px;
    aspect-ratio: 1/1;
}

#bolt-icon {
    display: inline-block;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.69 2.21L4.33 11.49c-.64.58-.28 1.65.58 1.73L13 14l-4.85 6.76c-.22.31-.19.74.08 1.01c.3.3.77.31 1.08.02l10.36-9.28c.64-.58.28-1.65-.58-1.73L11 10l4.85-6.76c.22-.31.19-.74-.08-1.01a.77.77 0 0 0-1.08-.02'/%3E%3C/svg%3E");
    background-color: white;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

#building-icon {
    display: inline-block;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h3v-3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V16h3a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1zm1 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5M4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM7.5 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5m2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM4.5 8h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5m2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
    background-color: white;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

#home-icon {
    display: inline-block;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -22 512 512'%3E%3Cpath fill='%23000' d='M261.56 101.28a8 8 0 0 0-11.06 0L66.4 277.15a8 8 0 0 0-2.47 5.79L63.9 448a32 32 0 0 0 32 32H192a16 16 0 0 0 16-16V328a8 8 0 0 1 8-8h80a8 8 0 0 1 8 8v136a16 16 0 0 0 16 16h96.06a32 32 0 0 0 32-32V282.94a8 8 0 0 0-2.47-5.79Z'/%3E%3Cpath fill='%23000' d='m490.91 244.15l-74.8-71.56V64a16 16 0 0 0-16-16h-48a16 16 0 0 0-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0 0 43 267.56L250.5 69.28a8 8 0 0 1 11.06 0l207.52 198.28a16 16 0 0 0 22.59-.44c6.14-6.36 5.63-16.86-.76-22.97'/%3E%3C/svg%3E");
    background-color: white;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

@media only screen and (max-width: 1570px) {
    .card-container {
        justify-content: center;
    }

    .area-container {
        width: 40em;
        height: fit-content;
    }

    .about-desc {
        width: 100%;
    }
}

@media only screen and (max-width: 800px) {
    #header {
        justify-content: center;
    }

    .logo {
        width: 3em;
    }

    .company-name {
        font-size: 1.5em;
    }

    .link {
        font-size: 1em;
    }

    .hero-image {
        width: 25em;
    }

    #hero {
        padding: 1em;
    }

    .hero-p1 {
        font-size: 1.75em;
    }

    .hero-p2 {
        font-size: 1.25em;
    }

    #services {
        overflow: hidden;
        padding: 1em;
    }

    .service-icons {
        width: 50px;
    }

    .card-title, .main-card-title {
        font-size: 2em;
    }

    .card-desc, .main-card-desc {
        font-size: 1em;
    }

    .area-container {
        width: 20em;
        gap: 0;
    }

    .area-title {
        font-size: 1.75em;
    }

    .area-list * {
        font-size: 1em;
    }

    .carousel img {
        width: 100%;
        height: unset;
        aspect-ratio: 1/1;
    }

    .carousel button {
        width: 3em;
        height: 3em;
        border-radius: 1.5em;
        font-size: 1em;
    }

    .carousel-number {
        font-size: 1.5em;
        text-align: center;
    }

    .carousel-controls {
        margin-top: 1em;
    }

}

@media only screen and (max-width: 650px) {

    .hero-button {
        padding: 1rem 1.5rem;
        font-size: 1.25em;
    }


    .section-title {
        font-size: 2.5em;
    }

    .card, .main-card {
        margin: 1em;
        padding: 1em;
    }

    .card-emergency {
        width: 7em;
    }

    .card-emergency * {
        font-size: 1.5em;
    }

    #about {
        padding: 1.5em;
        gap: .75em;
    }

    .about-desc {
        font-size: 1.25em;
    }

    .review-desc {
        width: 90%;
        font-size: 1.5em;
    }

    .review-icon {
        width: 6em;
    }

    .form {
        width: 25em;
        height: 100em;
    }
    #footer {
        padding: 2em .5em;
    }
}

@media only screen and (max-width: 490px) {
    .header {
        justify-content: center;
    }

    .hero-container {
        width: 95%;
    }

    .header-brand {
        margin-bottom: 1rem;
    }

    .hero-image {
        width: 20em;
    }

    .footer-info {
        width: 100%;
        gap: .25em;
    }

    .form {
        width: 24em;
    }
}