/*---------------- ACCOMMODATION PAGE STYLES ----------------*/

.roomsBanner {
    background-image: image-set(url("../images/rooms/BlanketWebsite_RoomsPage_Banner@1x.webp") 1x,
            url("../images/rooms/BlanketWebsite_RoomsPage_Banner@0.75x.webp") 0.75x,
            url("../images/rooms/BlanketWebsite_RoomsPage_Banner@1x.png") 1x,
            url("../images/rooms/BlanketWebsite_RoomsPage_Banner@0.75x.png") 0.75x);
}

.roomsPageContent {
    gap: 6rem;
}

.roomsPageContent_head {
    gap: 4rem;
}

.room_Cards {
    gap: 6rem;
}

.room_Card {
    background: var(--white-color);
    min-height: 45rem;
    width: 100%;
    display: flex;
    overflow: hidden;
}

.room_Card_Content {
    padding: 4rem 6rem;
    width: 10%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.5rem;
}

.room_Card_image {
    width: 44%;
    background: var(--white-color);
}

.room_Card_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Accommodation Slider Styles */
.accommodationSlider,
.accommodationSlider .splide__track,
.accommodationSlider .splide__list,
.accommodationSlider .splide__slide {
    height: 100%;
}

.accommodationSlider .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.accommodationSlider .splide__arrows {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    z-index: 50;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: 5rem;
    height: 2rem;
}

.accommodationSlider .splide__arrow {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
    width: 2rem;
    height: 2rem;
    position: static;
    transform: none;
}

.accommodationSlider .splide__arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}


/*---------------- RESPONSIVE STYLES ----------------*/

@media(max-width: 1399px) {
    .roomsPageContent {
        gap: 4rem;
    }

    .room_Card_Content {
        padding: 4rem 3rem 4rem 4rem;
    }

    .room_Card {
        min-height: 40rem;
    }
}

@media(max-width: 1199px) {
    .room_Card_Content .aminities_list {
        gap: 1rem;
    }

    .room_Card_Content .aminities_item p {
        font-size: 0.9rem;
    }

    .room_Card_Content .aminities_item img {
        width: 1rem;
        height: 1rem;
    }

    .room_Cards {
        gap: 4rem;
    }
}

@media(max-width: 991px) {
    .room_Card_Content {
        padding: 4rem 3rem;
    }

    .roomsBanner {
        background-image: image-set(url("../images/rooms/BlanketWebsite_RoomsPage_Banner@0.5x.webp") 0.5x,
                url("../images/rooms/BlanketWebsite_RoomsPage_Banner@0.25x.webp") 0.25x,
                url("../images/rooms/BlanketWebsite_RoomsPage_Banner@0.5x.jpg") 0.5x,
                url("../images/rooms/BlanketWebsite_RoomsPage_Banner@0.25x.png") 0.25x);
    }
}

@media(max-width: 767px) {
    .room_Card {
        flex-direction: column-reverse;
    }

    .room_Card_Content,
    .room_Card_image {
        width: 100%;
    }

    .room_Card_image {
        height: 20rem;
    }

    .room_Card_Content {
        padding: 3rem;
    }
}

@media(max-width: 576px) {
    .room_Card_Content {
        padding: 3rem 2rem;
    }
}