body {
    font-family: "Montserrat", serif;
    line-height: 1.5;
}

p,
h2,
h3,
li {
    /* font-weight: 300; */
    color: #003249;
    margin-bottom: 2rem;
}

.inner-container,
.about-main {
    max-width: 75rem;
    margin: 0 auto;
}

.inner-container {
    padding: 0 1rem;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header {
    background-color: #fff;
    padding: 1rem 0;
    box-shadow: 2px 2px 10px hsl(0deg 0% 0% / 0.14);
}

h1 img {
    width: 150px;
}

.menu li {
    line-height: 40px;
    text-align: center;
}

.menu li:last-of-type {
    padding-bottom: 1rem;
}

.menu a {
    color: #3f3f3f;
    text-decoration: none;
    display: block;
    padding: 1.2rem;
    text-transform: uppercase;
}

.menu a:hover,
.menu a:active {
    background-color: gainsboro;
}

button {
    background-color: #fff;
    border: none;
}

button:hover {
    cursor: pointer;
}

svg {
    fill: #3f3f3f;
}

svg:hover {
    fill: #A4B374;
    transition: all 0.3s ease-in-out;
}

/* Step 2: Hide the menu. Once it's hidden, this will be the default stage on load. 
FYI = the display property cannot be transitioned:
header nav {
    display: none;
    transition: display 1s ease-in-out;
}, so we can hide the nav by making it's max-height (NOT height) 0*/
header nav {
    /* styling this so it overlaps the main content
    this element will be absolute to the viewport 
    make sure to add in left and top values [left: 0, top: height of the header]*/
    position: absolute;
    left: 0;
    top: 90px;
    background-color: #fff;
    width: 100vw;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-in-out;
}

/* Step 3: Create a special class to show the menu. This class name will only exist in the CSS for now.
Then then JS will add thiss class to the hidden element for us (in this case, the nav) */
.show-nav {
    max-height: 220px;
}

/* Step 4: add a media query and show the nav by default, hide the button, and style it as a horizontal nav */
@media screen and (min-width: 700px) {

    .flex-container,
    .header-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .toggle-button {
        display: none;
    }

    header nav {
        max-height: 200px;
        width: unset;
        /*a way to reverse anything we did before and to restore things to their default value*/
        overflow: visible;
        position: static;
    }

    .menu {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }

    .menu a {
        padding: 0 0.75rem;
    }

    .menu a:hover,
    .menu a:active {
        background-color: #fff;
        color: #A4B374;
        transition: all 0.3s ease-in-out;
    }

    .menu li:last-of-type {
        padding-bottom: 0;
    }
}

/*home page*/
.home-header {
    background-image: url("../img/home-banner-sm.webp");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 80vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    gap: 1rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

.home-header h2 {
    color: #fff;
}

.our-company {
    margin: 9rem 0;
    background-image: url("../img/home-background-sm.svg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
}

.our-company img {
    width: 100px;
    position: absolute;
    top: -30px;
    right: 25px;
}

@media screen and (min-width: 375px) {
    .our-company img {
        top: -40px;
    }
}

section h2 {
    margin-bottom: 2rem;
}

@media screen and (min-width: 375px) {
    .our-company {
        background-image: url("../img/home-background-sm2.svg");
        height: 160vw;
    }

    .our-company div {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media screen and (min-width: 435px) {
    .our-company {
        background-image: url("../img/home-background-md.svg");
        height: 110vw;
    }

    .our-company img {
        top: -65px;
    }
}

@media screen and (min-width: 500px) {
    .our-company img {
        width: 125px;
        top: -75px;
    }
}

@media screen and (min-width: 600px) {
    .home-header {
        background-image: url("../img/home-banner-lg.webp");
        height: 67vw;
    }

    .our-company img {
        width: 155px;
        top: -105px;
    }
}

@media screen and (min-width: 700px) {
    .our-company {
        background-image: url("../img/home-background-lg.svg");
        height: 70vw;
    }

    .our-company img {
        top: -75px;
    }
}

@media screen and (min-width: 850px) {
    .home-header {
        background-image: url("../img/home-banner-xl.webp");
        height: 30vw;
    }


}

@media screen and (min-width: 900px) {

    .our-company .inner-container h2,
    .our-company .inner-container p,
    .our-company .inner-container ul {
        width: 65%;
    }

    .our-company img {
        width: 30%;
        top: 10px
    }

}


@media screen and (min-width: 1000px) {
    .our-company {
        background-image: url("../img/home-background-xl.svg");
        height: 706px;
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

.green-btn {
    background-color: #A4B374;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    width: 125px;
    padding: 4px;
    border-radius: 3px;
    transition: 0.5s all;
}

/*about */
.about-intro,
.what-intro,
.latest-intro {
    margin-top: 3rem;
    text-align: center;
    max-width: 400px;
}

.about-intro h2,
.what-intro h2,
.latest-intro h2 {
    text-transform: uppercase;

}

.gallery img {
    margin: 0 auto;
    margin-bottom: 1rem;
}

@media screen and (min-width: 600px) {
    .gallery img {
        margin-bottom: unset;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
    }
}

@media screen and (min-width: 950px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
    }
}

.about-content {
    max-width: 648px;
    margin: 0 auto;
}

.about-content img {
    margin-bottom: 2rem;
}

.teal {
    color: #00AEDF;
}

.latest-projects {
    max-width: 1200px;
    margin: 0 auto;
}

@media screen and (min-width: 1000px) {

    .about-content,
    .what-info {
        max-width: 1200px;
        margin: 0 2rem;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .what-info {
        gap: 2rem;
    }

    .about-content img,
    .beforeAfter {
        border-radius: 4px;
    }

    .about-content div,
    .what-info-text {
        background-color: #fff;
        width: 50%;
    }

}

@media screen and (min-width: 1200px) {

    .about-content,
    .what-info {
        max-width: 1200px;
        margin: 0 2rem;
        margin-top: 4rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .what-info {
        flex-direction: row-reverse;
    }

    .about-content img {
        width: 645px;
    }

    .about-content div {
        background-color: #fff;
        width: 50%;
        padding: 2rem 2rem 0 2rem;
        position: relative;
        top: -20px;
        left: -100px;
        border-radius: 4px;
        box-shadow: 2px 2px 10px hsl(0deg 0% 0% / 0.14);

    }

    /* .what-info-text{
        width: 40%;
        z-index: 2;
    } */

}

@media screen and (min-width: 1000px) {
    .our-equipment {
        max-width: 1200px;
        margin: 0 2rem;
        margin-top: 8rem;
        margin-bottom: 8rem;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .our-equipment img {
        width: 55%;
        border-radius: 4px;
    }

    .our-equipment div {
        width: 45%;
    }

    .our-equipment div li {
        margin-bottom: 1rem;
    }
}

/*contact us*/
.contact-form label,
.contact-form input,
.contact-form textarea {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}

.contact-form input,
.contact-form textarea {
    padding: 0.5rem;
}

.contact-form textarea,
.contact-form input:last-of-type {
    margin-bottom: 2rem;
}

.contact-form input:last-of-type {
    background-color: #A4B374;
    border: none;
    border-radius: 4px;
    color: white;
    text-transform: uppercase;
    transition: 0.5s all;
}

.contact-form input:last-of-type:hover,
.green-btn:hover {
    cursor: pointer;
    background-color: #00AEDF;
}


/* footer */
.get-in-touch {
    background-image: url(../img/bottomwave.svg);
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 400;

}

.footer-flex a {
    color: #fff;
    padding-bottom: 1.5rem;
    display: inline-block;
}

@media screen and (min-width: 600px) {
    .get-in-touch {
        background-image: url(../img/bottomwave-tablet2.svg);
        height: 240px;
    }

    .get-in-touch h2 {
        padding-top: 2rem;
    }

}

@media screen and (min-width: 850px) {
    .footer-flex {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: space-between;
        padding-top: 2rem;
    }
}

.get-in-touch svg {
    width: 32px;
    fill: #A4B374;
}

@media screen and (min-width: 1250px) {
    .get-in-touch {
        background-image: url(../img/bottomwave-tablet2.svg);
        height: 200px;
        padding-bottom: 5rem;
    }

    .get-in-touch h2 {
        color: #003249
    }
}

.contact {
    background-color: #A4B374;
    padding: 1rem;
}

.contact div {
    margin-bottom: 2rem;
}

footer h2,
footer h3,
footer p {
    color: #fff;
}


/*slider*/
.beforeAfter {
    margin-bottom: 2rem;
}

.beforeAfter img {
    max-width: unset;
}