/*!
README - STYLEGUIDE BRIEFLY

Find the style by media query screen width, using Find or CTRL + F
min-width 601px, min-width: 901px, min-width: 1300px, min-width: 1600px,
max-width: 1599px, max-width: 1299px, max-width: 900px, max-width: 600px

Make this stylesheet still readable and after using this file, dont forget to use beautify after development
Thankyou Whello Developer
*/

@media all and (min-width: 2600px) {
  .img-screen {
    width: 1200px;
  }
}

/* > MOBILE */
@media all and (min-width: 601px) {
  body .col-subscribe ul {
    display: flex;
    align-items: center;
    padding-left: 0;
  }

  footer .wh-heading-title h2 {
    font-size: 52px;
  }

  .vc_row.border-btmsection {
    padding-bottom: 38px;
  }

  .badge-number {
    font-size: 48px;
  }

  .badge-description {
    font-size: 16px;
  }

  .max-width-lg > .wpb_column:first-child > .vc_column-inner {
    padding-right: 8px;
  }

  .max-width-lg > .wpb_column:last-child > .vc_column-inner {
    padding-left: 8px;
  }

  .badge-counter-content {
    width: 355px;
  }

  .wh-tab-inner {
    border-radius: 12px;
    background: #fff;
    box-shadow: 7px 18px 32.3px 0 rgba(0, 0, 0, 0.25);
    padding: 32px;
  }
}

@media all and (min-width: 1199px) {
  .col-subscribe > .vc_column-inner > .wpb_wrapper {
    padding: 38px 88px;
  }
}
@media all and (max-width: 1199px) and (min-width: 901px) {
  .col-subscribe > .vc_column-inner > .wpb_wrapper {
    padding: 38px 10px;
  }
}

/* > TABLET */
@media all and (min-width: 901px) {
  .col-fullwidth > .wpb_column:first-child {
    padding-right: 97px;
  }

  .banner-cta > .vc_column-inner > .wpb_wrapper {
    padding: 0 85px;
  }

  .col-logo > .vc_column-inner > .wpb_wrapper {
    padding: 47px 76px 71px 91px;
  }
}
@media all and (min-width: 1441px) {
  .banner-badge-counter {
    left: 20%;
  }

  .banner-google-review {
    right: 20%;
  }
}

@media all and (max-width: 1440px) and (min-width: 1170px) {
  .banner-badge-counter {
    left: 10%;
  }

  .banner-google-review {
    right: 10%;
  }
}
/* >= DESKTOP & LAPTOP */
@media all and (min-width: 1300px) {
  .wh-tab-backdrop {
    position: absolute;
    z-index: 9;
    top: 25%;
    left: 20%;
    transform: translateX(-50%);
  }
}
@media all and (max-width: 1300px) and (min-width: 901px) {
  .banner-google-review {
    right: 55px;
  }
}
/* >= LARGE DESKTOP */
@media all and (min-width: 1600px) {
}

/* < LARGE DESKTOP */
@media all and (max-width: 1599px) {
}

/* >= DESKTOP & LAPTOP && < LARGE DESKTOP */
@media all and (min-width: 1300px) and (max-width: 1599px) {
}

/* <= LARGE TABLET */
@media all and (max-width: 1299px) {
  .vc_row.col-fullwidth > div {
    width: 100%;
  }

  .header-light
    .inline-cta
    .wpb_wrapper
    > .whbutton-wrapper:first-child
    .cta-whbutton {
    background-color: rgba(13, 12, 12, 0.05) !important;
    color: #000 !important;
  }

  body .site-header.header-light .container-header {
    background: rgba(240, 240, 240, 0.7) !important;
  }
}
@media all and (min-width: 601px) and (max-width: 1024px) {
  body .banner-badge-counter {
    bottom: 20px;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* > MOBILE && <= LARGE TABLET */
@media all and (min-width: 601px) and (max-width: 900px) {
  .vc_row.inline-usp .col-usp {
    width: 50%;
  }

  body .banner-wrapper {
    padding: 150px 24px 310px 24px;
  }

  .lp-footer-bottom {
    padding: 40px 30px;
  }

  .vc_row.lp-footer-bottom > div {
    width: 100%;
  }

  .vc_row.inline-usp .col-usp:last-child {
    margin-top: 30px;
  }

  .banner-cta > .vc_column-inner > .wpb_wrapper {
    padding: 0 30px;
  }
}

/* <= TABLET */
@media all and (max-width: 900px) {
  .vc_row.inline-usp {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .col-subscribe {
    margin-top: 38px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 38px;
  }

  .lp-footer-bottom {
    padding: 25px 0px 38px 0px;
  }

  .vc_row.footer-bottom-content {
    padding: 0 24px !important;
  }

  .col-fullwidth > .wpb_column:first-child {
    padding-right: 10px;
  }

  .vc_row.wh-panel-heading > div {
    width: 100%;
  }

  .col-logo > .vc_column-inner,
  .col-subscribe > .vc_column-inner {
    padding: 0 24px;
  }
}

@media all and (max-width: 1024px) {
  .banner-google-review {
    display: none;
  }
}

@media (max-width: 767px) {
  .wh-tabs-nav {
    display: block;
  }

  .wh-tabs-content {
    display: none;
  }

  .wh-tab-nav {
    position: relative;
    padding: 0px;
    background: #eff4f4;
  }

  .tab-header {
    display: flex;
    flex-flow: row wrap;
    padding: 24px;
  }

  .wh-tab-nav .tab-header {
    justify-content: space-between;
    margin-bottom: 0;
  }

  .wh-tab-nav .tab-header:after {
    content: " ";
    display: inline-block;
    width: 12px;
    height: 6px;
    margin-left: auto;
    background: url("/wp-content/uploads/2026/06/chevron-down.svg") no-repeat
      center / contain;
    top: 37px;
    position: absolute;
    right: 24px;
  }

  .wh-tab-nav.active .tab-header:after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 6px;
    background: url("/wp-content/uploads/2026/06/chevron-up.svg") no-repeat
      center / contain;
    margin-left: auto;
    top: 37px;
    position: absolute;
    right: 24px;
  }

  .wh-tab-nav p {
    margin-top: 10px;
  }

  /* panel ditaruh tepat dibawah tab aktif */
  .wh-tab-nav .mobile-panel {
    display: none;
    margin-top: 20px;
  }

  .wh-tab-nav.active .mobile-panel {
    display: block;
  }

  .wh-tab-nav .mobile-panel .wh-tab-bg img {
    width: 100%;
    display: block;
  }

  .wh-tab-nav .mobile-panel .wh-tab-inner {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    max-width: 100%;
    width: 100%;
  }

  .banner-cta:first-child > .vc_column-inner > .wpb_wrapper {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }

  .wh-tabs-content {
    display: none;
  }

  .mobile-panel {
    display: none;
  }

  .wh-tab-nav.active .mobile-panel {
    display: block;
    padding: 25px 20px;
  }
}

.mobile-panel {
  display: none;
}

@media (min-width: 768px) {
  .bannecta-content > .banner-cta:first-child {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
  }
}

/* <= MOBILE */
@media all and (max-width: 600px) {
  .heading-center p {
    text-align: center;
    margin-bottom: 24px;
  }

  body .inline-cta .cta-whbutton .label-cta {
    font-size: 14px;
  }

  footer .wh-heading-title h2 {
    font-size: 40px;
  }

  .badge-number {
    font-size: 33px;
  }

  .badge-counter-content {
    width: 291px;
  }

  body .badge-counter-content .badge-number {
    width: 45%;
    text-align: center;
  }

  h2 {
    --text-5xl: 32px;
  }

  div#whbutton-2017 {
    display: none;
  }

  .col-usp:not(:last-child) {
    margin-bottom: 32px;
  }

  .banner-cta > .vc_column-inner > .wpb_wrapper {
    padding: 48px 9px 48px 9px;
  }

  .lp-menu-footer ul li:not(:last-child) {
    margin-bottom: 24px;
  }

  .lp-menu-footer ul li a {
    font-size: 14px;
  }

  .heading-center .wpb_wrapper {
    margin-bottom: 22px;
  }
  .vc_row.col-fullwidth.no-padding > .wpb_column > .vc_column-inner {
    padding: 0;
  }

  body .banner-badge-counter {
    bottom: 20px;
    z-index: 9;
    left: 50%;
    transform: translateX(-50%);
  }

  .badge-description {
    font-size: 13px;
  }

  .whtab-main-mobile {
    border-radius: 12px;
    background: #fff;
    box-shadow: 7px 18px 32.3px 0 rgba(0, 0, 0, 0.25);
    padding: 24px;
  }

  .wh-tab-backdrop img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .wh-tab-bg,
  .wh-heading-title br {
    display: none;
  }

  .contact-details > div {
    margin-bottom: 16px;
  }

  .img-screen img {
    height: 200px;
    object-fit: fill;
  }
}