/* @import url("fonts/fonts.css"); */
/* 
/
/
/
*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--primary);
}
ul li.rln{border-right: 1px solid #60648b;}
.slide-box{
    position:absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    margin: 0 auto;
}
.btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);}

.slide-box-item{
    position:relative;
    width: 100%;
    margin: 0 auto;
    background-color:#8f8f8f08;
    background-image: linear-gradient(45deg, #1d234fdb, #cde2fe05);
    backdrop-filter: blur(5px);
}
.slick-prev{left: -6px;}
.slick-right{right:-10px;}
.slick-prev::before, .slick-next::before {
  font-family: 'slick';
  font-size: 2.8rem;
  line-height: 1;
  opacity: .75;
  color: rgb(233, 233, 233);
}
.slide-cont{
    padding: 20px 8%;
}
.slide-cont .title{
  font-family: 'Lagu-Sans-Bold', sans-serif;
    font-size: clamp(1.2rem, 3vw, 2.1rem);
    line-height: 1.1;
}
.slide-cont .caption{
    font-size: clamp(0.8rem, 1.2vw, 1.2rem);
}
.slide-bg-box{
    height: 350px;
    width:100%;
    background-size: cover;
    background-position: center;
}

.cta-btn{
    min-width: 150px;
    padding: 10px 20px;
    border-radius: 0;
    box-shadow: 1px 1px 5px #2222227e;
}

/* jconveyorticker-- */
.wrap {
	background: var(--primary);
	padding: 15px 10px 15px;
	border-radius: 5px;
	margin: 10px 0;
	min-height: 30px;
	max-height: 90px;
	border: 2px solid #ffffff14;
  color: var(--white);
  }
  .jctkr-label {
	color: #141414;
    cursor: default;
    background: #eef0f4;
	  height: 46px;
	  margin-top: 2px;
    padding-right:10px;
	  border-radius: 4px 0 0 4px;
    vertical-align: middle;
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 500;
  }
  .fx1{display: block;}
  .fx2 {display: none;}
/* -------- */
/* -----compnents style----- */
.title-comp{padding: 20px 10px; max-width: 1000px; margin: 0 auto;}
.title-comp .title{font-family: 'Lagu-Sans-Bold', sans-serif; font-size: clamp(1.4rem, 2.5vw, 2.3rem); font-weight:700; line-height:1.2; padding: 10px 0; color: var(--primary);max-width: 800px;margin: 0 auto;}
.title-comp .body{font-size: clamp(1rem, 1.3vw, 1.3rem); line-height:1.1;}

.card-insert{
    position:relative;
    width:100%;
    min-height:350px;
    background-size: cover;
    background-position: center;
    border-radius: 9px;
    background-color: #11111140;
    background-blend-mode: multiply;
}
.section .float-arrow, .card-insert .float-arrow{
  position:absolute; top: 5%; right:5%; width:100px; height:100px; background-size:80px; background-repeat: no-repeat; background-position: center; background-image: url('../../images/up-arror-w.png'); z-index:99; transition: all .5s ease;
}
.card-insert:hover .float-arrow{
  position:absolute; top: 4%; right:4%; transition: all .5s ease;
}
.card-insert .card-insert-body{
    position:absolute;
    bottom:3px;
    width:100%;
    height:auto;
    z-index:29;
    padding: 20px 15px;
    text-align:center;
    color: #fff;
}
.card-insert .title{font-family: 'Lagu-Sans-Bold', sans-serif; font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight:600; line-height:1.1; padding: 5px 0;}
.card-insert .content{ font-size: clamp(.9rem, 1.2vw, 1.1rem); line-height:1.1;}
/*---- ---------- */
/* ===== icon-card ===== */
.icon-card, .icon-light-card{position:relative;  transform: scale(1); display:block; position:relative; background-color: var(--grey); padding: 30px 20px; border-radius: 7px; width: 100%; transition: all .5s ease;}
/* .icon-light-card:after{content:""; position:absolute; width:;} */
.icon-card .icon{background-color:var(--primary); color: var(--yellow); font-size: 2rem; text-align: center; display: inline-block; width:70px; height:70px; line-height: 70px; border-radius:50%; margin-top:10px;}
.icon-card .title{font-family: 'Lagu-Sans-Bold', sans-serif; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight:700; line-height:1.2; padding: 10px 0 3px; color: var(--primary);}
.icon-card .body{font-size: clamp(.8rem, 1.2vw, 1rem); line-height:1.1; padding: 2px 0;}
.icon-light-card{
    display: block;
    position: relative;
    background-color: var(--yellow);
    padding: 30px 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 17px;
    width: 100%;
    color: var(--primary);
    box-shadow: 1px 1px 5px #3333333d;
}

.icon-light-card:hover{ transform: scale(1.01); transition: all .5s ease;}
.icon-light-card .icon{background-color: var(--primary); color: var(--white); font-size: 2.6rem; text-align: center; display: inline-block; width:90px; height:90px; line-height: 85px; border-radius:50%; margin-top:10px;}
.icon-light-card .title{font-family: 'Lagu-Sans-Bold', sans-serif; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight:700; line-height:1.2; padding: 10px 0 3px;}
.icon-light-card .body{font-size: clamp(.8rem, 1.2vw, 1rem); line-height:1.2; padding: 2px 0; margin-bottom: 50px;}
.icon-light-card .card-btn{padding:7px 12px 9px; color: var(--white); background-color: var(--primary); text-decoration: none; box-shadow: 1px 1px 5px #33333381; border-radius:5px; width: 100%; display: block;}

.yellow-card:nth-child(odd) .icon-light-card{background-color: var(--primary); color: var(--white);}
.yellow-card:nth-child(odd) .icon-light-card .icon{background-color: var(--yellow); color: var(--primary); font-size: 2.6rem; text-align: center; display: inline-block; width:90px; height:90px; line-height: 85px; border-radius:50%; margin-top:10px;}
.yellow-card:nth-child(odd) .icon-light-card .title{font-family: 'Lagu-Sans-Bold', sans-serif; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight:700; line-height:1.2; padding: 10px 0 3px;}
.yellow-card:nth-child(odd) .icon-light-card .body{font-size: clamp(.8rem, 1.2vw, 1rem); line-height:1.1; padding: 2px 0;}
.yellow-card:nth-child(odd) .icon-light-card .card-btn{padding:7px 12px 9px; color: var(--primary); background-color: var(--yellow); text-decoration: none; box-shadow: 1px 1px 5px #33333381; border-radius:5px;}

.yellow-card:nth-child(odd) .icon-light-card .card-btn:hover, .icon-light-card .card-btn:hover{ background-color: var(--secondary); transition: all .5s ease;}

/* -------------------- */
.btn-green{background-color: var(--primary); color: var(--white); border-color: transparent;}
.btn-line{background-color: transparent; color: var(--white); border-color: var(--white); border-color: transparent;}
.btn-primary{background-color: var(--primary); color: var(--white); border-color: transparent;}
.btn-secondary{background-color: var(--secondary); color: var(--white); border-color: transparent;}
.btn-white{background-color: var(--white); color: var(--primary); border-color: transparent;}
.btn-full{width: 100% !important;}
/* -----blog---- */
.news-list{position:relative; display: block; width:100%;}
.thumbnail{min-height:260px; width:100%; background-size: cover; background-position: center; border-radius: 10px;}
.news-list .title{font-family: 'Lagu-Sans-Bold', sans-serif; font-size: clamp(.9rem, 1.3vw, 1.1rem); font-weight: 500; text-decoration: none; line-height:1.1; margin-top:5px;}
.news-list .date, .news-list .category{font-size: clamp(0.7rem, 1vw, 0.85rem); color:#667;}
.news-list .post-btn{color: var(--dark); text-decoration: none;}
.news-list .post-btn i{ font-size: .83rem; color: #555;}
/* ----bootstrap color overide ------- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1d9ad6;
  --bs-btn-border-color: #1d9ad6;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1d9ad6;
  --bs-btn-hover-border-color: #1d9ad6;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1d9ad6;
  --bs-btn-active-border-color: #1d9ad6;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1d9ad6;
  --bs-btn-disabled-border-color: #1d9ad6;
}
/* ----------------------------------- */

.t-pop-wrap{
  position: fixed;
  top: 0;
  left: 0;
  display:none;
  width:100%; 
  height: 100%; 
  background-color:rgba(218, 218, 218, 0.8);
  backdrop-filter: blur(4px);
  z-index: 99999;
}

.t-pop-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:#fff;
  padding:20px;
  max-width:1200px;
  height:55vh;
  border-radius: 10px;
  /*z-index: 1999;*/
}
.t-pop-box p{font-size: 1.14rem;}

.kill-it{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  line-height: 27px;
  text-align: center;
  background: #ebeaea;
  color: #2d2d2d;
  border-radius: 15%;
  border: 1px solid #fff;
  cursor: pointer;
}
/*============//============*/
.app-banner{
  background-color: var(--primary);
  position: relative;
  min-height: 200px;
  width:100%;
  border-radius: 8px;
  padding: 6% 4%;
}
.app-banner .app-banner-cont{
  position:relative;
  background-color:#fff;
  color: var(--primary);
  padding: 4% 20px;
}
.app-banner .app-banner-cont:before{
  position:absolute;
  top:-20px;
  left: -20px;
  width:70px;
  height:70px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../../images/angle-left.png');
}
.app-banner-cont h2{ font-size: clamp(1.3rem, 3vw, 2.9rem); font-weight: 700;}
.app-banner a img{height:40px;}
.app-banner .app-banner-img{
  position:absolute;
  bottom: 0;
  width:40%;
  min-height:360px;
  background-color: #1C9AD6;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50px 50px 0 0;
}
/* ------------------------ */
.nav-tabs {border-bottom:0;}
.nav-tabs .nav-link {color: var(--primary); font-size: 1.2rem; font-weight: 600; border-radius: 0; background-color: #f0f6fa; border: 1px solid #cde6f3;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover  {
  background-color: #f9f9f9;
  border-color: transparent;
  border-radius: 0;
}
/* .nav-tabs .nav-item-bdr{border:1px solid #ebebeb;} */
.nav-link {color: var(--primary);}
.nav-tabs-c .nav-link{font-weight:300 !important; padding: 10px 35px;}
.nav-tabs-c .nav-link i{color:#aaaaaa;}
.nav-tabs-c .nav-item.show .nav-link, .nav-tabs-c .nav-link.active, .nav-tabs-c .nav-link:focus,
.nav-tabs-c .nav-link:hover {background-color: #0fbafd !important; color:#fff;}
.nav-tabs-c .nav-link:hover i, .nav-tabs-c .nav-link.active i{color:#fff;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
  background-color: var(--secondary);
  border-color: transparent;
  border-radius: 0;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #ffffff;}
/* .tab-content{background-color: #f9f9f9; border: 1px solid #cde6f3;} */
/* ------------------------ */
.top-img-card{
  background-color: #eee;
  padding: 10px;
  border-radius: 15px;
}
.card-img{position: relative;}
.card-img .card-img{width:100%; min-height:270px; background-position: center; background-size: cover; border-radius: 15px;}
.card-img .card-content{position: relative;}
.card-content .title {
  font-family: 'Lagu-Sans-Bold', sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  line-height: 1.2;
  padding: 10px 0;
  color: var(--primary);
  max-width: 600px;
}
.card-img .body{font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.4;}
/* ------------------------ */
ul li, ol li{padding: 0 0; font-size: clamp(1rem, 2vw, 1rem); line-height: 1.5;}
/* ------------------------ */
.form-wrap{
  background-color: #1d234f;
  padding: 30px 25px;
  border-radius: 15px;
}
/* ------------------------ */
.bootstrap-info{
  border-radius: 0;
  min-width: 180px;
  box-shadow: 1px 1px 14px #33333363;
}
/* ------------------------ */
.left-nav{display: block;}
/* -------------- */
.socials{display:block;}
.socials a{display:block; text-decoration: none; color: var(--primary); padding:5px;}
.socials a:hover{display:block; text-decoration: none; color:var(--secondary);}
/* -------------- */
/* -----search box----- */
.search-box{position:relative; margin-top:15px;}
.search-body{display:block; position:relative; top:0px; left:0; padding:10px; max-height:350px; width: 100%; border-radius:5px; background:#fff;}
/* .search-body:before{position:relative; top:-7px; left:20%; width:15px; height:15px; background:#fff; border:1px solid #eee; border-right-color:transparent; border-bottom-color: transparent; content:""; transform: rotate(45deg);} */
.serch-result{ max-height:330px; overflow-y: auto;}
.search-btn{border-color: var(--primary); border-right: 1px solid transparent; border-right-color: transparent; color: var(--primary); border-radius: 20px 0 0 20px;  border-top-right-radius: 0px;  border-bottom-right-radius: 0px;}
.search-input, .search-input:focus{ color: var(--primary); border-color: var(--primary); border-left: 1px solid transparent; border-left-color: transparent; border-radius: 0 20px 20px 0; border-top-left-radius: 0px;  border-bottom-left-radius: 0px;}
/* ---------------- */
.doc-list{text-decoration: none; border-bottom:1px solid #eee;}
.doc-list a{text-decoration: none; padding:5px 10px; background-color:transparent; border-radius: 4px; display: inline-block; transition: all .5s ease;}
.doc-list a:hover{text-decoration: none; background-color:#eee; display: inline-block; transition: all .5s ease;}
/* ---------------- */
.list-group-item + .list-group-item {
  padding: 5px;
}
/* ----------------- */
.c-card, .card-header:first-child{border-radius: 0;}
.c-card .card-header {
  color: var(--white);
  background-color: rgb(29, 154, 214);
}
.c-card .list-group-item {
  color: #f7f8f9;
  background-color: #1f2850;
  border: 1px solid #2b345c;
}
/* -------map info window------- */
.gm-style .gm-style-iw-c {
  padding-top: 12px;
  padding-right: 50px;
}
.gm-style-iw-chr {
  position: absolute;
  top: 0;
  right: 0;
}
.gm-style .gm-style-iw-d {
  padding: 15px 0 5px;
}
/* ---------------- */
.abs-btm-btn{ position: absolute; bottom: 20px; left: 6%; width: 88.5% !important;}
/* ---------------- */
/* ----video bg --- */
.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.video-container iframe {
  width: 100vw;
  height: 56.25vw; /* 16:9 ratio */
  min-height: 100vh;
  min-width: 177.77vh; /* 16:9 ratio */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-color: var(--primary);
  background-blend-mode: multiply;
}
/* ---------------- */
@media(max-width: 992px){
  .left-nav{display: none;}
  .card-img .card-img {min-height: 250px;}
  .app-banner-img{display:none;}
}
/* ---------------- */
/* ---------------- */
@media(max-width: 600px){
  .fx1{display: none;}
  .fx2 {display: block;}
  .slide-box {width: 100%; bottom: 0;}
  .slide-bg-box{display:block;}
  .card-img .card-img {min-height: 190px;}
  .t-pop-box { width: 100%; height: 75vh;}
  .t-pop-box .details .img{max-width: 200px;}
  .nav-tabs .nav-item-bdr {width: 100%;}
  .nav-tabs-c .nav-link {width: 100%;}
  .nav-tabs-c .nav-item.show .nav-link, .nav-tabs-c .nav-link.active, .nav-tabs-c .nav-link:focus, .nav-tabs-c .nav-link:hover {width: 100%;}
  .wrap {padding: 5px 10px 5px;}
  .jctkr-wrapper ul li {line-height: 1.93; font-size: 19px; }

}