@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.eot');
    src: url('../fonts/Inter-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-Bold.woff2') format('woff2'),
        url('../fonts/Inter-Bold.woff') format('woff'),
        url('../fonts/Inter-Bold.ttf') format('truetype'),
        url('../fonts/Inter-Bold.svg#Inter-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.eot');
    src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Light.woff2') format('woff2'),
        url('../fonts/Roboto-Light.woff') format('woff'),
        url('../fonts/Roboto-Light.ttf') format('truetype'),
        url('../fonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-LightItalic.eot');
    src: url('../fonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-LightItalic.woff2') format('woff2'),
        url('../fonts/Roboto-LightItalic.woff') format('woff'),
        url('../fonts/Roboto-LightItalic.ttf') format('truetype'),
        url('../fonts/Roboto-LightItalic.svg#Roboto-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}


@charset "utf-8";
/* CSS Document */

/* Fonts 
get font reference in google fonts
font-family: 
font-family: 
font-family: 
font-family: 



get these codes from photoshop
#03a7dd - Blue
#000000 - Black
#

here is the only query i use - mobile first design only need queryies for larger screens , i dont do any landscap - portarait styles only screen width from mobile first principle




background with overlay format {
   
	background: linear-gradient(
      rgba(42,42,42,.90), 
      rgba(42,42,42,.80) ), url("https://www.magnetizeyourimages.com/buildingprinciplesimages/jpeg/title III parking lot.jpeg");
	background-repeat: no-repeat;
	background-position: 12% 0%;
	background-size: cover;


}





@media screen and (min-width : 
*/

/* Navigation */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-display: swap;
	vertical-align: baseline;
	
}

	html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
	
}
body {
    
	line-height: 1;
	font-family: Times New Roman, Arial, Helvetica, sans-serif;
	background-color: black;
	width: 100%;
	font-family: 'Roboto';
	font-size: 1rem;
	font-weight: 300;

}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	
}



.section_title {
display: block;
width: 100%;
text-align: center;
font-size: 1.4rem;
padding: 6px 0 6px 0;
font-weight: bold;
}

.section_sub {
display: block;
width: 100%;
padding-bottom: 8px;
font-style: italic;
letter-spacing: 2px;
text-align: center;
}

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

.section_title {
font-size: 1.6rem;
padding: 12px 0 12px 0;
}


}
.error_message {
color: white;
border-bottom: 2px solid red;
}

.success_message {
color: white;
}

/*MOB NAV*/
#mobile_nav_background {
display: block;
position: relative;
width: 100%;
}

.mobile_nav_wrapper {
display: block;
position: relative;
}

.mobile_nav_logo_wrapper {
width: 70%;
display: block;
margin: 0 auto;
padding: 12px;
}

.mobile_nav_logo {
position: relative;
width: 100%;
height: 100%;
max-width: 250px;
object-fit: contain;
margin: 0 auto;
display: block;
}

.hamberger_wrapper {
position: absolute;
top: 20px;
right: 15px;
display: block;
z-index: 90;
cursor: pointer;
}

.bar1, .bar2, .bar3 {
width: 36px;
height: 3px;
background-color: white;
margin: 6px 0;
transition: 0.8s ease-in-out;
z-index: 1;
position: relative;
}

@media screen and (min-width: 900px) {
#mobile_nav_background {
display: none;
}
}
/*END MOB NAV*/

/*TOP BAR*/
#top_bar_background {
display: block;
position: relative;
transition: .6s ease-in-out;
background-color: white;
color: black;
display: block;
position: relative;
width: 100%;
line-height: 1.4rem;
}

#top_bar_wrapper {
position: relative;
display: block;
transition: .6s ease-in-out;
overflow: hidden;
height: auto;
max-height: 0;
}

.top_bar_sections {
margin: 0;
display: block;
position: relative;
}

.links_contact {
text-decoration: none;
color: black;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8.5px 0;
}

.top_bar_img_wrapper {
display: block;
position: relative;
padding: 0;
}	

.links_img {
width: 25px;
height: 25px;
margin-right: 12px;
margin-left: 12px;
}
    

#top_bar_cta {
background-color: #03a7dd;
padding: 13px 8px;
display: block;
width: 100%;
position: relative;
text-align: left;
}

@media screen and (min-width: 900px) {
    #top_bar_background {
    display: block;
    height: 70px;
    }


    #top_bar_cta {
    text-align: center;
    }

    #top_bar_wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: visible;
    height: auto;
    max-height: 0;
    padding-top: 5px;
    max-height: 100%;
    }

    #top_bar_section_cta {
    width: 28%;
    }

    #top_bar_section_phone {
    width: 15%;
    }

    .top_bar_sections {
    width: 24%;
    position: relative;
    margin: 0;
    display: block;
    }

    .links_contact {
    padding: 10px 0;
    }

    .links_img {
    width: 25px;
    margin-right: 12px;
    margin-left: 12px;
    }
            
        
}
/*END TOP BAR*/

/*NAVIGATION*/
#navigation_background {
display: block;
position: relative;
transition: .6s ease-in-out;
background-color: #03A7DD;
}

#nav_logo {
display: none;
}

#navigation {
transition: .6s ease-in-out;
position: relative;
display: block;
height: auto;
max-height: 0;
overflow: hidden;
}

.nav_li {
display: block;
position: relative;
}


.navlinks {
display: block;
padding: 16px 12px;
transition: .6s ease-in-out;
cursor: pointer;
text-decoration: none;
color: black;
width: 100%;
}

.desk_nav_logo {
width: 100%;
display: block;
position: relative;
}

#nav_drop_li {
height: auto; /* 240px   48px*/
overflow: hidden;
position: relative;
display: block;
transition: .6s ease-in-out;
height: 48px;
}

.navlink_drop_text {
display: block;
padding: 16px 12px;
cursor: pointer;
}

.navling_drop_icon_wrapper {
display: block;
position: absolute;
top: 16px;
right: 20px;
width: 25px;
height: 25px;
}

.navling_drop_icon {
width: 25px;
height: 25px;
}

.sub_navlinks {
text-decoration: none;
color: black;
display: block;
position: relative;
padding: 16px 35px;
}


#nav_drop_li li {
transition: .6s ease-in-out;
cursor: pointer;
}

#services_drop_icon {
transform: rotate(-90deg);
transition: .6s ease-in-out;
}


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

    #remove_link {
    display: none;
    }

    #navigation_background { 
    background-color: black;
    width: 100%;
    height: 90px;
    padding: 12px 8px;
    }

    

    #navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    height: auto;
    overflow: visible;
    }
    
    .navigation_wrapper li:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 2px;
    left: 0;
    background-color:  #03A7DD;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    }

    .navigation_wrapper li:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    } 
    
    

    #nav_drop_ul li:before {
    content: "";
    position: absolute;
    width: 75%;
    height: 3px;
    bottom: 2px;
    left: 10%;   
    background-color:  #03A7DD;
    transform: scaleX(0) translate(0, 0);
    transition: all 0.3s ease-in-out 0s;
    }

    #nav_drop_ul li:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    } 

    .navigation_wrapper #nav_drop_ul:before {
    transition: none;
    position: relative;   
    }

    .navigation_wrapper #nav_logo:before {
    transition: none;
    position: relative;   
    }
    



    .navlinks {
    transition: .8s ease-in-out;
    position: relative;
    z-index: 50;
    width: 100%;
    max-width: 125px;
    color: #03A7DD;
    text-align: center;
    }

    .navlink_drop_text {
    color: #03A7DD;
    transition: .8s ease-in-out;
    position: relative;
    text-decoration: none;
    z-index: 50;
    width: 100px;
    text-align: center;
    }

    #nav_drop_li { 
    display: block;
    position: relative;
    width: 100px;
    overflow: visible;
    }

    
    #nav_drop_ul {
    position: absolute;
    top: 68px;    
    display: block;
    z-index: 55;
    background-color: black;
    width: 300px;
    max-height: 0;
    height: 240px;
    overflow: hidden;
    transition: .6s ease-in-out;
    }

    #nav_drop_ul li{
    position: relative;
    display: block;
    }


    .sub_navlinks {
    text-decoration: none;
    color: #03A7DD;
    }

    .navling_drop_icon_wrapper {
    display: none;
    height: 0;
    }

    #nav_logo {
    display: block;
    width: 150px;
    }

}


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

    #navigation_background { 
    height: 110px;
    }

    #nav_logo {
    width: 175px;
    }

    #nav_drop_ul {
    top: 82px;    
    }
}

/* END NAVIGATION*/