* {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans", sans-serif;
	cursor: default;
}

.header {
	min-height: 100vh;
	width: 100%;
	background-color: rgb(236, 236, 197);
	background-image: linear-gradient(
			rgba(222, 248, 248, 0.7),
			rgba(47, 66, 85, 0.849)
		),
		url(dad.png);
	background-position: center;
	background-size: cover;
	position: relative;
}

nav {
	display: flex;
	padding: 2% 6%;
	justify-content: space-between;
	align-items: center;
	
}

nav img {
	width: 150px;
}

.nav-links {
	flex: 1;
	text-align: right;
}

.nav-links ul li {
	list-style: none;
	display: inline-block;
	padding: 8px 12px;
	position: relative;
}
.nav-links ul li a {
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}

.nav-links ul li::after {
	content: "";
	width: 0%;
	height: 3px;
	background: rgb(117, 117, 255);
	display: block;
	margin: auto;
	transition: 0.5s;
}

.nav-links ul li:hover::after {
	width: 100%;
}

.logo {
 cursor: pointer;
}
.text-box {
	width: 90%;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.text-box h1 {
	font-size: 82px;
}

.text-box p {
	margin: 10px 0 40px;
	font-size: 20px;
	font-weight: bold;
	color: #1a194b;
}

.hero-btn {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	border: 1px solid #fff;
	padding: 12px 34px;
	font-size: 13px;
	background: transparent;
	position: relative;
	cursor: pointer;
}
.hero-btn:hover {
	border: 1px solid #ce3d3d;
	background: linear-gradient(
		rgba(216, 60, 13, 0.959),
		rgba(231, 85, 17, 0.849)
	);
	transition: 1s;
}
.pick-button {
	text-decoration: none;
	color:  rgb(1, 1, 29);
}
nav .fa {
	display: none;
}

@media (max-width: 700px) {
	.text-box h1 {
		font-size: 20px;
	}
	.nav-links ul li {
		display: block;
	}
	.nav-links {
		position: fixed;
		background: #b86a3c;
		height: 100vh;
		width: 200px;
		top: 0;
		right: -200px;
		text-align: left;
		z-index: 2;
		transition: 1s;
	}

	nav .fa {
		display: block;
		color: #fff;
		margin: 10px;
		font-size: 22px;
		cursor: pointer;
	}

	.nav-links ul {
		padding: 20px;
	}
	.header h1 {
		font-size: 38px;
	}
}

/*--Our Services----*/

.services {
	width: 80%;
	margin: auto;
	text-align: center;
	padding-top: 100px;
}
h1 {
	font-size: 36px;
	font-weight: 600;
	color: rgb(42, 42, 109);
}
p {
	color: rgb(97, 97, 170);
	font-size: 14px;
	font-weight: 300;
	line-height: 22px;
	padding: 10px;
}
.services ul li:first-child {
	list-style: none;
	padding-top: 30px;
	position: relative;
}

.services ul li {
	list-style: none;
	padding: 10px;
	color: rgb(42, 42, 109);
	position: relative;
	
}

.row {
	margin-top: 5%;
	display: flex;
	justify-content: space-between;
}
.services-col {
	flex-basis: 31%;
	background: #faf7f6;
	border-radius: 10px;
	margin-bottom: 5%;
	padding: 20px 12px;
	box-sizing: border-box;
	transition: 2s;
}

h3 {
	text-align: center;
	font-weight: 600;
	margin: 10px 0;
}
.services-col:hover {
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
	background: linear-gradient(
		rgba(216, 60, 13, 0.521),
		rgba(231, 85, 17, 0.137)
	);
	
}
.services-col:hover p {
	color: rgb(34, 34, 78);
}

@media (max-width: 700px) {
	.row {
		flex-direction: column;
	}
}

@media (max-width: 700px) and (orientation: landscape) {
	
	html{
	zoom: 50%;
	}

}

/*-----Our Work-----*/

.ourWork {
	width: 80%;
	margin: auto;
	text-align: center;
	padding-top: 100px;
}

.ourWork-col {
  flex-basis: 31%;
  border-radius: 10px;
  margin-bottom: 5%;
  text-align: left;

}

.ourWork-col img {
	width: 100%;
	border-radius: 10px;
}

.ourWork-col p {
	padding: 0%;
}

.ourWork-col h3 {
	margin-top: 16px;
	margin-bottom: 15px;
	text-align: left;
}

/*---free quote--*/

.freeQuote {
	margin: 100px auto;
	width: 90%;
	background-image: linear-gradient(
		rgba(0, 0, 0, 0.719),
		rgba(0, 0, 0, 0.445)),url(need_upgrade.jpg);
	background-position: center;
	background-size: cover;
	border-radius: 150px;
	text-align: center;
	padding: 100px 0;

}
.freeQuote h1 {
	color: #fff;
	margin-bottom: 20px;
	padding: 0;
}


@media(max-width: 700px) {
	.freeQuote h1 {
		font-size: 25px;
	}
}

/*------footer-------*/

.footer {
	width: 100%;
	text-align: center;
	padding: 30px 0;
}

.footer h1 {
	margin-bottom: 25px;
	margin-top: 20px;
	font-weight: 600;
}

.icons .fa{
	color: #b81307;
	margin: 0 13px;
	cursor: pointer;
	padding: 18px 0;
}


/*------About Us Page -----*/

.sub-header {
	height: 60vh;
	width: 100%;
	background-image: linear-gradient(rgba(29, 38, 73, 0.7),rgba(14, 22, 54, 0.7)),url(dad.png);
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #fff;
	
}

.sub-header h1 {
	margin-top: 60px;
	color: #fff;
	font-size: 50px;
	
}

.about-us {
	width: 80%;
	margin: auto;
	padding-top:  80px;
	padding-bottom: 50px;
	
}
.about-col {
	flex-basis: 50%;
	padding: 30px 2px;
}

.about-col img {
	width: 110%;
	border-radius: 10px;
}

.about-col h1 {
	padding-top: 0%;
}
.about-col p {
	padding: 15px 30px 25px 0px;
	font-size: 15px;
	font-weight: 470;
	color: rgb(134, 135, 150);
}

.green-btn {
	border: 2px solid rgb(3, 15, 87);
	background: transparent;
	color: rgb(23, 1, 85);
}

.green-btn:hover {
	color: #fff;
	transition: 0s;
}


/* Services Page */


.services-col {
	cursor: help;
}
.row2 {
	flex-basis: auto;
	float: right;
	

}
.leftside {
	float:left;
	padding-right: 30px;
	
}

.our-services {
	 overflow-x: hidden;
	justify-content: space-between;
}

.our-services  h1 {
  font-size: 20px;
	font-weight: 400;
	line-height: 22px;

}

.services-col p {
	font-weight: 400;
	color:  rgb(134, 135, 150);
}

@media(max-width: 800px) {
	.row {
	margin-top: 5%;
	display: table;
	justify-content: center;
}
	.leftside {
		
		text-align: center;
		translate: 20px 0px;
	}
	.row2 {
		translate: 5px 0px;
	}

}
.services-col h3 {
	color:  rgb(13, 16, 58);
}
.bottomP p {
	font-weight: 400;
	color:  rgb(34, 36, 63);
	cursor: pointer;
}
/*---contact Us Page----*/

.location {
	width: 80%;
	margin: auto;
	padding: 80px 0;
}

.location iframe {
	width: 100%;
}
.contact-us {
	width: 80%;
	margin: auto;
}
.contact-col {
	flex-basis: 48%;
	margin-bottom: 30px;
}

.contact-col div {
	display: flex;
	align-items: center;
	margin-bottom: 40px;

}

.contact-col div .fa {
	font-size: 28px;
	color: #0f197ab9;
	margin: 10px;
	margin-right: 30px;
}

.contact-col div p {
	padding: 0;
	font-weight: 200;
}

.contact-col div h5 {
	font-size: 20px;
	margin-bottom: 5px;
	color: #555;
	font-weight: 400;
	
}

.contact-col input, .contact-col textarea, .contact-col select {
	cursor: auto;
	width: 100%;
	padding: 15px;
	margin-bottom: 17px;
	
	outline: none;
	border: 1px solid #ccc;
	box-sizing: border-box;
	
}

.contact-col label {
 color: #556;
}

select:invalid {
	color: gray;
}



/*
 rgb(0,168,119,0.5);

 (rgba(86, 101, 167, 0.959),
			rgba(47, 66, 85, 0.849));
			
			
		.services-col {
	cursor: help;
}
.row2 {
	flex-basis: auto;
	float: right;
	

}
.leftside {
	float:left;
	padding-right: 30px;
	text-decoration: ;
}

.our-services {
	display: flexbox;
	justify-content: space-between;
}








<section class="our-services">

		<section class="services">
			

			</div><h1>Our Services</h1>
			<p>Here are a few of the services we offer.</p>
			<div class="leftside">
			<ul>
				<li>Network Installation/Monitoring</li>
				<li>Security Camera Installation</li>
				<li>Network Maintenance</li>
				<li>Security System Upgrades</li>
				<li>Monthly Maintenance Packages</li>
				<li>Computer Install/Maintenance</li>
				<li>Media Component Install</li>
				<li>Website Design</li>
				<li>Social Media Management</li>
				<li>Computer Install/Maintenance</li>
				<li>Media Component Install</li>
				<li>Website Building</li>
				<li>Social Media Management</li>
			</ul>
</div>
			<div class="row">
				<div class="row2">
				
				<div class="services-col">
					<h3>Security Camera System Installation</h3>
					<p>Text text text text</p>
				</div>
				<div class="services-col">
					<h3>Media Component Installation</h3>
					<p>Text text text text</p>
				</div>
				<div class="services-col">
					<h3>Lease Agreements</h3>
					<p>We also offer lease agreements for security camera systems to commercial and residential properties. Contact us for a quote to see if your property qualifies.</p>
				</div>
				<div class="services-col" class="row2">
					<h3>Monthly Maintenance Package</h3>
					<p>Text text text text</p>
			</div>
		</div>
	
</section>


.course = .services
course-col = services-col
facilities = ourWork
cta = freeQuote


.services-col {
	cursor: help;
}
.row2 {
	flex-basis: auto;
	float: right;
	

}
.leftside {
	float:left;
	padding-right: 30px;
	
}

.our-services {
	 overflow-x: hidden;
	justify-content: space-between;
}

.our-services  h1 {
  font-size: 20px;
	font-weight: 400;
	line-height: 22px;

}

.services-col p {
	fo
}
@media(max-width: 800px) {
	.row {
	margin-top: 5%;
	display: table;
	justify-content: center;
}
	.leftside {
		
		text-align: center;
	}
	.row2 {
		translate: 5px 0px;
	}

}

*/