@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Roboto:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css');

:root {
 --main-off-white: #f2f2f3;
 --main-blue-bg:#48acf0;
 --main-purp-bg:#4b4e6d;
}
* {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}
h2{
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 24px;
	text-transform: uppercase;
}
.clearer {
	clear: both;
}
.maincontainer {
	padding: 0px;
	border: 0;
	max-width: 1400px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.mainBLueBk {
	background-color: var(--main-blue-bg);
}
.mainPurpBk {
	background-color: var(--main-purp-bg);
}
	
.banner {
	display: grid;
	grid-template-columns: 3fr 1fr;
}
.bannerPic img{
	width: 90%;
	display: block;
	align-content: center;
	margin-left: auto;
  	margin-right: auto;
		}
.bannerText{
		font-size: 18px;
		padding-right: 20px;
}
.bannerText p{
		padding-bottom: 18px;
}
		
.bannerButton {
	padding-top: 10px;
	padding-bottom: 20px;
				
}
.bannerButton a {
	font-size: 16px;
	font-weight: 700;
	background-color: #fff;
	color: #000;
	padding: 8px 20px;
	text-decoration: none;
	text-transform: uppercase;	
}
.bannerButton a:hover {
	background-color: #e1e1e1;
}
.banner, .grid1, .grid2, .grid3, .grid4{
		padding: 20px 0;
}	
.grid1{
	display: grid;
	grid-template-columns: 1fr 2fr;
	
}
.grid1Text{
			font-size: 18px;
			padding-left: 10px;
}
.grid1Pic img{
	width: 95%;
	display: block;
	align-content: center;
	margin-left: auto;
  	margin-right: auto;
}
.grid1Button {
	padding-top: 10px;
	padding-bottom: 20px;
				
}
.grid1Button a {
	font-size: 16px;
	font-weight: 700;
	background-color: var(--main-blue-bg);
	color: #fff;
	padding: 8px 20px;
	text-decoration: none;
	text-transform: uppercase;
	
}
.grid1Button a:hover {
	background-color: #e1e1e1;
	color: #000;
}
		
.grid2{
	display: grid;
	grid-template-columns: 5fr 2fr;
}
.grid2Text{
	font-size: 18px;
	padding-right: 10px;
	color: #fff;
}
.grid2Pic img{
	width: 95%;
	display: block;
	align-content: center;
	margin-left: auto;
  	margin-right: auto;
}
.grid2Button {
	padding-top: 10px;
	padding-bottom: 20px;
				
}
.grid2Button a {
	font-size: 16px;
	font-weight: 700;
	background-color: #fff;
	color: #000;
	padding: 8px 20px;
	text-decoration: none;
	text-transform: uppercase;
	
}
.grid2Button a:hover {
	background-color: #e1e1e1;
}				
.grid3{
	display: grid;
	grid-template-columns: 1fr 3fr;
}
.grid3Text{
		font-size: 18px;
		padding-left: 10px;
			
}
.grid3Pic img{
	width: 95%;
	display: block;
	align-content: center;
	margin-left: auto;
  	margin-right: auto;
}
.grid3Button {
	padding-top: 10px;
	padding-bottom: 20px;
				
}
.grid3Button a {
	font-size: 16px;
	font-weight: 700;
	background-color: var(--main-blue-bg);
	color: #fff;
	padding: 8px 20px;
	text-decoration: none;
	text-transform: uppercase;
}
.grid3Button a:hover {
	background-color: #e1e1e1;
	color: #000;
}	
.grid4{
	display: grid;
	grid-template-columns: 5fr 2fr;

}
.grid4Text{
		font-size: 18px;
		padding-right: 10px;
	
}
.grid4Pic img{
	width: 95%;
	display: block;
	align-content: center;
	margin-left: auto;
 	margin-right: auto;
}
.grid4Button {
	padding-top: 10px;
	padding-bottom: 20px;
				
}
.grid4Button a {
	font-size: 16px;
	font-weight: 700;
	background-color: #fff;
	color: #000;
	padding: 8px 20px;
	text-decoration: none;
	text-transform: uppercase;
}
.grid4Button a:hover {
	background-color: #e1e1e1;
}
.gridFooter   {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 20px 0;
}
.copy{
	text-align: right;
}
.logoFooter {
	float: left;
	width: 200px;
	margin-top: 0px;
}
.logoFooter img {
	width: 100%;
}
		
/* about */
.subBanner{
	padding:30px 0;
}
.aboutSec{
			font-size: 18px;
}
.heading1{
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 40px;
	text-transform: uppercase;
	color:#fff;
}
.heading2{
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 24px;
	text-transform: uppercase;
	text-align: center;
	color:#fff;
}
.floatpic{
	float:left;
	padding: 0px 10px;
}
.floatpic img{
	width: 100%;
	display: block;
	align-content: center;
	margin-left: auto;
 	margin-right: auto;
}
.aboutSec{
	padding: 20px 0;
}
.aboutSec p{
	padding: 0 0 10px 0;
	text-indent: 10px
}
	/*  price sec  */
.functGrid{
	display: grid;
	grid-template-columns: 1fr 2fr;
	padding: 20px 0;
}
		
.functGridText{
	font-size: 18px;
}
.functGridText p{
	padding: 0 0 10px 0;
	text-indent: 0px
}
.hcentered{
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 24px;
	padding: 0 0 25px 0;
}
		
/*  bhrt  */
		.bhrtSec{
			padding: 20px 0;
			font-size: 18px;
		}
		.bhrtSec p{
			padding: 0 0 20px 0;
			
		}
		
	/*  navigation    */
.naveback {
	background-color: var(--main-off-white);
}
nav {
	height: 70px;
	font-family: 'Oswald', sans-serif;
}
nav .logo {
	float: left;
	width: 300px;
	margin-top: 10px;
}
nav .logo img {
	width: 100%;
}
nav ul {
	float: right;
	margin-right: 25px;
	list-style: none;
	margin-top: 10px;
}
nav ul li {
	display: inline-block;
	line-height: 50px;
}
nav ul li a {
	position: relative;
	padding: 15px 15px;
	color: #000;
	font-size: 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
}
nav ul li a:hover {
	color: #5A5959;
}
label #sign-one, label #sign-two {
	color: #fff;
	float: right;
	font-size: 30px;
	color: #000;
	line-height: 50px;
	margin-right: 30px;
	cursor: pointer;
	display: none;
}
#res-menu {
	display: none;
}
/*  ---------------- end top bar ------------------------   */	
	
		
		
		
		
		
		@media (max-width: 1400px) {

nav {
	height: 5vw;
}
nav ul {
	margin-top: .6vw;
}
nav .logo {
	margin-top: .9vw;
	width: 21vw;
}
nav ul li a {
	font-size: 1.6vw;
}
			
h2{
	font-size: 1.6vw;
}
			
.banner, .grid1, .grid2, .grid3, .grid4, .bhrtSec{
		padding: 1vw 0;
}				
		
.bannerText, .grid1Text, .grid2Text, .grid3Text, .grid4Text, .aboutSec, .functGridText, .bhrtSec{
			font-size: 1.3vw;
			padding-right: 1vw;
			padding-left: 1vw;
}
.bannerText p{
			padding-bottom: 1vw;
}
		
.bannerButton, .grid1Button, .grid2Button, .grid3Button, .grid4Button {
	padding-top: 1vw;
	padding-bottom: 2vw;
				
}
.bannerButton a, .grid1Button a, .grid2Button a, .grid3Button a, .grid4Button a {
	font-size: 1.2vw;
	
}
.grid1Pic img, .grid3Pic img{
	padding-left: 1vw;
}
		
		
.heading1{
	
	font-size: 3vw;
	
}
.heading2{
	
	font-size: 2vw;

}	
		
.floatpic img{
			width: 28vw;
}		
		
.hcentered{
			
			font-size: 1.9vw;
			padding: 0 0 1.5vw 0;
		}		
		
		
		
}
		
		
		
		
		
		
@media (max-width: 850px) {
label #sign-one {
	display: block;
}
	
nav .logo {

	width: 280px;
	margin-top: 5px;
}
	
	
	
	
nav ul {
	position: fixed;
	top: 50px;
	width: 100%;
	height: 100vh;
	background: #3A3939;
 	top 50px;
	left: -100%;
	text-align: center;
	transition: .5s;
	z-index: 10;
}
nav ul li {
	display: block;
	margin: 40px 0;
	line-height: 30px;
}
nav ul li a{
	font-size: 30px;
	color:#fff;
}
	
#res-menu:checked ~ ul {
	left: 0;
}
#res-menu:checked ~ label #sign-one {
	display: none;
}
#res-menu:checked ~ label #sign-two {
	display: block;
}
			
h2{
	font-size: 20px;
}		
.banner {
	grid-template-columns: 1fr;
	grid-template-areas: "c1" 
						 "c2";
	padding-top: 0px;

}		
.bannerPic{grid-area: c1;}	
.bannerText{grid-area: c2;}	
			
.bannerPic img{
	width: 60%;
	display: block;
	align-content: center;
	
	
}			
			
			
.bannerText, .grid1Text, .grid2Text, .grid3Text, .grid4Text, .aboutSec, .functGridText, .bhrtSec{
			font-size: 18px;
			padding-right: 5px;
			padding-left: 5px;
		}
.bannerButton, .grid1Button, .grid2Button, .grid3Button, .grid4Button {
	padding-top: 4px;
	padding-bottom: 4px;
	margin: 10px 0;
				
}	
.bannerButton a, .grid1Button a, .grid2Button a, .grid3Button a, .grid4Button a {
	font-size: 14px;
	
}
			
.grid1, .grid3, .functGrid{
	grid-template-columns: 1fr;
	
}
			
.grid2, .grid4{
	grid-template-columns: 1fr;
	grid-template-areas: "c1" 
						 "c2";
	
}
.grid2Pic, .grid4Pic{grid-area: c1;}	
.grid2Text, .grid4Text{grid-area: c2;}	
	
		
		
	
	
.heading1{
	font-size: 40px;

}
.heading2{
	font-size: 24px;
}
		
		
		
.floatpic img{
	width: 80%;
}	
.floatpic{
	float:none;
	padding: 10px 0px;
}
	.hcentered{
			
			font-size: 24px;
			padding: 0 0 24px 0;
		}	
	.functGrid .grid1Pic{
		display: none;
	}
}