body {
    max-width: 1200px;
    margin: 0 auto;
}

.header-logo-image {
    max-width: 200px;
    height: auto;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
 }

 .room-type {
    max-width: 1000px;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
 }

 .room-name {
    font-family: inherit;
    font-size: 4rem;
    font-weight: 100;
    color: white;
    opacity: 0.9;
 }

 .room-size {
    font-size: 2rem;
    color: white;
    opacity: 0.9;
 }



 @media (min-width: 730px) {
    .header-logo-image {
        max-width: 150px;
    }
    .room-name {
        white-space: nowrap;
        font-size: 7rem;
     }
    
 }

/* ROOM COMPARTMENT  */

.section-description {
    text-align: center;
}

.section-description-container {
   margin: 0 auto;
   justify-content: left;
}

.room-compartment {
    display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-content: center;
    margin-top: 80px;
    margin-left: 10px;
    margin-right: 20px;
    text-align: center;
}

.description-intro,
.section-description {
 text-align: center;
 
}


@media (min-width: 730px) {
    .room-compartment {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        justify-content: center;
        gap: 50px;
        margin: 80px 30px 80px 30px;
    }

    .section-description-container {
      margin: 0;
      justify-content: left;
   }

    .room-compartment p {
        text-align: left;
    }

    .description-intro,
    .section-description {
     text-align: left;
     margin-left: 0;
    }

 }


 /* ROOM FACILITIES  */

 .room-facilities {
    margin: 50px 10px 80px 10px;
    /* margin-bottom: 80px; */
 }

 .room-facilities-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: space-around;
    gap: 30px;
 }

 .icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }

 .room-icon {
    max-width: 60px;
    margin-bottom: 20px;
 }

 .icon-description {
    font-family: "Afacad Flux", sans-serif;
    text-align: center;
    font-size: 0.9rem;
 }

 @media (min-width: 730px) {
    .room-facilities-container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        align-items: center;
        justify-content: space-around;
        gap: 10px;
     }

     .room-icon {
        max-width: 80px;
     }
 }


/* POP - UP  */

.popup-container {
   z-index: 10;
   display: none;
   position: fixed;
   top: 2.5%;
   left: 2.5%;
   width: 95%;
   height: 95%;
   background: rgb(255, 255, 255);
   justify-content: center;
   align-items: center;
   border-radius: 10px;
}
.popup-content {
   background: white;
   padding: 20px;
   border-radius: 10px;
   width: 100%;
   max-width: 1000px;
   /* overflow: hidden; */
   overflow-y: auto; /* Enables scrolling within the pop-up */
   max-height: 90vh; /* Prevents pop-up from exceeding the viewport height */
   display: flex;
   flex-direction: column;
}
.popup-container h2 {
   text-align: center;
   margin-bottom: 50px;
   font-size: 30px;
   overflow: hidden;
}

.close-btn {
   position: absolute;
   top: 15px;
   right: 20px;
   font-size: 40px;
   color: #8b6e47;
   cursor: pointer;
}

.img-popup {
 position: absolute;
 width: 100px;
 height: auto;
 top: 30px;
 left: 40px;
}

.iframe-container {
   width: 100%;
   height: 700px; /* Increased height for better visibility */
   padding-top: 100px;
   overflow: auto; /* Enable scrolling */
   flex-grow: 1;
}
iframe {
   width: 100%;
   height: 100%;
   border: none;
   padding: 0;
}

.iframe-container::-webkit-scrollbar {
   width: 2px; /* Customize scrollbar height */
}

.iframe-container::-webkit-scrollbar-thumb {
   background-color: #91713c; /* Color of the scrollbar */
   border-radius: 10px;
}


@media (max-width: 768px) {
   .popup-content {
       width: 100%;
       max-width: 100%;
       overflow: hidden;
   }
   /* .popup-container h2 {
       position: absolute;
       top: 15px;
       left: 20px;
       font-size: 22px;
   } */
   .iframe-container {
       height: 800px; /* Adjust iframe height for smaller screens */
   }
   .img-popup {
       width: 50px;
       opacity: 0.5;
       top: 20px;
     }

   .close-btn {
       font-size: 30px; 
       right: 25px; 
   }
   .iframe-container::-webkit-scrollbar {
       display: none;
       /* width: 1px; Customize scrollbar height */
   }
}


 /* ROOM CAROUSELLE  */

 .carousele-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
 }

 .room-photo-carousele {
    position: relative;
    margin: 50px 10px 50px 10px;
    width: 100%;
    margin: 0 auto;
    
 }

 .room-photo-carousele img {
    /* position: relative; */
    width: 100%;
    height: auto;
 }

 .carousele-buttons {
    position: absolute;
    display: flex;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    justify-content: space-between;
    pointer-events: none;
  }
  
  .carousele-buttons button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
    pointer-events: auto; /* Enable pointer events on the buttons */
  }
  
  .carousele-buttons .prevBtn {
    margin-left: 40px;
  }
  
  .carousele-buttons .nextBtn {
    margin-right: 40px;
  }