@import url(root.css);

body { 
    font-size: 18px; 
    line-height: 24px; 
    background-image: url(../images/bg-extra.png);
    background-position: center;
    background-repeat: repeat;
}
body:lang(km){ line-height: 28px; } 
.container { max-width: 1280px; padding: 0 40px; }
.container-fluid { max-width: 1500px; padding: 0 40px; }
.container-small { max-width: 900px; padding: 0 40px; }
.container-extra{ max-width: 1920px; padding: 0; }
.section{ padding: 80px 0; }



.preload::before{
    content: '';
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 99999999;
    opacity: 1;
    visibility: visible;
    background-color: rgba(var(--rgbPrimary), 1.0);
}
.preload .preload-logo{ z-index: 999999999; opacity: 1; }
.preload-logo{
    width: 400px;
    height: 400px;
    float: left;
    z-index: -1;
    top: 50%;
    left: 50%;
    opacity: 0;
    margin: -200px 0 0 -200px;
    position: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.jFadeout::before,
.jFadeout .preload-logo{
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.8s ease-in-out !important;
    -moz-transition: all 0.8s ease-in-out !important;
    -ms-transition: all 0.8s ease-in-out !important;
    -o-transition: all 0.8s ease-in-out !important;
    transition: all 0.8s ease-in-out !important; 
}



/* ==========================================================================
   --------------------------------------------------------------------------
   SECTION: HEAD
   --------------------------------------------------------------------------
   ========================================================================== */
.head{ height: 120px; }
.home .head{ height: 160px; }
.head .inner{ 
    left: 50%;
    width: 100%;
    z-index: 999;
    padding: 10px 0;
    margin-top: 0;
    position: fixed;
    max-width: 1920px;
    transform: translateX(-50%);
    background-color: rgba(var(--rgbPrimary), 1.0);
    -webkit-box-shadow: 0 1px 2px 0 rgba(var(--rgbDark), 0.1);
    -moz-box-shadow: 0 1px 2px 0 rgba(var(--rgbDark), 0.1);
    box-shadow: 0 1px 2px 0 rgba(var(--rgbDark), 0.1);
}
.head .logo { width: 240px; height: 100px; float: left; /* padding: 15px 0; */ }
.head .language { width: 60px; float: right; }
.head .mainmenu { width: calc(100% - 310px); float: left; }



/* Main Menu */
.mainmenu { padding: 25px 0;  }
.mainmenu ul.menu { float: right; margin: 0; }
.mainmenu ul.menu > li {
    float: left;
    height: 50px;
    line-height: 50px;
    list-style: none;
    position: relative; 
}
.mainmenu ul.menu > li > a{
    width: 100%;
    float: left;
    height: inherit;
    padding: 0 24px;
    line-height: inherit;
    text-transform: uppercase;
    color: #bbb;
}
.mainmenu ul.sub-menu{ top: 60px; width: 400px; left: 50%; margin-left: -200px; }
.mainmenu ul.sub-menu::before{ left: calc(50% - 15px); } 
.mainmenu ul.sub-menu li a{ font-size: 16px; padding-left: 0; position: relative; z-index: 1; color: rgba(var(--rgbContent), 1.0) !important; }
.mainmenu li:hover ul.sub-menu{ top: 50px; }
.mainmenu ul.menu > li::before{ 
    content: '';
    position: absolute;
    bottom: 5px;
    height: 2px;
    width: 0;
    left: 50%;
    border-radius: 2px;
    transform: translateX(-50%);
    background-color: rgba(var(--rgbWhite), 1.0);
}
.mainmenu ul.menu > li.current-menu-parent a,
.mainmenu ul.menu > li.current_page_item a{ color: rgba(var(--rgbWhite), 1.0); font-weight: bolder !important; }
.mainmenu ul.menu > li:hover::before{ width: 80%; }
.mainmenu ul.sub-menu li a:hover{ padding-left: 20px;  } 
.mainmenu ul.sub-menu li a:hover::before { opacity: 1; visibility: visible; }

.mainmenu ul.sub-menu li a::before {
    content: '';
    width: 100%;
    height: 30px;
    float: left;
    position: absolute;
    left: 0;
    z-index: -1;
    border-radius: 15px;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(var(--rgbPrimary), 0.1);
}



/* Language */
.language { padding: 25px 0; position: relative; }
.language::before{
    content: '';
    width: 1px;
    top: 30%;
    bottom: 30%;
    left: -5px;
    position: absolute;
    background: -moz-linear-gradient(top,  rgba(204,204,204,0) 0%, rgba(204,204,204,1) 50%, rgba(204,204,204,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(204,204,204,0) 0%,rgba(204,204,204,1) 50%,rgba(204,204,204,0) 100%);
    background: linear-gradient(to bottom,  rgba(204,204,204,0) 0%,rgba(204,204,204,1) 50%,rgba(204,204,204,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00cccccc', endColorstr='#00cccccc',GradientType=0 );
}
.language .icon{
    width: 40px;
    height: 40px;
    float: right;
    margin: 5px 0;
    border-radius: 50%;
    border: solid rgba(var(--rgbWhite), 1.0) 2px;
    background-color: rgba(var(--rgbWhite), 1.0);
    background-image: url(../images/icon-flag.svg);
    background-repeat: no-repeat;
    background-size: 36px auto;
}
.language .icon.km{ background-position: 0 0; }
.language .icon.en{ background-position: 0 -36px; }
.language .icon.zh{ background-position: 0 -72px; }
.language ul{ top: 85px; width: 160px; right: -15px; }
.language:hover ul{ top: 75px }
.language ul li{ font-size: 16px; }
.language ul li.lang-km a{ font-size: 14px; }
.language ul li.lang-km a::before{ background-position: 0 0; }
.language ul li.lang-en a::before{ background-position: 0 -30px; }
.language ul li.lang-zh a::before{ background-position: 0 -60px; }
.language ul li a::before{
    content: '';
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 10px;
    border-radius: 50%;
    background-color: gray;
    background-image: url(../images/icon-flag.svg);
    background-repeat: no-repeat;
    background-size: 30px auto;
}



.mainmenu ul.sub-menu,
.language ul.language-chooser{ 
    list-style: none; 
    position: absolute;
    padding: 15px 0 0;
    visibility: hidden;
    opacity: 0;
}
.mainmenu ul.sub-menu::before,
.language ul.language-chooser::before{
    content: '';
    position: absolute;
    width: 30px;
    height: 17px;
    right: 20px;
    top: 0;
    background-image: url(../images/bar-arrow.png);
}
.mainmenu ul.sub-menu li,
.language ul.language-chooser li{
    width: 100%;
    float: left;
    line-height: 30px;
    padding: 0 20px;
    background-color: rgba(var(--rgbWhite), 1.0);
    border-left: solid rgba(var(--rgbDark), 0.1) 1px;
    border-right: solid rgba(var(--rgbDark), 0.1) 1px;
}
.mainmenu ul.sub-menu li:first-child,
.language ul.language-chooser li:first-child{
    padding-top: 15px; 
    border-radius: 8px 8px 0 0;
    border-top: solid rgba(var(--rgbDark), 0.1) 1px;
}
.mainmenu ul.sub-menu li:last-child,
.language ul.language-chooser li:last-child{
    padding-bottom: 15px; 
    border-radius: 0 0 8px 8px;
    border-bottom: solid rgba(var(--rgbDark), 0.1) 1px;
}
.mainmenu ul.sub-menu li a,
.language ul.language-chooser li a{
    width: 100%;
    float: left;
    padding: 5px;
    color: rgba(var(--rgbContent), 1.0);
}
.mainmenu ul.sub-menu li:not(:first-child) a,
.language ul.language-chooser li:not(:first-child) a{ border-top: dashed rgba(var(--rgbDark), 0.2) 1px; }
.mainmenu li:hover ul.sub-menu,
.language:hover ul.language-chooser{ visibility: visible; opacity: 1; }


/* Tiny & Minify */
body.minify .head .mainmenu,
body.minify .head .language { padding: 10px 0; }
body.minify .head .sub-menu{ top: 75px }
body.minify .head .logo{ height: 70px; }
body:not(.tiny) .home .head .inner{
    padding: 30px 0;
    background-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


.head .inner .logo,
.head .inner .mainmenu,
.head .inner .sub-menu,
.head .inner .language,
.head .inner .language ul,
.mainmenu ul.menu > li::before,
.mainmenu ul.menu > li:hover::before,
.mainmenu ul.sub-menu li a,
.mainmenu ul.sub-menu li a:hover,
.mainmenu ul.sub-menu li a::before,
.mainmenu ul.sub-menu li a:hover::before{
    -moz-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.head .inner{
    -moz-transition: background-color .2s ease-in-out, padding .2s ease-in-out, margin-top .4s ease-in-out;
    -moz-transition: background-color .2s ease-in-out, padding .2s ease-in-out, margin-top .4s ease-in-out;
    -ms-transition: background-color .2s ease-in-out, padding .2s ease-in-out, margin-top .4s ease-in-out;
    -o-transition: background-color .2s ease-in-out, padding .2s ease-in-out, margin-top .4s ease-in-out;
    transition: background-color .2s ease-in-out, padding .2s ease-in-out, margin-top .4s ease-in-out;
}


.hamburger{
    width: 30px;
    height: 30px;
    float: right;
    position: relative;
}
.hamburger span{
  height: 3px;
  width: 100%;
  background-color: #fff;
  position: absolute;
  right: 0;
  border-radius: 3px;
}
.hamburger span:nth-child(1){ top: 4.5px; width: 50%; }
.hamburger span:nth-child(2){ top: 13.5px; }
.hamburger span:nth-child(3){ top: 22.5px; width: 70%; }
.mainmenu-inner{ display: none; }
.mm-panel{ background-color: rgba(var(--rgbExtra, 1.0)) !important; }
.mm-listitem{ padding: 5px !important; }
.mm-navbar{
    padding: 20px 0;
    font-size: 20px !important;
    color: rgba(var(--rgbContent), 1.0) !important;
    border-bottom-width: 5px !important;
    background-color: rgba(var(--rgbExtra), 1.0) !important;
}





/* ==========================================================================
   --------------------------------------------------------------------------
   SECTION: CONTENT
   --------------------------------------------------------------------------
   ========================================================================== */
.content h1.title{ margin: 0 0 20px; } 
.content h4.title{ 
    font-size: 36px;
    line-height: 36px;
    margin: 0 0 20px;
}
.content h4.title:lang(km){ font-size: 28px; }
.content .button:lang(km) { line-height: 42px; }
.content .button{
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    border: none !important;
    border-radius: 10px;
    font-size: 14px;
    display: inline-block;
    text-transform: uppercase;
    color: rgba(var(--rgbWhite), 1.0);
    background-color: rgba(var(--rgbSecondary), 1.0);
}
.banner{
    width: 100%;
    float: left;
    height: 300px;
    position: relative;
    background-image: url(../images/bg-welcome.webp);
    background-position: center;
}
.banner .inner{
    width: 100%;
    left: 0;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}
.banner .inner h3{
    font-size: 50px;
    line-height: 50px;
    color: rgba(var(--rgbPrimary), 1.0);
}
.banner .inner h3:lang(km){ font-size: 42px; }

.breadcrumb{
    width: 100%;
    float: left;
    height: 22px;
    margin: 0 !important;
    padding: 0px !important;
    border-radius: 0px;
    background-color: transparent !important;
}
.breadcrumb ul{ margin: 0px; }
.breadcrumb ul li{ list-style: none; float: left; font-size: 16px; }
.breadcrumb ul li:not(:first-child)::before{
    content: '';
    width: 1px;
    height: 22px;
    float: left;
    margin: 0 15px;
    background-color: rgba(var(--rgbDark), 0.2);
    transform: rotate(20deg);
}
.breadcrumb ul li:first-child a{
    width: 22px;
    text-indent: -99px;
    overflow: hidden;
    background-image: url(../images/icon-home.svg);
    background-position: top;
    background-repeat: no-repeat;
}
.breadcrumb ul li a{ float: left; color: rgba(var(--rgbTertiary), 1.0); }
.breadcrumb ul li span{ color: rgba(var(--rgbTertiary), 0.7); }



.controler{
    border-radius: 10px;
    margin: 20px 0 0;
    padding: 20px !important;
    border: solid rgba(var(--rgbDark), 0.1) 1px;
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(245,245,245,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(245,245,245,1) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(245,245,245,1) 100%);
}
.controler .share{ float: right; padding: 33px 0; }
.controler .share span{ float: left; line-height: 34px; }
.controler .share span:lang(km){ font-size: 14px; line-height: 36px; }


.jShare{ float: left; padding-left: 10px; }
.jShare i.fb{ background-position: 0 0; }
.jShare i.tt{ background-position: 0 -68px;  }
.jShare i.in{ background-position: 0 -136px;  }
.jShare i{
    width: 34px;
    height: 34px;
    float: left;
    margin: 0 0 0 5px;
    cursor: pointer;
    background-image: url(../images/icon-social.svg);
    background-repeat: no-repeat;
    background-size: 34px auto;
}


.jQRCode{ width: 260px; float: left; }
.jQRCode .thumb{ width: 100px; height: 100px; float: left; overflow: hidden; }
.jQRCode .thumb img{
    width: 120px;
    height: 120px;
    margin: -10px;
    max-width: 120px !important;
    max-height: 120px !important;
}
.jQRCode .desc:lang(km){ font-size: 14px; line-height: 22px; }
.jQRCode .desc{
    float: left;
    width: calc(100% - 100px);
    padding: 28px 0 0 10px;
    line-height: 18px;
    font-size: 16px;
}



.jSlick .slick-slide{ position: relative; }
.jSlick .slick-dots,
.jSlick .slick-arrow{ z-index: 2; position: absolute; }
.jSlick .slick-arrow{
    right: 15px !important;
    width: 28px;
    height: 28px;
    border: none;
    bottom: 15px;
    overflow: hidden;
    text-indent: -999px;
    border-radius: 50%;
    background-size: 20%;
    background-color: rgba(var(--rgbWhite), 1.0);
    background-image: url(../images/icon-arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
}
.jSlick .slick-arrow.slick-prev{ right: 48px !important; }
.jSlick .slick-arrow.slick-next{ transform: rotate(-180deg); }
.jSlick .slick-dots{ list-style: none; left: 15px; margin: 0px !important; }
.jSlick .slick-dots li{ float: left; line-height: 0; height: 5px; }
.jSlick .slick-dots li:only-child{ display: none !important; }
.jSlick .slick-dots li button{
    width: 5px;
    height: inherit;
    border: none;
    margin: 0 2px;
    overflow: hidden;
    border-radius: 5px;
    text-indent: -999px;
    background-color: rgba(var(--rgbWhite), 0.5);
}
.jSlick .slick-dots li.slick-active button{
    width: 15px;
    cursor: default !important;
    background-color: rgba(var(--rgbWhite), 1.0);
}
.jSlick .slick-dots li button,
.jSlick .slick-dots li.slick-active button{
    -moz-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}



.jVideo, .jVideo .list{ overflow: hidden; position: relative; margin-bottom: 0px !important; }
.jVideo .play:hover{ transform: translateX(-50%) translateY(-50%) scale(1.2); }
.jVideo .slick-dots{ top: 15px; }
.jVideo img{ width: 100%; }
.jVideo .desc{
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 50%;
    z-index: 2;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    text-align: left;
    color: rgba(var(--rgbWhite), 1.0);
}
.jVideo .list::before{
    content: '';
    width: 100%;
    bottom: 0;
    top: 0;
    left: 0;
    z-index: 1;
    position: absolute;
    background-color: rgba(var(--rgbDark), 0.3);
}
.jVideo .play{
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 9999;
    top: 50%;
    left: 50%;
    overflow: hidden;
    text-indent: -999px;
    border-radius: 50%;
    opacity: 0.85;
    background-size: 100%;
    background-image: url(../images/icon-play.svg);
    transform: translateX(-50%) translateY(-50%);
}

.jVideo .play,
.jVideo .play:hover{
    -moz-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}



.jShadow{ z-index: 1; position: relative; }
.jShadow::after{
    content: '';
    width: 100%;
    float: left;
    height: 150px;
    position: absolute;
    top: 100%;
    left: 0;
    background-image: url(../images/bg-shadow.webp);
    background-position: top center;
    background-repeat: no-repeat;
}
.jOverlay{
    top: 40%;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,78,133,0.3) 50%, rgba(0,67,133,0.9) 90%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,78,133,0.3) 50%, rgba(0,67,133,0.9) 90%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,78,133,0.3) 50%, rgba(0,67,133,0.9) 90%);
}



.jZoom:hover{ z-index: 9; transform: scale(1.05); }
.jZoom, .jZoom:hover{
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


.social ul{ margin: 0px; }
.social ul li{
    width: 40px;
    height: 40px;
    float: left;
    list-style: none;
    margin: 0 3px;
}
.social ul li a{
    width: 100%; 
    height: 100%; 
    float: left; 
    background-image: url(../images/tools.svg);
    background-repeat: no-repeat;
    background-size: 500%;
    border-radius: 50%;
}




.alm-load-more-btn{
    background-color: rgba(var(--rgbSecondary), 1.0) !important;
    border-radius: 10px !important;
    padding: 0 30px !important;
}
.alm-listing{ margin-left: -15px !important; margin-right: -15px !important; }
.alm-load-more-btn.loading{ padding-left: 64px !important; }
.alm-load-more-btn.loading::before{
    width: 30px;
    left: 20px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    background-size: 80% !important;
    background-image: url(../images/ajax-loader.gif) !important;
}


.fancybox-caption__body h5{ line-height: 30px !important; }
.fancybox-slide--video .fancybox-content,
.fancybox-slide--iframe .fancybox-content {
    margin: 0 !important;
    max-width: 2400px !important;
    max-height: 1350px !important;
    background-color: transparent !important;
}

.quick-contact{ 
    padding: 0 !important; 
    overflow: hidden;
    border-top: solid rgba(var(--rgbDark), 0.1) 1px; 
    border-bottom: solid rgba(var(--rgbDark), 0.1) 1px; 
    background-color: rgba(var(--rgbWhite),1.0);
}
.quick-contact .container{ position: static !important; }
.quick-contact .container a{ color: rgba(var(--rgbContent),1.0) !important; }
.quick-contact .phone, .quick-contact .address{ padding: 50px 45px; position: relative; }
.quick-contact .phone::before{ right: 0; background-image: url(../images/bg-stripes.webp); }
.quick-contact .phone::before,
.quick-contact .address::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 1920px;
    top: 0;
    z-index: 0;
}
.quick-contact .address::before{
    left: 0;
    background-color: rgba(var(--rgbSecondary), 0.2);
    background-image: url(../images/bg-global.webp);
    background-position: left center;
    background-size: auto 200%;
    background-repeat: no-repeat;
}
.quick-contact .description{
    width: calc(100% - 200px);
    position: absolute;
    top: 50%;
    left: 170px;
    transform: translateY(-50%);
}
.quick-contact .address .description{ left: 140px; }
.quick-contact .address .description p{ font-size: 20px; max-width: 70%; margin-bottom: 0; }
.quick-contact .address .description p:lang(km){ font-size: 18px; line-height: 28px; }
.quick-contact .description span{ width: 100%; float: left; font-size: 30px; }
.quick-contact .description span+span{ font-size: 25px; margin-top: 15px; }
.quick-contact .phone .icon{ background-image: url(../images/icon-quick-contact.png); }
.quick-contact .address .icon{ background-image: url(../images/icon-quick-location.svg); }
.quick-contact .icon{
    width: 100px;
    height: 100px;
    float: left;
    z-index: 1;
    position: relative;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: auto 100%;
}


.video-list:empty{ display: none; }




/* ==========================================================================
   --------------------------------------------------------------------------
   SECTION: FOOT
   --------------------------------------------------------------------------
   ========================================================================== */
.foot .quicklink { width: 340px; float: left; }
.foot .contact { width: 330px; float: left; }
.foot .overview { width: calc(100% - 670px); float: right; }
.foot .copyright { width: 100%; float: left; }
.foot .inner {
    font-size: 15px;
    line-height: 20px;
    color: rgba(var(--rgbWhite), 1.0);
    background-color: rgba(var(--rgbPrimary), 1.0);
    border-top: solid rgba(var(--rgbSecondary), 1.0) 15px;
    border-bottom: solid rgba(var(--rgbSecondary), 1.0) 10px;
}
.foot .inner .title { 
    font-size: 28px; 
    position: relative; 
    text-transform: uppercase; 
    margin: 0 0 25px;
}
.foot .inner .title:lang(km){ font-size: 24px; }
.foot .inner .title:lang(km)::before{ bottom: -6px; }
.foot .inner .title::before {
    content: ''; 
    width: 150px;
    height: 2px;
    float: left;
    bottom: -4px;
    position: absolute;
    background-color: rgba(var(--rgbWhite), 1.0);
    background-image: url(../images/bar-title.png);
}

/* Overview */
.foot .overview { text-align: left; line-height: 24px; }
.foot .overview img { margin-bottom: 20px;  max-height: 95px;/* max-height: 80px; */ }

/* Quicklink */
.foot .quicklink { padding: 40px 40px 0 0; }
.foot .quicklink ul { color: rgba(var(--rgbWhite), 0.4); }
.foot .quicklink ul li { margin: 0 0 0 15px; }
.foot .quicklink ul li a { color: rgba(var(--rgbWhite), 1.0); }
.foot .quicklink ul li:lang(km){ margin: 0 0 8px 12px; font-size: 15px; }

/* Contact */
.foot .contact { padding: 40px 40px 0 0; }
.foot .contact ul { list-style: none; }
.foot .contact ul li { position: relative; padding: 3px 0 0 36px; margin: 0 0 10px; }
.foot .contact ul li:lang(km){ font-size: 15px; line-height: 24px; padding-right: 0;}
.foot .contact ul li a{ color: rgba(var(--rgbWhite), 1.0); }
.foot .contact ul li.address::before{ background-image: url(../images/icon-location.svg); }
.foot .contact ul li.phone::before{ background-image: url(../images/icon-phone.svg); }
.foot .contact ul li.email::before{ background-image: url(../images/icon-email.svg); }
.foot .contact ul li.website::before{ background-image: url(../images/icon-website.svg); }
.foot .contact ul li::before {
    content: ''; 
    width: 28px;
    height: 28px;
    float: left;
    left: 0;
    top: 0;
    position: absolute;
    border-radius: 50%;
    background-color: rgba(var(--rgbWhite), 1.0);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Social */
.foot .social{
    position: absolute;
    height: 60px;
    bottom: -60px;
    right: 30px;
    z-index: 2;
    background-color: rgba(var(--rgbSecondary), 1.0);
}
.foot .social ul li.facebook a{ background-position: -40px 0; }
.foot .social ul li.youtube a{ background-position: -40px -40px; }
.foot .social ul li.telegram a{ background-position: -40px -80px; }
.foot .social ul li.twitter a{ background-position: -40px -120px; }
.foot .social ul li.linkedin a{ background-position: -40px -160px; }
.foot .social ul li.instagram a{ background-position: -40px -200px; }
.foot .social::before, .foot .social::after{
    content: '';
    position: absolute;
    width: 60px;
    height: inherit;
    bottom: 0;
    z-index: 1;
    background-color: rgba(var(--rgbPrimary), 1.0);
    background-image: url(../images/bg-social.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
}
.foot .social::before{ left: -60px; }
.foot .social::after{ right: -60px; transform: scaleX(-1); }
.foot .social ul{ margin: 15px 0 0; }
.foot .social ul li{ position: relative; } 
.foot .social ul li a{ filter: brightness(0) invert(1); } 
.foot .social ul li::before{
    content: '';
    width: 42px;
    height: 42px;
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: -1;
    border-radius: 50%; opacity: 0;
    background-color: #fff;
}
.foot .social ul li:hover::before{ opacity: 1; }
.foot .social ul li:hover{
    transform: rotate(1turn);
    border-radius: 50%;
    background-color: rgba(var(--rgbWhite), 1.0);
}
.foot .social ul li:hover a{ filter: none !important;   }
.foot .social ul li a,
.foot .social ul li:hover a{
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;   
}
.foot .social ul li::before,
.foot .social ul li:hover::before{
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;   
}



/* Copyright */
.foot .copyright {
    height: 60px;
    line-height: 60px;
    position: relative;
    font-size: 14px;
    border-top: solid rgba(var(--rgbSecondary), 1.0) 1px;
}



#clickmeup {
    width: 50px;
    height: 70px;
    float: left;
    position: fixed;
    right: 50%;
    bottom: 60px;
    z-index: 9;
    cursor: pointer;
    border-radius: 25px;
    overflow: hidden;
    background-color: rgba(var(--rgbSecondary), 1.0);
    background-image: url(../images/swipe-up.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#clickmeup.show { bottom: 90px; }







/*
*   Screen: Extra large (col-xl-)
*   Description: large desktops, 1200px and up
*/
@media (min-width: 1200px) {
 
    /* Head */
    .head .hamburger{ display: none !important; }

    /* Foot */
    .foot .overview { text-align: right; }
    #clickmeup { margin-right: -720px; }
    #clickmeup.show { opacity: 1; visibility: visible; }

}


/*
*   Screen: Large (col-lg-)
*   Description: desktops, 992px and up
*/
@media (min-width: 992px) and (max-width: 1199.98px) { 

    #clickmeup { margin-right: -550px; }
     #clickmeup.show { opacity: 1; visibility: visible; }


    /* Head */
    .minify .head .inner{ top: -100px }
    .head{ height: 100px; }
    .head .logo{ height: 80px; }
    .head .mainmenu, .head .language{ padding: 15px 0; }
    .head .mainmenu ul.menu > li > a{ padding: 0 16px; font-size: 16px; }
    .head .language ul{ top: 75px }
    .head .language:hover ul{ top: 65px }
    .head .hamburger{ display: none !important; }

    /* Content */
    .content h1.title{ font-size: 32px; line-height: 32px; }
    .content h4.title{ font-size: 30px; line-height: 30px; }
    .banner .inner h3{ font-size: 48px; line-height: 48px; }
    .breadcrumb ul li:not(:first-child)::before{ margin: 0 13px; }

    /* Foot */
    .foot .overview{ width: 100%; padding: 0 100px 40px 0; }
    .foot .quicklink{ width: 270px; padding: 10px 80px 0 0; }
    .foot .contact{ width: calc(100% - 500px); padding: 10px 0 0; }


    .quick-contact .phone, .quick-contact .address{ padding: 35px!important; }
    .quick-contact .icon{ width: 80px !important; height: 80px !important; }
    .quick-contact .description{ width: calc(100% - 150px) !important; left: 140px !important; }
    .quick-contact .address .description{ left: 120px !important; }
    .quick-contact .description span{ font-size: 24px !important; }
    .quick-contact .description span + span{ margin-top: 5px !important; font-size: 20px !important; }
    .quick-contact .address .description p{ max-width: 90% !important; }

    /* */
    .news-event .row{ margin-left: -8px !important; margin-right: -8px !important;}
    .news-event .list{ padding: 0 8px !important; }
    .news-event .description h3, 
    .news-event .description h3 a{ font-size: 20px !important; padding-right: 15px !important; }

    /* About Us */
    .vision p{ font-size: 26px !important; line-height: 28px !important; padding: 60px 50px !important }
    .vision p::before, .vision p::after{ width: 40px !important; height: 36px !important; }
    .mission-core-value .icon{ margin-bottom: 0px !important; width: 160px !important; height: 160px !important; }
    .mission-core-value .desc{ width: calc(100% - 160px) !important; padding-left: 20px !important; }
    .mission-core-value p{ font-size: 17px; line-height: 18px; }
    .mission{ margin-bottom: 20px !important; }
    .message .thumbnail{ width: 35% !important; }
    .message .description{ width: calc(65% + 40px) !important; }
    .career .promote{ width: 320px !important; }
    .career .career-list, .career .career-detail{ width: calc(100% - 320px) !important; }
    .career .career-list .job:not(:first-child){ padding: 40px 0 !important; }
    .career .career-list .job{ padding: 0 0 40px !important; }
    
}


/*
*   Screen: Medium (col-md-)
*   Description: tablets, 768px and up
*/
@media (min-width: 768px) and (max-width: 991.98px) { 


    .container { padding: 0 25px; }

    /* Head */
    .minify .head .inner{ top: -80px }
    .head{ height: 80px; }
    .head .logo{ width: 170px; height: 60px !important; }
    .head .mainmenu { width: calc(100% - 240px); }
    .head .mainmenu #menu-main-menu{ display: none !important; }
    .head .mainmenu .hamburger{ margin: 10px 0 !important; }
    .head .mainmenu, .head .language{ padding: 5px 0 !important; }
    .head .mainmenu ul.menu > li > a{ padding: 0 8px; }
    .head .language{ width: 50px !important; }
    .head .language ul{ top: 65px; }
    .head .language:hover ul{ top: 55px }
    

    /* Content */
    .content h1.title{ font-size: 32px; line-height: 32px; }
    .content h4.title{ font-size: 28px; line-height: 28px; }
    .banner .inner h3{ font-size: 44px; line-height: 44px; }
    .breadcrumb ul li:not(:first-child)::before{ margin: 0 12px; }

    /* Foot */
    .foot .overview{ width: 100%; }
    .foot .overview img { max-height: 100px; }
    .foot .quicklink{ width: 270px;  }
    .foot .contact{ width: calc(100% - 320px);  } 
    .foot .social{ right: 40px; }

    /* Home */
    .herobanner .tp-caption{ width: 760px !important; }
    .content h3.title{ font-size: 30px !important; margin: 0 0 25px !important; line-height: 32px !important; }
    .project .list:nth-child(1){ width: 31% !important; }
    .project .list:nth-child(2){ width: 69% !important; }
    .project .list:nth-child(3){ width: 50% !important; clear: both;  }
    .project .list:nth-child(4){ width: 50% !important; }
    .project .list:nth-child(2) .inner{ overflow: visible !important; }
    .project .list:nth-child(2) .inner::after{
        content: '';
        width: 100%;
        height: 10px;
        float: right;
        position: absolute;
        bottom: -5px;
        left: 0;
        background-color: rgba(var(--rgbPrimary), 1.0); 
    }
    .project .list .desc{ left: 20px !important; bottom: 10px !important;}
    .project .list .desc h3{ font-size: 18px !important; line-height: 22px !important; }
    .project .list:nth-child(2) .desc{ bottom: 5px !important; }
    .news-event .list:not(:first-child){ margin-top: 15px !important; }
    .news-event .thumbnail{ width: 46% !important; float: left; }
    .news-event .description{ width: 54% !important; float: left; padding: 30px !important; }
    .news-event .description h3, .news-event .description h3 a{ padding: 0 20px 0 0 !important; } 
    .mobile-app .inner .thumbnail{ width: 180px !important; }
    .mobile-app .inner .description{ width: calc(100% - 180px) !important;}
    .mobile-app .inner .description p{ font-size: 18px !important; line-height: 22px !important;}
    .quick-contact .phone::before{ right: -20px !important; }
    .quick-contact .address::before{ left: -20px !important; }


    /* About Us */
    .vision-mission-core-value{ overflow: hidden; padding-bottom: 50px !important; }
    .vision-mission-core-value .inner{ border-top: none !important; }
    .vision-mission-core-value .inner .row{ margin: 0 -25px !important; }
    .vision{ padding: 80px 25px 30px !important; }
    .vision p{ font-size: 26px !important; line-height: 28px !important; padding: 60px 50px !important }
    .vision p::before, .vision p::after{ width: 40px !important; height: 36px !important; }
    .mission-core-value{ padding: 0 55px !important; }
    .mission-core-value .icon{ margin-bottom: 0px !important; width: 160px !important; height: 160px !important; }
    .mission, .core-value{ padding: 30px 0 !important; border-top: solid rgba(var(--rgbDark), 0.1) 1px; }
    .key-success{ height: 320px !important; }
    .key-success .inner .description{ margin-left: 30px !important; }
    .key-success .inner .description li{ font-size: 16px !important; line-height: 18px !important; }
    .message .thumbnail{ width: 40% !important; }
    .message .description{ width: calc(60% + 40px) !important; }
    .career .promote{ display: none; }
    .career .career-list, .career .career-detail{ width: 100% !important; padding-right: 0px !important; }
    .career .career-list .job:not(:first-child){ padding: 28px 0 30px !important; }
    .career .career-list .job{ padding: 0 0 30px !important; }
    .submition h3{ font-size: 32px !important; } 


    /* Project */
    .videos .video-list,
    .videos .description{ width: 70% !important; margin: 0 15% !important; text-align: center; height: auto !important; }
    .videos .description .inner{ padding: 0px !important; position: static !important; transform: translateY(0) !important;}
    .unit-type .inner{ position: relative !important;}
    .unit-type .list{ margin: 5px 0 !important; }
    .unit-type .thumbnail{ width: 46% !important;}
    .unit-type .description{ width: 54% !important; } 
    .unit-type ul{ width: 54% !important; position: absolute; right: 0; bottom: 0;} 
    .features ul li{ width: 50% !important; }
}


/*
*   Screen: Small (col-sm-)
*   Description: landscape phones, 576px and up
*/
@media (min-width: 576px) and (max-width: 767.98px) { 
    

    .container { padding: 0 25px; }
    .section{ padding: 50px 0; }

    /* Head */
    .minify .head .inner{ top: -70px }
    .head{ height: 70px; }
    .head .inner{ padding: 10px 0 !important;  }
    .head .logo{ width: 120px; height: 50px !important; }
    .head .mainmenu { width: calc(100% - 190px); padding: 0 !important; }
    .head .mainmenu #menu-main-menu{ display: none !important; }
    .head .mainmenu .hamburger{ margin: 10px 0 !important; }
    .head .language{ padding: 0 !important; width: 50px !important; }
    .head .language ul{ top: 55px }
    .head .language:hover ul{ top: 45px }
    

    /* Content */
    .banner{ height: 240px; }
    .banner .inner h3{ font-size: 32px; line-height: 32px; }
    .breadcrumb ul li:not(:first-child)::before{ margin: 0 12px; }
    .quick-contact .phone::before,
    .quick-contact .address::before{ left: -30px !important; right: -30px !important; }
    .quick-contact .description{ left: 170px !important;width: calc(100% - 200px) !important; }
    .quick-contact .icon{ background-position: center !important; }
    .jVideo .play{ width: 60px !important; height: 60px !important; }
    .jVideo .desc{ width: 70%; left: 20px; bottom: 20px; font-size: 16px; line-height: 20px; }

    /* Foot */
    .foot .overview { width: 100%; }
    .foot .overview img { max-height: 100px; }
    .foot .quicklink { display: none; }
    .foot .contact { width: 80%; padding: 40px 0 0; }
    .foot .social {
        bottom: -120px !important;
        right: 50% !important;
        transform: translateX(50%) !important;
    } 
    .foot .copyright { 
        font-size: 80%; 
        text-align: center;
        padding-bottom: 119px !important;
    }

    /* Home */
    .herobanner .tp-caption{ width: 580px !important; }
    .content h3.title{ font-size: 30px !important; margin: 0 0 15px !important; line-height: 32px !important; }
    .project .list{ width: 100% !important; }
    .news-event .list:not(:first-child){ margin-top: 15px !important; }
    .news-event .thumbnail{ width: 46% !important; float: left; }
    .news-event .description{ width: 54% !important; float: left; padding: 30px !important; }
    .news-event .description h3, .news-event .description h3 a{ padding: 0 20px 0 0 !important; } 

    /* About Us */
    .vision-mission-core-value{ overflow: hidden; padding-bottom: 50px !important; }
    .vision-mission-core-value .inner{ border-top: none !important; }
    .vision-mission-core-value .inner .row{ margin: 0 -25px !important; }
    .vision{ padding: 50px 25px 30px !important; }
    .vision p{ font-size: 26px !important; line-height: 28px !important; padding: 60px 50px !important }
    .vision p::before, .vision p::after{ width: 40px !important; height: 36px !important; }
    .mission-core-value{ padding: 0 55px !important; }
    .mission-core-value .icon{ margin-bottom: 0px !important; width: 160px !important; height: 160px !important; }
    .mission, .core-value{ padding: 30px 0 !important; border-top: solid rgba(var(--rgbDark), 0.1) 1px; }
    .key-success{ height: 320px !important; }
    .key-success .inner .description{ margin-left: 30px !important; }
    .key-success .inner .description li{ font-size: 16px !important; line-height: 18px !important; }
    .message .thumbnail{ width: 50% !important; margin: 40px 0 -40px 80px !important; }
    .message .description{  
        padding: 80px 55px 65px !important;
        background: rgb(238,238,238);
        background: -moz-linear-gradient(65deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%) !important;
        background: -webkit-linear-gradient(65deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%) !important;
        background: linear-gradient(65deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%) !important;
        margin: 0 -25px !important;
        width: calc(100% + 50px) !important;
    }
    .career .promote{ display: none; }
    .career .career-list, .career .career-detail{ width: 100% !important; padding-right: 0px !important; }
    .career .career-list .job:not(:first-child){ padding: 28px 0 30px !important; }
    .career .career-list .job{ padding: 0 0 30px !important; }
    .submition h3{ font-size: 28px !important; }
    .jQRCode{ display: none !important; }


    /* Project */
    .videos{ padding: 80px 0 !important; }
    .videos .video-list,
    .videos .description{ width: 70% !important; margin: 0 15% !important; text-align: center; height: auto !important; }
    .videos .description .inner{ padding: 0px !important; position: static !important; transform: translateY(0) !important;}
    .videos .description .inner h3{ font-size: 32px !important; line-height: 34px !important; }
    .videos .description .inner h3:lang(km){ font-size: 26px; }
    .features ul li{ width: 50% !important; }
    .features-galleries .row{ margin: 0 -25px !important; padding: 0 25px !important; }
    .features-galleries .features{ padding: 50px 15px !important; }
    .features-galleries .galleries{ padding: 50px 15px !important; margin-bottom: 40px !important; background: transparent !important; }
    .features-galleries .galleries h4{ position: relative; z-index: 2; }
    .features-galleries .galleries::before{
        content: '';
        height: 100%;
        left: -25px;
        right: -25px;
        top: 0;
        z-index: 0;
        position: absolute;
        background: rgb(238,238,238);
        background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%);
        background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%);
        background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%);
    }
    .overview ul li{ width: 100px !important; height: 100px !important;}
    .overview .controler{
        width: 100% !important;
        margin: 40px 0 -30px !important;
        border-top: solid rgba(var(--rgbDark), 0.1) 1px !important;
    }

}


/*
*   Screen: Extra small (col-)
*   Description: portrait phones, less than 576px
*/
@media (max-width: 575.98px) { 

    body { font-size: 16px; line-height: 20px;  }
    body:lang(km) { font-size: 15px; line-height: 25px;  }
    .container { padding: 0 25px; }
    .section{ padding: 50px 0; }
    .preload-logo{
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
    }


    /* Head */
    .minify .head .inner{ margin-top: -60px }
    .head{ height: 60px !important; }
    .head .inner{ padding: 10px 0 !important; }
    .head .logo{ width: 120px; height: 40px !important; padding: 5px 0 !important; }
    .head .mainmenu{ float: right !important; padding: 5px 0 !important; width: 40px !important; }
    .head .mainmenu #menu-main-menu{ display: none !important; }
    .head .language{ width: 40px; padding: 0 !important }
    .head .language::before{ right: 0 !important; left: auto !important; }
    .head .language .icon{ height: 30px; width: 30px; background-size: 29px auto; border-width: 1px; float: left; }
    .head .language .icon.km{ background-position: 0 0; }
    .head .language .icon.en{ background-position: 0 -29px; }
    .head .language .icon.zh{ background-position: 0 -58px; }
    .head .language ul{ top: 45px !important; right: -10px !important;}
    
    /* Content */
    .content h1.title{ font-size: 28px; line-height: 28px; } 
    .content h4.title{ font-size: 26px; line-height: 26px; }
    .content h4.title:lang(km){ font-size: 22px; line-height: 32px; }
    .content .button{ height: 30px !important; line-height: 30px !important; }
    .banner{ height: 160px; }
    .banner .inner h3{ font-size: 24px; line-height: 24px; }
    .banner .inner h3:lang(km){ font-size: 24px; line-height: 24px; }
    .breadcrumb ul li{ font-size: 13px; }
    .breadcrumb ul li:not(:first-child)::before{ margin: 0 8px; height: 18px; }
    .breadcrumb ul li:first-child a{ width: 18px; }
    .jShadow::after{ background-size: 150% auto !important; }
    .jVideo .play{ width: 50px !important; height: 50px !important; }
    .jVideo .desc{ width: 70%; left: 20px; bottom: 20px; font-size: 14px; line-height: 16px; }
    
    
    /* Foot */
    .foot .overview { width: 100%; }
    .foot .overview img { max-height: 60px; }
    .foot .quicklink { display: none; }
    .foot .contact { width: 100%; padding: 40px 0 0; }
    .foot .copyright { font-size: 70%; text-align: center; padding-bottom: 119px !important; }
    .foot .social{ bottom: -120px !important; right: 50% !important; transform: translateX(50%) !important; }
    .foot .social ul{ margin: 20px 0 !important;}
    .social ul li{ width: 28px; height: 28px; }
    .social ul li::before{ width: 30px !important; height: 30px !important; }
    .social ul li.facebook a{ background-position: -28px 0 !important;}
    .social ul li.youtube a{ background-position: -28px -28px !important; }
    .social ul li.telegram a{ background-position: -28px -56px !important; }
    .social ul li.twitter a{ background-position: -28px -56px !important; }
    .social ul li.instagram a{ background-position: -28px -84px !important; }
    .social ul li.linkedin a{ background-position: -28px -112px !important; }
    

    /* Home */
    .herobanner .tp-caption{ width: 360px !important; }
    .jFlash .caption{ width: 70% !important; margin: 20px 15% 0 !important; font-size: 14px !important; }
    .content h3.title{ font-size: 24px !important; margin: 0 0 15px !important; line-height: 26px !important; }
    .project .list{ width: 100% !important; }
    .news-event .upcoming .description p{ font-size: 16px !important; margin-bottom: 0px !important; }
    .news-event-list .list{ margin: 0 0 15px !important; }
    .news-event-list .thumbnail{ width: 40% !important; float: left; }
    .news-event-list .description{ width: 60% !important; float: left; padding: 10px 0 0 15px !important; }
    .news-event-list .description h3, .news-event .description h3 a{ padding: 0 10px 0 0 !important; font-size: 16px !important; line-height: 18px !important; } 
    .mobile-app{ height: auto !important; }
    .mobile-app .inner .thumbnail{ display: none !important;}
    .mobile-app .inner .description p{ font-size: 18px !important; line-height: 22px !important; } 
    .mobile-app .inner .link{ float: none !important; margin: 0 auto !important; }
    .mobile-app .inner{ 
        left: 0 !important;
        top: 0 !important;
        position: relative !important;
        max-width: 100% !important;
        transform: translateX(0) translateY(0) !important;
    }
    .mobile-app .inner .description{ 
        width: 100% !important; 
        float: left !important; 
        position: relative !important;
        transform: translateY(0) !important;
        text-align: center;
        top: 0 !important;
        padding: 0 50px !important;
    }

    .quick-contact .phone::before,
    .quick-contact .address::before{left: -30px; right: -30px; }
    .quick-contact .icon{ width: 50px; height: 50px; background-position: center !important; }
    .quick-contact .description{ width: calc(100% - 130px) !important; left: 110px !important; }
    .quick-contact .description span{ font-size: 22px; }
    .quick-contact .description span+span{ font-size: 18px; margin-top: 5px; }
    .quick-contact .address .description p{ font-size: 18px; max-width: 100%; margin-bottom: 0; }
    .quick-contact .address .description p:lang(km){ font-size: 16px; line-height: 22px; }

    

    /* About Us */
    .vision-mission-core-value{ overflow: hidden; padding-bottom: 20px !important; }
    .vision-mission-core-value .inner{ border-top: none !important; }
    .vision-mission-core-value .inner .row{ margin: 0 -25px !important; }
    .vision{ padding: 50px 25px 30px !important; }
    .vision p{ font-size: 26px !important; line-height: 26px !important; padding: 60px 30px !important }
    .vision p:lang(km){ font-size: 26px !important; line-height: 38px !important;} 
    .vision p::before, .vision p::after{ width: 40px !important; height: 36px !important; }
    .mission-core-value{ padding: 0 55px !important; }
    .mission-core-value .icon{ margin-bottom: 0px !important; width: 100px !important; height: 100px !important; }
    .mission-core-value .desc{ width: 100% !important; padding-left: 0 !important; margin-bottom: 0px !important; }
    .mission, .core-value{ padding: 30px 0 !important; border-top: solid rgba(var(--rgbDark), 0.1) 1px; }
    .key-success{ height: 320px !important; background-position: left -100px center !important; }
    .key-success .inner .description{ margin-left: 10px !important; }
    .message .thumbnail{ width: 60% !important; margin: 40px 20% -40px !important; }
    .message .description{  
        padding: 80px 25px 65px !important;
        background: rgb(238,238,238);
        background: -moz-linear-gradient(65deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%) !important;
        background: -webkit-linear-gradient(65deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%) !important;
        background: linear-gradient(65deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%) !important;
        margin: 0 -25px !important;
        width: calc(100% + 50px) !important;
    }
    .career .promote{ display: none; }
    .career .career-detail{ width: 100% !important; padding: 50px 0 !important; }
    .career .career-detail h1{ margin-bottom: 0px }
    .career .career-list{ width: 100% !important; padding: 50px 15px !important; }
    .career .career-list .job:not(:first-child){ padding: 28px 0 30px !important; }
    .career .career-list .job{ padding: 0 0 30px !important; }
    .career .career-list .job h4 { margin-bottom: 0 !important; }
    .career .career-list .job h4 a{ font-size: 24px !important; }
    .career .career-detail h4{ font-size: 20px !important; line-height: 20px !important; }
    .career .jlist ul li span:first-child{ width: 100px !important; }
    .career .jlist ul li span:last-child{ width: calc(100% - 100px) !important; padding-left: 10px !important; }
    .career .jlist ul li span:last-child::before{ margin-left: -10px !important; }
    .submition h3{ font-size: 22px !important; }
    .jQRCode{ display: none !important; }
    .controler .share{ padding: 0 !important; }

    

    /* News & Events */
    .news-event .news-event-detail{ width: 100% !important; padding-right: 0px !important; }
    .news-event .overview h1 { font-size: 24px !important; line-height: 26px !important; }
    .news-event .published .calender{ font-size: 12px !important; }
    .news-event .related{ width: calc(100% + 50px) !important; padding: 50px 25px !important; margin: 0 -25px !important; }

    /* Project */
    .videos{ padding: 80px 0 !important; }
    .videos .video-list,
    .videos .description{ width: 90% !important; margin: 0 5% !important; text-align: center; height: auto !important; }
    .videos .description .inner{ padding: 0px !important; position: static !important; transform: translateY(0) !important;}
    .videos .description .inner h3{ font-size: 32px !important; line-height: 34px !important; }
    .videos .description .inner h3:lang(km){ font-size: 26px; }
    .features-galleries .row{ margin: 0 -25px !important; padding: 0 25px !important; }
    .features-galleries .features{ padding: 50px 15px !important; }
    .features-galleries .galleries{ padding: 50px 15px !important; margin-bottom: 40px !important; background: transparent !important; }
    .features-galleries .galleries h4{ position: relative; z-index: 2; }
    .features-galleries .galleries::before{
        content: '';
        height: 100%;
        left: -25px;
        right: -25px;
        top: 0;
        z-index: 0;
        position: absolute;
        background: rgb(238,238,238);
        background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%);
        background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%);
        background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 55%,rgba(238,238,238,1) 100%);
    }
    .overview ul li{ width: 100px !important; height: 100px !important;}
    .overview .controler{
        width: 100% !important;
        margin: 40px 0 -30px !important;
        border-top: solid rgba(var(--rgbDark), 0.1) 1px !important;
    }


    /* Contact Us */
    .contact-us .overview .list{ padding: 0 15px 30px !important; border-right: none !important; }
    .contact-us .overview ul li{ width: 100% !important; height: auto !important; }
    .contact-us .overview .list h5{ margin: 0 0 15px !important; }
    .contact-us .follow .social ul li.facebook a{ background-position: -40px 0 !important;}
    .contact-us .follow .social ul li.youtube a{ background-position: -40px -40px !important; }
    .contact-us .follow .social ul li.telegram a{ background-position: -40px -80px !important; }
    .contact-us .follow .social ul li.twitter a{ background-position: -40px -80px !important; }
    .contact-us .follow .social ul li.instagram a{ background-position: -40px -120px !important; }
    .contact-us .follow .social ul li.linkedin a{ background-position: -40px -160px !important; }
    .contact-us .follow .social ul li a{ background-size: 500% !important; }
    .contact-us .follow .social ul li{
        width: 40px !important;
        height: 40px !important;
        margin: 0 3px !important;
        
    }
}