/* Global styles */
/*header styling*/
body{ 
    background-color: #EDE8D0;
    margin: 0px;
    height: 100vh;
}
header{
    background-image: url(headerbackground.png); /*sets background image inside heder*/
    background-repeat: no-repeat; /*stops image repeating itself if header area is greater than image size*/
    background-size: 100% 100%; /*sets height and width to 100% of header size*/
    height: 30vh; /*sets header viewport height*/
    width: 100%; /*sets header width to 100% of viewport*/
}
#page-header{
    width: 100%; 
    display: grid; /*grid display inside header*/
    grid-template-columns: 20% 60% 20%; /*specified column sizes of viewport*/
    grid-template-rows: 65% 35%; /*specified row sizes of viewport */
    grid-template-areas: "logo heading socials" /*grid area names*/
    "logo2 tagline ."
}
#mobile-tele-numb{
    visibility: hidden;
}
#social-nav{ /*flex box social media navigation bar*/
    grid-area: socials; /*set grid area for object */
    display: flex; /*sets flexbox inside nav*/
    flex-wrap: wrap; 
    flex-direction: column; /*specifies how objects are set inside the flexbox*/
    width: 30%;
    height: 2vh;
    margin-left: 33%;
    margin-top: 10%;
    column-gap: 25%;
}
#social-nav img{
    flex: auto;
    width: 70%;
    height: auto;
}
#trust-pilot-container{
    grid-area: socials;
    width: 20%;
    height: auto;
    margin-left: 34%;
    margin-top: 25%;
}
#trust-pilot{
    width: 300%;
}
#logo-container{
    grid-area: logo;
    margin-top: 1%;
    margin-left: 3%;
    height: auto;
    width: 70%;
    padding: 10px;
}
#logo-container img{
    width: 100%;
}
#pageheading{
    font-family: "Mate SC";
    text-align: center;
    font-size: 2.5em;
    width: 60%;
    height: 8vh;
    color: white;
    background-color: rgba(135, 135, 135, 0.7); /*sets background colour via RBG with opacity for background */
    grid-area: heading;
    margin-left: 15%;
    margin-top: 2%;
    padding-top: 10px;
}
#main-nav{
    grid-area: heading; /*flexbox navigation bar*/
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    float: right;
    align-items: center;
    margin-left: 15%;
    margin-top: 10%;
    width: 60%;
}
#main-nav a{
    text-decoration: none;
    color: white;
    font-size: 1em;
    text-align: center;
    font-family: "Varela Round";
    background-color: rgba(135, 135, 135, 0.7);
    width: 60%;
}
#tag-line{
    font-family: "Varela Round";
    font-size: 0.8em;
    color: white;
    text-align: center;
    background-color: rgba(135, 135, 135, 0.7);
    width: 60%;
    height: 8vh;
    grid-area: tagline;
    margin-left: 15%;
    margin-top: 1%;
    padding-bottom: 5px;
}
p{
    font-family: "Varela Round";
}
/*main styling*/
main{
    height: 60vh;
}
/*footer styling*/
#website-footer{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "address telephone"; /*grid within grid inside footer*/
    position: fixed; bottom: 0;
    width: 100%;
}
#business-address{
    grid-area: address;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-areas: "companyadr tnc";
}
#buisness-tel-number{
    grid-area: telephone;
}
footer{
    background-color: #EDE8D0;
    height: 10vh;
}
#tnc-a{
    grid-area: tnc;
    text-decoration: none;
    font-size: 0.8em;
    color: black;
    margin-left: 55%;
    margin-top: 20%;
}
#company-address{
    grid-area: companyadr;
    margin-left: 5%;
    font-family: "Varela Round";
    font-size: 0.7em;
}
#business-tel-number{
    grid-area: telephone;
    font-family: "Varela Round";
    margin-top: 5%;
    font-size: 1.0em;
    margin-left: 72.5%;
}
#trust-pilot-mobile{
    display: none;
    grid-area: tnc;
    width: 20%;
    height: auto;
    margin-left: 34%;
    margin-top: 25%;
}
#trust-pilot-mobile img{
    width: 200%;
}
/*home page*/
#home-main{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-areas: "main1 main2 main3"
}
#home-about-us{
    grid-area: main1;
    margin: auto;
}
#home-sec1{
    grid-area: main1;
}
#home-sec2{
    grid-area: main2;
}
#home-sec3{
    grid-area: main3;
}
#home-sec4{
    grid-area: main3;
    visibility: hidden;
}
#about-us{
    font-family: "Mate SC";
    font-size: 1.5em;
    margin-top: 10%;
    text-align: center;
    text-decoration: underline;
}
#about-us-text{
    font-family: "Varela Round";
    font-size: 1em;
    text-align: center;
    margin-top: 10%;
}
.image-headings{
    font-family: "Mate SC";
    font-size: 1.5em;
    margin-top: 10%;
    text-align: center;
    text-decoration: underline;
}
.home-img-container{
    margin-left: 12.5%;
    margin-right: 12.5%;
    margin-bottom: 1%;
    width: 75%;
    height: 30vh;
}
.home-img-container img{
    width: 100%;
    height: 100%;  
}
/*gallery page*/
#gallery-main{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: none;
    grid-template-areas: "pic1 pic2 pic3 pic4";
}
#picture-1{
    grid-area: pic1;
}
#picture-2{
    grid-area: pic2;
}
#picture-3{
    grid-area: pic3;
}
#picture-4{
    grid-area: pic4;
}
.gallery-heading{
    font-size: 1.5em;
    text-align: center;
    font-family: "Mate SC";
    text-decoration: underline;
}
.gallery-img-container{
    width: 90%;
    height: 30vh;
    margin-left: 5%;
}
.gallery-img-container img{
    width: 100%;
    height: 100%;
}
/*services page*/
#services-main{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: auto;
    grid-template-areas: "sec1 sec2 sec3 sec4"
}
#services-sec1{
    grid-area: sec1;
}
#services-sec2{
    grid-area: sec2;
}
#services-sec3{
    grid-area: sec3;
}
#service-sec4{
    grid-area: sec4;
}
#service-h1{
    font-size: 1.3em;
    font-family: "Mate SC";
    text-align: center;
    text-decoration: underline;
    width: 80%;
    height: auto;
    margin-left: 10%;
}
#service-h2{
    font-size: 1.3em;
    font-family: "Mate SC";
    text-align: center;
    text-decoration: underline;
    width: 80%;
    height: auto;
    margin-left: 10%;
}
#service-h3{
    font-size: 1.3em;
    font-family: "Mate SC";
    text-align: center;
    text-decoration: underline;
    width: 25%;
    margin-left: 37.5%;
}
#service-h4{
    font-size: 1.3em;
    font-family: "Mate SC";
    text-align: center;
    text-decoration: underline;
    width: 35%;
    margin-left: 32.5%;
}
#service-txt1{
    font-family: "Varela Round";
    font-size: 0.8em;
    text-align: center;
    background-color: rgba(135, 135, 135, 0.5);
    width: 75%;
    margin-left: 12.5%;
}
#service-txt2{
    font-family: "Varela Round";
    font-size: 0.8em;
    text-align: center;
    background-color: rgba(135, 135, 135, 0.5);
    width: 75%;
    margin-left: 12.5%;
}
#service-txt3{
    font-family: "Varela Round";
    font-size: 0.8em;
    text-align: center;
    background-color: rgba(135, 135, 135, 0.5);
    width: 75%;
    margin-left: 12.5%;
}
#service-txt4{
    font-family: "Varela Round";
    font-size: 0.8em;
    text-align: center;
    background-color: rgba(135, 135, 135, 0.5);
    width: 75%;
    margin-left: 12.5%;
}
.service-img-container{
    margin-left: 12.5%;
    width: 75%;
    height: 25vh;
}
.service-img-container img{
    width: 100%;
    height: 100%;
}
/*contact us page*/
#contact-us-main{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    grid-template-areas: "form map";
}
#contact-us1{
    grid-area: form;
}
#quote-heading{
    font-family: "Mate SC";
    text-align: center;
    font-size: 1.5em;
    text-decoration: underline;
}
#quote-form{
    width: 50%;
    margin-left: 25%;
}
.form-label{
    font-family: "Varela Round";
    font-size: 0.8em;
}
::placeholder{
    color: white;
    font-size: 0.8em;
}
#first-name{
    width: 100%;
    height: 2.5vh;
    background-color: rgba(135, 135, 135, 0.8);
    border: none;
    font-family: "Varela Round";
}
#last-name{
    width: 100%;
    height: 2.5vh;
    background-color: rgba(135, 135, 135, 0.8);
    border: none;
    font-family: "Varela Round";
}
#email-address{
    width: 100%;
    height: 2.5vh;
    background-color: rgba(135, 135, 135, 0.8);
    border: none;
    font-family: "Varela Round";
}
#tele-number{
    width: 100%;
    height: 2.5vh;
    background-color: rgba(135, 135, 135, 0.8);
    border: none;
    font-family: "Varela Round";
}
#request{
    width: 100%;
    height: 15vh;
    background-color: rgba(135, 135, 135, 0.8);
    border: none;
    font-family: "Varela Round";
    padding: 5px;
}
#terms-and-cond{
    margin: auto;
    padding: 25px;
}
#checkbox-label{
    padding: 5px;
}
#submit-button{
    font-family: "Varela Round";
    width: 30%;
    margin-left: 70%;
}
#contact-us2{
    grid-area: map;
}
#contact-us-heading{
    font-family: "Mate SC";
    text-align: center;
    font-size: 1.5em;
    text-decoration: underline;
}
#service-main-tele{
    font-family: "Varela Round";
    color: white;
    font-size: 1em;
    background-color: rgba(135, 135, 135, 0.8);
    width: 70%;
    margin-left: 15%;
    padding: 5px;
    text-align: center;
}
#service-main-email{
    font-family: "Varela Round";
    color: white;
    font-size: 1em;
    background-color: rgba(135, 135, 135, 0.8);
    width: 70%;
    margin-left: 15%;
    padding: 5px;
    text-align: center;
}
#google-map{
    width: 72%;
    height: 30vh;
    margin-left: 15%;
    border: none;
}
/* Media Queries*/
/*Mobile 360x640px*/
@media screen and (max-width: 360px){
    body{
        background-color: #EDE8D0;
        height: 100vh;
    }
    main{
        height: 70vh;
    }
    #page-header{
        width: 100%;
        height: 20vh;
        grid-template-columns: 100%;
        grid-template-rows: 75% 25%;
        grid-template-areas: 
        "mobile1"
        "mobile2"
    }
    #logo-container{
        width: 25%;
        grid-area: mobile1;
        margin-top: 1%;
        margin-left: 1%;
        height: auto;
        padding: 1px;
    }
    header{
        background-image: none;
    }
    #pageheading{
        font-family: "Mate SC";
        text-align: center;
        font-size: 1em;
        width: 50%;
        height: 4vh;
        color: black;
        background-color: rgba(135, 135, 135, 0);
        grid-area: mobile1;
        margin-left: 30%;
        margin-top: 5.5%;
    }
    #mobile-tele-numb{
        visibility:visible;
        grid-area: mobile1;
        font-size: 0.7em;
        font-family: "Varela Round";
        margin-left: 79%;
        margin-top: 1%;
    }
    #social-nav{
        grid-area: mobile1;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 7%;
        height: 2vh;
        margin-left: 79%;
        margin-top: 10%;
        column-gap: 4%;
    }
    #social-nav img{
        flex: auto;
        width: 80%;
        height: auto;
    }
    #trust-pilot-container{
        display: none;
        grid-area: mobile1;
        width: 20%;
        height: auto;
        margin-left: 79%;
        margin-top: 15%;
    }
    #trust-pilot{
        width: 100%;
    }
    #mobile-tele-numb{
        font-family: "Varela Round";
    }
    #tag-line{
        display: none;
        grid-area: mobile2;
        font-family: "Varela Round";
        font-size: 0.5em;
        color: black;
        background-color: rgba(135, 135, 135, 0);
        text-align: center;
        width: 90%;
        height: 2vh;
        margin-left: 5%;
        margin-top: 1%;
        padding-bottom: 5px;
    }
    #main-nav{
        margin-top: 30%;
        margin-left: 0%;
        height: 1vh;
        width: 100%;
        grid-area: mobile1;
    }
    #main-nav a{
        text-decoration: none;
        color: white;
        font-size: 1em;
        text-align: center;
        font-family: "Varela Round";
        background-color: rgba(135, 135, 135, 0.7);
        width: 60%;
    }
    /*Footer media query*/
    #website-footer{
        width: 100%;
        height: 10vh;
        background-color: #EDE8D0;
        grid-template-columns: 100%;
        grid-template-areas: "address";
    }
    #company-address{
        font-family: "Varela Round";
        font-size: 0.5em;
        margin-top: 13%;
    }
    #tnc-a{
        font-family: "Varela Round";
        font-size: 0.5em;
        margin-left: 50%;
        margin-top: 25%;
    }
    #business-tel-number{
        display: none;
        font-family: "Varela Round";
        margin-top: 5%;
        font-size: 1.0em;
        margin-left: 85%;
    }
    #trust-pilot-mobile{
        display: none;
        grid-area: tnc;
        width: 20%;
        height: auto;
        margin-left: 50%;
        margin-top: 10%;
    }
    #trust-pilot-mobile img{
        width: 200%;
    }
    /*Home main media query*/
    .homeSlide{
        display: none;
    }
    #home-main{
        width: 100%;
        grid-template-columns: 100%;
        grid-template-rows: none;
        grid-template-areas: 
        "main1";
    }
    #about-us{
        font-family: "Mate SC";
        font-size: 1.3em;
        margin-top: 10%;
        text-align: center;
        text-decoration: underline;
    }
    #about-us-text{
        font-family: "Varela Round";
        font-size: 0.8em;
        text-align: center;
        margin-top: 10%;
        margin-left: 15%;
        width: 70%;
    }
    #home-sec1{
        grid-area: main1;
    }
    #home-sec2{
        grid-area: main1;
    }
    #home-sec3{
        grid-area: main1;
    }
    #home-sec4{
        grid-area: main1;
        visibility: visible;
    }
    .image-headings{
        font-family: "Mate SC";
        font-size: 1.3em;
        margin-top: 10%;
        text-align: center;
        text-decoration: underline;
    }
    /*gallery page media query*/
    #gallery-main{
    width: 100%;
    grid-template-columns: 100%;
    grid-template-rows: none;
    grid-template-areas: 
    "pic1";
    }
    .gallery-heading{
        text-align: center;
        font-family: "Mate SC";
        text-decoration: underline;
        font-size: 1em;
        margin-top: 15%;
    }
    .gallerySlide{
        display: none;
    }
    .gallery-img-container{
        width: 75%;
        height: 35vh;
        margin-left: 12.5%;
        margin-top: 15%;
    }
    #picture-1{
        grid-area: pic1;
    }
    #picture-2{
        grid-area: pic1;
    }
    #picture-3{
        grid-area: pic1;
    }
    #picture-4{
        grid-area: pic1;
    }
    /*Service page media query*/
    #services-main{
        width: 100%;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas: 
        "sec1"
        "sec2"
        "sec3"
        "sec4";
    }
    #service-sec1{
        grid-area: sec1;
    }
    #service-sec2{
        grid-area: sec2;
    }
    #service-sec3{
        grid-area: sec3;
    }
    #service-sec4{
        grid-area: sec4;
    }
    #service-h1{
        font-family: "Mate SC";
        text-align: center;
        text-decoration: underline;
        width: 50%;
        height: auto;
        margin-left: 25%;
        font-size: 1em;
    }
    #service-h2{
        font-family: "Mate SC";
        text-align: center;
        text-decoration: underline;
        width: 50%;
        height: auto;
        margin-left: 25%;
        font-size: 1em;
    }
    #service-h3{
        font-family: "Mate SC";
        text-align: center;
        text-decoration: underline;
        width: 25%;
        margin-left: 37.5%;
        font-size: 1em;
    }
    #service-h4{
        font-family: "Mate SC";
        text-align: center;
        text-decoration: underline;
        width: 35%;
        margin-left: 32.5%;
        font-size: 1em;
    }
    #service-txt1{
        font-family: "Varela Round";
        font-size: 0.6em;
        text-align: center;
        background-color: rgba(135, 135, 135, 0);
        width: 75%;
        margin-left: 12.5%;
    }
    #service-txt2{
        font-family: "Varela Round";
        font-size: 0.6em;
        text-align: center;
        background-color: rgba(135, 135, 135, 0);
        width: 75%;
        margin-left: 12.5%;
    }
    #service-txt3{
        font-family: "Varela Round";
        font-size: 0.6em;
        text-align: center;
        background-color: rgba(135, 135, 135, 0);
        width: 75%;
        margin-left: 12.5%;
    }
    #service-txt4{
        font-family: "Varela Round";
        font-size: 0.6em;
        text-align: center;
        background-color: rgba(135, 135, 135, 0);
        width: 75%;
        margin-left: 12.5%;
    }
    .service-img-container{
        margin-left: 12.5%;
        width: 75%;
        height: 25vh;
    }
    /*contact us media query*/
    #contact-us-main{
        width: 100%;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas: 
        "form" 
        "map";
    }
    #contact-us1{
        grid-area: form;
    }
    #quote-heading{
        font-family: "Mate SC";
        text-align: center;
        font-size: 1em;
        text-decoration: underline;
    }
    #quote-form{
        width: 50%;
        margin-left: 25%;
    }
    .form-label{
        font-family: "Varela Round";
        font-size: 1em;
    }
    #first-name{
        width: 100%;
        height: 2.5vh;
        background-color: rgba(135, 135, 135, 0.8);
        border: none;
        font-family: "Varela Round";
    }
    #last-name{
        width: 100%;
        height: 2.5vh;
        background-color: rgba(135, 135, 135, 0.8);
        border: none;
        font-family: "Varela Round";
    }
    #email-address{
        width: 100%;
        height: 2.5vh;
        background-color: rgba(135, 135, 135, 0.8);
        border: none;
        font-family: "Varela Round";
    }
    #tele-number{
        width: 100%;
        height: 2.5vh;
        background-color: rgba(135, 135, 135, 0.8);
        border: none;
        font-family: "Varela Round";
    }
    #request{
        width: 100%;
        height: 15vh;
        background-color: rgba(135, 135, 135, 0.8);
        border: none;
        font-family: "Varela Round";
    }
    .terms-and-cond{
        font-size: 0.5em;
    }
    #submit-button{
        font-family: "Varela Round";
        width: 35%;
        margin-left: 65%;
    }
    #contact-us-heading{
        font-family: "Mate SC";
        text-align: center;
        font-size: 1em;
        text-decoration: underline;
    }
    #service-main-tele{
        font-family: "Varela Round";
        color: white;
        font-size: 0.8em;
        background-color: rgba(135, 135, 135, 0.8);
        width: 60%;
        margin-left: 20%;
        padding: 5px;
        text-align: center;
    }
    #service-main-email{
        font-family: "Varela Round";
        color: white;
        font-size: 0.8em;
        background-color: rgba(135, 135, 135, 0.8);
        width: 60%;
        margin-left: 20%;
        padding: 5px;
        text-align: center;
    }
    #google-map{
        width: 63%;
        height: 30vh;
        margin-left: 20%;
        border: none;
    }
}
/*Tablet media query 601x962px*/
@media screen and (min-width: 601px) and (max-width:601px){
    body{
        background-color: #EDE8D0;
        height: 100vh;
    }
    main{
        height: 70vh;
    }
    #page-header{
        width: 100%;
        height: 20vh;
        grid-template-columns: 50% 50%;
        grid-template-rows: 75% 25%;
        grid-template-areas: 
        "tablet1 tablet1-1"
        "tablet2 tablet2-2"
    }
    #logo-container{
        width: 50%;
        grid-area: tablet1;
        margin-top: 1%;
        margin-left: 1%;
        height: auto;
        padding: 5px;
    }
    header{
        background-image: none;
    }
    #pageheading{
        font-family: "Mate SC";
        text-align: center;
        font-size: 1.5em;
        width: 70%;
        height: 4vh;
        color: black;
        background-color: rgba(135, 135, 135, 0);
        grid-area: tablet1;
        margin-left: 65%;
        margin-top: 1%;
    }
    #mobile-tele-numb{
        visibility:visible;
        grid-area: tablet1-1;
        font-size: 0.9em;
        font-family: "Varela Round";
        margin-left: 65.5%;
        margin-top: 2%;
    }
    #social-nav{
        grid-area: tablet1-1;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 35%;
        height: 2vh;
        margin-left: 62%;
        margin-top: 15%;
        column-gap: 7%;
    }
    #social-nav img{
        flex: auto;
        width: 70%;
        height: auto;
    }
    #trust-pilot-container{
        grid-area: tablet1-1;
        width: 35%;
        height: auto;
        margin-left: 62%;
        margin-top: 25%;
    }
    #trust-pilot{
        width: 100%;
    }
    #mobile-tele-numb{
        font-family: "Varela Round";
        font-size: 1em;
        grid-area: tablet1-1;
        margin-left: 62%;
        margin-top: 5%;
    }
    #tag-line{
        grid-area: tablet1;
        font-family: "Varela Round";
        font-size: 0.6em;
        color: black;
        background-color: rgba(135, 135, 135, 0);
        text-align: center;
        width: 90%;
        height: 2vh;
        margin-left: 55%;
        margin-top: 30%;
        padding-bottom: 5px;
    }
    #main-nav{
        grid-area: tablet2;
        width: 200%;
        margin-left: 0%;
        margin-right: 5%;
        margin-top: 2%;
    }
    #main-nav a{
        text-decoration: none;
        color: white;
        font-size: 1em;
        text-align: center;
        font-family: "Varela Round";
        background-color: rgba(135, 135, 135, 0.7);
        width: 100%;
    }
    #website-footer{
        width: 100%;
        height: 10vh;
        grid-template-columns: 100%;
        grid-template-areas: "address";
    }  
    #business-tel-number{
        display: none;
    }
    #company-address{
        grid-area: companyadr;
        font-size: 0.6em;
        margin-left: 2%;
        margin-top: 15%;
    }
    #tnc-a{
        grid-area: tnc;
        text-decoration: none;
        font-size: 0.8em;
        color: black;
        margin-left: 55%;
        margin-top: 25%;
    }
    /*TABLET HOME MEDIA QUERIES*/
    #home-main{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: 50% 50%;
        grid-template-areas: 
        "main1 main2"
        "main3 main4"
    }
    #home-about-us{
        grid-area: main1;
        margin: auto;
    }
    #home-sec1{
        grid-area: main1;
    }
    #home-sec2{
        grid-area: main2;
    }
    #home-sec3{
        grid-area: main3;
    }
    #home-sec4{
        visibility:visible;
        grid-area: main4;
    }
    #about-us{
        font-family: "Mate SC";
        font-size: 1.2em;
        margin-top: 10%;
        text-align: center;
        text-decoration: underline;
    }
    #about-us-text{
        font-family: "Varela Round";
        font-size: 0.8em;
        text-align: center;
        margin-top: 10%;
        padding: 5px;
    }
    .image-headings{
        font-family: "Mate SC";
        font-size: 1.2em;
        margin-top: 10%;
        text-align: center;
        text-decoration: underline;
    }
    .home-img-container{
        margin-left: 12.5%;
        margin-right: 12.5%;
        width: 75%;
        height: 20vh;
    }
    .home-img-container img{
        width: 100%;
        height: 100%;  
    }
    /*GALLERY TABLET MEDIA QUERIES*/
    #gallery-main{
        width: 100%;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: 50% 50%;
        grid-template-areas: 
        "pic1 pic2"
        "pic3 pic4";
        }
        .gallery-heading{
            text-align: center;
            font-family: "Mate SC";
            text-decoration: underline;
            font-size: 1.2em;
        }
        .gallery-img-container{
            width: 75%;
            height: 20vh;
            margin-left: 12.5%;
        }
        #picture-1{
            grid-area: pic1;
        }
        #picture-2{
            grid-area: pic2;
        }
        #picture-3{
            grid-area: pic3;
        }
        #picture-4{
            grid-area: pic4;
        }
        /*SERVICE TABLET MEDIA QUERIES*/
        #services-main{
            width: 100%;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: 50% 50%;
            grid-template-areas: 
            "sec1 sec2" 
            "sec3 sec4";
        }
        #service-h1{
            font-family: "Mate SC";
            text-align: center;
            text-decoration: underline;
            width: 50%;
            height: auto;
            margin-left: 25%;
            font-size: 1em;
        }
        #service-h2{
            font-family: "Mate SC";
            text-align: center;
            text-decoration: underline;
            width: 50%;
            height: auto;
            margin-left: 25%;
            font-size: 1em;
        }
        #service-h3{
            font-family: "Mate SC";
            text-align: center;
            text-decoration: underline;
            width: 25%;
            margin-left: 37.5%;
            font-size: 1em;
        }
        #service-h4{
            font-family: "Mate SC";
            text-align: center;
            text-decoration: underline;
            width: 35%;
            margin-left: 32.5%;
            font-size: 1em;
        }
        #service-txt1{
            font-family: "Varela Round";
            font-size: 0.7em;
            text-align: center;
            background-color: rgba(135, 135, 135, 0.5);
            width: 75%;
            margin-left: 12.5%;
        }
        #service-txt2{
            font-family: "Varela Round";
            font-size: 0.7em;
            text-align: center;
            background-color: rgba(135, 135, 135, 0.5);
            width: 75%;
            margin-left: 12.5%;
        }
        #service-txt3{
            font-family: "Varela Round";
            font-size: 0.7em;
            text-align: center;
            background-color: rgba(135, 135, 135, 0.5);
            width: 75%;
            margin-left: 12.5%;
        }
        #service-txt4{
            font-family: "Varela Round";
            font-size: 0.7em;
            text-align: center;
            background-color: rgba(135, 135, 135, 0.5);
            width: 75%;
            margin-left: 12.5%;
        }
        .service-img-container{
            margin-left: 12.5%;
            width: 75%;
            height: 15vh;
        }
        /*CONTACT US MEDIA QUERIES*/
        #contact-us-main{
            width: 100%;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: none;
            grid-template-areas: 
            "form map";
        }
        #contact-us-heading{
            font-family: "Mate SC";
            text-align: center;
            font-size: 1.2em;
            text-decoration: underline;
        }
        #service-main-tele{
            font-family: "Varela Round";
            color: white;
            font-size: 1em;
            background-color: rgba(135, 135, 135, 0.8);
            width: 80%;
            margin-left: 10%;
            padding: 5px;
            text-align: center;
        }
        #service-main-email{
            font-family: "Varela Round";
            color: white;
            font-size: 1em;
            background-color: rgba(135, 135, 135, 0.8);
            width: 80%;
            margin-left: 10%;
            padding: 5px;
            text-align: center;
        }
        #quote-heading{
            font-family: "Mate SC";
            text-align: center;
            font-size: 1.2em;
            text-decoration: underline;
        }
        
        #google-map{
            width: 83%;
            margin-left: 10%;
            height: 25vh;
        }
        #contact-us1{
            grid-area: form;
        }
        .form-label{
            font-family: "Varela Round";
            font-size: 0.8em;
        }
        #first-name{
            width: 100%;
            height: 2vh;
            background-color: rgba(135, 135, 135, 0.8);
            border: none;
            font-family: "Varela Round";
        }
        #last-name{
            width: 100%;
            height: 2vh;
            background-color: rgba(135, 135, 135, 0.8);
            border: none;
            font-family: "Varela Round";
        }
        #email-address{
            width: 100%;
            height: 2vh;
            background-color: rgba(135, 135, 135, 0.8);
            border: none;
            font-family: "Varela Round";
        }
        #tele-number{
            width: 100%;
            height: 2vh;
            background-color: rgba(135, 135, 135, 0.8);
            border: none;
            font-family: "Varela Round";
        }
        #request{
            width: 100%;
            height: 15vh;
            background-color: rgba(135, 135, 135, 0.8);
            border: none;
            font-family: "Varela Round";
        }
        #submit-button{
            font-family: "Varela Round";
            width: 40%;
            margin-left: 60%;
        }
}