@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
:root
{
   --green: red;
   --black: #130f40;
   --light-color: #666;
   --box-shadow: 0 .4rem 1.5rem rgba(0,0,0,.1);
   --border: .1rem solid rgba(0,0,0,.1);
   --outline: .1rem  solid rgba(0,0,0.1);
}
*{
	padding: 0px;
	margin: 0px;
	font-family: 'Poppins', sans-serif;
	text-decoration: none;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-transform: capitalize;
	transition: all .2s linear;
}
html{

 font-size: 62.5%;
 overflow-x: hidden;
 scroll-behavior: smooth;
 scroll-padding-top: 7rem;
}
body{
	background: #eee;
}

section{
   padding: 2rem 9%;

}

.header{
	border: 0px solid ;
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 9%;
	background: #fff;
	box-shadow: var(--box-shadow);
}
.header img{
	width: 0px;
}
.header .logo{
	font-size: 3.5rem;
	font-weight: bolder;
	color: var(--green);
}
.header .logo img{
	width: 5rem;
	border: 0px solid;
	margin-top: 2rem;
	margin-bottom: -2rem;
}
.header .navbar a{
      font-size: 1.7rem;
	  margin: 0 1rem;
	  color:var(--black);
}
.header .navbar a:hover{
	color: var(--green);
}
.header .icons div{
	border: 0px solid;
	height: 4.5rem;
	width: 4.5rem;
    line-height: 4.5rem;
	border-radius: .5rem;
	background: #eee;
	color: var(--black);
	font-size: 2rem;
	margin-right: .4rem;
	text-align: center;
	cursor: pointer;
}
.header .icons div:hover{
	background: var(--green);
	color: white;
}
#menu-btn{
	display: none;
}
.header .navbar.active{
	right: 2rem;
	transition: .4s linear;
}
.header .search-form{
   position: absolute;
   border: 0px solid;
   top:110%;
   right: -110%;
   width:40rem;
   height: 4rem;
   background: #fff;
   border-radius: .5rem;
   overflow: hidden;
   display: flex;
   align-items: center;
   box-shadow: var(--box-shadow);
}

.header .search-form.active{
	right: 2rem;
	transition: .3s linear;
}
.header .search-form input{
	height: 100%;
	width: 100%;
	background: none;
	text-transform: none;
	font-size: 1.6rem;
	color: var(--black);
	padding: 0 2rem;
}

.header .search-form label{
	font-size: 1.5rem;
	padding-right: 1.5rem;
	color: var(--black);
	cursor: pointer;
}

.header .search-form label:hover{
	color: var(--green);
}
.btn{
	border: 2px solid var(--black);
	margin-top: 1rem;
	display: inline-block;
	padding: .8rem 3rem;
	font-size: 1.7rem;
	border-radius: .5rem;
	color: var(--black);
	cursor: pointer;
	background: none;
}
.btn:hover{
	background: var(--green);
	color: #fff;
}
.header .login-form{
	border: 0px solid;
	position: absolute;
	top: 110%;
	right:-120%;
	box-shadow: var(--box-shadow);
	padding: 2rem;
	border-radius: .5rem;
	background: #fff;
	text-align: center;
	width: 30rem;
}
.header .login-form.active{
	right: 2rem;
	transition: .3s linear;
}
.header .login-form h3{
	font-size: 2.5rem;
	text-transform: uppercase;
	color: var(--black);
}

.header .login-form .box{
	border: 0px solid;
	margin: .7rem 0;
	background: #eee;
	border-radius: .5rem;
	width: 100%;
	padding: 1rem;
	font-size: 1.5rem;
	color: var(--black);
	text-transform: none;
}
.header .login-form p{
	font-size: 1.4rem;
	padding: .5rem 0;
	color: var(--light-color);
}
.header .login-form p a{
	color: var(--green);
	text-decoration: underline;
}

.home{
	display: flex;
	justify-content: center;
	border: 0px solid;
    /* background: url(../image/ba11.jpg) no-repeat; */
    background-color: white;
	background-position: center ;
	background-size:cover;
	padding-top: 7rem;
	padding-bottom: 10rem;
	margin-top: 12rem;
}
.home .content{
    border: 0px solid;
	text-align: center;
	width: 100rem;
}
.home .content h3{
	color: var(--black);
	font-size: 2rem;
}

.home .content h3 span{
	color: var(--green);
}

.home .content p{
	color: var(--light-color);
	font-size: 1.7rem;
	padding: 1rem 0;
	line-height: 1.8;
}

.heading{
	text-align: center;
	padding: 2rem 0;
	padding-bottom: 3rem;
	font-size: 3rem;
	color: var(--black);
}
.heading span{
	background: var(--green);
	color: #fff;
	padding: .5rem 3rem;
	clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%,0% 0%);
}
                                /* Features */
.feature{
	margin:15rem 0;
}
.feature .box-container{
	border: 0px solid;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 4.5rem;
}

.feature .box-container .benefit {
    margin: 20px 0;
}
.feature .box-container .benefit h4 {
    color: #f31010;
}
.feature .box-container .benefit p {
    font-size: 16px;
    line-height: 1.5;
}

.feature .box-container .box{
	border: 0px solid red;
	padding: 3rem 2rem;
	background: #fff;
	outline: var(--outline);
	outline-offset: -1rem ;
	text-align: center;
	box-shadow: var() ;
}

.feature .box-container .box:hover{
	box-shadow: 1px 1px 10px 5px var(--green);
    cursor: pointer;
}

.feature .box-container .box img{
	margin: 2rem;
	height: 17rem;
}

.feature .box-container .box h3{
	font-size: 2.5rem;
	line-height: 1.8;
	color: var(--black);
}
.feature .box-container .box p{
	font-size: 1.4rem;
	line-height: 1.8;
	color: var(--light-color);
	padding: 1rem 0;
}

/*our profile */

.profile{
	margin: 15rem 0rem;
}
.profile .container
{
	border: 0px solid;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 4.5rem;
}
.profile .container .box{
	border: 0px solid red;
	padding: 3rem 2rem;
	background: #fff;
	outline: var(--outline);
	outline-offset: -1rem ;
	text-align: center;
	box-shadow: var() ;
}
.profile .container .box img{
	margin: 2rem;
	height: 20rem;
	width: 20rem;
	border-radius: 1rem;
}
.profile .container .box:hover{
	box-shadow: 1px 1px 17px 5px var(--green);
}
/* About Us*/
  .map iframe {
	border: 1px solid;
	width: 100%;
	height: 26rem;
  }
.address{
	border: 0px solid;
	background: #fff;
	display: flex;
	justify-content: space-between;
}
.address .form{
	border: 0px solid;
	margin-right: 0rem;
	width: 55rem;
}
.address .form input{
	width: 90%;
	height: 4rem;
	border: 1px solid;
	font-size: 1.7rem;
	margin: 2rem 2rem;
	border-radius: 1rem;
	padding-left: 2rem;
}
.address .row .block{
	display: flex;
	justify-content: space-between;
	border: 0px solid;
	margin: 5rem 0;
}
.address .row .block h2{
	margin: 0;
	border: 0px solid;
}
#icons{
	font-size: 3rem;
	color: red;
	margin-right: 0rem;
  }
/*footer*/
.footer{
	background: #fff;
}
.footer .box-container{
	border: 0px solid;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(26rem,1fr));
}
.footer .box-container .box .logo{
	width: 18rem;
	height: 12rem;
	border: 0px solid;
}
.footer .box-container .box h3{
   font-size: 2.5rem;
   color: var(--black);
   padding: 1rem 0;
}
.footer .box-container .box a{
	display: block;
	font-size: 1.5rem;
    color: var(--light-color);
	padding: 1rem 0;
}
.footer .box-container .box  a i {
	color: var(--green);
	padding-right: .5rem;
	font-size: 1.5rem;
}
.footer .box-container .box a:hover i{
  padding-right: 2rem;
}
.footer .box-container .box p{
	line-height: 1.8;
	font-size: 1.5rem;
	color: var(--light-color);
	padding: 1rem 0;
}
.footer .box-container .box img{
	height: 12rem;
}
.footer .box-container .box .share1 a{
	height: 4rem;
	width: 4rem;
	border: 0px solid;
	line-height: 4rem;
	border-radius: .5rem;
	font-size: 2rem;
	color: var(--black);
	margin-left: .2rem;
	display: inline-block;
	text-align: center;
	margin-left: 2rem;

}
.footer .box-container .box .share1 a i{
	margin-left: .2rem;
	text-align: center;
	border-radius: .3rem;
	padding: .4rem;
	font-size: 2rem;
}
.footer .box-container .box .share1 a:hover i{
	color:#fff;
	background:  var(--green);
}

.footer .box-container .box .email{
	margin: .7rem 0;
	border: 0px solid;
	padding: 1rem;
	border-radius: .5rem;
	background: #eee;
	font-size: 1.6rem;
	color: var(--black);
	text-decoration: none;
	width: 100%;
}
.footer .credit{
	text-align: center;
	margin-top: 2rem;
	padding: 1rem;
	padding-top: 2.5rem;
	font-size: 2rem;
	color: var(--black);
	border-top: var(--border);
}
.footer .credit span{
	color: var(--green);
}
/*Media Quries*/
@media(max-width: 991px){
	html{
		font-size: 55%;
	   }
	   .header{
		padding: 2rem;
	   }
	   section{
       padding: 2rem;

	   }
}
@media(max-width: 768px){
    .header .navbar{
         position: absolute;
		 top:110%;
		 right: -110%;
		 width: 25rem;
		 box-shadow: var(--box-shadow);
		 border-radius: .5rem;
		 background: #fff;
	}
	#menu-btn{
		display: inline-block;
	}
	.header .navbar a{
		font-size: 2rem;
		margin: 2rem 2.5rem;
		display: block;
	}
	.home .content p{
        font-size: 1.5rem;
		text-align: center;
		background: #fff;
	}
}
@media(max-width: 450px){
	html{
		font-size: 50%;
	}
	.heading{
		font-size: 2.5rem;
	}
	.footer{
		text-align: center;
		font-size: 1.5rem;
	}
}