@media screen and (max-width: 768px) {
    html {
      margin-top: 0px !important;
    }

    button:focus {
      outline: none !important;
    }

    .slick-slide {
      min-height: 0px;
    }

    /* POPUP */

    @keyframes closePopUp {
      from {
        visibility: visible;
      }

      to {
        visibility: hidden;
      }
    }

    .popUpClose {
      animation-name: closePopUp;

      animation-duration: 500ms;

      animation-timing-function: ease;
    }

    .pop-up-overlay {
      display: none;
    }

    .pop-up-overlay-m {
      width: 100vw;
      height: 100vh;
      position: fixed;
      background: rgba(0, 0, 0, 0.7);
      z-index: 10;
      /* visibility: hidden; */
      transition: visibility 0.5s, opacity 1s ease;
    }

    .pop-up-overlay-m .btn-over {
      text-decoration: none;
      width: 140px;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 86%;
      left: 50%;
    }

    .pop-up-overlay-m .btn-banner-flexM {
      position: absolute;
      top: 86%;
      left: 33%;
      display: flex;
      gap: 5%;
    }

    .popup-show {
      visibility: visible;
      opacity: 1;
      transition: visibility 0.5s, opacity 1s ease;
    }

    .popup-hidden {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0.5s, opacity 1s linear;
    }

    .pop-up-overlay-m .img-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
    }

    #closingPopupM {
      position: absolute;
      top: 5%;
      right: -2%;
      transform: translate(-50%, -50%);
      background: transparent;
      border: none;
      padding: 0px;
      max-width: 28px;
    }

    /* popup */

    .floating-popup {
      position: fixed;
      transition: all 0.5s ease;
      bottom: 12%;
      right: 0%;
      opacity: 1;
      z-index: 5;
      display: block;
      justify-content: flex-end;
      width: 75%;
    }

    .closeBtn {
      z-index: 100;
      position: absolute;
      top: 35%;
      left: -15%;
      max-width: 100px;
    }

    .closeBtn img {
      width: 30%;
    }

    .whatsapp-popup button {
      width: 100%;
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      padding: 0px;
      z-index: 10;
    }

    .whatsapp-btn-m {
      position: fixed;
      bottom: 2%;
      right: 2%;
      opacity: 1;
      z-index: 5;
      transition: all 0.5s ease-out;
      /* display: none; */
    }

    .whatsapp-btn-m button {
      max-width: 55px;
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      border-radius: 50%;
      padding: 0px;
      z-index: 10;
    }

    /*---*/

    .whatsapp-btn {
      display: none;
    }

    .pop-up-overlay {
      display: none;
    }

    .back-to-top {
      display: none;
    }

    .desktop-container {
      display: none;
    }

    .mobile-container {
      display: block;
    }

    .hero-m {
      position: relative;
      padding-top: 2%;
    }

    .hero-m .booking-area {
      position: absolute;
      top: 125%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/07/BG-Sidebar-Linen-scaled.webp);
      background-size: cover;
      width: 90%;
      border-radius: 10px;
      z-index: 1;
      padding: 40px 30px;
    }

    .hero-m .booking-area .booking-title {
      font: normal normal 500 22px/30px Accia Piano;
      letter-spacing: 0px;
      color: #000000;
      padding-bottom: 35px;
      text-align: center;
      text-transform: uppercase;
    }

    .hero-m .booking-area .label {
      text-align: left;
      font: normal normal 500 16px/20px Accia Piano;
      letter-spacing: 0.3px;
      color: #000000;
    }

    .hero-m .booking-area .date-m,
    .hero-m .booking-area .guests-no-m {
      text-align: left;
      font: normal normal 300 16px/20px Accia Piano;
      letter-spacing: 0px;
      color: #081b05;
      text-transform: capitalize;
    }

    .hero-m .booking-area .date-m {
      border-bottom: 1px #000 solid;
      padding-bottom: 5px;
      margin-bottom: 15px;
    }

    .hero-m .booking-area .guests-no-m {
      padding: 0px;
      border: 0px;
      background: transparent;
      width: 100%;
      border-bottom: 1px #000 solid;
      padding-bottom: 5px;
    }

    .hero-m .booking-area .guests-no-m:focus {
      outline: none;
    }

    .hero-m .booking-area .book-button-m {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 500 16px / 25px Accia Piano;
      letter-spacing: 0px;
      color: #ffffff;
      border: 1px solid #6d4621;
      padding: 8px 5px;
      text-align: center;
      text-decoration: none;
      width: 190px;
      background: #6d4621;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 9999999999999;
      position: relative;
      border-radius: 10px;
      margin: 40px auto 0px auto;
    }

    .section-2-m {
      position: relative;
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/Group-5766-scaled.webp);
      background-size: 100% 100%;
      padding: 105% 20px 40px 20px;
    }

    .section-2-m h2 {
      text-align: left;
      font: normal normal 300 25px/35px Accia Piano;
      letter-spacing: 1.1px;
      color: #714923;
      -webkit-text-stroke: 1px #714923;
      text-transform: uppercase;
      padding: 30px 0px;
    }

    .section-2-m p {
      text-align: left;
      font: normal normal 500 16px/30px Avenir;
      letter-spacing: 0.38px;
      color: #714923;
    }

    .section-2-m .button {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 300 16px / 25px Accia Piano;
      letter-spacing: 0px;
      color: #fff;
      background-color: #2D301E;
      border: 1px solid #2D301E;
      padding: 8px 5px;
      text-align: center;
      text-decoration: none;
      width: 150px;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
      margin: 30px 0px 0px 0px;
    }

    /* Section 3M */
    .section3M {
      width: 100%;
      position: relative;
    }

    .section3M .head3M {
      width: 100%;
      position: relative;
      background-image: url('https://khastanahadiubud.com/wp-content/uploads/2025/03/bgSmallM.webp');
      background-size: cover;
      background-position: center;
      padding: 20% 20px;
    }

    .head3M h2 {
      font: normal italic 300 20px/30px Accia Piano;
      color: #714923;
      -webkit-text-stroke: 1px #714923;
      text-align: center;
    }

    .section3M .smallerM,
    .section3M .largerM {
      width: 100%;
      position: relative;
    }

    .section3M .smallerM .bgGroups,
    .section3M .largerM .bgGroups {
      width: 100%;
      display: block;
    }

    .smallerM .contentSmall {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .contentSmall h2,
    .contentLarge h2 {
      font: normal normal 400 22px/30px Recoleta;
      text-align: center;
      color: #FFFFFF;
      -webkit-text-stroke: 0.5px #FFFFFF;
      margin-bottom: 10px;
    }

    .largerM .contentLarge {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .contentSmall .btnSmallWA,
    .contentLarge .btnLargeWA {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .btnSmallWA a,
    .btnLargeWA a {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 300 18px / 30px Accia Piano;
      letter-spacing: 0.5px;
      color: #714923;
      -webkit-text-stroke: 0.3px #714923;
      border: 1px solid #D7D1B2;
      padding: 5px 5px;
      text-align: center;
      text-decoration: none;
      width: 180px;
      background: #D7D1B2;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
    }

    /* SectionCTA2 */
    .sectionCTA-M {
      width: 100%;
      position: relative;
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2025/03/BGCTA2-1.webp);
      background-position: center;
      background-size: cover;
      padding: 40px 30px 20% 30px;
      overflow: hidden;
    }

    .sectionCTA-M h2 {
      font: normal italic 300 20px/30px Accia Piano;
      text-align: center;
      color: #714923;
      -webkit-text-stroke: 1px #714923;
      margin-bottom: 15px;
    }

    .sectionCTA-M p {
      font: normal normal 400 18px/27px Avenir;
      text-align: center;
      color: #714923;
      margin-bottom: 15px;
    }

    .sectionCTA-M .sec-btnWA {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .sec-btnWA a {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 500 18px / 30px Avenir;
      letter-spacing: 0.5px;
      color: #fff;
      border: 1px solid #2D301E;
      padding: 5px 5px;
      text-align: center;
      text-decoration: none;
      width: 180px;
      background: #2D301E;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
      margin-bottom: 20%;
    }

    .sectionCTA-M .people {
      width: 40%;
      display: block;
      position: absolute;
      top: 80%;
      left: 85%;
      transform: translate(-50%, -50%);
    }

    /* Section Harvest M */
    .sectionHarvest-M {
      width: 100%;
      position: relative;
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2025/03/BGHarvestM.webp);
      background-position: top center;
      background-size: cover;
      padding: 35% 30px 15% 30px;
    }

    .sectionHarvest-M h2 {
      font: normal italic 300 20px/30px Accia Piano;
      text-align: center;
      color: #714923;
      -webkit-text-stroke: 1px #714923;
      margin-bottom: 40px;
    }

    .sectionHarvest-M img {
      width: 100%;
      display: block;
      margin-inline: auto;
      margin-bottom: 30px;
    }

    .sectionHarvest-M h3 {
      font: normal normal 300 20px/30px Accia Piano;
      text-align: center;
      color: #714923;
      -webkit-text-stroke: 1px #714923;
      margin-bottom: 30px;
      text-transform: uppercase;
    }

    .sectionHarvest-M p {
      font: normal normal 500 17px/30px Avenir;
      text-align: center;
      color: #714923;
    }


    /* Section USP Mobile Start */
    .uspM-section {
      padding: 50px 0px 30px 0px;
    }

    .uspM-section .head-USPM {
      font: normal italic 500 25px/35px Accia Piano;
      color: #714923;
      text-align: center;
      margin-bottom: 8%;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #714923;
    }

    .slider-uspM {
      margin-bottom: 3%;
    }

    .uspM-section .slider-uspM .slick-track {
      display: flex;
      align-items: center;
    }

    .uspM-section .slider-uspM .slick-slide img {
      width: 100%;
      margin: 0px auto;
      opacity: 1;
      padding: 0px 10px;
      transition: all 2s ease-out;
    }

    .uspM-section .slider-uspM .slick-current img {
      width: 100%;
      margin: 0px auto;
      opacity: 1;
      padding: 0px 0px;
    }

    .slider-text {
      padding: 0 5%;
    }

    .slider-text h2 {
      font: normal normal 500 20px/30px Accia Piano;
      color: #714923;
      margin-bottom: 5%;
      text-align: center;
    }

    .slider-text p {
      font: normal normal 400 15px/30px Avenir;
      color: #714923;
      text-align: center;
    }

    /* Section USP Mobile End */

    .section-3-m {
      position: relative;
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/09/bg-grey-baru.webp);
      background-size: 100% 100%;
    }

    .section-3-m .img-atas {
      width: 100%;
      padding-bottom: 40px;
    }

    .section-3-m .img-poster {
      padding: 0px 20px;
    }

    .section-3-m h2 {
      text-align: left;
      font: normal normal 500 23px/30px Accia Piano;
      letter-spacing: 1.1px;
      color: #714923;
      text-transform: uppercase;
      padding: 30px 20px;
    }

    .section-3-m p {
      text-align: left;
      font: normal normal 400 16px/25px Avenir;
      letter-spacing: 0.38px;
      color: #714923;
      padding: 0px 20px 40px 20px;
    }

    .section-4-m {
      position: relative;
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/engin-akyurt-aNPWJlyUiEA-unsplash.webp);
      background-size: cover;
      padding: 40px 0px;
    }

    .section-4-m h3 {
      font: normal normal 500 23px/30px Accia Piano;
      letter-spacing: 1.1px;
      color: #ffffff;
      text-transform: uppercase;
      padding: 0px 30px 30px 30px;
      text-align: center;
    }

    .thi-feature-slide {
      width: 100%;
    }

    .thi-feature-slide .slider-for-22 {
      padding: 0px 20px;
      width: 100%;
      margin-bottom: 0px;
      /* max-height: 100px; */
      height: max-content;
      /*right: 0px;*/
    }

    .thi-feature-slide .slider-for-22 div {
      margin: 0 auto;
      text-align: center;
    }

    .thi-feature-slide .slider-for-22 div h2 {
      text-align: left;
      padding: 0px 50px 0px 0px;
      font: normal normal 300 19px/30px Accia Piano;
      letter-spacing: 0.5px;
      color: #ffffff;
      text-transform: capitalize;
    }

    .thi-feature-slide .slider-nav-22 {
      width: 100%;
      /* max-height: 320px; */
      height: max-content;
    }

    .slider-nav-22 .slick-dots {
      bottom: -170px;
    }

    .slider-nav-22 .slick-slide img {
      /* width: 85%;
    padding-right: 0px;
    margin-left: -20px !important;
    margin-right: 0px !important; */
      padding: 0px 20px;
    }

    .section-4-m .slider-22 .button {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 500 16px / 25px Accia Piano;
      letter-spacing: 0.5px;
      color: #eae8e2;
      border: 1px solid #2d301e;
      padding: 5px 5px;
      text-align: center;
      text-decoration: none;
      width: 140px;
      background: #2d301e;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
      margin-top: 20px;
    }

    .section-4-m .right-arrow-villa {
      position: absolute;
      top: 45%;
      left: 90%;
      transform: translate(-50%, -50%);
      max-width: 45px;
    }

    .section-5-m {
      background-color: #e0dcd2;
    }

    .section-5-m .img-atas {
      padding-bottom: 40px;
    }

    .section-5-m h2 {
      font: italic normal 500 23px/30px Accia Piano;
      letter-spacing: 1.1px;
      color: #000000;
      text-transform: capitalize;
      padding: 30px 20px;
    }

    .section-5-m p {
      font: normal normal 400 16px/25px Avenir;
      letter-spacing: 0.38px;
      color: #000000;
      padding: 0px 20px;
      margin-bottom: 20px;
    }

    .wp-gr {
      margin-left: 0px !important;
    }

    .review-slider-m {
      max-height: 250px;
      padding: 0px 10px;
      margin-bottom: 0px !important;
    }

    .review-slider-m img {
      padding-right: 10px;
    }

    .review-slider-m .slick-slide {
      max-height: 250px;
    }

    .eapps-instagram-feed {
      padding: 0px 20px 20px 20px;
    }

    .eapps-instagram-feed-container .eapps-instagram-feed-title {
      display: block;
      font: italic normal 500 23px / 30px Accia Piano;
      letter-spacing: 1.1px;
      color: #000000;
    }

    .eapps-instagram-feed-posts-grid-load-more-enabled {
      display: none !important;
    }

    /* Sound */
    .popup-sound-m {
      background-color: #b6935d;
      padding: 10px;
      width: auto;
      border-radius: 25px;
      font-family: Arial, sans-serif;
      color: white;
      text-align: center;
      position: absolute;
      top: 65%;
      left: 5%;
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

    .popup-sound-m #play-btn-content-m {
      display: flex;
      align-items: center;
    }

    .popup-sound-m #play-button-m {
      background-color: transparent;
      border: none;
      cursor: pointer;
      width: 30px;
    }

    .popup-sound-m .line-m {
      width: 70%;
      margin-right: 12%;
    }

  }

  @media screen and (min-width: 769px) and (max-width: 991px) {

    html,
    body {
      margin-top: 0px !important;
      height: auto;
    }

    /* WHATSAPP POPUP */

    /* .whatsapp-popup,
  .floating-popup {
    display: none;
  }

  .whatsapp-btn-m {
    display: none;
  } */

    .whatsapp-btn {
      position: fixed;
      z-index: 100;
      bottom: 3%;
      right: 1%;
      opacity: 1;
    }

    .whatsapp-btn button {
      /* max-width: 75px; */
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      border-radius: 50%;
      z-index: 10;
      padding: 0px;
    }

    .floating-popup {
      position: fixed;
      transition: all 0.5s ease;
      bottom: 9%;
      right: 1%;
      opacity: 1;
      z-index: 5;
      display: block;
      justify-content: flex-end;
      width: 18%;
    }

    .closeBtn {
      z-index: 100;
      position: absolute;
      top: 35%;
      left: -10%;
      max-width: 100px;
    }

    .closeBtn img {
      width: 30%;
    }

    .whatsapp-popup button {
      width: 100%;
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      padding: 0px;
      z-index: 10;
    }

    .whatsapp-btn-m {
      position: fixed;
      bottom: 2%;
      right: 2%;
      opacity: 1;
      z-index: 5;
      transition: all 0.5s ease-out;
      /* display: none; */
    }

    .whatsapp-btn-m button {
      max-width: 55px;
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      border-radius: 50%;
      padding: 0px;
      z-index: 10;
    }

    /* POPUP */

    @keyframes closePopUp {
      from {
        visibility: visible;
      }

      to {
        visibility: hidden;
      }
    }

    .popUpClose {
      animation-name: closePopUp;

      animation-duration: 500ms;

      animation-timing-function: ease;
    }

    .pop-up-overlay-m {
      display: none;
    }

    .pop-up-overlay {
      width: 100vw;
      height: 100vh;
      position: fixed;
      background: rgba(0, 0, 0, 0.7);
      z-index: 3;
      visibility: hidden;
      transition: visibility 0.5s, opacity 1s ease;
    }

    .pop-up-overlay .btn-over {
      width: 170px;
      transform: translate(-50%, -50%);
      cursor: pointer;
      position: absolute;
      top: 78%;
      left: 73%;
    }

    .pop-up-overlay .btn-banner-flex {
      position: absolute;
      top: 78%;
      display: flex;
      gap: 5%;
      left: 63%;
    }

    /* .pop-up-overlay .btn-over:hover {
    color: #6a4321;
    border: 1px solid #6a4321;
    background: transparent;
  } */

    .popup-show {
      visibility: visible;
      opacity: 1;
      transition: visibility 0.5s, opacity 1s ease;
    }

    .popup-hidden {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0.5s, opacity 1s linear;
    }

    .pop-up-overlay .mobile-popup {
      display: none !important;
    }

    .pop-up-overlay .img-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 47%;
    }

    #closingPopup {
      position: absolute;
      top: 0%;
      right: -3%;
      transform: translate(-50%, -50%);
      background: transparent;
      border: none;
      padding: 0px;
      max-width: 28px;
    }

    /* popup */

    .back-to-top {
      display: none;
      position: fixed;
      bottom: 30px;
      right: 30px;
      max-width: 100px;
      z-index: 10;
    }

    #about,
    #projects {
      display: block !important;
    }

    #services,
    .features-section {
      justify-content: normal !important;
      flex-direction: row !important;
    }

    button:focus {
      outline: none !important;
    }

    .hero {
      position: relative;
    }

    .hero img {
      display: block;
      width: 100%;
    }

    .booking-bar {
      width: 90%;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/07/BG-Sidebar-Linen-scaled.webp);
      background-size: cover;
      z-index: 1;
      border-radius: 15px;
      padding: 20px 0px 30px 0px;
    }

    .booking-bar .booking-title {
      font: normal normal 500 30px/40px Accia Piano;
      letter-spacing: 1.5px;
      text-align: center;
      width: 100%;
      text-transform: uppercase;
      padding: 10px 0px 30px 0px;
    }

    .booking-bar .booking-flex {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

    .booking-bar .booking-flex .check-in,
    .booking-bar .booking-flex .check-out,
    .booking-bar .booking-flex .guests {
      text-align: center;
    }

    .booking-flex .item-flex {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

    .booking-flex .buttons {
      margin-left: 10px;
    }

    .booking-flex .buttons img {
      max-width: 25px;
      padding-top: 5px;
    }

    .booking-flex .buttons .up img {
      -webkit-transform: scaleY(-1);
      transform: scaleY(-1);
    }

    .booking-flex .book-button {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 300 18px/45px Accia Piano;
      text-transform: uppercase;
      letter-spacing: -1px;
      color: #f3f1eb;
      border: 1px solid #6d4621;
      padding: 10px 8px;
      text-align: center;
      text-decoration: none;
      height: 100%;
      width: 250px;
      background: #6d4621;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
    }

    .booking-flex .button-container {
      height: 100%;
    }

    .booking-bar .title {
      font: normal normal 300 20px/30px Accia Piano;
      letter-spacing: 0px;
      color: #081c04;
      text-transform: uppercase;
    }

    .booking-bar .date,
    .booking-bar .guests-no {
      font: normal normal 300 50px/60px Accia Piano;
      letter-spacing: 0px;
      color: #081b05;
      text-transform: capitalize;
    }

    .section-2 {
      position: relative;
      width: 100%;
    }

    .section-2 .img-bg {
      width: 100%;
      display: block;
    }

    .section-2 .overlay-item {
      position: absolute;
      top: 57%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      display: flex;
      width: 100%;
      align-items: center;
      padding: 0px 40px;
      justify-content: space-between;
    }

    .section-2 .overlay-item .overlay-text {
      width: 45%;
      margin-top: 5%;
    }

    .section-2 .overlay-item h2 {
      text-align: left;
      font: normal normal 400 28px/35px Accia Piano;
      letter-spacing: 1.02px;
      color: #714923;
      text-transform: uppercase;
      text-align: center;
    }

    .section-2 .overlay-item h2 span {
      font: italic normal 400 50px/60px Accia Piano;
    }

    .section-2 .overlay-item p {
      text-align: center;
      font: normal normal 500 18px/30px Accia Piano;
      letter-spacing: 0.45px;
      color: #714923;
      padding: 30px 0px;
    }

    .section-2 .overlay-item img {
      max-width: 45%;
      display: block;
    }

    .section-2 .overlay-item .button {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 500 20px / 30px Accia Piano;
      letter-spacing: 1px;
      color: #664220;
      border: 1px solid #FFFFF3;
      padding: 12px 8px;
      text-align: center;
      text-decoration: none;
      width: 250px;
      background: transparent;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
      margin-inline: auto;
      background-color: #FFFFF3;
    }

    .section-2 .overlay-item .button:hover {
      background: transparent;
      color: #664220;
      border: 1px solid #664220;
    }

    /* Section 2B */
    .section-2b {
      position: relative;
      width: 100%;
      background-image: url('https://khastanahadiubud.com/wp-content/uploads/2025/03/bg2Groups-scaled.webp');
      background-position: top center;
      background-size: cover;
      padding-bottom: 180px;
      padding-inline: 30px;
      padding-top: 10%;
      overflow: hidden;
    }

    .section-2b .head2B {
      font: normal italic 500 25px/35px Accia Piano;
      text-align: left;
      color: #664220;
      width: 37%;
      position: absolute;
      bottom: 10%;
      left: 3%;
      letter-spacing: 0;
      -webkit-text-stroke: 1px #664220;
    }

    .section2b-content {
      width: 100%;
      position: relative;
      /* padding-inline: 10%; */
      display: flex;
      gap: 5%;
      margin-bottom: 15%;
    }

    .section2b-content .image-left,
    .section2b-content .image-right {
      width: 50%;
      position: relative;
      overflow: hidden;
    }

    .image-left::before,
    .image-right::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0);
      transition: background 0.3s ease-in-out;
    }

    .image-left:hover::before,
    .image-right:hover::before {
      background: rgba(0, 0, 0, 0.5);
      /* Overlay hitam transparan saat hover */
    }

    .image-left .text-left,
    .image-right .text-right {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
    }

    .text-left a,
    .text-right a {
      font: normal normal 400 35px/45px Recoleta;
      text-align: center;
      color: #fff;
      text-decoration: none;
      /* Hilangkan underline bawaan */
      transition: text-decoration 0.3s ease-in-out;
    }

    .image-left:hover .text-left a,
    .image-right:hover .text-right a {
      text-decoration: underline;
    }

    .image-left .left-image,
    .image-right .right-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .section-2b .ctaSection {
      width: 65%;
      position: absolute;
      bottom: 0;
      right: -6%;
    }

    .section-2b .btnCTA {
      width: 41%;
      position: absolute;
      bottom: 3%;
      right: 15%;
      z-index: 3;
    }

    .btnCTA p {
      font: normal normal 500 16px/25px Accia Piano;
      color: #664220;
      text-align: center;
      margin-bottom: 15px;
    }

    .btnCTA .contentWA {
      width: 100%;
      display: flex;
    }

    .contentWA a {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 300 20px / 30px Accia Piano;
      letter-spacing: 1px;
      color: #FFFFFF;
      -webkit-text-stroke: 0.3px #FFFFFF;
      border: 1px solid #2D301E;
      padding: 12px 8px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      width: 250px;
      background: transparent;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
      margin-inline: auto;
      background-color: #2D301E;
    }

    .section-2b .ctaSection a {
      width: 40%;
    }

    .ctaSection a img {
      width: 100%;
      display: block;
    }



    /* Section USP */
    .section-usp {
      background: url(https://khastanahadiubud.com/wp-content/uploads/2024/12/BGKhastanaNew.webp);
      background-size: cover;
      background-position: center;
      padding: 5%;
    }

    .section-usp .usp-content {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    /* Gaya tambahan untuk tata letak */
    .usp-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .usp-image {
      width: 30%;
    }

    .usp-text {
      width: 40%;
      text-align: left;
    }

    .usp-text .headlineUSP {
      font: normal italic 300 35px/65px Accia Piano;
      color: #714923;
      margin-bottom: 1rem;
    }

    .text-usp-slider .head-slider {
      font: normal normal 300 55px/65px Accia Piano;
      color: #714923;
      margin-bottom: 1rem;
    }

    .text-usp-slider .para-slider-usp {
      font: normal normal 300 18px/30px Avenir;
      color: #714923;
    }

    .right-slide-usp {
      display: inline-block;
      font: normal normal 300 20px/45px Accia Piano;
      color: #fff;
      background-color: #8c6239;
      padding: 5px 50px;
      text-decoration: none;
      border-radius: 5px;
      cursor: pointer;
    }

    /* Slider Image USP */
    .slider-container-img {
      position: relative;
      width: 600px;
      height: 580px;
      margin: auto;
      overflow: visible;
    }

    .slider-img-usp {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .slide-usp-item {
      position: absolute;
      top: 0;
      left: 10%;
      width: 80%;
      transition: transform 0.5s ease, z-index 0.5s, opacity 0.5s ease, transform 0.3s ease;
      opacity: 1;
      z-index: 1;
      transform: scale(0.8);
      /* Default smaller size */
    }

    .slide-usp-item.active {
      transform: translateX(0) scale(1);
      /* Active slide at normal size */
      z-index: 3;
      opacity: 1;
    }

    .slide-usp-item.next {
      transform: translateX(-30%) scale(0.8);
      /* Smaller next slide */
      z-index: 2;
    }

    .slide-usp-item.prev {
      transform: translateX(-60%) scale(0.7);
      /* Smaller previous slide */
      z-index: 0;
    }

    /* Section 3 */

    .section-3 {
      display: block;
      position: relative;
      width: 100%;
      background-color: #2F3220;
      padding-block: 40px;

    }

    .section-3 .img-bg {
      width: 100vw;
      display: block;
    }

    .section-3 .overlay-item {
      /* position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); */
      z-index: 1;
      display: flex;
      width: 100%;
      align-items: center;
      padding: 0px 40px;
      justify-content: space-around;
    }

    .section-3 .overlay-item-text .logoHarvest {
      width: 80%;
      margin-inline: auto;
      margin-bottom: 30px;
    }

    .section-3 .overlay-item-text h2 {
      text-align: center;
      font: normal normal 500 35px/45px Recoleta;
      letter-spacing: 2.02px;
      color: #EAE8E4;
      text-transform: uppercase;
      margin-bottom: 30px;
    }

    .section-3 .overlay-item-text h2 span {
      font: italic normal 400 50px/60px Accia Piano;
    }

    .section-3 .overlay-item-text p {
      text-align: center;
      font: normal normal 300 18px/30px Avenir;
      letter-spacing: 0.45px;
      color: #E7E0C1;
      -webkit-text-stroke: 1px #E7E0C1;
    }

    .section-3 .overlay-item img {
      max-width: 45%;
      display: block;
    }

    .section-3 .overlay-item-text {
      width: 45%;
    }

    /* Section 4 */
    .section-4 {
      position: relative;
      width: 100%;
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/engin-akyurt-aNPWJlyUiEA-unsplash.webp);
      background-size: cover;
      padding-block: 5%;
    }


    .section-4 .title {
      text-align: center;
      font: normal normal 400 40px/50px Accia Piano;
      letter-spacing: 0px;
      color: #ffffff;
      text-transform: uppercase;
      margin-bottom: 40px;
    }

    .section-4 .section4Content {
      width: 100%;
      position: relative;
      padding-inline: 10%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px 10px;
    }

    .section-4 .image {
      position: relative;
    }

    .section-4 .image img {
      width: 100%;
      display: block;
    }

    .section-4 .image:nth-child(1) {
      grid-area: 1/1/2/2;
    }

    .section-4.image:nth-child(2) {
      grid-area: 1/2/2/3;
    }

    .section-4.image:nth-child(3) {
      grid-area: 2/1/3/2;
    }

    .section-4.image:nth-child(4) {
      grid-area: 2/2/3/3;
    }

    .section-4 .image a {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font: normal normal 400 35px/45px Recoleta;
      text-align: center;
      color: #E7E2D4;
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 2px;
      transition: text-decoration-color 0.5s ease-in-out;
    }

    .section-4 .image p {
      width: 100%;
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      font: normal normal 400 25px/35px Recoleta;
      text-align: center;
      color: #E7E2D4;
    }

    .section-4 .image a:hover {
      text-decoration-color: #E7E2D4;
    }

    .section-5 {
      position: relative;
      background-color: #e0dcd2;
      width: 100%;
    }

    .section-5-flex {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      padding: 80px 60px;
    }

    .section-5 .review {
      padding-left: 80px;
      width: 60%;
    }

    .section-5 .ig-feed {
      width: 40%;
    }

    .section-5 .ig-feed img {
      max-width: 500px;
    }

    .section-5 .review h2 {
      font: normal normal 300 45px/70px Accia Piano;
      letter-spacing: 0px;
      color: #33291e;
      text-transform: capitalize;
      padding-bottom: 50px;
    }

    .section-5 .review p {
      font: normal normal medium 18px/30px Avenir;
      letter-spacing: 0.45px;
      color: #33291e;
      padding: 30px 0px;
    }

    .section-5 .ti-widget {
      max-width: 900px;
      margin-left: -25px;
    }

    .wp-gr[data-layout="slider"] .grw-reviews {
      margin: 0px !important;
    }

    .wp-gr {
      margin-left: -10px !important;
    }

    .review-slider img {
      padding-right: 10px;
    }

    .mobile-container {
      display: none;
    }

    .mobile-header {
      display: none;
    }

    .eapps-instagram-feed-posts-grid-load-more {
      display: none;
    }

    .eapps-instagram-feed-container .eapps-instagram-feed-title {
      display: block;
      font: normal normal 400 30px / 30px Accia Piano;
      letter-spacing: 0px;
      color: #33291e;
    }

    /* Sound */
    .popup-sound {
      background-color: #b6935d;
      /* Warna yang sesuai */
      padding: 10px 20px;
      width: 200px;
      border-radius: 8px;
      font-family: Arial, sans-serif;
      color: white;
      text-align: center;
      position: absolute;
      top: 65%;
      left: 2%;
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
      opacity: 0;
      transform: translateY(20px);
    }

    .popup-sound.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .popup-sound #play-btn-content {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .popup-sound #play-button {
      background-color: transparent;
      border: none;
      cursor: pointer;
      width: 30px;
    }

    .popup-sound canvas {
      width: 80%;
      margin-right: 12%;
      height: 30px;
      border-radius: 5px;
    }
  }

  @media screen and (min-width: 992px) and (max-width: 1199px) {

    html,
    body {
      margin-top: 0px !important;
      height: auto;
    }

    /* WHATSAPP POPUP */

    /* .whatsapp-popup,
  .floating-popup {
    display: none;
  }

  .whatsapp-btn-m {
    display: none;
  } */

    .whatsapp-btn {
      position: fixed;
      z-index: 100;
      bottom: 3%;
      right: 1%;
      opacity: 1;
    }

    .whatsapp-btn button {
      /* max-width: 75px; */
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      border-radius: 50%;
      z-index: 10;
      padding: 0px;
    }

    .floating-popup {
      position: fixed;
      transition: all 0.5s ease;
      bottom: 9%;
      right: 1%;
      opacity: 1;
      z-index: 5;
      display: block;
      justify-content: flex-end;
      width: 30%;
    }

    .closeBtn {
      z-index: 5;
      position: absolute;
      top: 25%;
      left: 0%;
      max-width: 30px;
    }

    .closeBtn img {
      width: 100%;
    }

    .whatsapp-popup button {
      width: 100%;
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      padding: 0px;
      z-index: 10;
      outline: none;
    }

    .whatsapp-btn-m {
      position: fixed;
      bottom: 2%;
      right: 2%;
      opacity: 1;
      z-index: 5;
      transition: all 0.5s ease-out;
      /* display: none; */
    }

    .whatsapp-btn-m button {
      max-width: 55px;
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      border-radius: 50%;
      padding: 0px;
      z-index: 10;
    }

    /* POPUP */

    @keyframes closePopUp {
      from {
        visibility: visible;
      }

      to {
        visibility: hidden;
      }
    }

    .popUpClose {
      animation-name: closePopUp;

      animation-duration: 500ms;

      animation-timing-function: ease;
    }

    .pop-up-overlay-m {
      display: none;
    }

    .pop-up-overlay {
      width: 100vw;
      height: 100vh;
      position: fixed;
      background: rgba(0, 0, 0, 0.7);
      z-index: 3;
      visibility: hidden;
      transition: visibility 0.5s, opacity 1s ease;
    }

    .pop-up-overlay .btn-over {
      width: 170px;
      transform: translate(-50%, -50%);
      cursor: pointer;
      position: absolute;
      top: 78%;
      left: 73%;
    }

    .pop-up-overlay .btn-banner-flex {
      position: absolute;
      top: 78%;
      display: flex;
      gap: 5%;
      left: 63%;
    }

    /* .pop-up-overlay .btn-over:hover {
    color: #6a4321;
    border: 1px solid #6a4321;
    background: transparent;
  } */

    .popup-show {
      visibility: visible;
      opacity: 1;
      transition: visibility 0.5s, opacity 1s ease;
    }

    .popup-hidden {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0.5s, opacity 1s linear;
    }

    .pop-up-overlay .mobile-popup {
      display: none !important;
    }

    .pop-up-overlay .img-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 47%;
    }

    #closingPopup {
      position: absolute;
      top: 0%;
      right: -3%;
      transform: translate(-50%, -50%);
      background: transparent;
      border: none;
      padding: 0px;
      max-width: 28px;
    }

    /* popup */

    .back-to-top {
      display: none;
      position: fixed;
      bottom: 30px;
      right: 30px;
      max-width: 100px;
      z-index: 10;
    }

    #about,
    #projects {
      display: block !important;
    }

    #services,
    .features-section {
      justify-content: normal !important;
      flex-direction: row !important;
    }

    button:focus {
      outline: none !important;
    }

    .hero {
      position: relative;
    }

    .hero img {
      display: block;
      width: 100%;
    }

    .booking-bar {
      width: 95%;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/07/BG-Sidebar-Linen-scaled.webp);
      background-size: cover;
      z-index: 1;
      border-radius: 15px;
      padding: 20px 0px 30px 0px;
    }

    .booking-bar .booking-title {
      font: normal normal 500 30px/40px Accia Piano;
      letter-spacing: 1.5px;
      text-align: center;
      width: 100%;
      text-transform: uppercase;
      padding: 10px 0px 30px 0px;
    }

    .booking-bar .booking-flex {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

    .booking-bar .booking-flex .check-in,
    .booking-bar .booking-flex .check-out,
    .booking-bar .booking-flex .guests {
      text-align: center;
    }

    .booking-flex .item-flex {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

    .booking-flex .buttons {
      margin-left: 10px;
    }

    .booking-flex .buttons img {
      max-width: 25px;
      padding-top: 5px;
    }

    .booking-flex .buttons .up img {
      -webkit-transform: scaleY(-1);
      transform: scaleY(-1);
    }

    .booking-flex .book-button {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 300 18px/45px Accia Piano;
      text-transform: uppercase;
      letter-spacing: -1px;
      color: #f3f1eb;
      border: 1px solid #6d4621;
      padding: 10px 8px;
      text-align: center;
      text-decoration: none;
      height: 100%;
      width: 250px;
      background: #6d4621;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
    }

    .booking-flex .button-container {
      height: 100%;
    }

    .booking-bar .title {
      font: normal normal 300 20px/30px Accia Piano;
      letter-spacing: 0px;
      color: #081c04;
      text-transform: uppercase;
    }

    .booking-bar .date,
    .booking-bar .guests-no {
      font: normal normal 300 50px/60px Accia Piano;
      letter-spacing: 0px;
      color: #081b05;
      text-transform: capitalize;
    }

    .section-2 {
      position: relative;
      width: 100%;
    }

    .section-2 .img-bg {
      width: 100%;
      display: block;
    }

    .section-2 .overlay-item {
      position: absolute;
      top: 57%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      display: flex;
      width: 100%;
      align-items: center;
      padding: 0px 30px;
      justify-content: space-between;
    }

    .section-2 .overlay-item .overlay-text {
      width: 45%;
    }

    .section-2 .overlay-item h2 {
      text-align: left;
      font: normal normal 400 28px/35px Accia Piano;
      letter-spacing: 1.02px;
      color: #714923;
      text-transform: uppercase;
      text-align: center;
    }

    .section-2 .overlay-item h2 span {
      font: italic normal 400 50px/60px Accia Piano;
    }

    .section-2 .overlay-item p {
      text-align: center;
      font: normal normal 500 18px/30px Accia Piano;
      letter-spacing: 0.45px;
      color: #714923;
      padding: 30px 0px;
    }

    .section-2 .overlay-item img {
      max-width: 45%;
      display: block;
    }

    .section-2 .overlay-item .button {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 500 20px / 30px Accia Piano;
      letter-spacing: 1px;
      color: #664220;
      border: 1px solid #FFFFF3;
      padding: 12px 8px;
      text-align: center;
      text-decoration: none;
      width: 350px;
      background: transparent;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
      margin-inline: auto;
      background-color: #FFFFF3;
    }

    .section-2 .overlay-item .button:hover {
      background: transparent;
      color: #664220;
      border: 1px solid #664220;
    }

    /* Section 2B */
    .section-2b {
      position: relative;
      width: 100%;
      background-image: url('https://khastanahadiubud.com/wp-content/uploads/2025/03/bg2Groups-scaled.webp');
      background-position: top center;
      background-size: cover;
      padding-bottom: 180px;
      padding-inline: 30px;
      padding-top: 10%;
      overflow: hidden;
    }

    .section-2b .head2B {
      font: normal italic 500 25px/35px Accia Piano;
      text-align: left;
      color: #664220;
      width: 37%;
      position: absolute;
      bottom: 20%;
      left: 3%;
      letter-spacing: 0;
      -webkit-text-stroke: 1px #664220;
    }

    .section2b-content {
      width: 100%;
      position: relative;
      /* padding-inline: 10%; */
      display: flex;
      gap: 5%;
      margin-bottom: 15%;
    }

    .section2b-content .image-left,
    .section2b-content .image-right {
      width: 50%;
      position: relative;
      overflow: hidden;
    }

    .image-left::before,
    .image-right::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0);
      transition: background 0.3s ease-in-out;
    }

    .image-left:hover::before,
    .image-right:hover::before {
      background: rgba(0, 0, 0, 0.5);
      /* Overlay hitam transparan saat hover */
    }

    .image-left .text-left,
    .image-right .text-right {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
    }

    .text-left a,
    .text-right a {
      font: normal normal 400 25px/35px Recoleta;
      text-align: center;
      color: #fff;
      text-decoration: none;
    }

    .image-left .left-image,
    .image-right .right-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .section-2b .ctaSection {
      width: 58%;
      position: absolute;
      bottom: 0;
      right: -5%;
    }

    .section-2b .btnCTA {
      width: 35%;
      position: absolute;
      bottom: 3%;
      right: 15%;
      z-index: 3;
    }

    .btnCTA p {
      font: normal normal 500 13px/25px Accia Piano;
      color: #664220;
      text-align: center;
      margin-bottom: 15px;
    }

    .btnCTA .contentWA {
      width: 100%;
      display: flex;
    }

    .contentWA a {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 300 18px / 30px Accia Piano;
      letter-spacing: 1px;
      color: #FFFFFF;
      -webkit-text-stroke: 0.3px #FFFFFF;
      border: 1px solid #2D301E;
      padding: 12px 8px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      width: 250px;
      background: transparent;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
      margin-inline: auto;
      background-color: #2D301E;
    }

    .contentWA a:hover {
      background-color: transparent;
      border: 1px solid #2D301E;
      color: #2D301E;
      -webkit-text-stroke: 0.3px #2D301E;
    }

    .section-2b .ctaSection a {
      width: 40%;
    }

    .ctaSection a img {
      width: 100%;
      display: block;
    }



    /* Section USP */
    .section-usp {
      background: url(https://khastanahadiubud.com/wp-content/uploads/2024/12/BGKhastanaNew.webp);
      background-size: cover;
      background-position: center;
      padding: 5%;
    }

    .section-usp .usp-content {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    /* Gaya tambahan untuk tata letak */
    .usp-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .usp-image {
      width: 30%;
    }

    .usp-text {
      width: 40%;
      text-align: left;
    }

    .usp-text .headlineUSP {
      font: normal italic 300 35px/65px Accia Piano;
      color: #714923;
      margin-bottom: 1rem;
    }

    .text-usp-slider .head-slider {
      font: normal normal 300 55px/65px Accia Piano;
      color: #714923;
      margin-bottom: 1rem;
    }

    .text-usp-slider .para-slider-usp {
      font: normal normal 300 18px/30px Avenir;
      color: #714923;
    }

    .right-slide-usp {
      display: inline-block;
      font: normal normal 300 20px/45px Accia Piano;
      color: #fff;
      background-color: #8c6239;
      padding: 5px 50px;
      text-decoration: none;
      border-radius: 5px;
      cursor: pointer;
    }

    /* Slider Image USP */
    .slider-container-img {
      position: relative;
      width: 600px;
      height: 580px;
      margin: auto;
      overflow: visible;
    }

    .slider-img-usp {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .slide-usp-item {
      position: absolute;
      top: 0;
      left: 10%;
      width: 80%;
      transition: transform 0.5s ease, z-index 0.5s, opacity 0.5s ease, transform 0.3s ease;
      opacity: 1;
      z-index: 1;
      transform: scale(0.8);
      /* Default smaller size */
    }

    .slide-usp-item.active {
      transform: translateX(0) scale(1);
      /* Active slide at normal size */
      z-index: 3;
      opacity: 1;
    }

    .slide-usp-item.next {
      transform: translateX(-30%) scale(0.8);
      /* Smaller next slide */
      z-index: 2;
    }

    .slide-usp-item.prev {
      transform: translateX(-60%) scale(0.7);
      /* Smaller previous slide */
      z-index: 0;
    }

    /* Section 3 */

    .section-3 {
      display: block;
      position: relative;
      width: 100%;
      background-color: #2F3220;
      padding-block: 40px;

    }

    .section-3 .img-bg {
      width: 100vw;
      display: block;
    }

    .section-3 .overlay-item {
      /* position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); */
      z-index: 1;
      display: flex;
      width: 100%;
      align-items: center;
      padding: 0px 40px;
      justify-content: space-around;
    }

    .section-3 .overlay-item-text .logoHarvest {
      width: 80%;
      margin-inline: auto;
      margin-bottom: 30px;
    }

    .section-3 .overlay-item-text h2 {
      text-align: center;
      font: normal normal 500 35px/45px Recoleta;
      letter-spacing: 2.02px;
      color: #EAE8E4;
      text-transform: uppercase;
      margin-bottom: 30px;
    }

    .section-3 .overlay-item-text h2 span {
      font: italic normal 400 50px/60px Accia Piano;
    }

    .section-3 .overlay-item-text p {
      text-align: center;
      font: normal normal 300 18px/30px Avenir;
      letter-spacing: 0.45px;
      color: #E7E0C1;
      -webkit-text-stroke: 1px #E7E0C1;
    }

    .section-3 .overlay-item img {
      max-width: 45%;
      display: block;
    }

    .section-3 .overlay-item-text {
      width: 45%;
    }

    /* Section 4 */
    .section-4 {
      position: relative;
      width: 100%;
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/engin-akyurt-aNPWJlyUiEA-unsplash.webp);
      background-size: cover;
      padding-block: 5%;
    }


    .section-4 .title {
      text-align: center;
      font: normal normal 400 40px/50px Accia Piano;
      letter-spacing: 0px;
      color: #ffffff;
      text-transform: uppercase;
      margin-bottom: 40px;
    }

    .section-4 .section4Content {
      width: 100%;
      position: relative;
      padding-inline: 10%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px 10px;
    }

    .section-4 .image {
      position: relative;
    }

    .section-4 .image img {
      width: 100%;
      display: block;
    }

    .section-4 .image:nth-child(1) {
      grid-area: 1/1/2/2;
    }

    .section-4.image:nth-child(2) {
      grid-area: 1/2/2/3;
    }

    .section-4.image:nth-child(3) {
      grid-area: 2/1/3/2;
    }

    .section-4.image:nth-child(4) {
      grid-area: 2/2/3/3;
    }

    .section-4 .image a {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font: normal normal 400 35px/45px Recoleta;
      text-align: center;
      color: #E7E2D4;
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 2px;
      transition: text-decoration-color 0.5s ease-in-out;
    }

    .section-4 .image p {
      width: 100%;
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      font: normal normal 400 25px/35px Recoleta;
      text-align: center;
      color: #E7E2D4;
    }

    .section-4 .image a:hover {
      text-decoration-color: #E7E2D4;
    }

    .section-5 {
      position: relative;
      background-color: #e0dcd2;
      width: 100%;
    }

    .section-5-flex {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      padding: 80px 60px;
    }

    .section-5 .review {
      padding-left: 80px;
      width: 60%;
    }

    .section-5 .ig-feed {
      width: 40%;
    }

    .section-5 .ig-feed img {
      max-width: 500px;
    }

    .section-5 .review h2 {
      font: normal normal 300 45px/70px Accia Piano;
      letter-spacing: 0px;
      color: #33291e;
      text-transform: capitalize;
      padding-bottom: 50px;
    }

    .section-5 .review p {
      font: normal normal medium 18px/30px Avenir;
      letter-spacing: 0.45px;
      color: #33291e;
      padding: 30px 0px;
    }

    .section-5 .ti-widget {
      max-width: 900px;
      margin-left: -25px;
    }

    .wp-gr[data-layout="slider"] .grw-reviews {
      margin: 0px !important;
    }

    .wp-gr {
      margin-left: -10px !important;
    }

    .review-slider img {
      padding-right: 10px;
    }

    .mobile-container {
      display: none;
    }

    .mobile-header {
      display: none;
    }

    .eapps-instagram-feed-posts-grid-load-more {
      display: none;
    }

    .eapps-instagram-feed-container .eapps-instagram-feed-title {
      display: block;
      font: normal normal 400 30px / 30px Accia Piano;
      letter-spacing: 0px;
      color: #33291e;
    }

    /* Sound */
    .popup-sound {
      background-color: #b6935d;
      /* Warna yang sesuai */
      padding: 10px 20px;
      width: 200px;
      border-radius: 8px;
      font-family: Arial, sans-serif;
      color: white;
      text-align: center;
      position: absolute;
      top: 85%;
      left: 2%;
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
      opacity: 0;
      transform: translateY(20px);
    }

    .popup-sound.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .popup-sound #play-btn-content {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .popup-sound #play-button {
      background-color: transparent;
      border: none;
      cursor: pointer;
      width: 30px;
    }

    .popup-sound canvas {
      width: 80%;
      margin-right: 12%;
      height: 30px;
      border-radius: 5px;
    }
  }

  @media screen and (min-width: 1200px) {

    html,
    body {
      margin-top: 0px !important;
      height: auto;
    }

    /* WHATSAPP POPUP */

    /* .whatsapp-popup,
  .floating-popup {
    display: none;
  }

  .whatsapp-btn-m {
    display: none;
  } */

    .whatsapp-btn {
      position: fixed;
      z-index: 100;
      bottom: 3%;
      right: 1%;
      opacity: 1;
    }

    .whatsapp-btn button {
      /* max-width: 75px; */
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      border-radius: 50%;
      z-index: 10;
      padding: 0px;
    }

    .floating-popup {
      position: fixed;
      transition: all 0.5s ease;
      bottom: 9%;
      right: 1%;
      opacity: 1;
      z-index: 5;
      display: block;
      justify-content: flex-end;
      width: 18%;
    }

    .closeBtn {
      z-index: 100;
      position: absolute;
      top: 35%;
      left: -10%;
      max-width: 100px;
    }

    .closeBtn img {
      width: 30%;
    }

    .whatsapp-popup button {
      width: 100%;
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      padding: 0px;
      z-index: 10;
    }

    .whatsapp-btn-m {
      position: fixed;
      bottom: 2%;
      right: 2%;
      opacity: 1;
      z-index: 5;
      transition: all 0.5s ease-out;
      /* display: none; */
    }

    .whatsapp-btn-m button {
      max-width: 55px;
      border: none;
      cursor: pointer;
      appearance: none;
      background-color: transparent !important;
      border-radius: 50%;
      padding: 0px;
      z-index: 10;
    }

    /* POPUP */

    @keyframes closePopUp {
      from {
        visibility: visible;
      }

      to {
        visibility: hidden;
      }
    }

    .popUpClose {
      animation-name: closePopUp;

      animation-duration: 500ms;

      animation-timing-function: ease;
    }

    .pop-up-overlay-m {
      display: none;
    }

    .pop-up-overlay {
      width: 100vw;
      height: 100vh;
      position: fixed;
      background: rgba(0, 0, 0, 0.7);
      z-index: 3;
      visibility: hidden;
      transition: visibility 0.5s, opacity 1s ease;
    }

    .pop-up-overlay .btn-over {
      width: 170px;
      transform: translate(-50%, -50%);
      cursor: pointer;
      position: absolute;
      top: 78%;
      left: 73%;
    }

    .pop-up-overlay .btn-banner-flex {
      position: absolute;
      top: 78%;
      display: flex;
      gap: 5%;
      left: 63%;
    }

    /* .pop-up-overlay .btn-over:hover {
    color: #6a4321;
    border: 1px solid #6a4321;
    background: transparent;
  } */

    .popup-show {
      visibility: visible;
      opacity: 1;
      transition: visibility 0.5s, opacity 1s ease;
    }

    .popup-hidden {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0.5s, opacity 1s linear;
    }

    .pop-up-overlay .mobile-popup {
      display: none !important;
    }

    .pop-up-overlay .img-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 47%;
    }

    #closingPopup {
      position: absolute;
      top: 0%;
      right: -3%;
      transform: translate(-50%, -50%);
      background: transparent;
      border: none;
      padding: 0px;
      max-width: 28px;
    }

    /* popup */

    .back-to-top {
      display: none;
      position: fixed;
      bottom: 30px;
      right: 30px;
      max-width: 100px;
      z-index: 10;
    }

    #about,
    #projects {
      display: block !important;
    }

    #services,
    .features-section {
      justify-content: normal !important;
      flex-direction: row !important;
    }

    button:focus {
      outline: none !important;
    }

    .hero {
      position: relative;
    }

    .hero img {
      display: block;
      width: 100%;
    }

    .booking-bar {
      width: 65%;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/07/BG-Sidebar-Linen-scaled.webp);
      background-size: cover;
      z-index: 1;
      border-radius: 15px;
      padding: 20px 0px 30px 0px;
    }

    .booking-bar .booking-title {
      font: normal normal 500 35px/45px Accia Piano;
      letter-spacing: 1.5px;
      text-align: center;
      width: 100%;
      text-transform: uppercase;
      padding: 10px 0px 30px 0px;
    }

    .booking-bar .booking-flex {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

    .booking-bar .booking-flex .check-in,
    .booking-bar .booking-flex .check-out,
    .booking-bar .booking-flex .guests {
      text-align: center;
    }

    .booking-flex .item-flex {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

    .booking-flex .buttons {
      margin-left: 10px;
    }

    .booking-flex .buttons img {
      max-width: 25px;
      padding-top: 5px;
    }

    .booking-flex .buttons .up img {
      -webkit-transform: scaleY(-1);
      transform: scaleY(-1);
    }

    .booking-flex .book-button {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 300 18px/45px Accia Piano;
      text-transform: uppercase;
      letter-spacing: -1px;
      color: #f3f1eb;
      border: 1px solid #6d4621;
      padding: 10px 8px;
      text-align: center;
      text-decoration: none;
      height: 100%;
      width: 250px;
      background: #6d4621;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
    }

    .booking-flex .button-container {
      height: 100%;
    }

    .booking-bar .title {
      font: normal normal 300 20px/30px Accia Piano;
      letter-spacing: 0px;
      color: #081c04;
      text-transform: uppercase;
    }

    .booking-bar .date,
    .booking-bar .guests-no {
      font: normal normal 300 50px/60px Accia Piano;
      letter-spacing: 0px;
      color: #081b05;
      text-transform: capitalize;
    }

    .section-2 {
      position: relative;
      width: 100%;
    }

    .section-2 .img-bg {
      width: 100%;
      display: block;
    }

    .section-2 .overlay-item {
      position: absolute;
      top: 57%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      display: flex;
      width: 100%;
      align-items: center;
      padding: 0px 40px;
      justify-content: space-between;
    }

    .section-2 .overlay-item .overlay-text {
      width: 45%;
    }

    .section-2 .overlay-item h2 {
      text-align: left;
      font: normal normal 400 40px/50px Accia Piano;
      letter-spacing: 3.02px;
      color: #714923;
      text-transform: uppercase;
      text-align: center;
    }

    .section-2 .overlay-item h2 span {
      font: italic normal 400 50px/60px Accia Piano;
    }

    .section-2 .overlay-item p {
      text-align: center;
      font: normal normal 500 18px/30px Accia Piano;
      letter-spacing: 0.45px;
      color: #714923;
      padding: 40px 0px;
    }

    .section-2 .overlay-item img {
      max-width: 550px;
      display: block;
    }

    .section-2 .overlay-item .button {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 500 20px / 30px Accia Piano;
      letter-spacing: 1px;
      color: #664220;
      border: 1px solid #FFFFF3;
      padding: 12px 8px;
      text-align: center;
      text-decoration: none;
      width: 450px;
      background: transparent;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
      margin-inline: auto;
      background-color: #FFFFF3;
    }

    .section-2 .overlay-item .button:hover {
      background: transparent;
      color: #664220;
      border: 1px solid #664220;
    }

    /* Section 2B */
    .section-2b {
      position: relative;
      width: 100%;
      background-image: url('https://khastanahadiubud.com/wp-content/uploads/2025/03/bg2Groups-scaled.webp');
      background-position: top center;
      background-size: cover;
      padding-bottom: 100px;
      padding-inline: 30px;
      padding-top: 10%;
      overflow: hidden;
    }

    .section-2b .head2B {
      font: normal italic 500 35px / 45px Accia Piano;
      text-align: left;
      color: #664220;
      width: 40%;
      position: absolute;
      bottom: 10%;
      left: 2%;
      letter-spacing: 0;
      -webkit-text-stroke: 1px #664220;
    }

    .section2b-content {
      width: 100%;
      position: relative;
      /* padding-inline: 10%; */
      display: flex;
      gap: 5%;
      margin-bottom: 15%;
    }

    .section2b-content .image-left,
    .section2b-content .image-right {
      width: 50%;
      position: relative;
      overflow: hidden;
    }

    .image-left::before,
    .image-right::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0);
      transition: background 0.3s ease-in-out;
    }

    .image-left:hover::before,
    .image-right:hover::before {
      background: rgba(0, 0, 0, 0.5);
      /* Overlay hitam transparan saat hover */
    }

    .image-left .text-left,
    .image-right .text-right {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
    }

    .text-left a,
    .text-right a {
      font: normal normal 400 35px/45px Recoleta;
      text-align: center;
      color: #fff;
      text-decoration: none;
      /* Hilangkan underline bawaan */
    }

    .image-left .left-image,
    .image-right .right-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .section-2b .ctaSection {
      width: 50%;
      position: absolute;
      bottom: 0;
      right: -3%;
    }

    .section-2b .btnCTA {
      width: 35%;
      position: absolute;
      bottom: 5%;
      right: 14%;
      z-index: 3;
    }

    .btnCTA p {
      font: normal normal 500 18px/30px Accia Piano;
      color: #664220;
      text-align: center;
      margin-bottom: 15px;
    }

    .btnCTA .contentWA {
      width: 100%;
      display: flex;
    }

    .contentWA a {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      font: normal normal 300 20px / 30px Accia Piano;
      letter-spacing: 1px;
      color: #FFFFFF;
      -webkit-text-stroke: 0.3px #FFFFFF;
      border: 1px solid #2D301E;
      padding: 12px 8px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      width: 250px;
      background: transparent;
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 0.5s ease-out;
      z-index: 1;
      border-radius: 10px;
      margin-inline: auto;
      background-color: #2D301E;
    }

    .contentWA a:hover {
      background-color: transparent;
      border: 1px solid #2D301E;
      color: #2D301E;
      -webkit-text-stroke: 0.3px #2D301E;
    }

    .section-2b .ctaSection a {
      width: 40%;
    }

    .ctaSection a img {
      width: 100%;
      display: block;
    }



    /* Section USP */
    .section-usp {
      background: url(https://khastanahadiubud.com/wp-content/uploads/2024/12/BGKhastanaNew.webp);
      background-size: cover;
      background-position: center;
      padding: 5%;
    }

    .section-usp .usp-content {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    /* Gaya tambahan untuk tata letak */
    .usp-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .usp-image {
      width: 30%;
    }

    .usp-text {
      width: 40%;
      text-align: left;
    }

    .usp-text .headlineUSP {
      font: normal italic 300 35px/65px Accia Piano;
      color: #714923;
      margin-bottom: 1rem;
    }

    .text-usp-slider .head-slider {
      font: normal normal 300 55px/65px Accia Piano;
      color: #714923;
      margin-bottom: 1rem;
    }

    .text-usp-slider .para-slider-usp {
      font: normal normal 300 18px/30px Avenir;
      color: #714923;
    }

    .right-slide-usp {
      display: inline-block;
      font: normal normal 300 20px/45px Accia Piano;
      color: #fff;
      background-color: #8c6239;
      padding: 5px 50px;
      text-decoration: none;
      border-radius: 5px;
      cursor: pointer;
    }

    /* Slider Image USP */
    .slider-container-img {
      position: relative;
      width: 600px;
      height: 580px;
      margin: auto;
      overflow: visible;
    }

    .slider-img-usp {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .slide-usp-item {
      position: absolute;
      top: 0;
      left: 10%;
      width: 80%;
      transition: transform 0.5s ease, z-index 0.5s, opacity 0.5s ease, transform 0.3s ease;
      opacity: 1;
      z-index: 1;
      transform: scale(0.8);
      /* Default smaller size */
    }

    .slide-usp-item.active {
      transform: translateX(0) scale(1);
      /* Active slide at normal size */
      z-index: 3;
      opacity: 1;
    }

    .slide-usp-item.next {
      transform: translateX(-30%) scale(0.8);
      /* Smaller next slide */
      z-index: 2;
    }

    .slide-usp-item.prev {
      transform: translateX(-60%) scale(0.7);
      /* Smaller previous slide */
      z-index: 0;
    }

    /* Section 3 */

    .section-3 {
      display: block;
      position: relative;
      width: 100%;
      background-color: #2F3220;
      padding-block: 40px;
    }

    .section-3 .img-bg {
      width: 100vw;
      display: block;
    }

    .section-3 .overlay-item {
      /* position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); */
      z-index: 1;
      display: flex;
      width: 100%;
      align-items: center;
      padding: 0px 50px;
      justify-content: space-around;
      margin-top: 2%;
    }

    .section-3 .overlay-item-text .logoHarvest {
      width: 70%;
      margin-inline: auto;
      margin-bottom: 40px;
    }

    .section-3 .overlay-item-text h2 {
      text-align: center;
      font: normal normal 500 45px/55px Recoleta;
      letter-spacing: 3.02px;
      color: #EAE8E4;
      text-transform: uppercase;
      margin-bottom: 40px;
    }

    .section-3 .overlay-item-text h2 span {
      font: italic normal 400 50px/60px Accia Piano;
    }

    .section-3 .overlay-item-text p {
      text-align: center;
      font: normal normal 300 28px/35px Avenir;
      letter-spacing: 0.45px;
      color: #E7E0C1;
      -webkit-text-stroke: 1px #E7E0C1;
    }

    .section-3 .overlay-item img {
      max-width: 550px;
      display: block;
    }

    .section-3 .overlay-item-text {
      width: 45%;
    }

    /* Section 4 */
    .section-4 {
      position: relative;
      width: 100%;
      background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/engin-akyurt-aNPWJlyUiEA-unsplash.webp);
      background-size: cover;
      padding-block: 5%;
    }

    .section-4 .title {
      text-align: center;
      font: normal normal 400 40px/50px Accia Piano;
      letter-spacing: 0px;
      color: #ffffff;
      text-transform: uppercase;
      margin-bottom: 40px;
    }

    .section-4 .section4Content {
      width: 100%;
      position: relative;
      padding-inline: 10%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px 10px;
    }

    .section-4 .image {
      position: relative;
      overflow: hidden;
    }

    .section-4 .image::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(117, 78, 39, 0);
      transition: background 0.3s ease-in-out;
    }

    .section-4 .image:hover::before {
      background: rgba(117, 78, 39, 0.7);
    }


    .section-4 .image img {
      width: 100%;
      display: block;
    }

    .section-4 .image:nth-child(1) {
      grid-area: 1/1/2/2;
    }

    .section-4.image:nth-child(2) {
      grid-area: 1/2/2/3;
    }

    .section-4.image:nth-child(3) {
      grid-area: 2/1/3/2;
    }

    .section-4.image:nth-child(4) {
      grid-area: 2/2/3/3;
    }

    .section-4 .image a {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font: normal normal 400 35px/45px Recoleta;
      text-align: center;
      color: #E7E2D4;
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 2px;
      opacity: 0;
      transition: text-decoration-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }

    .section-4 .image:hover a,
    .section-4 .image:hover p
    {
      opacity: 1;
    }

    .section-4 .image p {
      width: 100%;
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      font: normal normal 400 25px/35px Recoleta;
      text-align: center;
      color: #E7E2D4;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .section-4 .image a:hover {
      text-decoration-color: #E7E2D4;
    }

    .section-5 {
      position: relative;
      background-color: #e0dcd2;
      width: 100%;
    }

    .section-5-flex {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      padding: 80px 60px;
    }

    .section-5 .review {
      padding-left: 80px;
      width: 60%;
    }

    .section-5 .ig-feed {
      width: 40%;
    }

    .section-5 .ig-feed img {
      max-width: 500px;
    }

    .section-5 .review h2 {
      font: normal normal 300 45px/70px Accia Piano;
      letter-spacing: 0px;
      color: #33291e;
      text-transform: capitalize;
      padding-bottom: 50px;
    }

    .section-5 .review p {
      font: normal normal medium 18px/30px Avenir;
      letter-spacing: 0.45px;
      color: #33291e;
      padding: 30px 0px;
    }

    .section-5 .ti-widget {
      max-width: 900px;
      margin-left: -25px;
    }

    .wp-gr[data-layout="slider"] .grw-reviews {
      margin: 0px !important;
    }

    .wp-gr {
      margin-left: -10px !important;
    }

    .review-slider img {
      padding-right: 10px;
    }

    .mobile-container {
      display: none;
    }

    .mobile-header {
      display: none;
    }

    .eapps-instagram-feed-posts-grid-load-more {
      display: none;
    }

    .eapps-instagram-feed-container .eapps-instagram-feed-title {
      display: block;
      font: normal normal 400 30px / 30px Accia Piano;
      letter-spacing: 0px;
      color: #33291e;
    }

    /* Sound */
    .popup-sound {
      background-color: #b6935d;
      /* Warna yang sesuai */
      padding: 10px 20px;
      width: 200px;
      border-radius: 8px;
      font-family: Arial, sans-serif;
      color: white;
      text-align: center;
      position: absolute;
      top: 85%;
      left: 2%;
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
      opacity: 0;
      transform: translateY(20px);
    }

    .popup-sound.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .popup-sound #play-btn-content {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .popup-sound #play-button {
      background-color: transparent;
      border: none;
      cursor: pointer;
      width: 30px;
    }

    .popup-sound canvas {
      width: 80%;
      margin-right: 12%;
      height: 30px;
      border-radius: 5px;
    }
  }