: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;
}

/* ------------------------ */
/*   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 */
@font-face {
  font-family: 'Euclid-SemiBold';
  src: url('../library/fonts/Euclid-SemiBold/euclid-circular-a-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Harmony-Kids */
@font-face {
  font-family: 'Harmony-Kids';
  src: url('../library/fonts/Harmony-Kids/grobold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Product-Sans */
@font-face {
  font-family: 'Product-Sans';
  src: url('../library/fonts/Product-Sans/product-sans-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Product-Sans-Bold */
@font-face {
  font-family: 'Product-Sans-Bold';
  src: url('../library/fonts/Product-Sans-Bold/product-sans-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

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

/* IcoMoon */
@font-face {
  font-family: 'IcoMoon';
  src: url('../library/fonts/icomoon/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

/* Font Awesome solid used by Gridbox */
@font-face {
  font-family: "Font Awesome 5 Free";  /* match fontawesome.css */
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/templates/gridbox/library/icons/fontawesome/fa-solid-900.woff") format("woff");
}

/* Material Icons used by Gridbox */
@font-face {
  font-family: "Material Icons";       /* match material.css */
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/templates/gridbox/library/icons/material/material.woff") format("woff");
}

/* BA icon set used by Gridbox */
@font-face {
  font-family: "ba-icons";             /* match ba-icons.css */
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/templates/gridbox/library/icons/ba-icons/ba-icons.woff") format("woff");
}

/* ------------------------ */
/*   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 */
:root{
  --h-primary:#5B6572;
  --h-accent:#3a4249;
}

/* Subtle moving background on white */
.aurora{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.35;
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(91,101,114,.10), transparent 60%),
    linear-gradient(90deg, transparent 0%, rgba(227,235,239,.30) 25%, rgba(91,101,114,.18) 50%, rgba(227,235,239,.30) 75%, transparent 100%);
  animation:aurora 16s ease-in-out infinite;
}
@keyframes aurora{
  0%,100%{transform:translateX(-40%)}
  50%{transform:translateX(40%)}
}

/* Gravity snowflakes: white only, no borders/shadows */
.snowflake{
  position:fixed;
  top:-12vh;
  left:0;
  z-index:2147483647;
  color:#fff;
  opacity:.85;
  pointer-events:none;
  user-select:none;
  line-height:1;
  will-change:transform;
  animation:snow-fall var(--dur,10s) linear forwards;
  text-shadow:0 0 6px rgba(255,255,255,.35);
}
@keyframes snow-fall{
  from{ transform:translate3d(0,-15vh,0); }
  to{ transform:translate3d(0,115vh,0); }
}
/* Optional: respect reduced motion if you ever enable it in JS */
@media (prefers-reduced-motion: reduce){
  body.rm-respected .snowflake{ animation:none; }
}