html {
  scroll-behavior: smooth;
}

/* Floating WA */
.cbh-phone {
  display: block;
  position: fixed;
  left: -50px;
  bottom: -55px;
  visibility: hidden;
  background-color: transparent;
  /*width: 200px;*/
  height: 200px;
  cursor: pointer;
  z-index: 999;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -webkit-transition: visibility 0.5s;
  -moz-transition: visibility 0.5s;
  -o-transition: visibility 0.5s;
  transition: visibility 0.5s;
}

.cbh-phone.cbh-show {
  visibility: visible;
}

.cbh-phone.cbh-static1 {
  opacity: 0.6;
}

.cbh-phone.cbh-hover1 {
  opacity: 1;
}

.cbh-ph-circle {
  width: 110px;
  height: 110px;
  top: 40px;
  left: 40px;
  position: absolute;
  background-color: transparent;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid rgba(30, 30, 30, 0.4);
  opacity: 0.1;
  -webkit-animation: cbh-circle-anim 1.2s infinite ease-in-out;
  -moz-animation: cbh-circle-anim 1.2s infinite ease-in-out;
  -ms-animation: cbh-circle-anim 1.2s infinite ease-in-out;
  -o-animation: cbh-circle-anim 1.2s infinite ease-in-out;
  animation: cbh-circle-anim 1.2s infinite ease-in-out;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.cbh-phone.cbh-active .cbh-ph-circle1 {
  -webkit-animation: cbh-circle-anim 1.1s infinite ease-in-out !important;
  -moz-animation: cbh-circle-anim 1.1s infinite ease-in-out !important;
  -ms-animation: cbh-circle-anim 1.1s infinite ease-in-out !important;
  -o-animation: cbh-circle-anim 1.1s infinite ease-in-out !important;
  animation: cbh-circle-anim 1.1s infinite ease-in-out !important;
}

.cbh-phone.cbh-static .cbh-ph-circle {
  -webkit-animation: cbh-circle-anim 2.2s infinite ease-in-out !important;
  -moz-animation: cbh-circle-anim 2.2s infinite ease-in-out !important;
  -ms-animation: cbh-circle-anim 2.2s infinite ease-in-out !important;
  -o-animation: cbh-circle-anim 2.2s infinite ease-in-out !important;
  animation: cbh-circle-anim 2.2s infinite ease-in-out !important;
}

.cbh-phone.cbh-hover .cbh-ph-circle {
  border-color: rgba(0, 175, 242, 1);
  opacity: 0.5;
}

.cbh-phone.cbh-green.cbh-hover .cbh-ph-circle {
  border-color: rgba(117, 235, 80, 1);
  opacity: 0.5;
}

.cbh-phone.cbh-green .cbh-ph-circle {
  border-color: rgba(0, 175, 242, 1);
  opacity: 0.5;
}

.cbh-phone.cbh-gray.cbh-hover .cbh-ph-circle {
  border-color: rgba(204, 204, 204, 1);
  opacity: 0.5;
}

.cbh-phone.cbh-gray .cbh-ph-circle {
  border-color: rgba(117, 235, 80, 1);
  opacity: 0.5;
}

.cbh-ph-circle-fill {
  width: 74px;
  height: 74px;
  top: 58px;
  left: 58px;
  position: absolute;
  background-color: #000;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 0.1;
  -webkit-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out;
  -moz-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out;
  -ms-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out;
  -o-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out;
  animation: cbh-circle-fill-anim 2.3s infinite ease-in-out;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.cbh-phone.cbh-active .cbh-ph-circle-fill {
  -webkit-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out !important;
  -moz-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out !important;
  -ms-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out !important;
  -o-animation: cbh-circle-fill-anim 1.7s infinite ease-in-out !important;
  animation: cbh-circle-fill-anim 1.7s infinite ease-in-out !important;
}

.cbh-phone.cbh-static .cbh-ph-circle-fill {
  -webkit-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out !important;
  -moz-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out !important;
  -ms-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out !important;
  -o-animation: cbh-circle-fill-anim 2.3s infinite ease-in-out !important;
  animation: cbh-circle-fill-anim 2.3s infinite ease-in-out !important;
  opacity: 0 !important;
}

.cbh-phone.cbh-hover .cbh-ph-circle-fill {
  background-color: rgba(0, 175, 242, 0.5);
  opacity: 0.75 !important;
}

.cbh-phone.cbh-green.cbh-hover .cbh-ph-circle-fill {
  background-color: rgba(117, 235, 80, 0.5);
  opacity: 0.75 !important;
}

.cbh-phone.cbh-green .cbh-ph-circle-fill {
  background-color: rgba(0, 175, 242, 0.5);
  opacity: 0.75 !important;
}

.cbh-phone.cbh-gray.cbh-hover .cbh-ph-circle-fill {
  background-color: rgba(204, 204, 204, 0.5);
  opacity: 0.75 !important;
}

.cbh-phone.cbh-gray .cbh-ph-circle-fill {
  background-color: rgba(117, 235, 80, 0.5);
  opacity: 1 !important;
}

.cbh-ph-img-circle1 {
  width: 50px;
  height: 50px;
  top: 70px;
  left: 70px;
  position: absolute;
  background-image: url(../../../images/lain-lain/whats.png);
  background-size: 40px 40px;
  background-color: rgba(30, 30, 30, 0.1);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 1;
  -webkit-animation: cbh-circle-img-anim 1s infinite ease-in-out;
  -moz-animation: cbh-circle-img-anim 1s infinite ease-in-out;
  -ms-animation: cbh-circle-img-anim 1s infinite ease-in-out;
  -o-animation: cbh-circle-img-anim 1s infinite ease-in-out;
  animation: cbh-circle-img-anim 1s infinite ease-in-out;
}

.cbh-phone.cbh-active .cbh-ph-img-circle1 {
  -webkit-animation: cbh-circle-img-anim 1s infinite ease-in-out !important;
  -moz-animation: cbh-circle-img-anim 1s infinite ease-in-out !important;
  -ms-animation: cbh-circle-img-anim 1s infinite ease-in-out !important;
  -o-animation: cbh-circle-img-anim 1s infinite ease-in-out !important;
  animation: cbh-circle-img-anim 1s infinite ease-in-out !important;
}

.cbh-phone.cbh-static .cbh-ph-img-circle1 {
  -webkit-animation: cbh-circle-img-anim 0 infinite ease-in-out !important;
  -moz-animation: cbh-circle-img-anim 0 infinite ease-in-out !important;
  -ms-animation: cbh-circle-img-anim 0 infinite ease-in-out !important;
  -o-animation: cbh-circle-img-anim 0 infinite ease-in-out !important;
  animation: cbh-circle-img-anim 0 infinite ease-in-out !important;
}

.cbh-phone.cbh-hover .cbh-ph-img-circle1 {
  background-color: rgba(0, 175, 242, 1);
}

.cbh-phone.cbh-green.cbh-hover .cbh-ph-img-circle1:hover {
  background-color: rgba(117, 235, 80, 1);
}

.cbh-phone.cbh-green .cbh-ph-img-circle1 {
  background-color: rgba(0, 175, 242, 1);
  background-color: rgba(0, 175, 242, 1);
}

.cbh-phone.cbh-gray.cbh-hover .cbh-ph-img-circle1 {
  background-color: rgba(204, 204, 204, 1);
}

.cbh-phone.cbh-gray .cbh-ph-img-circle1 {
  background-color: rgba(117, 235, 80, 1);
}

@-moz-keyframes cbh-circle-anim {
  0% {
    -moz-transform: rotate(0deg) scale(0.5) skew(1deg);
    opacity: 0.1;
    -moz-opacity: 0.1;
    -webkit-opacity: 0.1;
    -o-opacity: 0.1;
  }

  30% {
    -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.5;
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
    -o-opacity: 0.5;
  }

  100% {
    -moz-transform: rotate(0deg) scale(1) skew(1deg);
    opacity: 0.6;
    -moz-opacity: 0.6;
    -webkit-opacity: 0.6;
    -o-opacity: 0.1;
  }
}

@-webkit-keyframes cbh-circle-anim {
  0% {
    -webkit-transform: rotate(0deg) scale(0.5) skew(1deg);
    -webkit-opacity: 0.1;
  }

  30% {
    -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
    -webkit-opacity: 0.5;
  }

  100% {
    -webkit-transform: rotate(0deg) scale(1) skew(1deg);
    -webkit-opacity: 0.1;
  }
}

@-o-keyframes cbh-circle-anim {
  0% {
    -o-transform: rotate(0deg) kscale(0.5) skew(1deg);
    -o-opacity: 0.1;
  }

  30% {
    -o-transform: rotate(0deg) scale(0.7) skew(1deg);
    -o-opacity: 0.5;
  }

  100% {
    -o-transform: rotate(0deg) scale(1) skew(1deg);
    -o-opacity: 0.1;
  }
}

@keyframes cbh-circle-anim {
  0% {
    transform: rotate(0deg) scale(0.5) skew(1deg);
    opacity: 0.1;
  }

  30% {
    transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.5;
  }

  100% {
    transform: rotate(0deg) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@-moz-keyframes cbh-circle-fill-anim {
  0% {
    -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.2;
  }

  50% {
    -moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);
    opacity: 0.2;
  }

  100% {
    -moz-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@-webkit-keyframes cbh-circle-fill-anim {
  0% {
    -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.2;
  }

  50% {
    -webkit-transform: rotate(0deg) scale(1) skew(1deg);
    opacity: 0.2;
  }

  100% {
    -webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@-o-keyframes cbh-circle-fill-anim {
  0% {
    -o-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.2;
  }

  50% {
    -o-transform: rotate(0deg) scale(1) skew(1deg);
    opacity: 0.2;
  }

  100% {
    -o-transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@keyframes cbh-circle-fill-anim {
  0% {
    transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.2;
  }

  50% {
    transform: rotate(0deg) scale(1) skew(1deg);
    opacity: 0.2;
  }

  100% {
    transform: rotate(0deg) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@keyframes cbh-circle-img-anim {
  0% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }

  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  100%,
  50% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
}

@-moz-keyframes cbh-circle-img-anim {
  0% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }

  10% {
    -moz-transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    -moz-transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    -moz-transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    -moz-transform: rotate(25deg) scale(1) skew(1deg);
  }

  100%,
  50% {
    -moz-transform: rotate(0deg) scale(1) skew(1deg);
  }
}

@-webkit-keyframes cbh-circle-img-anim {
  0% {
    -webkit-transform: rotate(0deg) scale(1) skew(1deg);
  }

  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }

  100%,
  50% {
    -webkit-transform: rotate(0deg) scale(1) skew(1deg);
  }
}

@-o-keyframes cbh-circle-img-anim {
  0% {
    -o-transform: rotate(0deg) scale(1) skew(1deg);
  }

  10% {
    -o-transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    -o-transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    -o-transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    -o-transform: rotate(25deg) scale(1) skew(1deg);
  }

  100%,
  50% {
    -o-transform: rotate(0deg) scale(1) skew(1deg);
  }
}

.cbh-phone.cbh-green .cbh-ph-circle {
  border-color: #00f2a4;
}

.cbh-phone.cbh-green .cbh-ph-circle-fill {
  background-color: #00f2a4;
}

.cbh-phone.cbh-green .cbh-ph-img-circle1 {
  background-color: #2ecb71;
}

.form-control {
  font-size: 14px;
  font-weight: 400;
  box-shadow: none;
  padding: 10px 20px;
  line-height: 1.5;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.005);
  color: var(--bs-text-dark) !important;
  border-color: rgba(0, 0, 0, 0.2);
}
.form-select {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--bs-text-dark);
  border-radius: 5px;
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0.005);
  border-color: rgba(0, 0, 0, 0.2);
}
.form-select:focus {
  border-color: var(--bs-primary);
}
.form-label {
  margin-bottom: 0.5rem;
  color: #000;
  font-weight: 500;
  font-size: 16px;
}

.overlay-loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(2px);
  color: white;
}

/* Botton Custom */
.btn-tech{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 28px;
    border-radius: 50rem;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    background: linear-gradient(135deg, rgb(71, 204, 255), rgb(37, 99, 235));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: .35s ease;
    box-shadow: 0 0 35px rgb(6 42 79), 0 0 70px rgb(13 42 79);
}

@media (max-width:576px) {
	.btn-tech {
		font-size: 0.8rem !important;
	}
}

.btn-tech::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.65),
        transparent
    );
    transform:translateX(-120%);
    transition:.8s;
}

.btn-tech:hover::before{
    transform:translateX(120%);
}

.btn-tech:hover{
    color:#fff;
    border-color:#37c8ff;
    /*background:rgba(0,170,255,.22);*/
    box-shadow:
        0 0 35px rgba(0,180,255,.35),
        0 0 70px rgba(0,180,255,.15);
    transform:translateY(-3px);
}

.btn-tech i{
    font-size:22px;
    transition:.3s;
}

.btn-tech:hover i{
    transform:translateX(4px) scale(1.1);
}

.btn-tech span,
.btn-tech i{
    position:relative;
    z-index:2;
}


//----------------------------------------------------------//
//	PAGE SCROLL PROGRESS
//----------------------------------------------------------//
@media (min-width:576px) {
	.progress-wrap.active-progress {
		opacity: 1;
	}
}
.progress-wrap {
	position: fixed;
	padding: 4px;
	right: 20px;
    bottom: 4rem;
	width: 2.3rem;
	height: 2.3rem;
	cursor: pointer;
	display: block;
	border-radius: 100%;
	background-color: var(--bs-primary);
	box-shadow: inset 0 0 0 0.1rem rgba(128, 130, 134, 0.25);
	z-index: $zindex-fixed - 20;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);
	@include transition(all 200ms linear, margin-right 0ms);
	&.active-progress {
		visibility: visible;
		transform: translateY(0);
	}
	&:after {
		position: absolute;
		font-family: $font-family-unicons;
		content: $icon-page-progress;
		text-align: center;
		line-height: 2.3rem;
		@include font-size(1.2rem);
		color: white;
		left: 0;
		top: 0;
		height: 2.3rem;
		width: 2.3rem;
		cursor: pointer;
		display: block;
		z-index: 1;
		@include transition(all 200ms linear);
	}
	svg path {
		fill: none;
	}
	svg.progress-circle path {
		stroke: white;
		stroke-width: 4;
		box-sizing: border-box;
		@include transition(all 200ms linear);
	}
}
@media (min-width:576px) {
	.progress-wrap.active-progress {
		opacity: 1;
	}
}

.counter-wrapper .counter,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.ff-serif,
.post-title {
  font-family: "Inter", sans-serif;
  /* font-weight: 700 !important; */
  word-spacing: normal !important;
  letter-spacing: normal !important
}
.display-1 {
  font-size: calc(1.385rem + 1.62vw);
  line-height: 1.1
}
@media (min-width:1200px) {
  .display-1 {
    font-size: 2.6rem
  }
}
.display-2 {
  font-size: calc(1.365rem + 1.38vw);
  line-height: 1.15
}
@media (min-width:1200px) {
  .display-2 {
    font-size: 2.4rem
  }
}
.display-3 {
  font-size: calc(1.355rem + 1.26vw);
  line-height: 1.15
}
@media (min-width:1200px) {
  .display-3 {
    font-size: 2.3rem
  }
}
.display-4 {
  font-size: calc(1.325rem + .9vw);
  line-height: 1.2
}
@media (min-width:1200px) {
  .display-4 {
    font-size: 2rem
  }
}
.display-5 {
  font-size: calc(1.305rem + .66vw);
  line-height: 1.2
}
@media (min-width:1200px) {
  .display-5 {
    font-size: 1.8rem
  }
}
.display-6 {
  font-size: calc(1.285rem + .42vw);
  line-height: 1.25
}
@media (min-width:1200px) {
  .display-6 {
    font-size: 1.6rem
  }
}
.h2.post-title,
h2.post-title {
  font-size: calc(1.265rem + .18vw)
}
@media (min-width:1200px) {
  .h2.post-title,
  h2.post-title {
    font-size: 1.4rem
  }
}
.h3.post-title,
h3.post-title {
  font-size: 1.2rem
}
.counter-wrapper .counter {
  font-size: calc(1.335rem + 1.02vw)
}
@media (min-width:1200px) {
  .counter-wrapper .counter {
    font-size: 2.1rem
  }
}
.counter-wrapper .counter.counter-lg {
  font-size: calc(1.355rem + 1.26vw)
}
@media (min-width:1200px) {
  .counter-wrapper .counter.counter-lg {
    font-size: 2.3rem
  }
}

@media (max-width:576px) {
    .title-hero{
        font-size: calc(1.2rem + 0.5vw + 0.5vh) !important;
        line-height: 1.2 !important;
    }
    .desc-hero{
        font-size: calc(0.6rem + 0.5vw + 0.5vh) !important;
    }
    .title-section{
        font-size: calc(1.385rem + 1.62vw) !important;
    }
    .desc-section, .feature-list li {
        font-size: 0.8rem !important;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .title-hero{
        font-size: calc(2rem + 0.5vw + 0.5vh) !important;
        line-height: 1.2 !important;
    }
    .desc-hero{
        font-size: calc(1rem + 0.5vw + 0.5vh) !important;
    }
    .title-section{
        font-size: calc(2rem + 0.5vw + 0.5vh) !important;
        line-height: 1.2 !important;
    }
    .desc-section, .feature-list li{
        font-size: 1.1rem !important;   
    }
    .btn-tech{
        font-size: 1rem !important;   
    }
    .description-section{
        font-size: 1rem !important;
    }
    .brand-name{
        font-size:15px !important;
    }
    .tagline {
        font-size: 0.8rem !important;
    }
    
    .stats-item .title, .title-keunggulan, .artikel-item .content .title{
        font-size:1.2rem !important;
    }
    .stats-item .desc, .desc-keunggulan, .artikel-item .content .deskripsi, .artikel-home-item .content .deskripsi,.layanan-item .content .deskripsi-singkat {
        font-size: 1rem !important;
    }
    .layanan-item .detail .title{
        font-size:1.1rem !important;
    }
    .layanan-item .detail .desc{
        font-size: 0.7rem !important;
    }
    .artikel-home-item .content .title{
        font-size:1.1rem !important;
    }
    .btn-sumbit-message, .via-whatsapp{
        width: 100% !important;
    }
    .wa-popup-container .btn-tech.btn-wa-popup{
        font-size: 1rem !important;
    }
    .wa-floating-btn{
        font-size: 1rem !important;
    }
    .layanan-item .content .title{
        font-size: 1.2rem !important;
    }
}
@media (max-width: 576px) {
    .description-section {
        font-size: 0.8rem !important;
    }
}
@media (min-width: 1200px) and (max-width: 1450px) {
    .form-section{
        margin: 0px !important;
    }
}