/* MOBILE STYLING */
@media screen and (max-width: 768px) {
  html {
    margin-top: 0px;
  }

  button:focus {
    outline: none !important;
  }

  /* FLOAT WA */

  /* popup */

  .floating-popup {
    position: fixed;
    transition: all 0.5s ease;
    bottom: 12%;
    right: 0%;
    opacity: 1;
    z-index: 5;
    /* display: none; */
    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;
  }

  /* FLOAT WA */

  .elemen-grand {
    display: none;
    opacity: 0;
  }

  .grand-slider-mobile {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 15;
    height: 100vh;
    display: none;
    align-items: center;
  }

  .grand-slider-mobile .slider-container {
    width: 100%;
    text-align: center;
  }

  .grand-slider-mobile .grand-slider-m img {
    width: 100%;
    margin: 0px auto;
  }

  .grand-slider-mobile .arrow-flex-m {
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: space-between;
    padding: 0px 10px;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999999999;
  }

  .grand-slider-mobile .arrow-flex-m .left-arrow-m {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    max-width: 30px;
  }

  .grand-slider-mobile .arrow-flex-m .right-arrow-m {
    max-width: 30px;
  }

  .grand-slider-mobile .close-grand-slider-m {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 600 20px / 28px Accia Piano;
    letter-spacing: 0.5px;
    color: #6d4621;
    border: 1px solid #e2ddcc;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    width: 120px;
    background: #e2ddcc;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 0px auto;
  }

  .grand-slider-mobile .close-grand-slider-m .close-logo {
    max-width: 20px;
  }

  .m-video-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 15;
    display: none;
    align-items: center;
  }

  .m-video-popup .inner {
    position: relative;
    padding: 10px;
    background-color: #fff;
  }

  .m-video-popup #closeBtnGrandM {
    position: absolute;
    max-width: 30px;
    top: 3%;
    right: 5%;
  }

  .m-video-popup #playPauseBtnGrandM {
    position: absolute;
    max-width: 30px;
    bottom: 5%;
    left: 40%;
  }

  .m-video-popup #muteBtnGrandM {
    position: absolute;
    max-width: 44px;
    bottom: 5%;
    left: 60%;
  }

  .grand-mobile-trigger {
    display: none;
    opacity: 0;
  }

  .grand-slider-desktop {
    display: none;
  }

  .video-popup {
    display: none;
  }

  .desktop-container {
    display: none;
  }

  .mobile-container {
    display: block;
  }

  .villa-menu .villa-item {
    position: relative;
  }

  .villa-menu .bg {
    display: block;
  }

  .villa-menu .overlay-items {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
  }

  .villa-menu h2 {
    font: normal normal 500 19px/26px Accia Piano;
    letter-spacing: 0.5px;
    color: #fff;
    padding-bottom: 20px;
    text-shadow: 2px 2px 4px #000000;
  }

  .villa-menu .button {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 600 16px / 25px Accia Piano;
    letter-spacing: 0.5px;
    color: #6d4621;
    border: 1px solid #e2ddcc;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    width: 165px;
    background: #e2ddcc;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 0px auto;
  }

  .villa-menu .button.active {
    color: #e1dbcb;
    border: 1px solid #6d4621;
    background: #6d4621;
  }

  .m-grand-3-br {
    display: none;
  }

  .villa {
    padding: 50px 20px;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/bg-cream-khastana-scaled.webp);
    background-size: cover;
  }

  .villa .villa-poster-m {
    position: relative;
  }

  .villa .button-flex-media {
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    padding: 0px 10px;
  }

  .villa .button-flex-media .button-media {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 600 16px / 25px Accia Piano;
    letter-spacing: 0.5px;
    color: #6d4621;
    border: 1px solid #6d4621;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    width: 180px;
    background: url(https://khastanahadiubud.com/wp-content/uploads/2024/10/bg-khastana-scaled.webp);
    background-size: 100% 100%;
    background-position: center;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
  }

  .villa h2 {
    font: normal normal 500 25px/30px Accia Piano;
    letter-spacing: 0.5px;
    color: #714923;
    text-transform: uppercase;
    padding: 30px 0px;
  }

  .villa p {
    text-align: left;
    font: normal normal 400 15px/30px Avenir;
    letter-spacing: 0.38px;
    color: #714923;
  }

  .villa .button-flex {
    display: flex;
    padding: 20px 0px 30px 0px;
    justify-content: center;
    align-items: center;
  }

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

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

  .villa .features {
    display: flex;
    justify-content: space-between;
  }

  .villa .features .item-left {
    width: 49%;
  }

  .villa .features .item-right {
    width: 49%;
  }

  .villa .features h5 {
    font: normal normal 400 14px/25px Avenir;
    letter-spacing: 0.3px;
    color: #714923;
  }

  .rural-glam {
    padding: 50px 20px;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/09/bg-grey-baru.webp);
    background-size: cover;
  }

  .rural-glam h2 {
    font: italic normal 500 25px/30px Accia Piano;
    letter-spacing: 0.5px;
    color: #714923;
    text-transform: uppercase;
    padding: 30px 0px;
  }

  .rural-glam p {
    text-align: left;
    font: normal normal 400 15px/25px Avenir;
    letter-spacing: 0.38px;
    color: #000000;
  }

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

  .slider-ritual h2 {
    font: normal normal 500 20px/27px Accia Piano;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-transform: uppercase;
    padding: 0px 30px 30px 30px;
    text-align: center;
  }

  .slider-ritual .thi-feature-slide {
    width: 100%;
    position: relative;
  }

  .thi-feature-slide .btnArrowSliderVilla{
    width: 100%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
  }

  .btnArrowSliderVilla a {
    width: 11%;
    display: block;
    position: relative;
  }

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

  .slider-ritual .arrow-flex-slider {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .slider-ritual .arrow-flex-slider a {
    max-width: 40px;
  }

  .slider-ritual .arrow-flex-slider .left-arrow {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
  }

  .thi-feature-slide .slider-nav-22,
  .thi-feature-slide .slider-nav-33 {
    width: 100%;
    padding: 0px 10px;
    margin-bottom: 0px !important;
  }

  .thi-feature-slide h3 {
    padding-top: 20px;
    font: normal normal 400 18px/25px Avenir;
    color: #fff;
    text-align: center;
  }

  /* 
    .slider-nav-22 .slick-dots,
    .slider-nav-33 .slick-dots {
      bottom: -170px;
    }
  
    .slider-nav-22 .slick-slide img,
    .slider-nav-33 .slick-slide img {
      width: 90%;
      padding-right: 0px;
      margin-left: -25px !important;
      margin-right: 0px !important;
    } */

  .other-villa {
    padding: 50px 20px;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/09/bg-grey-baru.webp);
    background-size: cover;
    text-align: center;
  }

  .other-villa h2 {
    font: normal normal 500 16px/25px Accia Piano;
    letter-spacing: 0.5px;
    color: #000000;
    text-transform: uppercase;
    padding-bottom: 5px;
  }

  .other-villa h3 {
    font: normal normal 500 22px/30px Accia Piano;
    letter-spacing: 0.5px;
    color: #000000;
    text-transform: capitalize;
  }

  .other-villa img {
    display: block;
    padding: 30px 0px;
  }

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

  .other-villa {
    padding: 50px 20px;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/09/bg-grey-baru.webp);
    background-size: cover;
    text-align: center;
  }

  .other-villa h2 {
    font: normal normal 500 16px/25px Accia Piano;
    letter-spacing: 0.5px;
    color: #000000;
    text-transform: uppercase;
    padding-bottom: 5px;
  }

  .other-villa h3 {
    font: normal normal 500 22px/30px Accia Piano;
    letter-spacing: 0.5px;
    color: #000000;
    text-transform: capitalize;
  }

  .other-villa img {
    display: block;
    padding: 30px 0px;
  }

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

  .booking {
    padding: 50px 20px;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/09/bg-brown-new.webp);
    background-size: cover;
    text-align: center;
  }

  .booking h2 {
    font: normal normal 500 20px/27px Accia Piano;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 40px;
  }

  .booking h2 .price-text {
    font: normal normal 500 18px/37px Accia Piano;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
  }

  .booking .booking-area .label {
    text-align: left;
    font: normal normal 500 16px/20px Accia Piano;
    letter-spacing: 0.3px;
    color: #e0dcd2;
    padding: 0px 0px 8px 10px;
  }

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

  .booking .booking-area .date-m {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
  }

  .booking .booking-area .guests-no-m {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

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

  .booking .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: #e0dcd2;
    border: 1px solid #2e311f;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    background-color: #2e311f !important;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 20px auto 0px auto;
  }

  .booking .note-text {
    text-align: left;
    font: normal normal 400 18px/25px Avenir;
    letter-spacing: 0.38px;
    color: #e0dcd2;
    padding-top: 10px;
  }

  .booking .note-text span {
    font-weight: 700;
  }

  .booking .booking-area .guest-nameM {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 2px 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-nameM:focus {
    outline: none;
  }

  .booking .booking-area .iti {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .booking .booking-area .guest-phoneM {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    background-color: #e0dcd2;
    width: 100%;
    padding: 2px 50px;
  }

  .booking .booking-area .guest-phoneM:focus {
    outline: none;
  }

  .booking .booking-area .mail-label {
    margin-top: 15px;
  }

  .booking .booking-area .guest-emailM {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 2px 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-emailM:focus {
    outline: none;
  }

  .booking .booking-area form {
    display: flex;
    flex-direction: column;
    text-align: left;
  }
}


/* Tablet */
@media screen and (min-width: 769px) and (max-width: 991px) {
  html {
    margin-top: 0px !important;
  }

  button:focus {
    outline: none !important;
  }

  /* FLOAT WA */

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

  .closeBtn {
    z-index: 100;
    position: absolute;
    top: 20%;
    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;
  }

  .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;
  }

  /* FLOAT WA */

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

  .desktop-container {
    display: block;
  }

  .mobile-container {
    display: none;
  }

  .villa-hero {
    width: 100%;
    position: relative;
    display: flex;
  }

  .villa-hero .villa-text {
    width: 50%;
    position: relative;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/bg-text-1.webp);
    background-size: cover;
    background-position: center;
    padding-top: 15%;
    padding-bottom: 40px;
    padding-inline: 30px;
  }

  .villa-text .text-content {
    width: 100%;
    position: relative;
  }

  .text-content h2 {
    font: normal normal 300 40px/45px Accia Piano;
    color: #714923;
    -webkit-text-stroke: 1px #714923;
    margin-bottom: 30px;
    letter-spacing: 0px;
  }

  .text-content p {
    font: normal normal 500 16px/25px Avenir;
    color: #714923;
    margin-bottom: 30px;
    letter-spacing: 0px;
  }

  .text-content .btn-flex {
    width: 100%;
    display: flex;
    margin-bottom: 30px;
  }

  .text-content .btn-flex .button {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 600 20px / 28px Accia Piano;
    letter-spacing: 0px;
    color: #714923;
    border: 1px solid #714923;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    width: 100%;
    background: transparent;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 0px auto;
  }

  .villa-text .button.active,
  .villa-text .button:hover {
    color: #e1dbcb;
    border: 1px solid #6d4621;
    background: #6d4621;
  }

  .villa-text h3 {
    color: #b49d38;
    font: normal normal 400 25px / 38px Accia Piano;
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-bottom: 30px;
  }

  .villa-text .features {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 300px;
    justify-content: flex-start;
    column-gap: 20px;
  }

  .villa-text h5 {
    font: normal normal 400 13px / 20px Avenir;
    padding-bottom: 10px;
    color: #714923;
    width: 45%;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .grand-3-br {
    display: none;
  }

  .villa-hero .villa-img {
    width: 50%;
    position: relative;
  }

  .villa-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .villa-img .buttons-flex {
    width: 100%;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    column-gap: 10px;
  }

  .villa-img .buttons-flex .button-media {
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal 600 20px / 28px Accia Piano;
    letter-spacing: 0px;
    color: #714923;
    border: 1px solid #714923;
    padding: 8px 0px;
    text-align: center;
    text-decoration: none;
    width: 40%;
    background: url(https://khastanahadiubud.com/wp-content/uploads/2024/10/bg-khastana-scaled.webp);
    background-size: 100% 100%;
    background-position: center;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
  }

  /* PopUp */
  .elemen-grand {
    display: none;
    opacity: 0;
  }

  .grand-desktop-trigger {
    display: none;
    opacity: 0;
  }

  .grand-slider-mobile {
    display: none;
  }

  .grand-slider-desktop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    padding-top: 20%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 15;
    height: 100vh;
    display: none;
  }

  .grand-slider-desktop .slider-container {
    width: 100%;
    text-align: center;
    position: relative;
  }

  .grand-slider-desktop .grand-slider img {
    width: 90%;
    margin: 0px auto;
  }

  .grand-slider-desktop .arrow-flex {
    width: 95%;
    display: flex;
    position: absolute;
    justify-content: space-between;
    padding: 0px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999999999;
  }

  .grand-slider-desktop .arrow-flex .left-arrow {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    max-width: 50px;
  }

  .grand-slider-desktop .arrow-flex .right-arrow {
    max-width: 50px;
  }

  .grand-slider-desktop .close-grand-slider {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 600 20px / 28px Accia Piano;
    letter-spacing: 0.5px;
    color: #6d4621;
    border: 1px solid #e2ddcc;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    width: 120px;
    background: #e2ddcc;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 0px auto;
  }

  .grand-slider-desktop .close-grand-slider .close-logo {
    max-width: 20px;
  }

  .m-video-popup {
    display: none;
  }

  .video-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    padding: 100px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 15;
    padding-top: 30%;
    display: none;
  }

  .video-popup .inner {
    position: relative;
    padding: 10px;
    background-color: #fff;
  }

  .video-popup #closeBtn {
    position: absolute;
    max-width: 30px;
    top: 3%;
    right: 2%;
  }

  .video-popup #playPauseBtn {
    position: absolute;
    max-width: 35px;
    bottom: 5%;
    left: 48%;
  }

  .video-popup #muteBtn {
    position: absolute;
    max-width: 44px;
    bottom: 5%;
    left: 52%;
  }

  .video-popup #closeBtnGrand {
    position: absolute;
    max-width: 30px;
    top: 3%;
    right: 2%;
  }

  .video-popup #playPauseBtnGrand {
    position: absolute;
    max-width: 35px;
    bottom: 5%;
    left: 48%;
  }

  .video-popup #muteBtnGrand {
    position: absolute;
    max-width: 44px;
    bottom: 5%;
    left: 52%;
  }

  /* Section 2 */
  .villa-features {
    width: 100%;
    position: relative;
    padding: 10% 80px;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/Group-5777-scaled.webp);
    background-size: cover;
    background-position: top center;
  }

  .villa-features .features-flex {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 40px;
  }

  .features-flex .features-image {
    width: 45%;
    position: relative;
  }

  .features-flex .features-image .poster {
    width: 100%;
    display: block;
  }

  .features-flex .features-content {
    width: 60%;
    position: relative;
  }

  .features-content h2 {
    font: normal italic 300 30px/40px Accia Piano;
    letter-spacing: 0px;
    color: #714923;
    margin-bottom: 30px;
  }

  .features-content p {
    font: normal normal 500 18px/30px Avenir;
    letter-spacing: 0px;
    color: #33291E;
    margin-bottom: 30px;
  }

  .features-content img {
    width: 100%;
    display: block;
  }

  /* Section 3 */
  .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;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .section-4 .overlay-item {
    width: 100%;
    padding: 50px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

  .section-4 .title-button-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%;
  }

  .section-4 .title-button-flex h3 {
    text-align: left;
    font: normal normal 300 40px/55px Accia Piano;
    letter-spacing: 0px;
    color: #e0dcd2;
  }

  .section-4 .title-button-flex .button {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 500 16px / 25px Accia Piano;
    letter-spacing: 0px;
    color: #fff;
    border: 1px solid #303220;
    padding: 10px 8px;
    text-align: center;
    text-decoration: none;
    width: 250px;
    background: #303220;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
  }

  .section-4 .overlay-item {
    position: relative;
  }

  .section-4 .villa-slider-grand {
    width: 100%;
  }

  .section-4 .villa-slider-container {
    width: 90%;
  }

  .villa-slider-grand .slider-item img {
    width: 100%;
    display: block;
  }

  .section-4 .arrow-flex-slider {
    width: 95%;
    display: flex;
    position: absolute;
    justify-content: space-between;
    padding: 0px;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .section-4 .arrow-flex-slider .left-arrow {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    max-width: 50px;
  }

  .section-4 .arrow-flex-slider .right-arrow {
    max-width: 50px;
  }

  .section-4 .slider-item h3 {
    font: normal normal 400 28px / 40px Accia Piano;
    padding-top: 30px;
    color: #ffffff;
    text-align: center;
    width: 80%;
    margin-inline: auto;
  }

  .book-explore {
    width: 100%;
  }

  .book-explore-flex {
    display: flex;
    position: relative;
  }

  .book-explore .booking {
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/BG-New.webp);
    background-size: cover;
    width: 35%;
    text-align: center;
    padding: 80px 80px;
  }

  .book-explore .explore {
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/Group-5777-scaled.webp);
    background-size: cover;
    width: 70%;
    text-align: center;
    padding: 80px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .booking h2 {
    font: normal normal 500 30px/37px Accia Piano;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 40px;
  }

  .booking h2 .price-text {
    font: normal normal 500 20px/37px Accia Piano;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
  }

  .booking .booking-area form {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .booking .booking-area form .label {
    text-align: left;
    font: normal normal 500 20px/30px Accia Piano;
    letter-spacing: 0.3px;
    color: #e0dcd2;
    padding: 0px 0px 8px 10px;
  }

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

  .booking .booking-area .date-m {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
  }

  .booking .booking-area .guests-no-m {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

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

  .booking .booking-area .guest-name {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-name:focus {
    outline: none;
  }

  .booking .booking-area .iti {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .booking .booking-area .guest-phone {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-phone:focus {
    outline: none;
  }

  .booking .booking-area .mail-label {
    margin-top: 15px;
  }

  .booking .booking-area .guest-email {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-email:focus {
    outline: none;
  }

  .booking .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: #e0dcd2;
    border: 1px solid #2e311f;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    background-color: #2e311f !important;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 20px auto 0px auto;
  }

  .booking .note-text {
    text-align: center;
    font: normal normal 400 18px/25px Avenir;
    letter-spacing: 0.38px;
    color: #e0dcd2;
    padding-top: 10px;
  }

  .booking .note-text span {
    font-weight: 700;
  }

  .explore h2 {
    font: normal normal 500 30px/37px Accia Piano;
    letter-spacing: 0.5px;
    color: #303220;
    text-transform: uppercase;
    padding-bottom: 10px;
  }

  .explore h3 {
    font: normal normal 400 20px/30px Accia Piano;
    padding-bottom: 40px;
    color: #303220;
  }

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

}

/* Laptop */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  html {
    margin-top: 0px !important;
  }

  button:focus {
    outline: none !important;
  }

  /* FLOAT WA */

  .floating-popup {
    position: fixed;
    transition: all 0.5s ease;
    bottom: 9%;
    right: 1%;
    opacity: 1;
    z-index: 5;
    /* display: none; */
    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;
  }

  .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;
  }

  /* FLOAT WA */

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

  .desktop-container {
    display: block;
  }

  .mobile-container {
    display: none;
  }

  .villa-hero {
    width: 100%;
    position: relative;
    display: flex;
  }

  .villa-hero .villa-text {
    width: 50%;
    position: relative;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/bg-text-1.webp);
    background-size: cover;
    background-position: center;
    padding-top: 12%;
    padding-bottom: 40px;
    padding-inline: 30px;
  }

  .villa-text .text-content {
    width: 100%;
    position: relative;
  }

  .text-content h2 {
    font: normal normal 300 40px/45px Accia Piano;
    color: #714923;
    -webkit-text-stroke: 1px #714923;
    margin-bottom: 30px;
    letter-spacing: 0px;
  }

  .text-content p {
    font: normal normal 500 16px/25px Avenir;
    color: #714923;
    margin-bottom: 30px;
    letter-spacing: 0px;
  }

  .text-content .btn-flex {
    width: 100%;
    display: flex;
    margin-bottom: 30px;
  }

  .text-content .btn-flex .button {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 600 20px / 28px Accia Piano;
    letter-spacing: 0px;
    color: #714923;
    border: 1px solid #714923;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    width: 100%;
    background: transparent;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 0px auto;
  }

  .villa-text .button.active,
  .villa-text .button:hover {
    color: #e1dbcb;
    border: 1px solid #6d4621;
    background: #6d4621;
  }

  .villa-text h3 {
    color: #b49d38;
    font: normal normal 400 25px / 38px Accia Piano;
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-bottom: 30px;
  }

  .villa-text .features {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 300px;
    justify-content: flex-start;
    column-gap: 20px;
  }

  .villa-text h5 {
    font: normal normal 400 13px / 20px Avenir;
    padding-bottom: 10px;
    color: #714923;
    width: 45%;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .grand-3-br {
    display: none;
  }

  .villa-hero .villa-img {
    width: 50%;
    position: relative;
  }

  .villa-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .villa-img .buttons-flex {
    width: 100%;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    column-gap: 10px;
  }

  .villa-img .buttons-flex .button-media {
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal 600 20px / 28px Accia Piano;
    letter-spacing: 0px;
    color: #714923;
    border: 1px solid #714923;
    padding: 8px 0px;
    text-align: center;
    text-decoration: none;
    width: 40%;
    background: url(https://khastanahadiubud.com/wp-content/uploads/2024/10/bg-khastana-scaled.webp);
    background-size: 100% 100%;
    background-position: center;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
  }

  /* PopUp */
  .elemen-grand {
    display: none;
    opacity: 0;
  }

  .grand-desktop-trigger {
    display: none;
    opacity: 0;
  }

  .grand-slider-mobile {
    display: none;
  }

  .grand-slider-desktop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    padding-top: 15%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 15;
    height: 100vh;
    display: none;
  }

  .grand-slider-desktop .slider-container {
    width: 100%;
    text-align: center;
    position: relative;
  }

  .grand-slider-desktop .grand-slider img {
    width: 90%;
    margin: 0px auto;
  }

  .grand-slider-desktop .arrow-flex {
    width: 95%;
    display: flex;
    position: absolute;
    justify-content: space-between;
    padding: 0px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999999999;
  }

  .grand-slider-desktop .arrow-flex .left-arrow {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    max-width: 50px;
  }

  .grand-slider-desktop .arrow-flex .right-arrow {
    max-width: 50px;
  }

  .grand-slider-desktop .close-grand-slider {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 600 20px / 28px Accia Piano;
    letter-spacing: 0.5px;
    color: #6d4621;
    border: 1px solid #e2ddcc;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    width: 120px;
    background: #e2ddcc;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 0px auto;
  }

  .grand-slider-desktop .close-grand-slider .close-logo {
    max-width: 20px;
  }

  .m-video-popup {
    display: none;
  }

  .video-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    padding: 100px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 15;
    padding-top: 20%;
    display: none;
  }

  .video-popup .inner {
    position: relative;
    padding: 10px;
    background-color: #fff;
  }

  .video-popup #closeBtn {
    position: absolute;
    max-width: 30px;
    top: 3%;
    right: 2%;
  }

  .video-popup #playPauseBtn {
    position: absolute;
    max-width: 35px;
    bottom: 5%;
    left: 48%;
  }

  .video-popup #muteBtn {
    position: absolute;
    max-width: 44px;
    bottom: 5%;
    left: 52%;
  }

  .video-popup #closeBtnGrand {
    position: absolute;
    max-width: 30px;
    top: 3%;
    right: 2%;
  }

  .video-popup #playPauseBtnGrand {
    position: absolute;
    max-width: 35px;
    bottom: 5%;
    left: 48%;
  }

  .video-popup #muteBtnGrand {
    position: absolute;
    max-width: 44px;
    bottom: 5%;
    left: 52%;
  }

  /* Section 2 */
  .villa-features {
    width: 100%;
    position: relative;
    padding: 10% 80px;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/Group-5777-scaled.webp);
    background-size: cover;
    background-position: top center;
  }

  .villa-features .features-flex {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 40px;
  }

  .features-flex .features-image {
    width: 45%;
    position: relative;
  }

  .features-flex .features-image .poster {
    width: 100%;
    display: block;
  }

  .features-flex .features-content {
    width: 60%;
    position: relative;
  }

  .features-content h2 {
    font: normal italic 300 30px/40px Accia Piano;
    letter-spacing: 0px;
    color: #714923;
    margin-bottom: 30px;
  }

  .features-content p {
    font: normal normal 500 18px/30px Avenir;
    letter-spacing: 0px;
    color: #33291E;
    margin-bottom: 30px;
  }

  .features-content img {
    width: 100%;
    display: block;
  }

  /* Section 3 */
  .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;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .section-4 .overlay-item {
    width: 100%;
    padding: 50px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

  .section-4 .title-button-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%;
  }

  .section-4 .title-button-flex h3 {
    text-align: left;
    font: normal normal 300 40px/55px Accia Piano;
    letter-spacing: 0px;
    color: #e0dcd2;
  }

  .section-4 .title-button-flex .button {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 500 16px / 25px Accia Piano;
    letter-spacing: 0px;
    color: #fff;
    border: 1px solid #303220;
    padding: 10px 8px;
    text-align: center;
    text-decoration: none;
    width: 250px;
    background: #303220;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
  }

  .section-4 .overlay-item {
    position: relative;
  }

  .section-4 .villa-slider-grand {
    width: 100%;
  }

  .section-4 .villa-slider-container {
    width: 90%;
  }

  .villa-slider-grand .slider-item img {
    width: 100%;
    display: block;
  }

  .section-4 .arrow-flex-slider {
    width: 95%;
    display: flex;
    position: absolute;
    justify-content: space-between;
    padding: 0px;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .section-4 .arrow-flex-slider .left-arrow {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    max-width: 50px;
  }

  .section-4 .arrow-flex-slider .right-arrow {
    max-width: 50px;
  }

  .section-4 .slider-item h3 {
    font: normal normal 400 28px / 40px Accia Piano;
    padding-top: 30px;
    color: #ffffff;
    text-align: center;
    width: 80%;
    margin-inline: auto;
  }

  .book-explore {
    width: 100%;
  }

  .book-explore-flex {
    display: flex;
    position: relative;
  }

  .book-explore .booking {
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/BG-New.webp);
    background-size: cover;
    width: 35%;
    text-align: center;
    padding: 80px 80px;
  }

  .book-explore .explore {
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/Group-5777-scaled.webp);
    background-size: cover;
    width: 70%;
    text-align: center;
    padding: 80px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .booking h2 {
    font: normal normal 500 30px/37px Accia Piano;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 40px;
  }

  .booking h2 .price-text {
    font: normal normal 500 20px/37px Accia Piano;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
  }

  .booking .booking-area form {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .booking .booking-area form .label {
    text-align: left;
    font: normal normal 500 20px/30px Accia Piano;
    letter-spacing: 0.3px;
    color: #e0dcd2;
    padding: 0px 0px 8px 10px;
  }

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

  .booking .booking-area .date-m {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
  }

  .booking .booking-area .guests-no-m {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

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

  .booking .booking-area .guest-name {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-name:focus {
    outline: none;
  }

  .booking .booking-area .iti {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .booking .booking-area .guest-phone {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-phone:focus {
    outline: none;
  }

  .booking .booking-area .mail-label {
    margin-top: 15px;
  }

  .booking .booking-area .guest-email {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-email:focus {
    outline: none;
  }

  .booking .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: #e0dcd2;
    border: 1px solid #2e311f;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    background-color: #2e311f !important;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 20px auto 0px auto;
  }

  .booking .note-text {
    text-align: center;
    font: normal normal 400 18px/25px Avenir;
    letter-spacing: 0.38px;
    color: #e0dcd2;
    padding-top: 10px;
  }

  .booking .note-text span {
    font-weight: 700;
  }

  .explore h2 {
    font: normal normal 500 30px/37px Accia Piano;
    letter-spacing: 0.5px;
    color: #303220;
    text-transform: uppercase;
    padding-bottom: 10px;
  }

  .explore h3 {
    font: normal normal 400 20px/30px Accia Piano;
    padding-bottom: 40px;
    color: #303220;
  }

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

}

/* Desktop */
@media screen and (min-width: 1200px) {
  html {
    margin-top: 0px !important;
  }

  button:focus {
    outline: none !important;
  }

  /* FLOAT WA */

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

  .closeBtn {
    z-index: 100;
    position: absolute;
    top: 28%;
    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;
  }

  /* FLOAT WA */

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

  .desktop-container {
    display: block;
  }

  .mobile-container {
    display: none;
  }

  .villa-hero {
    width: 100%;
    position: relative;
    display: flex;
  }

  .villa-hero .villa-text {
    width: 50%;
    position: relative;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/bg-text-1.webp);
    background-size: cover;
    background-position: center;
    padding-top: 10%;
    padding-bottom: 40px;
    padding-inline: 30px;
  }

  .villa-text .text-content {
    width: 100%;
    position: relative;
  }

  .text-content h2 {
    font: normal normal 300 45px/55px Accia Piano;
    color: #714923;
    -webkit-text-stroke: 1px #714923;
    margin-bottom: 30px;
    letter-spacing: 0px;
  }

  .text-content p {
    font: normal normal 500 18px/30px Avenir;
    color: #714923;
    margin-bottom: 30px;
    letter-spacing: 0px;
  }

  .text-content .btn-flex {
    width: 100%;
    display: flex;
    margin-bottom: 30px;
  }

  .text-content .btn-flex .button {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 600 20px / 28px Accia Piano;
    letter-spacing: 0px;
    color: #714923;
    border: 1px solid #714923;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    width: 100%;
    background: transparent;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 0px auto;
  }

  .villa-text .button.active,
  .villa-text .button:hover {
    color: #e1dbcb;
    border: 1px solid #6d4621;
    background: #6d4621;
  }

  .villa-text h3 {
    color: #b49d38;
    font: normal normal 400 25px / 38px Accia Piano;
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-bottom: 30px;
  }

  .villa-text .features {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 250px;
    justify-content: flex-start;
    column-gap: 20px;
  }

  .villa-text h5 {
    font: normal normal 400 16px / 25px Avenir;
    padding-bottom: 10px;
    color: #714923;
    width: 45%;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .grand-3-br {
    display: none;
  }

  .villa-hero .villa-img {
    width: 50%;
    position: relative;
  }

  .villa-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .villa-img .buttons-flex {
    width: 100%;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    column-gap: 10px;
  }

  .villa-img .buttons-flex .button-media {
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal 600 20px / 28px Accia Piano;
    letter-spacing: 0px;
    color: #714923;
    border: 1px solid #714923;
    padding: 8px 0px;
    text-align: center;
    text-decoration: none;
    width: 40%;
    background: url(https://khastanahadiubud.com/wp-content/uploads/2024/10/bg-khastana-scaled.webp);
    background-size: 100% 100%;
    background-position: center;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
  }

  /* PopUp */
  .elemen-grand {
    display: none;
    opacity: 0;
  }

  .grand-desktop-trigger {
    display: none;
    opacity: 0;
  }

  .grand-slider-mobile {
    display: none;
  }

  .grand-slider-desktop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    padding-top: 10%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 15;
    height: 100vh;
    display: none;
  }

  .grand-slider-desktop .slider-container {
    width: 100%;
    text-align: center;
    position: relative;
  }

  .grand-slider-desktop .grand-slider img {
    width: 50%;
    margin: 0px auto;
  }

  .grand-slider-desktop .arrow-flex {
    width: 65%;
    display: flex;
    position: absolute;
    justify-content: space-between;
    padding: 0px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999999999;
  }

  .grand-slider-desktop .arrow-flex .left-arrow {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    max-width: 50px;
  }

  .grand-slider-desktop .arrow-flex .right-arrow {
    max-width: 50px;
  }

  .grand-slider-desktop .close-grand-slider {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 600 20px / 28px Accia Piano;
    letter-spacing: 0.5px;
    color: #6d4621;
    border: 1px solid #e2ddcc;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    width: 120px;
    background: #e2ddcc;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 0px auto;
  }

  .grand-slider-desktop .close-grand-slider .close-logo {
    max-width: 20px;
  }

  .m-video-popup {
    display: none;
  }

  .video-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    padding: 100px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 15;
    padding-top: 0%;
    display: none;
  }

  .video-popup .inner {
    position: relative;
    padding: 10px;
    background-color: #fff;
  }

  .video-popup #closeBtn {
    position: absolute;
    max-width: 30px;
    top: 3%;
    right: 2%;
  }

  .video-popup #playPauseBtn {
    position: absolute;
    max-width: 35px;
    bottom: 5%;
    left: 48%;
  }

  .video-popup #muteBtn {
    position: absolute;
    max-width: 44px;
    bottom: 5%;
    left: 52%;
  }

  .video-popup #closeBtnGrand {
    position: absolute;
    max-width: 30px;
    top: 3%;
    right: 2%;
  }

  .video-popup #playPauseBtnGrand {
    position: absolute;
    max-width: 35px;
    bottom: 5%;
    left: 48%;
  }

  .video-popup #muteBtnGrand {
    position: absolute;
    max-width: 44px;
    bottom: 5%;
    left: 52%;
  }

  /* Section 2 */
  .villa-features {
    width: 100%;
    position: relative;
    padding: 10% 80px 10% 150px;
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/Group-5777-scaled.webp);
    background-size: cover;
    background-position: top center;
  }

  .villa-features .features-flex {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 100px;
  }

  .features-flex .features-image {
    width: 40%;
    position: relative;
  }

  .features-flex .features-image .poster {
    width: 100%;
    display: block;
  }

  .features-flex .features-content {
    width: 60%;
    position: relative;
  }

  .features-content h2 {
    font: normal italic 300 50px/60px Accia Piano;
    letter-spacing: 0px;
    color: #714923;
    margin-bottom: 30px;
    width: 90%;
  }

  .features-content p {
    font: normal normal 500 20px/30px Avenir;
    letter-spacing: 0px;
    color: #33291E;
    margin-bottom: 30px;
    width: 90%;
  }

  .features-content img {
    width: 70%;
    display: block;
  }

  /* Section 3 */
  .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;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 2%;
  }

  .section-4 .overlay-item {
    width: 100%;
    padding: 50px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

  .section-4 .title-button-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%;
  }

  .section-4 .title-button-flex h3 {
    text-align: left;
    font: normal normal 300 45px/55px Accia Piano;
    letter-spacing: 0px;
    color: #e0dcd2;
  }

  .section-4 .title-button-flex .button {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font: normal normal 500 16px / 25px Accia Piano;
    letter-spacing: 0px;
    color: #fff;
    border: 1px solid #303220;
    padding: 10px 8px;
    text-align: center;
    text-decoration: none;
    width: 250px;
    background: #303220;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
  }

  .section-4 .overlay-item {
    position: relative;
  }

  .section-4 .villa-slider-grand {
    width: 100%;
  }

  .section-4 .villa-slider-container {
    width: 90%;
  }

  .villa-slider-grand .slider-item img {
    width: 65%;
    display: block;
    margin-inline: auto;
  }

  .section-4 .arrow-flex-slider {
    width: 65%;
    display: flex;
    position: absolute;
    justify-content: space-between;
    padding: 0px;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .section-4 .arrow-flex-slider .left-arrow {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    max-width: 50px;
  }

  .section-4 .arrow-flex-slider .right-arrow {
    max-width: 50px;
  }

  .section-4 .slider-item h3 {
    font: normal normal 400 35px / 45px Accia Piano;
    padding-top: 30px;
    color: #ffffff;
    text-align: center;
    width: 50%;
    margin-inline: auto;
  }

  .book-explore {
    width: 100%;
  }

  .book-explore-flex {
    display: flex;
    position: relative;
  }

  .book-explore .booking {
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/BG-New.webp);
    background-size: cover;
    width: 35%;
    text-align: center;
    padding: 80px 80px;
  }

  .book-explore .explore {
    background-image: url(https://khastanahadiubud.com/wp-content/uploads/2024/08/Group-5777-scaled.webp);
    background-size: cover;
    width: 70%;
    text-align: center;
    padding: 80px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .booking h2 {
    font: normal normal 500 30px/37px Accia Piano;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 40px;
  }

  .booking h2 .price-text {
    font: normal normal 500 20px/37px Accia Piano;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
  }

  .booking .booking-area form {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .booking .booking-area form .label {
    text-align: left;
    font: normal normal 500 20px/30px Accia Piano;
    letter-spacing: 0.3px;
    color: #e0dcd2;
    padding: 0px 0px 8px 10px;
  }

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

  .booking .booking-area .date-m {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
  }

  .booking .booking-area .guests-no-m {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

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

  .booking .booking-area .guest-name {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-name:focus {
    outline: none;
  }

  .booking .booking-area .iti {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .booking .booking-area .guest-phone {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-phone:focus {
    outline: none;
  }

  .booking .booking-area .mail-label {
    margin-top: 15px;
  }

  .booking .booking-area .guest-email {
    border: 1px #e0dcd2 solid;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #e0dcd2;
    width: 100%;
  }

  .booking .booking-area .guest-email:focus {
    outline: none;
  }

  .booking .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: #e0dcd2;
    border: 1px solid #2e311f;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    background-color: #2e311f !important;
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease-out;
    z-index: 1;
    border-radius: 10px;
    margin: 20px auto 0px auto;
  }

  .booking .note-text {
    text-align: center;
    font: normal normal 400 18px/25px Avenir;
    letter-spacing: 0.38px;
    color: #e0dcd2;
    padding-top: 10px;
  }

  .booking .note-text span {
    font-weight: 700;
  }

  .explore h2 {
    font: normal normal 500 30px/37px Accia Piano;
    letter-spacing: 0.5px;
    color: #303220;
    text-transform: uppercase;
    padding-bottom: 10px;
  }

  .explore h3 {
    font: normal normal 400 20px/30px Accia Piano;
    padding-bottom: 40px;
    color: #303220;
  }

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

}