* {
	box-sizing: border-box;
	margin:0;
	padding:0;
}

body {
	font-family: 'Averia Serif Libre', serif;
	line-height: 1.5;
	background-color:white;
	min-width:320px;
}

body h1 {
	font-family: 'Averia Serif Libre', serif;
}

body h2 {
	font-family: 'Kaushan Script', cursive;
}
 /*end golobal*/

h3 {
font-size: 40px;
width: fit-content;
margin: 40px auto;
text-align:center;

}

@media screen and (max-width: 821px) {
	h3 {margin: 40px auto;}
}

/*header*/
.headercontainer {
	width: 100%;
	height:95px;
	margin: 0px auto;
	padding:0px 0px;
	overflow:hidden;
	display:flex;
	justify-content:space-between;
	align-items:center;
	z-index:99;
	

}

header {
	background-color: #0CAFFF;
	color: white;
	height:95px;
	display:flex;
	align-items:center;
}

header a {
	color: white;
	text-decoration: none;
	font-size:18px;
	text-transform: uppercase;
	padding: 10px 5px;
	border-radius:10px;
}

header a:hover{
	background-color:white;
	color:#0CAFFF;
	cursor: pointer;
	transition:0.4s;
}

a#call-now {
	text-decoration: none;
	color:white;
	font-size: 30px;
	margin-left: 10px;
	padding: 8px 5px;
	border-radius: 12px;
}

a#call-now:hover {
	background-color:white;
	color:#0CAFFF;
	cursor: pointer;
	transition:0.4s;
}

header li {
	display:inline;
	padding: 0px 10px 0px 0px;
}


header img {
	width:80px;
	border-radius:8px;
	display:flex;
	align-items:center;
	margin-left: 5px;
	margin-right:5px;
}


.hamburger{
	position:reletive;
	display: block;
	width:45px;
	height:60px;
	cursor:pointer;
	appearance:none;
	background: none;
	outline:none;
	border:none;
	margin-right: 10px;
}

.hamburger .bar, .hamburger:after, .hamburger:before {
	content:'';
	display:block;
	width:100%;
	height: 8px;
	background-color:white;
	margin: 6px 0px;
	transition:0.4s;
	border-radius:6px;
	
	
}

.hamburger.is-active:before {
	transform:rotate(-45deg) translate(-21px,6px);
}

.hamburger.is-active .bar {
	opacity:0;
}


.hamburger.is-active:after {
	transform:rotate(45deg) translate(-12px,1px);
}

@media screen and (min-width: 960px) {
	.hamburger{display:none}
}

@media screen and (min-width: 960px) {
	.mobile-nav{display:none}
}

.mobile-nav{
	display:block;
	position:fixed;
	top:0;
	left: 100%;
	width:100%;
	min-height:100vh;
	z-index:98;
	background-color: #34c4ff;
	padding-top:200px;
	transition:0.5s;
	text-decoration:none;
	
}

.mobile-nav.is-active{
	left:0;
}

.mobile-nav a {
	display:block;
	width:100%;
	max-width:275px;
	margin: 0 auto 16px;
	text-align:center;
	margin-bottom:16px;
	padding:12px 16px;
	background-color:#b3e7fe;
	color:#3bb0e3;
	border-radius: 10px;
	font-size:18px;
	text-decoration:none;
}

.mobile-nav a:hover{
	
	background-color:white;
	color:#0CAFFF;
}

.mobile-fixed{ position:fixed;
width: 95%;}

@media screen and (max-width: 960px) {
	header li{display:none;}
}


.gridcontainer1{
	width:60%;
	margin: 20px auto;
	padding: 20px 0px;
	display:grid;
	grid-gap:14px;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
	
}

.v-stretch{
	grid-row: span 2;
}
.h-stretch{
	grid-column: span 2;
}

.big-stretch{
	grid-row: span 2;
	grid-column: span 2;
}

.gridcontainer1 div img {
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:20px;
	box-shadow:0px 6px 12px rgba(0,0,0,0.2);
}

.gridcontainer2{
	width:60%;
	margin: 20px auto;
	padding: 20px 0px;
	display:grid;
	grid-gap:14px;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.gridcontainer2 div img {
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:20px;
	box-shadow:0px 6px 12px rgba(0,0,0,0.2);
}

.gridcontainer3{
	width:60%;
	margin: 20px auto;
	padding: 20px 0px;
	display:grid;
	grid-gap:14px;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.gridcontainer3 div img {
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:20px;
	box-shadow:0px 6px 12px rgba(0,0,0,0.2);
}

.gridcontainer4 {
	width:60%;
	margin: 20px auto;
	padding: 20px 0px;
	display:grid;
	grid-gap:14px;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
}

.gridcontainer4 div img {
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:20px;
	box-shadow:0px 6px 12px rgba(0,0,0,0.2);
}

/* mobile adjustmnts */
@media(max-width:550px){
	.v-stretch{
		grid-row: span 1}
	
	.h-stretch{
		grid-column: span 1}
	
	.big-stretch{
		grid-row: span 1;
		grid-column: span 1;}
}


/* footer */

footer {

min-height:100px;
margin-top:0px;
}

footer a {
	text-transform: uppercase;
	padding: 5px;
	text-decoration: none;
	color:black;
}

footer a:visited{
	color:black;
}

footer a:hover {
	background-color: darkgray;
	transition: 0.4s;
	color:white;
	cursor: pointer;
	border-radius:8px;
}


footer p {
	font-size:15px;
}

.footercontainer {
display:flex;
justify-content:space-between;
padding: 20px 8px 20px 8px;
background-color:lightgray;

}

.footer-cap {
	height: 30px;
	background-color: darkgray;
	padding: 5px 10px;
	text-align:center;
	
}

.socials img {
	width:50px;
}

.footernav li {
	display:inline;
}

.address{
	text-align:right;
}

/* mobile adjustemnt for footer */
@media screen and (max-width: 821px) {
	.footercontainer {
		display:flex;
		flex-direction:column;
		justify-content:space-evenly;
		text-align:center;
		margin:0px auto 0px auto;}
	
	footer p {text-align:center;
			margin:10px auto;}

	footer ul {border-top:gray 1px solid;
			border-bottom:gray 1px solid;
			padding: 5px 0px;}			
}

@media screen and (max-width: 380px) {
	
	footer a {font-size: 12px;}
}