/* === Intro ===*/

.pages-banner {
	width: 100%;
	min-height: 100vh;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	display:  flex;
	align-items: flex-start;
	justify-content: flex-end;
}
.pages-banner.vcenter {
	background-position: center center;
}
.service1 .pages-banner {
	background-image: url(../images/service-1_banner.jpg);
}
.service2 .pages-banner {
	background-image: url(../images/service-2_banner.jpg);
}
.service3 .pages-banner {
	background-image: url(../images/service-3_banner.jpg);
}
.service4 .pages-banner {
	background-image: url(../images/service-4_banner.jpg);
}
.milestones .pages-banner {
	background-image: url(../images/milestones-banner.jpg);
}
.sv-col {
	width: 40%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.8);
	padding: calc((100vw - 768px) * 44 / 1032 + 36px); /* 80 -> 36 @1800 -> 768*/
	padding-top: calc((100vw - 768px) * 96 / 1032 + 79px); /* 175 -> 79 @1800 -> 768*/
	padding-left: calc((100vw - 768px) * 44 / 1032 + 36px); /* 80 -> 36 @1800 -> 768*/
}
.service1 .sv-col {
	background-color: rgba(19, 68, 0, 0.7);
}
.service2 .sv-col {
	background-color: rgba(0, 33, 58, 0.7);
}
.service3 .sv-col {
	background-color: rgba(16, 4, 0, 0.6);
}
.service4 .sv-col {
	background-color: rgba(19, 22, 2, 0.7);
}
.milestones .sv-col {
	background-color: rgba(0, 55, 93, 0.8);
}
.sv-type {
	color: #f1bf5b !important;
	line-height: calc((100vw - 768px) * 66 / 1032 + 54px); /* 120-> 54 @1800 -> 768*/
}
.sv-title {
	#ffffff;
}
.sv-desc {
	font-family: 'RobotoCondLight';
	font-size: calc((100vw - 768px) * 14 / 1032 + 12px); /* 26 ->12 @1800 -> 768*/
	line-height: calc((100vw - 768px) * 15 / 1032 + 17px); /* 38 -> 17 @1800 -> 768*/
	color: #666666;
	margin-top: calc((100vw - 768px) * 27 / 1032 + 23px); /* 50 -> 23 @1800 -> 768*/
}
.dk-mode .sv-txt *:lang(tc), .dk-mode .sv-txt *:lang(sc) {
	font-size: calc((100vw - 768px) * 13 / 1032 + 11px); /* 23 ->11 @1800 -> 768*/
}
.sv-desc2 {
	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*/
}
.dk-mode .sv-title {
	color: #ffffff;
}
.dk-mode .sv-col *  {
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}	
.dk-mode .sv-txt *  {
	color: #ffffff;
}

/* Download*/
.df-links a {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.df-links a::before {
    content: "\e907";
    font-family: madicon;
    vertical-align: middle;
    color: #60cbea;
    margin-right: calc((100vw - 768px) * 5 / 1032 + 10px); /* 15 -> 10 @1800 -> 768*/
}
.df-links {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	row-gap: calc((100vw - 768px) * 19 / 1032 + 16px); /* 35-> 16 @1800 -> 768*/
	margin-top: calc((100vw - 768px) * 27 / 1032 + 23px); /* 50-> 23 @1800 -> 768*/
}

/*###### RESPONSIVE ######*/
@media only screen and (max-width: 1410px) {
	.sv-col {
		width: 45%
	}	
}
@media only screen and (max-width: 768px) {
	
	.sv-title .br {
		display: none;
	}
	.pages-banner {
		width: 100%;
		background-size: 100% auto;
		background-position: top center;
		padding-top: calc((100vw - 425px) * 210 / 343 + 250px); /* 460 -> 250 @768 -> 425*/
		padding-bottom: unset;
	}
	.service1 .pages-banner {
		background-image: url(../images/service-1_banner_tablet.jpg);
	}
	.service2 .pages-banner {
		background-image: url(../images/service-2_banner_tablet.jpg);
	}
	.service3 .pages-banner {
		background-image: url(../images/service-3_banner_tablet.jpg);
	}
	.service4 .pages-banner {
		background-image: url(../images/service-4_banner_tablet.jpg);
	}
	.milestones.pages-banner {
		background-image: url(../images/milestones-banner_tablet.jpg);
	}
	.sv-col {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 10%; 
		padding-top: calc((100vw - 425px) * 10 / 343 + 40px); /* 50 -> 40 @768 -> 425*/
		column-gap: calc((100vw - 425px) * 5 / 343 + 20px); /* 25 -> 20 @768 -> 425*/
		background-color: #ffffff;
	}
	.service1 .sv-col {
		background-color: rgba(19, 68, 0);
	}
	.service2 .sv-col {
		background-color: rgba(0, 33, 58);
	}
	.service3 .sv-col {
		background-color: rgba(16, 4, 0);
	}
	.service4 .sv-col {
		background-color: rgba(19, 22, 2);
	}
	.milestones .sv-col {
		background-color: rgba(0, 55, 93);
	}
	.sv-title {
		width: calc((100vw - 425px) * 63 / 343 + 252px); /* 315 -> 252 @768 -> 425*/
		width: 100%;
	}
	.sv-type {
		line-height: calc((100vw - 425px) * 14 / 343 + 58px); /* 72 -> 58 @768 -> 425*/
	}
	.sv-desc, .sv-desc2 {
		font-size: calc((100vw - 425px) * 3 / 343 + 13px); /* 16 ->13 @768 -> 425*/
		line-height: calc((100vw - 425px) * 5 / 343 + 18px); /* 23 -> 18 @768 -> 425*/
		margin-top: calc((100vw - 425px) * 6 / 343 + 24px); /* 30 -> 24 @768 -> 425*/
	}
	.sv-list {
		font-size: calc((100vw - 425px) * 3 / 343 + 13px); /* 16 ->13 @768 -> 425*/
		line-height: calc((100vw - 425px) * 6 / 343 + 22px); /* 28 -> 22 @768 -> 425*/
		margin-top: calc((100vw - 425px) * 4 / 343 + 17px); /* 21 -> 17 @768 -> 425*/
	}
	.df-links a::before {
		margin-right: 10px; 
	}
	.df-links {
		row-gap: calc((100vw - 425px) * 4 / 343 + 17px); /* 21 -> 17 @768 -> 425*/
		margin-top: calc((100vw - 425px) * 6 / 343 + 24px); /* 30 -> 24 @768 -> 425*/
	}
}
@media only screen and (max-width: 580px) {
	.sv-col {
		flex-direction: column;
		justify-content: flex-start;
	}
	.sv-title, .sv-desc {
		width: 100%
	}
}