@layer utilities {
  .error{
    color: red;
    background: white;
    padding: 2px;
    font-weight: 600;
  }
  /*column styles*/
  .columns {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .columns>* {
    display: flex;
    flex-direction: column;
  }

  @media only screen and (min-width: 992px) {

    /*Column styles desktop*/
    /*column utilties*/
    .columns {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
    }

    .columns>* {
      display: flex;
    }

    .columns--even > * {
      display: flex;
      flex: 1 1 300px;
    }

    .columns--centered > * {
      align-items: center;
      justify-content: center;
    }

    .columns--sidebar-left>*:first-child {
      display: flex;
      flex: 1 1 30%;
      min-width: 220px;
    }

    .columns--sidebar-left>*:last-child {
      display: flex;
      flex: 1 1 60%;
    }

    /*Sidebar right*/
    .columns--sidebar-right>*:first-child {
      display: flex;
      flex: 1 1 70%;
    }

    .columns--sidebar-right>*:last-child {
      display: flex;
      flex: 1 1 25%;
      min-width: 220px;
    }

    .sidebar__container {
      display: flex;
      flex-direction: column;
      padding: var(--space-l);
      border-radius: var(--btn-radius);
      gap: var(--space-l);
    }
  }

  /*clickable parents*/
  .clickable-parent {
    position: relative;
  }

  .clickable-parent a {
    z-index: 5;
    /* Ensure the link is on top for clicking */
  }

  .clickable-parent a::before {
    position: absolute;
    content: '';
    inset: 0;
    z-index: 100;
  }

  /* remove lsit style from list */
  .no-list-style,
  .no-list-style ul,
  .no-list-style li {
    margin: unset;
    padding: unset;
    list-style: none;
  }

  /* remove scrollbar for overflow scroll */
  .hide-scroll-bar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .hide-scroll-bar::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar for Chrome, Safari and Opera */
  }

  /* overlay */
  .overlay-light {
    position: relative;
  }

  .overlay-light:after {
    content: '';
    inset: 0;
    position: absolute;
    background: var(--light--70);
    z-index: 1;
  }

  .overlay-dark {
    position: relative;
  }

  .overlay-dark:after {
    content: '';
    inset: 0;
    position: absolute;
    background: var(--overlay-dark);
    z-index: 1;
  }

  .overlay-dark .content,
  .overlay .content {
    z-index: 2
  }

  /* Overlay Classes - Dark */
  .overlay-dark-10 {
    position: relative;
  }

  .overlay-dark-10::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--dark-10);
  }

  .overlay-dark-20 {
    position: relative;
  }

  .overlay-dark-20::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--dark-20);
  }

  .overlay-dark-30 {
    position: relative;
  }

  .overlay-dark-30::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--dark-30);
  }

  .overlay-dark-40 {
    position: relative;
  }

  .overlay-dark-40::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--dark-40);
  }

  .overlay-dark-50 {
    position: relative;
  }

  .overlay-dark-50::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--dark-50);
  }

  .overlay-dark-60 {
    position: relative;
  }

  .overlay-dark-60::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--dark-60);
  }

  .overlay-dark-70 {
    position: relative;
  }

  .overlay-dark-70::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--dark-70);
  }

  .overlay-dark-80 {
    position: relative;
  }

  .overlay-dark-80::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--dark-80);
  }

  .overlay-dark-90 {
    position: relative;
  }

  .overlay-dark-90::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--dark-90);
  }

  .overlay-dark-100 {
    position: relative;
  }

  .overlay-dark-100::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--dark-100);
  }

  /* Overlay Classes - Light */
  .overlay-light-10 {
    position: relative;
  }

  .overlay-light-10::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--light-10);
  }

  .overlay-light-20 {
    position: relative;
  }

  .overlay-light-20::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--light-20);
  }

  .overlay-light-30 {
    position: relative;
  }

  .overlay-light-30::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--light-30);
  }

  .overlay-light-40 {
    position: relative;
  }

  .overlay-light-40::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--light-40);
  }

  .overlay-light-50 {
    position: relative;
  }

  .overlay-light-50::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--light-50);
  }

  .overlay-light-60 {
    position: relative;
  }

  .overlay-light-60::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--light-60);
  }

  .overlay-light-70 {
    position: relative;
  }

  .overlay-light-70::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--light-70);
  }

  .overlay-light-80 {
    position: relative;
  }

  .overlay-light-80::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--light-80);
  }

  .overlay-light-90 {
    position: relative;
  }

  .overlay-light-90::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--light-90);
  }

  .overlay-light-100 {
    position: relative;
  }

  .overlay-light-100::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--light-100);
  }

/* ============ BACKGROUND IMAGE ================ */
  .bg-img {
    position: relative;
    overflow: hidden;
  }

    .bg-img__img {
      position: absolute;
      height: 100%;
      width: 100%;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
        .bg-img img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }

    .bg-img .content {
      position: relative;
      z-index: 2
    }
  /* Vertical divider between 2 text elements */
  .divider {
    --gap: var(--space-m);
    gap: var(--gap);
  }

  .divider>*:first-child::after {
    content: '';
    display: block;
    width: 15em;
    max-width: 70%;
    height: 3px;
    background: var(--light--70);
    transform: translateY(calc(var(--gap) / 2));
  }

  .divider--accent>*:first-child::after {
    background: var(--col-accent);
  }

  /* Double heading */
  .h-double {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
  }
  .h-double>* {
    margin: 0;
    /*reset browser styles*/
    line-height: 1.2;
  }

  .h-double>*:last-child {
    font-size: .5em;
    text-transform: uppercase;
  }

  .h-double--reverse {
    flex-direction: column-reverse;
  }

  .h-double--left {
    text-align: left;
    align-items: start;
  }
    .h-double--center {
    text-align: center;
    align-items: center;
  }
  /* text shadow */
  .text-shadow-dark{
    text-shadow: 0 0 10px var(--dark);
  }
  .text-shadow-light{
    text-shadow: 0 0 10px var(--light);
  }
  .no-text-decoration,
  .no-text-decoration *{
    text-decoration: none;
  }
  .no-link-style,
  .no-link-style a{
    text-decoration: none;
    color: inherit;
  }
  /* Hover animations */
  .transition {
    transition: .4s ease-in-out;
  }

  .hover-up-s:hover {
    transform: translateY(calc(var(--space-s) * -1));
  }

  .hover-right-s:hover {
    transform: translateX(var(--space-s));
  }

  /* Section Padding */
  .p-section {
    padding-left: var(--px-section);
    padding-right: var(--px-section);
    padding-bottom: var(--py-section);
    padding-top: var(--py-section);
  }

  .px-section {
    padding-left: var(--px-section);
    padding-right: var(--px-section);
  }

  .py-section {
    padding-bottom: var(--py-section);
    padding-top: var(--py-section);
  }

  .pt-section {
    padding-top: var(--py-section);
  }

  .pb-section {
    padding-bottom: var(--py-section);
  }

  .pl-section {
    padding-left: var(--px-section);
  }

  .pr-section {
    padding-right: var(--px-section);
  }
/* ===== SWAPPER DESKTOP ====== */
/* swap order dynamically */
@media only screen and (min-width:922px) {

  .swapper.columns:nth-of-type(2n) > *:last-child,
  .swapper:nth-of-type(2n) .columns > *:last-child  {
    order: -1;
  }
  /* swapper content wrapper */
  .swapper:nth-of-type(2n)  .columns> *:has(.swapper__content){
    align-items: end;
  }

}
/* alternating colour section */
.alternating-orange:nth-of-type(2n -1){
  background: var(--col-orange-300);
  color: #fff
}
.alternating-light:nth-of-type(2n -1):nth-of-type(2n -1){
  background: #fff;
}

@layer bricks-utilties{
  .nav--wrap nav > ul{
    flex-wrap: wrap;
  }

}
  @layer theme-utilties{
    /* utilty classes tailored to the theme */
    .list--lightning {
      list-style: none;
    }
      .list--lightning li {
        position: relative;
      }

      .list--lightning li + li {
        margin-top: 0.45em;
      } 

      .list--lightning li::before {
        content: '';
        position: absolute;
        left:-1.5em;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: 1em;
        height: 1em;
        background-color: var(--col-orange);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Cpath d='M7.136.497A1.001 1.001 0 0 1 9 1v7h4a1 1 0 0 1 .864 1.504l-7 12A1.001 1.001 0 0 1 5 21v-7H1a1 1 0 0 1-.864-1.504l7-12ZM2.74 12H6a1 1 0 0 1 1 1v4.3l4.258-7.3H8a1 1 0 0 1-1-1V4.7L2.741 12Z'/%3E%3C/svg%3E");
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Cpath d='M7.136.497A1.001 1.001 0 0 1 9 1v7h4a1 1 0 0 1 .864 1.504l-7 12A1.001 1.001 0 0 1 5 21v-7H1a1 1 0 0 1-.864-1.504l7-12ZM2.74 12H6a1 1 0 0 1 1 1v4.3l4.258-7.3H8a1 1 0 0 1-1-1V4.7L2.741 12Z'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
      }

    }
}