:root {
        /*keeping current scheme balck/white*/
        --backgroundC: #365e32;
        --textC: #e7d37f;
        --accentC: #81a263;
        --accentC2: #fd9b63;
}

/*Reset*/
body, html {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: var(--backgroundC);
    color: var(--textC);
    
}

.construct {
    z-index: 100;
    opacity: 50%;
    color: orange;
    rotate: 15deg;
    text-align: center;
    position: fixed;
    width: 50%;
    height: 25%;
    top: 25%;
    left: 25%;
    font-size: 3vh;
    display: none;
   
}

article {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.socials img {
    min-width: 1rem;
    margin: 0.5rem 0.8rem;
}
.socials {
    background-color: var(--accentC);
    border-radius: 0 0 5px 5px;
    border-top: 0;
    max-width: min-content;
    position: absolute;
    top: 0;
    z-index: 10;
    margin-left: 0.2rem;
}

.socials img:hover {
    rotate: -360deg;
    transition: 0.25s;
}

.headerBanner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    margin-top: 2rem;
}
.headerBanner img {
    max-width: 10rem;
    border: var(--textC) 2px solid;
    border-radius: 50%;
    justify-self: right;
    margin-right: 2.5rem;
    z-index: 1;
}
.headerBanner img:hover {
    cursor: pointer;
    border-color: var(--accentC2);
}
.headerBanner img:active {
    z-index: 2;
    max-width: 10rem;
}

.career {
    background-color: #fd9b63;
    color: black;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    max-width: fit-content;
    border: black 2px solid;
    border-radius: 25%;
    margin-bottom: 10px;
}

.career button {
    background-color: aliceblue;
    border-radius: 2px;
    margin-bottom: 10px;
}

.title {
    font-family: Helvetica, sans-serif;
    text-decoration: none;
    grid-column-start: 2;
    text-align: left;
    margin-top: 2rem;
    margin-left: -2rem;
    line-height: 1.2rem;
}



.slogan {
    font-size: medium;
    grid-column-start: 1;
    grid-column-end: 3;
    
    margin-top: 0.5rem;
    
}
.slogan p {
    font-size: small;
}



.servicesContainer {
    display: grid;
    grid-template-columns: 1fr;  
    gap: 0.2rem;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}



.servSection {
    border: var(--accentC) solid 0.2rem;
    border-radius: 5px;
    
    position: relative;
    
}

.servSection:hover {
    border: var(--accentC2) 0.2rem solid;
    transition: 0.5s;
}

.servCard {
    display: grid;
    background-color: var(--accentC);
    transition: 0.5s;
}
.servCard img {
    text-align: center;
    justify-self: center;
    overflow: hidden;
    min-width: 5rem;
    padding-top: 0.85rem;
}


.servIcon {
    max-width: 5rem;
}

.servicesContainer h2 {
    text-align: center;
}



.servDescription {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.75rem;
}

.smallPrint {
    font-size: 0.6rem;
}

.signUp {
    margin-bottom: 0;
    position: absolute;
    bottom: -1rem;
    right: 1rem;
    min-height: 1.5rem;
    border-radius: 5px;
    border-color: var(--accentC);
    background-color: var(--backgroundC);
}

.signUp:hover {
    border-color: var(--textC);
}
.signUp:active {
    bottom: -0.8rem;
    box-shadow: var(--accentC) 0 0.2rem 0.3rem;
    transition: 0.1s;
}

#contact {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    
}

#contact img {
    height: 1.75rem;
    padding: 0.5rem;
}

#contact a {
    text-decoration: none;
    color: var(--textC);
}

#contact button {
    min-height: 5rem;
    min-width: 5rem;
    font-size: large;
    border-radius: 50%;
    padding: 0%;
}

.reviewsContainer {
    display: none;
}

@media  (min-width: 700px) {

    .headerBanner img {
        z-index: 2;
        max-width: 5rem;
    }

    .servicesContainer {
        grid-template-columns: repeat(4, 1fr);
        transition: 0.5s;
    }

    .servSectionSpan2 {
        grid-column: span 2;
    }

    #contact {
        max-width: 50%;
        grid-template-columns: 1fr 1fr;
    }
    #contact h1 {
        grid-column: 1 / 3;
    }


    body {
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    .socials {
        max-width: max-content;
        position: sticky;
        margin-left: 2.5rem;
    }
    .socials img {
        margin: 0.5rem 2rem;
    }
}