/* Font */
/* Montserrat */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap");
/* Lato */
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

/* font baru */
@import url("https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300&family=Nunito+Sans:wght@300&family=Voces&display=swap");
/*penggunaan
font-family: 'Voces', cursive;
font-family: 'Hind Siliguri', sans-serif;
font-family: 'Nunito Sans', sans-serif;
*/
:root {
  --grey: #eee;
  --white: #ffffff;
  --green: #55b559;
  --red: #ff3333;
}
.header-filter::before {
  background: rgba(0, 0, 0, 0);
}
/* font size */
/*.banner h1 {*/
/*    font-size:5.5vw;*/
/*}*/
/*.banner h3 {*/
/*    font-size:3.5vw;*/
/*}*/
/*.banner h4 {*/
/*    font-size:2.5vw;*/
/*}*/
.banner h1 {
  font-size: 3.8vw;
}
.banner h3 {
  font-size: 1.75vw;
}
.banner h4 {
  font-size: 1.25vw;
}

.bg-grey {
  background-color: var(--grey);
}

.bg-green {
  background-color: var(--green);
}

.section {
  padding: 60px 0;
}

.section-padding {
  /*margin-top: 30px;*/
  margin-bottom: 30px;
}
.img-produk {
  margin: 10px;
  width: 400px;
  object-fit: cover;
  height: auto;
  cursor: pointer;
}
.img-produk:hover {
  opacity: 0.8;
}

.section h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-style: italic;
}

footer {
  background-color: var(--white);
}
/* MODAL */

.modal-title {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}
.modal-body p {
  /*font-family: "Lato", sans-serif;*/
  font-family: "Nunito Sans", sans-serif;
}

/*------------------------
          NAVBAR
------------------------*/
.btn-call {
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
  margin-left: 10px;
}
/*-----------------------
        TOP KONTEN
-------------------------*/
.top-content {
  margin-top: -150px;
}

/*-----------------------
        BANNER 
------------------------*/
.title {
  /*font-family: "Montserrat", sans-serif;*/
  font-family: "Voces", cursive;
  /*font-style: italic;*/
  /*font-size: 5.5vw;*/
  font-weight: 900;
  padding-top: 100px;
}
.nav-item a {
  /*font-family: "Montserrat", sans-serif;*/
  font-family: "Voces", cursive;
}
.banner {
  text-align: right;
}
.banner h3 {
  /*font-family: "Montserrat", sans-serif;*/
  font-family: "Hind Siliguri", sans-serif;
  /*font-size: 3vw;*/
}
.banner h4 {
  /*font-family: "Lato", sans-serif;*/
  font-family: "Nunito Sans", sans-serif;
  font-style: italic;
  /*font-size: 18pt;*/
  float: right;
  max-width: 550px;
}

.btn-cpk {
  /*font-family: "Lato", sans-serif;*/
  font-family: "Nunito Sans", sans-serif;
  width: 250px;
  height: 45px;
  box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.75);
  font-size: 12pt;
  font-weight: bold;
  background-color: #0400fc;
  border-radius: 10px;
  transition: all 0.3s;
}
.btn-cpk:hover {
  color: #0400fc;
  box-shadow: 5px 5px 12px -4px rgba(0, 0, 0, 0.75);
  background-color: white;
  border-radius: 15px;
}
.btn-cpk:active {
  background-color: #0400fc;
  border-radius: 15px;
  transition: all 0.2s;
}
/*-----------------------
      TENTANG KAMI
-------------------------*/

/* #owl-tk .item img {
  display: block;
  width: 92%;
  height: auto;
}
#owl-tk .item h1 {
  font-family: "Montserrat", sans-serif;
  max-width: 1000px;
  position: absolute;
  color: #ffffff;
  font-weight: 700;
  top: 55%;
  left: 7.5%;
}
#owl-tk .item .khusus-1-baris {
  max-width: 900px;
  position: absolute;
  color: #ffffff;
  font-weight: 700;
  top: 65%;
  left: 7.5%;
} */
#owl-tk .item img {
  display: block;
  border-radius: 5px;
  width: 97%;
  height: 90%;
}
#owl-tk .item h1 {
  /*font-family: "Montserrat", sans-serif;*/
  font-family: "Voces", cursive;
  text-align: right;
  max-width: 1000px;
  position: absolute;
  color: #ffffff;
  font-weight: 700;
  top: 68%;
  right: 8.5%;
}
#owl-tk .item .khusus-1-baris {
  max-width: 900px;
  position: absolute;
  color: #ffffff;
  font-weight: 700;
  top: 65%;
  left: 7.5%;
}
#owl-hk .item img {
  border-radius: 5px;
  display: block;
  width: 97%;
  height: 90%;
}

#owl-hk .item h1 {
  /*font-family: "Montserrat", sans-serif;*/
  font-family: "Voces", cursive;
  max-width: 1000px;
  position: absolute;
  color: #ffffff;
  font-weight: 700;
  top: 70%;
  left: 10.5%;
}
#owl-hk .item h3 {
  /*font-family: "Montserrat", sans-serif;*/
  font-family: "Voces", cursive;
  max-width: 1000px;
  position: absolute;
  color: #ffffff;
  font-weight: 700;
  top: 80%;
  left: 10.5%;
}
#owl-hk .item span {
  /*font-family: "Montserrat", sans-serif;*/
  font-family: "Voces", cursive;
  color: white;
  width: 250px;
  height: 30px;
  position: absolute;
  top: 90%;
  left: 10.5%;
  font-size: 16pt;
  background-color: rgb(4, 0, 252, 0.5);
}
#owl-kk .item .khusus-1-baris {
  max-width: 900px;
  position: absolute;
  color: #ffffff;
  font-weight: 700;
  top: 65%;
  left: 7.5%;
}
/*-----------------------
      Layanan Kami
-------------------------*/
.layanan-item {
  margin: 10px;
  cursor: pointer;
}
.layanan-item:hover {
  opacity: 0.8;
}

/*-------------------------
          Client 
--------------------------*/
.client-item {
  margin: 10px;
  cursor: pointer;
}
.client-item:hover {
  opacity: 0.8;
}
#client h4 {
  font-weight: bold;
}

#client .owl-theme .owl-nav .disabled {
  opacity: 0;
}
#client .owl-carousel .item img {
  width: 170px;
}
#client .owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 38%;
  right: -25px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #4caf50;
  color: white;
}
#client .owl-carousel .owl-nav button.owl-next:hover {
  box-shadow: 0px 0px 5px 5px rgb(55, 130, 58, 0.75);
  width: 38px;
  height: 38px;
  transition: all 0.3ms;
}
#client .owl-carousel .owl-nav button.owl-prev {
  position: absolute;
  top: 38%;
  left: -25px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #4caf50;
  color: white;
}
#client .owl-carousel .owl-nav button.owl-prev:hover {
  box-shadow: 0px 0px 5px 5px rgb(55, 130, 58, 0.75);
  width: 38px;
  height: 38px;
  transition: all 0.3ms;
}
/*-----------------------
        TESTIMONI 
-------------------------*/
.card-testimoni {
  max-width: 700px;
}
.card-testimoni .card-title {
  /*font-family: "Montserrat", sans-serif;*/
  font-family: "Voces", cursive;
  font-weight: bold;
  border-bottom: 2px solid rgb(0, 0, 0, 0.8);
}
.card-testimoni .card-text {
  /*font-family: "Lato", sans-serif;*/
  font-family: "Nunito Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
}
.card-testimoni img {
  max-height: 220px;
  object-fit: cover;
  width: 100%;
  height: auto;
}
/*-----------------------
      Hubungi Kami
-------------------------*/
.call-card {
  position: relative;
}
.call-card .card-title {
  /*font-family: "Montserrat", sans-serif;*/
  font-family: "Voces", cursive;
}
.call-card .card-text {
  /*font-family: "Lato", sans-serif;*/
  font-family: "Nunito Sans", sans-serif;
}
.call-card .card {
  height: 450px;
  width: auto;
}
.call-card .card .card-body a {
  display: block;
  position: absolute;
  bottom: 15px;
  /*left:55px;*/
}
.call-card .card img {
  max-height: 220px;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/*-----------------------
      Floating Widget
-------------------------*/
#floating-btn2 {
  width: 200px;
  height: 45px;
  border-radius: 10px;
  background: var(--red);
  position: fixed;
  bottom: 63px;
  right: 130px;
  cursor: pointer;
  box-shadow: 0px 2px 5px #666;
}
.text-wa {
  font-size: 14pt;
  font-weight: bold;
  color: var(--white);
  margin-top: 12px;
  margin-left: 15px;
  transition: all 0.3s;
}
.text-wa a {
  color: white;
}
#floating-button {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--green);
  position: fixed;
  bottom: 60px;
  right: 60px;
  cursor: pointer;
  box-shadow: 0px 2px 5px #666;
}
.plus {
  color: var(--white);
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 55px;
  font-size: 38px;
  font-family: "Roboto";
  font-weight: 300;
  /* animation: plus-out 0.3s; */
  transition: all 0.3s;
}
.plus i {
  color: white;
}
#container-floating {
  position: fixed;
  width: 55px;
  height: 55px;
  bottom: 30px;
  right: 30px;
  z-index: 50px;
  z-index: 100;
}
/* #container-floating.is-opened .plus {
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
} */
/* #container-floating.is-opened #floating-btn2 {
  animation: text-in 0.15s linear;
  animation-fill-mode: forwards;
} */

/* #container-floating .is-opened #floating-btn2 {
  animation: text-out 0.15s linear;
  animation-fill-mode: forwards;
} */
@keyframes text-in {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}
/* @keyframes text-out {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
} */
.close {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: close-out 0.3s;
}
#container-floating.is-opened .close {
  animation: close-in 0.2s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}
@keyframes close-in {
  from {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
@keyframes close-out {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
}
@keyframes plus-in {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}
@keyframes plus-out {
  from {
    opacity: 0;
    transform: rotateZ(180deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
/* btn lingkaran */
.nds {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  position: fixed;
  z-index: 300;
  transform: scale(0);
  transition: width 0.25s;
  cursor: pointer;
}
.l-nds {
  display: block;
  font-size: 20pt;
  margin-left: 9px;
  margin-top: 8px;
  color: var(--white);
}
.nd1 {
  background: var(--green);
  right: 110px;
  bottom: 150px;
  animation-delay: 0.2s;
  animation: bounce-out-nds 0.3s linear;
  animation-fill-mode: forwards;
}
.nd2 {
  background: var(--green);
  right: 110px;
  bottom: 200px;
  animation-delay: 0.15s;
  animation: bounce-out-nds 0.15s linear;
  animation-fill-mode: forwards;
}
.nd3 {
  background: var(--green);
  right: 110px;
  bottom: 250px;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode: forwards;
}
.nd4 {
  background: var(--green);
  right: 110px;
  bottom: 300px;
  animation-delay: 0.08s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode: forwards;
}
@keyframes bounce-nds {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounce-out-nds {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}
#container-floating.is-opened .nds {
  animation: bounce-nds 0.1s linear;
  animation-fill-mode: forwards;
}
#container-floating.is-opened .nd2 {
  animation-delay: 0.08s;
}
#container-floating.is-opened .nd3 {
  animation-delay: 0.15s;
}
#container-floating.is-opened .nd4 {
  animation-delay: 0.2s;
}
/* btn nama */
.sdn {
  width: 160px;
  height: 40px;
  border: 2px solid var(--red);
  border-radius: 15px;
  position: fixed;
  z-index: 300;
  transform: scale(0);
  transition: width 0.25s;
  cursor: pointer;
}
.l-sdn {
  display: block;
  margin-top: 6px;
  margin-left: 45px;
  font-size: 15pt;
  font-weight: 400;
  color: var(--green);
}
.sd1 {
  background: var(--white);
  right: 160px;
  bottom: 150px;
  animation-delay: 0.2s;
  animation: bounce-out-sdn 0.3s linear;
  animation-fill-mode: forwards;
}
.sd2 {
  background: var(--white);
  right: 160px;
  bottom: 200px;
  animation-delay: 0.15s;
  animation: bounce-out-sdn 0.15s linear;
  animation-fill-mode: forwards;
}
.sd3 {
  background: var(--white);
  right: 160px;
  bottom: 250px;
  animation-delay: 0.1s;
  animation: bounce-out-sdn 0.1s linear;
  animation-fill-mode: forwards;
}
.sd4 {
  background: var(--white);
  right: 160px;
  bottom: 300px;
  animation-delay: 0.08s;
  animation: bounce-out-sdn 0.1s linear;
  animation-fill-mode: forwards;
}
@keyframes bounce-sdn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounce-out-sdn {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}
#container-floating.is-opened .sdn {
  animation: bounce-sdn 0.1s linear;
  animation-fill-mode: forwards;
}
#container-floating.is-opened .sd2 {
  animation-delay: 0.08s;
}
#container-floating.is-opened .sd3 {
  animation-delay: 0.15s;
}
#container-floating.is-opened .sd4 {
  animation-delay: 0.2s;
}
.reminder {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  line-height: 40px;
}

.box-sos {
  padding-top: 80px;
}
.t-sos {
  padding-top: 10px;
}
/*-----------------------
          MEDIA
-------------------------*/
@media (min-width: 1900px) {
  /* client */
  #client .owl-carousel .item img {
    width: 220px;
  }
  #client .owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 38%;
    right: -15px;
    width: 50px;
    height: 50px;
  }
  #client .owl-carousel .owl-nav button.owl-next:hover {
    width: 53px;
    height: 53px;
  }
  #client .owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    top: 38%;
    left: -30px;
    width: 50px;
    height: 50px;
  }
  #client .owl-carousel .owl-nav button.owl-prev:hover {
    width: 53px;
    height: 53px;
  }

  .top-content {
    margin-top: -400px;
  }
  #owl-tk .item h1 {
    top: 72%;
    right: 12%;
  }
  #owl-tk .item .khusus-1-baris {
    top: 69%;
    right: 10.5%;
  }
  .card-testimoni {
    max-width: 1000px;
    height: auto;
  }
  .card-testimoni img {
    max-height: 300px;
    object-fit: cover;
    width: 100%;
    height: auto;
  }
  .card-testimoni .card-title {
    font-size: 22pt;
  }
  .card-testimoni .card-text {
    font-size: 16pt;
  }
  .call-card .card {
    height: 580px;
    width: auto;
  }
  .call-card .card img {
    max-height: 280px;
    object-fit: cover;
    width: 100%;
    height: auto;
  }
  .call-card .card .card-body a {
    font-size: 13pt;
    width: 250px;
    height: 50px;
    display: block;
    position: absolute;
    left: 55px;
    bottom: 30px;
  }
  .call-card .card-title {
    font-size: 18pt;
  }
  .call-card .card-text {
    font-size: 14pt;
  }
}
@media screen and (max-width: 1900px) and (min-width: 1600px) {
  .top-content {
    margin-top: -50px;
  }
}
@media (max-width: 1600px) {
  /*.top-content {*/
  /*  margin-top: -300px;*/
  /*}*/
  .call-card .card .card-body a {
    left: 55px;
  }
}

@media screen and (max-width: 1600px) and (min-width: 1367px) {
  .top-content {
    margin-top: -160px;
  }
}
@media (max-width: 1366px) {
  .top-content {
    margin-top: -190px;
  }
  .call-card .card {
    height: 420px;
  }
  .call-card .card .card-body a {
    left: 40px;
  }
  .call-card .card img {
    max-height: 180px;
    object-fit: cover;
    width: 100%;
    height: auto;
  }
  .title {
    padding-top: 120px;
  }
}
@media (max-width: 1200px) {
  /*  .call-card .card .card-body a {*/
  /*  left: 30px;*/
  /*  bottom: 30px;*/
  /*}*/
  /*  .call-card .card img {*/
  /*  max-height: 180px;*/
  /*  object-fit: cover;*/
  /*  width: 100%;*/
  /*  height: auto;*/
  /*}*/
}
/*@media (min-width: 992px) {*/
/*    .call-card .card .card-body a {*/
/*    left: 30px;*/
/*    bottom: 30px;*/
/*  }*/
/*    .call-card .card img {*/
/*    max-height: 180px;*/
/*    object-fit: cover;*/
/*    width: 100%;*/
/*    height: auto;*/
/*  }*/
/*}*/
@media screen and (max-width: 991px) {
  .hk {
    width: 12rem;
  }
  #owl-tk .item h1 {
    top: 52%;
    right: 8%;
  }
  /*@media (min-width: 760px) {*/
  /*    .top-content {*/
  /*        margin-top: -350px;*/
  /*    }*/
  /*}*/
  /* @media screen and (min-width: 767px and max-width 770px) {
  #owl-demo .item span {
    max-width: 900px;
    position: absolute;
    color: #ffffff;
    font-weight: bold;
    font-size: 16pt;
    top: 50%;
    left: 7.5%;
  }*/
}
@media screen and (max-width: 730px) and (min-width: 700px) {
  .banner h1 {
    font-size: 3.8vw;
  }
  .banner h3 {
    font-size: 1.75vw;
  }
  .banner h4 {
    font-size: 1.25vw;
  }
}
@media screen and (max-width: 750px) {
  /*  .section {*/
  /*  padding-top: -20px;*/
  /*  padding-bottom: -20px;*/
  /*}*/
  /*.section-padding {*/
  /*  margin-top: 0px;*/
  /*  margin-bottom: 0px;*/
  /*}*/
  .banner h1 {
    font-size: 7.3vw;
  }
  .banner h3 {
    font-size: 4.5vw;
  }
  .banner h4 {
    font-size: 3vw;
  }
  .title {
    /*font-family: "Montserrat", sans-serif;*/
    font-family: "Voces", cursive;
    font-style: italic;
    /*font-size: 15vw;*/
    font-weight: 900;
    padding-top: 0px;
  }
  #floating-btn2 {
    bottom: 50px;
    right: 95px;
  }
  #floating-button {
    bottom: 47px;
    right: 30px;
  }
  .section {
    padding: 10px 0;
  }
  .call-card .card {
    height: 480px;
    width: auto;
  }
  .call-card .card .card-body a {
    width: 200px;
    left: 21%;
  }
  .call-card .card img {
    max-height: 280px;
    object-fit: cover;
    width: 100%;
    height: auto;
  }
  .banner h4 {
    /*font-family: "Lato", sans-serif;*/
    font-family: "Nunito Sans", sans-serif;
    /*font-size: 4vw;*/
    float: right;
    max-width: 330px;
  }
  .top-content {
    margin-top: -80px;
    margin-right: 40px;
  }
  /* .img-produk {
    width: 400px;
    height: 400px;
    margin: 0;
    margin-bottom: 10px;
    margin-top: 10px;
  } */
  .kh {
    width: 20rem;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  /* #container-floating {
    display: none;
  } */
  .box-sos {
    padding-top: 0px;
  }
  .t-sos {
    padding-top: 0px;
    text-align: left;
    font-size: 10pt;
  }
  .t-sos h3 {
    padding-top: 5px;
    font-size: 16pt;
  }
  #owl-tk .item img {
    display: block;
    width: 100%;
    height: auto;
  }
  #owl-tk .item h1 {
    max-width: 900px;
    position: absolute;
    color: #ffffff;
    font-weight: 700;
    font-size: 16pt;
    top: 58%;
    right: 4.3%;
  }
  #owl-tk .item .khusus-1-baris {
    max-width: 900px;
    position: absolute;
    color: #ffffff;
    font-weight: 700;
    top: 54%;
    left: 4.3%;
  }
  #owl-hk .item img {
    display: block;
    width: 100%;
    height: auto;
  }
  #owl-hk .item h1 {
    max-width: 900px;
    position: absolute;
    color: #ffffff;
    font-weight: 700;
    font-size: 16pt;
    top: 45%;
    left: 4.3%;
  }
  #owl-hk .item h3 {
    top: 57%;
    left: 4.3%;
    font-size: 8pt;
  }
  #owl-hk .item span {
    font-size: 9pt;
    width: 120px;
    height: 24px;
    top: 85%;
    left: 4.3%;
  }
  .layanan-item {
    width: 90%;
  }
  .client-item {
    width: 90%;
  }

  /* client */
  #client .owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 25%;
    right: -25px;
  }
  #client .owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    top: 25%;
    left: -25px;
  }
  .client-item {
    width: 90%;
  }
  #client h4 {
    text-align: center;
  }

  /* .btn-cpk {
    font-family: "Lato", sans-serif;
    width: 170px;
    height: 45px;
    box-shadow: 3px 3px 10px -4px rgba(0, 0, 0, 0.75);
    font-size: 11pt;
    font-weight: bold;
    background-color: #0400fc;
    border-radius: 10px;
    transition: all 0.3s;
  } */
}