/* ------------------------------ */
/* hero section here  */
/* ------------------------------ */

#hero-about {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 350px;
    width: 100%;
}
@media (max-width: 800px) {
    #hero-about {
        min-height: 200px;
    }
}
#hero-about::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(
        45deg,
        rgba(0, 0, 2555, 0.3),
        rgba(255, 0, 0, 0.4)
    );
}
#hero-about img {
    position: absolute;
    object-fit: cover;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
/* ------------------------------ */
/* rizco builders styles here  */
/* ------------------------------ */

.builder-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.builder-images img {
    height: 350px;
}
.builder-images img:hover {
    filter: brightness(80%);
}
#builders-services > div {
    max-width: 70%;
    margin: auto;
    font-size: 2.3rem;
    text-align: center;
}

@media (max-width: 1200px) {
    #builders-services > div {
        max-width: 100%;
        font-size: 2rem;
    }
    .builder-images {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    section > h1 {
        font-size: var(--h2);
    }
}
@media (max-width: 700px) {
    .builder-images {
        grid-template-columns: repeat(1, 1fr);
    }
    .builder-images img {
        height: auto;
    }
}

/* ------------------------------ */
/* rizco construction styles here  */
/* ------------------------------ */

.steps ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding-left: 0;
}
.steps ul li {
    list-style: none;
    color: var(--dull-white);
    font-size: var(--h3);
    font-weight: 500;
    text-shadow: 1px 1px 1rem var(--blue);
    margin: var(--gutter-x-small) var(--gutter-small);
}
.steps ul > div {
    height: 300px;
    position: relative;
}
.steps ul > div img {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
section#step h2 {
    margin: var(--gutter-x-small) 0;
}
.steps ul > div:hover {
    filter: brightness(80%);
}

.step-details > section:nth-child(even) {
    display: flex;
    justify-content: flex-end;
}
.step-details > section:nth-child(even) > div {
    background-color: var(--dark-red);
    color: var(--dull-white);
    box-shadow: 1px 1px 1rem var(--dark-red);
}
.step-details > section:nth-child(even) ::selection {
    background-color: var(--blue) !important;
    color: var(--dull-white) !important;
}
.step-details > section:nth-child(even) > div h2 {
    color: var(--dull-white);
}
.step-details > section:nth-child(odd) > div {
    background-color: var(--dull-white);
    box-shadow: 1px 1px 1rem var(--dull-white);
}
.step-details > section > div {
    width: 70%;
    padding: var(--gutter-x-small);
    border-radius: 6px;
}
@media (max-width: 1200px) {
    .steps ul {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 700px) {
    .steps ul {
        grid-template-columns: repeat(1, 1fr);
    }
    .step-details > section > div {
        width: 100%;
    }
}

/* ------------------------------ */
/* solar solution styles here  */
/* ------------------------------ */

.solar-intro {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 3rem;
}
.solar-intro p {
    flex-basis: 60%;
    width: 100%;
    font-size: 2rem;
}
.solar-intro img {
    flex-basis: 40%;
    width: 100%;
    height: 300px;
}
@media (max-width: 1000px) {
    .solar-intro {
        flex-direction: column;
    }
    .solar-intro p {
        text-align: center;
    }
    .solar-intro img {
        height: auto;
    }
}