@charset "utf-8";

/* Global */
html {scroll-behavior: smooth;}
body {position:relative; overflow-y: scroll;}
li {list-style:none;}
a:hover {text-decoration:none; cursor:pointer !important;}

/* Navigation Menu */
.navbar {background:#FFD504; border-bottom:5px solid #0072BB;}
.navbar .navbar-collapse {}
.navbar .nav-item {border-right:1px solid #0F76B0; border-top:1px solid #0F76B0; border-bottom:1px solid #0F76B0;}
.navbar .nav-item:last-child {border-right:none;}
.navbar .nav-link {color:#0F76B0 !important; font-weight:600;}
.navbar .nav-link.active, .navbar .nav-link:hover {background:#FFF;}
.navbar-dark .navbar-toggler {border-color:#0072BB; margin-top:27px;}
#google_translate_element {position: absolute; right:15px; top:15px; }
#google_translate_element .goog-te-gadget-simple {background:#FFD504; border:none;}
#google_translate_element .goog-te-gadget img {display: none;}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span{color:#0072BB;}
.lang-top {position: absolute; right:25px; top:8px; }

/* Background */
.bg-blue {background:#0072BB; color:#FFF;}
.bg-white {background:#FFF; color:#0072BB;}

/* video banner */
.video-banner {height: calc(100vh - 145px); overflow:hidden;}

/* Page */
#about-us {padding-top:145px; text-align:center;}
#about-us .img-fluid {border-top:5px solid #0072BB; border-bottom:5px solid #0072BB;}

#vision-mission {padding-top:145px; text-align:center; }
#vision-mission .img-fluid {border-top:5px solid #0072BB; border-bottom:5px solid #0072BB;}

#our-goals {padding-top:145px;  text-align:center; }
#our-goals .img-fluid {border-top:5px solid #0072BB; border-bottom:5px solid #0072BB;}

#our-services {padding-top:145px; }
#our-services .img-fluid {border-top:5px solid #0072BB; border-bottom:5px solid #0072BB;}

#our-project {padding-top:180px; position:relative;}
#our-project .nav {position:absolute; top:155px; z-index:5; }
#our-project .nav li {border-right:1px solid #0F76B0; width:187px; text-align:center; background:#FFD504; display:grid;}
#our-project .nav li:last-child {border:none;}
#our-project .link {font-weight:bold; background:#FFD504; color:#0F76B0; padding:10px 16px; font-size:15px;}
#our-project .link.active {background:#FFF; padding:10px 16px;}
#our-project .tab-content .blue {background:#0072BB;}
#our-project .p-half {padding:0 1px 1px 0; background:#FFF;}
#our-project .project-info {position:absolute; width:100%; height:100%; opacity:0;}
#our-project .project-item.selected .project-info {opacity:1; z-index:1;}
#our-project .project-item.selected img {opacity:0.2; transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -webkit-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out;}
#our-project .project-info h4 {margin-top:50px;}
#our-project .project-info p {margin:20px 0 50px 0;}
#our-project .project-info .btn-view {color:#0072BB; background:#FFF; padding:10px 20px; display:table; margin:0 auto; font-weight:600;}

#contact-us {padding:180px 0 50px 0;}
#contact-us img:hover {opacity:0.7; transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -webkit-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out;}
#mod-address {padding:20px 0; color:#0072BB; font-weight:600;}

/* Footer */
.mod-footer {background:#FFD504; padding:10px 0;}
.mod-footer .copy {font-size:20px; color:#0072BB; font-weight:600;}

/* Button to top */
#btn-top {
    position: fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:40px;
    height:40px;
    background-color:#999;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    opacity:0.7;filter:"alpha(opacity=70)";
    -ms-filter:"alpha(opacity=70)";
}
#btn-top span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#btn-top:hover {
    background-color:#CCC;
}

/* page project*/
.page-project {height:100vh; overflow:hidden;}
.page-project .header {background:#FFD504; color:#0072BB; font-weight:600; font-size:18px;}
.page-project .carousel-inner {height:calc(100vh - 75px); display:flex; vertical-align:middle; align-items:center;}
.page-project .carousel-control-next, .carousel-control-prev {width:60px; height:60px; background:#FFD504; top:auto; opacity:0.8; z-index:20; position:fixed;}
.page-project .carousel-item {display:flex; align-items:center; justify-content:center;}
.page-project .carousel-item img {width:100%; }
.page-project .carousel-indicators {position:fixed;}
.page-project .carousel-indicators li {height:20px; }

@media only screen and (max-width: 1080px) {
	.video-banner {height: calc(100vh - 150px);}
	.navbar .logo {width:80px; }
	.navbar .nav-item {border-right:none; border-top:none;}
	#our-project .project-info h4 {margin-top:70px;}
	#our-project .project-info p {margin:20px 0 50px 0;}
	.page-project .carousel-item img{height:calc(100vh - 75px); width:auto;}
}