:root {
    /* Background Colors */
    --bg-blue: #3c4f88;
    --bg-grey: #eaeaea;
    --bg-white: #ffffff;
    --bg-red: #ef4444;
    --bg-yellow: #facc15;
    --bg-black: #000000;
    --bg-dark-grey: #374151;
    --bg-light-blue: #93c5fd;
    --bg-orange: #fb923c;
    --bg-green: #22c55e;
    --bg-purple: #a855f7;
    --bg-white-trans: rgba(255,255,255,0.6);
    --bg-black-trans: rgba(0,0,0,0.6);

    /* Text Colors */
    --text-red: #dc2626;
    --text-blue: #4ea5c5;
    --text-yellow: #ca8a04;
    --text-white: #ffffff;
    --text-black: #000000;
    --text-grey: #eaeaea;
    --text-dark-grey: #1f2937;
    --text-light-blue: #60a5fa;
    --text-orange: #f97316;
    --text-green: #16a34a;
    --text-purple: #7c3aed;

    /* === Body Styles === */
    --body-size: 1.1rem;
    --body-line-height: 1.6;
    --body-font-family: 'Montserrat', sans-serif;
    --body-weight: 400;

    /* === Header Styles === */
    --burger-bg: transparent;
    --burger-colour: #ffffff;
    --sidebar-bg: #000000;
    --sidebar-colour: #ffffff;

    /* === Heading Styles === */
    --h1-size: 2.4rem;
    --h1-line-height: 1.4;
    --h1-font-family: ' Montserrat', sans-serif;
    --h1-weight: 400;
    --h1-letter-spacing: 0;

    --h2-size: 1.8rem;
    --h2-line-height: 1.4;
    --h2-font-family: ' Montserrat', sans-serif;
    --h2-weight: 400;
    --h2-letter-spacing: 0;

    --h3-size: 1.75rem;
    --h3-line-height: 1.4;
    --h3-font-family: ' Montserrat', sans-serif;
    --h3-weight: 400;
    --h3-letter-spacing: 0;

    --h4-size: 1.5rem;
    --h4-line-height: 1.4;
    --h4-font-family: ' Montserrat', sans-serif;
    --h4-weight: 400;
    --h4-letter-spacing: 0;

    /* === Body Text Variants === */
    --text-sm-size: 0.875rem;
    --text-base-size: 1rem;
    --text-lg-size: 1.125rem;
    --text-xl-size: 1.25rem;

    /* === Hero Title === */
    --hero-heading-size: 3rem;
    --hero-heading-line-height: 1.1;
    --hero-heading-font-family: 'Montserrat', sans-serif;
    --hero-heading-weight: 400;
    --hero-heading-letter-spacing: -0.01em;

    /* === Button Defaults === */
    --btn-primary-font-size: 1rem;
    --btn-primary-line-height: 1;
    --btn-primary-font-family: 'Montserrat', sans-serif;
    --btn-primary-font-weight: 500;
    --btn-primary-letter-spacing: 0;
    --btn-primary-text-transform: none;
    --btn-primary-text-color: #000000;
    --btn-primary-background: #ffffff;
    --btn-primary-hover-background: #000000;
    --btn-primary-hover-text: #ffffff;
    --btn-primary-padding: 0;
    --btn-primary-height: 42px;
    --btn-primary-min-width: auto;
    --btn-primary-border-size: 1px;
    --btn-primary-border-width: 1px;
    --btn-primary-border-style: solid;
    --btn-primary-border-color: #111111;
    --btn-primary-border-radius: 8px;
    --btn-primary-box-shadow: none;

    /* === Button Text Span Defaults === */
    --btn-primary-text-padding: 14px 20px;
    --btn-primary-text-min-width: auto;
    --btn-primary-text-border-radius: 0px;

    /* === Button Icon Span Defaults === */
    --btn-primary-icon-padding: 13px 14px 10px;
    --btn-primary-icon-width: 45px;
    --btn-primary-icon-size: 15px;
    --btn-primary-icon-border: 1px solid #000000;

    /* === Button Icon SVG Defaults === */
    --btn-primary-svg-fill: currentColor;
    --btn-primary-svg-fill-hover: #ffffff;

    /* === Button Defaults === */
    --btn-secondary-font-size: 1rem;
    --btn-secondary-line-height: 1;
    --btn-secondary-font-family: 'Montserrat', sans-serif;
    --btn-secondary-font-weight: 500;
    --btn-secondary-letter-spacing: 0;
    --btn-secondary-text-transform: none;
    --btn-secondary-text-color: #000000;
    --btn-secondary-background: #ffffff;
    --btn-secondary-hover-background: #000000;
    --btn-secondary-hover-text: #ffffff;
    --btn-secondary-padding: 0;
    --btn-secondary-height: 42px;
    --btn-secondary-min-width: auto;
    --btn-secondary-border-size: 1px;
    --btn-secondary-border-width: 1px;
    --btn-secondary-border-style: solid;
    --btn-secondary-border-color: #111111;
    --btn-secondary-border-radius: 8px;
    --btn-secondary-box-shadow: none;

    /* === Button Text Span Defaults === */
    --btn-secondary-text-padding: 14px 20px;
    --btn-secondary-text-min-width: auto;
    --btn-secondary-text-border-radius: 0px;

    /* === Button Icon Span Defaults === */
    --btn-secondary-icon-padding: 13px 14px 10px;
    --btn-secondary-icon-width: 45px;
    --btn-secondary-icon-size: 15px;
    --btn-secondary-icon-border: 1px solid #000000;

    /* === Button Icon SVG Defaults === */
    --btn-secondary-svg-fill: currentColor;
    --btn-secondary-svg-fill-hover: #ffffff;

    /* === Logo === */
    --logo-width-lg: 140px;
    --logo-width-md: 140px;
    --logo-width-sm: 140px;

    /* === Containers === */
    --container-large:1400px;
    --container-max:1200px;
    --container-medium:920px;
    --container-small:600px;
    --container-min:420px;
    --container-fluid:100%;

    /* === Logo === */
    --footer-logo-height-lg: 140px;
    --footer-logo-height-md: 140px;
    --footer-logo-height-sm: 140px;

    /* === Header Link === */
    --header-link-font-size: 16px;
    --header-link-font-family: 'Inter', sans-serif;
    --header-link-font-weight: 400;
    --header-link-letter-spacing: normal;
    --header-link-text-transform: none;
    --header-link-text-color: #ffffff;
    --header-link-padding: 15px 20px;
    --header-link-border-radius: 50px;
    --header-link-background: transparent;
    --header-link-hover-background: #10bcfd;
    --header-link-hover-text-color: #ffffff;
    --header-link-active-background: transparent;
    --header-link-active-font-weight: 700;
    --header-link-active-text-color: #ffffff;

    /* === Footer Link Primary === */
    --footer-link-primary-font-size: 14px;
    --footer-link-primary-font-family: 'Inter', sans-serif;
    --footer-link-primary-font-weight: 400;
    --footer-link-primary-letter-spacing: normal;
    --footer-link-primary-text-transform: none;
    --footer-link-primary-text-color: #cccccc;
    --footer-link-primary-padding: 10px 15px;
    --footer-link-primary-border-radius: 0px;
    --footer-link-primary-background: transparent;
    --footer-link-primary-hover-background: #333333;
    --footer-link-primary-hover-text-color: #ffffff;
    --footer-link-primary-active-background: transparent;
    --footer-link-primary-active-font-weight: 700;
    --footer-link-primary-active-text-color: #ffffff;

    /* === Footer Link Secondary === */
    --footer-link-secondary-font-size: 13px;
    --footer-link-secondary-font-family: 'Inter', sans-serif;
    --footer-link-secondary-font-weight: 300;
    --footer-link-secondary-letter-spacing: 0.5px;
    --footer-link-secondary-text-transform: uppercase;
    --footer-link-secondary-text-color: #999999;
    --footer-link-secondary-padding: 8px 12px;
    --footer-link-secondary-border-radius: 0px;
    --footer-link-secondary-background: transparent;
    --footer-link-secondary-hover-background: #444444;
    --footer-link-secondary-hover-text-color: #ffffff;
    --footer-link-secondary-active-background: transparent;
    --footer-link-secondary-active-font-weight: 600;
    --footer-link-secondary-active-text-color: #ffffff;

    /* === Sidebar Link === */
    --sidebar-link-font-size: 16px;
    --sidebar-link-font-family: 'Inter', sans-serif;
    --sidebar-link-font-weight: 500;
    --sidebar-link-letter-spacing: 0.2px;
    --sidebar-link-text-transform: capitalize;
    --sidebar-link-text-color: #ffffff;
    --sidebar-link-padding: 14px 18px;
    --sidebar-link-border-radius: 4px;
    --sidebar-link-background: transparent;
    --sidebar-link-hover-background: #0c6fa4;
    --sidebar-link-hover-text-color: #ffffff;
    --sidebar-link-active-background: #084f75;
    --sidebar-link-active-font-weight: 600;
    --sidebar-link-active-text-color: #ffffff;

    /* === Card Primary === */
    --card-primary-background: #ffffff;
    --card-primary-border-radius: 8px;
    --card-primary-padding: 0;
    --card-primary-image-padding: 0;
    --card-primary-text-padding: 1.5rem;
    --card-primary-box-shadow: none;
    --card-primary-text-color: #111111;
    --card-primary-hover-background: #f0f0f0;
    --card-primary-hover-shadow: none;
    --card-primary-border: none;
    --card-primary-align: center;

    /* === Card Secondary === */
    --card-secondary-background: #ffffff;
    --card-secondary-border-radius: 8px;
    --card-secondary-padding: 0;
    --card-secondary-image-padding: 0;
    --card-secondary-text-padding: 1.5rem;
    --card-secondary-box-shadow: none;
    --card-secondary-text-color: #111111;
    --card-secondary-hover-background: #f0f0f0;
    --card-secondary-hover-shadow: none;
    --card-secondary-border: none;
    --card-secondary-align: center;

    /* === Card Primary === */
    --form-primary-label-colour: var(--text-black);
    --form-primary-input-text-colour: var(--text-black);
    --form-primary-input-bg-colour: var(--bg-white);
    --form-primary-border-colour: #ccc;
    --form-primary-focus-border-colour: #0066ff;
    --form-primary-border-radius: 6px;
    --form-primary-font-size: 1rem;
    --form-primary-font-family: var(--font-body);
    --form-primary-padding: 1rem 1.5rem;
    --form-primary-gap: 1.25rem;
}

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

body {
    font-family: var(--body-font-family);
    font-size:var(--body-size);
    line-height: var(--body-line-height);
    font-weight: var(--body-weight);
    color:#111;
    background-color: #ffffff;
}

header {
    z-index: 3;
}

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

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);
  line-height: var(--h1-line-height);
  font-family: var(--h1-font-family);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-letter-spacing);
}

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

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

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

/* 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-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-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-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);
}

.hero-heading {
  font-size: var(--hero-heading-size);
  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);
}


#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;
  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);
    height: var(--btn-primary-height, 42px);
    font-size: var(--btn-primary-font-size, 1rem);
    line-height: var(--btn-primary-line-height, 1);
    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: inline-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);
    }

    span.icon {
      display: inline-flex;
      padding: var(--btn-primary-icon-padding, 13px 14px 10px);
      width: var(--btn-primary-icon-width, 45px);
      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 {
        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);
    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 {
      display: inline-flex;
      padding: var(--btn-secondary-icon-padding, 13px 14px 10px);
      width: var(--btn-secondary-icon-width, 45px);
      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: 0px 0px 0px 20px;
    display: block;
    width: 100%;
    height: 100px;

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

.logo {
    img {
        width: var(--logo-width-lg);
        height: auto;

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

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

.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);
      color: var(--header-link-text-color);
      text-decoration: none;
      font-size: var(--header-link-font-size);
      font-family: var(--header-link-font-family);
      font-weight: var(--header-link-font-weight);
      letter-spacing: var(--header-link-letter-spacing);
      text-transform: var(--header-link-text-transform);
      border-radius: var(--header-link-border-radius);
      background: var(--header-link-background);
      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;
  }
}

.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);  
    background-color: var(--burger-bg); 

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

.sidebar {
  position: fixed;
  top: 0;
  z-index: 1;
  right: -300px;
  width: 300px;
  height: 100%;
  background: var(--sidebar-bg);
  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);
    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);
        font-family: var(--sidebar-link-font-family);
        font-weight: var(--sidebar-link-font-weight);
        letter-spacing: var(--sidebar-link-letter-spacing);
        text-transform: var(--sidebar-link-text-transform);
        color: var(--sidebar-link-text-color);
        padding: var(--sidebar-link-padding);
        border-radius: var(--sidebar-link-border-radius);
        background: var(--sidebar-link-background);
        border-bottom: 1px solid #ffffff;

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

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

.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%;
    }
  }
}

.footer-logo {
    img {
        max-height: var(--footer-logo-height-lg);
        width: 100%;

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

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

.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 svg {
  height: 24px;
  width: auto;
  fill: currentColor;
}
.footer-social a {
  color: inherit;
  display: flex;
}

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

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

.footer-social .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: 15px 20px;
    flex-wrap: wrap;
  }

  li {
    list-style: none;

    a {
      padding: var(--footer-link-primary-padding, 0 20px 0 0);
      border-radius: var(--footer-link-primary-border-radius, 0);
      font-weight: var(--footer-link-primary-font-weight, bold);
      text-transform: var(--footer-link-primary-text-transform, uppercase);
      color: var(--footer-link-primary-text-color, #fff);
      font-size: var(--footer-link-primary-font-size, 0.8rem);
      font-family: var(--footer-link-primary-font-family);
      letter-spacing: var(--footer-link-primary-letter-spacing);
      background: var(--footer-link-primary-background, transparent);
      display: inline-block;
    }

    &: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 20px 0 0);
      border-radius: var(--footer-link-secondary-border-radius, 0);
      font-weight: var(--footer-link-secondary-font-weight, bold);
      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);
      letter-spacing: var(--footer-link-secondary-letter-spacing);
      background: var(--footer-link-secondary-background, transparent);
      display: inline-block;
    }
  }

  @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);
  border-radius: var(--card-primary-border-radius);
  padding: var(--card-primary-padding);
  box-shadow: var(--card-primary-box-shadow);
  color: var(--card-primary-text-color);
  border: var(--card-primary-border);
  text-align: var(--card-primary-align);
  transition: background 0.3s, box-shadow 0.3s;

  img {
    padding: var(--card-primary-image-padding);
  }

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

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

.card-secondary {
  background: var(--card-secondary-background);
  border-radius: var(--card-secondary-border-radius);
  padding: var(--card-secondary-padding);
  box-shadow: var(--card-secondary-box-shadow);
  color: var(--card-secondary-text-color);
  border: var(--card-secondary-border);
  text-align: var(--card-secondary-align);
  transition: background 0.3s, box-shadow 0.3s;

  img {
    padding: var(--card-secondary-image-padding);
  }

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

  &:hover {
    background: var(--card-secondary-hover-background);
    box-shadow: var(--card-secondary-hover-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; /* full circle */
}

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

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

.waves-strip .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%;
  background-color: #1fcccc;
  color: #0d1a73;
  font-weight: bold;
  text-align: center;
  font-size: 0.9em;
}

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

    .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%;
      height: 400px;
    }
  }
  @media (max-width: 767px) {
    .image-wrapper {
      height: 300px;
    }
  }
}

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

@media (max-width: 991px) {
  .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);}
.bg-white {background-color:var(--bg-white);}
.bg-black {background-color:var(--bg-black);color:#fff;}
.bg-grey {background-color:var(--bg-grey);}
.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);}
.bg-green {background-color:var(--bg-green);}
.bg-purple {background-color:var(--bg-purple);}
.bg-white-trans {background-color:var(--bg-white-trans);}
.bg-black-trans {background-color:var(--bg-black-trans);}

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

.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;}
.flex {display: 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-brightness-60 {filter: brightness(60%)}
.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-content.text-balance p {text-wrap: balance;}
.text-content.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;
}

/* Show on mobile (0–767px) */
@media (max-width: 767px) {
  .show-mobile {
    display: inline-flex;
  }
}

/* Show on tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet {
    display: inline-flex;
  }
}

/* Show on desktop (1024px and up) */
@media (min-width: 1024px) {
  .show-desktop {
    display: inline-flex;
  }
}

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

.aspect-ratio-3-2 iframe,
.aspect-ratio-3-2-md iframe { width: 150vh; }
.aspect-ratio-4-3 iframe,
.aspect-ratio-4-3-md iframe { width: 133.33vh; }
.aspect-ratio-5-4 iframe,
.aspect-ratio-5-4-md iframe { width: 125vh; }

@media (max-width: 991px) {
  .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 {max-width:var(--container-max);margin:0 auto;width:100%;}
.container-large {max-width:var(--container-large);margin:0 auto;width:100%;position:relative;}
.container-medium {max-width:var(--container-medium);margin:0 auto;width:100%;}
.container-small {max-width:var(--container-small);margin:0 auto;width:100%;}
.container-tiny {max-width:var(--container-min);margin:0 auto;width:100%;}
.container-fluid {width:var(--container-fluid);margin:0px auto;}
.container-max {width:100%;margin:0px auto;}

/* 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: 460px) {
    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 */
.m-0 {margin:0;}
.m-10 {margin:10px;}
.m-15 {margin:15px;}
.m-20 {margin:20px;}
.m-25 {margin:25px;}
.m-30 {margin:30px;}
.mt-0 {margin-top:0;}
.mt-5 {margin-top:5px;}
.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-5 {margin-bottom:5px;}
.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;}

input[type=text], input[type=email], select, textarea {
    width: 100%;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    resize: vertical;
    font-size: 1.2rem;
    padding: 10px;
    border-color: #111;
    border-style: solid;
    border-width: 0 0 2px 0;
}

input[type=text].no-border, input[type=email].no-border, select.no-border, textarea.no-border {
  border: none;
}

label {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-size: 1rem;
    padding: 0px;
    display: block;
}