@layer utilities {

  /*column styles*/
  .columns {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-m)
  }

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

    .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(--accent);
  }

  /* Double heading */
  .h-double {display: flex;flex-direction: column;}
  .h-double> * {margin: 0;line-height: 1.2;}
  .h-double>*:last-child {text-transform: uppercase; font-size: var(--fs-1);}
  .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(--sec-x);
    padding-right: var(--sec-x);
    padding-bottom: var(--sec-y);
    padding-top: var(--sec-y);
  }

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

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

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

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

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

  .pr-section {
    padding-right: var(--sec-x);
  }
/* ===== 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;
  }

}

}