:root {
  /* Color Variables */
  --white: #FFFFFF;
  --black: #0D1F2D;
  --light-black: #122C3F;
  --lighter-black: #122C3F;
  --orange: #FFCD09;
  --dark-orange: #FE6749;
  --darker-orange: #d75237;
  --light-orange: #a1ff09;
  --green: #19bb41;
  --dark-green: #1aa83d;
  --light-green: #68d585;
  --dark-gray: #546A7B;
  --gray: #9EA3B0;
  --light-gray: #A7ABB7;
  --soft-background: #F4F4F6;
  --dark-red: #d5514d;
  --red: #d5514d;
  --blue: #1d4e70;
  /* more blueish blue */
  --light-blue: #007aff;


  /* Radius Variables */
  --radius-xs: 0px;
  --radius-s: 0px;
  --radius-m: 0px;
  --radius-l: 0px;

  /* Font Variables */
  --font-xs: 15px;
  --font-s: 18px;
  --font-m: 22px;
  --font-ml: 25px;
  --font-l: 30px;
  --font-xl: 41px;
  --font-xxl: 54px;
  --font-xxxl: 68px;

  --font-w-100: 100;
  --font-w-200: 200;
  --font-w-300: 300;
  --font-w-400: 400;
  --font-w-500: 500;
  --font-w-600: 600;
  --font-w-700: 700;
  --font-w-800: 800;
  --font-w-900: 900;
  
  /* Shadow Variables */
  --shadow-s: 0 10px 13px 0 rgba(0, 0, 0, 0.3);
  --shadow-m: 0 20px 23px 0 rgba(0, 0, 0, 0.2);
  --shadow-l: 0 30px 33px 0 rgba(0, 0, 0, 0.1);

  /* Gap Variables */
  --gap-xs: 7px;
  --gap-s: 15px;
  --gap-m: 30px;
  --gap-l: 45px;
  --gap-xl: 65px;
  --gap-xxl: 85px;
  --gap-xxxl: 125px;

  /* Width Variables */
  --content-max-width: 1250px;

  /* Afik Polygon */
  --afik-polygon: polygon(0 0, 77% 0, 22% 22%, 0 77%);

  /* form variables */
  --input-height: 43px;
}



/* POSITION UTILITIES */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

/* GRID SYSTEM */

grid ,.grid, grid-2 ,.grid-2, grid-3 ,.grid-3, grid-4 ,.grid-4, grid-5 ,.grid-5, grid-6 ,.grid-6 {
  display: grid;
  gap: var(--gap-m);
}

grid-2,.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

grid-3 ,.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

grid-4 ,.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

grid-5 ,.grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

grid-6 ,.grid-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 780px) {
  .grid, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
    gap: var(--gap-s);
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
    .tablet-grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tablet-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .tablet-grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 550px) {
    .mobile-grid-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .mobile-grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mobile-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }


  .content-max-width {
    max-width: var(--content-max-width);
    margin: 0 auto;
  }

/* FLEXBOX UTILITIES */

.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}
ֿ
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.flex-4 {
  flex: 4;
}

.justify-center {
  justify-items: center;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.align-content-start {
  align-content: flex-start;
}

.align-content-end {
  align-content: flex-end;
}

.align-content-center {
  align-content: center;
}

.align-content-between {
  align-content: space-between;
}

.align-content-around {
  align-content: space-around;
}

.align-content-stretch {
  align-content: stretch;
}

@media (max-width: 780px) {
  .tablet-flex-column {
    flex-direction: column;
  }
  
  .tablet-flex-column-reverse {
    flex-direction: column-reverse;
  }

  .tablet-justify-center {
    justify-items: center;
  }
  
  .tablet-align-center {
    align-items: center;
  }
  
  .tablet-justify-between {
    justify-content: space-between;
  }
  
  .tablet-justify-start {
    justify-content: flex-start;
  }
  
  .tablet-justify-end {
    justify-content: flex-end;
  }
  
  .tablet-justify-center {
    justify-content: center;
  }
  
  .tablet-justify-between {
    justify-content: space-between;
  }
  
  .tablet-justify-around {
    justify-content: space-around;
  }
  
  .tablet-align-start {
    align-items: flex-start;
  }
  
  .tablet-align-end {
    align-items: flex-end;
  }
  
  .tablet-align-center {
    align-items: center;
  }
  
  .tablet-align-stretch {
    align-items: stretch;
  }
  
  .tablet-align-content-start {
    align-content: flex-start;
  }
  
  .tablet-align-content-end {
    align-content: flex-end;
  }
  
  .tablet-align-content-center {
    align-content: center;
  }
  
  .tablet-align-content-between {
    align-content: space-between;
  }
  
  .tablet-align-content-around {
    align-content: space-around;
  }
  
  .tablet-align-content-stretch {
    align-content: stretch;
  }
  
}

@media (max-width: 550px) {
  .mobile-flex-column {
    flex-direction: column;
  }
  
  .mobile-flex-column-reverse {
    flex-direction: column-reverse;
  }

  .mobile-flex {
    flex-direction: row;
  }

  .mobile-flex-reverse {
    flex-direction: row-reverse;
  }

  .mobile-flex-wrap {
    flex-wrap: wrap;
  }

  .mobile-justify-center {
    justify-items: center;
  }
  
  .mobile-align-center {
    align-items: center;
  }
  
  .mobile-justify-between {
    justify-content: space-between;
  }
  
  .mobile-justify-start {
    justify-content: flex-start;
  }
  
  .mobile-justify-end {
    justify-content: flex-end;
  }
  
  .mobile-justify-center {
    justify-content: center;
  }
  
  .mobile-justify-between {
    justify-content: space-between;
  }
  
  .mobile-justify-around {
    justify-content: space-around;
  }
  
  .mobile-align-start {
    align-items: flex-start;
  }
  
  .mobile-align-end {
    align-items: flex-end;
  }
  
  .mobile-align-center {
    align-items: center;
  }
  
  .mobile-align-stretch {
    align-items: stretch;
  }
  
  .mobile-align-content-start {
    align-content: flex-start;
  }
  
  .mobile-align-content-end {
    align-content: flex-end;
  }
  
  .mobile-align-content-center {
    align-content: center;
  }
  
  .mobile-align-content-between {
    align-content: space-between;
  }
  
  .mobile-align-content-around {
    align-content: space-around;
  }
  
  .mobile-align-content-stretch {
    align-content: stretch;
  }
  
}

/* RADIUS UTILITIES */

.radius-xs {
  border-radius: var(--radius-xs);
}

.radius-s {
  border-radius: var(--radius-s);
}

.radius-m {
  border-radius: var(--radius-m);
}

.radius-l {
  border-radius: var(--radius-l);
}

/* BACKGROUND COLOR UTILITIES */

.background-orange {
  background-color: var(--orange);
}

.background-dark {
  background-color: var(--black);
}

.shadow-s {
  box-shadow: var(--shadow-s);
}

.shadow-m {
  box-shadow: var(--shadow-m);
}

.shadow-l {
  box-shadow: var(--shadow-l);
}

.float-up {
  transition: all 0.3s ease-in-out;
}

.float-up:hover {
  transform: translateY(-5px);
}

.wp-link:hover {
  opacity: 1 !important;
}


/* GAP UTILITIES */

.gap-xs {
  gap: var(--gap-xs);
}

.gap-s {
  gap: var(--gap-s);
}

.gap-m {
  gap: var(--gap-m);
}

.gap-l {
  gap: var(--gap-l);
}

.gap-xl {
  gap: var(--gap-xl);
}

.gap-xxl {
  gap: var(--gap-xxl);
}

.bottom-gap-xs {
  margin-bottom: var(--gap-xs);
}

.bottom-gap-s {
  margin-bottom: var(--gap-s);
}

.bottom-gap-m {
  margin-bottom: var(--gap-m);
}

.bottom-gap-l {
  margin-bottom: var(--gap-l);
}

.bottom-gap-xl {
  margin-bottom: var(--gap-xl);
}

.bottom-gap-xxl {
  margin-bottom: var(--gap-xxl);
}

.bottom-gap-xxxl {
  margin-bottom: var(--gap-xxxl);
}

.bottom-gap-0 {
  margin-bottom: 0;
}
.top-gap-xs {
  margin-top: var(--gap-xs);
} 

.top-gap-s {
  margin-top: var(--gap-s);
}

.top-gap-m {
  margin-top: var(--gap-m);
}

.top-gap-l {
  margin-top: var(--gap-l);
}

.top-gap-xl {
  margin-top: var(--gap-xl);
}

.top-gap-xxl {
  margin-top: var(--gap-xxl);
}

.top-gap-0 {
  margin-top: 0;
}


/* BOTTOM LINE */

.bottom-line {
  position: relative;
}
.bottom-line::after {
  content:'';
  position: absolute;
  bottom:-17px;
  right:0;
  width:70%;
  height:4px;
  background: var(--light-orange);
  border-radius:999px;
}


/* PADDING UTILITIES */
.padding-xs, .box.padding-xs {
  padding: var(--gap-xs);
}
.padding-s, .box.padding-s {
  padding: var(--gap-s);
}
.padding-m, .box.padding-m {
  padding: var(--gap-m);
}
.padding-l, .box.padding-l {
  padding: var(--gap-l);
}
.padding-xl, .box.padding-xl {
  padding: var(--gap-xl);
}
.padding-0, .box.padding-0 {
  padding: 0;
}
.padding-xs-0, .box.padding-xs-0 {
  padding: var(--gap-xs) 0;
}
.padding-xs-s, .box.padding-xs-s {
  padding: var(--gap-xs) var(--gap-s);
}
.padding-xs-m, .box.padding-xs-m {
  padding: var(--gap-xs) var(--gap-m);
}
.padding-xs-l, .box.padding-xs-l {
  padding: var(--gap-xs) var(--gap-l);
}
.padding-s-x, .box.padding-s-x {
  padding: var(--gap-s) var(--gap-xs);
}
.padding-s-m, .box.padding-s-m {
  padding: var(--gap-s) var(--gap-m);
}
.padding-s-0, .box.padding-s-0 {
  padding: var(--gap-s) 0;
}
.padding-s-l, .box.padding-s-l {
  padding: var(--gap-s) var(--gap-l);
}
.padding-s-xl, .box.padding-s-xl {
  padding: var(--gap-s) var(--gap-xl);
}
.padding-m-0, .box.padding-m-0 {
  padding: var(--gap-m) 0;
}
.padding-m-xs, .box.padding-m-xs {
  padding: var(--gap-m) var(--gap-xs);
}
.padding-m-s, .box.padding-m-s {
  padding: var(--gap-m) var(--gap-s);
}
.padding-m-l, .box.padding-m-l {
  padding: var(--gap-m) var(--gap-l);
}
.padding-m-xl, .box.padding-m-xl {
  padding: var(--gap-m) var(--gap-xl);
}
.padding-0-xs, .box.padding-0-xs {
  padding: 0 var(--gap-xs);
}
.padding-0-s, .box.padding-0-s {
  padding: 0 var(--gap-s);
}
.padding-0-m, .box.padding-0-m {
  padding: 0 var(--gap-m);
}
.padding-0-l, .box.padding-0-l {
  padding: 0 var(--gap-l); 
}

/* responsive padding */
@media (max-width: 780px) {
  .tablet-padding-xs, .box.tablet-padding-xs {
    padding: var(--gap-xs);
  }
  .tablet-padding-s, .box.tablet-padding-s {
    padding: var(--gap-s);
  }
  .tablet-padding-m, .box.tablet-padding-m {
    padding: var(--gap-m);
  }
  .tablet-padding-l, .box.tablet-padding-l {
    padding: var(--gap-l);
  }
  .tablet-padding-xl, .box.tablet-padding-xl {
    padding: var(--gap-xl);
  }
  .tablet-padding-0, .box.tablet-padding-0 {
    padding: 0;
  }
  .tablet-padding-xs-0, .box.tablet-padding-xs-0 {
    padding: var(--gap-xs) 0;
  }
  .tablet-padding-xs-s, .box.tablet-padding-xs-s {
    padding: var(--gap-xs) var(--gap-s);
  }
  .tablet-padding-xs-m, .box.tablet-padding-xs-m {
    padding: var(--gap-xs) var(--gap-m);
  }
  .tablet-padding-xs-l, .box.tablet-padding-xs-l {
    padding: var(--gap-xs) var(--gap-l);
  }
  .tablet-padding-s-x, .box.tablet-padding-s-x {
    padding: var(--gap-s) var(--gap-xs);
  }
  .tablet-padding-s-m, .box.tablet-padding-s-m {
    padding: var(--gap-s) var(--gap-m);
  }
  .tablet-padding-s-0, .box.tablet-padding-s-0 {
    padding: var(--gap-s) 0;
  }
  .tablet-padding-s-l, .box.tablet-padding-s-l {
    padding: var(--gap-s) var(--gap-l);
  }
  .tablet-padding-s-xl, .box.tablet-padding-s-xl {
    padding: var(--gap-s) var(--gap-xl);
  }
  .tablet-padding-m-0, .box.tablet-padding-m-0 {
    padding: var(--gap-m) 0;
  }
  .tablet-padding-m-xs, .box.tablet-padding-m-xs {
    padding: var(--gap-m) var(--gap-xs);
  }
  .tablet-padding-m-s, .box.tablet-padding-m-s {
    padding: var(--gap-m) var(--gap-s);
  }
  .tablet-padding-m-l, .box.tablet-padding-m-l {
    padding: var(--gap-m) var(--gap-l);
  }
  .tablet-padding-m-xl, .box.tablet-padding-m-xl {
    padding: var(--gap-m) var(--gap-xl);
  }
  .tablet-padding-0-xs, .box.tablet-padding-0-xs {
    padding: 0 var(--gap-xs);
  }
  .tablet-padding-0-s, .box.tablet-padding-0-s {
    padding: 0 var(--gap-s);
  }
  .tablet-padding-0-m, .box.tablet-padding-0-m {
    padding: 0 var(--gap-m);
  }
  .tablet-padding-0-l, .box.tablet-padding-0-l {
    padding: 0 var(--gap-l);
  }
  .tablet-padding-0-xl, .box.tablet-padding-0-xl {
    padding: 0 var(--gap-xl);
  }
  .tablet-padding-0-xxl, .box.tablet-padding-0-xxl {
    padding: 0 var(--gap-xxl);
  }
}
@media (max-width: 550px) {
  .mobile-padding-xs, .box.mobile-padding-xs {
    padding: var(--gap-xs);
  }
  .mobile-padding-s, .box.mobile-padding-s {
    padding: var(--gap-s);
  }
  .mobile-padding-m, .box.mobile-padding-m {
    padding: var(--gap-m);
  }
  .mobile-padding-l, .box.mobile-padding-l {
    padding: var(--gap-l);
  }
  .mobile-padding-xl, .box.mobile-padding-xl {
    padding: var(--gap-xl);
  }
  .mobile-padding-0, .box.mobile-padding-0 {
    padding: 0;
  }
  .mobile-padding-xs-0, .box.mobile-padding-xs-0 {
    padding: var(--gap-xs) 0;
  }
  .mobile-padding-xs-s, .box.mobile-padding-xs-s {
    padding: var(--gap-xs) var(--gap-s);
  }
  .mobile-padding-xs-m, .box.mobile-padding-xs-m {
    padding: var(--gap-xs) var(--gap-m);
  }
  .mobile-padding-xs-l, .box.mobile-padding-xs-l {
    padding: var(--gap-xs) var(--gap-l);
  }
  .mobile-padding-s-x, .box.mobile-padding-s-x {
    padding: var(--gap-s) var(--gap-xs);
  }
  .mobile-padding-s-m, .box.mobile-padding-s-m {
    padding: var(--gap-s) var(--gap-m);
  }
  .mobile-padding-s-0, .box.mobile-padding-s-0 {
    padding: var(--gap-s) 0;
  }
  .mobile-padding-s-l, .box.mobile-padding-s-l {
    padding: var(--gap-s) var(--gap-l);
  }
  .mobile-padding-s-xl, .box.mobile-padding-s-xl {
    padding: var(--gap-s) var(--gap-xl);
  }
  .mobile-padding-m-0, .box.mobile-padding-m-0 {
    padding: var(--gap-m) 0;
  }
  .mobile-padding-m-xs, .box.mobile-padding-m-xs {
    padding: var(--gap-m) var(--gap-xs);
  }
  .mobile-padding-m-s, .box.mobile-padding-m-s {
    padding: var(--gap-m) var(--gap-s);
  }
  .mobile-padding-m-l, .box.mobile-padding-m-l {
    padding: var(--gap-m) var(--gap-l);
  }
  .mobile-padding-m-xl, .box.mobile-padding-m-xl {
    padding: var(--gap-m) var(--gap-xl);
  }
  .mobile-padding-0-xs, .box.mobile-padding-0-xs {
    padding: 0 var(--gap-xs);
  }
  .mobile-padding-0-s, .box.mobile-padding-0-s {
    padding: 0 var(--gap-s);
  }
  .mobile-padding-0-m, .box.mobile-padding-0-m {
    padding: 0 var(--gap-m);
  }
  .mobile-padding-0-l, .box.mobile-padding-0-l {
    padding: 0 var(--gap-l);
  }
  .mobile-padding-0-xl, .box.mobile-padding-0-xl {
    padding: 0 var(--gap-xl);
  }
  .mobile-padding-0-xxl, .box.mobile-padding-0-xxl {
    padding: 0 var(--gap-xxl);
  }
}

/* responsive padding */
@media (max-width: 780px) {
  .tablet-padding-xs {
    padding: var(--gap-xs);
  }
  .tablet-padding-s {
    padding: var(--gap-s);
  }
  .tablet-padding-m {
    padding: var(--gap-m);
  }
  .tablet-padding-l {
    padding: var(--gap-l);
  }
  .tablet-padding-xl {
    padding: var(--gap-xl);
  }
  .tablet-padding-0 {
    padding: 0;
  }
  .tablet-padding-xs-0 {
    padding: var(--gap-xs) 0;
  }
  .tablet-padding-xs-s {
    padding: var(--gap-xs) var(--gap-s);
  }
  .tablet-padding-xs-m {
    padding: var(--gap-xs) var(--gap-m);
  }
  .tablet-padding-xs-l {
    padding: var(--gap-xs) var(--gap-l);
  }
  .tablet-padding-s-x {
    padding: var(--gap-s) var(--gap-xs);
  }
  .tablet-padding-s-m {
    padding: var(--gap-s) var(--gap-m);
  }
  .tablet-padding-s-0 {
    padding: var(--gap-s) 0;
  }
  .tablet-padding-s-l {
    padding: var(--gap-s) var(--gap-l);
  }
  .tablet-padding-s-xl {
    padding: var(--gap-s) var(--gap-xl);
  }
  .tablet-padding-m-0 {
    padding: var(--gap-m) 0;
  }
  .tablet-padding-m-xs {
    padding: var(--gap-m) var(--gap-xs);
  }
  .tablet-padding-m-s {
    padding: var(--gap-m) var(--gap-s);
  }
  .tablet-padding-m-l {
    padding: var(--gap-m) var(--gap-l);
  }
  .tablet-padding-m-xl {
    padding: var(--gap-m) var(--gap-xl);
  }
  .tablet-padding-0-xs {
    padding: 0 var(--gap-xs);
  }
  .tablet-padding-0-s {
    padding: 0 var(--gap-s);
  }
  .tablet-padding-0-m {
    padding: 0 var(--gap-m);
  }
  .tablet-padding-0-l {
    padding: 0 var(--gap-l);
  }
  .tablet-padding-0-xl {
    padding: 0 var(--gap-xl);
  }
  .tablet-padding-0-xxl {
    padding: 0 var(--gap-xxl);
  }
}
@media (max-width: 550px) {
  .mobile-padding-xs {
    padding: var(--gap-xs);
  }
  .mobile-padding-s {
    padding: var(--gap-s);
  }
  .mobile-padding-m {
    padding: var(--gap-m);
  }
  .mobile-padding-l {
    padding: var(--gap-l);
  }
  .mobile-padding-xl {
    padding: var(--gap-xl);
  }
  .mobile-padding-0 {
    padding: 0;
  }
  .mobile-padding-xs-0 {
    padding: var(--gap-xs) 0;
  }
  .mobile-padding-xs-s {
    padding: var(--gap-xs) var(--gap-s);
  }
  .mobile-padding-xs-m {
    padding: var(--gap-xs) var(--gap-m);
  }
  .mobile-padding-xs-l {
    padding: var(--gap-xs) var(--gap-l);
  }
  .mobile-padding-s-x {
    padding: var(--gap-s) var(--gap-xs);
  }
  .mobile-padding-s-m {
    padding: var(--gap-s) var(--gap-m);
  }
  .mobile-padding-s-0 {
    padding: var(--gap-s) 0;
  }
  .mobile-padding-s-l {
    padding: var(--gap-s) var(--gap-l);
  }
  .mobile-padding-s-xl {
    padding: var(--gap-s) var(--gap-xl);
  }
  .mobile-padding-m-0 {
    padding: var(--gap-m) 0;
  }
  .mobile-padding-m-xs {
    padding: var(--gap-m) var(--gap-xs);
  }
  .mobile-padding-m-s {
    padding: var(--gap-m) var(--gap-s);
  }
  .mobile-padding-m-l {
    padding: var(--gap-m) var(--gap-l);
  }
  .mobile-padding-m-xl {
    padding: var(--gap-m) var(--gap-xl);
  }
  .mobile-padding-0-xs {
    padding: 0 var(--gap-xs);
  }
  .mobile-padding-0-s {
    padding: 0 var(--gap-s);
  }
  .mobile-padding-0-m {
    padding: 0 var(--gap-m);
  }
  .mobile-padding-0-l {
    padding: 0 var(--gap-l);
  }
  .mobile-padding-0-xl {
    padding: 0 var(--gap-xl);
  }
  .mobile-padding-0-xxl {
    padding: 0 var(--gap-xxl);
  }
}

@media (max-width: 780px) {
  .gap-m {
    gap: var(--gap-s);
  }

  .mobile-gap-xs {
    gap: var(--gap-xs);
  }
  
  .mobile-gap-s {
    gap: var(--gap-s);
  }
  
  .mobile-gap-m {
    gap: var(--gap-m);
  }
  
  .mobile-gap-l {
    gap: var(--gap-l);
  }
  
  .mobile-gap-xl {
    gap: var(--gap-xl);
  }
  
}

@media (max-width: 550px) {
  .mobile-gap-xs {
    gap: var(--gap-xs);
  }

  .mobile-gap-s {
    gap: var(--gap-s);
  }

  .mobile-gap-m {
    gap: var(--gap-m);
  }

  .mobile-gap-l {
    gap: var(--gap-l);
  }

  .mobile-gap-xl {
    gap: var(--gap-xl);
  }

  .mobile-bottom-gap-xs {
    margin-bottom: var(--gap-xs);
  }

  .mobile-bottom-gap-s {
    margin-bottom: var(--gap-s);
  }

  .mobile-bottom-gap-m {
    margin-bottom: var(--gap-m);
  }

  .mobile-bottom-gap-l {
    margin-bottom: var(--gap-l);
  }

  .mobile-bottom-gap-xl {
    margin-bottom: var(--gap-xl);
  }

  .mobile-bottom-gap-0 {
    margin-bottom: 0;
  }

  .mobile-top-gap-xs {
    margin-top: var(--gap-xs);
  }

  .mobile-top-gap-s {
    margin-top: var(--gap-s);
  }

  .mobile-top-gap-m {
    margin-top: var(--gap-m);
  }

  .mobile-top-gap-l {
    margin-top: var(--gap-l);
  }

  .mobile-top-gap-xl {
    margin-top: var(--gap-xl);
  }

  .mobile-top-gap-0 {
    margin-top: 0;
  }
}

/* GAP ELEMENTS */

gap-s, gap-m, gap-l {
  display: block;
  position: relative;
  width: 100%;
}

gap-s {
  height: var(--gap-s);
}

gap-m {
  height: var(--gap-m);
}

gap-l {
  height: var(--gap-l);
}

gap-s.line::before, gap-m.line::before, gap-l.line::before {
  content: '';
  height: 1px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  background-color: var(--light-gray);
}

.display-block {
  display: block;
}

/* MARGIN UTILITIES */

.margin-auto {
  margin: auto;
}

@media (max-width: 550px) {
.margin-auto {
  margin: auto;
}
}

/* COLOR CLASSES */

/* TEXT COLOR CLASSES */
.black:not(button):not(.button):not(tag) { color: var(--black) !important; }
.light-black:not(button):not(.button):not(tag) { color: var(--light-black) !important; }
.lighter-black:not(button):not(.button):not(tag) { color: var(--lighter-black) !important; }
.orange:not(button):not(.button):not(tag) { color: var(--orange) !important; }
.dark-orange:not(button):not(.button):not(tag) { color: var(--dark-orange) !important; }
.light-orange:not(button):not(.button):not(tag) { color: var(--light-orange) !important; }
.green:not(button):not(.button):not(tag) { color: var(--green) !important; }
.darker-orange:not(button):not(.button):not(tag) { color: var(--darker-orange) !important; }
.dark-green:not(button):not(.button):not(tag) { color: var(--dark-green) !important; }
.light-green:not(button):not(.button):not(tag) { color: var(--light-green) !important; }
.gray:not(button):not(.button):not(tag) { color: var(--gray) !important; }
.dark-gray:not(button):not(.button):not(tag) { color: var(--dark-gray) !important; }
.light-gray:not(button):not(.button):not(tag) { color: var(--light-gray) !important; }
.dark-white:not(button):not(.button):not(tag) { color: var(--light-gray) !important; }
.soft-background:not(button):not(.button):not(tag) { color: var(--soft-background) !important; }
.red:not(button):not(.button):not(tag) { color: var(--dark-orange) !important; }
.dark-red:not(button):not(.button):not(tag) { color: var(--dark-red) !important; }
.white:not(button):not(.button):not(tag) { color: white !important; }
.blue:not(button):not(.button):not(tag) { color: var(--blue) !important; }

/* BACKGROUND COLOR CLASSES */
.bg-black { background-color: var(--black) !important; }
.bg-light-black { background-color: var(--light-black) !important; }
.bg-lighter-black { background-color: var(--lighter-black) !important; }
.bg-orange { background-color: var(--orange) !important; }
.bg-dark-orange { background-color: var(--dark-orange) !important; }
.bg-darker-orange { background-color: var(--darker-orange) !important; }
.bg-light-orange { background-color: var(--light-orange) !important; }
.bg-green { background-color: var(--green) !important; }
.bg-dark-green { background-color: var(--dark-green) !important; }
.bg-light-green { background-color: var(--light-green) !important; }
.bg-gray { background-color: var(--gray) !important; }
.bg-dark-gray { background-color: var(--dark-gray) !important; }
.bg-light-gray { background-color: var(--light-gray) !important; }
.bg-dark-white { background-color: var(--light-gray) !important; }
.bg-soft-background { background-color: var(--soft-background) !important; }
.bg-red { background-color: var(--dark-orange) !important; }
.bg-dark-red { background-color: var(--dark-red) !important; }
.bg-white { background-color: white !important; }
.bg-blue { background-color: var(--blue) !important; }

/* SVG COLORS */
svg.black path { fill: var(--black) !important; }
svg.light-black path { fill: var(--light-black) !important; }
svg.lighter-black path { fill: var(--lighter-black) !important; }
svg.orange path { fill: var(--orange) !important; }
svg.dark-orange path { fill: var(--dark-orange) !important; }
svg.darker-orange path { fill: var(--darker-orange) !important; }
svg.light-orange path { fill: var(--light-orange) !important; }
svg.green path { fill: var(--green) !important; }
svg.dark-green path { fill: var(--dark-green) !important; }
svg.light-green path { fill: var(--light-green) !important; }
svg.gray path { fill: var(--gray) !important; }
svg.dark-gray path { fill: var(--dark-gray) !important; }
svg.light-gray path { fill: var(--light-gray) !important; }
svg.dark-white path { fill: var(--light-gray) !important; }
svg.soft-background path { fill: var(--soft-background) !important; }
svg.red path { fill: var(--dark-orange) !important; }
svg.dark-red path { fill: var(--dark-red) !important; }
svg.white path { fill: white !important; }
svg.blue path { fill: var(--blue) !important; }

/* GRADIENT BGS */
.bg-gradient-orange-right {
  background: linear-gradient(to right, var(--dark-orange), var(--orange));
}

.bg-gradient-orange-left {
  background: linear-gradient(to left, var(--dark-orange), var(--orange));
}

.bg-gradient-orange-up {
  background: linear-gradient(to top, var(--dark-orange), var(--orange));
}

.bg-gradient-orange-bottom {
  background: linear-gradient(to bottom, var(--dark-orange), var(--orange));
}


.bg-gradient-green-right {
  background: linear-gradient(to right, var(--dark-green), var(--light-green));
}

.bg-gradient-green-left {
  background: linear-gradient(to left, var(--dark-green), var(--light-green));
}

.bg-gradient-green-up {
  background: linear-gradient(to top, var(--dark-green), var(--light-green));
}

.bg-gradient-green-bottom {
  background: linear-gradient(to bottom, var(--dark-green), var(--light-green));
}

}

/* CURSOR */
.pointer {
  cursor: pointer;
}

/* FONT WEIGHTS AND SIZES */

.font-xs {
  font-size: var(--font-xs) !important;
  line-height: calc(var(--font-xs)+ 3px);
}
.font-s {
  font-size: var(--font-s) !important;
  line-height: calc(var(--font-s) + 3px);
}
.font-m {
  font-size: var(--font-m) !important;
  line-height: calc(var(--font-m) + 3px);
}
.font-ml {
  font-size: var(--font-ml) !important;
  line-height: calc(var(--font-ml) + 3px);
}
.font-l {
  font-size: var(--font-l) !important;
  line-height: calc(var(--font-l) + 3px);
}
.font-xl {
  font-size: var(--font-xl) !important;
  line-height: calc(var(--font-xl) + 3px);
}
.font-xxl {
  font-size: var(--font-xxl) !important;
  line-height: calc(var(--font-xxl) + 3px);
}
.font-xxxl {
  font-size: var(--font-xxxl) !important;
  line-height: calc(var(--font-xxxl) + 3px);
}

/* TABLET FONT SIZES */
@media (max-width: 780px) {
  .tablet-font-xs {
    font-size: var(--font-xs) !important;
    line-height: calc(var(--var-font-xs) + 3px);
  }
  .tablet-font-s {
    font-size: var(--font-s) !important;
    line-height: calc(var(--font-s) + 3px);
  }
  .tablet-font-m {
    font-size: var(--font-m) !important;
    line-height: calc(var(--font-m) + 3px);
  }
  .tablet-font-ml {
    font-size: var(--font-ml) !important;
    line-height: calc(var(--font-ml) + 3px);
  }
  .tablet-font-l {
    font-size: var(--font-l) !important;
    line-height: calc(var(--font-l) + 3px);
  }
  .tablet-font-xl {
    font-size: var(--font-xl) !important;
    line-height: calc(var(--font-xl) + 3px);
  }
  .tablet-font-xxl {
    font-size: var(--font-xxl) !important;
    line-height: calc(var(--font-xxl) + 3px);
  }
  .tablet-font-xxxl {
    font-size: var(--font-xxxl) !important;
    line-height: calc(var(--font-xxxl) + 3px);
  }
}

@media (max-width: 550px) {

.mobile-font-xs {
  font-size: var(--font-xs) !important;
  line-height: calc(var(--var-font-xs) + 3px);
}
.mobile-font-s {
  font-size: var(--font-s) !important;
  line-height: calc(var(--font-s) + 3px);
}
.mobile-font-m {
  font-size: var(--font-m) !important;
  line-height: calc(var(--font-m) + 3px);
}
.mobile-font-ml {
  font-size: var(--font-ml) !important;
  line-height: calc(var(--font-ml) + 3px);
}
.mobile-font-l {
  font-size: var(--font-l) !important;
  line-height: calc(var(--font-l) + 3px);
}
.mobile-font-xl {
  font-size: var(--font-xl) !important;
  line-height: calc(var(--font-xl) + 3px);
}
.mobile-font-xxl {
  font-size: var(--font-xxl) !important;
  line-height: calc(var(--font-xxl) + 3px);
}
.mobile-font-xxxl {
  font-size: var(--font-xxxl) !important;
  line-height: calc(var(--font-xxxl) + 3px);
}

}

.font-100 {
  font-weight: var(--font-w-100) !important;
}
.font-200 {
  font-weight: var(--font-w-200) !important;
}
.font-300 {
  font-weight: var(--font-w-300) !important;
}
.font-400 {
  font-weight: var(--font-w-400) !important;
}
.font-500 {
  font-weight: var(--font-w-500) !important;
}
.font-600 {
  font-weight: var(--font-w-600) !important;
}
.font-700 {
  font-weight: var(--font-w-700) !important;
}
.font-800 {
  font-weight: var(--font-w-800) !important;
}
.font-900 {
  font-weight: var(--font-w-900) !important;
}


.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

@media (max-width: 550px) {
 .mobile-text-center {
  text-align: center;
 }
}

/* Width */
.w-10 {
  width: 10% !important;
}

.w-20 {
  width: 20% !important;
}

.w-30 {
  width: 30% !important;
}

.w-40 {
  width: 40% !important;
}

.w-50 {
  width: 50% !important;
}

.w-60 {
  width: 60% !important;
}

.w-70 {
  width: 70% !important;
}

.w-80 {
  width: 80% !important;
}

.w-90 {
  width: 90% !important;
}

.w-100 {
  width: 100% !important;
}

@media (max-width: 780px) {

  .tablet-w-10 {
    width: 10% !important;
  }
  
  .tablet-w-20 {
    width: 20% !important;
  }
  
  .tablet-w-30 {
    width: 30% !important;
  }
  
  .tablet-w-40 {
    width: 40% !important;
  }
  
  .tablet-w-50 {
    width: 50% !important;
  }
  
  .tablet-w-60 {
    width: 60% !important;
  }
  
  .tablet-w-70 {
    width: 70% !important;
  }
  
  .tablet-w-80 {
    width: 80% !important;
  }
  
  .tablet-w-90 {
    width: 90% !important;
  }
  
  .tablet-w-100 {
    width: 100% !important;
  }
}

@media (max-width: 550px) {

.mobile-w-10 {
  width: 10% !important;
}

.mobile-w-20 {
  width: 20% !important;
}

.mobile-w-30 {
  width: 30% !important;
}

.mobile-w-40 {
  width: 40% !important;
}

.mobile-w-50 {
  width: 50% !important;
}
.mobile-w-60 {
  width: 60% !important;
}

.mobile-w-70 {
  width: 70% !important;
}

.mobile-w-80 {
width: 80% !important;
  }
.mobile-w-90 {
width: 90% !important;
}

.mobile-w-100 {
width: 100% !important;
}

}


/* MEDIA QUERIES */

@media (min-width: 780px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (max-width: 780px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (max-width: 550px) {
  .hide-mobile {
    display: none !important;
  }
}

/* KEYFRAMES */

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* OVERRIDES (KEEP ON END) */

.no-padding {
  padding: 0!important;
}

.no-bottom-padding {
  padding-bottom: 0!important;
}

@media (max-width: 780px) {
.tablet-no-padding {
  padding: 0!important;
}
.tablet-no-bottom-padding {
  padding-bottom: 0!important;
}
.tablet-no-top-padding {
  padding-top: 0!important;
}
}

@media (max-width: 550px) {
.mobile-no-padding {
  padding: 0!important;
}
.mobile-no-bottom-padding {
  padding-bottom: 0!important;
}
.mobile-no-top-padding {
  padding-top: 0!important;
}
}




.overflow-visible {
  overflow: visible!important;
}

.overflow-hidden {
  overflow: hidden!important;
}


/* Z-INDEX */
.z-100 {
  z-index: 100;
}
.z-90 {
  z-index: 90;
}
.z-80 {
  z-index: 80;
}

.z-70 {
  z-index: 70;
}

.z-60 {
  z-index: 60;
}

.z-50 {
  z-index: 50;
}

.z-40 {
  z-index: 40;
}

.z-30 {
  z-index: 30;
}

.z-20 {
  z-index: 20;
}

.z-10 {
  z-index: 10;
}

.z-0 {
  z-index: 0;
}

.nowrap {
  white-space: nowrap;
}

.transition {
  transition: all 0.3s ease-in-out;
}