@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400;1,700&display=swap');



body { 
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
	font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 400; color: #111; letter-spacing: 0.01em; line-height: 1.3;
}
body.navopen { overflow: hidden; margin-right: 12px; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #005581; }
h1, h2, h3 { letter-spacing: 0; /*line-height: 1.1;*/ }
p { line-height: 1.5; }
p:last-child { margin-bottom: 0; }
p > b,
p > strong { font-size: 18px; }
a {  }
a:hover { text-decoration: none; }
a[href*=mailto],
a[href*=http] { word-break: break-word; }
a[target="_blank"]:not(.btnsolid) { position: relative; }
a[target="_blank"]:not(.btnsolid):before {
    content: ''; font-size: 14px; color: #fff; text-align: center; line-height: 3;
    width: 2em; height: 2em; display: block; border-radius: 50%; z-index: 1;
    background-repeat: no-repeat; background-size: 1em; background-position: center; 
    background-color: rgba(51, 51, 51, 0.8);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff' viewBox='0 0 24 24'%3e%3cpath d='M6 17c2.269-9.881 11-11.667 11-11.667v-3.333l7 6.637-7 6.696v-3.333s-6.17-.171-11 5zm12 .145v2.855h-16v-12h6.598c.768-.787 1.561-1.449 2.339-2h-10.937v16h20v-6.769l-2 1.914z'/%3e%3c/svg%3e");
    position: absolute; left: 50%; top: 35px; opacity: 0; visibility: hidden;
    -webkit-transform: translate(-50%,0); transform: translate(-50%,0);
    transition: all 0.3s ease-out;
}
a[target="_blank"]:not(.btnsolid):hover::before { opacity: 1; visibility: visible; }
img { max-width: 100%; }
.container { max-width: 1300px; }


@media only screen and (max-width: 767px) {
	body { font-size: 14px; }
	p > b,
	p > strong { font-size: 16px; }
}


/*=====================================================================*/
/* CONTENT */
/*=====================================================================*/
[class*=popupimg][data-mfp-src],
.popupimg_album { position: relative; display: inline-block; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.3s ease-out; }
[class*=popupimg][data-mfp-src]:before,
.popupimg_album:before {
    content: ''; width: 100%; height: 100%; background: #fff; opacity: 0; visibility: hidden;
    position: absolute; top: 0; left: 0; transition: all 0.3s ease-out;
}
[class*=popupimg][data-mfp-src]:after,
.popupimg_album:after { 
    content: '+'; font-family: sans-serif; font-size: 1.5em; font-weight: 100; color: #fff; text-align: center; line-height: 1.4;
    position: absolute; top: 50%; left: 50%; background: #005581; width: 1.5em; height: 1.5em; border-radius: 50%; opacity: 0; visibility: hidden; transition: all 0.3s ease-out;
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
[class*=popupimg][data-mfp-src]:hover::before,
.popupimg_album:hover::before { opacity: 0.8; visibility: visible; }
[class*=popupimg][data-mfp-src]:hover::after,
.popupimg_album:hover::after { opacity: 1; visibility: visible; }
/*--*/
a.logo-dark { display: inline-block; background: #fff; padding: 0.4em 0.6em; border-radius:5px; }
a.logo-dark img,
a.logo-dark svg { /*backface-visibility: hidden;*/ max-width: 59px; width: 100%; }
/*--*/
.content-wrap { padding: 4em 5px; }
.scrollfade { opacity: 0; }
.ul_point { padding-left: 20px; }
.ul_point li:not(:last-child) { margin-bottom: 8px; }
/*--*/
.quote { position: relative; padding-left: 2em; margin: 2em 0; }
.quote:before { content: '“'; }
.quote:after { content: '”'; }
.quote:before,
.quote:after { font-size: 3em; font-weight: 700; color: #ccdde6; line-height: 0; vertical-align: middle; }
/*===========================*/
/*====== display table ======*/
.dtable_wrap { width: 100%; display: table; }
.dtable_wrap > div { display: table-cell; vertical-align: middle; }
.dtable_wrap.vb > div { vertical-align: bottom; }
.dtable_wrap.vt > div { vertical-align: top; }
/*=================*/
/*====== ... ======*/
.item_v_center { white-space: nowrap; height: 100%; }
.item_v_center:before { content: ''; width: 0; height: 100%; display: inline-block; vertical-align: middle; }
.item_v_center > * { display: inline-block; vertical-align: middle; }
/*===================*/
/*====== title ======*/
h1.title { font-size: 38px; }
h2.title { font-size: 36px; }
/*--*/
.titlehead { padding: 45px 20px; }
.titlehead > *:last-child { margin-bottom: 0; }
.titlehead .sub { font-size: 28px; color: #005581; letter-spacing: 0; font-weight: 300; margin-bottom: 5px; }
/*--*/
.titlehead.dark { background-color: #092d3f; color: #fff; }
.titlehead.dark .title { color: #fff; }
/*--*/
.titledeco .title { font-style: italic; /*line-height: 1;*/ position: relative; /*display: inline-block;*/ display: inline; padding-right: 1.3em; word-break: break-word; }
.titledeco .title:before {
	content: ''; width: 1em; border-bottom: 1px solid #6699b3;
	position: absolute; right: 0; bottom: 10px;
}
.titledeco .title + * { display: inline-block; width: 100%; margin-top: 5px; }
.titledeco > *:last-child { margin-bottom: 0; }
/*--*/
.imgherotitlehead-wrap { 
    position: relative; color: #fff; padding-top: 9em; overflow: hidden;
    background-repeat: no-repeat; background-size: cover; background-position: center; 
}
.imgherotitlehead-wrap:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: 0.5; }
.imgherotitlehead-wrap .titlehead { position: relative; }
.imgherotitlehead-wrap .title { color: #fff; }
/*--*/
.decotext {
    font-size: 350px; font-weight: 900; color: transparent; line-height: 1; letter-spacing: 0;
    -webkit-text-stroke: 1px white;
}
/*====================*/
/*====== button ======*/
.btnsolid {
	font-size: 14px; font-weight: 500; color: #005581; text-align: center; text-transform: uppercase; line-height: 1.1; letter-spacing: 0.05em;
	display: inline-block; min-width: 130px; background: #f7c12a; padding: 1em 1em; position: relative; overflow: hidden; outline: 0;
	transition: background 0.1s 0s ease-out, color 0.3s ease-out, -webkit-transform 0.1s ease-out, transform 0.1s ease-out; 
}
.btnsolid:before { 
	content: ""; position: absolute; bottom: 0px; left: 0; 
	width: 100%; height: 100%; background: rgba(0,0,0,0.3); 
	-webkit-transform: scale(0,1); transform: scale(0,1); 
	-webkit-transform-origin: 100% 0; transform-origin: 100% 0;
    transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1) 0s, transform .3s cubic-bezier(.165,.84,.44,1) 0s;
}
.btnsolid div { position: relative; z-index: 1; }
.btnsolid:hover { color: #fff; }
.btnsolid:hover::before { 
	-webkit-transform: scale(1); transform: scale(1);
	-webkit-transform-origin: 0 0; transform-origin: 0 0;
	transition: -webkit-transform .45s cubic-bezier(.86,0,.07,1) 0s, transform .45s cubic-bezier(.86,0,.07,1) 0s; 
}
/*--*/
.btn-close { 
    font-family: sans-serif; font-size: 2rem; font-weight: 100; line-height: 1;
    background: none; border: none; box-shadow: none; padding: 0; outline: 0;
    position: absolute; top: 15px; right: 20px; transition: all 0.3s ease-out;
}
.btn-close:hover { -webkit-transform: scale(0.85); transform: scale(0.85); }
/*==============================*/
/*====== tab to accordion ======*/
/* (https://codepen.io/dferenc/pen/YYyjYJ) [v] */
/* (https://codepen.io/dliebswager/pen/JfCLg) */
.tab_to_accordion .cards { margin-bottom: 10px; }
/*--*/
.tab_to_accordion .card-header {
    display: block; background: #f3f3f3; border: none; padding-right: 50px; position: relative;
    font-size: 18px; font-weight: 700; color: #005581; 
}
.tab_to_accordion .card-header[data-toggle]:after { content: '+'; font-family: sans-serif; font-size: 1em; line-height: 1; position: absolute; top: 0.8em; right: 20px; }
.tab_to_accordion .card-header[data-toggle][aria-expanded=true]:after { content: '-' }
/*--*/
.tab_to_accordion .card-body { padding: 15px 15px; }


@media only screen and (min-width: 768px) {
    /*- tab to accordion -*/
    .tab_to_accordion .collapse:not(.show) { display: block; }
    .tab_to_accordion .card-header { display: none; }
    .tab_to_accordion .cards { margin-bottom: 0; }
    .tab_to_accordion .card-body { padding: 0; }
    /*--*/
}
@media screen and (max-width: 767px) {
	.content-wrap { padding: 3em 5px; }
    .ul_point li:not(:last-child) { margin-bottom: 6px; }
	/*--*/
    .dtable_wrap.medium_dtable,
    .dtable_wrap.medium_dtable > div { display: block; }
    /*--*/
    h1.title { font-size: 33px; }
    h2.title { font-size: 30px; }
    h3.title { font-size: 25px; }
    h4.title { font-size: 20px; }
    h5.title { font-size: 18px; }
    .titlehead { padding: 35px 20px; }
    .titlehead .sub { font-size: 25px; line-height: 1; }
    .titledeco .title { line-height: 1.1; }
    .decotext { font-size: 250px; }
    /*--*/
    .btnsolid { font-size: 12px; }
    /*- tab to accordion -*/
    .tab_to_accordion .nav-tab { display: none; }
    .tab_to_accordion .tab-content > .tab-pane { display: block; }
    /*--*/
}
@media only screen and (max-width: 575px) {
	.dtable_wrap.small_dtable,
    .dtable_wrap.small_dtable > div { display: block; }
    /*--*/
    .titledeco .title { padding-right: 1em; }
    .titledeco .title:before { width: 0.6em; }
}
@media only screen and (max-width: 320px) {
    .decotext { font-size: 150px; }
}


/*=====================================================================*/
/* HEADER */
/*=====================================================================*/
header { border-bottom: 1px solid #ccc; background: #fff; padding: 10px 10px; position: relative; z-index: 5; }
header .container-fluid { max-width: 1400px; }
header a { font-size: 14px; font-weight: 700; color: #777; text-transform: uppercase; transition: all 0.1s ease; }
.layer {
    width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); z-index: 1;
    position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; transition: all 0.1s ease;
}
.layer-is-visible { opacity: 1; visibility: visible; }
/*--*/
a.logo { display: inline-block; }
a.logo img,
a.logo svg { /*backface-visibility: hidden;*/ max-width: 70px; width: 100%; }
/*=======================*/
/*====== Hamburger ======*/
.navbar-toggler { vertical-align: middle; padding: 0; cursor: pointer; outline: 0; position: relative; z-index: 2; }
.navbar-toggler:hover { opacity: 0.8; }
.navbar-toggler div {
    display: block; width: 25px; height: 2px; margin-bottom: 4px; background: #111; border-radius: 2px;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    -webkit-transform-origin: 4px 1px; transform-origin: 4px 1px;
    transition: -webkit-transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0), transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
}
.navbar-toggler div:nth-child(3) { margin: 0; }
/*--*/
.navbar-toggler.change div:first-child { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.navbar-toggler.change div:nth-child(2) { opacity: 0; -webkit-transform:rotate(0deg) scale(0.2, 0.2); transform: rotate(0deg) scale(0.2, 0.2); }
.navbar-toggler.change div:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
/*=================*/
/*====== ... ======*/
.navi { text-align: right; }
.navi ul { margin: 0; padding: 0; }
.navi li { text-align: left; }
.navi a { display: block; }

.navi,
.btn-bepartner { display: inline-block; vertical-align: middle; }
.navi ~ .btn-bepartner { margin-left: 1.2em; }
/*--*/
.navi ul.minor,
.navi ul.minor a { font-size: 12px; font-weight: 500; }
/*--*/
.btn-bepartner { font-weight: 700; color: #fff; letter-spacing: 0.01em; background: #005581; }
.btn-bepartner:hover { color: #fff; }
.btn-bepartner i { font-size: 1.5em; vertical-align: middle; margin-right: 8px; }
/*=================*/
/*====== ... ======*/
.navi > ul > li > a,
.navi > ul > li > .split > a:first-child { padding: 6px 0; }
.navi > ul > li:hover > a,
.navi > ul > li:hover > .split > a,
.navi > ul > li.active > a,
.navi > ul > li.active > .split > a:first-child { color: #005581; }
/*=====================*/
/*====== submenu ======*/
.navi li.submenu a.dropcon:after { content: "\f078"; font-family: 'Font Awesome 5 Free'; font-size: 0.7em; color: #005581; /*vertical-align: middle;*/ padding-left: 0.3em; }
/*--*/
.navi ul ul li a {
    line-height: 1.25; word-break: break-word;
    background: #fff; padding: 0.65em 1.2em; transition: all 0.3s ease;
}
.navi ul ul li:hover > a,
.navi ul ul li a:hover { padding-left: 18px; background-color: #f3f3f3; color: #005581; }
.navi ul ul li.active > a { background-color: #f3f3f3; color: #005581; }


@media only screen and (min-width: 992px) {
	.navbar-toggler { display: none; }
	/*--*/
	.navi > ul > li { display: inline-block; margin: 0 0.5em; position: relative; }
	.navi > ul > li:first-child { margin-left: 0; }
	.navi > ul > li:last-child { margin-right: 0; }
	.navi > ul > li > a,
	.navi > ul > li > .split > a { display: inline-block; }
	/*--*/
	.navi ul ul {
	    position: absolute; top: 100%; min-width: 150px; border-top: 2px solid #005581;
	    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05); transition: all 0.2s ease;
	    visibility: hidden; opacity: 0; display: none;
	}
	.navi ul ul:before {
	    content: " "; height: 0; width: 0; position: absolute; bottom: 100%; right: 12%; 
	    border: solid transparent; border-width: 7px; border-bottom-color: #005581;
	}
	.navi ul li:hover > ul { visibility: visible; opacity: 1; display: block; }
	.navi ul ul li { display: block; border-bottom: 1px solid transparent; }
	.navi ul ul li:last-child { border-bottom: none; }
}
@media only screen and (max-width: 991px) {
	header { padding: 8px 5px; }
	a.logo img,
	a.logo svg { max-width: 55px; }
	/*--*/
    .navi {
        position: fixed; top: 0; bottom: 0; left: 100%; z-index: 1;
        width: 85%; background-color: #fff; padding-top: 80px; padding-bottom: 20px; overflow-y: auto; visibility: hidden;
        transition: -webkit-transform .3s ease-in-out, transform .3s ease-in-out, visibility .3s ease-in-out;
    }
    .navi.open { visibility: visible; -webkit-transform: translateX(-100%); transform: translateX(-100%); }
    .navi ul.main { border-top: 1px solid #ebebeb; }
    .navi li { display: block; border-bottom: 1px solid #ebebeb; }
    .navi li:last-child { border-bottom: none; }
    /*--*/
    .navi > ul > li > a,
    .navi > ul > li > .split > a:first-child { padding: 0.8em 1.2em; transition: all 0.3s ease; }
    .navi > ul > li > a:hover,
    .navi > ul > li > .split > a:first-child:hover { padding-left: 1.5em; background-color: #f3f3f3; }
    .navi > ul > li.active > a,
    .navi > ul > li.active > .split > a:first-child { background-color: #f3f3f3; }
    /*--*/
    .navi li.submenu .split { position: relative; padding-right: 40px; }
    .navi li.submenu a.dropcon { position: absolute; right: 0; top: 0; width: 40px; height: 100%; padding: 0; border-left: 1px solid #ebebeb; }
    .navi li.submenu a.dropcon:after { position: absolute; left: 50%; top: 50%; margin-top: -5px; margin-left: -5px; padding: 0; transition: 0.1s ease-out; }
    .navi li.submenu a.dropcon[aria-expanded="true"]:after { transform: rotate(180deg); }
    .navi li.submenu a.dropcon:hover { background-color: #f3f3f3; }
    .navi ul ul li a { padding: 0.8em 2.2em; font-weight: 500; text-transform: none; }
    .navi ul ul li:hover > a,
    .navi ul ul li a:hover { padding-left: 35px; }
    /*--*/
    .navi ~ .btn-bepartner { margin-left: 0.8em; font-size: 12px; }    
}
@media only screen and (max-width: 320px) {
	header { padding: 8px 0px; }
	a.logo img, 
	a.logo svg { max-width: 45px; }
	.navi ~ .btn-bepartner { margin-left: 0.3em; font-size: 10px; }
}


/*=====================================================================*/
/* FOOTER */
/*=====================================================================*/
footer { background-color: #192b38; border-top: 1px solid #304254; padding: 35px 5px; font-size: 14px; color: #ccdde6; }
footer a { color: #ccdde6; transition: all 0.3s ease-out; }
footer a:hover { color: #fff; }

footer a[target="_blank"]:not(.btnsolid):before { font-size: 10px; left: 0; top: 10px; }
/*--*/
footer a.logo-dark { width: 75px; }
footer .footmiddle { display: inline-block; vertical-align: middle; }
footer ul.footlink,
footer .copyright { margin: 8px 0; display: inline-block; width: 100%; }
/*=================*/
/*====== ... ======*/
ul.footlink { margin: 0; padding: 0; }
ul.footlink > li { display: inline-block; margin-right: 20px; vertical-align: middle; }
ul.footlink > li:after { 
    content: '|'; color: #495057; letter-spacing: 0; 
    position: relative; left: 13px;
}
ul.footlink > li:last-child { margin-right: 0; }
ul.footlink > li:last-child:after { content: none; }
ul.footlink > li > a { display: inline-block; }
ul.footlink > li.active > a { font-weight: 600; color: #fff; }
/*=================*/
/*====== ... ======*/
.copyright { color: #6699b3; }
/*=================*/
/*====== ... ======*/
ul.footsocial { margin: 0; margin-top: 10px; padding: 0; list-style: none; }
ul.footsocial li { display: inline-block; margin-right: 20px; }
ul.footsocial li:last-child { margin-right: 0; }
ul.footsocial li a { display: block; }
ul.footsocial li a:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
ul.footsocial li a i {
    font-size: 2.34em; text-align: center; line-height: 1;
    display: inline-block; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}


@media only screen and (min-width: 768px) {
	.footmiddle { padding-left: 1.4em; }
	/*--*/
	.copyright { font-size: 16px; }
}


/*=====================================================================*/
/* HOME */
/*=====================================================================*/
/*========================*/
/*====== homeslider ======*/
.homeslider { background: url(../js/slick/ajax-loader.gif) no-repeat center; position:relative; height: 500px; }
.homeslider.slick-initialized { background: inherit; height: auto; margin: 0; }
.homeslider .home_slide { display: none; }
.homeslider.slick-initialized .home_slide { display: block; }
.home_slide {
    position: relative; outline: 0; height: 500px; 
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.home_slide:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.15); }
/*--*/
.homeslide-desc {
    color: #fff; text-align: center; 
    position: absolute; top: 50%; left: 0; width: 100%; padding: 0 15px;
    -webkit-transform: translate(0,-50%); transform: translate(0,-50%);
}
.homeslide-desc .title { font-size: 48px; font-weight: 300; line-height: 1.1; letter-spacing:0; }
.homeslide-desc .title + .desc { margin-top: 8px; }
/*--*/
.homeslider .slick-dots { bottom: 50px; line-height: 0; }
.homeslider .slick-dots li { width: auto; height: auto; margin: 1px 4px; }
.homeslider .slick-dots li button { 
    width: 10px; height: 10px; display: inline-block; padding: 0; 
    border-radius: 50%; border: 1px solid #fff; transition: 0.2s ease-out;
}
.homeslider .slick-dots li button:before { content: none; }
.homeslider .slick-dots li.slick-active button, 
.homeslider .slick-dots li button:hover, 
.homeslider .slick-dots li button:focus { background: #fff; }
/*=================*/
/*====== ... ======*/
.homeintro-wrap .left-wrap { position: relative; }
.homeintro-wrap .left-wrap svg { width: 98%; position: absolute; top: -50px; left: 0; opacity: 0.1; }
.homeintro-wrap .desc {
	text-align: justify;
	-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
    -webkit-column-gap: 35px; -moz-column-gap: 35px; column-gap: 35px;
}
/*=================*/
/*====== ... ======*/
.home-oursolution-wrap { position: relative; overflow: hidden; color: #fff; z-index: 1; }
.home-oursolution-wrap .img { 
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
	background-repeat: no-repeat; background-size: cover; background-position: center;
}
.home-oursolution-wrap .titledeco .title { color: #f7c12a; line-height: 1; }
.home-oursolution-wrap .btnsolid { margin-top: 1em; background: transparent; border: 1px solid; color:#fff; }
.home-oursolution-wrap .btnsolid:before { background: rgba(255,255,255,0.2); }
.home-oursolution-wrap .desc { margin-top: 5em; }
/*--*/
.home-oursolution-wrap .item:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #092d3f; z-index: -2; }
/*=================*/
/*====== ... ======*/
.home-accreditation-wrap { text-align: center; }
.home-accreditation-wrap img { max-width: 300px; width: 100%; }
/*=================*/
/*====== ... ======*/
.ctabanner-wrap { background: #0f2736; padding: 45px 5px; position: relative; overflow: hidden; color: #fff; }
.ctabanner-wrap .deco { 
	position: absolute; top: 50%; left: -200px; width: 1000px; opacity: 0.3;
	-webkit-transform: translate(0,-50%); transform: translate(0,-50%);
}
.ctabanner-wrap .deco svg { 
	-webkit-transform: rotate( -30deg); transform: rotate( -30deg); 
	-webkit-transform-origin: 0 100%; transform-origin: 0 100%; 
}
.ctabanner-wrap h2 { font-size: 36px; color: #6699b3; }
.ctabanner-wrap .btnsolid { background: #6699b3; color: #0f2736; }
.ctabanner-wrap .btnsolid:hover { color: #fff; }


@media only screen and (min-width: 1200px) {
    .home-oursolution-wrap [class*=col-] { position: static; }
    .home-oursolution-wrap .item { display: inline-block; width: 100%; height: 100%; border-left: 1px solid #005581; padding: 70px 30px; }
    .home-oursolution-wrap [class*=col-]:first-child .item { border-left-color: transparent; }
    .home-oursolution-wrap .item:before,
    .home-oursolution-wrap .img { opacity: 0; visibility: hidden; transition: all 0.3s ease-out; }
    .home-oursolution-wrap .titledeco .title { font-size: 26px; word-break: inherit; }
    .home-oursolution-wrap .titledeco { 
        position: relative; 
        opacity: 0.5; transition: all 0.3s ease-out; 
    }
    .home-oursolution-wrap .btnsolid,
    .home-oursolution-wrap .desc { position: relative; display: none; }
    .home-oursolution-wrap [class*=col-]:last-child .desc { float: right; padding-left: 30px; text-align: right; }
    /*--*/
    .home-oursolution-wrap .item:before { opacity: 1; visibility: visible; }
    .home-oursolution-wrap .active .img { opacity: 0.2; visibility: visible; }
    .home-oursolution-wrap .active .titledeco { opacity: 1; }
    .home-oursolution-wrap .active .btnsolid { display: inherit; }
    .home-oursolution-wrap .active .desc { display: inherit; width: 235%; z-index: 1; }
}
@media only screen and (max-width: 1199px) {
    .home-oursolution-wrap .item { border-bottom: 1px solid #005581; padding: 40px 5px; height: 100%; }
    .home-oursolution-wrap [class*=col-]:last-child .item { border-bottom-color: transparent; }
    .home-oursolution-wrap .img { opacity: 0.2; }
    /*--*/
}
@media only screen and (max-width: 767px) {
	.home_slide { height: 400px; }
	.homeslide-desc .title { font-size: 38px; }
	.homeslider .slick-dots { bottom: 30px; }
	.homeslider .slick-dots li button { width: 8px; height: 8px; }
	/*--*/
	.homeintro-wrap .left-wrap { margin-top: 40px; }
	.homeintro-wrap .left-wrap svg { width: 80%; top: -40px; }
	.homeintro-wrap .desc { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
	/*--*/
	.ctabanner-wrap { padding: 35px 5px; }
	.ctabanner-wrap h2 { font-size: 30px; }
}


/*=====================================================================*/
/* ABOUT US */
/*=====================================================================*/
.aboutus-wrap .desc { padding: 80px 5px; }
.aboutus-wrap .img {
	position: relative; text-align: center; min-height: 350px;
	background-repeat: no-repeat; background-size: cover; background-position: center;
}
.aboutus-wrap .img:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #092d3f; opacity: 0.2; }
.aboutus-wrap .img svg { max-width: 300px; position: relative; }


@media only screen and (max-width: 767px) {
	.aboutus-wrap .desc { padding: 35px 5px; }
	.aboutus-wrap .img svg { max-width: 200px; }
}


/*=====================================================================*/
/* OUR SOLUTION */
/*=====================================================================*/
.oursolution-wrap .item { position: relative; overflow: hidden; min-height: 60vh;
    padding: 80px 30px 80px 50px; color: #fff; }
.oursolution-wrap .item:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #092d3f; opacity: 0.75; }
.oursolution-wrap .img { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background-repeat: no-repeat; background-size: cover; background-position: center;
}
.oursolution-wrap .titledeco .title { color: #fff; line-height: 1; }
.oursolution-wrap .titledeco .title:before { border-color: #f7c12a; }
.oursolution-wrap .btnsolid { margin-top: 1em; background: transparent; border: 1px solid #fff; color: #f7c12a; }
.oursolution-wrap .btnsolid:before { background: rgba(255,255,255,0.2); }
/*--*/
.oursolution-wrap .decotext { position: absolute; bottom: -80px; right: -30px; opacity: 0.3; }
/*=================*/
/*====== ... ======*/
.inner_solution-hero-wrap { 
    position: relative; color: #fff; padding-top: 7em; overflow: hidden;
    background-repeat: no-repeat; background-size: cover; background-position: center; 
}
.inner_solution-hero-wrap:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: 0.5; }
.inner_solution-hero-wrap .decotext { 
    font-size: 450px; opacity: 0.4; 
    position: absolute; bottom: -52%; left: 50%;
    -webkit-transform: translate(-50%,0); transform: translate(-50%,0);
}
.inner_solution-hero-wrap .titlehead { position: relative; }
.inner_solution-hero-wrap .titlehead .icon { font-size: 2.3em; margin-bottom: 1em; }
.inner_solution-hero-wrap .titlehead h1.title,
.inner_solution-hero-wrap .titlehead a { color: #fff; }
.inner_solution-hero-wrap .titlehead a:hover { color: #ccdde6; }
/*--*/
.inner_solution-hero_desc-wrap { background: #092d3f; padding: 3em 5px; color: #fff; }
/*--*/
.inner_solution-content-wrap .left-wrap { background: #f3f3f3; padding: 25px 20px; }
ul.nav-tab { display: block; margin: 0; padding: 0; list-style: none; counter-reset: item; }
ul.nav-tab li { display: block; border-bottom: 1px solid #ccdde6; counter-increment: item; }
ul.nav-tab li:last-child { border-bottom: none; }
ul.nav-tab li a { 
    display: block; position: relative; padding: 30px 15px 15px 50px; transition: 0.3s ease-out; 
    color: #005581; word-break: break-word; 
}
ul.nav-tab li a:before { 
    content: '0'counter(item); font-size: 20px; font-weight: 300; 
    position: absolute; left: 15px; top: 15px;
}
ul.nav-tab li a:hover,
ul.nav-tab li a.active { background: #ccdde6; }
ul.nav-tab li .titledeco .title { display: inline-block; line-height: 1.1; }
ul.nav-tab li .titledeco .title:before { width: 0.7em; bottom: inherit; top: 10px; }
/*--*/
.inner_solution-content-wrap .right-wrap { padding: 50px 20px; }
.inner_solution-content-wrap .right-wrap [class*=title] { margin-bottom: 0.8em; }
/*--*/
ul.container_type { margin-bottom: 0; padding: 0; list-style: none; text-align: center; }
ul.container_type li { margin-bottom: 50px; }
ul.container_type .img { border-radius: 5px; margin-bottom: 20px; overflow: hidden; }
ul.container_type .desc { font-size: 14px; padding: 0 20px; }
ul.container_type .desc h5 { font-size: 18px; color: #333; margin-bottom: 0.6em; }
ul.container_type .desc .btnsolid { margin-top: 10px; border-radius: 100px; font-size: 12px; color: #333; }
ul.container_type .desc .btnsolid:before { background: rgba(0,0,0,0.1); }
/*=================*/
/*====== ... ======*/
ul.inner_container_type { margin-bottom: 0; padding: 0; list-style: none; }
ul.inner_container_type > li { margin-bottom: 50px; }
ul.inner_container_type .item { border: 1px solid #ccdde6; border-radius: 15px; overflow: hidden; height: 100%; }
ul.inner_container_type .img { background: #f3f3f3; border-radius: 15px; overflow: hidden; margin: 15px; text-align: center; }
ul.inner_container_type .desc h5 { text-align: center; margin-bottom: 2em; padding: 0 15px; }
ul.inner_container_type .desc > .spec { border-top: 1px solid #ccdde6; padding: 18px 30px; font-size: 14px; }
ul.inner_container_type .desc > .spec h6 { font-style: italic; color: #333; }
ul.inner_container_type .desc > .spec ul { list-style: disc; padding-left: 18px; }


@media only screen and (min-width: 768px) {
    ul.nav-tab li a { padding: 40px 15px 20px 50px; }
}
@media only screen and (min-width: 1200px) {
    .inner_solution-content-wrap .left-wrap { padding: 40px 50px 30px 20px; }
    ul.nav-tab li a { padding: 50px 20px 30px 65px; }
    ul.nav-tab li a:before { font-size: 30px; left: 20px; top: 20px; }
    /*--*/
    .inner_solution-content-wrap .right-wrap { padding: 65px 30px; }
}
@media only screen and (max-width: 767px) {
    .oursolution-wrap .item { min-height: 40vh; padding: 30px; }
    .oursolution-wrap .decotext { bottom: -60px; }
    /*--*/
    .inner_solution-hero-wrap { padding-top: 4em; }
    .inner_solution-hero-wrap .decotext { font-size: 350px; }
    /*--*/
    .inner_solution-content-wrap .left-wrap { display: none; }
    .inner_solution-content-wrap .right-wrap { padding: 30px 5px; }
    .inner_solution-content-wrap .right-wrap .tab-content { counter-reset: item; }
    .inner_solution-content-wrap .right-wrap .card-header { counter-increment: item; position: relative; padding-left: 50px; transition: 0.3s ease-out; }
    .inner_solution-content-wrap .right-wrap .card-header:before { 
        content: '0'counter(item); font-size: 20px; font-weight: 300; 
        position: absolute; left: 15px; top: 10px;
    }
    .inner_solution-content-wrap .right-wrap .card-header [class*=title] { margin-bottom: 0; }
    .inner_solution-content-wrap .right-wrap .card-header:hover,
    .inner_solution-content-wrap .right-wrap .card-header[aria-expanded="true"] { background: #ccdde6; }
    /*--*/
    ul.container_type .img { margin-bottom: 15px; }
    ul.container_type .desc { padding: 0 12px; }
    /*--*/
    ul.inner_container_type .desc h5 { font-style: 18px; }
    ul.inner_container_type .desc > .spec { padding: 18px 20px; }
}
@media only screen and (max-width: 480px) {
    .row-cols-2.container_type > li,
    .row-cols-2.inner_container_type > li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}


/*=====================================================================*/
/* CLIENT */
/*=====================================================================*/
ul.our_client { margin-bottom: 0; padding: 0; list-style: none; font-size: 12px; text-align: center; }
ul.our_client li { margin-bottom: 50px; }
ul.our_client .item { display: inline-block; padding: 0 20px; }
ul.our_client .item span { opacity: 0; visibility: hidden; transition: 0.3s ease-in-out; -webkit-transform: translateY(100%); transform: translateY(100%); }
ul.our_client .item:hover span { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); }
/*=================*/
/*====== ... ======*/
ul.recent_project { margin-bottom: 0; padding: 0; list-style: none; text-align: center; }
ul.recent_project li { margin-bottom: 50px; }
ul.recent_project .img { font-size: 22px; height: 260px; overflow: hidden; display: block; }
ul.recent_project .img img { width: 100%; height: 100%; object-fit: cover; }
ul.recent_project h5.title { padding: 15px 15px 0; }
/*=================*/
/*====== ... ======*/
.case-project-wrap { margin-bottom: 50px; }
.case-project-wrap .popupimg_gallery-wrap { background: #f3f3f3; padding: 50px 5px; }
.case-project-wrap .popupimg_gallery-wrap ul { margin-bottom: 0; padding: 0 12px; list-style: none; }
.case-project-wrap .popupimg_gallery-wrap ul li { padding: 5px 5px; line-height: 0; }
.case-project-wrap .popupimg_gallery-wrap .img {
    display: inline-block; width: 100%; height: 175px;
    background-repeat: no-repeat; background-size: cover; background-position: center;
}
/*--*/
.case-project-wrap .desc { padding: 50px 5px; }

@media only screen and (max-width: 991px) {
    ul.recent_project .img { height: 200px; }
}
@media only screen and (max-width: 767px) {
    ul.our_client li { margin-bottom: 35px; }
    ul.our_client a[target="_blank"]:not(.btnsolid):before { top: 10px; }
    ul.our_client .item { padding: 0 15px; }
    /*--*/
    ul.recent_project .img { font-size: 16px; height: 160px; }
    ul.recent_project li { margin-bottom: 25px; }
    /*--*/
    .case-project-wrap .popupimg_gallery-wrap { padding: 30px 5px; }
    .case-project-wrap .popupimg_gallery-wrap .img { height: 80px; }
    .case-project-wrap .desc { padding: 30px 5px; }
}
@media only screen and (max-width: 480px) {
    ul.our_client.row-cols-3 > li { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
    ul.recent_project.row-cols-2 > li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    .case-project-wrap ul > li { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}


/*=====================================================================*/
/* ANNOUNCEMENT */
/*=====================================================================*/
ul.announcement { margin-bottom: 0; padding: 0; list-style: none; }
ul.announcement li { margin-bottom: 50px; }
ul.announcement .item { position: relative; height: 100%; background-color: #fff; padding: 20px 20px; border-radius: 10px; border: 1px solid #ccc; transition: all 0.3s ease-out; }
ul.announcement .img { height: 260px; overflow: hidden; position: relative; }
ul.announcement .img .icon { 
    display: inline-block; background: #005581; width: 2em; height: 2em; border-radius: 50%;
    font-size: 1.5em; color: #fff; text-align: center; line-height: 2;
    position: absolute; top: 45%; left: 50%; opacity: 0; visibility: hidden;
    -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); 
    transition: all 0.3s ease-out, top 0.5s ease-out;
}
ul.announcement .img img { width: 100%; height: 100%; object-fit: cover; }
/*--*/
ul.announcement .desc { padding-top: 10px; }
ul.announcement .desc .cat {
    background: #005581; padding: 5px 10px; position: absolute; top: 21px; left: 21px;
    font-size: 14px; font-weight: 700; text-transform: uppercase; color: #fff;
}
/*--*/
ul.announcement li > a:hover .item { box-shadow: 5px 7px 10px rgba(0,0,0,0.09); }
ul.announcement li > a:hover .img .icon { opacity: 1; visibility: visible; top: 50%; }
/*=================*/
/*====== ... ======*/
.pop-announce .modal-content { border: none; border-radius: 10px; padding: 50px 20px 30px; }


@media only screen and (max-width: 991px) {
    ul.announcement .img { height: 200px; }
}
@media only screen and (max-width: 767px) {
    ul.announcement li { margin-bottom: 25px; }
    ul.announcement .img { height: 160px; }
}
@media only screen and (max-width: 575px) {
    .pop-announce .modal-dialog { margin: 30px 10px 50px; }
}
@media only screen and (max-width: 480px) {
    ul.announcement.row-cols-2 > li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}


/*=====================================================================*/
/* CONTACT */
/*=====================================================================*/
#map { height: 470px; }
/*--*/
.location-wrap .titlehead .sub { margin-bottom: 0; }
/*=================*/
/*====== ... ======*/
ul.location_detail { margin-bottom: 0; padding: 0; list-style: none; }
ul.location_detail > li { margin-bottom: 50px; }
ul.location_detail .tag_place { 
    font-size: 12px; color: #005581; text-transform: uppercase; line-height: 1.1;
    display: inline-block; background: #ccdde6; padding: 7px 10px 6px; margin-bottom: 25px;
}
ul.location_detail .name .title { 
    position: relative; margin-bottom: 1em; 
    font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: 0;
}
ul.location_detail .name .title:after { content: '__'; display: inline; border-bottom: 1px solid #6699b3; margin-left: 5px; color: transparent; vertical-align: bottom; }
ul.location_detail ul.info { margin-bottom: 0; padding: 0; list-style: none; }
ul.location_detail ul.info li { position: relative; padding-left: 2em; margin-bottom: 20px; }
ul.location_detail ul.info li:last-child { margin-bottom: 0; }
ul.location_detail ul.info li:before { 
    content: ''; font-family: 'Font Awesome 5 Free'; font-weight: 700; color: #495058; 
    position: absolute; top: 0; left: 0;
}
ul.location_detail ul.info li.addrs:before { content: '\f3c5'; font-size: 1.2em; }
ul.location_detail ul.info li.tel:before { content: '\f879'; }
/*=================*/
/*====== ... ======*/
.contactform-wrap { background: #f3f3f3; overflow-x: hidden; position: relative; }
.contactform-wrap .deco {
    position: absolute; top: -0.3em; right: -30px; opacity: 0.08;
    font-size: 390px; color: #005581;
}
.contactform-wrap .titlehead .sub { margin-bottom: 0; }
/*==================*/
/*====== Form ======*/
form .space_submit { margin-top: 4em; }
label { display: block; font-size: 18px; font-weight: 700; color: #005581; }
.form-control { height: calc(1.4em + 1.3em + 2px); padding: .375em 1.3em; border-radius: 0; border-color: #005581; font-size: 16px; color: #111; }
.form-control:focus { box-shadow: none; border-color: #ccdde6; color: #111; }
/*--*/
.upload-wrap { position: relative; }
.displayfile-field:disabled { background-color: #fff; padding-right: 160px; }
.uploadfile {
    position: absolute; top: 50%; right: 10px; max-width: 145px;
    -webkit-transform: translate(0,-50%); transform: translate(0,-50%);    
}
label.uploadbtn { 
    font-size: 13px; font-weight: 600; color: #fff; 
    display: inline-block; background: #005581; margin: 0; padding: 0.45em 0.9em 0.4em; border-radius: 100px; cursor: pointer; transition: 0.3s ease-out;
}
label.uploadbtn:hover { background: #003b59; }
.show-for-sr {
    position: absolute!important; width: 1px; height: 1px;
    padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/*--*/
form .remark { font-size: 12px; color: #858585; padding: 5px 0px; }
/*--*/
[type="submit"] { border: none; outline: 0; cursor: pointer; box-shadow: none; }
[type="submit"].btnsolid:hover { color: #fff; }
/*--*/
label.error { 
    font-size: 12px; font-weight: 500; color: #e28282; line-height: 1.2; 
    display: block; margin: 5px 0; 
}
label.error:empty { display: none !important; }
.form-control.error { border-color: #f76c5a !important; }

#result-msg > * { 
    padding: 10px; margin-top: 30px; margin-bottom: 30px; background: rgba(0, 0, 0, 0.05); border: 1px solid; 
    font-weight: 500; color: #111; text-align: center; 
}
#result-msg > .successmsg { color: #7bada5; }
#result-msg > .failedmsg { color: #e28282; }


@media only screen and (max-width: 767px) {
    ul.location_detail > li { margin-bottom: 40px; } 
    ul.location_detail .tag_place { margin-bottom: 10px; }
    ul.location_detail ul.info li { margin-bottom: 10px; }
    /*--*/
    .contactform-wrap .deco { font-size: 130px; }
    /*--*/
    label { font-size: 16px; margin-bottom: 0.3em; }
    .form-control { font-size: 14px; }
    /*--*/
}
@media only screen and (max-width: 480px) {
    ul.location_detail > li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}


/*=====================================================================*/
/* CORPORATE GOVERNANCE */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.mission-wrap {
    position: relative; color: #fff; padding-top: 7em; overflow: hidden;
    background-repeat: no-repeat; background-size: cover; background-position: center; 
}
.mission-wrap:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #092d3f; opacity: 0.85; }
.mission-wrap:after { 
    content: ''; max-width: 20vw; width: 100%; height: 100%; position: absolute; top: 0; left: 0; 
    background: url(../images/deco-corporate.png) no-repeat top left; background-size: contain;
}
.mission-wrap > div { position: relative; z-index: 1; }
.mission-wrap .title { color: #fff; }
.mission-wrap .title:before { border-color: #f7c12a; }
/*=================*/
/*====== ... ======*/
ul.vision_detail { margin-bottom: 0; padding: 0; list-style: none; }
ul.vision_detail > li { margin-bottom: 50px; }
ul.vision_detail img { max-width: 45px; float: left; margin-bottom: 15px; margin-right: 20px; }
ul.vision_detail .desc { overflow: hidden; }
ul.vision_detail ul.point { padding-left: 20px; list-style: disc; line-height: 1.4; }
/*=================*/
/*====== ... ======*/
.commitment-wrap ul.point { padding-left: 20px; line-height: 1.4; }
/*=================*/
/*====== ... ======*/
.corporate_milestone-wrap { background: #092d3f; color: #fff; }
.corporate_milestone-wrap .sub,
.corporate_milestone-wrap .title { color: #fff; }
.corporate_milestone-wrap .title:before { border-color: #f7c12a; }
/*--*/
.milestone-wrap ul { margin-bottom: 0; padding: 0; list-style: none; }
ul.milestone_point > li .item { display: inline-table; }
ul.milestone_point .year { font-size: 30px; font-weight: 700; font-style: italic; color: #fcc732; line-height: 1; position: relative; padding: 5px 0 10px; }
ul.milestone_point .year:after { content: ''; position: absolute; }
ul.milestone_point > li ul li { display: inline-block; max-width: 95px; vertical-align: top; }
ul.milestone_point > li .img img { padding: 15px 0; }
ul.milestone_point > li .desc { font-size: 12px; font-style: italic; color: #ccdde6; word-break: break-word; }
ul.milestone_point > li:nth-child(odd) { position: relative; }
/*=================*/
/*====== ... ======*/
.accreditation-wrap { text-align: center; }
.accreditation-wrap img { max-width: 300px; width: 100%; margin-top: 35px; margin-bottom: 10px; }
.accreditation-wrap .desc { font-size: 14px; color: #666; line-height: 1.3; max-width: 300px; margin: 0 auto; }
/*=================*/
/*====== ... ======*/
.csr-wrap { background: #ebebeb; position: relative; }
.csr-wrap:after { 
    content: ''; max-width: 20vw; width: 100%; height: 100%; position: absolute; bottom: 0; right: 0; 
    background: url(../images/deco-corporate2.png) no-repeat bottom right; background-size: contain;
}
.csr-wrap > div { position: relative; z-index: 1; }
.csr-wrap .table-content .item { border: 2px solid #005582; height: 100%; }
.csr-wrap .table-content .img { text-align: center; padding: 20px 5px; }
.csr-wrap .table-content .title { 
    font-size: 20px; font-weight: 700; color: #fff; text-transform: uppercase; text-align: center;
    background: #005582; padding: 8px 5px;
}
.csr-wrap .table-content .desc { padding: 10px; }


@media only screen and (min-width: 768px) {
    .milestone-wrap { overflow-x: auto; margin: 0 30px; padding: 30px 0 50px; }
    /*
     ** Custom Scrollbar Maker (https://codepen.io/stephenpaton-tech/full/JjRvGmY)
    */
    .milestone-wrap { scrollbar-width: auto; scrollbar-color: #d7d7d7 rgba(255, 255, 255, 0.1); } /* Firefox */
    .milestone-wrap::-webkit-scrollbar { height: 11px; }
    .milestone-wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); }
    .milestone-wrap::-webkit-scrollbar-thumb { background-color: #d7d7d7; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
    /*--*/
    ul.milestone_point { text-align: center; white-space: nowrap; }
    ul.milestone_point > li { display: inline-block; margin: 0 -10px; }
    ul.milestone_point > li ul li { white-space: normal; }
    ul.milestone_point .year:before {
        content: ''; width: 100%; border-top: 1px solid #005581;
        position: absolute; bottom: calc(100% + 9px); left: 0;
    }
    ul.milestone_point .year:after {
        width: 0; height: 10px; border-left: 1px solid #005581;
        bottom: 100%; left: 50%;
    }
    ul.milestone_point > li:nth-child(odd) { top: -100px; margin-top: 100px; }
    ul.milestone_point > li:nth-child(odd) ul { display: table-header-group; }
    ul.milestone_point > li:nth-child(odd) ul li { vertical-align: bottom; }
    ul.milestone_point > li:nth-child(odd) ul li > * { display: table-footer-group; }
    ul.milestone_point > li:nth-child(odd) .year { padding: 10px 0 5px; }
    ul.milestone_point > li:nth-child(odd) .year:before { bottom: inherit; top: calc(100% + 9px); }
    ul.milestone_point > li:nth-child(odd) .year:after { bottom: inherit; top: 100%; }
    ul.milestone_point > li:first-child { margin-left: 0; }
    ul.milestone_point > li:first-child .year:before { left: 50%; }
    ul.milestone_point > li:last-child .year:before { left: inherit; right: 49.88%; }
}
@media only screen and (max-width: 767px) {
    ul.vision_detail > li { margin-bottom: 30px; }
    ul.vision_detail img { float: none; }
    /*--*/
    .milestone-wrap { overflow-y: auto; margin: 0 5px; height: 100vh; }

    .milestone-wrap { scrollbar-width: auto; scrollbar-color: #d7d7d7 rgba(255, 255, 255, 0.1); } /* Firefox */
    .milestone-wrap::-webkit-scrollbar { width: 11px; }
    .milestone-wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); }
    .milestone-wrap::-webkit-scrollbar-thumb { background-color: #d7d7d7; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
    /*--*/
    ul.milestone_point { display: inline-block; width: 100%; }
    ul.milestone_point > li { width: 50%; position: relative; float: right; margin: 0px 1px; }
    ul.milestone_point > li .item { margin-left: 30px; }
    ul.milestone_point .year { font-size: 25px; padding: 5px 0 0px; }
    ul.milestone_point .item:before { 
        content: ''; height: 100%; border-left: 1px solid #005581; 
        position: absolute; top: 0; left: 0;
    }
    ul.milestone_point .year:after { width: 20px; height: 0; border-top: 1px solid #005581; top: 18px; left: -30px; }
    ul.milestone_point > li ul li { text-align: center; }
    ul.milestone_point > li:nth-child(odd) { float: left; text-align: right; }
    ul.milestone_point > li:nth-child(odd) .item { margin-left: 0; margin-right: 30px; }
    ul.milestone_point > li:nth-child(odd) .item:before { left: inherit; right: 1px; }
    ul.milestone_point > li:nth-child(odd) .year:after { left: inherit; right: -28px; }
    ul.milestone_point > li:first-child .item:before { top: 18px; }
    ul.milestone_point > li:last-child .item:before { top: inherit; bottom: calc(100% - 18px); }
}


/*=====================================================================*/
/* NEWSROOM */
/*=====================================================================*/
.newsroom-wrap > .titlehead { background-color: #092d3f; }
.newsroom-wrap > .titlehead .title { color: #fff; }
.newsroom-wrap .item-wrap + .item-wrap { margin-top: 25px; padding-top: 75px; border-top: 1px solid #ccdde6; }
/*--*/
.newsroom-wrap a[target="_blank"]:not(.btnsolid):before {
    font-size: 20px; top: 50%; border-radius: 0; background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23005581' viewBox='0 0 24 24'%3e%3cpath d='M6 17c2.269-9.881 11-11.667 11-11.667v-3.333l7 6.637-7 6.696v-3.333s-6.17-.171-11 5zm12 .145v2.855h-16v-12h6.598c.768-.787 1.561-1.449 2.339-2h-10.937v16h20v-6.769l-2 1.914z'/%3e%3c/svg%3e");
    -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
.newsroom-wrap .img:after {
    content: ''; width: 100%; height: 100%; background: #fff; opacity: 0; visibility: hidden;
    position: absolute; top: 0; left: 0; transition: all 0.3s ease-out; 
}
.newsroom-wrap .img:hover::after { opacity: 0.7; visibility: visible; }
/*=================*/
/*====== ... ======*/
ul.newsroom { margin-bottom: 0; padding: 0; list-style: none; text-align: center; }
ul.newsroom li { margin-bottom: 50px; }
ul.newsroom a.img { display: block; background: #f3f3f3; padding: 25px 20px; }
ul.newsroom a.img img { max-width: 260px; width: 100%; }
ul.newsroom .desc { padding: 15px 30px 0; }
ul.newsroom .desc p { margin-bottom: 5px; }
/*=================*/
/*====== ... ======*/
.corporate_service { margin-bottom: 4em; }
.corporate_service a.img { display: block; background: #f3f3f3; padding: 25px 35px; }


@media only screen and (max-width: 767px) {
    ul.newsroom .img { font-size: 16px; }
    ul.newsroom li { margin-bottom: 25px; }
    ul.newsroom .desc { padding: 15px 15px 0; }
}
@media only screen and (max-width: 480px) {
    ul.newsroom.row-cols-2 > li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    /*--*/
    .corporate_service a.img { padding: 15px 20px; }
}


/*=====================================================================*/
/* MEDIA RELEASE */
/*=====================================================================*/
.media_releaselist { padding: 35px 35px; border: 1px solid #ccc; border-radius: 10px; }
.media_releaselist .section:not(:last-child) { margin-bottom: 50px; padding-bottom: 50px; }
.media_releaselist ul { margin-bottom: 0; padding: 0; list-style: none; }
.media_releaselist li { position: relative; }
.media_releaselist li a { display: block; padding-left: 25px; }
.media_releaselist li + li { margin-top: 25px; border-top: 1px dashed #ccc; }
.media_releaselist li + li a { padding-top: 15px; }
.media_releaselist li a:before { content: ''; position: absolute; top: 0px; left: 0px; height: 100%; border-left: 3px solid #e1e1e1; transition: 0.3s ease-out; }
.media_releaselist p.date { font-size: 0.8em; color: #888; }
.media_releaselist p.date i { font-size: 0.8em; vertical-align: middle; }

.media_releaselist li a:hover::before { border-color: #005581; }
/*=================*/
/*====== ... ======*/
.media_release-detail-wrap .titlehead .sub { color: #fff; }
.media_release-detail-wrap .titlehead .sub small { 
    font-size: 0.45em; vertical-align: middle; line-height: 1; 
    display: inline-block; margin-right: 1px;
}
.media_release-detail-wrap .titlehead .sub a { color: #fff; }
.media_release-detail-wrap .titlehead .sub a:hover { color: #ccdde6; }
.media_release-detail-wrap p.date i { font-size: 0.8em; vertical-align: middle; }
/*--*/
.related-release { background: #f5f5f5; padding: 25px; border-radius: 10px; font-size: 14px; }
.related-release ul { margin-bottom: 0; padding: 0; list-style: none; }
.related-release li { position: relative; }
.related-release li a { display: block; padding-left: 18px; color: #092d3f; }
.related-release li + li { margin-top: 20px; border-top: 1px dashed #ccc; }
.related-release li + li a { padding-top: 15px; }
.related-release li a:before { content: ''; position: absolute; top: 0px; left: 0px; height: 100%; border-left: 2px solid #e1e1e1; transition: 0.3s ease-out; }

.related-release li a:hover::before { border-color: #005581; } 
/*--*/
.media_release-detail { padding: 35px 35px; border: 1px solid #ccc; border-radius: 10px; }
.media_release-detail .content-section { margin-top: 15px; }


@media only screen and (max-width: 575px) {
    .media_releaselist { padding: 25px 25px; }
}


/*=====================================================================*/
/* FAQ */
/*=====================================================================*/
/*=================*/
/*====== ... ======*/
.faqtitle-wrap {
    color: #fff; position: relative; padding-top: 10em; padding-bottom: 2em;
    background-repeat: no-repeat; background-size: cover; background-position: center; 
}
.faqtitle-wrap:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #092d3f; opacity: 0.6; }
.faqtitle-wrap > div { position: relative; z-index: 1; }
.faqtitle-wrap .title { color: #fff; }
.faqtitle-wrap .title:before { border-color: #f7c12a; }
/*=================*/
/*====== ... ======*/
.faqcontent-wrap { padding-top: 25px; counter-reset: item; }
.faqcontent-wrap .cards { margin-bottom: 10px; counter-increment: item; }
/*--*/
.faqcontent-wrap .card-header {
    display: block; background: #f3f3f3; border: none; border-radius: 0; padding-right: 2em; position: relative;
    font-size: 18px; font-weight: 700; color: #005581; 
}
.faqcontent-wrap .card-header:before { content: counter(item)'.'; padding-right: 5px; }
.faqcontent-wrap .card-header[data-toggle]:after { 
    content: '+'; font-family: sans-serif; font-size: 1.5em; font-weight: 100; line-height: 1; 
    position: absolute; top: 0.3em; right: 15px; 
}
.faqcontent-wrap .card-header[data-toggle][aria-expanded=true]:after { content: '-' }
/*--*/
.faqcontent-wrap .card-body { margin-top: 10px; margin-bottom: 25px; padding: 25px 25px; border: 1px solid #ccdde6; }


@media only screen and (max-width: 767px) {
    .faqtitle-wrap { padding-top: 5em; padding-bottom: 1em; }
    .faqcontent-wrap .card-header { font-size: 16px; }
    .faqcontent-wrap .card-body { padding: 15px 20px; }
}


/*=====================================================================*/
/* CAREER */
/*=====================================================================*/
ul.career { margin-bottom: 0; padding: 0; list-style: none; text-align: center; }
ul.career li { margin-bottom: 50px; }
ul.career .img { display: block; }
ul.career h5.title { padding: 15px 15px 0; }
/*=================*/
/*====== ... ======*/
.careerform-wrap { background: #f3f3f3; }


@media only screen and (max-width: 767px) {
    ul.career li { margin-bottom: 25px; }
}
@media only screen and (max-width: 480px) {
    ul.career.row-cols-2 > li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}





/* Code from JayJay */
/*------------------*/

* {
    --altusBlue: #005581;
}

/*-======================-*/
/* Home Banner */
/*-======================-*/
.home-banner { margin: 0 0 20px; }
.home-banner .banner-item div { height: 100%; min-height: 750px; position: relative; }
.container { max-width: 1330px; }

.overlay-title { margin: -105px 0px -60px; }
.overlay-title h1 { color: #c0c0c0; font-size: 70px; font-weight: 900; line-height: 1.3; margin: 0; opacity: 0.5; position: absolute; text-transform: uppercase; z-index: 2; }

.home-enquiry { padding: 4rem 0; position: relative; }
.home-enquiry:before { background-image: url('../images/altus-logo-background.png'); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; height: 800px; left: -200px; opacity: 0.5; position: absolute; top: -320px; width: 800px; }
.home-enquiry .enquiry-title { align-items: center; display: flex; justify-content: center; text-align: center; }
.home-enquiry .enquiry-title h2 { color: var(--altusBlue); font-size: 50px; font-weight: 700; margin: 0; text-transform: uppercase; }
.home-enquiry .enquiry-title button { background-color: var(--altusBlue); border: 1px solid var(--altusBlue); color: #ffffff; font-weight: 500; padding: 10px 20px; text-transform: uppercase; }


@media all and (max-width: 1200px) {
    .overlay-title h1 { font-size: 60px; }
}

@media all and (max-width: 1023px) {
    .home-banner .banner-item div { min-height: 500px; }
}

@media all and (max-width: 767px) {
    .overlay-title h1 { font-size: 50px; }
    .home-enquiry:before { height: 500px; left: -90px; top: -140px; width: 500px; }
    .home-enquiry .enquiry-title h2 { font-size: 40px; margin: 0; }
}

@media all and (max-width: 639px) {
    .home-banner { margin: 0; }
    .home-banner .banner-item div { min-height: 350px; }
    .overlay-title { margin: 1rem 0; }
    .overlay-title h1 { color: #777777; font-size: 36px; opacity: 1; position: relative; }
    .home-oursolution-wrap { margin: 0 auto; }
}


/*-======================-*/
/* About Us Team Management */
/*-======================-*/
.aboutus-wrap p { text-align: justify; }
.management-team .management-title { align-items: flex-end; background-color: var(--altusBlue); display: flex; min-height: 250px; position: relative; }
.management-team .management-title h1 { color: #ffffff; padding: 70px 0 60px; text-align: center; }
.management-team .decotext { font-size: 160px; opacity: 0.2; position: absolute; bottom: 10%; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
.management-team .team-content { border: 1px solid #cccccc; height: 100%; }
.management-team .team-content .profile-image { background-repeat: no-repeat; background-position: center; background-size: cover; height: 360px; }
.management-team .team-content p { margin-bottom: 25px; text-align: justify; }
.management-team .desc { padding: 20px 15px; }
.management-team .head { background-color: #eaeaea; padding: 15px; }
.management-team .head .title { margin-bottom: 0; }
.management-team .desc > a { background: var(--altusBlue); border-radius: 50px; color: #ffffff; padding: 10px 25px; }

@media all and (max-width: 991px) {
    .management-team .management-title { min-height: 180px; overflow: hidden; }
    .management-team .decotext { font-size: 120px; }
    .management-team .management-title h1 { padding: 0 0 50px; }
}


/*-======================-*/
/* Career */
/*-======================-*/
.new-career .bg-image { background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 300px; position: relative; }
.new-career a[target="_blank"]:not(.btnsolid):before { left: 0; right: 0; top: 50%; }
.new-career .desc a:before { content: unset; }
.new-career .desc button { align-item: center; border: none; display: flex; justify-content: center; max-width: 200px; margin: auto; position: relative; width: 180px; }
.new-career h5 { margin: 0 0 20px; }

/*-======================-*/
/* Business Portfolio */
/*-======================-*/
.portfolio-wrap .bg-image { background-repeat: no-repeat; background-position: center; background-size: cover; margin: 0 0 10px; min-height: 300px; position: relative; }
.portfolio-wrap .portfolio-list { margin: 0; padding: 0; }
.portfolio-wrap .portfolio-list > li { list-style: none; }
.portfolio-wrap .portfolio-list .desc { padding: 5px; }


/*-======================-*/
/* Footer */
/*-======================-*/
.footer-dev { background-color: #005983; padding: 3rem 0; position: relative; }
.footer-dev h2 { color: #ffffff; font-size: 50px; margin: 0 0 15px; text-transform: uppercase; }
.footer-dev h4 { color: #ffffff; font-size: 30px; }
.footer-dev p { color: #ffffff; }
.footer-dev iframe { margin: 1rem 0 0; }
.footer-dev form { margin: 1rem 0 0; }
.footer-dev form label,
.footer-dev form input,
.footer-dev form textarea { background-color: transparent; border: 0; color: #ffffff; width: 100%; }
.footer-dev form input,
.footer-dev form textarea { border: 1px solid #ffffff; padding: 10px; }
.footer-dev form label p { margin: 0 0 5px; }
.footer-dev .submit { text-align: center; }
.footer-dev .submit input { background-color: #ffffff; color: var(--altusBlue); font-weight: 500; margin: 1rem auto 0; max-width: 250px; text-transform: uppercase; width: 100%; }

footer.dev-footer-copy { background-color: #005983; padding: 15px 0; text-align: center; }
footer.dev-footer-copy p { color: #ffffff; margin: 0; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

@media all and (max-width: 991px) {
    .footer-dev iframe { margin: 1rem 0; }
}


@media screen and (max-width: 767px) {
    footer p { font-size: 14px; }

    .footer-dev h2 { font-size: 42px; }
}


/* Home Slider added a new slide, so gonna to add new slider for it. */
@media all and (min-width: 1700px) {
    .homeslider,
    .home_slide { height: 700px !important; }
}


.home_slide.demo,
.home_slide { height: 700px; }

@media all and (max-width: 639px) {
    .home_slide.demo,
    .home_slide { height: 300px; }
}

/* Corporate Governance - Award layout - 1-mar-2024 */
.award-image {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.award-image li {
    list-style-type: none;
}

.award-image li img {
    border-radius: 10px;
}