@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

html{
  scroll-behavior: smooth;
}
body{
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  margin-top: 70px;
  line-height: 25px;
  color: #4B546C;
}
h1, h2, h3, h4, h5, h6{
  font-stretch: normal;
  font-style: normal;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 1px;
}
p, ol>li, ul>li {
  font-weight: normal;
  font-style: normal;
  line-height: 25px;
  letter-spacing: normal;
  color: #767676;
}
button:hover, button:focus{
  outline: none!important;
  cursor: pointer;
}
a{
  color: #14DDC9;
}
h5{
  color: #4B546C;
  position: relative;
  z-index: 999;
}
section{
  margin-bottom: 80px;
  padding-top: 20px;
}

.float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
  margin-top:16px;
}

/*button*/
.btn-member{
  background-color: #cff7f3;
  color: #07CBB7;
  padding: 8px 30px;
  border: 0;
  border-radius: 32px;
  display: inline-block;
  line-height: 20px;
}
.btn-primary{
  background: transparent linear-gradient(106deg, #14DDC9 0%, #26F1DC 100%);
  border-radius: 5px;
  padding: 10px 30px;
  border: 1px solid transparent;
  color: #fff;
}
.btn-primary:hover{
  background: #fff;
  border: 1px solid #14DDC9;
  color: #14DDC9;
}
.btn-primary-border{
  background: #fff;
  border-radius: 5px;
  padding: 10px 30px;
  border: 1px solid #14DDC9;
  color: #14DDC9!important;
}
.btn-primary-border:hover{
  background: #14DDC9;
  color: #fff!important;
}


/*color font*/
.blue{
  color: #14DDC9!important;
}

/*margin*/
.mt-10{
  margin-top: 10px;
}
.mt-20{
  margin-top: 20px;
}
.mt-30{
  margin-top: 30px;
}

.mb-10{
  margin-bottom: 10px;
}
.mb-20{
  margin-bottom: 20px;
}
.mb-30{
  margin-bottom: 30px;
}

/*navbar*/
.sec-navbar{
  position: fixed;
  top: 0;
  background: #fff;
  padding-top: 8px;
  z-index: 9999;
  padding-bottom: 8px;
  border-radius: 0 0 10px 10px;
  width: 100%;
  box-shadow: 0px 8px 20px #CFCFCF29;
}
.navbar{
  float: right;
  padding: 0.5rem 0;
}
.navbar-nav li{
  margin-left: 20px;
  margin-right: 20px;
}
.navbar-nav li:first-child{
  margin-left: 0;
}
.navbar-nav li:last-child{
  margin-right: 0;
}
.navbar-expand-lg .navbar-nav .nav-link{
  padding: 10px 0 0;
}
.navbar-nav li a {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  line-height: 1.56;
  letter-spacing: normal;
  text-align: left;
  color: #244986;
}
.navbar-nav li a:hover{
  text-decoration: underline;
}
.navbar-toggler .icon-bar{
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggler .icon-bar+.icon-bar {
    margin-top: 4px;
}
.logo-navbar{
  width: 55%;
  padding: 5px 0 10px;
}
.navbar-nav li.active::after {
  content: '';
  display: block;
  position: relative;
  width: 50%;
  border-bottom: 3px solid #14DDC9;
  margin: 5px auto 0;
}
.sidebar{
  display: none;
}

/*tinyfooter*/
.tinyfooter{
  padding: 30px 0;
  background: #14DDC9;
}
.tinyfooter p{
  margin-bottom: 0;
  color: #fff;
}
img.logo-text{
  height: 20px;
}

/*footer*/
footer{
  margin-top: 100px;
  margin-bottom: 30px;
}
footer, .tinyfooter p{
  font-size: 0.75rem;
}
footer img{
  width: 50%;
  margin-bottom: 30px;
}
footer .info-left{
  width: 60%;
  margin-bottom: 0;
}
footer h6{
  font-size: 1rem;
  margin-bottom: 30px;
}
footer .col-md-4:first-child{
  padding-right: 0;
}
footer .col-md-4:nth-child(2){
  padding-left: 0;
  padding-right: 0;
}
footer .col-md-4:last-child{
  padding-left: 0;
}
footer .col-xl-7{
  padding-left: 0;
}
.fa-ul{
  margin-left: 20px!important;
}
.fa-ul .fa-li{
  color: #14DDC9;
}
.fa-ul li{
  padding-left: 5px;
  margin-bottom: 8px;
}
.fa-ul .fa-li i.fa-mobile{
  font-size: 22px;
}
.fa-ul .fa-li i.fa-phone, footer .fa-ul .fa-li i.fa-at{
  font-size: 18px;
}
.fa-ul .fa-li i.fa-map{
  font-size: 14px;
}
.external-text{
  font-size: 10px;
}
.list-menu-footer{
  padding-inline-start: 0;
}
.list-menu-footer li{
  list-style: none;
  margin-bottom: 15px;
}
.list-menu-footer li a{
  color: #4B546C;
}
.list-menu-footer li a:hover{
  color: #14DDC9;
}
.list-social{
  padding-inline-start: 0;
  list-style: none;
  float: left;
}
.list-social li{
  display: inline-block;
  font-size: 20px;
  margin-right: 5px;
  background: #fff;
  border-radius: 10px;
  width: 40px;
  height: 40px;
}
.list-social li a{
  color: #14DDC9;
  text-align: center;
  display: block;
  margin-top: 20%;
}
.list-social li:hover{
  background: #14DDC9;
}
.list-social li:hover a{
  color: #fff;
}

/*header*/
.header{
  background-color: #f3fdfc;
  margin-bottom: 50px;
  padding-top: 25px;
  overflow: hidden;
}
img.img-header{
  width: 100%;
  position: absolute;
  bottom: 0;
}
.header h1{
  margin-top: 20px;
  margin-bottom: 30px;
}
.header img.logo-rocket{
  height: 45px;
  margin-left: 10px;
  margin-top: 15px;
}
.header p{
  color: #9197AA;
  margin-bottom: 30px;
  font-size: 0.725rem;
}
.header img.icon-header-1{
  display: block;
  width: 7%;
  margin-top: 40px;
  transform: translateX(-130%);
  margin-bottom: 20px;
}
.bg-strike{
  z-index: 999;
  position: relative;
}
.dbg-strike{
  background-color: #cff7f3;
  width: 130px;
  height: 40px;
  z-index: 99;
  transform: translateY(-25px) translateX(30px);
  position: absolute;
}


/*we trust*/
.we-trust{
  padding-top: 0;
  margin-bottom: 50px;
}
#owl-we-trust.owl-carousel .owl-item img {
  height: 45px;
  object-position: center;
  margin: 0 auto;
  /*max-width: 130px;*/
  width: auto;
}
.we-trust h6{
  margin-bottom: 0;
  margin-top: 7px;
}


/*service*/
.service{
  background-color: #f3fdfc;
  padding-top: 30px;
  padding-bottom: 80px;
  overflow: hidden;
  margin-top: 30px;
}
.service p{
  font-size: 0.725rem;
  margin-bottom: 10px;
}
.icon-service-1{
  position: absolute;
  width: 150px;
  top: 0;
  right: -40px;
}
.icon-service-2{
  position: absolute;
  width: 200px;
  bottom: -35px;
  z-index: 99;
  left: -50px;
}
.icon-service-3{
  position: absolute;
  width: 170px;
  right: -80px;
  bottom: -75px;
}
.box-service{
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 30px;
  z-index: 999;
  position: relative;
}
.box-service img{
  margin: 0 auto 20px;
  height: 50px;
  display: block;
}
.box-service h6{
  text-align: center;
  margin-bottom: 15px;
}
.box-service p{
 color: #9197AA;
 line-height: 18px;
 margin-bottom: 0;
 text-align: center;
}

/*about us*/
.about-us{
  padding-bottom: 40px;
  overflow: hidden;
}
.about-us img.img-aboutus{
  width: 80%;
}
.logo-robot{
  height: 35px;
  margin-left: 5px;
  margin-top: 5px;
  z-index: 999;
  position: relative;
}
.about-us h5{
  margin-bottom: 20px;
}
.about-us .dbg-strike-round{
  background-color: #FDE700;
  width: 50px;
  height: 50px;
  z-index: 99;
  transform: translateY(10px) translateX(35px);
  position: absolute;
  border-radius: 50%;
  top: 0;
}
.about-us .dbg-strike{
  background-color: #14DDC9;
  width: 75px;
  height: 20px;
  z-index: 99;
  transform: translateY(-15px) translateX(2px);
  position: absolute;
}
.about-us p{
  color: #9197AA;
  font-size: 0.725rem;
}
.list-aboutus{
  list-style-type: square;
  padding-inline-start: 25px;
  margin-top: 20px;
}
.list-aboutus li{
  color: #9197AA;
  font-size: 0.725rem;
}
.list-aboutus li::marker{
  color: #14DDC9;
  font-size: 24px;
}
.list-aboutus li p{
  margin-bottom: 0;
  transform: translateY(-4px);
}
.dmore-button{
  margin-top: 60px;
}
.dmore-button p{
  display: inline-block;
}
.dmore-button .btn-primary-border{
  font-size: 0.725rem;
  margin-left: 15px;
}
.about-us .col-xl-6:last-child{
  padding-left: 0;
  margin-left: -20px;
}
.bg-aboutus{
  width: 150px;
  position: absolute;
  left: -65px;
  bottom: -65px;
}


/*portofolio*/
.portofolio p{
  color: #9197AA;
  font-size: 0.725rem;
}
.portofolio a p{
  text-decoration: underline;
}
.portofolio .dbg-strike-round{
  background-color: #14DDC9;
  width: 38px;
  height: 38px;
  z-index: 99;
  transform: translateY(-80%) translateX(70%);
  position: absolute;
  border-radius: 50%;
  top: 0;
  right: 0;
}
.line-2{
  display: block;
  margin-top: 7px;
  margin-bottom: 40px;
}
.portofolio img{
  width: 100%;
  margin-bottom: 10px;
}
.portofolio .box-portofolio{
  border: 1px solid transparent;
  margin-top: 30px;
}
.portofolio .box-portofolio:hover{
  border: 1px solid #9197AA;
  border-radius: 10px;
}
.portofolio .box-portofolio a:hover{
  text-decoration: none;
}
.portofolio .box-portofolio h6 a{
  color: #4B546C;
}
.portofolio .box-portofolio h6{
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.portofolio .box-portofolio p a{
  font-size: 0.75rem;
  color: #9197AA;
}
.portofolio .box-portofolio p.text-subtitle{
  margin-bottom: 10px;
}
.portofolio .box-portofolio p.text-subtitle a{
  color: #4B546C;
}
.portofolio .box-portofolio p.text-subtitle a.link-subtitle{
  color: #14DDC9;
}
.portofolio .box-portofolio p.text-des{
  line-height: 18px;
}
.portofolio .box-portofolio .text-isi{
  padding: 0 20px;
}

/*portofolio page*/
img.icon-portofolio-1{
  width: 180px;
  position: absolute;
  right: 0;
  margin-top: 20px;
}
.portofolio img.icon-portofolio-2{
  width: 360px;
  position: absolute;
  left: -200px;
  bottom: -90px;
}


/*blog*/
.blog{
  overflow: hidden;
}
.blog .dbg-strike-round{
  background-color: #69BCE6;
  width: 38px;
  height: 38px;
  z-index: 99;
  transform: translateY(-40%) translateX(35px);
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
}
.blog p{
  color: #9197AA;
}
.blog a p{
  text-decoration: underline;
  margin-top: 30px;
}
.blog h6{
  margin-bottom: 50px;
}
.blog .box-blog img{
  width: 100%;
  margin-bottom: 30px;
}
.blog .box-blog {
  padding: 30px;
  border: 1px solid #D2D3D8;
  border-radius: 20px;
  margin-top: 40px;
  background: #fff;
  position: relative;
  z-index: 999;
}
.blog p.text-next{
  margin-bottom: 0;
}

/*blog page*/
.blog .icon-service-1{
  width: 200px;
  top: unset;
  bottom: 50px;
  right: -60px;
}
.blog .icon-service-2{
  bottom: unset;
  top: 27%;
  width: 230px;
  left: -30px;
}
.blog-pagination{
  margin-top: 70px;
}
.blog-pagination .pagination{
  display: block;
  text-align: center;
}
.blog-pagination .pagination li{
  display: inline-block;
  width: 35px;
  height: 38px;
  margin: 0 5px;
}
.blog-pagination .pagination li a{
  border: 1px solid transparent;
  color: #27274D;
  font-size: 0.75rem;
  border-radius: 3px;
}
.blog-pagination .pagination li a:hover{
  background-color: #14DDC9;
  color: #fff;
}
.blog-pagination .pagination li:first-child a ,
.blog-pagination .pagination li:last-child a,
.blog-pagination .pagination li.btn-prev a,
.blog-pagination .pagination li.btn-next a{
  background-color: #14DDC929;
  color: #14DDC9;
  border: 1px solid #14DDC929;
}


/*contact us*/
.contact-us h5{
  margin-bottom: 10px;
}
.contact-us p{
  color: #9197AA;
  font-size: 0.725rem;
  line-height: 20px;
  margin-bottom: 10px;
}
.contact-us label{
  font-size: 0.725rem;
  color: #4B546C;
  margin-bottom: 0px;
}
.contact-us ::placeholder {
  color: #9197AA;
  font-size: 0.688rem;
}
.contact-us form{
  width: 85%;
}
.contact-us .form-group{
  margin-bottom: 10px;
}
.box-contact{
  box-shadow: 0px 15px 35px #DEDEDE29;
  border-radius: 40px;
  overflow: hidden;
}
.dbox-contact{
  padding: 35px 10px;
  position: relative;
  z-index: 999;
}
.bg-contact1{
  width: 420px;
  position: absolute;
  left: 15px;
  top: 0;
  z-index: 99;
}
.bg-contact2{
  position: absolute;
  width: 110px;
  right: 15px;
  bottom: 0;
  z-index: 99;
}
.icon-contactus{
  position: absolute;
  z-index: 999;
  height: 450px;
  bottom: -20px;
  left: 19%;
}
.contact-us .btn-primary{
  font-size: 0.725rem;
  margin-bottom: 20px;
  margin-top: 10px;
}



/*halaman detail */
.page-detail{
  overflow: hidden;
  position: relative;
}
.page-detail .breadcrumb{
  background-color: transparent;
  padding-left: 0;
}
.page-detail img{
  width: 100%;
  margin-bottom: 20px;
}
.page-detail h5{
  color: #4B546C;
  margin-bottom: 20px;
}
.page-detail p{
  margin-bottom: 10px;
  font-size: 0.813rem;
}

.page-detail .date{
  margin-bottom: 0px;
}

.page-detail .title-description{
  margin-top: 20px;
  margin-bottom: 20px;
}
.page-detail .title-description p{
  display: inline-block;
}
.page-detail .title-description .nama{
  margin-right: 10px;
  margin-left: 10px;
  color: #9197AA;
}
.page-detail .title-description .date{
  color: #687494;
}
.page-detail .title-description .img-icon{
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0;
  margin-right: 10px;
}
.page-detail .side-kategori{
  padding-left: 50px;
}
.page-detail .side-kategori h6{
  margin-bottom: 20px;
}
.page-detail .side-kategori .form-search{
  background-color: #F8F8F8;
  margin-bottom: 30px;
  border-radius: 3px;
  color: #4B546C;
}
ul.list-kategori {
  list-style: none;
  padding: 0;
}
.list-kategori li {
  padding-left: 1.3em;
  margin-bottom: 7px;
}
.list-kategori li a{
  color: #4B546C;
}
.list-kategori li a:hover , .list-kategori li:hover{
  color: #14DDC9;
  text-decoration: none;
}
.list-kategori li:before {
  content: "\f105"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}
img.icon-blogdetail-1{
  right: -250px;
  width: 500px;
  position: absolute;
  top: 35%;
}
.table-idetail{
  margin-bottom: 20px;
}
.table-idetail td{
  padding-bottom: 10px;
}
.table-idetail td:first-child{
  padding-right: 15px;
}
.table-idetail td:last-child{
  padding-left: 5px;
}


/*contact us*/
.hubungi-kami{
  padding-top: 80px;
  overflow: hidden;
  padding-bottom: 50px;
}
img.img-contactus{
  width: 100%;
  position: absolute;
  top: 0;
}
.hubungi-kami h3{
  margin-top: 35px;
  margin-bottom: 35px;
}
.hubungi-kami img.logo-contactus{
  height: 40px;
  margin-left: 10px;
}
.hubungi-kami p{
  color: #9197AA;
  margin-bottom: 20px;
  /*font-size: 0.725rem;*/
}
.hubungi-kami p.deskripsi{
  margin-bottom: 60px;
}
img.logo-mouse{
  height: 30px;
  margin-right: 10px;
}
.send-message .dbg-strike-round{
  background-color: #14DDC9;
  width: 38px;
  height: 38px;
  z-index: 99;
  transform: translateY(-80%);
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 280px;
  /*left: 50%;*/
}
.send-message p{
  margin-bottom: 40px;
}
.send-message label{
  font-weight: bold;
}
.send-message .form-control{
  font-size: 12px;
}
.informasi-kontak{
  padding-left: 70px;
}
.mapplace{
  padding: 0px;
}
/* map */
.map-container {
  width: 100%;
}
.map-container #map{
  width: 100%;
  height: 400px;
  display: block;
  pointer-events: none;
  position: relative; /* IE needs a position other than static */
}
.map-container #map.clicked{
  pointer-events: auto;
}
.mapplace .wp{
  padding-left: 0;
  padding-right: 0;
}
iframe{
  width: 100%;
}


/*Tentang Kami*/
.tentang-kami{
  overflow: hidden;
  margin-bottom: 0;
}
.tentang-kami p.deskripsi{
  margin-bottom: 100px;
  margin-top: 20px;
}
.tentang-kami .dbg-strike {
  background-color: #14DDC9;
  width: 75px;
  height: 20px;
  z-index: 99;
  transform: translateY(-15px) translateX(2px);
  position: absolute;
}
img.img-tentangkami{
  height: 85%;
  position: absolute;
  right: -40%;
  top: -2%;
}
.left-side{
  padding-top: 100px;
  padding-bottom: 60px;
}
img.img-tentangkami1{
  transform: translateX(-50%);
}
.dstory-us{
  padding: 0 70px;
}
.story-us h5{
  margin-bottom: 15px;
}
.rstory-us{
  padding-left: 30px;
  padding-bottom: 100px;
  margin-bottom: 100px;
}
.lstory-us {
  padding-right: 30px;
  padding-top: 50px;
  margin-top: 100px;
}
.rstory-us p, .lstory-us p {
  margin-bottom: 25px;
}
.story-us{
  transform: translateY(-20px);
  overflow: hidden;
}
.story-us .dbg-strike-round {
  background-color: #14DDC9;
  width: 38px;
  height: 38px;
  z-index: 99;
  transform: translateY(-80%) translateX(70%);
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 50%;
}
.logo-storyus{
  width: 400px;
  position: absolute;
  left: 0;
  top: -150px;
}
.logo-storyus2{
  width: 300px;
  position: absolute;
  right: 0;
  margin-top: 100px
}
.story-us .bg-aboutus{
  width: 130px;
  left: -10%;
  bottom: 0;
}
.box-left{
  left: -210px !important;
}
.box-tim{
  margin-top: 40px;
  padding: 30px;
  border: 1px solid #D2D3D8;
  border-radius: 20px;
  text-align: center;
  background: #fff;
}
.box-tim img{
  width: 100%;
  margin-bottom: 30px;
  border-radius: 20px;
  height: 255px;
  filter: grayscale(80%);
  object-fit: cover;
}
.box-tim h6{
  margin-bottom: 10px;
}
.box-tim p{
  margin-bottom: 10px;
}
.box-tim .sosmed-tim a{
  display: inline-block;
  margin: 0 10px;
  font-size: 1.25rem;
}
.our-tim{
  overflow: hidden;
}
.our-tim .dbg-strike-round {
  background-color: #69BCE6;
  width: 38px;
  height: 38px;
  z-index: 99;
  position: absolute;
  border-radius: 50%;
  bottom: 0;
  left: 0;
}
img.img-tentangkami2{
  position: absolute;
  right: -140%;
  top: 0;
}
img.img-iconleft{
  position: absolute;
  width: 40px;
  left: 3%;
  margin-top: 40%;
}

.img-iconleft404{
  position: absolute;
  width: 30px;
  left: 3%;
}

.img-iconright404{
  position: absolute;
  width: 160px;
  right: 0px;
  top:-30px;
}

.page404-title{
	color: #14DDC9;
    font-weight: bold;
    font-size: 70px;
    margin-top: 120px;
    margin-bottom: 50px;
}

.page404-info{
	color: #4B546C;
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 20px;
	line-height: initial;
}

@media (min-width: 1200px){
	.container {
		max-width: 1000px;
	}
}


/* Extra small devices "Phones" (<768px) */
@media (max-width: 767px) {
	.hubungi-kami{
	  padding-top: 20px;
	}
	
	.img-iconright404{
	  position: absolute;
	  width: 130px;
	  top:-50px;
	}
	
	.page404-title{
		margin-top: 50px;
	}
}
/* End of Extra small devices "Phones" (<768px) */

/* Small devices "Tablets" (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {
	
}
/* End of Small devices "Tablets" (≥768px) */

/* Medium devices "Desktops" (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {

}
/* End of Medium devices "Desktops" (≥992px) */

/* Large devices Desktops (≥1200px) */
@media (min-width: 1200px) {
	
}
/* End of Large devices Desktops (≥1200px)) */