.nav-header {
    border-bottom: 1px solid var(--color-neutral);
}

/* Main banner + wrapper sections */
.main-banner {
    background-color: var(--color-1);
    display: flex;
    justify-content: center;
}
.main-banner-wrapper {
    padding: 2em 1em;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    grid-row-gap: 2em;
}

/* Main banner text section */
.main-banner .text {
    text-align: center;
    color: var(--color-2);
}
.main-banner .text h1 {
    font-size: 22px;
    margin-top: 0;
}
.main-banner .text p {
    font-size: 14px;
}

/* General link */
.text a {
    text-decoration: none;
    color: var(--color-2);
    border-radius: 10px;
    display: block;
    cursor: pointer;
    font-size: 14px;
    padding: 0.5em 0;
    margin: 0 1em;
}
/* Get a quote button */
.text .quote-btn {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    margin-bottom: 1em;
}
.quote-btn:hover {
    background-color: darkgreen!important;
}
/* View materials button */
.text .materials-btn {
    border: 2px solid var(--color-2);
}
.materials-btn:hover {
    background-color: lightgray;
    color: var(--color-1);
}

/* Main banner image section */
.main-banner .image {
    text-align: center;
}
.main-banner img {
    border-radius: 30px;
    height: 150px;
}

/* Processes section */
.processes-section-wrapper {
    padding: 2em 1em;
}
.processes-section h1 {
    margin: 0;
    padding: 0 0.5em 0.5em 0.5em;
    border-bottom: 1px solid var(--primary-color);
    text-align: center;
}
.processes-section h3 {
    padding: 0 2em;
}

/* Processes container */
.processes {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}

/* Individual process */
.process {
    text-align: center;
    padding: 1.5em 1em;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    margin-top: 1.5em;
    border-radius: 10px;
    cursor: pointer;
}
.process a {
    text-decoration: none;
    color: var(--color-1);
}

/* Process name header */
.process h2 {
    margin: 0;
}

/* Image and text container */
.process-content {
    padding-top: 1em;
}
.process img {
    width: 200px;
}

/* Learn more button */
.process button {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 14px;
    padding: 0.5em 3.5em;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.25s;
}
.process button:hover {
    background-color: var(--primary-color);
    color: var(--color-2);
    transition: 0.25s;
}



/* RESPONSIVE DESIGN */
@media screen {

    @media (min-width: 400px) {
        .main-banner .text h1 { font-size: 30px; }
        .main-banner .text p, .main-banner .text a { font-size: 20px; }
        .main-banner img { height: 200px; }
    }

    @media (min-width: 700px) {
        .main-banner-wrapper { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
        .main-banner-wrapper .image { display: flex; align-items: center; justify-content: center; }

        .processes { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; }
        .processes-section h3 { text-align: center; }
        .process h2 { font-size: 22px; }
    }

    @media (min-width: 1000px) {
        .main-banner .text h1 { font-size: 35px; }
        .main-banner img { height: 250px; }

        .processes { grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 0; }
    }

    @media (min-width: 1200px) {
        .main-banner { justify-content: start; }
        .main-banner .text { text-align: left; }
        .main-banner .text a { text-align: center; margin-left: 0; margin-right: 200px; }
        .main-banner img { height: 350px; }
        .main-banner-wrapper, .processes-section { max-width: 1200px; position: relative; left: 50%; transform: translateX(-50%); }
    }

}