/* === Intro ===*/

.home-banner {
	width: 100%;
	height: calc((100vw - 425px) * 687 / 1375 + 213px); /* 900 -> 213 @1800 -> 425*/
	background-image: url(../images/home-banner.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	display:  flex;
	align-items: flex-start;
	justify-content: flex-end;
}
.hb-col {
	width: calc((100vw - 425px) * 474 / 1378 + 146px); /* 620 ->146 @1800 -> 425*/
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	background-color: #f1bf5b;
	padding: calc((100vw - 425px) * 61 / 1375 + 19px); /* 80 -> 19 @1800 -> 425*/
}
.slogan {
	font-size: calc((100vw - 425px) * 59 / 1375 + 18px); /* 77-> 18 @1800 -> 425*/
	line-height: calc((100vw - 425px) * 59 / 1375 + 18px); /*77 -> 18 @1800 -> 425*/
	color: #ffffff;
	margin-bottom: calc((100vw - 425px) * 19 / 1378 + 6px); /* 25 -> 6 @1800 -> 425*/
}
.slogan-highlight {
	color: #000000;
}
.slogan span:lang(tc), .slogan span:lang(sc){
	font-size: calc((100vw - 425px) * 59 / 1375 + 18px); /* 90-> 21 @1800 -> 425*/
	line-height: calc((100vw - 425px) * 69 / 1375 + 21px); /*90 -> 21 @1800 -> 425*/
}
.slogan-desc {
	font-family: RobotoLight;
	font-size: calc((100vw - 425px) * 12 / 1378 + 8px); /* 21 ->7 @1800 -> 425*/
	line-height: calc((100vw - 425px) * 18 / 1378 + 11px); /* 29 -> 11 @1800 -> 425*/
	color: #000000;
	opacity: 0.9;
}

/* === About ===*/
.about-banner {
    width: 100%; 
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.ha-row {
	row-gap: calc((100vw - 768px) * 27 / 1032 + 23px); /* 50 -> 23 @1800 -> 768*/
	align-items: center;
}
.ha-title {
	color: #191919;
	text-align: center;
}
.haf-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: calc((100vw - 768px) * 44 / 1032 + 36px); /* 80 -> 36 @1800 -> 768*/
}
.haf-box, .haf-txt  {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.haf-img {
	width: calc((100vw - 768px) * 165 / 1032 + 135px); /* 300-> 135 @1800 -> 768*/
	height: auto;
}
.haf-txt1 {
	font-family: RobotoCondBold;
	font-size: calc((100vw - 768px) * 12 / 1032 + 10px); /* 22 ->10 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 15 / 1032 + 13px); /* 28-> 13 @1800 -> 768*/
	color: #e6b245;
	text-align: center;
	margin-top: calc((100vw - 768px) * 14 / 1032 + 11px); /* 25 -> 11 @1800 -> 768*/
	margin-bottom: calc((100vw - 768px) * 7 / 1032 + 6px); /* 13 -> 6 @1800 -> 768*/
}
.haf-txt2 {
	font-family: RobotoLight;
	font-size: calc((100vw - 768px) * 10 / 1032 + 9px); /* 19 ->9 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 15 / 1032 + 12px); /* 27-> 12 @1800 -> 768*/
	color: #666666;
	text-align: left;
}

/* === Services ===*/
.services-row {
	background-color: #f7f7f7;
}
.hs-row {
	align-items: center;
}
.hs-title {
	color: #e6b245;
	text-align: center;
}
.hs-desc {
	color: #595959;
	text-align: center;
}
.hsf-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: calc((100vw - 768px) * 44 / 1032 + 36px); /* 80 -> 36 @1800 -> 768*/
	margin-top: calc((100vw - 768px) * 27 / 1032 + 23px); /* 50 -> 23 @1800 -> 768*/	
}
.hsf-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.hsf-img img {
	min-width: 100px;
	min-height: 100px;
    object-fit: cover;
}
.hsf-txt {
	font-family: RobotoCondRegular;
	font-size: calc((100vw - 768px) * 14 / 1032 + 12px); /* 26 ->12 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 18 / 1032 + 14px); /* 32-> 14 @1800 -> 768*/
	color: #191919;
	text-align: center;
	margin-top: calc((100vw - 768px) * 7 / 1032 + 6px); /* 13 -> 6 @1800 -> 768*/
}

/* === Team ===*/

.ht-row {
	width: 100%;
	height: calc((100vw - 768px) * 247 / 1032 + 203px); /* 450 -> 203 @1800 -> 768*/
	display: flex;
	flex-direction: row;
	background-color: #f1bf5b;
}
.ht-txt {
	width: 40%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 calc((100vw - 768px) * 82 / 1032 + 68px); /* 150 ->68 @1800 -> 768*/
}
.ht-title {
	color: #ffffff;
}
.ht-desc, .ht-desc a {
	line-height: calc((100vw - 768px) * 19 / 1032 + 16px); /* 35 ->16 @1800 -> 768*/
	color: #000000;
	opacity: 0.9;
	white-space: nowrap;
}
.ht-dtls:after {
	content: "\e915";
	font-family: 'madicon';
	font-size: calc((100vw - 768px) * 8 / 1032 + 7px); /* 15 ->7 @1800 -> 768*/
	margin-left: calc((100vw - 768px) * 3 / 1032 + 2px); /* 5 ->2 @1800 -> 768*/
}

.ht-img {
	width: 60%;
	height: 100%;
	background-image: url(../images/team-banner_home.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* === Contact ===*/

.home-contact-banner {
	width: 100%;
	height: calc((100vw - 768px) * 302 / 1032 + 248px); /* 550 -> 248 @1800 -> 768*/
	background-image: url(../images/contact-banner_home.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: cover;
	display:  flex;
	align-items: flex-start;
	justify-content: center;
}
.hc-row {
	width: 100%;
	height: 100%;
	align-items: flex-end;
	padding-right: calc((100vw - 768px) * 49 / 1032 + 41px); /* 90 -> 41 @1800 -> 768*/
	text-align: right;
}
.hc-desc {
	font-size: calc((100vw - 768px) * 10 / 1032 + 9px); /* 19 ->9 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 15 / 1032 + 12px); /* 27 ->12 @1800 -> 768*/
}
.hc-row a:not(.hc-email) {
	color: unset;
}
.hc-title {
	display: flex;
	text-align: right;
	justify-content: flex-end;
	color: #e6b245;
	white-space: nowrap;
}
.hc-txt {
	width: calc((100vw - 768px) * 374 / 1032 + 306px); /* 680 -> 306 @1800 -> 768*/
	color: #595959;
}
.company {
	font-family: RobotoRegular;
	line-height: calc((100vw - 768px) * 8 / 1032 + 12px); /* 20 ->12 @1800 -> 768*/
	color: #191919;
	margin-bottom: calc((100vw - 425px) * 2 / 1375	+ 3px); /* 5 ->3 @1800 -> 425*/
}
.license {
	font-family: RobotoLight;
	font-size: calc((100vw - 768px) * 5 / 1032 + 7px); /* 12 ->7 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 11 / 1032 + 9px); /* 20 ->9 @1800 -> 768*/
}
	

/*###### RESPONSIVE ######*/
@media only screen and (min-width: 769px) {
	.haf-box:nth-of-type(3) {
		min-width: calc((100vw - 768px) * 247 / 1032 + 203px); /* 450 -> 203 @1800 -> 768*/
	}	
	.hs-desc {
		max-width: 60%;
	}
	
}
@media only screen and (max-width: 768px) {
	
	.slogan-desc .br {
		display: none;
	}
	
	/* Intro*/
	.home-banner {
		background-image: url("../images/home-banner_tablet.jpg");
	}

	/*About*/

	.about-banner {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}
		.ha-row {
		width: calc((100vw - 425px) * 130 / 343 + 520px); /* 650 -> 520 @768 -> 425*/
		row-gap: calc((100vw - 425px) * 6 / 343 + 24px); /* 30 -> 24 @768 -> 425*/
	}
	.haf-row {
		flex-direction: column;
		row-gap: calc((100vw - 425px) * 6 / 343 + 24px); /* 30 -> 24 @768 -> 425*/
	}
	.haf-box {
		width: 100%;
		flex-direction: row;
		column-gap: 25px;
		justify-content: center;
	}
	.haf-img {
		 width: calc((100vw - 425px) * 42 / 343 + 168px); /* 210-> 168 @768 -> 425*/
	}
	.haf-txt {
		width: calc((100vw - 425px) * 56 / 343 + 224px); /* 280-> 224 @768 -> 425*/
		align-items: flex-start;
	}
	.haf-txt1 {
		font-size: calc((100vw - 425px) * 3 / 343 + 13px); /* 16 ->13 @768 -> 425*/
		line-height: calc((100vw - 425px) * 4 / 343 + 18px); /* 22-> 18 @768 -> 425*/
		text-align: left;
		margin-bottom: calc((100vw - 425px) * 2 / 343 + 6px); /* 8 -> 6 @768 -> 425*/
	}
	.haf-txt2 {
		font-size: calc((100vw - 425px) * 3 / 343 + 11px); /* 14 ->11 @768 -> 425*/
		line-height: calc((100vw - 425px) * 4/ 343 + 16px); /* 20-> 16 @768 -> 425*/
		text-align: left;
	}
	
	/* Services */
	
	.hsf-row {
		flex-wrap: wrap;
		column-gap: calc((100vw - 425px) * 15 / 343 + 15px); /* 30 -> 15 @768 -> 425*/
		row-gap: calc((100vw - 425px) * 15 / 343 + 15px); /* 30 -> 15 @768 -> 425*/
		margin-top: calc((100vw - 425px) * 6 / 343 + 24px); /* 30 -> 24 @768 -> 425*/
	}
	.hsf-row a {
		width: 45%;
	}
	.hsf-txt {
		font-size: calc((100vw - 425px) * 3 / 343 + 13px); /* 16 ->13 @768 -> 425*/
		line-height: calc((100vw - 425px) * 4 / 343 + 15px); /* 19-> 15 @768 -> 425*/
		margin-top: calc((100vw - 425px) * 2 / 343 + 6px); /* 8 -> 6 @768 -> 425*/
	}
	
	/* Team */
	
	.ht-row {
		height: auto;
		display: flex;
		flex-direction: column-reverse;
	}
	.ht-txt {
		width: 100%;
		height: auto;
		align-items: center;
		text-align: center;
		padding: calc((100vw - 425px) * 7 / 343 + 28px); /*35 ->28 @768 -> 425*/
	}
	.ht-desc, .ht-desc a {
		line-height: calc((100vw - 425px) * 3 / 343 + 10px); /*30 ->24 @768 -> 425*/
		white-space: unset;
	}
	.ht-dtls {
		margin-top: calc((100vw - 425px) * 2 / 343 + 7px); /*9 ->7 @768 -> 425*/
	}
	.ht-dtls:after {
		font-size: calc((100vw - 425px) * 2 / 343 + 7px); /*9 ->7 @768 -> 425*/
		margin-left: calc((100vw - 768px) * 1 / 1032 + 2px); /* 3 ->2 @1800 -> 768*/
	}
	.ht-img {
		width: 100%;
		height: calc((100vw - 425px) * 54 / 343 + 216px); /* 270 -> 216 @768 -> 425*/
		background-image: url(../images/team-banner_home_tablet.jpg);
	}
	
	/* Contact */
	
	.contact-row {
		background-color: #ffffff;
	}
	.home-contact-banner {
		height: unset;
		background-image: url(../images/contact-banner_tablet.jpg);
		background-size: cover;
	}
	.hc-row {
		padding: unset;
		padding-top:  calc((100vw - 425px) * 24 / 343 + 36px); /* 60 -> 36 @768 -> 425*/
		padding-bottom: calc((100vw - 425px) * 100 / 343 + 250px); /* 350 -> 250 @768 -> 425*/
	}
	.hc-row a:not(.hc-email) {
		color: unset;
	}
	.hc-desc {
		font-size: calc((100vw - 425px) * 2 / 343 + 9px); /*11 -> 9 @768 -> 425*/
		line-height: calc((100vw - 425px) * 3 / 343 + 13px); /* 16 -> 13 @768 -> 425*/
	}
	.hc-title {
		white-space: unset;
	}
	.hc-txt {
		width: unset;
	}
	.license {
		font-size: calc((100vw - 425px) * 1 / 343 + 7px); /* 8 -> 7 @768 -> 425*/
		line-height: calc((100vw - 425px) * 2 / 343 + 10px); /* 13 -> 10 @768 -> 425*/
	}

}