.elementor-6444 .elementor-element.elementor-element-66494006{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6444 .elementor-element.elementor-element-1cb5eb26 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6444 .elementor-element.elementor-element-3443e741 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6444 .elementor-element.elementor-element-648b1895 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6444 .elementor-element.elementor-element-4a6483ae > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6444 .elementor-element.elementor-element-6e7579d5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6444 .elementor-element.elementor-element-6bdb34c1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6444 .elementor-element.elementor-element-7d56df99 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-6444 .elementor-element.elementor-element-8307260 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS */@media(max-width:767px){html body .hv5 #join#join{padding:40px 20px 40px}}
/* Home 6444 — append to Page Settings → Custom CSS (after the existing #join line).
   No !important. Brand: navy #1c3042, pink #f757a2. */

/* 1. Horizontal overflow / content cut off on the right (≈1024–1280).
   Root causes found in the kit:
   (a) Desktop mockup CSS sets .hv5 { width:1280px } from 768px up (scoped from
       00-home-v5-desktop.html). max-width:100% softens it, but keep width fluid.
   (b) Offerings card 2: .obtn is flex-direction:row with a min-width:340px button
       PLUS the "Events & Experiences →" .tl link (nowrap). At ~1024 that link
       protrudes past the viewport (measured right edge ≈1078px in local preview)
       and is clipped by .ocard { overflow:hidden }, which looks like the page
       is cut off on the right.
   (c) .hhero background-size was fixed at 1280px. */
@media (min-width:768px){
html body .hv5.hv5{width:100%;max-width:100%;box-sizing:border-box}
html body .hv5 .hhero{background-size:cover;background-position:top center}
html body .hv5 .wrap{max-width:min(1140px,100%);box-sizing:border-box}
}
@media (min-width:768px) and (max-width:1180px){
html body .hv5 .wrap{padding-left:24px;padding-right:24px}
}
html body .hv5 .ocards,html body .hv5 .ocard,html body .hv5 .obody,html body .hv5 .obtn{min-width:0;max-width:100%}
html body .hv5 .obtn{flex-wrap:wrap}
html body .hv5 #reviews .wrap{overflow-x:hidden;max-width:100%}
html body .hv5 .rcards{max-width:100%}

/* 2. Remove "Events & Experiences →" text link (Ioanna overrides Edgar). */
html body .hv5 .obtn a.tl{display:none}

/* 3. "Explore Your Options" — breathing room + centred under the text. */
html body .hv5 #experience .btns{
display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;
width:100%;margin-top:28px;gap:12px
}
html body .hv5 #experience .btns .btn{width:auto;max-width:100%;margin:0}

/* 4. Centre all 4 offerings card buttons (desktop + mobile). */
html body .hv5 .obtn{
width:100%;align-items:center;justify-content:center;text-align:center
}
html body .hv5 .obtn .btn{
align-self:center;margin-left:auto;margin-right:auto
}
@media (min-width:768px){
html body .hv5 .obtn{flex-direction:row;justify-content:center}
html body .hv5 .obtn .btn{width:auto;min-width:0;max-width:100%;flex:0 1 auto}
}

/* 5. Reviews arrows + hint (styles; markup/JS come from the small HTML widget). */
html body .hv5 #reviews .rnav{display:none;justify-content:center;align-items:center;gap:14px;margin:18px 0 0}
html body .hv5 #reviews .rarr{
width:40px;height:40px;border-radius:50%;border:1.5px solid #1c3042;background:#fff;
color:#f757a2;font:500 26px/1 Poppins,sans-serif;cursor:pointer;padding:0;
display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box
}
html body .hv5 #reviews .rarr:hover{background:#f757a2;color:#fff;border-color:#f757a2}
html body .hv5 #reviews .rarr:focus{outline:2px solid #f757a2;outline-offset:2px}
html body .hv5 #reviews .swipe{font-size:13px;color:#8a8f9c;margin:8px 0 0}
@media (min-width:768px){
html body .hv5 #reviews .rnav{display:flex}
}
@media (max-width:767px){
html body .hv5 #reviews .rnav{display:none}
}

/* 6. Hero photo edge to edge on desktop (768px+). Cause: .hhero background-size fixed at 1280px (widget CSS overrides the earlier cover rule). Padding-top grows with the photo above 1280px so the headline stays under it. */
@media(min-width:768px){html body .hv5.hv5 .hhero{background-size:100% auto;background-position:top center;padding-top:max(500px,calc(45.3% - 80px))}}/* End custom CSS */