body {
    background-color: #111;
    margin: 0;
}

header {
    display: flex;
    flex-direction: column;
    z-index: 10;
    position: relative;
}

#headerInfo {
    display: flex;
    justify-content: space-between;
    padding: 0px 50px 0px 50px;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    align-items: center;
    border-bottom: 0.1px #FFFEFE solid;
}

#rHeaderInfo {
    display: none;
    justify-content: space-between;
    width: 100%;
    margin-left: 5%;
    padding: 0px 50px 0px 50px;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    align-items: center;
    border-bottom: 0.1px #FFFEFE solid;
}

.headerPar {
    color: #FFFEFE;
    text-decoration: none;
    font-size: 1vw;
}

#headerLogo {
    width: 7vw;
}

.headerIcons {
    display: flex;
    justify-content: space-between;
}

.headerMedia {
    width: 2vmax;
    padding: 5px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 50px 0px 50px;
    border-bottom: 0.1px #FFFEFE solid;
}

.navLink {
    color: #FFFEFE;
    text-decoration: none;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    padding: 30px 0px 30px 0px;
    font-size: 1vw;
    text-transform: uppercase;
}

.navLink:hover, .headerPar:hover, .listLink:hover, #dev:hover, .itemSm:hover {
    color: #C61211;
}

.headerMedia:hover {
    width: 33px;
}

#navBtn {
    width: 21%;
}

#responsiveMenu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color:#111;
    margin: 0;
    width: 100%;
    z-index: 999;
}

#toggleMenu {
    display: flex;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    width: 100%;
    margin-top: 1vh;
}

#logoSm {
    width: 60%;
    padding: 0 5px;
    margin-right: 2vw;
}


#menuSm {
    width: 10%;
    align-self: center;
    margin-left: 5px;
    cursor: pointer;
    padding: 0 5px;
    justify-self: center;
    z-index: 9999;
}

.itemSm {
    color: #FFFEFE;
    text-decoration: none;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    padding: 10px 0px 10px 0px;
    margin-right: 7vw;
    font-size: 1vw;
    text-transform: uppercase;
    align-self: flex-end;
    display: none;
}

#menuBtnSm {
    background-color: #C61211;
    color: #FFFEFE;
    border: none;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1vw;
    text-transform: uppercase;
    cursor: pointer;
    align-self: flex-end;
    margin-top: 10px;
    margin-right: 7vw;
    margin-bottom: 1vh;
    width: 20%;
    display: none;
    justify-content: center;
    padding: 10px;
}

#mainCTA {
    padding: 10px;
    width: 100%;
    text-decoration: none;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1vw;
    text-transform: uppercase;
    background-color: #C61211;
    color: #FFFEFE;
    border: none;
    cursor: pointer;
}

#navBtnSm {
    text-decoration: none;
    color: #FFFEFE;
}

#mainCTA:hover, #btnBook:hover, #getInTouchLink:hover, #contactFormBtn:hover, #navBtnSm:hover {
    color: #201F1F;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    width: 100%;
}

#hero {
    width: 100%;
    display: flex;
    justify-content: end;
}

#heroPic {
    width: 50%;
    position: relative;
}

#heroText {
    position: absolute;
    margin-right: 50%;
}

#heroHeading {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #C61211;
    font-size: 2.8vw;
    margin-bottom: 10px;
}

#heroSecondHeading {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #FFFEFE;
    font-size: 1.8vw;
    margin: 0;
}

#heroThirdHeading {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #FFFEFE;
    font-size: 2.2vw;
    margin-top: 10px;
}

#btnBook {
    background-color: #C61211;
    color: #FFFEFE;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.8vw;
    border: none;
    width: 85%;
    padding: 18px;
    cursor: pointer;
}

#about {
    display: flex;
    flex-direction: column;
    padding: 0% 10% 0% 10%;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

#aboutHeader {
    color: #C61211;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2vw;
}

.aboutPar {
    color: #FFFEFE;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.5vw;
    text-align: justify;
}

#aboutDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.phone {
    text-decoration: none;
    color: #FFFEFE;
}

#aboutCta {
    color: #FFFEFE;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.3vw;
}

#tracks {
    width: 30%;
}

.link {
    color: #C61211;
}

#weDoList {
    background-color: #FFFEFE;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

#weDoHeader {
    color: #C61211;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 2.5vw;
    text-transform: uppercase;
    margin-bottom: 0;
}

#elementTable {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 3% 3% 3% 8%;
}

.column {
    display: flex;
    justify-content: center;
    align-items: center;
}
.element {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    width: 100%;
}

.elementImg {
    width: 20%;
    padding: 15px;
    margin-right: 15px;
}

.elementName {
    width: 70%;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.3vw;
    text-align: left;
}

#usDiv {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-image: url(mainPics/asphalt.png);
    height: 90vh;
    width: 100%;
    padding: 30px 0px 80px 0px;
}

#usHeader {
    color: #C61211;
    text-shadow: #FFFEFE 0.2px 0.2px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 350;
    font-style: normal;
    font-size: 2.5vw;
    text-transform: uppercase;
}

#squareRow {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.square {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #111;
    border: #FFFEFE solid 3px;
    padding: 20px;
    width: 30vmin;
    height: 30vmin;
}

.squareImg {
    height: 9vh;
}

.squareHeader {
    color: #C61211;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2vw;
    padding: 0;
    margin-bottom: 0;
    text-align: center;
}

.squarePar {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1vw;
    color: #FFFEFE;
    text-align: center;
    padding: 0;
}

#collaborateDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
}
.collaborate {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5vw;
    color: #FFFEFE;
    text-align: center;
    margin-bottom: 0;
    padding: 0;
}

#getInTouchBtn {
    border: none;
    color: #FFFEFE;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2vmax;
    background: #C61211;
    padding: 20px;
    width: 50vw;
    margin-top: 20px;
    text-transform: uppercase;
    cursor: pointer;
}

#getInTouchLink {
    text-decoration: none;
    color: #FFFEFE;
}

#bckgdImg {
    background-image: url(mainPics/engine\ bckgd.png);
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

#testimonialsDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    background-color: #FFFEFE;
    margin: 10% 0% 10% 0%;
    position: relative;
}

#testimonialsHeader {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 2vw;
}

.testimonialsRow {
    display: flex;
    justify-content: space-around;
    margin-bottom: 5%;
}

.reviewElement {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 35%;
}

.reviewImg {
    width: 50%;
}

.reviewText {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1vw;
}

.reviewDate {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1vw;
}

#gears {
    position: absolute;
    width: 15%;
    bottom: 10px;
    right: 10px;
}

#findUs {
    width: 90%;
    display: flex;
    margin-top: 50px;
    justify-content: space-between;
    align-items: center;
}

#mapDiv {
    width: 47.5%;
}

#map {
    width: 100%;
    height: 40vw;
}

#contactFrame {
    width: 47.5%;
    height: 40vw;
    background-color: #201F1F;
    display: flex;
    flex-direction: column;
    
}

#contactHeader {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2vw;
    color: #FFFEFE;
    align-self: center;
    margin-top: 60px;
}

.contactFirstPar {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1vw;
    color: #FFFEFE;
    margin-left: 5%;
}

.contactBoldPar {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1vw;
    color: #FFFEFE;
    margin-left: 5%;
}

#contactLastPar {
    margin-top: 55px;
}

#contactFormBtn {
    width: 90%;
    align-self: center;
    margin-top: 5%;
    padding: 20px;
    text-decoration: none;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1vw;
    background-color: #C61211;
    color: #FFFEFE;
    border: none;
    cursor: pointer;
}

#findUsBtn {
    width: 100%;
    align-self: center;
    margin-top: 5%;
    margin-left: 10%;
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.footerTracks {
    width: 110%;
    height: 15vmax;
    margin-left: -10%;
}

#footerList {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 90%;
}

.leftList {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.rightList {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: right;
}

.listHeader {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.5vw;
    color: #FFFEFE;
    list-style: none;
}

.listItem {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1vw;
    color: #FFFEFE;
    padding: 5px;
    margin: 0;
}

.listLink {
    text-decoration: none;
    color: #FFFEFE;
}

.listLine {
    width: 25vw;
    border: #C61211 1px solid;
    margin-top: -.3vmax;
}

#footerSocial {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footerSmedia {
    width: 2.5vw;
    padding: 20px;
}

.footerSmedia:hover {
    width: 2.7vw;
}

#screenLine {
    width: 100%;
    border: #C61211 1px solid;
}

#copyright {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90%;
}

.copyPar {
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.9vw;
    color: #FFFEFE;
    margin: 0;

}

@media screen and (max-width: 845px) {
    #usDiv {
        max-height: 70vmax;
    }

    #usHeader {
        font-size: 3.5vw;
    }
    #squareRow {
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .squareImg {
        height: 5vmax;
    }

    .square {
        max-width: 28vw;
        max-height: 18vmax;
        margin-bottom: 20px;
        margin-top: 20px;
}

.squareHeader {
font-size: 1.6vmax;
}

.squarePar {
    font-size: 1.2vmax;
}

.collaborate {
font-size: 1.6vmax;
}

#contactHeader {
    margin-top: 8%;
}

.footerTracks {
    height: 15vmax;
}
}

@media screen and (max-width: 600px) {
    #headerInfo {
        display: none;
    }

    
    nav {
        display: none;
    }


    #responsiveMenu {
        display: flex;

    }


    #menuBtnSm {
        font-size: 1.2vw;
        width: 50%;
        padding: 10px;
    }
    


    #btnBook {
        padding: 10px;
    }
    .square {
        max-width: 25vw;
        max-height: 13vmax;
    }

    #gears {
        width: 10%;
    }

#contactFormBtn {
    padding: 10px;
}

#contactLastPar {
    margin-top: 45px;
}

.listHeader {
    font-size: 2vw;
}

.listItem {
    font-size: 1.5vw;
}

.elementImg {
    width: 25%;
}

.elementName {
    font-size: 1.5vw;
}

#collaborateDiv {
    width: 80vw;
}

#getInTouchBtn {
width: 80vw;
font-size: 1.5vmax;
}
}


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

    
    #elementTable {
        margin: 3%;
    }
    
    #elementTable {
        margin: 0;
    }
.element {
    padding: 5px;
}
    .elementImg {
        width: 20%;
    }

    .elementName {
        font-size: 1.5vw;
        width: 60%;
        text-align: left;
    }

    .itemSm, #menuBtnSm {
        font-size: 1.5vmax;
}

#menuBtnSm {
    width: 70%;
}
.testimonialsRow {
    flex-wrap: wrap;
}
.testimonialsRow {
    flex-direction: column;
    align-items: center;
}

.reviewElement {
    width: 80%;
    justify-content: start;
    align-items: center;
}

.reviewImg {
    width: 30%;
}  

.reviewText {
font-size: 1.5vw;
}
}

@media screen and (max-width: 450px) {
    #aboutHeader, #usHeader, #weDoHeader {
        font-size: 4vw;
    }

    .elementImg {
        width: 30%;
    }

    .elementName {
        font-size: 1.2vw;
        width: 80%;
    }

    .squareHeader {
        font-size: 3.3vw;
    }

    .squarePar {
        font-size: 2vw;
    }

    .collaborate {
        font-size: 2.5vw;
    }



    #findUs {
        flex-direction: column-reverse;
        margin-top: 2vh;
    }

    #findUsBtn {
        margin-top: 1%;
    }
    #contactLastPar {
        margin-top: 25px;
    }
    
    .footerSmedia {
        width: 3.5vw;
    }

    #mapDiv {
        width: 95%;
        margin-top: 2vh;
    }
    
    #map {
        width: 100%;
        height: 20vh;
    }
    #contactFrame {
        width: 95%;
        height: 40vh;
    }    

    #contactHeader {
        font-size: 3.2vw;
    }
    
    .contactFirstPar, .contactBoldPar {
        font-size: 2vw;
    }

    #contactFormBtn{
        font-size: 2.5vw;
    }


}