@import "bootstrap.min.css";
@import "fontawesome.all.min.css";
@import "/Content/Site/webfonts/Poppins/stylesheet.css";
/* @import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css"; */


* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; position: relative; }
body { font-family: 'Poppins' !important; position: relative; }
*:focus { outline: none; box-shadow: none; }
:root { --primary-color: #2C3143; }
.container-custom { padding-left: 80px; padding-right: 80px; }
.row { margin-left: 0 !important; margin-right: 0 !important; }

a:hover { text-decoration: none !important; }

.clsLetterOneHalf { letter-spacing: 1.5px !important; }
.clsLetterTwo { letter-spacing: 2px !important; }

.divBodyMargin { margin-top: 120px!important; }

.slick-dots li button { padding: 0 !important; position: relative !important; }
    .slick-dots li button::before { left: 5px !important; position: absolute !important; border: 2px solid #B05A39 !important; }

.navbar { border-bottom: 1px solid #E5E5E5; padding-left: 5% !important; background: #fff; padding-right: 5% !important; padding-top: 21px !important; padding-bottom: 21px !important; }
    .navbar .navbar-nav { margin-left: auto; margin-right: 50px; }
    .navbar .nav-link { color: #545554 !important; margin-left: 32px; font-size: 14px; font-weight: 500; }
        .navbar .nav-link:after { transition: .3s ease; }
        .navbar .nav-link[aria-expanded=true] { color: #1DB24B !important; margin-left: 32px; font-size: 14px; font-weight: 500; border-bottom: 2px solid #1DB24B; }
            .navbar .nav-link[aria-expanded=true]:after { transform: rotate(180deg); }
        .navbar .nav-link:after { margin-left: 6px !important; }
    .navbar .dropdown-menu { border-radius: 0 !important; top: 78px !important; width: auto; min-width: 200px; border: none !important; text-align: center !important; }
        .navbar .dropdown-menu .dropdown-item { color: #545554 !important; margin-top: 15px; margin-bottom: 15px; }
            .navbar .dropdown-menu .dropdown-item:hover { background-color: #fff !important; }
            .navbar .dropdown-menu .dropdown-item:focus { background-color: #fff !important; }
.nav-bar-lang-container { display: inline-block; padding-left: 4px; padding-right: 4px; padding-top: 12px; padding-bottom: 12px; }
    .nav-bar-lang-container .nav-bar-lang { display: inline-block; margin-left: 8px; margin-right: 8px; color: #545554; }
        .nav-bar-lang-container .nav-bar-lang:hover { text-decoration: none; }
        .nav-bar-lang-container .nav-bar-lang.active { color: #1DB24B; }

.navbar-toggler .navbar-toggler-icon { content: ''; border: none !important; background: url('/Content/Site/img/hamburger_vector.svg') no-repeat !important; background-size: cover !important; height: 32px !important; width: 32px !important; }
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus { outline: none; box-shadow: none; }


footer { padding-top: 50px; position: relative; }
    footer .divFooterLink { padding-left: 16px !important; padding-right: 16px !important; color: #545554; display: inline-block; }
        footer .divFooterLink:hover { color: #1DB24B; }
.divFooterLink2 { padding-left: 16px !important; padding-right: 16px !important; color: #545554; display: inline-block; }
.divFooterBackOverlay { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; z-index: -1; }
    .divFooterBackOverlay img { width: 100%; }
.footerResp1 { text-align: left; width: 100%; }
.footerResp2 { text-align: right; width: 100%; }

.handle{cursor:move;}

.divBreadCrumb { border-bottom: 1px solid #E5E5E5; padding-bottom: 12px; }
.aBread { color: #545554 !important; font-size: 10px; letter-spacing: 1.5px; font-weight: 500; line-height: 20px; }


.headerIndex { height: auto; min-height: 55vw; width: 100%; position: relative; margin-top: 100px; }
    .headerIndex .divSlider { position: relative; width: 100%; height: auto !important; min-height: 55vw; background-size: cover !important; background-position: center !important; z-index: 3; }
    .headerIndex .divHalfSlider1 { position: absolute; top: 0; left: 0; width: 100%; white-space: nowrap; height: 690px !important; background-size: auto !important; background-position: left !important; z-index: 4; }
    .headerIndex .divHalfSlider2 { position: absolute; top: 0; right: 0; width: 100%; height: 690px !important; background-size: auto !important; background-position: left !important; z-index: 3; }


.divHalfSliderContainer1 { width: 50%; position: absolute; overflow: hidden; height: 690px; top: 0; left: 0; z-index: 5; }
.divHalfSliderContainer2 { width: 100%; overflow: hidden; position: absolute; height: 690px; top: 0; right: 0; z-index: 3; }

.headerIndex .divVerticalLine { cursor: all-scroll; position: absolute; top: 50% !important; left: 50%; transform: translate(-50%,-50%); height: 100%; width: 4px; background: #1DB24B; z-index: 4; }
.HomeSliderSlick .slick-prev { left: calc(50% - 30px); top: 50%; transform: translate(-50%,-50%); z-index: 4; height: 44px; width: 44px; overflow: hidden; pointer-events: none; animation: shake 1.5s infinite; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
    .HomeSliderSlick .slick-prev:before { content: ''; content: url('/Content/Site/img/banner_chev_left.svg'); }
.HomeSliderSlick .slick-next { left: calc(50% + 30px); top: 50%; transform: translate(-50%,-50%); z-index: 4; height: 44px; width: 44px; pointer-events: none; animation: shake 1.5s infinite; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
    .HomeSliderSlick .slick-next:before { content: ''; content: url('/Content/Site/img/banner_chev_right.svg'); }
.slick-dots button:before { content: '' !important; width: 10px !important; height: 10px !important; background: #B05A39 !important; border: 2px solid #B05A39 !important; border-radius: 5px !important; }


.divProjectDetailBannerSlick { position: relative !important; z-index: 4; }
    .divProjectDetailBannerSlick .slick-arrow { background-color: rgba(0,0,0,0.8); width: 44px !important; height: 44px !important; z-index: 5; bottom:unset!important; top:unset!important; right:unset!important;left:unset!important; }
    .divProjectDetailBannerSlick .slick-prev { right: 44px !important; bottom: -22px !important; }
        .divProjectDetailBannerSlick .slick-prev:before { content: url('/Content/Site/img/icon/chevron-left.svg') !important; }
    .divProjectDetailBannerSlick .slick-next { right: 0 !important; bottom: -22px !important; }
    .divProjectDetailBannerSlick .slick-next:before {content:url('/Content/Site/img/icon/chevron-right.svg')!important;}

@keyframes shake { 0% { margin-top:0 }
    25% { margin-top:2px; }
    50% { margin-top:0; }
    75% { margin-top:-2px; }
    100% { margin-top: 0px; }
}



.divPageDescirption { font-size: 24px; color: #545554; letter-spacing: 2px; line-height: 36px; vertical-align: middle; font-weight: 500; }
.divTitle { font-size: 28px; font-weight: 600; color: #545554; letter-spacing: 2px; line-height: 42px; vertical-align: middle; }
.divDescription { font-size: 16px; font-weight: 300; letter-spacing: normal !important; color: #545554; line-height: 24px; vertical-align: middle; }
.divListTitle { font-weight: 600; color: #545554; font-size: 16px; letter-spacing: 2px; line-height: 24px; margin-top: 12px; }

.divListCard { border: 0 !important; border-radius: 0 !important; transition: .3s ease-in; margin-top: 32px; }
    .divListCard img { border: 0 !important; border-radius: 0 !important; }
    .divListCard .divDescription { margin-top: 12px; }
    .divListCard .btnGreenBorder { margin-top: 12px; }
    .divListCard:hover { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important; }
        .divListCard:hover .btnGreenBorder { background: #1DB24B !important; color: #fff !important; }
.divCardDescContainer { padding-left: 12px; padding-right: 12px; padding-bottom: 12px; }

.divCertificateContainer { height: 190px !important; margin-top: 24px; width: 240px !important; background-size: cover !important; background-position: center !important; margin-left: auto; margin-right: auto; }
.divProfilePicContainer { height: 330px !important; width: 280px; background-size: cover !important; background-position: center !important; margin-top: 30px; }
.divDetailProfilePicContainer { height: 440px !important; width: 365px; background-size: cover !important; background-position: center !important; }
.divProfileDescRight { text-align: right; }
.divProfileDescLeft { text-align: left; }


.divIndexImageContainer { position: relative; height: 365px; width: 450px !important; background-size: cover !important; background-position: center !important; border-radius: 50%; margin-left: auto !important; margin-right: auto !important; }
    .divIndexImageContainer .divEclipseOverlay { position: absolute; right: -2px; top: 35px; }

    .divIndexImageContainer .divEclipseReverseOverlay { position: absolute; left: -4px; top: 35px; }
        .divIndexImageContainer .divEclipseReverseOverlay img { transform: rotate(227deg); }

.divHalfGreenLine { width: 200px; background: #1DB24B; height: 2px; margin-bottom: 24px; margin-top: 24px; }
.btnGreenBorder { cursor: pointer; border: 1px solid #1DB24B !important; margin-top: 24px !important; padding-top: 16px !important; padding-left: 40px !important; padding-right: 40px !important; padding-bottom: 16px !important; text-align: center !important; border-radius: 30px !important; color: #1DB24B !important; transition: .3s ease-in !important; }
    .btnGreenBorder:hover { background: #1DB24B !important; color: #fff !important; }

.btnGrayBorder { cursor: pointer; border: 1px solid #545554 !important; margin-top: 24px !important; padding-top: 16px !important; padding-left: 40px !important; padding-right: 40px !important; padding-bottom: 16px !important; text-align: center !important; border-radius: 30px !important; color: #545554 !important; transition: .3s ease-in !important; }
    .btnGrayBorder:hover { background: #545554 !important; color: #fff !important; }

.divVideoContainer { background: #fff; border: 2px solid #B05A39; padding: 20px; height: 610px; width: 100%; position: relative; }
    .divVideoContainer .divVideoThum { position: relative; width: 100%; height: 570px; background-size: cover !important; background-position: center !important; z-index: 3; }
.divPlayButtonOverlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 4; }
.divVideoShade { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background: #000; opacity: 0.3; }


.divPageBannerContainer { width: 100%; height: 400px; background-size: cover !important; background-position: center !important; }
.divPageBannerContainer2 { width: 100%; height: 400px; background-size: cover !important; background-position: center !important; }
.divProjectDetailBannerContainer { width: 100%; height: 675px; background-size: cover !important; background-position: center !important; }
.divProjectDetailSlickSlider { width: 320px; height: 335px; margin-left: 2px; margin-right: 2px; background-size: cover !important; background-position: center !important; }

.divBlogDetailBannerContainer { width: 100%; height: 562px; background-size: cover !important; background-position: center !important; }
.divPressDetailBannerContainer { width: 100%; height: 562px; background-size: contain !important; background-position: center !important; }

.divContactForm { border: 1px solid #1DB24B; padding: 24px; width: 100%; border-radius: 30px; }
    .divContactForm .form-control { border-radius: 30px; margin-bottom: 16px; height: 50px; padding: 12px !important; }
    .divContactForm textarea { min-height: 90px !important; }
    .divContactForm .form-control:focus { box-shadow: none !important; border: 1px solid #1DB24B !important; }


@media(max-width:992px) {

    .divPageDescirption { font-size: 16px; line-height: 24px; }
    .divTitle { font-size: 20px; line-height: 28px; }
    .divDescription { font-size: 12px; line-height: 18px; }
    .btnGreenBorder { font-size: 10px !important; }

    .divVideoContainer { height: 400px; }
        .divVideoContainer .divVideoThum { height: 360px; }

    .divProfilePicContainer { height: 300px !important; width: 250px; background-size: cover !important; background-position: center !important; }
    .divProfileDescRight { text-align: center; }
    .divProfileDescLeft { text-align: center; }
    .divContactFormCol { padding: 0 !important; padding-left: -15px !important; padding-right: -15px !important; }
    .divContactForm { padding-left: 8px; padding-right: 8px; margin-top: 20px; }
    footer .divFooterLink { display: block; margin-top: 20px; }
    .divFooterLink2 { padding-left: 8px !important; padding-right: 8px !important; }
    .footerResp1 { text-align: center; width: 100%; margin-top: 20px; margin-bottom: 20px; }
    .footerResp2 { text-align: center; width: 100%; }

    .divProjectDetailSlickSlider { width: 170px !important; height: 165px !important; }

    .navbar-nav { padding-top: 30px !important; }
        .navbar-nav .nav-item { margin-top: 15px !important; }
    .dropdown-menu { padding-left: 30px !important; }
    .nav-bar-lang-container { padding-left: 25px !important; }
    .navbar .dropdown-menu { text-align: left !important; }
    .divProjectDetailBannerContainer {  height: 400px; background-size:contain!important; }

}

@media(max-width:560px) {
    .divVideoContainer { height: 200px; }
        .divVideoContainer .divVideoThum { height: 160px; }
    .divPlayButtonOverlay img { height: 30px; width: 30px; }
    .divPageBannerContainer2 {  height: 300px;  }

    .divPageBannerContainer { height: 350px; background-size: cover !important; }
    .divProjectDetailBannerContainer { height: 350px; background-size: contain !important; }

}

@media(max-width:450px) {
    .navbar-brand img { width: 195px !important; height: 48px !important; }
    .divBodyMargin { margin-top: 100px!important; }

    .divIndexImageContainer { height: 205px; width: 290px !important; }
        .divIndexImageContainer .divEclipseOverlay { position: absolute; right: -2px; top: 30px; }
            .divIndexImageContainer .divEclipseOverlay img { height: 100px !important; }

        .divIndexImageContainer .divEclipseReverseOverlay { position: absolute; left: -4px; top: 35px; }
            .divIndexImageContainer .divEclipseReverseOverlay img { transform: rotate(222deg); height: 100px !important; }

    .divPageBannerContainer2 { height: 240px; }

    .divPageBannerContainer { height: 200px; background-size: cover !important; }
    .divProjectDetailBannerContainer { height: 250px; background-size: contain !important; }

}

@media(max-width:320px) {
    .divIndexImageCol { padding: 0 !important; padding-left: -15px !important; padding-right: -15px !important; }
    .divFounderPicCol { padding: 0 !important; padding-left: -15px !important; padding-right: -15px !important; }

    .divIndexImageContainer { height: 180px; width: 265px !important; }
        .divIndexImageContainer .divEclipseOverlay { position: absolute; right: -4px; top: 30px; transform: rotate(10deg) }
            .divIndexImageContainer .divEclipseOverlay img { height: 100px !important; }

        .divIndexImageContainer .divEclipseReverseOverlay { position: absolute; left: -5px; top: 35px; }
            .divIndexImageContainer .divEclipseReverseOverlay img { transform: rotate(213deg); height: 100px !important; }
}