/* Top Bar */
.top-bar {
    position: fixed;
    width: 100%;
    max-width: 2003px;
    margin: auto;
    background: rgba(255, 255, 255, 0.80);
    z-index: 1000;
}

.top-bar::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.80);
    filter: blur(20px);
    z-index: -1;
    top: 0;
    left: 0;
}

.top-bar-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.80);
    z-index: 100;
}

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5vw;
    height: 15vw;
}

.nav-item, .logo-text {
    color: #AD8616;
    font-family: 'SeoulHangang CBL', sans-serif;
    font-weight: 600;
    font-size: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #EBE3DA;
    z-index: -1;
    filter: blur(20px);
    opacity: 0; /* Initially invisible */
    transition: opacity 0.3s ease; /* Smooth transition for hover effect */
}

.nav-item:hover {
    height: 15vw;
}

.nav-item:hover::before {
    opacity: 0.7; /* Visible on hover */
}

.logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 8px;
    font-size: 1.5vw;
    flex-grow: 0; /* Prevents the logo from stretching */
}

.nav-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-logo img {
    width: auto;
    height: 10vw;
}



/* Banner */
.banner-container {
    position: relative;
    width: 100%;
    height: 25vw;
    padding-bottom: 50%; /* This percentage controls the aspect ratio */
}

.banner-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1; /* 100% Transparency */
}

.banner-text {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 65%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust to center the text block */
    text-align: center;
    color: #ffffff;
    width: 40%; /* Width of the text block */
    max-width: 100vw; /* Maximum width */
    text-align: left;
    display: flex;
    align-items: center; /* Align items vertically in the center */
    justify-content: space-between; /* Space between the elements */
}

.banner-text h1 {
    font-size: 3vw; /* Responsive font size */
    font-family: 'SeoulHangang CBL', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin-left: 5vw; /* Adds some space between h1 and p */
}

.banner-text p {
    font-size: 1.7vw;
    font-family: 'SeoulHangang CBL', sans-serif;
    font-weight: 200;
    line-height: 3vw;
    word-wrap: break-word;
    text-align: left; /* Align text to the left */
    width: 90%; /* Adjust the width as needed */
}



/* Rooms */
.content-area {
    transform: translateY(-1%); /* Adjust Gap Bug */
    position: relative;
    width: 100%;
    height: 50vw;
    background-color: #EBE3DA;
}


.image-container {
    position: absolute;
    right: 51.3%;
    top: 15%;
}

.content-image {
    width: 50vw;
    height: 35vw;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.fade-in {
    opacity: 1;
}

.fade-out {
    opacity: 0;
}

.content-image.active {
    opacity: 1; /* Fully visible when active */
}

.border-overlay {
    width: 50vw;
    height: 34.5vw;
    position: absolute;
    top: 0vw;
    left: 0vw;
    border: 0.5vw solid rgb(255, 255, 255);
}

.content-list {
    position: absolute;
    padding: 1vw;
    top: 30vw;
    list-style: none; /* Remove default list bullets */
    padding-left: 0; /* Remove default padding */
    color: #AD8616;
    font-size: 1.3vw; /* Responsive font size */
    font-family: 'SeoulHangang', sans-serif;
    font-weight: 400;
    line-height: 2vw; /* Relative line height */
    word-wrap: break-word;
    width: 15vw;
}

.content-list li {
    list-style: disc;
    padding-left: 0.5vw; /* Responsive padding */
    background-size: 1.5vw 1.5vw; /* Responsive background size */
    margin-bottom: 1vw; /* Responsive spacing */
    text-align: left; /* Align text to the left */
    opacity: 0; /* Start with items invisible */
    animation: slideIn 5s ease forwards; /* Use the animation */
}

.content-list li:nth-child(1) {
    animation-delay: 1s; /* Delay for the first item */
}

.content-list li:nth-child(2) {
    animation-delay: 2s; /* Delay for the second item */
}

.content-list li:nth-child(3) {
    animation-delay: 3s; /* Delay for the third item */
}

.content-list li:nth-child(4) {
    animation-delay: 4s; /* Delay for the third item */
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10vw);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-text {
    position: absolute;
    top: 47%;
    transform: translate(-50%, -50%);
    color: #AD8616;
    font-size: 1.3vw;
    line-height: 3vw;
    word-wrap: break-word;
    font-family: 'SeoulHangang CBL', sans-serif;
    font-weight: 400;
    padding: 1vw;
    width: 35%;
    text-align: center;
}

.title-text {
    position: absolute;
    top: 30%;
    transform: translate(-50%, -50%);
    color: #AD8616;
    font-size: 3vw;
    line-height: 2vw;
    word-wrap: break-word;
    font-family: 'SeoulHangang CBL', sans-serif;
    font-weight: 600;
    padding: 1vw;
    width: 20vw;
}



/* container */
.info-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Stretch children to fill the container height */
    position: relative; /* Ensure it's in the normal document flow */
    width: 100%;
    height: 50vw;
    background: #D9D9D9;
}

.info-content {
    /* Container for the info blocks */
    flex: 1; /* Allow it to grow to fill half of the container */
    display: flex;
    flex-direction: column; /* Stack the blocks vertically */
    align-items: flex-start;
    padding-left: 2vw;
}

.info-block {
    position: absolute;
    color: black;
    font-family: 'SeoulHangang CBL', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
}

.info-block .icon {
    position: absolute;
    background-size: contain; /* Adjust to fit the icon within the div */
    background-repeat: no-repeat; /* Prevent repeating of the background image */
    background-position: center; /* Center the background image */
}




/* address */
.address {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Align items to start from the top */
    width: 20vw;
    height: 10vw;
    left: 3vw;
    top: 4vw;
    position: absolute;
}

.address .icon.address-icon {
    width: 8vw;
    height: 8vw;
    background-image: url('info-icon/address-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 1vw; /* Space below the icon */
}

.address .label, .address .text {
    color: #000000;
    font-family: 'SeoulHangang CBL', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    text-align: center; /* Center the text */
    width: 100%; /* Use full width */
}

.address .label {
    font-size: 2vw;
    line-height: 3vw;
    margin-top: 10vw; /* Space below the icon */
}

.address .text {
    font-size: 1.3vw;
    line-height: 2vw;
    padding: 1vw;
}




/* mail */
.mail {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Align items to start from the top */
    width: 20vw;
    height: 10vw;
    left: 23vw;
    top: 4vw;
    position: absolute;
}

.mail .icon.mail-icon {
    width: 8vw;
    height: 8vw;
    background-image: url('info-icon/mail-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 1vw; /* Space below the icon */
}

.mail .label, .mail .text {
    color: #000000;
    font-family: 'SeoulHangang CBL', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    text-align: center; /* Center the text */
    width: 100%; /* Use full width */
}

.mail .label {
    font-size: 2vw;
    line-height: 3vw;
    margin-top: 10vw; /* Space below the icon */
}

.mail .text {
    font-size: 1.3vw;
    line-height: 2vw;
    padding: 1vw;
}



/* contact */
.contact {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Align items to start from the top */
    width: 20vw;
    height: 10vw;
    left: 3vw;
    top: 29vw;
    position: absolute;
}

.contact .icon.contact-icon {
    width: 8vw;
    height: 8vw;
    background-image: url('info-icon/contact-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 1vw; /* Space below the icon */
}

.contact .label, .contact .text {
    color: #000000;
    font-family: 'SeoulHangang CBL', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    text-align: center; /* Center the text */
    width: 100%; /* Use full width */
}

.contact .label {
    font-size: 2vw;
    line-height: 3vw;
    margin-top: 10vw; /* Space below the icon */
}

.contact .text {
    font-size: 1.3vw;
    line-height: 2vw;
    padding: 1vw;
}



/* social */
.contact-social {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Align items to start from the top */
    width: 10vw;
    height: 10vw;
    left: 28vw;
    top: 24vw;
    position: absolute;
}

.contact-social .contact-label {
    color: #000000;
    font-family: 'SeoulHangang CBL', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    text-align: center; /* Center the text */
    width: 100%; /* Use full width */
    font-size: 2vw;
    line-height: 3vw;
    margin-top: 10vw; /* Space below the icon */
}

.contact-social-icons {
    display: flex;
    align-items: center;
    padding-left: 0vw;
    padding-top: 1vw;
}

.contact-pressable-image {
    width: 2vw;
    height: 2vw;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    margin-left: 1.5vw;
    background-size: contain; /* Adjust to fit the icon within the div */
    background-repeat: no-repeat; /* Prevent repeating of the background image */
    background-position: center; /* Center the background image */
}

.contact-facebook-icon {
    background-image: url('social-icon/facebook2.png');
}

.contact-instagram-icon {
    background-image: url('social-icon/instagram2.png');
}

.contact-whatsapp-icon {
    background-image: url('social-icon/whatsapp2.png');
}

.contact-twitter-icon {
    background-image: url('social-icon/messenger2.png');
}

.contact-pressable-image:hover {
    transform: scale(1.1);
}

.contact-pressable-image:hover img {
    transform: scale(1.1);
}



/* map */
.responsive-map {
    width: 50vw; /* Adjust the width as needed */
    height: 50vw; /* Set the height equal to 50% of the viewport width */
    border: 0;
}


.map-iframe {
    flex: 1;  /* Take up half the width of the container */
    height: 100%; /* Full height of the container */
    border: none; /* Optional: removes the default iframe border */
}

.map-link {
    flex: 1; /* Allow it to grow to fill half of the container */
    display: block;
    overflow: hidden;
    position: relative;
    height: 100%; /* Ensure it fills the height of the container */
}

.main-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the designated area */
    transition: transform 0.3s ease;
}

.map-link:hover .main-image {
    transform: scale(1.1); /* Zoom in effect */
}



/* Footer */
.footer-container {
    position: relative;
    height: 7vw;
    background: #AD8616;
    display: flex;
    justify-content: center;
    align-items: center;
}

.copyright {
    color: white;
    font-size: 1.5vw;
    font-family: SeoulHangang;
    font-weight: 400;
    word-wrap: break-word;
}

.social-icons {
    display: flex;
    align-items: center;
    padding-left: 10vw;
}

.pressable-image {
    width: 5vw;
    height: 5vw;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    margin-left: 1vw;
    background-size: contain; /* Adjust to fit the icon within the div */
    background-repeat: no-repeat; /* Prevent repeating of the background image */
    background-position: center; /* Center the background image */
}

.facebook-icon {
    background-image: url('social-icon/facebook.png');
}

.instagram-icon {
    background-image: url('social-icon/instagram.png');
}

.whatsapp-icon {
    background-image: url('social-icon/whatsapp.png');
}

.twitter-icon {
    background-image: url('social-icon/messenger.png');
}

.pressable-image:hover {
    transform: scale(1.1);
}

.pressable-image:hover img {
    transform: scale(1.1);
}




/* Buttons */
.room-buttons {
    position: absolute;
    top: 43vw;
}

.room-buttons button {
    border: none;
    border-radius: 100vw;
    background-color: rgba(173, 134, 22, 0.3); /* Lower opacity for non-active buttons */
    padding: 1vw;
    margin: 0.2vw;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for background color and transform */
}

.room-buttons button:focus {
    outline: none;
}

.room-buttons button.active {
    background-color: #AD8616; /* Full color for active button */
}

.room-buttons button:hover {
    background-color: rgba(173, 134, 22, 0.7); /* Slightly more opacity on hover */
    transform: scale(1.2); /* Slightly enlarge the button */
}