/* ============================================
   1. CSS VARIABLES
   ============================================ */
:root {
  /* Colors - Pas deze aan naar jouw branding */
  --primary-color: #A84965;
  --secondary-color:  #F9CABE;
  --accent-color: #A84965;
  --text-color: #000;
  --text-light: #6b7280;
  --text-dark: #111827;
  --background-color: #ffffff;
  --background-gray: #f9fafb;
  --border-color: #e5e7eb;
  --error-color: #ef4444;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --info-color: #06b6d4;
  --transparent: transparent;
  --white: #ffffff;
  --black: #000000;
}

/* ============================================
   2. BASE TYPOGRAPHY (H-TAGS RESPONSIVE)
   ============================================ */
h1 {
  font-family: "Geologica", sans-serif;
  font-size: 64px;
  line-height: 1;
  font-weight: 100;
  margin:0;
}

h2 {
  font-size: 32px;
  line-height: 1;
  font-weight: 400;
  margin:0;
}

h3 {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  margin:0;
}

h4 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  margin:0;
}

h5 {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  margin:0;
}

h6 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 100;
  margin:0;
}

@media (max-width: 818px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 20px; }
  h4 { font-size: 18px; }
  h5 { font-size: 16px; }
  h6 { font-size: 14px; }
}

/* ============================================
   3. SPACING - MARGIN
   ============================================ */
.m--0 { margin: 0; }
.m--4 { margin: 4px; }
.m--8 { margin: 8px; }
.m--12 { margin: 12px; }
.m--16 { margin: 16px; }
.m--20 { margin: 20px; }
.m--24 { margin: 24px; }
.m--32 { margin: 32px; }
.m--40 { margin: 40px; }
.m--48 { margin: 48px; }
.m--56 { margin: 56px; }
.m--64 { margin: 64px; }
.m--80 { margin: 80px; }
.m--96 { margin: 96px; }
.m--112 { margin: 112px; }
.m--128 { margin: 128px; }
.m--160 { margin: 160px; }
.m--192 { margin: 192px; }
.m--224 { margin: 224px; }
.m--256 { margin: 256px; }
.m--auto { margin: auto; }

/* Margin Top */
.mt--0 { margin-top: 0; }
.mt--4 { margin-top: 4px; }
.mt--8 { margin-top: 8px; }
.mt--12 { margin-top: 12px; }
.mt--16 { margin-top: 16px; }
.mt--20 { margin-top: 20px; }
.mt--24 { margin-top: 24px; }
.mt--32 { margin-top: 32px; }
.mt--40 { margin-top: 40px; }
.mt--48 { margin-top: 48px; }
.mt--56 { margin-top: 56px; }
.mt--64 { margin-top: 64px; }
.mt--80 { margin-top: 80px; }
.mt--96 { margin-top: 96px; }
.mt--112 { margin-top: 112px; }
.mt--128 { margin-top: 128px; }
.mt--160 { margin-top: 160px; }
.mt--192 { margin-top: 192px; }
.mt--224 { margin-top: 224px; }
.mt--256 { margin-top: 256px; }
.mt--auto { margin-top: auto; }

.-mt--56{margin-top:-56px;}

/* Margin Right */
.mr--0 { margin-right: 0; }
.mr--4 { margin-right: 4px; }
.mr--8 { margin-right: 8px; }
.mr--12 { margin-right: 12px; }
.mr--16 { margin-right: 16px; }
.mr--20 { margin-right: 20px; }
.mr--24 { margin-right: 24px; }
.mr--32 { margin-right: 32px; }
.mr--40 { margin-right: 40px; }
.mr--48 { margin-right: 48px; }
.mr--56 { margin-right: 56px; }
.mr--64 { margin-right: 64px; }
.mr--80 { margin-right: 80px; }
.mr--96 { margin-right: 96px; }
.mr--112 { margin-right: 112px; }
.mr--128 { margin-right: 128px; }
.mr--160 { margin-right: 160px; }
.mr--192 { margin-right: 192px; }
.mr--224 { margin-right: 224px; }
.mr--256 { margin-right: 256px; }
.mr--auto { margin-right: auto; }

/* Margin Bottom */
.mb--0 { margin-bottom: 0; }
.mb--4 { margin-bottom: 4px; }
.mb--8 { margin-bottom: 8px; }
.mb--12 { margin-bottom: 12px; }
.mb--16 { margin-bottom: 16px; }
.mb--20 { margin-bottom: 20px; }
.mb--24 { margin-bottom: 24px; }
.mb--32 { margin-bottom: 32px; }
.mb--40 { margin-bottom: 40px; }
.mb--48 { margin-bottom: 48px; }
.mb--56 { margin-bottom: 56px; }
.mb--64 { margin-bottom: 64px; }
.mb--80 { margin-bottom: 80px; }
.mb--96 { margin-bottom: 96px; }
.mb--112 { margin-bottom: 112px; }
.mb--128 { margin-bottom: 128px; }
.mb--160 { margin-bottom: 160px; }
.mb--192 { margin-bottom: 192px; }
.mb--224 { margin-bottom: 224px; }
.mb--256 { margin-bottom: 256px; }
.mb--auto { margin-bottom: auto; }

/* Margin Left */
.ml--0 { margin-left: 0; }
.ml--4 { margin-left: 4px; }
.ml--8 { margin-left: 8px; }
.ml--12 { margin-left: 12px; }
.ml--16 { margin-left: 16px; }
.ml--20 { margin-left: 20px; }
.ml--24 { margin-left: 24px; }
.ml--32 { margin-left: 32px; }
.ml--40 { margin-left: 40px; }
.ml--48 { margin-left: 48px; }
.ml--56 { margin-left: 56px; }
.ml--64 { margin-left: 64px; }
.ml--80 { margin-left: 80px; }
.ml--96 { margin-left: 96px; }
.ml--112 { margin-left: 112px; }
.ml--128 { margin-left: 128px; }
.ml--160 { margin-left: 160px; }
.ml--192 { margin-left: 192px; }
.ml--224 { margin-left: 224px; }
.ml--256 { margin-left: 256px; }
.ml--auto { margin-left: auto; }

/* Margin X (horizontal) */
.mx--0 { margin-left: 0; margin-right: 0; }
.mx--4 { margin-left: 4px; margin-right: 4px; }
.mx--8 { margin-left: 8px; margin-right: 8px; }
.mx--12 { margin-left: 12px; margin-right: 12px; }
.mx--16 { margin-left: 16px; margin-right: 16px; }
.mx--20 { margin-left: 20px; margin-right: 20px; }
.mx--24 { margin-left: 24px; margin-right: 24px; }
.mx--32 { margin-left: 32px; margin-right: 32px; }
.mx--40 { margin-left: 40px; margin-right: 40px; }
.mx--48 { margin-left: 48px; margin-right: 48px; }
.mx--56 { margin-left: 56px; margin-right: 56px; }
.mx--64 { margin-left: 64px; margin-right: 64px; }
.mx--80 { margin-left: 80px; margin-right: 80px; }
.mx--96 { margin-left: 96px; margin-right: 96px; }
.mx--112 { margin-left: 112px; margin-right: 112px; }
.mx--128 { margin-left: 128px; margin-right: 128px; }
.mx--160 { margin-left: 160px; margin-right: 160px; }
.mx--192 { margin-left: 192px; margin-right: 192px; }
.mx--224 { margin-left: 224px; margin-right: 224px; }
.mx--256 { margin-left: 256px; margin-right: 256px; }
.mx--auto { margin-left: auto; margin-right: auto; }

/* Margin Y (vertical) */
.my--0 { margin-top: 0; margin-bottom: 0; }
.my--4 { margin-top: 4px; margin-bottom: 4px; }
.my--8 { margin-top: 8px; margin-bottom: 8px; }
.my--12 { margin-top: 12px; margin-bottom: 12px; }
.my--16 { margin-top: 16px; margin-bottom: 16px; }
.my--20 { margin-top: 20px; margin-bottom: 20px; }
.my--24 { margin-top: 24px; margin-bottom: 24px; }
.my--32 { margin-top: 32px; margin-bottom: 32px; }
.my--40 { margin-top: 40px; margin-bottom: 40px; }
.my--48 { margin-top: 48px; margin-bottom: 48px; }
.my--56 { margin-top: 56px; margin-bottom: 56px; }
.my--64 { margin-top: 64px; margin-bottom: 64px; }
.my--80 { margin-top: 80px; margin-bottom: 80px; }
.my--96 { margin-top: 96px; margin-bottom: 96px; }
.my--112 { margin-top: 112px; margin-bottom: 112px; }
.my--128 { margin-top: 128px; margin-bottom: 128px; }
.my--160 { margin-top: 160px; margin-bottom: 160px; }
.my--192 { margin-top: 192px; margin-bottom: 192px; }
.my--224 { margin-top: 224px; margin-bottom: 224px; }
.my--256 { margin-top: 256px; margin-bottom: 256px; }
.my--auto { margin-top: auto; margin-bottom: auto; }

/* ============================================
   4. SPACING - PADDING
   ============================================ */
.p--0 { padding: 0; }
.p--4 { padding: 4px; }
.p--8 { padding: 8px; }
.p--12 { padding: 12px; }
.p--16 { padding: 16px; }
.p--20 { padding: 20px; }
.p--24 { padding: 24px; }
.p--32 { padding: 32px; }
.p--40 { padding: 40px; }
.p--48 { padding: 48px; }
.p--56 { padding: 56px; }
.p--64 { padding: 64px; }
.p--80 { padding: 80px; }
.p--96 { padding: 96px; }
.p--112 { padding: 112px; }
.p--128 { padding: 128px; }
.p--160 { padding: 160px; }
.p--192 { padding: 192px; }
.p--224 { padding: 224px; }
.p--256 { padding: 256px; }

/* Padding Top */
.pt--0 { padding-top: 0; }
.pt--4 { padding-top: 4px; }
.pt--8 { padding-top: 8px; }
.pt--12 { padding-top: 12px; }
.pt--16 { padding-top: 16px; }
.pt--20 { padding-top: 20px; }
.pt--24 { padding-top: 24px; }
.pt--32 { padding-top: 32px; }
.pt--40 { padding-top: 40px; }
.pt--48 { padding-top: 48px; }
.pt--56 { padding-top: 56px; }
.pt--64 { padding-top: 64px; }
.pt--80 { padding-top: 80px; }
.pt--96 { padding-top: 96px; }
.pt--112 { padding-top: 112px; }
.pt--128 { padding-top: 128px; }
.pt--160 { padding-top: 160px; }
.pt--192 { padding-top: 192px; }
.pt--224 { padding-top: 224px; }
.pt--256 { padding-top: 256px; }

/* Padding Right */
.pr--0 { padding-right: 0; }
.pr--4 { padding-right: 4px; }
.pr--8 { padding-right: 8px; }
.pr--12 { padding-right: 12px; }
.pr--16 { padding-right: 16px; }
.pr--20 { padding-right: 20px; }
.pr--24 { padding-right: 24px; }
.pr--32 { padding-right: 32px; }
.pr--40 { padding-right: 40px; }
.pr--48 { padding-right: 48px; }
.pr--56 { padding-right: 56px; }
.pr--64 { padding-right: 64px; }
.pr--80 { padding-right: 80px; }
.pr--96 { padding-right: 96px; }
.pr--112 { padding-right: 112px; }
.pr--128 { padding-right: 128px; }
.pr--160 { padding-right: 160px; }
.pr--192 { padding-right: 192px; }
.pr--224 { padding-right: 224px; }
.pr--256 { padding-right: 256px; }

/* Padding Bottom */
.pb--0 { padding-bottom: 0; }
.pb--4 { padding-bottom: 4px; }
.pb--8 { padding-bottom: 8px; }
.pb--12 { padding-bottom: 12px; }
.pb--16 { padding-bottom: 16px; }
.pb--20 { padding-bottom: 20px; }
.pb--24 { padding-bottom: 24px; }
.pb--32 { padding-bottom: 32px; }
.pb--40 { padding-bottom: 40px; }
.pb--48 { padding-bottom: 48px; }
.pb--56 { padding-bottom: 56px; }
.pb--64 { padding-bottom: 64px; }
.pb--80 { padding-bottom: 80px; }
.pb--96 { padding-bottom: 96px; }
.pb--112 { padding-bottom: 112px; }
.pb--128 { padding-bottom: 128px; }
.pb--160 { padding-bottom: 160px; }
.pb--192 { padding-bottom: 192px; }
.pb--224 { padding-bottom: 224px; }
.pb--256 { padding-bottom: 256px; }

/* Padding Left */
.pl--0 { padding-left: 0; }
.pl--4 { padding-left: 4px; }
.pl--8 { padding-left: 8px; }
.pl--12 { padding-left: 12px; }
.pl--16 { padding-left: 16px; }
.pl--20 { padding-left: 20px; }
.pl--24 { padding-left: 24px; }
.pl--32 { padding-left: 32px; }
.pl--40 { padding-left: 40px; }
.pl--48 { padding-left: 48px; }
.pl--56 { padding-left: 56px; }
.pl--64 { padding-left: 64px; }
.pl--80 { padding-left: 80px; }
.pl--96 { padding-left: 96px; }
.pl--112 { padding-left: 112px; }
.pl--128 { padding-left: 128px; }
.pl--160 { padding-left: 160px; }
.pl--192 { padding-left: 192px; }
.pl--224 { padding-left: 224px; }
.pl--256 { padding-left: 256px; }

/* Padding X (horizontal) */
.px--0 { padding-left: 0; padding-right: 0; }
.px--4 { padding-left: 4px; padding-right: 4px; }
.px--8 { padding-left: 8px; padding-right: 8px; }
.px--12 { padding-left: 12px; padding-right: 12px; }
.px--16 { padding-left: 16px; padding-right: 16px; }
.px--20 { padding-left: 20px; padding-right: 20px; }
.px--24 { padding-left: 24px; padding-right: 24px; }
.px--32 { padding-left: 32px; padding-right: 32px; }
.px--40 { padding-left: 40px; padding-right: 40px; }
.px--48 { padding-left: 48px; padding-right: 48px; }
.px--56 { padding-left: 56px; padding-right: 56px; }
.px--64 { padding-left: 64px; padding-right: 64px; }
.px--80 { padding-left: 80px; padding-right: 80px; }
.px--96 { padding-left: 96px; padding-right: 96px; }
.px--112 { padding-left: 112px; padding-right: 112px; }
.px--128 { padding-left: 128px; padding-right: 128px; }
.px--160 { padding-left: 160px; padding-right: 160px; }
.px--192 { padding-left: 192px; padding-right: 192px; }
.px--224 { padding-left: 224px; padding-right: 224px; }
.px--256 { padding-left: 256px; padding-right: 256px; }

/* Padding Y (vertical) */
.py--0 { padding-top: 0; padding-bottom: 0; }
.py--4 { padding-top: 4px; padding-bottom: 4px; }
.py--8 { padding-top: 8px; padding-bottom: 8px; }
.py--12 { padding-top: 12px; padding-bottom: 12px; }
.py--16 { padding-top: 16px; padding-bottom: 16px; }
.py--20 { padding-top: 20px; padding-bottom: 20px; }
.py--24 { padding-top: 24px; padding-bottom: 24px; }
.py--32 { padding-top: 32px; padding-bottom: 32px; }
.py--40 { padding-top: 40px; padding-bottom: 40px; }
.py--48 { padding-top: 48px; padding-bottom: 48px; }
.py--56 { padding-top: 56px; padding-bottom: 56px; }
.py--64 { padding-top: 64px; padding-bottom: 64px; }
.py--80 { padding-top: 80px; padding-bottom: 80px; }
.py--96 { padding-top: 96px; padding-bottom: 96px; }
.py--112 { padding-top: 112px; padding-bottom: 112px; }
.py--128 { padding-top: 128px; padding-bottom: 128px; }
.py--160 { padding-top: 160px; padding-bottom: 160px; }
.py--192 { padding-top: 192px; padding-bottom: 192px; }
.py--224 { padding-top: 224px; padding-bottom: 224px; }
.py--256 { padding-top: 256px; padding-bottom: 256px; }

/* ============================================
   5. SPACING - GAP
   ============================================ */
.gap--0 { gap: 0; }
.gap--4 { gap: 4px; }
.gap--8 { gap: 8px; }
.gap--12 { gap: 12px; }
.gap--16 { gap: 16px; }
.gap--20 { gap: 20px; }
.gap--24 { gap: 24px; }
.gap--32 { gap: 32px; }
.gap--40 { gap: 40px; }
.gap--48 { gap: 48px; }
.gap--56 { gap: 56px; }
.gap--64 { gap: 64px; }
.gap--80 { gap: 80px; }
.gap--96 { gap: 96px; }
.gap--112 { gap: 112px; }
.gap--128 { gap: 128px; }
.gap--160 { gap: 160px; }
.gap--192 { gap: 192px; }
.gap--224 { gap: 224px; }
.gap--256 { gap: 256px; }

/* Gap X (horizontal) */
.gap-x--0 { column-gap: 0; }
.gap-x--4 { column-gap: 4px; }
.gap-x--8 { column-gap: 8px; }
.gap-x--12 { column-gap: 12px; }
.gap-x--16 { column-gap: 16px; }
.gap-x--20 { column-gap: 20px; }
.gap-x--24 { column-gap: 24px; }
.gap-x--32 { column-gap: 32px; }
.gap-x--40 { column-gap: 40px; }
.gap-x--48 { column-gap: 48px; }
.gap-x--56 { column-gap: 56px; }
.gap-x--64 { column-gap: 64px; }
.gap-x--80 { column-gap: 80px; }
.gap-x--96 { column-gap: 96px; }
.gap-x--112 { column-gap: 112px; }
.gap-x--128 { column-gap: 128px; }
.gap-x--160 { column-gap: 160px; }
.gap-x--192 { column-gap: 192px; }
.gap-x--224 { column-gap: 224px; }
.gap-x--256 { column-gap: 256px; }

/* Gap Y (vertical) */
.gap-y--0 { row-gap: 0; }
.gap-y--4 { row-gap: 4px; }
.gap-y--8 { row-gap: 8px; }
.gap-y--12 { row-gap: 12px; }
.gap-y--16 { row-gap: 16px; }
.gap-y--20 { row-gap: 20px; }
.gap-y--24 { row-gap: 24px; }
.gap-y--32 { row-gap: 32px; }
.gap-y--40 { row-gap: 40px; }
.gap-y--48 { row-gap: 48px; }
.gap-y--56 { row-gap: 56px; }
.gap-y--64 { row-gap: 64px; }
.gap-y--80 { row-gap: 80px; }
.gap-y--96 { row-gap: 96px; }
.gap-y--112 { row-gap: 112px; }
.gap-y--128 { row-gap: 128px; }
.gap-y--160 { row-gap: 160px; }
.gap-y--192 { row-gap: 192px; }
.gap-y--224 { row-gap: 224px; }
.gap-y--256 { row-gap: 256px; }

/* ============================================
   6. TYPOGRAPHY - FONT SIZE
   ============================================ */
.text--10 { font-size: 10px; }
.text--12 { font-size: 12px; }
.text--14 { font-size: 14px; }
.text--16 { font-size: 16px; }
.text--18 { font-size: 18px; }
.text--20 { font-size: 20px; }
.text--24 { font-size: 24px; }
.text--28 { font-size: 28px; }
.text--32 { font-size: 32px; }
.text--36 { font-size: 36px; }
.text--40 { font-size: 40px; }
.text--48 { font-size: 48px; }
.text--56 { font-size: 56px; }
.text--64 { font-size: 64px; }
.text--72 { font-size: 72px; }
.text--80 { font-size: 80px; }
.text--96 { font-size: 96px; }
.text--112 { font-size: 112px; }
.text--128 { font-size: 128px; }

/* ============================================
   7. TYPOGRAPHY - LINE HEIGHT
   ============================================ */
.leading--16 { line-height: 16px; }
.leading--20 { line-height: 20px; }
.leading--24 { line-height: 24px; }
.leading--28 { line-height: 28px; }
.leading--32 { line-height: 32px; }
.leading--36 { line-height: 36px; }
.leading--40 { line-height: 40px; }
.leading--48 { line-height: 48px; }
.leading--56 { line-height: 56px; }
.leading--64 { line-height: 64px; }
.leading--72 { line-height: 72px; }
.leading--80 { line-height: 80px; }
.leading--96 { line-height: 96px; }
.leading--112 { line-height: 112px; }
.leading--128 { line-height: 128px; }
.leading--none { line-height: 1; }
.leading--tight { line-height: 1.25; }
.leading--snug { line-height: 1.375; }
.leading--normal { line-height: 1.5; }
.leading--relaxed { line-height: 1.625; }
.leading--loose { line-height: 2; }

/* ============================================
   8. TYPOGRAPHY - FONT WEIGHT
   ============================================ */
.font--100 { font-weight: 100; }
.font--200 { font-weight: 200; }
.font--300 { font-weight: 300; }
.font--400 { font-weight: 400; }
.font--500 { font-weight: 500; }
.font--600 { font-weight: 600; }
.font--700 { font-weight: 700; }
.font--800 { font-weight: 800; }
.font--900 { font-weight: 900; }

/* ============================================
   9. TYPOGRAPHY - TEXT ALIGNMENT
   ============================================ */
.text--left { text-align: left; }
.text--center { text-align: center; }
.text--right { text-align: right; }
.text--justify { text-align: justify; }

/* ============================================
   10. TYPOGRAPHY - TEXT DECORATION
   ============================================ */
.underline { text-decoration: underline; }
.line--through { text-decoration: line-through; }
.no--underline { text-decoration: none; }

/* ============================================
   11. TYPOGRAPHY - TEXT TRANSFORM
   ============================================ */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal--case { text-transform: none; }

/* ============================================
   12. DISPLAY
   ============================================ */
.block { display: block; }
.inline--block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline--flex { display: inline-flex; }
.hidden { display: none; }

/* ============================================
   13. FLEXBOX
   ============================================ */
.flex--row { flex-direction: row; }
.flex--row-reverse { flex-direction: row-reverse; }
.flex--col { flex-direction: column; }
.flex--col-reverse { flex-direction: column-reverse; }

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

/* Justify Content */
.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; }
.justify--evenly { justify-content: space-evenly; }

/* Align Items */
.items--start { align-items: flex-start; }
.items--end { align-items: flex-end; }
.items--center { align-items: center; }
.items--baseline { align-items: baseline; }
.items--stretch { align-items: stretch; }

/* Align Content */
.content--start { align-content: flex-start; }
.content--end { align-content: flex-end; }
.content--center { align-content: center; }
.content--between { align-content: space-between; }
.content--around { align-content: space-around; }
.content--evenly { align-content: space-evenly; }

/* Align Self */
.self--auto { align-self: auto; }
.self--start { align-self: flex-start; }
.self--end { align-self: flex-end; }
.self--center { align-self: center; }
.self--stretch { align-self: stretch; }
.self--baseline { align-self: baseline; }

/* Flex Grow & Shrink */
.flex--1 { flex: 1 1 0%; }
.flex--auto { flex: 1 1 auto; }
.flex--initial { flex: 0 1 auto; }
.flex--none { flex: none; }

/* ============================================
   14. POSITION
   ============================================ */
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

/* Top/Right/Bottom/Left */
.top--0 { top: 0; }
.top--4 { top: 4px; }
.top--8 { top: 8px; }
.top--12 { top: 12px; }
.top--16 { top: 16px; }
.top--20 { top: 20px; }
.top--24 { top: 24px; }
.top--32 { top: 32px; }
.top--40 { top: 40px; }
.top--48 { top: 48px; }
.top--56 { top: 56px; }
.top--64 { top: 64px; }
.top--80 { top: 80px; }
.top--96 { top: 96px; }
.top--112 { top: 112px; }
.top--128 { top: 128px; }

.right--0 { right: 0; }
.right--4 { right: 4px; }
.right--8 { right: 8px; }
.right--12 { right: 12px; }
.right--16 { right: 16px; }
.right--20 { right: 20px; }
.right--24 { right: 24px; }
.right--32 { right: 32px; }
.right--40 { right: 40px; }
.right--48 { right: 48px; }
.right--56 { right: 56px; }
.right--64 { right: 64px; }
.right--80 { right: 80px; }
.right--96 { right: 96px; }
.right--112 { right: 112px; }
.right--128 { right: 128px; }

.bottom--0 { bottom: 0; }
.bottom--4 { bottom: 4px; }
.bottom--8 { bottom: 8px; }
.bottom--12 { bottom: 12px; }
.bottom--16 { bottom: 16px; }
.bottom--20 { bottom: 20px; }
.bottom--24 { bottom: 24px; }
.bottom--32 { bottom: 32px; }
.bottom--40 { bottom: 40px; }
.bottom--48 { bottom: 48px; }
.bottom--56 { bottom: 56px; }
.bottom--64 { bottom: 64px; }
.bottom--80 { bottom: 80px; }
.bottom--96 { bottom: 96px; }
.bottom--112 { bottom: 112px; }
.bottom--128 { bottom: 128px; }

.left--0 { left: 0; }
.left--4 { left: 4px; }
.left--8 { left: 8px; }
.left--12 { left: 12px; }
.left--16 { left: 16px; }
.left--20 { left: 20px; }
.left--24 { left: 24px; }
.left--32 { left: 32px; }
.left--40 { left: 40px; }
.left--48 { left: 48px; }
.left--56 { left: 56px; }
.left--64 { left: 64px; }
.left--80 { left: 80px; }
.left--96 { left: 96px; }
.left--112 { left: 112px; }
.left--128 { left: 128px; }

.inset--0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset--4 { top: 4px; right: 4px; bottom: 4px; left: 4px; }
.inset--8 { top: 8px; right: 8px; bottom: 8px; left: 8px; }
.inset--16 { top: 16px; right: 16px; bottom: 16px; left: 16px; }
.inset--24 { top: 24px; right: 24px; bottom: 24px; left: 24px; }
.inset--32 { top: 32px; right: 32px; bottom: 32px; left: 32px; }

/* ============================================
   16. WIDTH & HEIGHT
   ============================================ */
.w--auto { width: auto; }
.w--full { width: 100%; }
.w--30{width:30%;}
.w--60{width:60%;}
.w--70{width:70%;}
.w--screen { width: 100vw; }
.w--min { width: min-content; }
.w--max { width: max-content; }
.w--fit { width: fit-content; }
.w--4 { width: 4px; }
.w--8 { width: 8px; }
.w--12 { width: 12px; }
.w--16 { width: 16px; }
.w--20 { width: 20%; }
.w--24 { width: 24px; }
.w--32 { width: 32px; }
.w--40 { width: 40%; }
.w--48 { width: 48px; }
.w--56 { width: 56px; }
.w--64 { width: 64px; }
.w--80 { width: 80%; }
.w--96 { width: 96px; }
.w--112 { width: 112px; }
.w--128 { width: 128px; }
.w--160 { width: 160px; }
.w--192 { width: 192px; }
.w--224 { width: 224px; }
.w--256 { width: 256px; }

.h--auto { height: auto; }
.h--full { height: 100%; }
.h--screen { height: 100vh; }
.h--min { height: min-content; }
.h--max { height: max-content; }
.h--fit { height: fit-content; }
.h--70vh{ height:70vh; }
.h--50vh{ height:50vh; }
.h--64vh { height:64vh; }
.h--4 { height: 4px; }
.h--8 { height: 8px; }
.h--12 { height: 12px; }
.h--16 { height: 16px; }
.h--20 { height: 20px; }
.h--24 { height: 24px; }
.h--32 { height: 32px; }
.h--40 { height: 40px; }
.h--48 { height: 48px; }
.h--56 { height: 56px; }
.h--64 { height: 64px; }
.h--80 { height: 80px; }
.h--96 { height: 96px; }
.h--112 { height: 112px; }
.h--128 { height: 128px; }
.h--160 { height: 160px; }
.h--192 { height: 192px; }
.h--224 { height: 224px; }
.h--256 { height: 256px; }
.h--384 { height:384px; }
.h--500 { height:500px; }
.h--600 { height:600px; }


.min-w--0 { min-width: 0; }
.min-w--full { min-width: 100%; }
.min-w--min { min-width: min-content; }
.min-w--max { min-width: max-content; }
.min-w--fit { min-width: fit-content; }

.min-h--0 { min-height: 0; }
.min-h--full { min-height: 100%; }
.min-h--screen { min-height: 100vh; }

.max-w--none { max-width: none; }
.max-w--256 { max-width: 256px; }
.max-w--512 { max-width: 512px; }
.max-w--768 { max-width: 768px; }
.max-w--1024 { max-width: 1024px; }
.max-w--1280 { max-width: 1280px; }
.max-w--1536 { max-width: 1536px; }
.max-w--full { max-width: 100%; }

.max-h--none { max-height: none; }
.max-h--full { max-height: 100%; }
.max-h--screen { max-height: 100vh; }

/* ============================================
   17. BORDER WIDTH
   ============================================ */
.border--0 { border-width: 0; }
.border--1 { border-width: 1px; }
.border--2 { border-width: 2px; }
.border--7 { border-width: 7px; }

.border-t--0 { border-top-width: 0; }
.border-t--1 { border-top-width: 1px; }
.border-t--2 { border-top-width: 2px; }

.border-r--0 { border-right-width: 0; }
.border-r--1 { border-right-width: 1px; }
.border-r--2 { border-right-width: 2px; }

.border-b--0 { border-bottom-width: 0; }
.border-b--1 { border-bottom-width: 1px; }
.border-b--2 { border-bottom-width: 2px; }

.border-l--0 { border-left-width: 0; }
.border-l--1 { border-left-width: 1px; }
.border-l--2 { border-left-width: 2px; }

.border-x--0 { border-left-width: 0; border-right-width: 0; }
.border-x--1 { border-left-width: 1px; border-right-width: 1px; }
.border-x--2 { border-left-width: 2px; border-right-width: 2px; }

.border-y--0 { border-top-width: 0; border-bottom-width: 0; }
.border-y--1 { border-top-width: 1px; border-bottom-width: 1px; }
.border-y--2 { border-top-width: 2px; border-bottom-width: 2px; }

/* Border Style */
.border--solid { border-style: solid; }
.border--dashed { border-style: dashed; }
.border--dotted { border-style: dotted; }
.border--none { border-style: none; }

/* ============================================
   18. BORDER RADIUS
   ============================================ */
.rounded--0 { border-radius: 0; }
.rounded--4 { border-radius: 4px; }
.rounded--8 { border-radius: 8px; }
.rounded--12 { border-radius: 12px; }
.rounded--16 { border-radius: 16px; }
.rounded--20 { border-radius: 20px; }
.rounded--24 { border-radius: 24px; }
.rounded--32 { border-radius: 32px; }
.rounded--72 { border-radius: 72px; }
.rounded--full { border-radius: 9999px; }
.rounded--none { border-radius: 0; }

.rounded-t--0 { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-t--4 { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.rounded-t--8 { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.rounded-t--12 { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.rounded-t--16 { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.rounded-t--24 { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.rounded-t--32 { border-top-left-radius: 32px; border-top-right-radius: 32px; }

.rounded-r--0 { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rounded-r--4 { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.rounded-r--8 { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.rounded-r--12 { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.rounded-r--16 { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
.rounded-r--24 { border-top-right-radius: 24px; border-bottom-right-radius: 24px; }
.rounded-r--32 { border-top-right-radius: 32px; border-bottom-right-radius: 32px; }

.rounded-b--0 { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rounded-b--4 { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.rounded-b--8 { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.rounded-b--12 { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.rounded-b--16 { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.rounded-b--24 { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.rounded-b--32 { border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; }

.rounded-l--0 { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-l--4 { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.rounded-l--8 { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.rounded-l--12 { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.rounded-l--16 { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.rounded-l--24 { border-top-left-radius: 24px; border-bottom-left-radius: 24px; }
.rounded-l--32 { border-top-left-radius: 32px; border-bottom-left-radius: 32px; }

.rounded-tl--0 { border-top-left-radius: 0; }
.rounded-tl--4 { border-top-left-radius: 4px; }
.rounded-tl--8 { border-top-left-radius: 8px; }
.rounded-tl--12 { border-top-left-radius: 12px; }
.rounded-tl--16 { border-top-left-radius: 16px; }
.rounded-tl--24 { border-top-left-radius: 24px; }
.rounded-tl--32 { border-top-left-radius: 32px; }

.rounded-tr--0 { border-top-right-radius: 0; }
.rounded-tr--4 { border-top-right-radius: 4px; }
.rounded-tr--8 { border-top-right-radius: 8px; }
.rounded-tr--12 { border-top-right-radius: 12px; }
.rounded-tr--16 { border-top-right-radius: 16px; }
.rounded-tr--24 { border-top-right-radius: 24px; }
.rounded-tr--32 { border-top-right-radius: 32px; }

.rounded-br--0 { border-bottom-right-radius: 0; }
.rounded-br--4 { border-bottom-right-radius: 4px; }
.rounded-br--8 { border-bottom-right-radius: 8px; }
.rounded-br--12 { border-bottom-right-radius: 12px; }
.rounded-br--16 { border-bottom-right-radius: 16px; }
.rounded-br--24 { border-bottom-right-radius: 24px; }
.rounded-br--32 { border-bottom-right-radius: 32px; }

.rounded-bl--0 { border-bottom-left-radius: 0; }
.rounded-bl--4 { border-bottom-left-radius: 4px; }
.rounded-bl--8 { border-bottom-left-radius: 8px; }
.rounded-bl--12 { border-bottom-left-radius: 12px; }
.rounded-bl--16 { border-bottom-left-radius: 16px; }
.rounded-bl--24 { border-bottom-left-radius: 24px; }
.rounded-bl--32 { border-bottom-left-radius: 32px; }

/* ============================================
   19. OBJECT FIT & POSITION
   ============================================ */
.object--contain { object-fit: contain; }
.object--cover { object-fit: cover; }
.object--fill { object-fit: fill; }
.object--none { object-fit: none; }
.object--scale-down { object-fit: scale-down; }

.object--bottom { object-position: bottom; }
.object--center { object-position: center; }
.object--left { object-position: left; }
.object--left-bottom { object-position: left bottom; }
.object--left-top { object-position: left top; }
.object--right { object-position: right; }
.object--right-bottom { object-position: right bottom; }
.object--right-top { object-position: right top; }
.object--top { object-position: top; }

/* ============================================
   20. OVERFLOW
   ============================================ */
.overflow--auto { overflow: auto; }
.overflow--hidden { overflow: hidden; }
.overflow--visible { overflow: visible; }
.overflow--scroll { overflow: scroll; }

.overflow-x--auto { overflow-x: auto; }
.overflow-x--hidden { overflow-x: hidden; }
.overflow-x--visible { overflow-x: visible; }
.overflow-x--scroll { overflow-x: scroll; }

.overflow-y--auto { overflow-y: auto; }
.overflow-y--hidden { overflow-y: hidden; }
.overflow-y--visible { overflow-y: visible; }
.overflow-y--scroll { overflow-y: scroll; }

/* ============================================
   21. Z-INDEX
   ============================================ */
.z--0 { z-index: 0; }
.z--10 { z-index: 10; }
.z--20 { z-index: 20; }
.z--30 { z-index: 30; }
.z--40 { z-index: 40; }
.z--50 { z-index: 50; }
.z--100 { z-index: 100; }
.z--auto { z-index: auto; }

/* ============================================
   22. OPACITY
   ============================================ */
.opacity--0 { opacity: 0; }
.opacity--10 { opacity: 0.1; }
.opacity--20 { opacity: 0.2; }
.opacity--25 { opacity: 0.25; }
.opacity--30 { opacity: 0.3; }
.opacity--40 { opacity: 0.4; }
.opacity--50 { opacity: 0.5; }
.opacity--60 { opacity: 0.6; }
.opacity--70 { opacity: 0.7; }
.opacity--75 { opacity: 0.75; }
.opacity--80 { opacity: 0.8; }
.opacity--90 { opacity: 0.9; }
.opacity--100 { opacity: 1; }

/* ============================================
   23. CURSOR
   ============================================ */
.cursor--auto { cursor: auto; }
.cursor--default { cursor: default; }
.cursor--pointer { cursor: pointer; }
.cursor--wait { cursor: wait; }
.cursor--text { cursor: text; }
.cursor--move { cursor: move; }
.cursor--help { cursor: help; }
.cursor--not-allowed { cursor: not-allowed; }
.cursor--none { cursor: none; }
.cursor--grab { cursor: grab; }
.cursor--grabbing { cursor: grabbing; }

/* ============================================
   24. POINTER EVENTS
   ============================================ */
.pointer--none { pointer-events: none; }
.pointer--auto { pointer-events: auto; }

/* ============================================
   25. USER SELECT
   ============================================ */
.select--none { user-select: none; }
.select--text { user-select: text; }
.select--all { user-select: all; }
.select--auto { user-select: auto; }

/* ============================================
   26. COLORS - TEXT
   ============================================ */
.text--primary { color: var(--primary-color); }
.text--secondary { color: var(--secondary-color); }
.text--accent { color: var(--accent-color); }
.text--text { color: var(--text-color); }
.text--text-light { color: var(--text-light); }
.text--text-dark { color: var(--text-dark); }
.text--error { color: var(--error-color); }
.text--success { color: var(--success-color); }
.text--warning { color: var(--warning-color); }
.text--info { color: var(--info-color); }
.text--white { color: var(--white); }
.text--black { color: var(--black); }
.text--transparent { color: var(--transparent); }

/* ============================================
   27. COLORS - BACKGROUND
   ============================================ */
.bg--primary { background-color: var(--primary-color); }
.bg--secondary { background-color: var(--secondary-color); }
.bg--accent { background-color: var(--accent-color); }
.bg--background { background-color: var(--background-color); }
.bg--background-gray { background-color: var(--background-gray); }
.bg--error { background-color: var(--error-color); }
.bg--success { background-color: var(--success-color); }
.bg--warning { background-color: var(--warning-color); }
.bg--info { background-color: var(--info-color); }
.bg--white { background-color: var(--white); }
.bg--black { background-color: var(--black); }
.bg--transparent { background-color: var(--transparent); }

/* ============================================
   28. COLORS - BORDER
   ============================================ */
.border--primary { border-color: var(--primary-color); }
.border--secondary { border-color: var(--secondary-color); }
.border--accent { border-color: var(--accent-color); }
.border--border { border-color: var(--border-color); }
.border--error { border-color: var(--error-color); }
.border--success { border-color: var(--success-color); }
.border--warning { border-color: var(--warning-color); }
.border--info { border-color: var(--info-color); }
.border--white { border-color: var(--white); }
.border--black { border-color: var(--black); }
.border--transparent { border-color: var(--transparent); }

/* ============================================
   29. MOBILE RESPONSIVE VARIANTS
   @media (max-width: 818px)
   ============================================ */
@media (max-width: 1024px) {

  /* Mobile - Margin */
  .m--m--0 { margin: 0; }
  .m--m--4 { margin: 4px; }
  .m--m--8 { margin: 8px; }
  .m--m--12 { margin: 12px; }
  .m--m--16 { margin: 16px; }
  .m--m--20 { margin: 20px; }
  .m--m--24 { margin: 24px; }
  .m--m--32 { margin: 32px; }
  .m--m--40 { margin: 40px; }
  .m--m--48 { margin: 48px; }
  .m--m--56 { margin: 56px; }
  .m--m--64 { margin: 64px; }
  .m--m--80 { margin: 80px; }
  .m--m--96 { margin: 96px; }
  .m--m--auto { margin: auto; }

  .m--mt--0 { margin-top: 0; }
  .m--mt--4 { margin-top: 4px; }
  .m--mt--8 { margin-top: 8px; }
  .m--mt--12 { margin-top: 12px; }
  .m--mt--16 { margin-top: 16px; }
  .m--mt--20 { margin-top: 20px; }
  .m--mt--24 { margin-top: 24px; }
  .m--mt--32 { margin-top: 32px; }
  .m--mt--40 { margin-top: 40px; }
  .m--mt--48 { margin-top: 48px; }
  .m--mt--56 { margin-top: 56px; }
  .m--mt--64 { margin-top: 64px; }
  .m--mt--80 { margin-top: 80px; }
  .m--mt--96 { margin-top: 96px; }

  .m--mr--0 { margin-right: 0; }
  .m--mr--4 { margin-right: 4px; }
  .m--mr--8 { margin-right: 8px; }
  .m--mr--12 { margin-right: 12px; }
  .m--mr--16 { margin-right: 16px; }
  .m--mr--20 { margin-right: 20px; }
  .m--mr--24 { margin-right: 24px; }
  .m--mr--32 { margin-right: 32px; }
  .m--mr--40 { margin-right: 40px; }
  .m--mr--48 { margin-right: 48px; }
  .m--mr--56 { margin-right: 56px; }
  .m--mr--64 { margin-right: 64px; }
  .m--mr--80 { margin-right: 80px; }
  .m--mr--96 { margin-right: 96px; }

  .m--mb--0 { margin-bottom: 0; }
  .m--mb--4 { margin-bottom: 4px; }
  .m--mb--8 { margin-bottom: 8px; }
  .m--mb--12 { margin-bottom: 12px; }
  .m--mb--16 { margin-bottom: 16px; }
  .m--mb--20 { margin-bottom: 20px; }
  .m--mb--24 { margin-bottom: 24px; }
  .m--mb--32 { margin-bottom: 32px; }
  .m--mb--40 { margin-bottom: 40px; }
  .m--mb--48 { margin-bottom: 48px; }
  .m--mb--56 { margin-bottom: 56px; }
  .m--mb--64 { margin-bottom: 64px; }
  .m--mb--80 { margin-bottom: 80px; }
  .m--mb--96 { margin-bottom: 96px; }

  .m--ml--0 { margin-left: 0; }
  .m--ml--4 { margin-left: 4px; }
  .m--ml--8 { margin-left: 8px; }
  .m--ml--12 { margin-left: 12px; }
  .m--ml--16 { margin-left: 16px; }
  .m--ml--20 { margin-left: 20px; }
  .m--ml--24 { margin-left: 24px; }
  .m--ml--32 { margin-left: 32px; }
  .m--ml--40 { margin-left: 40px; }
  .m--ml--48 { margin-left: 48px; }
  .m--ml--56 { margin-left: 56px; }
  .m--ml--64 { margin-left: 64px; }
  .m--ml--80 { margin-left: 80px; }
  .m--ml--96 { margin-left: 96px; }

  .m--mx--0 { margin-left: 0; margin-right: 0; }
  .m--mx--4 { margin-left: 4px; margin-right: 4px; }
  .m--mx--8 { margin-left: 8px; margin-right: 8px; }
  .m--mx--12 { margin-left: 12px; margin-right: 12px; }
  .m--mx--16 { margin-left: 16px; margin-right: 16px; }
  .m--mx--20 { margin-left: 20px; margin-right: 20px; }
  .m--mx--24 { margin-left: 24px; margin-right: 24px; }
  .m--mx--32 { margin-left: 32px; margin-right: 32px; }
  .m--mx--auto { margin-left: auto; margin-right: auto; }

  .m--my--0 { margin-top: 0; margin-bottom: 0; }
  .m--my--4 { margin-top: 4px; margin-bottom: 4px; }
  .m--my--8 { margin-top: 8px; margin-bottom: 8px; }
  .m--my--12 { margin-top: 12px; margin-bottom: 12px; }
  .m--my--16 { margin-top: 16px; margin-bottom: 16px; }
  .m--my--20 { margin-top: 20px; margin-bottom: 20px; }
  .m--my--24 { margin-top: 24px; margin-bottom: 24px; }
  .m--my--32 { margin-top: 32px; margin-bottom: 32px; }

  /* Mobile - Padding */
  .m--p--0 { padding: 0; }
  .m--p--4 { padding: 4px; }
  .m--p--8 { padding: 8px; }
  .m--p--12 { padding: 12px; }
  .m--p--16 { padding: 16px; }
  .m--p--20 { padding: 20px; }
  .m--p--24 { padding: 24px; }
  .m--p--32 { padding: 32px; }
  .m--p--40 { padding: 40px; }
  .m--p--48 { padding: 48px; }
  .m--p--56 { padding: 56px; }
  .m--p--64 { padding: 64px; }

  .m--pt--0 { padding-top: 0; }
  .m--pt--4 { padding-top: 4px; }
  .m--pt--8 { padding-top: 8px; }
  .m--pt--12 { padding-top: 12px; }
  .m--pt--16 { padding-top: 16px; }
  .m--pt--20 { padding-top: 20px; }
  .m--pt--24 { padding-top: 24px; }
  .m--pt--32 { padding-top: 32px; }
  .m--pt--40 { padding-top: 40px; }
  .m--pt--48 { padding-top: 48px; }
  .m--pt--56 { padding-top: 56px; }
  .m--pt--64 { padding-top: 64px !important; }

  .m--pr--0 { padding-right: 0; }
  .m--pr--4 { padding-right: 4px; }
  .m--pr--8 { padding-right: 8px; }
  .m--pr--12 { padding-right: 12px; }
  .m--pr--16 { padding-right: 16px; }
  .m--pr--20 { padding-right: 20px; }
  .m--pr--24 { padding-right: 24px; }
  .m--pr--32 { padding-right: 32px; }
  .m--pr--40 { padding-right: 40px; }
  .m--pr--48 { padding-right: 48px; }
  .m--pr--56 { padding-right: 56px; }
  .m--pr--64 { padding-right: 64px; }

  .m--pb--0 { padding-bottom: 0; }
  .m--pb--4 { padding-bottom: 4px; }
  .m--pb--8 { padding-bottom: 8px; }
  .m--pb--12 { padding-bottom: 12px; }
  .m--pb--16 { padding-bottom: 16px; }
  .m--pb--20 { padding-bottom: 20px; }
  .m--pb--24 { padding-bottom: 24px; }
  .m--pb--32 { padding-bottom: 32px; }
  .m--pb--40 { padding-bottom: 40px; }
  .m--pb--48 { padding-bottom: 48px; }
  .m--pb--56 { padding-bottom: 56px; }
  .m--pb--64 { padding-bottom: 64px; }

  .m--pl--0 { padding-left: 0; }
  .m--pl--4 { padding-left: 4px; }
  .m--pl--8 { padding-left: 8px; }
  .m--pl--12 { padding-left: 12px; }
  .m--pl--16 { padding-left: 16px; }
  .m--pl--20 { padding-left: 20px; }
  .m--pl--24 { padding-left: 24px; }
  .m--pl--32 { padding-left: 32px; }
  .m--pl--40 { padding-left: 40px; }
  .m--pl--48 { padding-left: 48px; }
  .m--pl--56 { padding-left: 56px; }
  .m--pl--64 { padding-left: 64px; }

  .m--px--0 { padding-left: 0; padding-right: 0; }
  .m--px--4 { padding-left: 4px; padding-right: 4px; }
  .m--px--8 { padding-left: 8px; padding-right: 8px; }
  .m--px--12 { padding-left: 12px; padding-right: 12px; }
  .m--px--16 { padding-left: 16px; padding-right: 16px; }
  .m--px--20 { padding-left: 20px; padding-right: 20px; }
  .m--px--24 { padding-left: 24px; padding-right: 24px; }
  .m--px--32 { padding-left: 32px; padding-right: 32px; }

  .m--py--0 { padding-top: 0; padding-bottom: 0; }
  .m--py--4 { padding-top: 4px; padding-bottom: 4px; }
  .m--py--8 { padding-top: 8px; padding-bottom: 8px; }
  .m--py--12 { padding-top: 12px; padding-bottom: 12px; }
  .m--py--16 { padding-top: 16px; padding-bottom: 16px; }
  .m--py--20 { padding-top: 20px; padding-bottom: 20px; }
  .m--py--24 { padding-top: 24px; padding-bottom: 24px; }
  .m--py--32 { padding-top: 32px; padding-bottom: 32px; }
  .m--py--64 { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* Mobile - Gap */
  .m--gap--0 { gap: 0; }
  .m--gap--4 { gap: 4px; }
  .m--gap--8 { gap: 8px; }
  .m--gap--12 { gap: 12px; }
  .m--gap--16 { gap: 16px; }
  .m--gap--20 { gap: 20px; }
  .m--gap--24 { gap: 24px; }
  .m--gap--32 { gap: 32px; }
  .m--gap--40 { gap: 40px; }
  .m--gap--48 { gap: 48px; }

  /* Mobile - Typography */
  .m--text--10 { font-size: 10px; }
  .m--text--12 { font-size: 12px; }
  .m--text--14 { font-size: 14px; }
  .m--text--16 { font-size: 16px; }
  .m--text--18 { font-size: 18px; }
  .m--text--20 { font-size: 20px; }
  .m--text--24 { font-size: 24px; }
  .m--text--28 { font-size: 28px; }
  .m--text--32 { font-size: 32px; }
  .m--text--36 { font-size: 36px; }
  .m--text--40 { font-size: 40px; }
  .m--text--48 { font-size: 48px; }

  .m--text--left { text-align: left !important; }
  .m--text--center { text-align: center; }
  .m--text--right { text-align: right; }
  .m--text--justify { text-align: justify; }

  /* Mobile - Display */
  .m--block { display: block; }
  .m--inline--block { display: inline-block; }
  .m--inline { display: inline; }
  .m--flex { display: flex; }
  .m--inline--flex { display: inline-flex; }
  .m--hidden { display: none !important; }

  /* Mobile - Flexbox */
  .m--flex--row { flex-direction: row; }
  .m--flex--row-reverse { flex-direction: row-reverse; }
  .m--flex--col { flex-direction: column; }
  .m--flex--col-reverse { flex-direction: column-reverse; }

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

  .m--justify--start { justify-content: flex-start; }
  .m--justify--end { justify-content: flex-end; }
  .m--justify--center { justify-content: center; }
  .m--justify--between { justify-content: space-between; }
  .m--justify--around { justify-content: space-around; }
  .m--justify--evenly { justify-content: space-evenly; }

  .m--items--start { align-items: flex-start; }
  .m--items--end { align-items: flex-end; }
  .m--items--center { align-items: center; }
  .m--items--baseline { align-items: baseline; }
  .m--items--stretch { align-items: stretch; }

  .m--flex--50{flex:1 0 47% !important;}
  .m--flex--100{flex:100% !important;}


  /* Mobile - Width & Height */
  .m--w--auto { width: auto; }
  .m--w--full { width: 100%; }
  .m--w--screen { width: 100vw; }
  .m--w--32 { width: 32px; }
  .m--w--48 { width: 48px; }
  .m--w--64 { width: 64px; }
  .m--w--96 { width: 96px; }
  .m--w--128 { width: 128px; }

  .m--h--auto { height: auto; }
  .m--h--full { height: 100%; }
  .m--h--screen { height: 100vh; }
  .m--h--40vh{ height:40vh; }
  .m--h--32 { height: 32px; }
  .m--h--48 { height: 48px; }
  .m--h--64 { height: 64px; }
  .m--h--96 { height: 96px; }
  .m--h--128 { height: 128px; }

  /* Mobile - Border Radius */
  .m--rounded--0 { border-radius: 0; }
  .m--rounded--4 { border-radius: 4px; }
  .m--rounded--8 { border-radius: 8px; }
  .m--rounded--12 { border-radius: 12px; }
  .m--rounded--16 { border-radius: 16px; }
  .m--rounded--24 { border-radius: 24px; }
  .m--rounded--full { border-radius: 9999px; }
}


.hover--bg--secondary:hover{
background-color:var(--color-secondary);
}
.hover--text--white:hover{
   color:#FFF;
}

.hover--bg--primary--light:hover{
   background-color:#D6BEA8;
}