@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 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(--col-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(--col-dark-10);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .overlay-light-100::before {
    position: absolute;
    z-index: 1;
    content: '';
    inset: 0;
    background: var(--col-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(--col-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;
    gap: var(--space-s);
  }

  .h-double:has(h1) {
    font-size: var(--fs-6);
  }

  .h-double:has(h2) {
    font-size: var(--fs-5);
  }

  .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;
  }
  /* text shadow */
  .text-shadow-dark{
    text-shadow: 0 0 10px var(--col-dark);
  }
  .text-shadow-light{
    text-shadow: 0 0 10px var(--col-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(--section-pad--hor);
    padding-right: var(--section-pad--hor);
    padding-bottom: var(--section-pad--ver);
    padding-top: var(--section-pad--ver);
  }

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

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

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

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

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

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

}
/* ========== LEGACY UTILITY STYLES =========== */
/* background image - set the child img as the background for the parent with the class .img-bg */
.img-bg, .bg-img{
  position: relative;
  overflow: hidden
}
  .img-bg__img, 
  .bg-img__img,
  .bg-img__img img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
  }
/* Image overlay */
.overlay--light {
  position: relative;
}
.overlay--light::before{
  inset: 0;
  content:"";
  position: absolute;
  background-color: var(--col-overlay--light);
  z-index:-1;
}
/* gradient utilities */
.gradient-overlay--light{
  position: relative;
}
  .gradient-overlay--light::before{
    inset: 0;
    content:"";
    position: absolute;
    background: var(--gradient-top-light);
    z-index:-1;
  }
/* apect ratios */
.aspect-3\/2{ 
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center;
}

/*column styles*/
.columns  {
  display:flex;
  flex-direction: column;
  align-items: stretch;
   gap: var(--space-m)
}
  .columns > * {
    display: flex;
    flex-direction: column;
  }
@media only screen and (min-width: 1000px)  { /*Column styles desktop*/
/*column utilties*/
.columns{
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
gap: var(--space-m);  
}
.columns.lg\:reverse{ /*Only works on columns*/
  flex-direction: row-reverse;
}
  .columns > * {
  display: flex;
  flex-direction: column;
  }
.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%;
max-width: 30%;
}
.columns--sidebar-left > *:last-child{
display: flex;
flex: 1 1 60%;
max-width: 70%;
}
  /*Sidebar right*/
  .columns--sidebar-right > *:first-child {
  display: flex;
  flex: 1 1 70%;
  max-width: 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: 10; /* Ensure the link is on top for clicking */
}
.clickable-parent a::before{
  position:  absolute;
  content:  '';
  inset:  0;
  z-index:  5;
}
 /* remove lsit style from list */
 .no-list-bullet {
  list-style: none;
}
.no-list-style{
  margin: unset;
  padding: unset;
  list-style: none;
}
/* Double Heading */
.h-double {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-m);
    width: 100%;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 var(--space-m) 0;
  }
.h-double:has(h1) {
    font-size: var(--fs-h-600);
  }
  .h-double:has(h2) {
    font-size: var(--fs-h-500);
  }
    .h-double__main {
      font-weight: 700;
      margin-bottom: 0.2em;
    }
    .h-double__sub {
      font-size: 0.5em;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      font-weight: 600;
      line-height: 1.2;
    }
    .h-double >*:first-child {
        position: relative;
    }
    .h-double > *:first-child:is(.h-double__main)::before { 
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 100px;
      height: 3px;
      background: var(--col-brand--secondary);
      transform: translate(-50%, calc( (var(--space-m)/2) + .2em) );
    }
    /* If the sub title is first */
    .h-double:has(:first-child.h-double__sub){
      gap: var(--space-2xs);
      margin: 0 0 var(--space-m);
    }

    @media only screen and (min-width:1000px){ /*desktop styles h-double*/
      .h-double--left {
        align-items: start;
        text-align: left;
      }
        .h-double--left > *:first-child:is(.h-double__main)::before{
          left:0;
          transform: translate(0, calc( (var(--space-m)/2) + .2em) );
        }
    }
    .capitalize{
  text-transform: capitalize;
}
.center{ 
  display: flex;
  justify-content: center;
  align-items: center;
}
/*UTILITY CLASSES END*/
}