* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: #000000;
}

body,.body {
  font-family: var(--body-font-family, 'Montserrat');
  font-size: var(--body-size, 1rem);
  line-height: var(--body-line-height, 1.6);
  font-weight: var(--body-weight, 400);
  color: #111;
  background-color: #ffffff;
}

header {
  z-index: 401;
}

header,section,footer {
  position: relative;
}

footer a {
  color: inherit;
}

footer p,footer ul {
  margin-bottom: 1rem;
}

img {
  display: block;
}

a {
  text-decoration: none;
  color:inherit;
}

.text-content a {
    border-bottom: 2px solid rgb(243 116 14);
}

strong {
  font-weight: 700;
}

h1,h2,h3,h4 {
    text-wrap: balance;
}

p {
    margin-bottom: 1rem;
    text-wrap: pretty;
}

p.error {
    background: #f35959;
    padding: 10px;
    color: #ffffff;
    margin-top: 10px;
    font-size: 0.8rem;
}

h1,.h1 {
  font-size: var(--h1-size,2.5rem);
  line-height: var(--h1-line-height);
  font-family: var(--h1-font-family);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-letter-spacing);
  text-transform: var(--h1-text-transform);
}

h2,.h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line-height);
  font-family: var(--h2-font-family);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: var(--h2-text-transform);
}

h3,.h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line-height);
  font-family: var(--h3-font-family);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-letter-spacing);
  text-transform: var(--h3-text-transform);
}

h4,.h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-line-height);
  font-family: var(--h4-font-family);
  font-weight: var(--h4-weight);
  letter-spacing: var(--h4-letter-spacing);
  text-transform: var(--h4-text-transform);
}

/* Utility font size modifiers */
.text-sm { 
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line-height);
  font-family: var(--text-sm-font-family);
  font-weight: var(--text-sm-weight);
  letter-spacing: var(--text-sm-letter-spacing);
  text-transform: var(--text-sm-text-transform);  
}

.text-base { 
  font-size: var(--text-base-size);
  line-height: var(--text-base-line-height);
  font-family: var(--text-base-font-family);
  font-weight: var(--text-base-weight);
  letter-spacing: var(--text-base-letter-spacing);
  text-transform: var(--text-base-text-transform);  
}

.text-lg { 
  font-size: var(--text-lg-size);  
  line-height: var(--text-lg-line-height);
  font-family: var(--text-lg-font-family);
  font-weight: var(--text-lg-weight);
  letter-spacing: var(--text-lg-letter-spacing);
  text-transform: var(--text-lg-text-transform); 
}

.text-xl { 
  font-size: var(--text-xl-size);
  line-height: var(--text-xl-line-height);
  font-family: var(--text-xl-font-family);
  font-weight: var(--text-xl-weight);
  letter-spacing: var(--text-xl-letter-spacing);
  text-transform: var(--text-xl-text-transform); 
}

.hero-heading {
  font-size: var(--hero-heading-size,2.5rem);
  line-height: var(--hero-heading-line-height);
  font-family: var(--hero-heading-font-family);
  font-weight: var(--hero-heading-weight);
  letter-spacing: var(--hero-heading-letter-spacing);
  text-transform: var(--hero-heading-text-transform); 
}

#hero::before {
  content: "";
  z-index: 0;
  background: linear-gradient(89.52deg, rgba(0, 0, 0, 0.52) 0.41%, rgba(0, 0, 0, 0) 99.58%);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.button {
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.3s background-color ease, 0.3s color ease, 0.3s border ease;
  text-align: center;

  &.btn-primary,
  &:not(.btn-secondary):not(.btn-primary) {
    padding: var(--btn-primary-padding, 0px);
    margin: var(--btn-primary-margin);
    height: var(--btn-primary-height, 42px);
    font-size: var(--btn-primary-font-size, 1rem);
    min-width: var(--btn-primary-min-width, 160px);
    color: var(--btn-primary-text-color, #000);
    border-width: var(--btn-primary-border-width);
    border-style: var(--btn-primary-border-style);
    border-color: var(--btn-primary-border-color);
    background-color: var(--btn-primary-background, #fff);
    border-radius: var(--btn-primary-border-radius, 8px);
    font-family: var(--btn-primary-font-family, inherit);
    font-weight: var(--btn-primary-font-weight, 500);
    letter-spacing: var(--btn-primary-letter-spacing, 0);
    text-transform: var(--btn-primary-text-transform, none);
    box-shadow: var(--btn-primary-box-shadow, none);

    &:hover {
      background-color: var(--btn-primary-hover-background, #000);
      color: var(--btn-primary-hover-text, #fff);
    }

    span.text {
      padding: var(--btn-primary-text-padding, 14px 20px 10px);
      display: flex;
      min-width: var(--btn-primary-text-min-width, 120px);
      margin: 0 auto;
      justify-content: center;
      border-radius: var(--btn-primary-text-border-radius, 8px 0 0 8px);
      align-items: center;
      justify-content: center;
      height: 100%;
      line-height: var(--btn-primary-line-height, 1);
      vertical-align: middle;
      display: table-cell;
      vertical-align: middle;
    }

    span.icon {
      background: inherit;
      display: inline-flex;
      align-items: center;
      position: var(--btn-primary-icon-position,relative);
      top: var(--btn-primary-icon-top);
      right: var(--btn-primary-icon-right);
      bottom: var(--btn-primary-icon-bottom);
      left: var(--btn-primary-icon-left);
      padding: var(--btn-primary-icon-padding, 13px 14px 10px);
      width: var(--btn-primary-icon-width, 45px);
      border-radius: var(--btn-primary-icon-border-radius);
      border-width: var(--btn-primary-icon-border-width);
      border-style: var(--btn-primary-icon-border-style);
      border-color: var(--btn-primary-icon-border-color);
      svg {
        display: block;
        width: var(--btn-primary-icon-size, 15px);
        height: var(--btn-primary-icon-size, 15px);
        fill: var(--btn-primary-svg-fill, currentColor);
        transition: fill 0.3s ease;
      }
    }

    &:hover .icon svg {
      fill: var(--btn-primary-svg-fill-hover, currentColor);
    }
  }

  &.btn-secondary {
    padding: var(--btn-secondary-padding, 0px);
    margin: var(--btn-secondary-margin);
    height: var(--btn-secondary-height, 42px);
    font-size: var(--btn-secondary-font-size, 1rem);
    line-height: var(--btn-secondary-line-height, 1);
    min-width: var(--btn-secondary-min-width, 160px);
    color: var(--btn-secondary-text-color, #000);
    border-width: var(--btn-secondary-border-width);
    border-style: var(--btn-secondary-border-style);
    border-color: var(--btn-secondary-border-color);
    background-color: var(--btn-secondary-background, #fff);
    border-radius: var(--btn-secondary-border-radius, 8px);
    font-family: var(--btn-secondary-font-family, inherit);
    font-weight: var(--btn-secondary-font-weight, 500);
    letter-spacing: var(--btn-secondary-letter-spacing, 0);
    text-transform: var(--btn-secondary-text-transform, none);
    box-shadow: var(--btn-secondary-box-shadow, none);

    &:hover {
      background-color: var(--btn-secondary-hover-background, #000);
      color: var(--btn-secondary-hover-text, #fff);
    }

    span.text {
      padding: var(--btn-secondary-text-padding, 14px 20px 10px);
      display: inline-flex;
      min-width: var(--btn-secondary-text-min-width, 120px);
      margin: 0 auto;
      justify-content: center;
      border-radius: var(--btn-secondary-text-border-radius, 8px 0 0 8px);
    }

    span.icon {
      background: inherit;
      display: inline-flex;
      position: var(--btn-secondary-icon-position,relative);
      top: var(--btn-secondary-icon-top);
      right: var(--btn-secondary-icon-right);
      bottom: var(--btn-secondary-icon-bottom);
      left: var(--btn-secondary-icon-left);
      padding: var(--btn-secondary-icon-padding, 13px 14px 10px);
      width: var(--btn-secondary-icon-width, 45px);
      border-radius: var(--btn-secondary-icon-border-radius);
      border-width: var(--btn-secondary-icon-border-width);
      border-style: var(--btn-secondary-icon-border-style);
      border-color: var(--btn-secondary-icon-border-color);
      svg {
        width: var(--btn-secondary-icon-size, 15px);
        height: var(--btn-secondary-icon-size, 15px);
        fill: var(--btn-secondary-svg-fill, currentColor);
        transition: fill 0.3s ease;
      }
    }

    &:hover .icon svg {
      fill: var(--btn-secondary-svg-fill-hover, currentColor);
    }
  }
}

.wrapper {
  transition: transform 0.3s ease-in-out;

  &.shift {
    transform: translateX(-300px);
  }
}

.top-nav {
  z-index: 3;
  padding: 0 0 0 20px;
  display: block;
  width: 100%;
  height: 100px;

  @media (max-width: 640px) {
    padding: 0 10px;
    height: 70px;
  }
}

.logo {
  picture {
    img {
      width: var(--header-logo-lg, 140px);
      max-width: 100%;
      height: auto;
      display: block;
      margin-top: 10px;

      @media (min-width: 641px) and (max-width: 991px) {
        width: var(--header-logo-md, 120px);
      }

      @media (max-width: 640px) {
        width: var(--header-logo-sm, 100px);
      }
    }
  }
}

.menu {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 15px;
  align-items: center;

  & .buttons {
    display: flex;
    gap: 15px;
    align-items: center;

    @media (max-width: 640px) {
        gap: 10px;
    }
  }

  @media (max-width: 640px) {
    top: 5px;
    right: 10px;
    gap: 10px;
  }
}

.topmenu {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  li {
    margin: 0;
    padding: 0;

    a {
      display: block;
      padding: var(--header-link-padding, 15px 20px);
      color: var(--header-link-text-color, #ffffff);
      text-decoration: none;
      font-size: var(--header-link-font-size, 16px);
      font-family: var(--header-link-font-family, 'Inter');
      font-weight: var(--header-link-font-weight, 400);
      letter-spacing: var(--header-link-letter-spacing, normal);
      text-transform: var(--header-link-text-transform, none);
      border-radius: var(--header-link-border-radius,50px);
      background: var(--header-link-background, transparent);
      transition: background 0.3s ease;

      &:hover {
        background: var(--header-link-hover-background);
        color: var(--header-link-hover-text-color);
      }

      &.active {
        background: var(--header-link-active-background);
        font-weight: var(--header-link-active-font-weight);
        color: var(--header-link-active-text-color);
      }
    }
  }

  @media (max-width: 1199px) {
    display: none;
  }
}

.topmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.topmenu ul li {
  position: relative;
}

.topmenu ul li a {
  text-decoration: none;
  display: block;
  white-space: nowrap;
}

.topmenu ul ul li a {
  background: #161616;
  border-radius: 0px;
}


/* Submenu Styles */
.topmenu ul ul {
  display: none;
  position: absolute;
  top: 100%; /* align exactly below the parent */
  left: 0;
  padding: 10px 0;
  z-index: 1000;
  border-radius: 0;
  min-width: 180px;
}

/* Show submenu on hover */
.topmenu ul li:hover > ul,
.topmenu ul li:has(ul:hover) > ul {
  display: block;
}

.topmenu ul li > a {
  text-decoration: none;
  display: block;
  padding: 15px 20px;
  white-space: nowrap;
  color: white;
  background: transparent;
  transition: background 0.2s;
}

.topmenu ul li:hover > a {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0;
}

.topmenu ul ul li:hover > a {
  background: rgba(255, 255, 255, 1);
  border-radius: 0;
  color: #000;
}

/* Only top-level <li> that HAS a <ul> gets the chevron */
.topmenu > ul > li:has(> ul) > a::after {
  content: "▼";
  font-size: 0.6em;
  margin-left: 0.4em;
  vertical-align: middle;
  display: inline-block;
  transition: transform 0.2s ease;
}

.topmenu ul ul a::after {
  content: none;
}

.burger {
    display: none;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 13px 15px;
    font-size: 2rem;
    border-radius: 50px;
    width: 58px;
    height: 58px;
    line-height: 1;
    text-align: center;
    color: var(--burger-colour, #fff);  
    background-color: var(--burger-bg), transparent; 
    box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);

    @media (max-width: 1199px) {
        display: inline-flex;
    }
}

/* When burger-only is selected */
.show-burger-only .burger {
  display: block !important;
}

.main-content {
    flex-grow: 1;
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
}

.sidebar {
  position: fixed;
  top: 0;
  z-index: 1;
  right: -300px;
  width: 300px;
  height: 100%;
  background: var(--sidebar-bg, #000);
  transition: right 0.3s ease-in-out;
  padding-top: 60px;

  &.active {
    right: 0;
  }

  .close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--sidebar-colour, #fff);
    font-size: 1.5rem;
    cursor: pointer;
  }

  ul {
    list-style-type: none;
    padding: 0;

    li {
      padding: 0 0 0 30px;

      a {
        display: block;
        font-size: var(--sidebar-link-font-size, 1.2rem);
        font-family: var(--sidebar-link-font-family, 'Inter');
        font-weight: var(--sidebar-link-font-weight, 900);
        letter-spacing: var(--sidebar-link-letter-spacing, 0.2px);
        text-transform: var(--sidebar-link-text-transform, uppercase);
        color: var(--sidebar-link-text-color, #fff);
        padding: var(--sidebar-link-padding, 14px 18px);
        border-radius: var(--sidebar-link-border-radius, 0);
        background: var(--sidebar-link-background, transparent);
        border-bottom: 1px solid rgba(255,255,255,0.3);
        position: relative;

        &:hover {
          background: var(--sidebar-link-hover-background, transparent);
          color: var(--sidebar-link-hover-text-color, #fff);
        }

        &.active {
          background: var(--sidebar-link-active-background, transparent);
          font-weight: var(--sidebar-link-active-font-weight, 900);
          color: var(--sidebar-link-active-text-color, #fff);
        }
      }
    }
  }
}

.sidebar ul ul {
  display: none;
  padding-left: 1em;
}

.sidebar ul ul li {
    padding: 0;
}

.sidebar ul ul li a {
    font-size: 1rem;
}

.sidebar li.open > ul {
  display: block;
}

.sidebar > ul > li:has(> ul) > a::after {
  content: "▼";
  font-size: 0.6em;
  vertical-align: middle;
  display: inline-block;
  transition: transform 0.2s ease;
  right:20px;
  top: 15px;
  position: absolute;
}

.experience-logo {
  z-index: 2;

  img {
    position: absolute;
    top: 68%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 60%;
    height: auto;

    @media (max-width: 640px) {
      top: 60%;
    }
  }
}

.feature-svg svg {
  fill: currentColor;
    width: 100%;
}

.parallax-section {
  position: relative;
  overflow: hidden;
}

.parallax-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110%; /* more than 100% for better parallax depth */
  object-fit: cover;
  object-position: bottom;
  z-index: 0;
  pointer-events: none;
}

.parallax-content {
  position: relative;
  z-index: 1;
}

.marquee {
  overflow: hidden;
  width: 100%;
  position: relative;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
  }

  &::before {
    left: 0;
    background: linear-gradient(to right, #0e0e0e 0%, transparent 100%);
  }

  &::after {
    right: 0;
    background: linear-gradient(to left, #0e0e0e 0%, transparent 100%);
  }

  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 40s linear infinite;

    img {
      min-height: 85px;
      max-height: 90px;
      min-width: 150px;
      max-width: 230px;
      object-fit: contain;
      flex-shrink: 0;
      opacity: 0.7;
      transition: opacity 0.3s;
      filter: grayscale(1);

      &:hover {
        opacity: 1;
        filter: grayscale(0);
      }
    }
  }

  .marquee-set {
    display: flex;
    gap: 3rem;
    margin-left: 3rem;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.footer-logo {
  img {
    max-width: var(--footer-logo-width-lg, 140px);
    width: 100%;
    height: auto;
    margin: 0 auto;

    @media (min-width: 641px) and (max-width: 991px) {
      max-width: var(--footer-logo-width-md, 140px);
    }

    @media (max-width: 640px) {
      max-width: var(--footer-logo-width-sm, 140px);
    }
  }
}

.social-icon-wrapper {
  padding: 0;
  margin: 25px 0 0 0;
  list-style: none;
  text-align: right;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;

  li {
    img {
      width: 100%;
    }
  }

  &.align-left {
    justify-content: left;
  }

  &.align-center {
    justify-content: center;
  }

  &.align-right {
    justify-content: right;
  }

  @media (max-width: 767px) {
    &.align-left,
    &.align-right {
      justify-content: center;
    }
  }
}

.footer-social {
  a {
    color: inherit;
    display: flex;
  }

  svg {
    height: 24px;
    width: auto;
    fill: currentColor;
  }

  .icon-small {
    svg {
      height: 24px;
    }
  }

  .icon-medium {
    svg {
      height: 48px;
    }
  }

  .icon-large {
    svg {
      height: 64px;
    }
  }
}

.footer-menu {
  position: relative;
  display: flex;
  gap: 15px;
  align-items: center;
  margin: 0;
  width: 100%;
  justify-content: left;

  ul {
    display: flex;
    gap: 0px 20px;
    flex-wrap: wrap;
  }

  li {
    list-style: none;

    a {
      padding: var(--footer-link-primary-padding, 0 5px 0 0);
      border-radius: var(--footer-link-primary-border-radius, 0);
      font-weight: var(--footer-link-primary-font-weight, 400);
      text-transform: var(--footer-link-primary-text-transform, none);
      color: var(--footer-link-primary-text-color, #fff);
      font-size: var(--footer-link-primary-font-size, 0.95rem);
      font-family: var(--footer-link-primary-font-family, 'Inter');
      letter-spacing: var(--footer-link-primary-letter-spacing, normal);
      background: var(--footer-link-primary-background, transparent);
      display: inline-block;
    }

    &:hover {
      background-color: var(--footer-link-primary-hover-background, transparent);
      color: var(--footer-link-primary-hover-text-color, #fff);
    }  

    &.active {
      background: var(--footer-link-primary-active-background, transparent);
      font-weight: var(--footer-link-primary-active-font-weight, 600);
      color: var(--footer-link-primary-active-text-color, #fff);
    }

    &:last-child a {
      border-right: 0;
    }
  }

  @media (max-width: 767px) {
    justify-content: center;

    li a {
      padding: 5px 0;
      border-right: none;
      display: block;
    }
  }
}

.footer-submenu {
  position: relative;
  margin: 0;
  width: 100%;

  ul {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--footer-link-secondary-text-color, #fff);

    &:not(:first-child)::before {
      content: '';
      display: inline-block;
      width: 1px;
      height: 1em; /* or 60% */
      background: currentColor;
      opacity: 0.5;
    }

    a {
      color: inherit;
      padding: var(--footer-link-secondary-padding, 0);
      border-radius: var(--footer-link-secondary-border-radius, 0);
      font-weight: var(--footer-link-secondary-font-weight, 400);
      text-transform: var(--footer-link-secondary-text-transform, uppercase);
      font-size: var(--footer-link-secondary-font-size, 0.8rem);
      font-family: var(--footer-link-secondary-font-family, 'Inter');
      letter-spacing: var(--footer-link-secondary-letter-spacing, 0px);
      background: var(--footer-link-secondary-background, transparent);
      display: inline-block;
    }

    &:hover {
      background-color: var(--footer-link-secondary-hover-background, #111);
      color: var(--footer-link-secondary-hover-text-color, #fff);
    }  

    &.active {
      background: var(--footer-link-secondary-active-background, transparent);
      font-weight: var(--footer-link-secondary-active-font-weight, 400);
      color: var(--footer-link-secondary-active-text-color, #fff);
    }
  }

  @media (max-width: 767px) {
    ul {
      justify-content: center;
    }

    li {
      &::before {
        display: none;
      }

      a {
        padding: 5px 0;
        display: block;
      }
    }
  }
}

.card-primary {
  background: var(--card-primary-background, transparent);
  border-radius: var(--card-primary-border-radius, 0);
  padding: var(--card-primary-padding, 0);
  box-shadow: var(--card-primary-box-shadow, none);
  color: var(--card-primary-text-color, #111111);
  border: var(--card-primary-border, none);
  text-align: var(--card-primary-align, center);
  transition: background 0.3s, box-shadow 0.3s;
  z-index: 2;

  img {
    padding: var(--card-primary-image-padding, 0);
    max-width: var(--card-primary-image-max-width, 100%);
    border: var(--card-primary-image-border, 0);
    border-radius: var(--card-primary-image-border-radius, 0);
    margin:auto;
    transition: all 0.3s ease;
    opacity: var(--card-primary-img-opacity);
    filter: var(--card-primary-img-filter);
  }

  .card-heading-wrapper {
      bottom: var(--card-primary-heading-position);  
  }

  .card-heading {
    display: var(--card-primary-heading-display, inline-flex);
    background: var(--card-primary-background-link);
    padding: var(--card-primary-heading-padding);
    border-radius: var(--card-primary-heading-border-radius);
    box-shadow: var(--card-primary-heading-shadow);
    text-overflow: var(--card-primary-heading-overflow);
    white-space: var(--card-primary-heading-whitespace);
    overflow: hidden;
  }

  .card-text {
    padding: var(--card-primary-text-padding, 1.5rem);
  }

  &:hover {
    background: var(--card-primary-hover-background);
    box-shadow: var(--card-primary-hover-shadow, none);

    img {
      opacity: var(--card-primary-hover-img-opacity);
      filter: var(--card-primary-hover-img-filter);
    }

    .card-heading {
      background: var(--card-primary-hover-heading-background);
      box-shadow: var(--card-primary-hover-heading-shadow);
    }
  }
}

.card-secondary {
  background: var(--card-secondary-background, transparent);
  border-radius: var(--card-secondary-border-radius, 0);
  padding: var(--card-secondary-padding, 0);
  box-shadow: var(--card-secondary-box-shadow, none);
  color: var(--card-secondary-text-color, #111111);
  border: var(--card-secondary-border, none);
  text-align: var(--card-secondary-align, center);
  transition: background 0.3s, box-shadow 0.3s;
  z-index: 2;

  img {
    padding: var(--card-secondary-image-padding, 0);
    max-width: var(--card-secondary-image-max-width, 100%);
    border: var(--card-secondary-image-border, 0);
    border-radius: var(--card-secondary-image-border-radius, 0);
    margin:auto;
    transition: all 0.3s ease;
    opacity: var(--card-secondary-img-opacity);
    filter: var(--card-secondary-img-filter);
  }

  .card-heading-wrapper {
      bottom: var(--card-secondary-heading-position);  
  }

  .card-heading {
    display: var(--card-secondary-heading-display, inline-flex);
    background: var(--card-secondary-background-link);
    padding: var(--card-secondary-heading-padding);
    border-radius: var(--card-secondary-heading-border-radius);
    box-shadow: var(--card-secondary-heading-shadow);
    text-overflow: var(--card-secondary-heading-overflow);
    white-space: var(--card-secondary-heading-whitespace);
    overflow: hidden;
  }

  .card-text {
    padding: var(--card-secondary-text-padding, 1.5rem);
  }

  &:hover {
    background: var(--card-secondary-hover-background);
    box-shadow: var(--card-secondary-hover-shadow, none);

    img {
      opacity: var(--card-secondary-hover-img-opacity);
      filter: var(--card-secondary-hover-img-filter);
    }

    .card-heading {
      background: var(--card-secondary-hover-heading-background);
      box-shadow: var(--card-secondary-hover-heading-shadow);
    }
  }
}

.card-tertiary {
  background: var(--card-tertiary-background, transparent);
  border-radius: var(--card-tertiary-border-radius, 0);
  padding: var(--card-tertiary-padding, 0);
  box-shadow: var(--card-tertiary-box-shadow, none);
  color: var(--card-tertiary-text-color, #111111);
  border: var(--card-tertiary-border, none);
  text-align: var(--card-tertiary-align, center);
  transition: background 0.3s, box-shadow 0.3s;
  z-index: 2;
  
  img {
    padding: var(--card-tertiary-image-padding, 0);
    max-width: var(--card-tertiary-image-max-width, 100%);
    border: var(--card-tertiary-image-border, 0);
    border-radius: var(--card-tertiary-image-border-radius, 0);
    margin:auto;
    transition: all 0.3s ease;
    opacity: var(--card-tertiary-img-opacity);
    filter: var(--card-tertiary-img-filter);
  }

  .card-heading-wrapper {
      bottom: var(--card-tertiary-heading-position);  
  }  

  .card-heading {
    display: var(--card-tertiary-heading-display, inline-flex);
    background: var(--card-tertiary-background-link);
    padding: var(--card-tertiary-heading-padding);
    border-radius: var(--card-tertiary-heading-border-radius);
    box-shadow: var(--card-tertiary-heading-shadow);
    text-overflow: var(--card-tertiary-heading-overflow);
    white-space: var(--card-tertiary-heading-whitespace);
    overflow: hidden;  
  }

  .card-text {
    padding: var(--card-tertiary-text-padding, 1.5rem);
  }

  &:hover {
    background: var(--card-tertiary-hover-background);
    box-shadow: var(--card-tertiary-hover-shadow, none);

    img {
      opacity: var(--card-tertiary-hover-img-opacity);
      filter: var(--card-tertiary-hover-img-filter);
    }

    .card-heading {
      background: var(--card-tertiary-hover-heading-background);
      box-shadow: var(--card-tertiary-hover-heading-shadow);
    }
  }
}

.radius-xs,
.radius-sm,
.radius-md,
.radius-lg,
.radius-xl,
.radius-2xl,
.radius-full {
  overflow: hidden;
}

.radius-xs {border-radius: 2px;}
.radius-sm {border-radius: 4px;}
.radius-md {border-radius: 8px;}
.radius-lg {border-radius: 16px;}
.radius-xl {border-radius: 24px;}
.radius-2xl {border-radius: 32px;}
.radius-full {border-radius: 9999px;}

.waves-strip {
  .strip {
    height: 20px;
    margin-bottom: -1px;

    @media (min-width: 768px) {
      & {
        height: 80px;
        margin-bottom: -1px;
      }
    }
  }

  .waves {
    margin-top: 1px;
    background-repeat: repeat-x;
    background-position: 50% 0;
    height: 51px;
    -webkit-animation: seaSwell 7s alternate infinite ease-in-out;
    animation: seaSwell 7s alternate infinite ease-in-out;
  }
}

@-webkit-keyframes seaSwell {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100px;
  }
}

@keyframes seaSwell {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100px;
  }
}

table {
  border-collapse: collapse;
  width: 100%;

  @media (max-width: 981px) {
    min-width: 700px;
  }

  th {
    text-align: left;
    padding: 0 15px 15px;
  }

  tr {
    vertical-align: top;

    &:nth-child(even) {
      background: rgb(242, 243, 250);
    }
  }

  td {
    padding: 8px 15px;
  }
}

.table-tabs {
  display: flex;
  gap: 30px;

  @media (max-width: 767px) {
    display: inline-block;

    span {
      display: block;
      margin-bottom: 10px;
    }
  }

  .active {
    color: #1fcccc;
    border-bottom: 3px solid #1fcccc;
  }

  span:hover {
    cursor: pointer;
  }
}

.text-content ol {
  list-style: none; /* hide default numbers */
  counter-reset: list-counter;
  padding-left: 0;
}

.text-content ol li {
  counter-increment: list-counter;
  position: relative;
  padding-left: 2.5em; /* space for number */
  margin-bottom: 1em;
}

.text-content ol li::before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: currentColor;
  font-weight: bold;
  text-align: center;
  font-size: inherit;
}
.text-content ul {
    display: inline-block;
    text-align: left;
    margin: 0;
    padding-right: 0;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;

  iframe {
    width: 100%;
    height: 100vh;
    z-index: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    pointer-events: none;
    min-width: 100%;
    min-height: 100%;
  }
}

.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;

  .video-wrapper {
    position: relative;
    width: 90%;
    max-width: 800px;
    aspect-ratio: 16 / 9;

    iframe {
      width: 100%;
      height: 100%;
      display: block;
    }

    .close-button {
      position: absolute;
      top: 1rem;
      height: 19px;
      width: 19px;
      line-height: 19px;
      right: 1rem;
      font-size: 1rem;
      background: none;
      border: none;
      cursor: pointer;
      color: #ffffff;
    }
    
    .video-loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: #fff;
    }
  }
}

.play-button {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  padding: 10px 20px;
  background: #f00303;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 2;

  &:hover {
    background: rgba(240, 3, 3, 0.6);
  }
}

.service-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  overflow: hidden;

  .image-wrapper {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &.image-left {
      left: 0;
    }

    &.image-right {
      right: 0;
    }
  }

  .service-item {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    z-index: 2;
    padding: 0 20px;

    .text-col-left {
      grid-column: 1 / span 6;
      padding: 40px 80px 40px 0;
      position: relative;
      z-index: 2;
    }

    .text-col-right {
      grid-column: 7 / span 6;
      padding: 40px 0 40px 80px;
      position: relative;
      z-index: 2;
    }
  }

  @media (max-width: 991px) {
    flex-direction: column;
    height: auto;

    .service-item {
      grid-template-columns: 1fr;
      padding: 20px;

      .text-col-left,
      .text-col-right {
        grid-column: span 12;
        padding: 20px 0;
      }
    }

    .image-wrapper {
      position: relative;
      width: 100%;

    }
  }

}

.promo-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;

  &.visible {
    opacity: 1;
    pointer-events: auto;
  }
}

.promo-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  background: white;
  z-index: 9999;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);  
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;

  &.visible {
    opacity: 1;
    pointer-events: auto;
  }

  &.rounded {
    border-radius: 1rem;

    .promo-image {
      border-radius: 1rem 1rem 0 0;
    }
  }

  .promo-content {
    text-align: center;
    position: relative;
  }

  .promo-content h3 {
    font-family: var(--hero-heading-font-family);
    font-weight: 300;
    font-size: 2.6rem;
    line-height: 1;
  }

  .promo-image {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
  }

  .promo-button {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    background-color: #e60000;
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #c40000;
    }
  }

  .promo-close {
    position: absolute;
    top: 1rem;
    height: 19px;
    width: 19px;
    line-height: 19px;
    right: 1rem;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #ffffff;

    &:hover {
      color: #fff;
    }
  }
}

.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --f: .5em; /* control the folded part */
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
  background-color: #333; /* the main color  */
}

.banner-overlay-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.overlay-gradient {
  position: relative;
  overflow: hidden;
}

.overlay-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
  z-index: 1;
  pointer-events: none;
}

/* Tabs */
.tabs {
    display: flex;
    justify-content: space-around;
}

.tab {
  cursor: pointer;
  color: #111;
  text-align: center;
  flex: 1;
  transition: all 0.3s ease;
  position: relative;

  &:hover {
    background: #333;
  }

  .tab-link {
    width: 100%;
    bottom: 40%;
  }

  .tab-link-heading {
    display: inline-flex;
    padding: 10px;
    border-radius: 4px;
  }
}

/* Primary Variant */
.tab-primary {
  background: var(--tab-primary-link-background);
  color: var(--tab-primary-link-color);

  .tab-link-img {
    transition: all 0.3s ease;
    opacity: var(--tab-primary-link-img-opacity);
    filter: var(--tab-primary-link-img-filter);
  }

  .tab-link {
    width: var(--tab-primary-link-width);
    bottom: var(--tab-primary-link-position);
  }

  .tab-link-heading {
    display: var(--tab-primary-link-display);
    padding: var(--tab-primary-link-padding);
    border-radius: var(--tab-primary-link-border-radius);
    box-shadow: var(--tab-primary-link-shadow);
  }

  &:hover,
  &.active {
    .tab-link-img {
      opacity: var(--tab-primary-hover-link-img-opacity);
      filter: var(--tab-primary-hover-link-img-filter);
    }

    .tab-link-heading {
      background: var(--tab-primary-hover-link-background);
      box-shadow: var(--tab-primary-hover-link-shadow);
    }
  }
}

/* Secondary Variant */
.tab-secondary {
  background: var(--tab-secondary-link-background);
  color: var(--tab-secondary-link-color);

  .tab-link-img {
    transition: all 0.3s ease;
    opacity: var(--tab-secondary-link-img-opacity);
    filter: var(--tab-secondary-link-img-filter);
  }

  .tab-link {
    width: var(--tab-secondary-link-width);
    bottom: var(--tab-secondary-link-position);
  }

  .tab-link-heading {
    display: var(--tab-secondary-link-display);
    padding: var(--tab-secondary-link-padding);
    border-radius: var(--tab-secondary-link-border-radius);
    box-shadow: var(--tab-secondary-link-shadow);
  }

  &:hover,
  &.active {  
    .tab-link-img {
      opacity: var(--tab-secondary-hover-link-img-opacity);
      filter: var(--tab-secondary-hover-link-img-filter);
    }

    .tab-link-heading {
      background: var(--tab-secondary-hover-link-background);
      box-shadow: var(--tab-secondary-hover-link-shadow);
    }
  }
}

.tab-contents {
    width: 100%;
}

.tab-contents p {
    font-size: 1.1rem;
}

.tab-content {
    display: none;
    width: 100%;
    color: #fff;
    padding: 50px 30px;
    transition: all 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
}

/* Nested Tabs */
.nested-tabs {
    display: flex;
    font-size: 1.4rem;
    margin-top: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.6);
}

.nested-tab {
    padding: 10px 15px 10px 0;
    cursor: pointer;
    transition: background 0.3s ease;
}

.nested-tab.active {
    border-bottom: 2px solid #fff;
}

.nested-tab-contents {
    padding-top: 30px;
}

.nested-tab-content {
    display: none;
}

.nested-tab-content.active {
    display: block;
}

.tab-content ul {
    padding: 0 0 20px 30px;
}

.tab-content ul li p {
    margin: 0;
}

@media (max-width: 767px) {
    .tabs {
        display: block;
    }

    .tab {
        width: 100%;
        text-align: center;
    }

    .tab-content {
        position: relative;
        width: 100%;
    }
}

/* Ensure the main Swiper container fits within its parent div */
.swiper-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: auto;
    position: relative;
}

/* Fix slides overflowing */
.swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Ensures images scale properly */
}

/* Fix thumbnail slider */
.swiper-thumbs {
    width: 100%;
    max-width: 500px;
    /* Ensures thumbnails do not overflow */
    margin: 10px auto 0;
    overflow: hidden;
}

/* Thumbnails should be in a row */
.swiper-thumbs .swiper-wrapper {
    display: flex;
    justify-content: center;
}

/* Style for individual thumbnail */
.swiper-thumbs .swiper-slide {
    width: 80px !important;
    height: 80px !important;
    cursor: pointer;
    border-radius: 100px;
}

/* Ensure thumbnails do not stretch */
.swiper-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100px;
    transition: opacity 0.3s;
    border: 3px solid #ffffff;
}

/* Active thumbnail effect */
.swiper-thumbs .swiper-slide-thumb-active img {
    opacity: 1;
    border: 3px solid #e11111;
}

.faq-question {
  -webkit-tap-highlight-color: transparent;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.faq-answer.open {
  opacity: 1;
}

.order-1 { order: 1; }
.order-2 { order: 2; }

@media (max-width: 1023px) {
  .order-1 { order: 2; }
  .order-2 { order: 2; }
}

.bg-red {background-color:var(--bg-red);color:#fff;}
.bg-blue {background-color:var(--bg-blue);color:#fff;}
.bg-yellow {background-color:var(--bg-yellow);color:#111;}
.bg-white {background-color:var(--bg-white);color:#111;}
.bg-black {background-color:var(--bg-black);color:#fff;}
.bg-grey {background-color:var(--bg-grey);color:#111;}
.bg-dark-grey {background-color:var(--bg-dark-grey);color:#fff;}
.bg-light-blue {background-color:var(--bg-light-blue);}
.bg-orange {background-color:var(--bg-orange);color:#fff;}
.bg-green {background-color:var(--bg-green);color:#fff;}
.bg-purple {background-color:var(--bg-purple);color:#fff;}
.bg-white-trans {background-color:var(--bg-white-trans);color:#111;}
.bg-black-trans {background-color:var(--bg-black-trans);color:#fff;}

.bg-fixed {background-attachment: fixed;}
.bg-cover {background-size: cover;}
.bg-no-repeat {background-repeat: no-repeat;}
.bg-position-right {background-position: right;}
.bg-blend-overlay {background-blend-mode: overlay;}

.text-red,.text-red * { color: var(--text-red);}
.text-blue,.text-blue * { color: var(--text-blue);}
.text-yellow,.text-yellow * { color: var(--text-yellow);}
.text-white,.text-white * { color: var(--text-white);}
.text-black,.text-black * { color: var(--text-black);}
.text-grey,.text-grey * { color: var(--text-grey); }
.text-dark-grey,.text-dark-grey * { color: var(--text-dark-grey);}
.text-light-blue,.text-light-blue * { color: var(--text-light-blue);}
.text-orange,.text-orange * { color: var(--text-orange);}
.text-green,.text-green * { color: var(--text-green);}
.text-purple,.text-purple * { color: var(--text-purple);}

.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}
.top {top: 0;}
.bottom {bottom: 0;}
.right {right: 0;}
.left {left: 0;}
.flex {display: flex;}
.inline-flex {display: inline-flex;}
.gap-30 {gap:30px;}
.width-100 {width: 100%;}
.height-100 {height: 100%;}
.height-auto {height: auto;}
.image-cover {object-fit: cover;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.align-top-left {display: flex;align-items: start;justify-content: left;position: relative;}
.align-center {display: flex;align-items: center;justify-content: center;position: relative;}
.align-center-left {display: flex;align-items: center;justify-content: left;position: relative;}
.img-cover {object-fit: cover;}
.z-index-2 {z-index: 2;}

.text-content ul {padding: 0 30px 30px;}
.text-content li {padding: 0;}
.text-content li p {margin: 0;}
.text-content p u {text-decoration:none;border-bottom: 1px solid;}

.text-balance, .text-balance p {text-wrap: balance;}
.text-pretty, .text-pretty p {text-wrap: pretty;}

.blockquote {padding: 20px 0px 5px 40px;border-left: 5px solid #11215b;}
.bg-blue .blockquote {border-left: 5px solid #ffffff;}

/* Header buttons */
.show-desktop,.show-tablet,.show-mobile {display: none;
  @media (max-width: 767px) {
    &.show-mobile {display: inline-flex;}
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    &.show-tablet {display: inline-flex;}
  }
  @media (min-width: 1024px) {
    &.show-desktop {display: inline-flex;}
  }
}

/* Aspect Ratio Classes */
.aspect-ratio-1-1    { aspect-ratio: 1 / 1; }
.aspect-ratio-3-2    { aspect-ratio: 3 / 2; }
.aspect-ratio-4-3    { aspect-ratio: 4 / 3; }
.aspect-ratio-5-4    { aspect-ratio: 5 / 4; }
.aspect-ratio-16-9   { aspect-ratio: 16 / 9; }
.aspect-ratio-21-9   { aspect-ratio: 21 / 9; }
.aspect-ratio-32-9   { aspect-ratio: 32 / 9; }

/* iFrame Widths (based on vh) */
.aspect-ratio-1-1 iframe,
.aspect-ratio-1-1-md iframe,
.aspect-ratio-1-1-sm iframe { width: 100vh; }

.aspect-ratio-3-2 iframe,
.aspect-ratio-3-2-md iframe,
.aspect-ratio-3-2-sm iframe { width: 150vh; }

.aspect-ratio-4-3 iframe,
.aspect-ratio-4-3-md iframe,
.aspect-ratio-4-3-sm iframe { width: 133.33vh; }

.aspect-ratio-5-4 iframe,
.aspect-ratio-5-4-md iframe,
.aspect-ratio-5-4-sm iframe { width: 125vh; }

/* Media Queries */
@media (max-width: 1023px) {
  .aspect-ratio-1-1-md     { aspect-ratio: 1 / 1; }
  .aspect-ratio-3-2-md     { aspect-ratio: 3 / 2; }
  .aspect-ratio-4-3-md     { aspect-ratio: 4 / 3; }
  .aspect-ratio-5-4-md     { aspect-ratio: 5 / 4; }
  .aspect-ratio-16-9-md    { aspect-ratio: 16 / 9; }
  .aspect-ratio-21-9-md    { aspect-ratio: 21 / 9; }
  .aspect-ratio-32-9-md    { aspect-ratio: 32 / 9; }
}

@media (max-width: 767px) {
  .aspect-ratio-1-1-sm     { aspect-ratio: 1 / 1; }
  .aspect-ratio-3-2-sm     { aspect-ratio: 3 / 2; }
  .aspect-ratio-4-3-sm     { aspect-ratio: 4 / 3; }
  .aspect-ratio-5-4-sm     { aspect-ratio: 5 / 4; }
  .aspect-ratio-16-9-sm    { aspect-ratio: 16 / 9; }
  .aspect-ratio-21-9-sm    { aspect-ratio: 21 / 9; }
  .aspect-ratio-32-9-sm    { aspect-ratio: 32 / 9; }
}

@media (max-width: 767px) {
    .sm-text-center {
        text-align: center;
    }
    .sm-img-center img{
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
  .scale-100-sm { scale: 1; }
  .scale-95-sm { scale: 0.95; }
  .scale-90-sm { scale: 0.9; }
  .scale-85-sm { scale: 0.85; }
  .scale-80-sm { scale: 0.8; }

  .scale-100-sm,
  .scale-95-sm,
  .scale-90-sm,
  .scale-85-sm,
  .scale-80-sm {
    transform-origin: right center;
  }
}

/* containers */
.container,.container-large,.container-medium,.container-small,.container-tiny,.container-fluid{margin:0 auto;width:100%;position:relative;}
.container {max-width:1200px;}.container-large{max-width:1400px;}.container-medium{max-width:920px;}
.container-small{max-width:600px;}.container-tiny{max-width:420px;}.container-fluid{width:100%;}

/* grid */
.grid {display:grid;grid-template-columns:repeat(12, 1fr);padding:0 20px;}
.grid-gap-1 {grid-gap:1rem}
.grid-gap-2 {
  grid-gap: 2rem;

  @media (max-width: 1023px) {
    grid-gap: 20px;
  }
}

.col-1{grid-column:span 1;}
.col-2{grid-column:span 2;}
.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.col-5{grid-column:span 5;}
.col-6{grid-column:span 6;}
.col-7{grid-column:span 7;}
.col-8{grid-column:span 8;}
.col-9{grid-column:span 9;}
.col-10{grid-column:span 10;}
.col-11{grid-column:span 11;}
.col-12{grid-column:span 12;}

@media (min-width:640px) {
    .col-1-xs {grid-column:span 1;}
    .col-2-xs {grid-column:span 2;}
    .col-3-xs {grid-column:span 3;}
    .col-4-xs {grid-column:span 4;}
    .col-5-xs {grid-column:span 5;}
    .col-6-xs {grid-column:span 6;}
    .col-7-xs {grid-column:span 7;}
    .col-8-xs {grid-column:span 8;}
    .col-9-xs {grid-column:span 9;}
    .col-10-xs {grid-column:span 10;}
    .col-11-xs {grid-column:span 11;}
    .col-12-xs {grid-column:span 12;}
}
@media (min-width:768px) {
    .col-1-sm {grid-column:span 1;}
    .col-2-sm {grid-column:span 2;}
    .col-3-sm {grid-column:span 3;}
    .col-4-sm {grid-column:span 4;}
    .col-5-sm {grid-column:span 5;}
    .col-6-sm {grid-column:span 6;}
    .col-7-sm {grid-column:span 7;}
    .col-8-sm {grid-column:span 8;}
    .col-9-sm {grid-column:span 9;}
    .col-10-sm {grid-column:span 10;}
    .col-11-sm {grid-column:span 11;}
    .col-12-sm {grid-column:span 12;}
}
@media (min-width:1024px) {
    .col-1-md {grid-column:span 1;}
    .col-2-md {grid-column:span 2;}
    .col-3-md {grid-column:span 3;}
    .col-4-md {grid-column:span 4;}
    .col-5-md {grid-column:span 5;}
    .col-6-md {grid-column:span 6;}
    .col-7-md {grid-column:span 7;}
    .col-8-md {grid-column:span 8;}
    .col-9-md {grid-column:span 9;}
    .col-10-md {grid-column:span 10;}
    .col-11-md {grid-column:span 11;}
    .col-12-md {grid-column:span 12;}
}
@media (min-width:1400px) {
    .col-1-lg {grid-column:span 1;}
    .col-2-lg {grid-column:span 2;}
    .col-3-lg {grid-column:span 3;}
    .col-4-lg {grid-column:span 4;}
    .col-5-lg {grid-column:span 5;}
    .col-6-lg {grid-column:span 6;}
    .col-7-lg {grid-column:span 7;}
    .col-8-lg {grid-column:span 8;}
    .col-9-lg {grid-column:span 9;}
    .col-10-lg {grid-column:span 10;}
    .col-11-lg {grid-column:span 11;}
    .col-12-lg {grid-column:span 12;}
}

/* padding */
.p-0{padding:0;}.p-10{padding:10px;}.p-20{padding:20px;}.p-30{padding:30px;}.p-40{padding:40px;}
.pt-10{padding-top:10px;}.pt-20{padding-top:20px;}.pt-30{padding-top:30px;}.pt-40{padding-top:40px;}.pt-50{padding-top:50px;}
.pt-60{padding-top:60px;}.pt-70{padding-top:70px;}.pt-80{padding-top:80px;}.pt-90{padding-top:90px;}.pt-100{padding-top:100px;}
.pt-110{padding-top:110px;}.pt-120{padding-top:120px;}.pt-130{padding-top:130px;}.pt-140{padding-top:140px;}.pt-150{padding-top:150px;}.pt-160{padding-top:160px;}
.pb-10{padding-bottom:10px;}.pb-20{padding-bottom:20px;}.pb-30{padding-bottom:30px;}.pb-40{padding-bottom:40px;}.pb-50{padding-bottom:50px;}.pb-60{padding-bottom:60px;}
.pb-70{padding-bottom:70px;}.pb-80{padding-bottom:80px;}.pb-90{padding-bottom:90px;}.pb-100{padding-bottom:100px;}.pb-110{padding-bottom:110px;}
.pb-120{padding-bottom:120px;}.pb-130{padding-bottom:130px;}.pb-140{padding-bottom:140px;}.pb-150{padding-bottom:150px;}.pb-160{padding-bottom:160px;}

/* margins */
.mt-0{margin-top:0;}.mt-10{margin-top:10px;}.mt-15{margin-top:15px;}.mt-20{margin-top:20px;}.mt-30{margin-top:30px;}.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}.mt-60{margin-top:60px;}.mt-70{margin-top:70px;}.mt-80{margin-top:80px;}.mt-90{margin-top:90px;}.mt-100{margin-top:100px;}
.mb-0{margin-bottom:0;}.mb-10{margin-bottom:10px;}.mb-15{margin-bottom:15px;}.mb-20{margin-bottom:20px;}.mb-30{margin-bottom:30px;}.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}.mb-60{margin-bottom:60px;}.mb-70{margin-bottom:70px;}.mb-80{margin-bottom:80px;}.mb-90{margin-bottom:90px;}.mb-100{margin-bottom:100px;}

form {
  label {
    display: block;
    width: 100%;
    font-size: 1rem;
    padding: 0;
    color: #111;               
  }

  input[type="text"],
  input[type="email"],
  input[type="datetime-local"],
  select,
  textarea {
    width: 100%;
    color-scheme: dark;
    box-sizing: border-box;
    resize: vertical;

    /* underline appearance */
    border: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: #111;

    font-size: 1.2rem;
    padding: 10px;
    color: #000;
    background: #fff;
    transition: border-color 0.3s ease;

    &.no-border {
      border: none;
    }

    &:focus {
      outline: none;
      border-color: #0066ff;
    }
  }
}

.form-primary {
  gap: var(--form-primary-gap, 1.25rem);

  label {
    color: var(--form-primary-label-colour, var(--text-black));
  }

  input[type="text"],
  input[type="email"],
  input[type="datetime-local"],
  select,
  textarea {
    color: var(--form-primary-input-text-colour, var(--text-black));
    background-color: var(--form-primary-input-bg-colour, var(--bg-white));
    border-radius: var(--form-primary-border-radius, 6px);
    border-color: #444746;
    padding: var(--form-primary-padding, 1rem 1.5rem);
    font-family: var(--form-primary-font-family);
    font-size: var(--form-primary-font-size, 1rem);

    &:focus {
      border-color: var(--form-primary-focus-border-colour, #0066ff);
    }
  }
}

/* -------------------------
   Autofill + base styles
-------------------------- */

.form-control {
  background-color: var(--input-bg, #1a1a1a);
  color: var(--color-text, #eaeaea);
  color-scheme: dark; /* keep icons/pickers white on dark */
}

/* Force autofill/paste bg to match */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text, #eaeaea) !important;
  caret-color: var(--color-text, #eaeaea) !important;
  border-color: var(--input-border, #444) !important;
  transition: background-color 9999s ease-out 0s; /* suppress flash */
}

/* If you use placeholder=" " just to drive :placeholder-shown */
.form-control::placeholder {
  color: transparent;
}


/* -------------------------
   Text / email / etc.
-------------------------- */

.input-wrap { position: relative; }


/* Required inputs: user made it valid */
.input-wrap:has(.form-control[required]:user-valid)::after,

/* Optional inputs: has content & not invalid */
.input-wrap:has(.form-control:not([required]):not(:placeholder-shown):not(:user-invalid))::after,

/* Autofill (Chrome/Edge/Safari): count as filled, but don't show if invalid */
.input-wrap:has(.form-control:-webkit-autofill):not(:has(.form-control:user-invalid))::after,
.input-wrap:has(.form-control:autofill):not(:has(.form-control:user-invalid))::after,

/* Selects: user picked a real option */
.select-wrap:has(select.form-control:user-valid)::after {
  content: "";
  position: absolute;
  right: 0.75rem; /* .select-wrap overrides to 2.25rem below */
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2328a745' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain; pointer-events: none;
}

/* Tick sits left of the custom arrow on selects */
.select-wrap:has(select.form-control:user-valid)::after { right: 2.25rem; }




/* ✅ Tick renderer */
.input-wrap:has(.form-control[required]:user-valid)::after,
.input-wrap:has(.form-control:not([required]):not(:placeholder-shown):not(:user-invalid))::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2328a745' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}


/* -------------------------
   Selects
-------------------------- */

.select-wrap { position: relative; }

.select-wrap select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 3.5rem; /* room for arrow + tick */
  background-image: none !important; /* kill native arrow/tick */
}

/* Custom arrow */
.select-wrap::before {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* ✅ Tick for selects (user picked a value) */
.select-wrap:has(select.form-control:user-valid)::after {
  content: "";
  position: absolute;
  right: 2.25rem; /* left of arrow */
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2328a745' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* Muted placeholder option */
select.form-control:required:invalid {
  color: var(--color-muted, #9aa0a6);
}
select.form-control:user-valid {
  color: var(--color-text, #eaeaea);
}
select.form-control option[disabled][value=""] {
  color: var(--color-muted, #9aa0a6);
}


/* -------------------------
   Date / time picker
-------------------------- */

input[type="datetime-local"].form-control::placeholder {
  color: var(--color-muted, #9aa0a6);
  opacity: 1;
}
input[type="datetime-local"].form-control:required:invalid {
  color: var(--color-muted, #9aa0a6);
}
input[type="datetime-local"].form-control:user-valid {
  color: var(--color-text, #eaeaea);
}


.text-container ul {padding:0;margin:0 0 2rem;}
.text-container li {list-style-type:none;margin-bottom:0.8rem;background:url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMiIgZmlsbD0iI0U5RTNGRiIvPg0KPHBhdGggZD0ibTEwLjYzOCAxNi41NDItNC41NDItNC44MTMgMS4yNzEtMS4yOTggMy4yNDggMy4zOTUgNS45Ny02LjM2NyAxLjMyIDEuMjc1LTcuMjY3IDcuODA4eiIgZmlsbD0iIzZDNDFGRiIvPg0KPC9zdmc+) no-repeat left top;padding:0px 0 7px 30px;background-size:21px;font-size:1rem;line-height:1.5em;}
.text-container li p {margin:0;}

.text-container ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

.text-container ol li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
  background: none;
  padding:7px 0 0 0;
  font-size: 1.4rem;
  font-weight: 500;
}

.text-container ol li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em; 
    width: 34px!important;
    text-align: center;  
    color: #fff;
}

.text-container ol li li {
    margin: 0;
    font-size: 1rem;
}

.text-container ol li li:before {
    content: counters(item, ".") " ";
      color: #fff;
}

.text-container ol li p {
  margin: 0 0 10px;
  color: #fff;
}

.text-container ol li ol li p {
  color: #bbb;
}

/* === Level 3 numbers: e.g., 6.4.2 === */
.text-container ol li li ol li {
  display: table;              /* same layout as your level 1/2 */
  counter-increment: item;
  margin: 0.25rem 0;           /* a touch tighter than level 2 */
  background: none;
  padding: 0;                  /* no extra top padding at this depth */
  font-size: 1rem;
  line-height: 1.5em;
  overflow-wrap: anywhere;     /* prevent long URLs from overflowing */
  word-break: break-word;
}

.text-container ol li li ol li:before {
  content: counters(item, ".") " ";
  display: table-cell;
  padding-right: 0.6em;
  width: 59px !important;                 /* similar to your 34px but a bit narrower */
  text-align: center;          /* keep consistent with your level-1 style */
  color: #fff;
}

/* Restart counter for a 4th level OL */
.text-container ol li li ol li > ol { counter-reset: item; }

/* Level 4 items (e.g. i., ii., iii.) */
.text-container ol li li ol li > ol > li {
  display: table;              /* same layout as your current lists */
  counter-increment: item;
  margin: 0.25rem 0;
  background: none;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5em;
  overflow-wrap: anywhere;     /* wrap long URLs/content */
  word-break: break-word;
}

/* Use lower-roman and give the label a wider, non-wrapping gutter */
.text-container ol li li ol li > ol > li::before {
  content: counter(item, lower-roman) ". ";
  display: table-cell;
  padding-right: 0.6em;
  width: 30px !important;                  /* wider than your 34px to fit 'viii.' etc */
  text-align: right;           /* cleaner alignment */
  white-space: nowrap;         /* keep 'viii.' together */
}

/* Mobile: stack level-1 rows, keep number as an inline block */
/* MOBILE: apply number gutter + inline first <p> for levels 1–4 */
@media (max-width: 767px) {
  /* Turn every OL <li> into a two-column grid: [number | content] */
  .text-container ol li {
    display: grid !important;
    grid-template-columns: max-content 1fr;
    column-gap: 0.6em;
    align-items: start;
    margin: 0.6rem 0;
    padding: 0; /* avoid stacking extra top padding on mobile */
  }

  /* The number marker */
  .text-container ol li::before {
    grid-column: 1;
    display: block;
    white-space: nowrap;            /* keeps 'viii.' / '6.10.3' together */
    text-align: right;
    padding-right: 0;               /* gap is handled by column-gap */
    width: auto !important;         /* override any desktop fixed widths */
  }

  /* Put ALL content (p, headings, nested lists, etc.) in the text column */
  .text-container ol li > * {
    grid-column: 2;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin: 0;                      /* first <p> sits tight to the marker */
  }


  /* FLATTEN second-level list (no extra indent) */
  .text-container > ol > li > ol {
    grid-column: 1 / -1 !important;   /* occupy both columns of the parent li */
    margin-left: 0;
    padding-left: 0;
  }

  /* optional: a little spacing before the flattened block */
  .text-container > ol > li > ol { margin-top: .4rem; }

  /* Keep your typography for deeper levels on mobile */
  .text-container p,
  .text-container ol li li,
  .text-container ol li li ol li,
  .text-container ol li li ol li ol li { font-family: var(--font-family-sans);margin-bottom: 0.6em}

  /* keep the first paragraph in each <li> unchanged (inherits the li's font) */
  .text-container > ol > li > p:first-of-type {
      font-size: 1.3rem;
      font-weight: 500;
      font-family: var(--font-family-headings);
  }

  .text-container ol li {
    font-size: 1.2rem;
  }
  /* If you also have those wider desktop widths on deeper levels, neutralize them */
  .text-container ol li li::before,
  .text-container ol li li ol li::before,
  .text-container ol li li ol li > ol > li::before {
    width: auto !important;
  }
}


/* Hide native checkbox */
.custom-checkbox-group input[type="checkbox"] {
  display: none;
}

/* Label for custom checkbox */
.custom-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  position: relative;
}

/* Visual custom checkbox */
.custom-checkbox {
  width: 25px;
  height: 25px;
  border: 2px solid #555;
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* Tick icon */
.custom-checkbox-label input[type="checkbox"]:checked + .custom-checkbox::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid #679c41;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Filled background when selected */
.custom-checkbox-label input[type="checkbox"]:checked + .custom-checkbox {
  border-color: #fff;
}