/*--Custom CSS--*/

/* ==========================================================================
   "Experiences" dropdown -- simple custom menu, not a plugin.
   Reuses the theme's existing .gridmenu show/hide (.nav > ul > li:hover > ul.gridmenu)
   -- this file only lays out and styles the .experiencesMenu content itself.
   ========================================================================== */

/* Exact specs pulled from Figma's Inspect panel (Frame 633175): width 1400 Hug,
   padding 77px all sides. Frame 633175 has THREE flex children, not two --
   left column, a rotated hairline divider ("Line 25", 0.5px border, ~0px
   wide), and the right card -- each separated by a 70px gap. So the true
   gap between the two columns' content is 70+70=140px (the divider sits
   dead-center in it), not 70px. 522 (left) + 70 (gap) + ~0 (divider) + 70
   (gap) + 584 (right) + 77*2 (padding) = 1400px total rendered width. */
/* Positioning context is `.bottomHeader` (the theme already makes it
   position:relative, and it spans the FULL header width) -- NOT the
   individual nav <li>. Figma centers this panel against the whole page
   (Frame 633175 sits at Left:260px on a 1920px frame = (1920-1400)/2,
   true viewport centering), not against wherever the "Experiences" trigger
   happens to sit in the nav. Centering on the <li> instead was why the
   panel looked off-center. `.bottomHeader` is exactly as tall as the nav
   row, so `top: 100%` still lands it flush below the nav either way. */
.nav > ul ul.gridmenu.experiencesMenu {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    max-width: calc(100vw - 40px);
    padding: 77px !important;
    background: #f3f2ed;
    border-radius: 0; /* Figma's Frame 633175 has no Radius property at all -- sharp corners, not rounded */
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.12);
    z-index: 50;
}
.nav > ul > li:hover > ul.gridmenu.experiencesMenu {
    display: flex;
    align-items: flex-start; /* right card (372px) is intentionally shorter than the left column (453px) in Figma, not stretched to match */
}

.experiencesMenu-left,
.experiencesMenu-right {
    padding: 0 !important;
}
.experiencesMenu-left {
    /* 522px content + 70px padding (half of the true 140px column gap),
       box-sizing:border-box means width must include the padding to keep
       the content area at Figma's true 522px */
    width: 592px !important;
    flex: 0 0 592px;
    padding-right: 70px !important;
    border-right: 0.5px solid #666666;
}
.experiencesMenu-right {
    width: 654px !important;
    flex: 0 0 654px;
    padding-left: 70px !important;
    display: flex;
}

.experiencesMenu .viewMore {
    /* row1 has 8px top padding (hover highlight), so this margin is reduced
       by 8px to keep the true visual gap at Figma's 31px.
       Color is exact Figma value: Sage Green/Moss Green #718573 (was wrongly #171717) */
    display: inline-block;
    margin-bottom: 23px;
    padding: 0 0 4px !important;
    border-bottom: 1px solid #718573;
    color: #718573 !important;
    font-family: "Rubik", sans-serif !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 26px;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}
.experiencesMenu .viewMore:hover {
    color: #506151 !important;
    border-color: #506151 !important;
}

.experiencesMenu-list {
    margin: 0 !important;
    padding: 0 !important;
}
.experiencesMenu-row {
    /* row has 8px padding (for the hover highlight) on top+bottom, so the
       margin is reduced by 16px to keep the true visual gap at Figma's 31px */
    display: flex !important;
    align-items: center;
    margin: 0 -8px 15px !important;
    padding: 8px !important;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}
.experiencesMenu-row:last-child {
    margin-bottom: 0 !important;
}
.experiencesMenu-row:hover {
    background-color: #eae8e0;
}
.experiencesMenu-list .img-holder {
    /* exact Figma values: Rectangle 20025 is 81x76, radius 16 */
    flex: 0 0 auto;
    width: 81px;
    height: 76px;
    padding-bottom: 0;
    margin: 0 24px 0 0;
    border-radius: 16px;
    overflow: hidden;
}
.experiencesMenu-list .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.experiencesMenu-row:hover .img-holder img {
    transform: scale(1.08);
}
.experiencesMenu-list .caption {
    flex: 1 1 auto;
    min-width: 0;
}
.experiencesMenu-list .caption a {
    padding: 0px 0px !important;
}
.experiencesMenu-list h6 {
    /* exact Figma color: Sage Green/Moss Green #718573 (was wrongly #171717).
       Frame 21806 (the title+description text stack) confirmed Gap:24px,
       not the 4px this was wrongly using. */
    display: inline-block;
    margin: 0 0 0;
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    color: #718573;
    font-family: "Rubik", sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}
.experiencesMenu-row:hover h6 {
    color: #506151;
}
.experiencesMenu-list p {
    margin: 0 !important;
    color: #666666;
    font-family: "Rubik", sans-serif;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
}

.featureCard {
    /* exact Figma frame: 584x372, radius 30, padding 111px top/bottom
       44px left/right -- caption sits vertically centered, not bottom-anchored.
       !important on radius: something in the cascade was winning against a
       plain (non-important) declaration here even though no rule matching
       .featureCard with a competing border-radius could be found by scanning
       every stylesheet -- forcing it is the verified-working fix. */
    position: relative;
    display: block !important;
    width: 584px;
    height: 372px;
    border-radius: 30px !important;
    overflow: hidden;
    color: inherit !important;
    padding: 0 !important;
}
.featureCard img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.featureCard:hover img {
    transform: scale(1.05);
}
.featureCard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000000;
    opacity: 0.5;
}
.featureCard-caption {
    /* exact Figma spec: "title & description" group has Gap:40px between
       heading/paragraph/link -- was wrongly using 10px/14px margins */
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 111px 44px;
    text-align: center;
}
.featureCard-caption h4 {
    margin: 0;
    color: #ffffff;
    font-family: "Marcellus SC", serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
}
.featureCard-caption p {
    margin: 0;
    color: #f3f2ed;
    font-family: "Rubik", sans-serif;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 28px;
}
.featureCard-link {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 1px solid #ffffff;
    color: #ffffff;
    font-family: "Rubik", sans-serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.featureCard:hover .featureCard-link {
    color: #cbc4a6;
    border-color: #cbc4a6;
}
 
 .homeBooking-wrapper .custom-button br{display:none;}
 .diningFacilities-slider .slider-slide{padding-top:0;}
 
.property-dropdown{position:relative;display:inline-block;z-index:9999;}
.property-dropdown-toggle {display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#fff;font-size:18px;font-weight:400;cursor:pointer;transition: all 0.3s ease;}
.property-icon{display:flex;align-items:center;justify-content:center;font-size:20px;}
.property-arrow {margin-left:4px;font-size: 13px;transition: transform 0.3s ease;}
.property-dropdown-menu {
    position: absolute;top:calc(100% + 10px);left:30px;width:260px;padding:10px 0;background:#fff;border-radius:10px;box-shadow: 0 15px 40px rgba(0, 0, 0, 0.20);opacity:0;visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

/* Dropdown Items */
.property-dropdown-item {display:flex;align-items: center;justify-content:space-between;gap:20px;padding:12px 20px;color: #222 !important;text-decoration:none;transition: all 0.25s ease;font-size:16px;}
.property-dropdown-item:hover {background:#718573;color: #fff !important;}
.property-dropdown-item span {display:flex;flex-direction:column;gap:5px;}


@media (min-width: 992px) {

    .property-dropdown:hover .property-dropdown-menu,
    .property-dropdown:focus-within .property-dropdown-menu{opacity:1;visibility: visible;transform: translateY(0);}
    .property-dropdown:hover .property-arrow{transform: rotate(180deg);}
}
 
.HomeSection6{position:relative;} 
.HomeSection6 .inner-padding-180{background:rgba(0,0,0,.25);} 
 
@media screen and (max-width: 1599.98px) {
    .nav > ul ul.gridmenu.experiencesMenu { width: 1040px; padding: 50px 50px !important; }
    .experiencesMenu .viewMore { font-size: 16px !important; }
    .experiencesMenu-left { width: 470px !important; flex: 0 0 470px; padding-right: 30px !important; margin: 0px !important; }
    .experiencesMenu-right { width: 470px !important; flex: 0 0 470px; padding-left: 30px !important; margin: 0px !important;  }
    .featureCard { width: 100%; border-radius: 20px !important; }
    }

@media screen and (max-width: 1199.98px) {
    /* No display/flex override here on purpose -- meanmenu's own JS
       (js/plugins.js) toggles this exact element open/closed via
       jQuery slideUp()/slideDown(), which sets display:none/block as
       inline styles. Forcing display:flex !important here was beating
       BOTH directions of that toggle (especially close, since "none"
       could never win against !important), which is why it got stuck
       open. <li> children already stack vertically with plain block
       flow, so flex isn't even needed for this layout. */
    .mean-container .gridmenu.experiencesMenu {
        padding: 0 !important;
        background: #f3f2ed;
        max-height: 400px;
        overflow: auto;
        border-bottom: 1px dotted #666666 !important;
    }
    .mean-container .mean-nav ul li a.viewMore, .mean-container .mean-nav ul li li a.viewMore, .mean-container .mean-nav ul li li li a.viewMore {
        font-size: 15px !important;
        display: inline-block;
        padding: 0px 0px !important;
        text-align: center;
        background: transparent !important;

    }
    .mean-container .mean-nav ul li a.viewMore:hover, .mean-container .mean-nav ul li li a.viewMore:hover, .mean-container .mean-nav ul li li li a.viewMore:hover {
        color: #000000 !important;
        padding: 0px 0px !important;
    }
    .experiencesMenu-list h6 {
        margin: 0 0 0;
    }
    .experiencesMenu-list p { font-size: 14px !important; line-height: 22px;  }
    .experiencesMenu-left,
    .experiencesMenu-right {
        /* flex-basis overrides width entirely on a flex item, and the
           desktop rule sets flex:0 0 557px/619px -- width:100% alone was
           being silently ignored because of this, causing a real overflow
           on mobile (card stuck at desktop's 619px in a much narrower
           viewport). Must reset flex too, not just width. */
        width: 100% !important;
        flex: 1 1 100% !important;
        padding: 24px 20px !important;
    }
    .experiencesMenu-left {
        border-right: 0;
        border-bottom: 0.5px solid #666666;
    }
    .featureCard {
        width: 100%;
        height: 280px;
    }
    .featureCard img {
        height: 280px;
    }
    .featureCard-caption {
        padding: 15px 15px;
    }
    .featureCard-caption h4 {
        font-size: 15px;
    }
    .featureCard-caption p { font-size: 13px !important; line-height: 20px; }
    .featureCard-link {   font-size: 14px; }
}

@media screen and (max-width: 480px) {
    .experiencesMenu-list .img-holder {
        width: 60px;
        height: 60px;
    }
    .experiencesMenu-list h6 {
        font-size: 15px;
    }
}



.nav > ul > li:hover > ul.gridmenu.experiencesMenu {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
	overflow-x:none;
}
@media screen and (max-width: 1499px) {
  .nav > ul > li:hover > ul.gridmenu.experiencesMenu {
    max-height: calc(100vh - 150px);
}
}