*{
	margin: 0;
	padding: 0;
}
html{
	scroll-behavior: smooth;
}
:root{
	--navbar-height: smooth;
}
#navbar{
	display:flex; 
	align-items:center ;
	position: sticky;
	top: 0px;
}
#logo { margin: 35px 50px }
#logo img{
	height: 60px;
	margin: 3px 6px;
}
#navbar{ position:relative; }
#navbar ul{
	display: flex;
	font-family:'Baloo Bhai',cursive;
}
#navbar::before{
content: "";
background : grey;
position:absolute;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0.5;
}
#navbar ul li{
	list-style: none;
	  font-size: 1.3rem;
}
#navbar ul li a{
	color: white;
	display:block;
	padding: 3px 22px;
	border-radius: 20px;
	text-decoration: none;
}
#navbar ul li a:hover{
	color: green ;
	background-color: whitesmoke;
}
/* home section*/
#home{
	display: flex;
	flex-direction: column;
	padding: 3px 200px;
	height: 550px;
	justify-content: center;
	align-items: center;
}
#home::before{
	content: "";
	position: absolute;
	 background: url('img/img7.jpg') no-repeat center center/cover;
	 /*background: no-repeat;*/
	height: 411px;
	top:0px;
	width: 100%;
	z-index: -3;
	opacity: 0.9;
}


.btn{
	padding: 6px 20px;
	border: 2px solid white;
	background-color: brown;
	color: white;
	margin: 17px;
	font-size: 1.5rem;
	border-radius: 10px;
	cursor: pointer;
}
.btn:hover{
	color: brown;
	opacity: 1;
	background: blanchedalmond;
	font-family: Arial Black;
}

#home hl{
	color: white;
	text-align: center;
	font-family: 'Bree Serif', serif;
}
#home p{color: beige;
         text-align: center;
         font-size: 1.5rem;
         font-family:'Baloo Bhai',cursive;
            }
/* services centre*/
     #services{
     	margin: 34px;
     	display: flex;
     	  }
 #services .box{
 	border: 2px solid brown;
 	padding: 34px;
 	margin: 3px 6px;
 	border-radius:28px ;
 	background: #f2f2f2;
 }
 #services .box img{
 	height: 160px;
 	margin: auto;
 	display: block;
 }
 /*client section*/
#client-section{
	position: relative;
}
#client-section::before{
	content: "";
	position: absolute;
	background:url('img/img8.jpg') ;
	width: 100%;
	height: 100%;
	z-index: -1 ;
	opacity: 0.3;
}
#clients{
    display: flex;
    justify-content: center;
    align-items: center;
}
.client-item{
	padding: 22px;
}
#clients img{
	height: 55px;
}
.client-item:hover{
	background-color: blanchedalmond;
	border-radius: 40%;	
}
/* contact details */
#contact{
	position:relative;
}
#contact::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.7;
	background: url('img/img9.jpg');
}
#contact-box{
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 34px;
}
#contact-box input,
#contact-box textarea{
	width: 100%;
	padding: 0.5rem;
	border-radius: 9px;
	font-size: 1.1rem;
}
#contact-box form{
	width: 40%;
}
#contact-box label{
	font-size: 1.3rem;
	font-family: 'Bree serif',serif;
}
footer{
	background: black;
	color: white;
	padding: 9px 20px;
}
footer:hover{
	color: green;
}
 /* utility class*/
 .h-primary{
	font-family: 'Bree serif',serif;
	text-align: center;
	font-size: 3.8rem;
	padding: 12px;
}
	.h-secondary{
	font-family: 'Bree serif',serif;
	font-size: 2.3rem;
	padding: 12px;
}
.center{
    text-align:center ;
}