@charset "UTF-8";:root {
  --accent: hsl(215, 100%, 45%);
  --redtext: hsl(0, 100%, 32%);
  --redbg: hsl(0, 100%, 93%);
  --redb: hsl(0, 100%, 75%);
  --grey: rgba(34, 36, 38, 0.15);
  --pad: 0.5em;
  --space: 0.5em;
  --bw: 1px;
  --rad: 0.5em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  letter-spacing: 0.3px;
  box-sizing: border-box;
}
/* Put this in Gridbox Custom CSS (global) */
/* =========================
   ENGLISH / LTR OVERRIDE PATCH
   Add AFTER your base Gridbox CSS
   ========================= */

/* Direction helpers */
html[dir="ltr"] .contact-dir-reverse,
html[dir="ltr"] .ltr {
  direction: ltr;
  unicode-bidi: embed;
}

/* Menu arrows */
html[dir="ltr"] .nav li.deeper > span i.ba-icon-caret-right,
html[dir="ltr"] .nav li.deeper > a i.ba-icon-caret-right,
html[dir="ltr"] .vertical-menu li.deeper > span i.ba-icon-caret-right,
html[dir="ltr"] .vertical-menu li.deeper > a i.ba-icon-caret-right,
html[dir="ltr"] .nav > li li.deeper > span i.ba-icon-caret-right,
html[dir="ltr"] .nav > li li.deeper > a i.ba-icon-caret-right {
  float: right !important;
}

/* Social icons spacing */
html[dir="ltr"] .ba-item-social-icons .ba-icon-wrapper a:not(:last-child) {
  margin-right: 5px;
  margin-left: 0;
}

/* Blockquote */
html[dir="ltr"] blockquote {
  border-left: 4px solid var(--color-3);
  border-right: none;
}

/* Lists */
html[dir="ltr"] ul,
html[dir="ltr"] ol {
  margin: 0 0 0 30px;
}

html[dir="ltr"] .bullet-s1 li {
  padding: 8px 0 8px 5px;
}

html[dir="ltr"] .bullet-s2 li {
  padding: 0 0 0 6px;
}

/* Mobile hamburger / collapsed submenu */
@media (max-width: 1024px) {
  html[dir="ltr"] .ba-hamburger-menu.ba-collapse-submenu li.deeper > span,
  html[dir="ltr"] .ba-hamburger-menu.ba-collapse-submenu li.deeper > a {
    box-sizing: border-box;
    padding-right: 50px !important;
    padding-left: 0 !important;
    width: 100%;
  }

  html[dir="ltr"] .ba-hamburger-menu.ba-collapse-submenu li.deeper > span i:not(.ba-menu-item-icon),
  html[dir="ltr"] .ba-hamburger-menu.ba-collapse-submenu li.deeper > a i:not(.ba-menu-item-icon) {
    right: 0;
    left: auto;
  }

  html[dir="ltr"] .ba-hamburger-menu.ba-collapse-submenu .deeper.parent > span i:before,
  html[dir="ltr"] .ba-hamburger-menu.ba-collapse-submenu .deeper.parent > a i:before {
    transform: none !important;
  }

  html[dir="ltr"] .ba-item-main-menu .main-menu li.deeper.parent > ul li * {
    text-align: left !important;
  }
}

/* Gradient direction */
html[dir="ltr"] #item-1696418996989 {
  background: linear-gradient(to right, transparent, var(--accent));
}

/* Joined buttons */
html[dir="ltr"] .joint-btn-left .ba-button-wrapper a {
  border-radius: 30px 0 0 30px !important;
}

html[dir="ltr"] .joint-btn-right .ba-button-wrapper a {
  border-radius: 0 30px 30px 0 !important;
}

/* Feature box spacing */
html[dir="ltr"] .feature-box-2 .ba-feature-list-layout .ba-feature-image-wrapper {
  margin-right: 15px !important;
  margin-left: 0 !important;
}

@media (max-width: 932px) {
  html[dir="ltr"] .feature-box-3 .ba-feature-list-layout .ba-feature-image-wrapper {
    margin-left: 0 !important;
  }
}

/* Icon lists */
html[dir="ltr"] .iconlist-1 .ba-icon-list-wrapper ul li i,
html[dir="ltr"] .iconlist-1 ul li a::before,
html[dir="ltr"] .iconlist-1 ul li.list-item-without-link::before {
  margin-right: 10px !important;
  margin-left: 0 !important;
}

html[dir="ltr"] .iconlist-2.ba-item-icon-list .vertical-layout li,
html[dir="ltr"] .iconlist-2 .ba-icon-list-wrapper ul li span {
  text-align: left !important;
}

/* Phone field / country picker */
html[dir="ltr"] .ba-form-phone-field .ba-field-container > input {
  direction: ltr;
}

html[dir="ltr"] span.ba-phone-prefix {
  left: 120px;
  right: auto;
  position: relative;
  direction: ltr;
}

html[dir="ltr"] .ba-phone-selected-country {
  left: 150px;
  right: auto;
}

html[dir="ltr"] ul.ba-phone-countries-list li {
  flex-direction: row;
  justify-content: flex-start;
}

/* Time alignment */
html[dir="ltr"] .time-align {
  text-align: left;
}

@media (max-width: 430px) {
  html[dir="ltr"] .time-align {
    text-align: left;
  }
}

/* Accordion */
html[dir="ltr"] .now-accordion .accordion-heading > a.accordion-toggle {
  text-align: left !important;
  padding: 11px 35px 8px 0;
}

html[dir="ltr"] .accordion-heading > a > span + i {
  right: 15px;
  left: auto;
}

html[dir="ltr"] a[href*="phone"] span,
html[dir="ltr"] a[href*="tel"] span {
  direction: ltr;
}

/* Feature box multi-column spacing */
html[dir="ltr"] .feature-box-2n .ba-feature-box:nth-child(n),
html[dir="ltr"] .feature-box-3n .ba-feature-box:nth-child(n),
html[dir="ltr"] .feature-box-4n .ba-feature-box:nth-child(n) {
  margin-right: 30px;
  margin-left: 0 !important;
}

@media (max-width: 430px) {
  html[dir="ltr"] .feature-box-2n .ba-feature-box:nth-child(n),
  html[dir="ltr"] .feature-box-3n .ba-feature-box:nth-child(n),
  html[dir="ltr"] .feature-box-4n .ba-feature-box:nth-child(n) {
    margin-right: 0;
  }
}

html[dir="ltr"] .feature-box-2n .ba-feature-box:nth-child(2n),
html[dir="ltr"] .feature-box-3n .ba-feature-box:nth-child(3n),
html[dir="ltr"] .feature-box-4n .ba-feature-box:nth-child(4n) {
  margin-right: 0;
}
/* Reserve space for hero media to stop layout jumps */
.hm-hero__media{
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}
.hm-hero__media img,
.hm-hero__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* If a caption area changes height, lock it */
.ba-slideset,
.slideshow-content{
  min-height: 380px; /* match your real first-screen height */
}

/* ------------------------ */
/*   MAIN SITE FONT FACES   */
/* ------------------------ */


/* Almarai-Bold 
@font-face {
  font-family: 'Almarai-Bold';
  src: url('../library/fonts/Almarai-Bold/Almarai-Bold.woff2') format('woff2'),
       url('../library/fonts/Almarai-Bold/Almarai-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Didot';
  src: url('../library/fonts/Didot/didot.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Didot-Bold';
  src: url('../library/fonts/Didot-Bold/didot-bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Euclid-Bold';
  src: url('../library/fonts/Euclid-Bold/euclid-circular-a-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Euclid-Medium';
  src: url('../library/fonts/Euclid-Medium/euclid-circular-a-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
*/

/* Euclid-SemiBold */

/* Harmony-Kids */

/* Product-Sans */

/* Product-Sans-Bold */


/* Sada-Bold */


/* IcoMoon */


/* ---------------------------------------- */
/*   ICON FONTS – EXACT FILES + SWAP (LCP)  */
/*   These three match Lighthouse warnings  */
/* ---------------------------------------- */

/* Font Awesome solid used by Gridbox */


/* Material Icons used by Gridbox */

/* BA icon set used by Gridbox */

/* ------------------------ */
/*   LAYOUT / COMPONENTS    */
/* ------------------------ */

.ba-row.sticky_footer {
    position: fixed !important;
    bottom: 0;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    z-index: 10000;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: white;
}

@media (max-width: 767px) {
    .ba-row.sticky_footer {
        display: none !important; /* Hide the fixed one */
    }

    /* Alternative: Show a non-sticky version */
    .ba-row.sticky_footer.mobile-static {
        display: block !important;
        position: static !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
    }
}

/* Overlay trigger button styling with class */
.overlay-trigger-btn .ba-btn-transition {
    background-color: #5b6572 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.overlay-trigger-btn .ba-btn-transition:hover {
    background-color: #4a525d !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(91, 101, 114, 0.3) !important;
}

.overlay-trigger-btn .ba-btn-transition:active {
    background-color: #3d444d !important;
    transform: translateY(0) !important;
}

.overlay-trigger-btn .ba-btn-transition span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Remove footer from pages with no-footer-page class */
.no-footer-page .ba-section-footer,
.no-footer-page footer,
.no-footer-page .footer-section,
.no-footer-page [data-section-type="footer"],
.no-footer-page [id*="footer"],
.no-footer-page .ba-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Ensure no extra space where footer was */
.no-footer-page {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Blue overlay trigger button styling */
.blue-overlay-btn .ba-btn-transition {
    background-color: #53c2ed !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.blue-overlay-btn .ba-btn-transition:hover {
    background-color: #2ab4eb !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(83, 194, 237, 0.4) !important;
}

.blue-overlay-btn .ba-btn-transition:active {
    background-color: #1aa0d6 !important;
    transform: translateY(0) !important;
}

.blue-overlay-btn .ba-btn-transition span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Hide BAForms country list until needed */
.ba-phone-countries-list {
    display: none !important;
}

/* Show only when phone input is focused */
.ba-phone-field-wrapper:focus-within .ba-phone-countries-list {
    display: block !important;
    position: absolute;
    max-height: 250px;
    overflow-y: auto;
    z-index: 9999;
}

/* ------------------------ */
/*          FORMS           */
/* ------------------------ */

/* Font + base color (match Send Enquiry) */
html, body, .harmony-form, .harmony-form * {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #333 !important;
  letter-spacing: .3px;
  box-sizing: border-box;
}

/* kill NUI field styling */
.harmony-form { --pad:0; --rad:0; --bw:0; }

.harmony-form input,
.harmony-form select,
.harmony-form textarea {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #c9c9c9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  font-size: 15px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.harmony-form input:focus,
.harmony-form select:focus,
.harmony-form textarea:focus {
  border-bottom-color: #9ea4aa !important;
}

/* labels */
.harmony-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
}

/* NUI select wrapper -> underline */
.harmony-form .nui.select.selection {
  display: block;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
}

.harmony-form .nui.select.selection .text {
  padding: 10px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #c9c9c9 !important;
  background: transparent !important;
  color: #333 !important;
  font-size: 15px !important;
}

.harmony-form .nui.select.selection:focus-within .text {
  border-bottom-color: #9ea4aa !important;
}

.harmony-form .nui.select.selection .search,
.harmony-form .nui.select.selection .close.icon {
  display: none !important;
}

.harmony-form .nui.select.selection .dropdown.icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: .5;
}

/* calendar icon alignment */
.harmony-form .input.iconed { position: relative; }

.harmony-form .input.iconed input {
  padding-right: 34px !important;
}

.harmony-form .input.iconed .icon {
  position: absolute;
  right: 0;
  bottom: 10px;
}

/* errors */
.harmony-form .field.holder.error input,
.harmony-form .field.holder.error select,
.harmony-form .field.holder.error textarea {
  border-bottom-color: #c62828 !important;
}

.harmony-form .errormsg {
  color: #c62828 !important;
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
  display: block;
}

/* submit button (grey pill) */
.harmony-form button[type="submit"],
.harmony-form input[type="submit"] {
  background: #5a626d;
  color: #fff;
  border: 0;
  border-radius: 40px;
  padding: 12px 36px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 18px;
  cursor: pointer;
  color: #ffffff !important;
  transition: filter .2s ease;
}

.harmony-form button[type="submit"]:hover,
.harmony-form input[type="submit"]:hover {
  filter: brightness(.9);
}

/* hide credit */
.harmony-form .chronocredits {
  display: none !important;
}

/* === Modern select (hide native box, use NUI wrapper) === */
.nui.select.selection {
  position: relative;
  display: block;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
}

/* Hide native select UI */
.nui.select.selection select {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: transparent !important;
  outline: 0 !important;
}

/* Visible “text” line */
.nui.select.selection .text {
  padding: 10px 0 !important;
  border-bottom: 1px solid #c9c9c9 !important;
  background: transparent !important;
  color: #333 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.nui.select.selection:focus-within .text,
.nui.select.selection:hover .text {
  border-bottom-color: #9ea4aa !important;
}

/* Remove blue glow */
.nui.select.selection:focus,
.nui.select.selection .text:focus,
.nui.select.selection select:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Dropdown arrow */
.nui.select.selection .dropdown.icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: .55;
  pointer-events: none;
}

/* Menu panel (modern Harmony style + scrollable) */
.nui.select.selection .menu {
  display: block;
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10) !important;
  border-radius: 10px !important;
  overflow-y: auto !important;
  max-height: 220px !important;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #ccc #f8f8f8; /* Firefox */
  scroll-behavior: smooth;
}

/* Chrome / Edge scrollbar styling */
.nui.select.selection .menu::-webkit-scrollbar {
  width: 6px;
}
.nui.select.selection .menu::-webkit-scrollbar-track {
  background: #f8f8f8;
}
.nui.select.selection .menu::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}
.nui.select.selection .menu::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

/* Dropdown items */
.nui.select.selection .menu .item {
  padding: 12px 14px !important;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease;
}
.nui.select.selection .menu .item:hover {
  background: #f6f7f8 !important;
}
.nui.select.selection .menu .item.active,
.nui.select.selection .menu .item.selected {
  background: #eef1f5 !important;
  font-weight: 600;
  color: #111 !important;
}

/* Hide search & close icons */
.nui.select.selection .search,
.nui.select.selection .close.icon {
  display: none !important;
}

/* ------------------------ */
/*   CALENDAR / DATE PICK   */
/* ------------------------ */

/* Hide the Hour/Minute header row */
.nui.popup.calendar .item.nui.flex.spaced.equal.items.justify-center.bold.p1 {
  display: none !important;
}

/* Hide the whole time-selection block (wheels column wrapper) */
.nui.popup.calendar .item.nui.flex.spaced.equal.items.divided.justify-center {
  display: none !important;
}

/* (Redundant safety) Don’t show the individual hour/minute columns */
.nui.popup.calendar .item.nui.flex.vertical.menu.hours,
.nui.popup.calendar .item.nui.flex.vertical.menu.minutes {
  display: none !important;
}

/* Calendar popup: remove the "Hour / Minute" header row and the 2 wheels row */
.nui.popup.calendar .nui.flex.vertical.divided > .item:nth-child(2),
.nui.popup.calendar .nui.flex.vertical.divided > .item:nth-child(3) {
  display: none !important;
}

/* Safety: if those columns still render somewhere, hide them too */
.nui.popup.calendar .menu.hours,
.nui.popup.calendar .menu.minutes {
  display: none !important;
}

/* Make the date input look clickable even when readonly */
input[name="preferred_appointment_date"][readonly],
#preferred_appointment_date[readonly] {
  cursor: pointer !important;
}

/* Optional: ensure the whole iconed area is clickable */
.nui.form .field .input.iconed {
  pointer-events: auto !important;
}

.ba-row:first-of-type { /* min-height:100vh; */ position:relative; !important }

@media screen and (max-width: 767px) {
.remove-mob {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
}
.remove {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;

}
.ba-blog-post-image img,
.ba-blog-recent-post img {
  width: 100%;
  height: auto !important;
  object-fit: cover;
}

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }


/* Harmony Holiday Theme - Full CSS */




/* Subtle moving background on white */
    







/* Gravity snowflakes: white only, no borders/shadows */













 
 

 




/* FIX: force Gridbox ba-icons font usage (prevents □ squares) */
.ba-icons,
.ba-icons::before,
i.ba-icons::before,
[class^="ba-icon-"]::before,
[class*=" ba-icon-"]::before {
  font-family: "ba-icons" !important;
  font-style: normal;
  font-weight: normal;
  speak: never;
}