:root{

	--primary-color: #FFFFFF;
	--action-color: #8670ef;
	--default-el-width:100%;

	/*SECTION*/
	--section-width: 100%;
	
	--container-width:100%;
	--header-height: 70vh;

	--container-width:100%;
	--container-height: 100vh;

	

	--navbar-logo-color: #18171c;
	--navbar-font-family: sans-serif;

}

*{
	padding: 0;
	margin: 0;
	outline: none;
	text-decoration: none;
	box-sizing: border-box;
	font-family: var(--navbar-font-family);
}

body{
	text-align: center;
}

.container{
	width: var(--container-width);
	height: var(--container-height);
}

.header{
	height: var(--header-height);
	position: relative;
	color: var(--primary-color);

	background-image: url("../image/background/hero_bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}

.header .navbar{
	width: var(--default-el-width);
	padding: 1rem;
	display: flex;
	justify-content: center;
	--background: #00000091;
}

.header .background-overlayer{
	width: 100%;
    height: 100%;
    position: absolute;
    background: #00000091; --#000000ba;
    z-index: 1;
}

.header .navbar, .header .section{
	position: relative;
	z-index: 999;
}

.header .navbar{
	height: 20%;
	padding: 1rem;
}

.header .navbar .logo-wrap{
	padding: 1rem;
	border-radius: 1rem;

	display: flex;
	justify-content: center;
	align-items: center;
	background: #556125bd;
	font-size: calc(2vw + 1.5vh + 2vmin);
  
}

.header .navbar .logo-wrap h1{
	
}

.header .content{
	width: 100%;
	height: 70%;
	padding: 1rem;
	--background: red
}

.header .content .article{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	

}
.header .content .article h1{
	padding: 1rem;
	font-size: calc(3vw + 3vh + 2vmin);
}
.header .content .article p{
	font-weight: 600;
	font-size: calc(1.2vw + 1.2vh + 1vmin);
}

.header a{
	color: var(--primary-color);
}


/* middle-section */

.middle-section {
	height: 20vh;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: #556125;
	color: #FFF;
	font-size: calc(2vw + 2vh + 1vmin);


}

.middle-section a{
	color: #FFF;

}

.middle-section .contact-card .phone{
	display: flex;
	align-items: center;
	justify-content: center;
}

.middle-section .contact-card object{
	margin-right: 1rem;
	font-size: calc(3vw + 3vh + 2vmin);
	
}
.middle-section .contact-card .address{
	display: flex;
	align-items: center;
	justify-content: center;
}

.middle-section .contact-card object{
	width: 35px;
	height: 35px;
	margin-right: 1rem;
	font-size: calc(3vw + 3vh + 2vmin);
	
}


.footer{
	padding: 1rem;
	clear: both;
    position: relative;
    height: 10vh; 
    bottom: 0;
    background: #000000;
	display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;

}



/* ICON */

i .phone{
	width: 35px;
	height: 35px;
	background-image: url("../image/icon/phone-call-icon.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}