/* Define your spacing scale */
:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
}
/* There is some global css that targets all images this fixes it for the new css */
img {
    max-width: unset !important;
}

.flex {
    display: flex;
}

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

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

.flex-grow-1 {
    flex-grow: 1;
}


.flex-basis-50 { 
    flex-basis: 50%;
}

.grid  {
    display: grid;
}

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

/* Used when you want flex on larger screens and grid on smaller screens */
.flex-to-grid {
 display: flex;
}

@media (max-width: 500px) {
    .flex-to-grid {
     display: grid;
    }
}


.gap-sm {
   gap: var(--space-sm); 
}
.gap-md {
   gap: var(--space-md); 
}
.gap-lg {
   gap: var(--space-lg); 
}


/* Margin utilities */
.mt-none { margin-top: 0; }
.mt-xs   { margin-top: var(--space-xs); }
.mt-sm   { margin-top: var(--space-sm); }
.mt-md   { margin-top: var(--space-md); }
.mt-lg   { margin-top: var(--space-lg); }
.mt-xl   { margin-top: var(--space-xl); }

.mb-none { margin-bottom: 0; }
.mb-xs   { margin-bottom: var(--space-xs); }
.mb-sm   { margin-bottom: var(--space-sm); }
.mb-md   { margin-bottom: var(--space-md); }
.mb-lg   { margin-bottom: var(--space-lg); }
.mb-xl   { margin-bottom: var(--space-xl); }

.ml-none { margin-left: 0; }
.ml-xs   { margin-left: var(--space-xs); }
.ml-sm   { margin-left: var(--space-sm); }
.ml-md   { margin-left: var(--space-md); }
.ml-lg   { margin-left: var(--space-lg); }
.ml-xl   { margin-left: var(--space-xl); }

.mr-none { margin-right: 0; }
.mr-xs   { margin-right: var(--space-xs); }
.mr-sm   { margin-right: var(--space-sm); }
.mr-md   { margin-right: var(--space-md); }
.mr-lg   { margin-right: var(--space-lg); }
.mr-xl   { margin-right: var(--space-xl); }

/* Combined / axis utilities */
.ma-none { margin: 0; }
.ma-xs   { margin: var(--space-xs); }
.ma-sm   { margin: var(--space-sm); }
.ma-md   { margin: var(--space-md); }
.ma-lg   { margin: var(--space-lg); }
.ma-xl   { margin: var(--space-xl); }

.mx-none { margin-left: 0; margin-right: 0; }
.mx-xs   { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-sm   { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.mx-md   { margin-left: var(--space-md); margin-right: var(--space-md); }
.mx-lg   { margin-left: var(--space-lg); margin-right: var(--space-lg); }
.mx-xl   { margin-left: var(--space-xl); margin-right: var(--space-xl); }

.my-none { margin-top: 0; margin-bottom: 0; }
.my-xs   { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-sm   { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md   { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg   { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.my-xl   { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

/* Padding utilities (same pattern) */
.pt-none { padding-top: 0; }
.pt-xs   { padding-top: var(--space-xs); }
.pt-sm   { padding-top: var(--space-sm); }
.pt-md   { padding-top: var(--space-md); }
.pt-lg   { padding-top: var(--space-lg); }
.pt-xl   { padding-top: var(--space-xl); }

.pb-none { padding-bottom: 0; }
.pb-xs   { padding-bottom: var(--space-xs); }
.pb-sm   { padding-bottom: var(--space-sm); }
.pb-md   { padding-bottom: var(--space-md); }
.pb-lg   { padding-bottom: var(--space-lg); }
.pb-xl   { padding-bottom: var(--space-xl); }

.pl-none { padding-left: 0; }
.pl-xs   { padding-left: var(--space-xs); }
.pl-sm   { padding-left: var(--space-sm); }
.pl-md   { padding-left: var(--space-md); }
.pl-lg   { padding-left: var(--space-lg); }
.pl-xl   { padding-left: var(--space-xl); }

.pr-none { padding-right: 0; }
.pr-xs   { padding-right: var(--space-xs); }
.pr-sm   { padding-right: var(--space-sm); }
.pr-md   { padding-right: var(--space-md); }
.pr-lg   { padding-right: var(--space-lg); }
.pr-xl   { padding-right: var(--space-xl); }

.pa-none { padding: 0; }
.pa-xs   { padding: var(--space-xs); }
.pa-sm   { padding: var(--space-sm); }
.pa-md   { padding: var(--space-md); }
.pa-lg   { padding: var(--space-lg); }
.pa-xl   { padding: var(--space-xl); }

.px-none { padding-left: 0; padding-right: 0; }
.px-xs   { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm   { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md   { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg   { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl   { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.py-none { padding-top: 0; padding-bottom: 0; }
.py-xs   { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm   { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md   { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg   { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl   { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }


/* Typeography */

.text-subtitle {
  font-size: 25px;
  font-weight: 600;
  line-height:1.5;
}

.text-label {
  font-size: 20px;
  font-weight: 600;
  line-height:1.5;
}

.text-title {
  font-size: 18px;
  font-weight: 600;
  line-height:1.3;
}

.text-content {
  font-size: 18px;
  line-height:1.3;
}


.bg-orange {
    background: #F5B63D;
}
.text-grey {
    color: #3c3c3c;
}

.text-white { 
    color: #ffffff
}
.text-bold {
    font-weight: 600;
}
.bg-orange-opaque {
    background: #f5b53dfa;
}

/* Borders */
.border-radius-20 {
    border-radius: 20px;
}

.no-underline {
    text-decoration: none;
}