@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: 1000; /* 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;
}
  .bg-img__img{
    position: absolute;
    content: '';
    inset: 0;
    height:100%;
    width: 100%;
    z-index: 0;
    pointer-events: none;
  }
    .bg-img__img img{
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
.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;
}
/* 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));
}
}