html, body {
    height: 100%;
    width: 100%;

    /* This prevents padding on elements, in this context the hmtl and body tag, 
    from affecting the look of the page*/
    padding: 0;
    margin: 0;
}

body {
    background-color: rgb(193,229,248);
}


h1, h2, h3, h4, h5, h6, p {
    /* This prevents padding on elements, in this context words, from affecting the look of the page*/
    padding: 0;
    margin: 0;
}


h1, h2, h3, h4, h5, h6, li,.logo_container p {
    color: rgb(21, 58, 87);
    font-family: "Goudy Bookletter 1911", serif;
    font-weight: 400;
    font-style: normal;
    
}

p {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

/*NAVIGATION SECTION*/

nav {
    background-color: rgb(193,229,248);
    height: 80px;

    /*the "position: fixed" and "top: 0" fixes the position of the navigation 
    bar to the top of the screen no matter what. The "width: 100%" insure it spans 
    the whole available width of the screen.*/
    position: fixed;
    top: 0;
    width: 100%;
    
}

.content_sect {
    /* This "" equales the height of the navigation menu allowing the menu to land right above a 
    section when the link in the nav bar is hit instead of clipping into the section. */
    padding-top: 80px;
}

nav ul {
    margin: 0;
    padding: 0;
    /*This removes the bullet points on the list items in the navigation menu.*/
    list-style-type: none;

    height: 100%;


    /*These comands set the coniatners elements up to act like a grid, with columns and rows.
    I've set this one specificaly to have 4 columns "1fr 1fr 1fr 1fr" that are 1 fraction of the full containers and
    automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    grid-auto-rows: 1fr;

    



}

nav ul li {
    font-size: 1.5vw;

    /*These comments allow the li's to take up the whole space 
    of their grid section of the ul. This allows the whole grid 
    area to take on the hover affect when the mouse is hovering over the li*/
    height: 100%;
    width: 100%;


    /*The "display:grid" comment allows for the following movement commands 
    "justify-items" and "aligh-items" to actual move the items within the li's*/
    display: grid;
    justify-items: center;
    align-items: center;
}

/*This "hover-highlight" class makes it so only the navigation 
elements with this tag take on the hover affect when the mouse 
is hovering over the li*/

nav ul .hover_highlight:hover {
    font-size: 2vw;
    background-color: rgb(13,120,191);
    color:rgb(193,229,248);
    
}

/*This "transition" creates a smooth transition for each of the proerties listed*/

nav ul .hover_highlight{
    transition: font-size 1s, background-color 1s, color 1s;
    transition-timing-function: ease-out;
}

nav a{
    /*This removes the underlines that normal appear around links.*/
    text-decoration: none;
}

.logo_container {
    /*These comands set the coniatners elements up to act like a grid, with columns and rows.
    I've set this one specificaly to have 4 columns "1fr 1fr 1fr 1fr" that are 1 fraction of the full containers and
    automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
    display: grid;
    grid-template-columns: 1fr 7fr;
    grid-auto-rows: 1fr;
}

.nav_bar_logo {

    /*This adjust the icon image so it can fit within it's container properly*/
    height: auto;
    width: 3vw;
    justify-self: end;

}

.logo_container p {
    justify-self: start;
}

/*HEADER SECTION*/
header {
    height: 1000px;

    /*These comands setup the Hero Image*/

    /*the "linear-gradient" part of the "background-image" command places a liner gradiant 
    over the "url" section or the img, that's why it comes after the comma.*/
    background-image: linear-gradient(rgba(255, 252, 252, 0.25), rgba(255, 252, 252, 0.75)), url("img/pexels-ali-camacho-adarve-2954347-6894020.jpg");
    /*This centers the middle of the image in the middle of the content area.*/
    background-position: center;
    /*This prevents the image from repeating when the contents space has surpassed the images orginal size.*/
    background-repeat: no-repeat;
    /*Resize the background image to cover the entire container, even if it 
    has to stretch the image or cut a little bit off one of the edges*/
    background-size: cover;
    /*This give the parallax effect when you scroll. The background image will not scroll with the page*/
    background-attachment: fixed;

    /*These comands move the content's itmes relative to themselves, in this case the text. 
    Because it's text it works similar to alignment option in a text editor*/
    justify-items: center;
    align-items: center;

    /*These comands move the content's items relative to the space of the content, 
    in this case the moves within the space of the content box.*/
    justify-content: center;
    align-content:center;
}

header h1{
    font-size: 5vw;
    text-align: center;
}

header p{
    font-size: 2vw;
    text-align: center;
    color: rgb(21, 58, 87);
}

.header_container {
    height:75%;
    width: 75%;

    display: grid;

    /*These comands move the content's itmes relative to themselves, in this case the text. 
    Because it's text it works similar to alignment option in a text editor*/
    justify-items: center;
    align-items: center;

    /*These comands move the content's items relative to the space of the content, 
    in this case the moves within the space of the content box.*/
    justify-content: center;
    align-content:center;

    /*These comands set the coniatners elements up to act like a grid, with columns and rows.
    I've set this one specificaly to have 1 column "1fr" that are 1 fraction of the full containers and
    3 rows with a height of 0.05, 0.025, and 0.025 fraction of the full containers height if need be.*/
    grid-template-columns: 1fr;
    grid-template-rows: 0.05fr 0.025fr 0.025fr;
}

.header_container .header_img {
    height: auto;
    width: 20vw;
    
}

.content_sect h2{
    font-size: 3vw;
}

.content_sect p{
    font-size: 1.5vw;
    color: rgb(21, 58, 87);
}

/*ABOUT SECTION CODE*/

.sec_1_about {
    height: 750px;
    /* background-color: rgb(255, 137, 10); */

    background-image: linear-gradient( rgb(13,120,191), rgb(193,229,248));

    /*These comands set the coniatners elements up to act like a grid, with columns and rows.
    I've set this one specificaly to have 2 columns "1fr 1fr" that are 1 fraction of the full containers and
    automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
}

.sec_1_about .text_sect {
    /*These commands first moves the text in the middle of the container, 
    then middle align or justifies the text, and adds padding to the sides*/
    
    align-content: center;
    justify-items: center;
    padding: 1vw;
}

.sec_1_about .about_img {
    /*The "display" command put the content in a formate that can be editied using 
    justify/align-content/items. The "justify-content" & "align-content" command moves the content's 
    items, in this case the image, relative to the space of the content.*/
    display: grid;
    justify-content: center;
    align-content: center;

    padding: 1vw;
}

.sec_1_about .about_img img{
    /* These comands allow the picture to have a maximum width it can reach but not a minimum, 
    meaning if the screen gets smaller it will be able to shrink. The "height:auto" allows the 
    height of the image to change based on the size of the screen*/
    
    max-width:100%;
    height:34vw;

    border-radius: 0.50vw;
}

/*LOCATION SECTION CODE*/
.sec_2_location {
    height: 750px;
    /* background-color: rgb(10, 149, 255); */

    /*These comands set the coniatners elements up to act like a grid, with columns and rows.
    I've set this one specificaly to have 2 columns "1fr 1fr" that are 1 fraction of the full containers and
    automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;

    /*These comands setup the Hero Image*/

    /*the "linear-gradient" part of the "background-image" command places a liner gradiant 
    over the "url" section or the img, that's why it comes after the comma.*/
    background-image: linear-gradient(rgba(255, 252, 252, 0.50), rgba(255, 252, 252, 0.85)), url("img/Painting-with-staffer-scaled.jpg");
    /*This centers the middle of the image in the middle of the content area.*/
    background-position: center;
    /*This prevents the image from repeating when the contents space has surpassed the images orginal size.*/
    background-repeat: no-repeat;
    /*Resize the background image to cover the entire container, even if it 
    has to stretch the image or cut a little bit off one of the edges*/
    background-size: cover;
    /*This give the parallax effect when you scroll. The background image will not scroll with the page*/
    background-attachment: fixed;
}

.sec_2_location .text_sect {
    /*These commands first moves the text in the middle of the container, 
    then middle align or justifies the text, and adds padding to the sides*/

    align-content: center;
    justify-items: center;
    padding: 1vw;
}

.sec_2_location .map_sect {
    
   /*The "display" command put the content in a formate that can be editied using 
    justify/align-content/items. The "justify-content" & "align-content" command moves the content's 
    items, in this case the text, relative to the space of the content.*/
    display: grid;
    justify-content: center;
    align-content: center;
}

.sec_2_location .map_sect iframe {
    border-radius: 0.50vw;
    width: 45vw;
    height: 70vh;
}

/*CONTACT SECTION CODE*/

.sec_3-contact{
    height: 600px;

    /* background-color: rgb(255, 10, 43); */


    background-image: linear-gradient(rgb(193,229,248), rgb(13,120,191));

    /*These comands set the coniatners elements up to act like a grid, with columns and rows.
    I've set this one specificaly to have 2 columns "1fr 1fr" that are 1 fraction of the full containers and
    automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr 1fr;
}
.sec_3-contact h2 {
    
    /*The "display" command put the content in a formate that can be editied using 
    justify/align-content/items. The "justify-content" & "align-content" command moves the content's 
    items, in this case the text, relative to the space of the content.*/
    display: grid;
    justify-content: center;
    align-content: center;
}

.contact_op_container {
    
    /*These comands set the coniatners elements up to act like a grid, with columns and rows.
    I've set this one specificaly to have 2 columns "1fr 1fr" that are 1 fraction of the full containers and
    automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr;
    grid-auto-rows: 1fr;

    height: 100%;
}

.sec_3-contact .phone_number {
    /*These commands first moves the text in the middle of the container, 
    then middle align or justifies the text, and adds padding to the sides*/

    align-content: center;
    justify-items: center;
    padding: 1vw;

    /*These comands set the coniatners elements up to act like a grid, with columns and rows.
    I've set this one specificaly to have 1 columns "1fr" that are 1 fraction of the full containers and
    2 rows "1fr 1fr" that are 1 fraction of the full containers height if need be.*/
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 2fr 1fr;

    
}

.sec_3-contact .email {
    /*These commands first moves the text in the middle of the container, 
    then middle align or justifies the text, and adds padding to the sides*/

    align-content: center;
    justify-items: center;
    padding: 1vw;

    /*These comands set the coniatners elements up to act like a grid, with columns and rows.
    I've set this one specificaly to have 1 columns "1fr" that are 1 fraction of the full containers and
    2 rows "1fr 1fr" that are 1 fraction of the full containers height if need be.*/
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 2fr 1fr;

    
}

.circle_element {
    

    
    /*This commands create a circle around the icon and text.*/
    background-image: radial-gradient(rgb(234, 255, 238),rgba(30, 161, 133, 0.25));
    border-radius: 100%;
    margin: 1vw;
}

/*This section has style formating for the icon elements in the contact section.*/

.sec_3-contact img {
    width: 100%;
    height: auto;

}

.sec_3-contact .phone_number .img_container{
    /*This commands moves the img container in the vertical center of it's parent container*/
    align-content: center;
}

.sec_3-contact .email .img_container{
     /*This commands moves the img container in the vertical center of it's parent container*/
    align-content: center;
}

.sec_3-contact .phone_number .img_container img{
    /*In order to move an image to the horzontially center of its parent area you must first 
    have it "display:grid" and then "justify-self" to the center. For some reason 
    you specifcaly have to use the "justify-self" command on the img element itslef"*/
    display: grid;
    justify-self: center;
}

.sec_3-contact .email .img_container img{
    /*In order to move an image to the horzontially center of its parent area you must first 
    have it "display:grid" and then "justify-self" to the center. For some reason 
    you specifcaly have to use the "justify-self" command on the img element itslef"*/
    display: grid;
    justify-self: center;
}

/*FOOTER SECTION CODE*/

footer {
    height: 100px;
    background-color:  rgb(13,120,191);

    /*These comands set the coniatners elements up to act like a grid, with columns and rows.
    I've set this one specificaly to have 2 columns "1fr 1fr" that are 1 fraction of the full containers and
    automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-auto-rows: 1fr;

    padding: 1vw;
}

footer p {
    font-size: 1vw;

    /*The "display" command put the content in a formate that can be editied using 
    justify/align-content/items. The "justify-content" & "align-content" command moves the content's 
    items, in this case the text, relative to the space of the content.*/
    display: grid;
    justify-content: center;
    align-content: end;

    color: rgb(21, 58, 87);

    font-family: "Goudy Bookletter 1911", serif;
    font-weight: 400;
    font-style: normal;
}

/*Reponsive Screen Breaks*/


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
     /*
    .sec_1_about {
         background-color: rgb(10, 10, 255);
        }
    .sec_2_location {
         background-color: rgb(255, 181, 10);
        }
    .sec_3-contact{
         background-color: rgb(10, 10, 255);
        }

    footer {
         background-color: rgb(255, 181, 10);
        } */
    .content_sect h2{
        font-size: 6vw;
    }
    .content_sect p{
        font-size: 4vw;
    }

    /*NAVIGATION SECTION*/
    nav {
        height: 40px;
    }

    .content_sect {
        /* This "" equales the height of the navigation menu allowing the menu to land right above a 
        section when the link in the nav bar is hit instead of clipping into the section. */
        padding-top: 40px;
    }
    nav ul{
        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
        I've set this one specificaly to have 4 columns "1fr 1fr 1fr 1fr" that are 1 fraction of the full containers and
        automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 1fr;
    }

    nav .logo_container {
        display: none;
    }

    nav ul li {
        font-size: 4vw;
    }

    nav ul .hover_highlight:hover {
        font-size: 4vw;
        background-color: rgb(193,229,248);
        color: rgb(21, 58, 87);


    }

    /*HEADER SECTION*/   
    header {
         height: 800px;

        }
    header h1{
        font-size: 10vw;
    }

    header p{
        font-size: 5vw;
        /*This aligns the text like in a text editor software.*/
        text-align: center;
    }

    .header_container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.25fr 0.10fr 0.10fr;
    }

    .header_container .header_img  {
        height: auto;
        width: 30vw;
    }

    
    /*ABOUT SECTION*/
    .sec_1_about p{
        font-size: 3.5vw;
    }
    .sec_1_about {
         height: auto;
         

         /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr 1fr;
    }
    .sec_1_about .text_sect {
        text-align: center;
        padding: 3vw;
        /* margin: 0 3vw 3vw 3vw; */

        align-content: center;
    }

    .sec_1_about .about_img img{
        border-radius: 3vw;
    }

    .sec_1_about .about_img {
        margin: 3vw 3vw 0 3vw;
    }
    .sec_1_about .about_img img{
        height: 55vw;
    }
    /*LOCATION SECTION*/
    .sec_2_location {
         height: auto;

        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr 2fr;
        }
    .sec_2_location .map_sect {
        margin: 0 3vw 3vw 3vw;

        align-content: start;
    }
    .sec_2_location .map_sect iframe {
        border-radius: 3vw;
        width: 80vw;
        height: 50vh;
    }
    /*CONTACT SECTION*/
    .sec_3-contact{
         height: auto;

         grid-template-rows: 1fr 6fr;
        }
    
    .contact_op_container {
        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 0 3fr 1fr 3fr 1fr;
        
        height: 100%;
        
    }

    .sec_3-contact img {
        height: 25vw;

    }

    

    /*FOOTER SECTION*/

    footer {
         height: 50px;

         display: grid;
         grid-template-columns: 1fr 2fr 1fr;
         grid-auto-rows: 1fr;
         
         padding: 1vw;
        }
    footer p {
        font-size: 3vw;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width:768px){
    /*
    .sec_1_about {
         background-color: rgb(10, 255, 10);
        }
    .sec_2_location {
         background-color: rgb(255, 10, 10);
        }
    .sec_3-contact{
         background-color: rgb(10, 255, 10);
        }

    footer {
         background-color: rgb(255, 10, 10);
        } */
    
    .content_sect h2{
        font-size: 6vw;
    }
    .content_sect p{
        font-size: 4vw;
    }

     /*NAVIGATION SECTION*/
    nav {
        height: 40px;
    }

    .content_sect {
        /* This "" equales the height of the navigation menu allowing the menu to land right above a 
        section when the link in the nav bar is hit instead of clipping into the section. */
        padding-top: 40px;
    }
    nav ul{
        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
        I've set this one specificaly to have 4 columns "1fr 1fr 1fr 1fr" that are 1 fraction of the full containers and
        automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 1fr;
    }

    nav .logo_container {
        display: none;
    }

    nav ul li {
        font-size: 4vw;
    }

    nav ul .hover_highlight:hover {
        font-size: 4vw;
        background-color: rgb(193,229,248);
        color: rgb(21, 58, 87);


    }

    
    /*HEADER SECTION*/   
    header {
         height: 800px;

        }
    header h1{
        font-size: 10vw;
    }

    header p{
        font-size: 5vw;
        /*This aligns the text like in a text editor software.*/
        text-align: center;
    }

    .header_container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.05fr 0.05fr 0.05fr;
    }

    .header_container .header_img  {
        height: auto;
        width: 30vw;
    }

    
    /*ABOUT SECTION*/
    .sec_1_about p{
        font-size: 2.75vw;
    }
    .sec_1_about {
         height: auto;
         

         /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 2fr 1fr;
    }
    .sec_1_about .text_sect {
        text-align: center;
        padding: 3vw;
        /* margin: 0 3vw 3vw 3vw; */

        align-content: center;
    }

    .sec_1_about .about_img img{
        border-radius: 3vw;

        height: 75vw;
    }

    .sec_1_about .about_img {
        margin: 3vw 3vw 0 3vw;
    }

    /*LOCATION SECTION*/
    .sec_2_location {
         height: auto;

        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr 2fr;
        }
    .sec_2_location .map_sect {
        margin: 0 3vw 3vw 3vw;

        align-content: center;
    }
    .sec_2_location .map_sect iframe {
        border-radius: 3vw;
        width: 80vw;
        height: 60vh;
    }
    /*CONTACT SECTION*/
    .sec_3-contact{
         height: auto;

         grid-template-rows: 1fr 6fr;
        }
    
    .contact_op_container {
        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 0 5fr 0 5fr 1fr;
        
        height: 100%;
        
    }

    .sec_3-contact img {
        height: 15vw;

    }

    

    /*FOOTER SECTION*/

    footer {
         height: 50px;

         display: grid;
         grid-template-columns: 1fr 2fr 1fr;
         grid-auto-rows: 1fr;
         
         padding: 1vw;
        }
    footer p {
        font-size: 3vw;
    }
  
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width:992px) {
    /* .sec_1_about {
         height: 750px;
         background-color: rgb(206, 0, 209);
        }
    .sec_2_location {
         height: 750px;
         background-color: rgb(10, 243, 255);
        }
    .sec_3-contact{
         height: 750px;
         background-color: rgb(206, 0, 209);
        }

    footer {
         height: 200px;
         background-color: rgb(10, 243, 255);
        } */

    .content_sect h2{
        font-size: 6vw;
    }
    .content_sect p{
        font-size: 4vw;
    }

     /*NAVIGATION SECTION*/
    nav {
        height: 40px;
    }

    .content_sect {
        /* This "" equales the height of the navigation menu allowing the menu to land right above a 
        section when the link in the nav bar is hit instead of clipping into the section. */
        padding-top: 40px;
    }
    nav ul{
        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
        I've set this one specificaly to have 4 columns "1fr 1fr 1fr 1fr" that are 1 fraction of the full containers and
        automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 1fr;
    }

    nav .logo_container {
        display: none;
    }

    nav ul li {
        font-size: 3vw;
    }

    nav ul .hover_highlight:hover {
        font-size: 3vw;
        background-color: rgb(193,229,248);
        color: rgb(21, 58, 87);


    }

    
    /*HEADER SECTION*/   
    header {
         height: 800px;

        }
    header h1{
        font-size: 9vw;
    }

    header p{
        font-size: 4vw;
        /*This aligns the text like in a text editor software.*/
        text-align: center;
    }

    .header_container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.05fr 0.05fr 0.05fr;
    }

    .header_container .header_img  {
        height: auto;
        width: 30vw;
    }

    
    /*ABOUT SECTION*/
    .sec_1_about p{
        font-size: 2.25vw;
    }
    .sec_1_about {
         height: auto;

         /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 2fr 1fr;
    }
    .sec_1_about .text_sect {
        text-align: center;
        padding: 0 3vw 3vw 3vw;
        /* margin: 0 3vw 3vw 3vw; */

        align-content: center;
    }

    .sec_1_about .about_img img{
        border-radius: 3vw;

        height: 75vh;
    }

    .sec_1_about .about_img {
        margin: 3vw 3vw 0 3vw;
    }

    /*LOCATION SECTION*/
    .sec_2_location {
         height: auto;

        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr 2fr;
        }
    .sec_2_location .map_sect {
        margin: 0 3vw 3vw 3vw;

        align-content: center;
    }
    .sec_2_location .map_sect iframe {
        border-radius: 3vw;
        width: 80vw;
        height: 60vh;
    }
    /*CONTACT SECTION*/
    .sec_3-contact{
         height: auto;

         grid-template-rows: 1fr 6fr;
        }
    
    .contact_op_container {
        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 0 5fr 0 5fr 1fr;
        
        height: 100%;
        
    }

    .sec_3-contact img {
        height: 15vw;

    }

    

    /*FOOTER SECTION*/

    footer {
         height: 50px;
        
         display: grid;
         grid-template-columns: 1fr 2fr 1fr;
         grid-auto-rows: 1fr;
         
         padding: 1vw;
        }
    footer p {
        font-size: 3vw;
    }
  } 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width:1200px) {
    /* .sec_1_about {
         background-color: rgb(18, 209, 0);
        }
    .sec_2_location {
         background-color: rgb(255, 10, 10);
        }
    .sec_3-contact{
         background-color: rgb(18, 209, 0);
        }

    footer {
         background-color: rgb(255, 10, 10);
        } */
    
    .content_sect h2{
        font-size: 7vw;
    }
    .content_sect p{
        font-size: 6vw;
    }

    

     /*NAVIGATION SECTION*/
    nav {
        height: 40px;
    }

    .content_sect {
        /* This "" equales the height of the navigation menu allowing the menu to land right above a 
        section when the link in the nav bar is hit instead of clipping into the section. */
        padding-top: 40px;
    }
    nav ul{
        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
        I've set this one specificaly to have 4 columns "1fr 1fr 1fr 1fr" that are 1 fraction of the full containers and
        automaticaly make rows with a height of 1 fraction of the full containers height if need be.*/
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 1fr;
    }

    nav .logo_container {
        display: none;
    }

    nav ul li {
        font-size: 4vw;
    }

    nav ul .hover_highlight:hover {
        font-size: 4vw;
        background-color: rgb(193,229,248);
        color: rgb(21, 58, 87);


    }


    /*HEADER SECTION*/   
    header {
         height: 800px;

        }
    header h1{
        font-size: 9vw;
    }

    header p{
        font-size: 4vw;
        /*This aligns the text like in a text editor software.*/
        text-align: center;
    }

    .header_container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.025fr 0.025fr 0.025fr;
    }

    .header_container .header_img  {
        height: auto;
        width: 30vw;
    }

    
    /*ABOUT SECTION*/
    .sec_1_about p{
        font-size: 2.00vw;
    }
    .sec_1_about {
         height: auto;

         /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 2fr 1fr;
    }
    .sec_1_about .text_sect {
        text-align: center;
        padding: 0 3vw 3vw 3vw;
        /* margin: 0 3vw 3vw 3vw; */

        align-content: center;
    }

    .sec_1_about .about_img img{
        border-radius: 3vw;

        height: 75vh;
    }

    .sec_1_about .about_img {
        margin: 3vw 3vw 0 3vw;
    }

    /*LOCATION SECTION*/
    .sec_2_location {
         height: auto;

        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr 2fr;

         
        }
    .sec_2_location p {
        font-size: 4vw;
    }
    .sec_2_location .map_sect {
        margin: 0 3vw 3vw 3vw;

        align-content: start;
        
    }
    .sec_2_location .map_sect iframe {
        border-radius: 3vw;
        width: 80vw;
        height: 55vh;
    }
    /*CONTACT SECTION*/

    .sec_3-contact{
         height: auto;

         grid-template-rows: 1fr 6fr;
        }
    .sec_3-contact p {
        font-size: 3vw;
    }
    
    .contact_op_container {
        /*These comands set the coniatners elements up to act like a grid, with columns and rows.
         I've set this one specificaly to have 1 column "1fr" that is 1 fraction of the full containers and
         2 rows "1fr 2fr" with a height of 1 fraction and 2 fraction of the full containers height if need be.*/
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 0 5fr 0 5fr 3fr;
        
        height: 100%;
        
    }

    .sec_3-contact img {
        height: 10vw;

    }

    

    /*FOOTER SECTION*/

    footer {
         height: 50px;
        
         display: grid;
         grid-template-columns: 1fr 2fr 1fr;
         grid-auto-rows: 1fr;
         
         padding: 1vw;
        }
    footer p {
        font-size: 3vw;
    }

  }


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /*
    .sec_1_about {
         background-color: rgb(10, 10, 255);
        }
    .sec_2_location {
         background-color: rgb(255, 181, 10);
        }
    .sec_3-contact{
         background-color: rgb(10, 10, 255);
        }

    footer {
         background-color: rgb(255, 181, 10);
        } */
  }