*{box-sizing: border-box;margin: 0 ;padding: 0;}body, html {height: 100vh;width:100%;letter-spacing: 1px;color: rgb(19, 18, 18);font-family: 'Lato', sans-serif;font-size: 1em;line-height: 1.6;font-weight: 300;}img {max-width: 100%;height: auto;}
/* GLOBAL END */

/*MOBILE FIRST LOAD */
.master-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));grid-template-rows: auto;grid-template-areas: 
"header"
"top-intro"
"hero"
"solutions"
"about"
"key-notes"
"our-solutions"
"network-1"
"network-2"
"network-4"
"network-3"
"talk"
"footer"
;
}
/*MOBILE END */

/*LARGER SCREENS LOADING ONLY*/
@media  only screen and (min-width: 1200px){.master-grid{display: grid;grid-gap: 1em;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-areas:
	" header            header             header              header  "
" top-intro          top-intro           top-intro            top-intro   "
"hero                  hero                  hero              hero   "
"   .                     solutions           solutions                  .  "
"   .                     about                about                       .  "
"key-notes         key-notes          key-notes           key-notes"
" our-solutions   our-solutions    our-solutions          our-solutions  "
" network-1        network-2         network-4        network-3  "
"  .                       talk                   talk                  . "
"footer               footer                 footer                        footer"
;
}
}
.logo {
padding: 10px;
}
.nav-logo {
max-width: 120px;
background-color: white;
padding-top: 5px;
}
/* TOP INTRO SECTION */
.top-intro{
grid-area: top-intro;
max-height: 200px;
margin-top: 1%;
}
/* END */

.hero {
grid-area: hero;
background:  linear-gradient(rgba(12, 8, 8, 0.6) 100%, rgba(22, 22, 22, 0.6)  100%, rgba(22, 22, 22, 0.6)  100%),  url("images/server-main.webp");
background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed;
min-height: 980px;
}
.hero h1 {
color: rgb(192, 189, 189);
font-size: 1vw;
margin-top: 2%;
text-align: center;
padding: 10px 20px;
font-weight: 400;
}
.hero h2{
color: rgb(218, 211, 211);
font-size: 4vw;
text-align: center;
margin-top: 6%;
padding: 10px;
font-weight: 300;
}
.hero h3{
color: white;
font-size: 2vw;
text-align: center;
font-weight: 400;
letter-spacing: 10px;
}
/* ABOUT US */
.about {
grid-area: about;
padding: 10px;
margin: 10px 20px;
font-weight: 400;
}
.about h2 {
font-weight: 400;
padding: 10px;
font-size: 2em;
letter-spacing: 10px;
}
.about h3 {
	font-weight: 400;
	padding: 10px;
	font-size: 2em;
	letter-spacing: 10px;
	}
/* SERVICES */
.solutions {
grid-area: solutions;
padding: 10px;
margin: 10px 20px;
font-weight: 400;
}


.solutions h2 {
font-weight: 300;
padding: 10px;
font-size: 1.2em;
}
.solutions ul {
margin: 0px;
padding: 0px;
list-style-type: square;
}
.solutions	li {
margin-left: 20px;
padding: 5px;
}
.our-solutions{
grid-area: our-solutions;
text-align: center;
padding: 20px;
margin: 60px 0;
}

.our-solutions h3 {
	font-size: 2.5vw;
	font-weight: 300;
	}
.key-notes{
grid-area: key-notes;
text-align: center;
margin: 100px auto;
}
.key-notes h2 {
font-size: 1.5vw;
font-weight: 300;
padding: 10px;
color: rgb(85, 81, 81);
}
.network-1 {
grid-area: network-1;
padding: 30px;
}
.network-1 li {
margin-left: 15px;
list-style: square;
padding-left: 10px;
font-size: 1.1em;
font-weight: 400;
}
.network-1 h2, .network-2 h2, .network-3 h2, .network-4 h2 {
	padding: 5px;
}
.network-2 {
grid-area: network-2;
padding: 30px;
}
.network-3 {
grid-area: network-3;
padding: 30px;
}
.network-4 {
grid-area: network-4;
padding: 30px;
}
.network-4 h3 {
	font-size: 1em;
	font-weight: bold;
}
.zoom {
transition: transform ease-in-out .2s;
margin: 0 auto;
padding: 5px;
}
.zoom:hover {
transform: translateY(-8px);
}
.talk{
grid-area: talk;
text-align: center;
margin: 150px 0;
}
/* BUTTONS */
.btn-1 {
color:  rgb(126, 126, 124);
display: flex;
align-items: center;
justify-content: center;
border: rgb(126, 126, 124) solid  3px;
border-radius: 3px;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
width: 180px;
padding: 10px;
margin: auto;
}
.btn-1:hover {
background-color: transparent ;
border-color: rgb(15, 15, 15);
color:  black;
text-decoration: none;
cursor: pointer;
}
.btn-2 {
color:  white !important;
display: flex;
align-items: center;
justify-content: center;
border: rgb(40, 41, 41) solid  3px;
border-radius: 3px;
text-decoration: none;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
width: 180px;
padding: 10px;
margin: auto;
}
.btn-2:hover {
background-color: transparent ;
border-color: white;
color:  black ;
text-decoration: none;
cursor: pointer;
}
/* BUTTON END */

/* NAVIGATION */
header {
	grid-area: header;
	}
	.page-header {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	background: #333333;
	position: fixed;
	top: 0;
	height: 80px;
	color: #fff;
	width: 100%;
	line-height: 40px;
	}
	.page-header__top {
	display: flex;
	justify-content: space-between;
	padding: 10px 10px;
	}
	.page-header__toggle {
	font-size: 2em;
	
	}
	
	.navigation {
	opacity: 0.5;
	height: 0;
	overflow: hidden;
	transition: 0.7s;
	background: #333333;
	
	}
	.navigation a {
		color: white;
	}
	.navigation a:hover {
		color: white;
	}
	.navigation__item {
	padding: 10px 10px;
	}
	.navigation--visible {
	opacity: 1;
	height: 200px;
	}
	
	@media (min-width: 480px) {
	.page-header {
	display: flex;
	}
	.page-header__top {
	margin-right: auto;
	}
	.page-header__top, .page-header__bottom {
	display: block;
	}
	.page-header__toggle {
	display: none;
	}
	
	.navigation {
	display: block;
	opacity: 1;
	height: auto;
	}
	.navigation__item {
	opacity: 0.8;
	display: inline-block;
	}
	.navigation__item:hover {
	cursor: pointer;
	opacity: 1;
	}
	}
	/* END */

/* FOOTER SECTION STARTS HERE */
footer {
grid-area: footer;
padding: 10px;
}
.footer-section {
background: rgb(45, 46, 46);
position: relative;
}
.footer-cta {
border-bottom: 1px solid #373636;
}
.single-cta i {
color: #ff5e14;
font-size: 30px;
float: left;
margin-top: 8px;
}
.cta-text {
padding-left: 15px;
display: inline-block;
}
.cta-text a {
	color: white;
}
.cta-text a:hover {
	color: white;
}
.cta-text h4 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 2px;
}
.cta-text span {
color: white;
font-size: 15px;
}
.footer-content {
position: relative;
z-index: 2;
}
.footer-pattern img {
position: absolute;
top: 0;
left: 0;
height: 330px;
background-size: cover;
background-position: 100% 100%;
}
.footer-logo {
margin-bottom: 30px;
}
.footer-logo img {
max-width: 200px;
}
.backing {
background-color: white;
}
.footer-text p {
margin-bottom: 14px;
font-size: 14px;
color: #7e7e7e;
line-height: 28px;
}
.footer-social-icon span {
color: #fff;
display: block;
font-size: 20px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
margin-bottom: 20px;
}
.footer-social-icon a {
color: #fff;
font-size: 16px;
margin-right: 15px;
}
.footer-social-icon i {
height: 40px;
width: 40px;
text-align: center;
line-height: 38px;
border-radius: 50%;
}
.facebook-bg{
background: #3B5998;
}
.twitter-bg{
background: #55ACEE;
}
.google-bg{
background: #DD4B39;
}
.footer-widget-heading h3 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 40px;
position: relative;
}
.footer-widget-heading h3::before {
content: "";
position: absolute;
left: 0;
bottom: -15px;
height: 2px;
width: 50px;
background:  #ff5e14;
}
.footer-widget ul li {
display: inline-block;
width: 50%;
margin-bottom: 12px;
}
.footer-widget ul li a:hover{
color: #ff5e14;
}
.footer-widget ul li a {
color: white;
text-transform: capitalize;
}
.subscribe-form {
position: relative;
overflow: hidden;
}
.subscribe-form input {
width: 100%;
padding: 14px 28px;
background: #2E2E2E;
border: 1px solid #8b8a8a;
color: #fff;
}
.subscribe-form button {
position: absolute;
right: 0;
background: #ff5e14;
padding: 13px 20px;
border: 1px solid #ff5e14;
top: 0;
}
.subscribe-form button i {
color: #fff;
font-size: 22px;
transform: rotate(-6deg);
}
.copyright-area{
background: #202020;
padding: 25px 0;
}
.copyright-text p {
margin: 0;
font-size: 0.7em;
color: white;
}
.copyright-text p a{
color: #ff5e14;
}
.footer-menu li {
display: inline-block;
margin-left: 20px;
}
.footer-menu li:hover a{
color: #ff5e14;
}
.footer-menu  a {
font-size: 14px;
color: rgb(117, 119, 119);
}
.footer-menu p {
color: white;
font-size: 0.7em;
}
.footer-menu a:hover {
	color: rgb(20, 240, 203);
	}
.footer-text p {
color: white;
}
/* END */

/* MEDIA QUERIES */
/* HAND HELDS */
@media only screen and (max-width: 480px){
	.hero {
		grid-area: hero;
		background:  linear-gradient(rgba(25, 25, 26, 0.7) 100%, rgba(13, 13, 14, 0.6) 100%, rgba(20, 20, 20, 0.6) 100%),  url("images/mobile-hero.webp");
		background-size: cover; background-repeat: no-repeat; background-position: center center; 
		min-height: 800px;
		}
		.hero h1 {
		color: rgb(192, 189, 189);
		font-size: 6vw;
		margin-top: 18%;
		text-align: center;
		padding: 10px 20px;
		font-weight: 400;
		}
		.hero h2{
		color: rgb(218, 211, 211);
		font-size: 8vw;
		margin-top: 40px;
		text-align: center;
		padding: 20px;
		font-weight: 400;
		}
		.hero h3{
		color: rgb(218, 211, 211);
		font-size: 4vw;
		text-align: center;
		padding: 40px 10px;
		font-weight: 400;
		line-height: 2;
		}
		.key-notes{
			grid-area: key-notes;
			text-align: center;
			margin: 100px auto;
			}
			.key-notes h2 {
			font-size: 6vw;
			font-weight: 300;
			padding: 10px;
			color: rgb(85, 81, 81);
			}
			
.our-solutions h3 {
	font-size: 8vw;
	font-weight: 300;
	}
	.network-1 {
		grid-area: network-1;
		padding: 30px;
		}
		.network-1 li {
		margin-left: 15px;
		list-style: square;
		padding-left: 10px;
		font-size: 1.1em;
		font-weight: 400;
		}
		.network-1 h2, .network-2 h2, .network-3 h2, .network-4 h2 {
			padding: 5px;
		}
		.network-2 {
		grid-area: network-2;
		padding: 30px;
		}
		.network-3 {
		grid-area: network-3;
		padding: 30px;
		}
		.network-4 {
		grid-area: network-4;
		padding: 30px;
		}
		.talk h3{
				text-align: center;
			margin: 10px 0;
			padding: 10px;
			}

	}




/* MEDIA QUERIES */
/* tablets and laptops */
@media  only screen and (min-device-width: 481px) and (max-device-width: 1199px) and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi)  {

	/* TOP INTRO SECTION */
.top-intro{
	grid-area: top-intro;
	max-height: 300px;
	margin-top: 5%;
	}
	.top-intro h1 {
	color: rgb(150, 148, 148);
	font-size: 4vw;
	margin-top: 15%;
	text-align: center;
	padding: 10px 20px;
	font-weight: 400;
	}
	.top-intro h3{
	color: rgb(100, 97, 97);
	font-size: 4vw;
	text-align: center;
	font-weight: 400;
	letter-spacing: 10px;
	}
	/* END */
.hero {
grid-area: hero;
min-height: 980px;
}
.hero h1 {
color: rgb(192, 189, 189);
font-size: 4vw;
margin-top: 10%;
text-align: center;
padding: 10px 20px;
font-weight: 400;
}
.hero h2{
color: rgb(218, 211, 211);
font-size: 8vw;
margin-top: 40px;
text-align: center;
padding: 20px;
font-weight: 400;
}
.hero h3{
color: rgb(218, 211, 211);
font-size: 4vw;
text-align: center;
padding: 40px 10px;
font-weight: 400;
line-height: 2;
}
.solutions {
grid-area: solutions;
text-align: left;
padding: 10px;
margin: 20px 10px;
}
.solutions h2 {
font-weight: 400;
padding: 10px;
font-size: 1.8em;
}
.solutions p {
padding: 10px;
}
.about {
grid-area: about;
padding: 10px;
margin: 20px 10px;
}
.key-notes{
	grid-area: key-notes;
	text-align: center;
	margin: 100px auto;
	}
	.key-notes h2 {
	font-size: 4vw;
	font-weight: 300;
	padding: 10px;
	color: rgb(150, 148, 148);
	}
.talk{
grid-area: talk;
text-align: center;
margin: 50px 0;
padding: 10px;
}
.zoom {
transition: transform ease-in-out .2s;
margin: 0 auto;
padding: 5px;
}
.zoom:hover {
transform: translateY(-5px);
}
.our-solutions h3 {
font-size: 8vw;
}

.network-1 {
	grid-area: network-1;
	padding: 30px;
	display: block;
	}
	.network-1 li {
	margin-left: 15px;
	list-style: square;
	padding-left: 10px;
	font-size: 1.1em;
	font-weight: 400;
	}
	.network-1 h2, .network-2 h2, .network-3 h2, .network-4 h2 {
		padding: 5px;
	}
	.network-2 {
	grid-area: network-2;
	padding: 30px;
	}
	.network-3 {
	grid-area: network-3;
	padding: 30px;
	display: block;
	}
	.network-4 {
	grid-area: network-4;
	padding: 30px;
	}





}