@import url("global.css");
@import url("fonts.css");


#header-area input{
	border: 0px;
	border-bottom: 1px #ccc solid;
	background: transparent;
}
#header-area input:focus{
	outline: none;
	border: 0px;
	border-bottom: 1px #ccc solid;
	background: transparent;
}

#header-area button{
	border: 0px;
	background: transparent;
}

.nav-item a:hover{
	background: var(--primary-color);
	color: white !important;
}
.login-item{
	display: none;
}

/***************HOME page banner section***************/
#homebanner-sect.lg{
	background-image: url("../img/hero_bg2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	width: 100%;
/*	background: #CACAC8;*/
	padding: 100px 0px;
}

#homebanner-sect.mobile{
	display: none;
	width: 100%;
	background: var(--primary-color);
	padding: 20px 0px;
}

#homebanner-sect h1{
	font-size: 40px; 
	font-family: var(--second-font)
	font-weight: bold;
	letter-spacing: 10px;
	text-transform: uppercase;
	color: #fff;
}

#homebanner-sect h3{
	font-size: 30px; 
	color: #fff;
}

#homebanner-sect p{
	font-size: 18px;
	color: #fff;
}

#homebanner-sect button{
	border: 1px #333 solid;
	border-radius: 5px;
	padding: 6px 10px;
	background: transparent;
}

#homebanner-sect button:hover{
	border: 1px var(--primary-color) solid;
	border-radius: 5px;
	background: transparent;
	color: var(--primary-color);
}

#homebanner-sect button{
	border: 1px #fff solid;
	border-radius: 5px;
	padding: 6px 10px;
	background: transparent;
	color: #fff;
}

#homebanner-sect button:hover{
	border: 1px #fff solid;
	border-radius: 5px;
	background: #fff;
	color: var(--primary-color);
}

/***************banner section***************/

#banner-sect{
	width: 100%;
	background: #CACAC8;
	padding: 100px 0px;
}

#banner-sect h1{
	font-size: 40px; 
	font-family: var(--second-font)
	font-weight: bold;
	letter-spacing: 10px;
	text-transform: uppercase;
}

#banner-sect h3{
	font-size: 30px; 
}

#banner-sect p{
	font-size: 18px;
}

#banner-sect button{
	border: 1px #333 solid;
	border-radius: 5px;
	padding: 6px 10px;
	background: transparent;
}

#banner-sect button:hover{
	border: 1px var(--primary-color) solid;
	border-radius: 5px;
	background: transparent;
	color: var(--primary-color);
}

/*********services section***********/
#services{
	width: 100%;
	padding: 50px 0px;
}

#services .custom-card{
	width: 300px;
}

#services .custom-card h2{
	font-size: 20px;
	padding: 20px 0px 5px 0px;
}

#services .custom-card p{
	padding: 0px 0px 20px 0px;
	width: 300px !important;
}

#services .custom-card button{
	border: 1px var(--secondary-color) solid;
	border-radius: 5px;
	padding: 6px 10px;
	background: var(--secondary-color);
	color: #fff;
}

#services .custom-card button:hover{
	color: white;
	background: var(--primary-color);
	border: none;
}


/********more news***************/
#more-news{
	padding: 70px 0px;
	/*background: #f5f5f5;*/
	background: var(--primary-color);
	color: white;
}


/***********footer*********/
.footer{
	width: 100%;
	background: #f6f6f6;
	padding: 100px 0px 0px 0px;
}
.footer ul{
	margin: 0px;
	padding: 0px;
}

.footer ul li{
	list-style: none;
	line-height: 30px;
}


.footer .more-links{
	list-style: none;
	line-height: 30px;
}

.social-icon i{
	font-size: 20px;
	padding: 0px 5px;
}

/***********media query*******************/
@media only screen and (max-width: 820px){ 
	#homebanner-sect.lg{
		display: none;
	}

	#homebanner-sect.mobile{
		display: block;
	}
}

@media only screen and (max-width: 600px){ 
	header .top-bar{
		display: none !important;
	}

	.login-item{
		display: block;
		margin-top: 20px;
	}

	.nav-item a{
		border: none!important;
	}
	#homebanner-sect.lg{
		display: none;
}

	#homebanner-sect.mobile{
		display: block;
	}
}