@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto-regular-webfont.eot');
    src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff'),
         url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
  font-family: 'chakra_petchlight';
  src: url('../fonts/chakrapetch-webfont.eot');
  src: url('../fonts/chakrapetch-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/chakrapetch-webfont.woff2') format('woff2'),
       url('../fonts/chakrapetch-webfont.woff') format('woff'),
       url('../fonts/chakrapetch-webfont.ttf') format('truetype'),
       url('../fonts/chakrapetch-webfont.svg#chakra_petchlight') format('svg');
  font-weight: normal;
  font-style: normal;

}

body { font-family: robotoregular; color: #333; font-size: 14px; line-height: 24px;}
a { text-decoration: none;}
h1, h2, h3, h4, h5, h6 { font-weight: 600;
  font-family: chakra_petchlight;
}

.text-chakra-petch { font-family: 'chakra_petchlight'; }

.btn-primary, .btn-secondary,.btn-white { font-family: chakra_petchlight; font-weight: 500; text-transform: uppercase; border: none; padding: 8px 25px;}




.btn-primary { background: none; border: 1px solid #0075be !important; color: #0075be;}
.btn-primary:hover { background: #0075be; color: #fff; }
.btn-secondary { background: #0075be; color: #fff !important; }
.btn-secondary:hover { background: #134094; }
.btn-white { background: none; border: 1px solid #fff; font-weight: 500; color: #fff; }
.btn-white:hover { background: #fff; color: #0075be; }

.tilte-02 { color: #333; font-size: 20px; font-weight: 600;}
.text-blue { color: #0075be;}
.text-white { color: #fff;}
.bg-white { background: #fff; }

.form-control { font-family: chakra_petchlight; font-size: 13px;}

/* ===================== Navigation ======================== */
.main-menu .nav-item { margin: 0 20px; font-size: 15px; text-transform: uppercase; }
.main-menu .nav-link { color: #333; padding-right: 0 !important; padding-left: 0 !important; border-bottom: 2px solid transparent;}
.main-menu .nav-link:hover { color: #0075be; border-bottom: 2px solid #0075be;}
.main-menu .nav-link.active { color: #0075be; border-bottom: 2px solid #0075be;}
.navbar-default.scrolled { background:#fff; position: fixed; width: 100%; top: 0; box-shadow: 0 0 5px #ccc; z-index: 9999;}


/* ===================== Banner =========================== */
.banner { line-height: normal;}
.banner .overlay { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 2;}
.banner .carousel-indicators, .banner .carousel-control-next, .banner .carousel-control-prev { z-index: 3;}
.banner .carousel-caption-area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.banner .carousel-caption { 
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    /* background: rgba(255,255,255,0.2); */
    padding: 47px;
    border-radius: 5px;
    z-index: 4;
}

.banner .caption-title { font-size: 40px;}
.banner .caption-des { font-size: 70px; font-weight: bold;}

.banner .carousel-item img {
    animation: zoom-in-zoom-out 30s ease-out infinite; z-index: 1;
}

@keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }


/* =============================== Index ======================== */
.ser-cont { height: 100%; border: 1px solid #f0eeee; border-radius: 10px; /* padding: 2px; */ overflow: hidden;}
.img-service{ border-radius: 10px 10px 0px 0; }
.ser-cont:hover { box-shadow: 0 0 10px #b1b0b0;}
.about { background: #0075be;}

.about-prl {
  overflow: hidden;
  position: relative;
  /* width: 100%; */
  /* height: 100vh; */
  background-image: url(../img/dummy/dummy01.jpg);
  background-attachment: fixed;
  background-size: 50% 100%;
  -moz-background-size: 50% 100%;
  -webkit-background-size: 50% 100%;
  background-repeat: no-repeat;
  background-position: top left;
}

.img-radius { border-radius: 50px 0; transition: all 1s; overflow: hidden;}
.img-radius img { transition: all 0.5s; }
.pro-box { padding: 20px; transition: all 1s; }
.pro-box:hover { background: #0075be; color: #fff; border-radius: 10px; box-shadow: 0 0 8px #0075be;}
.pro-box:hover .img-radius img { transform: scale(1.2);}
.pro-box:hover a { color: #fff;}
.pro-box:hover a:hover { color: #e2e2e2;}
.multi-item-carousel .card { border: none;}


.client-logo img {filter: grayscale(100%);}
.client-logo img:hover {filter: grayscale(0);}

.arrow-btn { position: relative; width: 100%; height: 50px;}
.arrow-btn i { color: #134094;}













@media (max-width: 767px) {
  .multi-item-carousel .carousel-inner .carousel-item > div {
    display: none;
  }
  .multi-item-carousel .carousel-inner .carousel-item > div:first-child {
    display: block;
  }
}

.multi-item-carousel .carousel-inner .carousel-item.active,
.multi-item-carousel .carousel-inner .carousel-item-next,
.multi-item-carousel .carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
  .multi-item-carousel .carousel-inner .carousel-item-end.active,
  .multi-item-carousel .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

  .multi-item-carousel .carousel-inner .carousel-item-start.active,
  .multi-item-carousel .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}

.multi-item-carousel .carousel-inner .carousel-item-end,
.multi-item-carousel .carousel-inner .carousel-item-start {
  transform: translateX(0);
}


.projectFactsWrap{
    display: flex;
 /* margin-top: 30px; */
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
}

.projectFactsWrap .item{
  width: 25%;
  height: 100%;
  padding: 70px 0px;
  text-align: center;
}

.projectFactsWrap .item:nth-child(1){
  background: rgb(16, 31, 46);
}

.projectFactsWrap .item:nth-child(2){
  background: rgb(18, 34, 51);
}

.projectFactsWrap .item:nth-child(3){
  background: rgb(21, 38, 56);
}

.projectFactsWrap .item:nth-child(4){
  background: rgb(23, 44, 66);
}

.projectFactsWrap .item p.number{
  font-size: 60px;
  padding: 0;
}

.projectFactsWrap .item p{
  font-family: chakra_petchlight;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  font-weight: bold;
}


.projectFactsWrap .item span{
  width: 60px;
  background: rgba(255, 255, 255, 0.4);
  height: 2px;
  margin: 30px auto;
  display: block;
}


@media (max-width: 786px){
  .projectFactsWrap .item {
     flex: 0 0 50%;
  }
}




/* =============================== Footer ========================= */
footer { background: #081b22;  color: #999; font-size: 12px;}
footer a { color: #999; text-decoration: none;}
.f-logo { background: #fff; background: #fff; display: inline-block; padding: 15px; border-radius: 10px;}
.footer-cont-info i { margin-right: 20px;}
.f-menu li { list-style: none;}
.f-menu li a { position: relative;}
.f-menu li a:hover { color: #0075be;}
.f-menu li a:before { content: ''; position: absolute; width: 5px; height: 5px; background: #fff; left: -25px; top: 6px; transition: all 0.5s;}
.f-menu li a:hover:before { left: -10px; }
.f-bottom { background: #06151f;}
.f-bottom a { color: #0075be;}
.f-bottom a:hover { color: #999;}

.goTop { width: 50px; height: 50px; background: #0075be; padding-top: 15px; font-size: 14px; color: #fff; text-align: center; line-height: 18px; position: fixed; right: 30px; bottom: 30px; border-radius: 5px; box-shadow: 0 0 8px #4d4c4c; display: none; z-index: 999;}
.goTop:hover { background: #134094; color: #fff;}
.goTop-block { display: block;}




/* ============================= Inner ========================== */
.inner-banner { min-height: 300px; background-size: 100% 100%; animation: zoom-in-zoom-out 30s ease-out infinite; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(94, 202, 245, 0.8)), url("../img/banner01.jpg");
}
.inner-title { font-size: 56px;}
.abt-icon { font-size: 70px; color: #0075be;}

.mask-img {
  height: 100%;
  background-size: 100% 100%;
  background: url(../img/img-mask.png) no-repeat bottom;
  -webkit-mask-image: url(../img/img-mask.png);
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-image: url(../img/img-mask.png);
  mask-repeat: no-repeat;
  mask-position: left top;
  -webkit-mask-size: 100% 100%;
}

.left-sticky {
  position: sticky;
  position: -webkit-sticky;
  /* width: auto; */
  height: 100%;
  top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-style { border-radius: 25px 0; overflow: hidden;}



.message-prl {
  overflow: hidden;
  position: relative;
  width: 100%;
  background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("../img/banner01.jpg");
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
}

div.bubble {
	position: relative;
	width: 100%;
	margin: 40px auto;
	background-color: rgba(255, 255, 255, 0.7);
	/* border: 4px solid #333; */
	border-radius: 30px;
	font-family: sans-serif;
	padding: 20px;
}

div.thought {
	width: 100%;
	border-radius: 100px;
	padding: 30px 50px;	
}

div.bubble:before,
div.bubble:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}


div.thought:before,
div.thought:after {
	left: 10px;
	bottom: -30px;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.7);
	/* border: 4px solid #333; */
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
}

div.thought:after {
	width: 20px;
	height: 20px;
	left: 5px;
	bottom: -40px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}

.form-control { min-height: 60px;}
.form-control.textarea { min-height: 160px;}
.form-control::placeholder { color: #a5a5a5;}
.ic-cont { font-size: 18px; margin-top: 7px;}
.google-map { border-top:1px solid #ccc;}



.work-gal { border-radius: 10px; overflow: hidden; position: relative; transition: all 0.5s; }
.gal-overlay { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); top: 0; left: 0; visibility: hidden; opacity: 0; transition: all 0.5s; }
.work-gal img { transform: scale(1.1); transition: all 0.5s; }
.work-gal:hover img { transform: rotate(5deg) scale(1.1); }

.work-gal:hover .gal-overlay { visibility: visible; opacity: 1; }
.gal-overlay:before { border: 1px solid #0075be; content: ''; position: absolute; transition: all, 0.5s; top: 0px; bottom: 0px; left: 0px; right: 0px; }
.work-gal:hover .gal-overlay:before { top:20px; bottom: 20px; left: 20px; right: 20px;  }

.img-ser { position: relative; border-radius: 15px; overflow: hidden; max-height: 250px;}
.img-ser img { transition: all 0.5s;}
.img-ser:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); transform: perspective(400px) rotateX(-90deg) scale(0.2); transform-origin: top; transition: all 0.5s; z-index: 1;}

.service-item:hover .img-ser:before { transform: perspective(400px) rotateX(0deg) scale(1); } 
.service-item:hover .img-ser img {transform: rotate(2deg) scale(1.1);}

.img-ser img { width: 100%;}
.service-cont { position: relative; background: #fff; margin:-70px 30px 0; z-index: 9; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px #ccc; min-height: 120px; }
.service-item:hover .service-cont { background: #0075be; color: #fff; }
.service-item:hover .service-cont a { color: #fff; }
.service-item:hover .service-cont a:hover { color: #d8d1d1; }

.ser-sec02 { background: url(../img/bg-pattern.png), #eaeaeb;}


.about-prl.prl-left { background-position: top right;}

.cont-infor a { color: #333;}

.ch-name { display: inline-block; top: -37px; position: relative; left: 70px; }
.lable-name { position: relative; top: 25px; left: 15px; } 
.img-lable { width: 80px !important; height: 80px; border-radius: 100%; overflow: hidden;}