:root {

  /* https://www.fluid-type-scale.com/calculate?minFontSize=15.55&minWidth=767&minRatio=1.19&maxFontSize=16&maxWidth=1440&maxRatio=1.333&steps=m%2Cl%2Cxl%2C2xl%2C3xl%2C4xl&baseStep=m&prefix=text&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */
--text-m: clamp(0.97rem, 0.07vi + 0.94rem, 1rem);
--text-l: clamp(1.16rem, 0.42vi + 0.96rem, 1.33rem);
--text-xl: clamp(1.38rem, 0.95vi + 0.92rem, 1.78rem);
--text-2xl: clamp(1.64rem, 1.74vi + 0.8rem, 2.37rem);
--text-3xl: clamp(1.95rem, 2.87vi + 0.57rem, 3.16rem);
--text-4xl: clamp(2.32rem, 4.49vi + 0.17rem, 4.21rem);
}





/* Overflow */
.of-h {
    overflow: hidden;
}

/* Font Colors */

.fc-white {
    color: #ffffff;
}

/* Text Align */

.t-a-c {
    text-align: center;
}

/* Flexbox */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

/* Flex Direction */
.f-d-r {
  flex-direction: row;
}
.f-d-rr {
  flex-direction: row-reverse;
}
.f-d-c {
  flex-direction: column;
}
.f-d-cr {
  flex-direction: column-reverse;
}

/* Flex Wrap */
.f-w-n {
  flex-wrap: nowrap;
}
.f-w-w {
  flex-wrap: wrap;
}
.f-w-wr {
  flex-wrap: wrap-reverse;
}

/* Justify Content */
.j-c-fs {
  justify-content: flex-start;
}
.j-c-fe {
  justify-content: flex-end;
}
.j-c-c {
  justify-content: center;
}
.j-c-sb {
  justify-content: space-between;
}
.j-c-sa {
  justify-content: space-around;
}
.j-c-se {
  justify-content: space-evenly;
}

/* Align Items */
.a-i-fs {
  align-items: flex-start;
}
.a-i-fe {
  align-items: flex-end;
}
.a-i-c {
  align-items: center;
}
.a-i-b {
  align-items: baseline;
}
.a-i-s {
  align-items: stretch;
}

/* Align Content */
.a-c-fs {
  align-content: flex-start;
}
.a-c-fe {
  align-content: flex-end;
}
.a-c-c {
  align-content: center;
}
.a-c-sb {
  align-content: space-between;
}
.a-c-sa {
  align-content: space-around;
}
.a-c-se {
  align-content: space-evenly;
}
.a-c-s {
  align-content: stretch;
}

/* Align Self */
.a-s-a {
  align-self: auto;
}
.a-s-fs {
  align-self: flex-start;
}
.a-s-fe {
  align-self: flex-end;
}
.a-s-c {
  align-self: center;
}
.a-s-b {
  align-self: baseline;
}
.a-s-s {
  align-self: stretch;
}

/* Flex Grow */
.f-g-0 {
  flex-grow: 0;
}
.f-g-1 {
  flex-grow: 1;
}

/* Flex Shrink */
.f-sh-0 {
  flex-shrink: 0;
}
.f-sh-1 {
  flex-shrink: 1;
}

/* Flex Basis */
.f-b-a {
  flex-basis: auto;
}
.f-b-0 {
  flex-basis: 0;
}

/* Flex Shorthand */
.f-1 {
  flex: 1;
}
.f-a {
  flex: auto;
}
.f-i {
  flex: initial;
}
.f-n {
  flex: none;
}

/* Root for spacing */
:root {
    --sp-0: 0;
    /* 0px */
    --sp-1: 0.25rem;
    /* 4px */
    --sp-2: 0.5rem;
    /* 8px */
    --sp-3: 0.75rem;
    /* 12px */
    --sp-4: 1rem;
    /* 16px */
    --sp-5: 1.5rem;
    /* 24px */
    --sp-6: 2rem;
    /* 32px */
    --sp-7: 3rem;
    /* 48px */
    --sp-8: 4rem;
    /* 64px */
    --sp-9: 6rem;
    /* 96px */
    --sp-10: 8rem;
    /* 128px */
    --sp-11: 12rem;
    /* 192px */
    --sp-12: 16rem;
    /* 256px */
}

@media only screen and (max-width: 1120px) {
    :root {
        --sp-7: 2.5rem;
        --sp-8: 3.5rem;
        --sp-9: 4.5rem;
        --sp-10: 5.5rem;
        --sp-11: 7.5rem;
        --sp-12: 9.5rem;
    }
}

@media only screen and (max-width: 619px) {
    :root {
        --sp-8: 3rem;
        --sp-9: 4rem;
        --sp-10: 5rem;
        --sp-11: 6rem;
        --sp-12: 7rem;
    }
}

/* Margin Classes */
.m-0 { margin: var(--sp-0); }
.m-1 { margin: var(--sp-1); }
.m-2 { margin: var(--sp-2); }
.m-3 { margin: var(--sp-3); }
.m-4 { margin: var(--sp-4); }
.m-5 { margin: var(--sp-5); }
.m-6 { margin: var(--sp-6); }
.m-7 { margin: var(--sp-7); }
.m-8 { margin: var(--sp-8); }
.m-9 { margin: var(--sp-9); }
.m-10 { margin: var(--sp-10); }
.m-11 { margin: var(--sp-11); }
.m-12 { margin: var(--sp-12); }

/* Margin Top */
.m-t-0 { margin-top: var(--sp-0); }
.m-t-1 { margin-top: var(--sp-1); }
.m-t-2 { margin-top: var(--sp-2); }
.m-t-3 { margin-top: var(--sp-3); }
.m-t-4 { margin-top: var(--sp-4); }
.m-t-5 { margin-top: var(--sp-5); }
.m-t-6 { margin-top: var(--sp-6); }
.m-t-7 { margin-top: var(--sp-7); }
.m-t-8 { margin-top: var(--sp-8); }
.m-t-9 { margin-top: var(--sp-9); }
.m-t-10 { margin-top: var(--sp-10); }
.m-t-11 { margin-top: var(--sp-11); }
.m-t-12 { margin-top: var(--sp-12); }

/* Margin Right */
.m-r-0 { margin-right: var(--sp-0); }
.m-r-1 { margin-right: var(--sp-1); }
.m-r-2 { margin-right: var(--sp-2); }
.m-r-3 { margin-right: var(--sp-3); }
.m-r-4 { margin-right: var(--sp-4); }
.m-r-5 { margin-right: var(--sp-5); }
.m-r-6 { margin-right: var(--sp-6); }
.m-r-7 { margin-right: var(--sp-7); }
.m-r-8 { margin-right: var(--sp-8); }
.m-r-9 { margin-right: var(--sp-9); }
.m-r-10 { margin-right: var(--sp-10); }
.m-r-11 { margin-right: var(--sp-11); }
.m-r-12 { margin-right: var(--sp-12); }

/* Margin Bottom */
.m-b-0 { margin-bottom: var(--sp-0); }
.m-b-1 { margin-bottom: var(--sp-1); }
.m-b-2 { margin-bottom: var(--sp-2); }
.m-b-3 { margin-bottom: var(--sp-3); }
.m-b-4 { margin-bottom: var(--sp-4); }
.m-b-5 { margin-bottom: var(--sp-5); }
.m-b-6 { margin-bottom: var(--sp-6); }
.m-b-7 { margin-bottom: var(--sp-7); }
.m-b-8 { margin-bottom: var(--sp-8); }
.m-b-9 { margin-bottom: var(--sp-9); }
.m-b-10 { margin-bottom: var(--sp-10); }
.m-b-11 { margin-bottom: var(--sp-11); }
.m-b-12 { margin-bottom: var(--sp-12); }

/* Margin Left */
.m-l-0 { margin-left: var(--sp-0); }
.m-l-1 { margin-left: var(--sp-1); }
.m-l-2 { margin-left: var(--sp-2); }
.m-l-3 { margin-left: var(--sp-3); }
.m-l-4 { margin-left: var(--sp-4); }
.m-l-5 { margin-left: var(--sp-5); }
.m-l-6 { margin-left: var(--sp-6); }
.m-l-7 { margin-left: var(--sp-7); }
.m-l-8 { margin-left: var(--sp-8); }
.m-l-9 { margin-left: var(--sp-9); }
.m-l-10 { margin-left: var(--sp-10); }
.m-l-11 { margin-left: var(--sp-11); }
.m-l-12 { margin-left: var(--sp-12); }

/* Margin X-axis (left and right) */
.m-x-0 { margin-left: var(--sp-0); margin-right: var(--sp-0); }
.m-x-1 { margin-left: var(--sp-1); margin-right: var(--sp-1); }
.m-x-2 { margin-left: var(--sp-2); margin-right: var(--sp-2); }
.m-x-3 { margin-left: var(--sp-3); margin-right: var(--sp-3); }
.m-x-4 { margin-left: var(--sp-4); margin-right: var(--sp-4); }
.m-x-5 { margin-left: var(--sp-5); margin-right: var(--sp-5); }
.m-x-6 { margin-left: var(--sp-6); margin-right: var(--sp-6); }
.m-x-7 { margin-left: var(--sp-7); margin-right: var(--sp-7); }
.m-x-8 { margin-left: var(--sp-8); margin-right: var(--sp-8); }
.m-x-9 { margin-left: var(--sp-9); margin-right: var(--sp-9); }
.m-x-10 { margin-left: var(--sp-10); margin-right: var(--sp-10); }
.m-x-11 { margin-left: var(--sp-11); margin-right: var(--sp-11); }
.m-x-12 { margin-left: var(--sp-12); margin-right: var(--sp-12); }

/* Margin Y-axis (top and bottom) */
.m-y-0 { margin-top: var(--sp-0); margin-bottom: var(--sp-0); }
.m-y-1 { margin-top: var(--sp-1); margin-bottom: var(--sp-1); }
.m-y-2 { margin-top: var(--sp-2); margin-bottom: var(--sp-2); }
.m-y-3 { margin-top: var(--sp-3); margin-bottom: var(--sp-3); }
.m-y-4 { margin-top: var(--sp-4); margin-bottom: var(--sp-4); }
.m-y-5 { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
.m-y-6 { margin-top: var(--sp-6); margin-bottom: var(--sp-6); }
.m-y-7 { margin-top: var(--sp-7); margin-bottom: var(--sp-7); }
.m-y-8 { margin-top: var(--sp-8); margin-bottom: var(--sp-8); }
.m-y-9 { margin-top: var(--sp-9); margin-bottom: var(--sp-9); }
.m-y-10 { margin-top: var(--sp-10); margin-bottom: var(--sp-10); }
.m-y-11 { margin-top: var(--sp-11); margin-bottom: var(--sp-11); }
.m-y-12 { margin-top: var(--sp-12); margin-bottom: var(--sp-12); }

/* Padding Classes */
.p-0 { padding: var(--sp-0); }
.p-1 { padding: var(--sp-1); }
.p-2 { padding: var(--sp-2); }
.p-3 { padding: var(--sp-3); }
.p-4 { padding: var(--sp-4); }
.p-5 { padding: var(--sp-5); }
.p-6 { padding: var(--sp-6); }
.p-7 { padding: var(--sp-7); }
.p-8 { padding: var(--sp-8); }
.p-9 { padding: var(--sp-9); }
.p-10 { padding: var(--sp-10); }
.p-11 { padding: var(--sp-11); }
.p-12 { padding: var(--sp-12); }

/* Padding Top */
.p-t-0 { padding-top: var(--sp-0); }
.p-t-1 { padding-top: var(--sp-1); }
.p-t-2 { padding-top: var(--sp-2); }
.p-t-3 { padding-top: var(--sp-3); }
.p-t-4 { padding-top: var(--sp-4); }
.p-t-5 { padding-top: var(--sp-5); }
.p-t-6 { padding-top: var(--sp-6); }
.p-t-7 { padding-top: var(--sp-7); }
.p-t-8 { padding-top: var(--sp-8); }
.p-t-9 { padding-top: var(--sp-9); }
.p-t-10 { padding-top: var(--sp-10); }
.p-t-11 { padding-top: var(--sp-11); }
.p-t-12 { padding-top: var(--sp-12); }

/* Padding Right */
.p-r-0 { padding-right: var(--sp-0); }
.p-r-1 { padding-right: var(--sp-1); }
.p-r-2 { padding-right: var(--sp-2); }
.p-r-3 { padding-right: var(--sp-3); }
.p-r-4 { padding-right: var(--sp-4); }
.p-r-5 { padding-right: var(--sp-5); }
.p-r-6 { padding-right: var(--sp-6); }
.p-r-7 { padding-right: var(--sp-7); }
.p-r-8 { padding-right: var(--sp-8); }
.p-r-9 { padding-right: var(--sp-9); }
.p-r-10 { padding-right: var(--sp-10); }
.p-r-11 { padding-right: var(--sp-11); }
.p-r-12 { padding-right: var(--sp-12); }

/* Padding Bottom */
.p-b-0 { padding-bottom: var(--sp-0); }
.p-b-1 { padding-bottom: var(--sp-1); }
.p-b-2 { padding-bottom: var(--sp-2); }
.p-b-3 { padding-bottom: var(--sp-3); }
.p-b-4 { padding-bottom: var(--sp-4); }
.p-b-5 { padding-bottom: var(--sp-5); }
.p-b-6 { padding-bottom: var(--sp-6); }
.p-b-7 { padding-bottom: var(--sp-7); }
.p-b-8 { padding-bottom: var(--sp-8); }
.p-b-9 { padding-bottom: var(--sp-9); }
.p-b-10 { padding-bottom: var(--sp-10); }
.p-b-11 { padding-bottom: var(--sp-11); }
.p-b-12 { padding-bottom: var(--sp-12); }

/* Padding Left */
.p-l-0 { padding-left: var(--sp-0); }
.p-l-1 { padding-left: var(--sp-1); }
.p-l-2 { padding-left: var(--sp-2); }
.p-l-3 { padding-left: var(--sp-3); }
.p-l-4 { padding-left: var(--sp-4); }
.p-l-5 { padding-left: var(--sp-5); }
.p-l-6 { padding-left: var(--sp-6); }
.p-l-7 { padding-left: var(--sp-7); }
.p-l-8 { padding-left: var(--sp-8); }
.p-l-9 { padding-left: var(--sp-9); }
.p-l-10 { padding-left: var(--sp-10); }
.p-l-11 { padding-left: var(--sp-11); }
.p-l-12 { padding-left: var(--sp-12); }

/* Padding X-axis (left and right) */
.p-x-0 { padding-left: var(--sp-0); padding-right: var(--sp-0); }
.p-x-1 { padding-left: var(--sp-1); padding-right: var(--sp-1); }
.p-x-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.p-x-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.p-x-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.p-x-5 { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.p-x-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }
.p-x-7 { padding-left: var(--sp-7); padding-right: var(--sp-7); }
.p-x-8 { padding-left: var(--sp-8); padding-right: var(--sp-8); }
.p-x-9 { padding-left: var(--sp-9); padding-right: var(--sp-9); }
.p-x-10 { padding-left: var(--sp-10); padding-right: var(--sp-10); }
.p-x-11 { padding-left: var(--sp-11); padding-right: var(--sp-11); }
.p-x-12 { padding-left: var(--sp-12); padding-right: var(--sp-12); }

/* Padding Y-axis (top and bottom) */
.p-y-0 { padding-top: var(--sp-0); padding-bottom: var(--sp-0); }
.p-y-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.p-y-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.p-y-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.p-y-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.p-y-5 { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.p-y-6 { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.p-y-7 { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.p-y-8 { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.p-y-9 { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.p-y-10 { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.p-y-11 { padding-top: var(--sp-11); padding-bottom: var(--sp-11); }
.p-y-12 { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }

/* Gap Classes */
.gap-0 { gap: var(--sp-0); }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }
.gap-7 { gap: var(--sp-7); }
.gap-8 { gap: var(--sp-8); }
.gap-9 { gap: var(--sp-9); }
.gap-10 { gap: var(--sp-10); }
.gap-11 { gap: var(--sp-11); }
.gap-12 { gap: var(--sp-12); }

/* ============================================================================
   GRID UTILITIES
   ============================================================================
*/

/* Desktop / default */
.grid-1 {
    display: grid !important;
    grid-template-columns: 1fr;
}
.grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
}

/* Tablet-Mobile and below (991px and below) */
@media only screen and (max-width: 991px) {
    .grid-1-tablet-mobile {
        display: grid !important;
        grid-template-columns: 1fr;
    }
    .grid-2-tablet-mobile {
        display: grid !important;
        grid-template-columns: 1fr;
    }
    .grid-3-tablet-mobile {
        display: grid !important;
        grid-template-columns: 1fr;
    }
    .grid-4-tablet-mobile {
        display: grid !important;
        grid-template-columns: 1fr;
    }
}

/* Mobile only (767px and below) */
@media only screen and (max-width: 767px) {
    .grid-1-mobile {
        display: grid !important;
        grid-template-columns: 1fr;
    }
    .grid-2-mobile {
        display: grid !important;
        grid-template-columns: 1fr;
    }
    .grid-3-mobile {
        display: grid !important;
        grid-template-columns: 1fr;
    }
    .grid-4-mobile {
        display: grid !important;
        grid-template-columns: 1fr;
    }
}




:root {
    --sp-safe-100svh: clamp(calc(3 * var(--sp-11)), 100svh, calc(10 * var(--sp-11)));
    --sp-safe-95svh: clamp(calc(3 * var(--sp-11)), 95svh, calc(10 * var(--sp-11)));
    --sp-safe-90svh: clamp(calc(3 * var(--sp-11)), 90svh, calc(10 * var(--sp-11)));
    --sp-safe-85svh: clamp(calc(3 * var(--sp-11)), 85svh, calc(10 * var(--sp-11)));
    --sp-safe-80svh: clamp(calc(3 * var(--sp-11)), 80svh, calc(10 * var(--sp-11)));
    --sp-safe-75svh: clamp(calc(3 * var(--sp-11)), 75svh, calc(10 * var(--sp-11)));
    --sp-safe-70svh: clamp(calc(3 * var(--sp-11)), 70svh, calc(10 * var(--sp-11)));
    --sp-safe-65svh: clamp(calc(3 * var(--sp-11)), 65svh, calc(10 * var(--sp-11)));
    --sp-safe-60svh: clamp(calc(3 * var(--sp-11)), 60svh, calc(10 * var(--sp-11)));
    --sp-safe-55svh: clamp(calc(3 * var(--sp-11)), 55svh, calc(10 * var(--sp-11)));
    --sp-safe-50svh: clamp(calc(3 * var(--sp-11)), 50svh, calc(10 * var(--sp-11)));
    --sp-safe-45svh: clamp(calc(3 * var(--sp-11)), 45svh, calc(10 * var(--sp-11)));
    --sp-safe-40svh: clamp(calc(3 * var(--sp-11)), 40svh, calc(10 * var(--sp-11)));
    --sp-safe-35svh: clamp(calc(3 * var(--sp-11)), 35svh, calc(10 * var(--sp-11)));
    --sp-safe-30svh: clamp(calc(3 * var(--sp-11)), 30svh, calc(10 * var(--sp-11)));
    --sp-safe-25svh: clamp(calc(3 * var(--sp-11)), 25svh, calc(10 * var(--sp-11)));
    --sp-safe-20svh: clamp(calc(3 * var(--sp-11)), 20svh, calc(10 * var(--sp-11)));
    --sp-safe-15svh: clamp(calc(3 * var(--sp-11)), 15svh, calc(10 * var(--sp-11)));
    --sp-safe-10svh: clamp(calc(3 * var(--sp-11)), 10svh, calc(10 * var(--sp-11)));
    --sp-safe-5svh: clamp(calc(3 * var(--sp-11)), 5svh, calc(10 * var(--sp-11)));
}


.h-25 { min-height: var(--sp-safe-25svh); }
.h-30 { min-height: var(--sp-safe-30svh); }
.h-35 { min-height: var(--sp-safe-35svh); }
.h-40 { min-height: var(--sp-safe-40svh); }
.h-45 { min-height: var(--sp-safe-45svh); }
.h-50 { min-height: var(--sp-safe-50svh); }
.h-55 { min-height: var(--sp-safe-55svh); }
.h-60 { min-height: var(--sp-safe-60svh); }
.h-65 { min-height: var(--sp-safe-65svh); }
.h-70 { min-height: var(--sp-safe-70svh); }
.h-75 { min-height: var(--sp-safe-75svh); }
.h-80 { min-height: var(--sp-safe-80svh); }
.h-85 { min-height: var(--sp-safe-85svh); }
.h-90 { min-height: var(--sp-safe-90svh); }
.h-95 { min-height: var(--sp-safe-95svh); }
.h-100 { min-height: var(--sp-safe-100svh); }