.elementor-5288 .elementor-element.elementor-element-55bb78a9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5288 .elementor-element.elementor-element-62af480c .knsl-title-frame{align-items:center;}.elementor-5288 .elementor-element.elementor-element-62af480c .knsl-banner-simple .knsl-title--h{text-transform:uppercase;}.elementor-5288 .elementor-element.elementor-element-842fca4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:31px;--padding-bottom:13px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for mpa-employees-list, class: .elementor-element-9e0976b *//* 1. Prevent the card image from spilling past borders when scaling */
.elementor-5288 .elementor-element.elementor-element-9e0976b .mpa-grid-column,
.elementor-5288 .elementor-element.elementor-element-9e0976b .mpa-loop-post-wrapper,
.elementor-5288 .elementor-element.elementor-element-9e0976b .mpa-loop-post-thumbnail,
.elementor-5288 .elementor-element.elementor-element-9e0976b p.post-thumbnail {
    position: relative !important;
    overflow: hidden !important;
}

/* 2. Configure a smooth motion transition directly on the room image */
.elementor-5288 .elementor-element.elementor-element-9e0976b .mpa-loop-post-wrapper img,
.elementor-5288 .elementor-element.elementor-element-9e0976b p.post-thumbnail img {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 3. Zoom ONLY the individual room card image that the cursor is touching */
.elementor-5288 .elementor-element.elementor-element-9e0976b .mpa-grid-column:hover .mpa-loop-post-wrapper img,
.elementor-5288 .elementor-element.elementor-element-9e0976b .mpa-grid-column:hover p.post-thumbnail img {
    transform: scale(1.15) !important;
}

/* 4. Create and style the hidden "View" button badge overlay */
.elementor-5288 .elementor-element.elementor-element-9e0976b .mpa-grid-column::after {
    content: 'View' !important;
    position: absolute !important;
    top: 40% !important; /* Positions it nicely over the image block area */
    left: 50% !important;
    transform: translate(-50%, -20%) !important;
    background-color: #111111 !important; /* Matches sleek premium hotel aesthetics */
    color: #ffffff !important;
    padding: 10px 26px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important;
    opacity: 0 !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    pointer-events: none !important; /* Clicks pass right through down to the page link */
    z-index: 10 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* 5. Slide and reveal the button up dynamically on active hover trigger */
.elementor-5288 .elementor-element.elementor-element-9e0976b .mpa-grid-column:hover::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
}/* End custom CSS */