/* Spacing scale (0–5 like Bootstrap) */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 3rem;     /* 48px */
}

/* Margin Utilities */
.m-0 { margin: var(--space-0) !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }

.mt-0 { margin-top: var(--space-0) !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }

.mb-0 { margin-bottom: var(--space-0) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }

.ms-0, .ml-0 { margin-left: var(--space-0) !important; }
.ms-1, .ml-1 { margin-left: var(--space-1) !important; }
.ms-2, .ml-2 { margin-left: var(--space-2) !important; }
.ms-3, .ml-3 { margin-left: var(--space-3) !important; }
.ms-4, .ml-4 { margin-left: var(--space-4) !important; }
.ms-5, .ml-5 { margin-left: var(--space-5) !important; }

.me-0, .mr-0 { margin-right: var(--space-0) !important; }
.me-1, .mr-1 { margin-right: var(--space-1) !important; }
.me-2, .mr-2 { margin-right: var(--space-2) !important; }
.me-3, .mr-3 { margin-right: var(--space-3) !important; }
.me-4, .mr-4 { margin-right: var(--space-4) !important; }
.me-5, .mr-5 { margin-right: var(--space-5) !important; }

.mx-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }

.my-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }

/* Padding Utilities */
.p-0 { padding: var(--space-0) !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }

.pt-0 { padding-top: var(--space-0) !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }

.pb-0 { padding-bottom: var(--space-0) !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }

.ps-0, .pl-0 { padding-left: var(--space-0) !important; }
.ps-1, .pl-1 { padding-left: var(--space-1) !important; }
.ps-2, .pl-2 { padding-left: var(--space-2) !important; }
.ps-3, .pl-3 { padding-left: var(--space-3) !important; }
.ps-4, .pl-4 { padding-left: var(--space-4) !important; }
.ps-5, .pl-5 { padding-left: var(--space-5) !important; }

.pe-0, .pr-0 { padding-right: var(--space-0) !important; }
.pe-1, .pr-1 { padding-right: var(--space-1) !important; }
.pe-2, .pr-2 { padding-right: var(--space-2) !important; }
.pe-3, .pr-3 { padding-right: var(--space-3) !important; }
.pe-4, .pr-4 { padding-right: var(--space-4) !important; }
.pe-5, .pr-5 { padding-right: var(--space-5) !important; }

.px-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }

.py-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }

/* Font Utilities */
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }
.fs-19 { font-size: 19px !important; }
.fs-20 { font-size: 20px !important; }
.fs-21 { font-size: 21px !important; }
.fs-22 { font-size: 22px !important; }
.fs-23 { font-size: 23px !important; }
.fs-24 { font-size: 24px !important; }
.fs-25 { font-size: 25px !important; }
.fs-26 { font-size: 26px !important; }
.fs-27 { font-size: 27px !important; }
.fs-28 { font-size: 28px !important; }
.fs-29 { font-size: 29px !important; }
.fs-30 { font-size: 30px !important; }
.fs-31 { font-size: 31px !important; }
.fs-32 { font-size: 32px !important; }
.fs-33 { font-size: 33px !important; }
.fs-34 { font-size: 34px !important; }
.fs-35 { font-size: 35px !important; }
.fs-36 { font-size: 36px !important; }
.fs-37 { font-size: 37px !important; }
.fs-38 { font-size: 38px !important; }
.fs-39 { font-size: 39px !important; }
.fs-40 { font-size: 40px !important; }
.fs-41 { font-size: 41px !important; }
.fs-42 { font-size: 42px !important; }

/* Row Utilites */
.row {
  display: flex;
  flex-wrap: wrap;
}
.g-0  > * { padding-left: 0; padding-right: 0; }
.g-1  > * { padding-left: 0.25rem; padding-right: 0.25rem; }
.g-2  > * { padding-left: 0.5rem;  padding-right: 0.5rem; }
.g-3  > * { padding-left: 1rem;    padding-right: 1rem; }
.g-4  > * { padding-left: 1.5rem;  padding-right: 1.5rem; }
.g-5  > * { padding-left: 3rem;    padding-right: 3rem; }

/* Columnm Utilities */
[class^="col-"],
[class*=" col-"] {
  position: relative;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.col-1  { flex: 0 0 8.333%;   max-width: 8.333%; }
.col-2  { flex: 0 0 16.666%;  max-width: 16.666%; }
.col-3  { flex: 0 0 25%;      max-width: 25%; }
.col-4  { flex: 0 0 33.333%;  max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%;  max-width: 41.666%; }
.col-6  { flex: 0 0 50%;      max-width: 50%; }
.col-7  { flex: 0 0 58.333%;  max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%;  max-width: 66.666%; }
.col-9  { flex: 0 0 75%;      max-width: 75%; }
.col-10 { flex: 0 0 83.333%;  max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%;  max-width: 91.666%; }
.col-12 { flex: 0 0 100%;     max-width: 100%; }


@media (min-width: 576px) {
  .col-sm-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-sm-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-sm-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-sm-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-sm-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-sm-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-sm-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-sm-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-sm-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-sm-12 { flex: 0 0 100%;    max-width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-md-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-md-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-md-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-md-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-md-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-md-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-md-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-md-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-md-12 { flex: 0 0 100%;    max-width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-lg-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-lg-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-lg-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-lg-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-lg-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-lg-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-lg-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-lg-12 { flex: 0 0 100%;    max-width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-xl-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-xl-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-xl-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-xl-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-xl-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-xl-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-xl-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-xl-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-xl-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-xl-12 { flex: 0 0 100%;    max-width: 100%; }
}

@media (min-width: 1400px) {
  .col-xxl-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-xxl-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-xxl-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-xxl-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-xxl-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-xxl-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-xxl-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-xxl-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-xxl-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-xxl-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-xxl-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-xxl-12 { flex: 0 0 100%;    max-width: 100%; }
}

/* Base (mobile first) */
.offset-1  { margin-left: 8.3333%; }
.offset-2  { margin-left: 16.6667%; }
.offset-3  { margin-left: 25%; }
.offset-4  { margin-left: 33.3333%; }
.offset-5  { margin-left: 41.6667%; }
.offset-6  { margin-left: 50%; }
.offset-7  { margin-left: 58.3333%; }
.offset-8  { margin-left: 66.6667%; }
.offset-9  { margin-left: 75%; }
.offset-10 { margin-left: 83.3333%; }
.offset-11 { margin-left: 91.6667%; }

/* SM ≥ 576px */
@media (min-width: 576px) {
  .offset-sm-1  { margin-left: 8.3333%; }
  .offset-sm-2  { margin-left: 16.6667%; }
  .offset-sm-3  { margin-left: 25%; }
  .offset-sm-4  { margin-left: 33.3333%; }
  .offset-sm-5  { margin-left: 41.6667%; }
  .offset-sm-6  { margin-left: 50%; }
  .offset-sm-7  { margin-left: 58.3333%; }
  .offset-sm-8  { margin-left: 66.6667%; }
  .offset-sm-9  { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.3333%; }
  .offset-sm-11 { margin-left: 91.6667%; }
}

/* MD ≥ 768px */
@media (min-width: 768px) {
  .offset-md-1  { margin-left: 8.3333%; }
  .offset-md-2  { margin-left: 16.6667%; }
  .offset-md-3  { margin-left: 25%; }
  .offset-md-4  { margin-left: 33.3333%; }
  .offset-md-5  { margin-left: 41.6667%; }
  .offset-md-6  { margin-left: 50%; }
  .offset-md-7  { margin-left: 58.3333%; }
  .offset-md-8  { margin-left: 66.6667%; }
  .offset-md-9  { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.3333%; }
  .offset-md-11 { margin-left: 91.6667%; }
}

/* LG ≥ 992px */
@media (min-width: 992px) {
  .offset-lg-1  { margin-left: 8.3333%; }
  .offset-lg-2  { margin-left: 16.6667%; }
  .offset-lg-3  { margin-left: 25%; }
  .offset-lg-4  { margin-left: 33.3333%; }
  .offset-lg-5  { margin-left: 41.6667%; }
  .offset-lg-6  { margin-left: 50%; }
  .offset-lg-7  { margin-left: 58.3333%; }
  .offset-lg-8  { margin-left: 66.6667%; }
  .offset-lg-9  { margin-left: 75%; }
  .offset-lg-10 { margin-left: 83.3333%; }
  .offset-lg-11 { margin-left: 91.6667%; }
}

/* XL ≥ 1200px */
@media (min-width: 1200px) {
  .offset-xl-1  { margin-left: 8.3333%; }
  .offset-xl-2  { margin-left: 16.6667%; }
  .offset-xl-3  { margin-left: 25%; }
  .offset-xl-4  { margin-left: 33.3333%; }
  .offset-xl-5  { margin-left: 41.6667%; }
  .offset-xl-6  { margin-left: 50%; }
  .offset-xl-7  { margin-left: 58.3333%; }
  .offset-xl-8  { margin-left: 66.6667%; }
  .offset-xl-9  { margin-left: 75%; }
  .offset-xl-10 { margin-left: 83.3333%; }
  .offset-xl-11 { margin-left: 91.6667%; }
}

/* XXL ≥ 1400px */
@media (min-width: 1400px) {
  .offset-xxl-1  { margin-left: 8.3333%; }
  .offset-xxl-2  { margin-left: 16.6667%; }
  .offset-xxl-3  { margin-left: 25%; }
  .offset-xxl-4  { margin-left: 33.3333%; }
  .offset-xxl-5  { margin-left: 41.6667%; }
  .offset-xxl-6  { margin-left: 50%; }
  .offset-xxl-7  { margin-left: 58.3333%; }
  .offset-xxl-8  { margin-left: 66.6667%; }
  .offset-xxl-9  { margin-left: 75%; }
  .offset-xxl-10 { margin-left: 83.3333%; }
  .offset-xxl-11 { margin-left: 91.6667%; }
}


/* Order Utilties */
/* Base (mobile first) */
.order-0      { order: 0; }
.order-1      { order: 1; }
.order-2      { order: 2; }
.order-3      { order: 3; }
.order-4      { order: 4; }
.order-5      { order: 5; }
.order-6      { order: 6; }
.order-first  { order: -1; }
.order-last   { order: 9999; }

/* SM ≥ 576px */
@media (min-width: 576px) {
  .order-sm-0      { order: 0; }
  .order-sm-1      { order: 1; }
  .order-sm-2      { order: 2; }
  .order-sm-3      { order: 3; }
  .order-sm-4      { order: 4; }
  .order-sm-5      { order: 5; }
  .order-sm-6      { order: 6; }
  .order-sm-first  { order: -1; }
  .order-sm-last   { order: 9999; }
}

/* MD ≥ 768px */
@media (min-width: 768px) {
  .order-md-0      { order: 0; }
  .order-md-1      { order: 1; }
  .order-md-2      { order: 2; }
  .order-md-3      { order: 3; }
  .order-md-4      { order: 4; }
  .order-md-5      { order: 5; }
  .order-md-6      { order: 6; }
  .order-md-first  { order: -1; }
  .order-md-last   { order: 9999; }
}

/* LG ≥ 992px */
@media (min-width: 992px) {
  .order-lg-0      { order: 0; }
  .order-lg-1      { order: 1; }
  .order-lg-2      { order: 2; }
  .order-lg-3      { order: 3; }
  .order-lg-4      { order: 4; }
  .order-lg-5      { order: 5; }
  .order-lg-6      { order: 6; }
  .order-lg-first  { order: -1; }
  .order-lg-last   { order: 9999; }
}

/* XL ≥ 1200px */
@media (min-width: 1200px) {
  .order-xl-0      { order: 0; }
  .order-xl-1      { order: 1; }
  .order-xl-2      { order: 2; }
  .order-xl-3      { order: 3; }
  .order-xl-4      { order: 4; }
  .order-xl-5      { order: 5; }
  .order-xl-6      { order: 6; }
  .order-xl-first  { order: -1; }
  .order-xl-last   { order: 9999; }
}

/* XXL ≥ 1400px */
@media (min-width: 1400px) {
  .order-xxl-0      { order: 0; }
  .order-xxl-1      { order: 1; }
  .order-xxl-2      { order: 2; }
  .order-xxl-3      { order: 3; }
  .order-xxl-4      { order: 4; }
  .order-xxl-5      { order: 5; }
  .order-xxl-6      { order: 6; }
  .order-xxl-first  { order: -1; }
  .order-xxl-last   { order: 9999; }
}


/* Dsiplay Utilties */
/* Base */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-grid         { display: grid !important; }

/* SM ≥ 576px */
@media (min-width: 576px) {
  .d-sm-none         { display: none !important; }
  .d-sm-block        { display: block !important; }
  .d-sm-inline       { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-flex         { display: flex !important; }
  .d-sm-inline-flex  { display: inline-flex !important; }
  .d-sm-grid         { display: grid !important; }
}

/* MD ≥ 768px */
@media (min-width: 768px) {
  .d-md-none         { display: none !important; }
  .d-md-block        { display: block !important; }
  .d-md-inline       { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-flex         { display: flex !important; }
  .d-md-inline-flex  { display: inline-flex !important; }
  .d-md-grid         { display: grid !important; }
}

/* LG ≥ 992px */
@media (min-width: 992px) {
  .d-lg-none         { display: none !important; }
  .d-lg-block        { display: block !important; }
  .d-lg-inline       { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-flex         { display: flex !important; }
  .d-lg-inline-flex  { display: inline-flex !important; }
  .d-lg-grid         { display: grid !important; }
}

/* XL ≥ 1200px */
@media (min-width: 1200px) {
  .d-xl-none         { display: none !important; }
  .d-xl-block        { display: block !important; }
  .d-xl-inline       { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-flex         { display: flex !important; }
  .d-xl-inline-flex  { display: inline-flex !important; }
  .d-xl-grid         { display: grid !important; }
}

/* XXL ≥ 1400px */
@media (min-width: 1400px) {
  .d-xxl-none         { display: none !important; }
  .d-xxl-block        { display: block !important; }
  .d-xxl-inline       { display: inline !important; }
  .d-xxl-inline-block { display: inline-block !important; }
  .d-xxl-flex         { display: flex !important; }
  .d-xxl-inline-flex  { display: inline-flex !important; }
  .d-xxl-grid         { display: grid !important; }
}

/* Card Utilities */
/* Core card styles */
.card {
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

/* Card header */
.card-header {
  padding: 1rem 1.25rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  font-weight: 600;
  font-size: 1.1rem;
}

/* Card body */
.card-body {
  padding: 1.25rem;
  font-size: 0.95rem;
  color: #333;
  flex: 1 1 auto;
}

/* Card footer */
.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  text-align: right;
}

/* Card image (top) */
.card-img-top {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid #dee2e6;
}

/* Card image (bottom) */
.card-img-bottom {
  width: 100%;
  height: auto;
  display: block;
  border-top: 1px solid #dee2e6;
}

/* Card title & subtitle */
.card-title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: bold;
}

.card-subtitle {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #6c757d;
}

/* Card text */
.card-text {
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Card group (deck) */
.card-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card-group .card {
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 250px;
}


/* Color Utilties */
.bg-white{
  background: var(--bg-color) !important;
}

.bg-dark{
  background: var(--dark-bg) !important;
}

.bg-dark-2{
  background: var(--dark-bg-2) !important;
}

.text-white{
  color: #fff !important;
}

.bg-white-subtle{
  background: #e8e5e5 !important;
}

.bg-primary{
  background: var(--primary-color) !important;
}

.bg-primary-light{
  background: var(--primary-color-light) !important;
}

.bg-secondary{
  background: var(--secondary-color) !important;
}

.bg-secondary-light{
  background: var(--secondary-color-light) !important;
}

/* Card in dark mode */
.dark-mode .card {
  background-color: #1e1e1e;
  border-color: #333;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
}

.dark-mode .card-header,
.dark-mode .card-footer {
  background-color: #2c2c2c;
  border-color: #444;
  color: #e0e0e0;
}

.dark-mode .card-body {
  color: #e0e0e0;
}

.dark-mode .card-subtitle {
  color: #bbb;
}

.dark-mode .btn {
  background-color: var(--primary-color);
  color: #fff;
  transition: var(--transition-fast);
}

.dark-mode .btn:hover {
  background-color: var(--primary-color-light);
}

/* Display Utilities */
.d-none        { display: none !important; }
.d-inline      { display: inline !important; }
.d-inline-block{ display: inline-block !important; }
.d-block       { display: block !important; }
.d-flex        { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid        { display: grid !important; }
.d-inline-grid { display: inline-grid !important; }
.d-table       { display: table !important; }
.d-table-cell  { display: table-cell !important; }
.d-table-row   { display: table-row !important; }
.d-contents    { display: contents !important; }
.d-list-item   { display: list-item !important; }

.flex-row         { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column      { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

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

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

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

.content-start    { align-content: flex-start !important; }
.content-end      { align-content: flex-end !important; }
.content-center   { align-content: center !important; }
.content-between  { align-content: space-between !important; }
.content-around   { align-content: space-around !important; }
.content-stretch  { align-content: stretch !important; }

.self-auto     { align-self: auto !important; }
.self-start    { align-self: flex-start !important; }
.self-end      { align-self: flex-end !important; }
.self-center   { align-self: center !important; }
.self-baseline { align-self: baseline !important; }
.self-stretch  { align-self: stretch !important; }

.gap-0  { gap: 0 !important; }
.gap-1  { gap: 0.25rem !important; }
.gap-2  { gap: 0.5rem !important; }
.gap-3  { gap: 1rem !important; }
.gap-4  { gap: 1.5rem !important; }
.gap-5  { gap: 3rem !important; }


@media (min-width: 576px) {
  .d-sm-none        { display: none !important; }
  .d-sm-block       { display: block !important; }
  .d-sm-inline      { display: inline !important; }
  .d-sm-inline-block{ display: inline-block !important; }
  .d-sm-flex        { display: flex !important; }
}

@media (min-width: 768px) {
  .d-md-none        { display: none !important; }
  .d-md-block       { display: block !important; }
  .d-md-inline      { display: inline !important; }
  .d-md-inline-block{ display: inline-block !important; }
  .d-md-flex        { display: flex !important; }
}

@media (min-width: 992px) {
  .d-lg-none        { display: none !important; }
  .d-lg-block       { display: block !important; }
  .d-lg-inline      { display: inline !important; }
  .d-lg-inline-block{ display: inline-block !important; }
  .d-lg-flex        { display: flex !important; }
}

@media (min-width: 1200px) {
  .d-xl-none        { display: none !important; }
  .d-xl-block       { display: block !important; }
  .d-xl-inline      { display: inline !important; }
  .d-xl-inline-block{ display: inline-block !important; }
  .d-xl-flex        { display: flex !important; }
}

/* Container Utilities */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container-full {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 576px) {
  .container,
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Breakpoints (customize as needed) */
@media (min-width: 576px) {
  .container-sm {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl {
    max-width: 1320px;
  }
}

/* Fixed-width containers (non-fluid) */
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* Fluid container (always 100%) */
.container-fluid {
  width: 100% !important;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* Line Height Utilties */
.lh-0       { line-height: 0; }
.lh-1       { line-height: 1; }
.lh-1-1     { line-height: 1.1; }
.lh-1-25    { line-height: 1.25; }
.lh-1-3     { line-height: 1.3; }
.lh-1-5     { line-height: 1.5; }
.lh-1-75    { line-height: 1.75; }
.lh-2       { line-height: 2; }
.lh-2-5     { line-height: 2.5; }
.lh-3       { line-height: 3; }

/* Text Utilities */
.text-start     { text-align: left !important; }
.text-center    { text-align: center !important; }
.text-end       { text-align: right !important; }

@media (min-width: 576px) {
  .text-sm-start   { text-align: left !important; }
  .text-sm-center  { text-align: center !important; }
  .text-sm-end     { text-align: right !important; }
}
@media (min-width: 768px) {
  .text-md-start   { text-align: left !important; }
  .text-md-center  { text-align: center !important; }
  .text-md-end     { text-align: right !important; }
}
@media (min-width: 992px) {
  .text-lg-start   { text-align: left !important; }
  .text-lg-center  { text-align: center !important; }
  .text-lg-end     { text-align: right !important; }
}
@media (min-width: 1200px) {
  .text-xl-start   { text-align: left !important; }
  .text-xl-center  { text-align: center !important; }
  .text-xl-end     { text-align: right !important; }
}

.text-lowercase   { text-transform: lowercase !important; }
.text-uppercase   { text-transform: uppercase !important; }
.text-capitalize  { text-transform: capitalize !important; }

.text-decoration-none   { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

.text-wrap     { white-space: normal !important; }
.text-nowrap   { white-space: nowrap !important; }
.text-break    { word-break: break-word !important; }

.fw-light     { font-weight: 300 !important; }
.fw-normal    { font-weight: 400 !important; }
.fw-medium    { font-weight: 500 !important; }
.fw-semibold  { font-weight: 600 !important; }
.fw-bold      { font-weight: 700 !important; }
.fw-bolder    { font-weight: 900 !important; }

.fst-italic   { font-style: italic !important; }
.fst-normal   { font-style: normal !important; }

.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.lh-1     { line-height: 1 !important; }
.lh-sm    { line-height: 1.25 !important; }
.lh-base  { line-height: 1.5 !important; }
.lh-lg    { line-height: 2 !important; }

.fs-1  { font-size: 3rem !important; }     /* Display size */
.fs-2  { font-size: 2.5rem !important; }
.fs-3  { font-size: 2rem !important; }
.fs-4  { font-size: 1.5rem !important; }
.fs-5  { font-size: 1.25rem !important; }
.fs-6  { font-size: 1rem !important; }     /* Base text */
.fs-7  { font-size: 0.875rem !important; } /* Small text */
.fs-8  { font-size: 0.75rem !important; }  /* Extra small */

/* Small screens (≥576px) */
@media (min-width: 576px) {
  .fs-sm-1 { font-size: 3rem !important; }
  .fs-sm-2 { font-size: 2.5rem !important; }
  .fs-sm-3 { font-size: 2rem !important; }
  .fs-sm-4 { font-size: 1.5rem !important; }
  .fs-sm-5 { font-size: 1.25rem !important; }
  .fs-sm-6 { font-size: 1rem !important; }
  .fs-sm-7 { font-size: 0.875rem !important; }
  .fs-sm-8 { font-size: 0.75rem !important; }
}

/* Medium screens (≥768px) */
@media (min-width: 768px) {
  .fs-md-1 { font-size: 3rem !important; }
  .fs-md-2 { font-size: 2.5rem !important; }
  .fs-md-3 { font-size: 2rem !important; }
  .fs-md-4 { font-size: 1.5rem !important; }
  .fs-md-5 { font-size: 1.25rem !important; }
  .fs-md-6 { font-size: 1rem !important; }
  .fs-md-7 { font-size: 0.875rem !important; }
  .fs-md-8 { font-size: 0.75rem !important; }
}

/* Large screens (≥992px) */
@media (min-width: 992px) {
  .fs-lg-1 { font-size: 3rem !important; }
  .fs-lg-2 { font-size: 2.5rem !important; }
  .fs-lg-3 { font-size: 2rem !important; }
  .fs-lg-4 { font-size: 1.5rem !important; }
  .fs-lg-5 { font-size: 1.25rem !important; }
  .fs-lg-6 { font-size: 1rem !important; }
  .fs-lg-7 { font-size: 0.875rem !important; }
  .fs-lg-8 { font-size: 0.75rem !important; }
}

/* Extra large screens (≥1200px) */
@media (min-width: 1200px) {
  .fs-xl-1 { font-size: 3rem !important; }
  .fs-xl-2 { font-size: 2.5rem !important; }
  .fs-xl-3 { font-size: 2rem !important; }
  .fs-xl-4 { font-size: 1.5rem !important; }
  .fs-xl-5 { font-size: 1.25rem !important; }
  .fs-xl-6 { font-size: 1rem !important; }
  .fs-xl-7 { font-size: 0.875rem !important; }
  .fs-xl-8 { font-size: 0.75rem !important; }
}

/* Height Utilities */
.vh-10  { height: 10vh !important; }
.vh-20  { height: 20vh !important; }
.vh-30  { height: 30vh !important; }
.vh-40  { height: 40vh !important; }
.vh-50  { height: 50vh !important; }
.vh-60  { height: 60vh !important; }
.vh-70  { height: 70vh !important; }
.vh-80  { height: 80vh !important; }
.vh-90  { height: 90vh !important; }
.vh-100 { height: 100vh !important; }
.vh-120 { height: 120vh !important; }
.vh-150 { height: 150vh !important; }

.min-vh-10  { min-height: 10vh !important; }
.min-vh-20  { min-height: 20vh !important; }
.min-vh-30  { min-height: 30vh !important; }
.min-vh-40  { min-height: 40vh !important; }
.min-vh-50  { min-height: 50vh !important; }
.min-vh-60  { min-height: 60vh !important; }
.min-vh-70  { min-height: 70vh !important; }
.min-vh-80  { min-height: 80vh !important; }
.min-vh-90  { min-height: 90vh !important; }
.min-vh-100 { min-height: 100vh !important; }
.min-vh-120 { min-height: 120vh !important; }
.min-vh-150 { min-height: 150vh !important; }

/* Height */
.h-25    { height: 25% !important; }
.h-50    { height: 50% !important; }
.h-75    { height: 75% !important; }
.h-100   { height: 100% !important; }
.h-auto  { height: auto !important; }
.h-fit   { height: fit-content !important; }
.h-min   { height: min-content !important; }
.h-max   { height: max-content !important; }
.h-vh-50 { height: 50vh !important; }
.h-vh-100{ height: 100vh !important; }

/* Min-Height */
.min-h-25    { min-height: 25% !important; }
.min-h-50    { min-height: 50% !important; }
.min-h-75    { min-height: 75% !important; }
.min-h-100   { min-height: 100% !important; }
.min-h-auto  { min-height: auto !important; }
.min-h-fit   { min-height: fit-content !important; }
.min-h-min   { min-height: min-content !important; }
.min-h-max   { min-height: max-content !important; }
.min-h-vh-50 { min-height: 50vh !important; }
.min-h-vh-100{ min-height: 100vh !important; }

/* Width */
.w-25    { width: 25% !important; }
.w-50    { width: 50% !important; }
.w-75    { width: 75% !important; }
.w-100   { width: 100% !important; }
.w-auto  { width: auto !important; }
.w-fit   { width: fit-content !important; }
.w-min   { width: min-content !important; }
.w-max   { width: max-content !important; }
.w-vw-50 { width: 50vw !important; }
.w-vw-100{ width: 100vw !important; }

/* Min-Width */
.min-w-25    { min-width: 25% !important; }
.min-w-50    { min-width: 50% !important; }
.min-w-75    { min-width: 75% !important; }
.min-w-100   { min-width: 100% !important; }
.min-w-auto  { min-width: auto !important; }
.min-w-fit   { min-width: fit-content !important; }
.min-w-min   { min-width: min-content !important; }
.min-w-max   { min-width: max-content !important; }
.min-w-vw-50 { min-width: 50vw !important; }
.min-w-vw-100{ min-width: 100vw !important; }



/* Border Utilities */
.border-primary{
  border: 1px solid var(--primary-color-light) !important;
}
.border-secondary{
  border: 1px solid var(--secondary-color) !important;
}

.border-primary-thick{
  border: 5px solid var(--primary-color-light) !important;
}
.border-secondary-thick{
  border: 5px solid var(--secondary-color) !important;
}
.list-unstyled{
  list-style: none !important;
}
.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

/* Opacity Utilities */
.opacity-0   { opacity: 0 !important; }
.opacity-25  { opacity: 0.25 !important; }
.opacity-50  { opacity: 0.5 !important; }
.opacity-75  { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Round Utilties */
.rounded         { border-radius: 0.25rem !important; }   /* default */
.rounded-0       { border-radius: 0 !important; }
.rounded-1       { border-radius: 0.2rem !important; }
.rounded-2       { border-radius: 0.25rem !important; }
.rounded-3       { border-radius: 0.3rem !important; }
.rounded-4       { border-radius: 0.5rem !important; }
.rounded-5       { border-radius: 1rem !important; }

.rounded-top     { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
.rounded-end     { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
.rounded-bottom  { border-bottom-left-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
.rounded-start   { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }

.rounded-circle  { border-radius: 50% !important; }
.rounded-pill    { border-radius: 50rem !important; }


/* MODALS Utilities */
/* ===== Modal Base ===== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100%;
  height: 100%;
  display: none;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
}

.modal.show {
  display: block;
}

.modal.fade {
  opacity: 0;
}
.modal.fade.show {
  opacity: 1;
}

/* ===== Modal Dialog ===== */
.modal-dialog {
  position: relative;
  width: auto;
  max-width: 500px;
  margin: 1.75rem auto;
  pointer-events: none;
  transition: transform 0.3s ease;
  transform: translateY(-20px);
}

.modal.show .modal-dialog {
  transform: translateY(0);
}

/* Center vertically */
.modal-dialog-centered {
  min-height: calc(100% - 3.5rem);
  display: flex;
  align-items: center;
}

/* Sizes */
.modal-sm { max-width: 300px; }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1140px; }

/* ===== Modal Content ===== */
.modal-content {
  pointer-events: auto;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== Modal Header ===== */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
}

.modal-title {
  margin: 0;
}

/* ===== Modal Body ===== */
.modal-body {
  padding: 1rem;
}

/* ===== Modal Footer ===== */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-top: 1px solid #dee2e6;
  gap: 0.5rem;
}

/* ===== Close Button ===== */
.btn-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #000;
}



/* Image Utilities */
/* 🔧 Image sizing */
.img-fluid   { max-width: 100%; height: auto; display: block; }
.img-full    { width: 100%; height: 100%; object-fit: cover; }
.img-cover   { object-fit: cover !important; }
.img-contain { object-fit: contain !important; }
.img-center  { object-position: center !important; }

/* 🔧 Rounded corners */
.img-rounded        { border-radius: 0.25rem; }
.img-rounded-sm     { border-radius: 0.125rem; }
.img-rounded-lg     { border-radius: 0.5rem; }
.img-rounded-xl     { border-radius: 1rem; }
.img-circle         { border-radius: 50%; }

/* 🔧 Shadows */
.img-shadow-sm      { box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.img-shadow         { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.img-shadow-lg      { box-shadow: 0 10px 15px rgba(0,0,0,0.2); }

/* 🔧 Borders */
.img-border         { border: 1px solid #dee2e6; }
.img-border-dark    { border: 1px solid #474a59; }
.img-border-light   { border: 1px solid #f8f9fa; }

/* 🔧 Fixed sizes (optional) */
.img-w-100 { width: 100px; }
.img-w-200 { width: 200px; }
.img-w-300 { width: 300px; }
.img-h-100 { height: 100px; }
.img-h-200 { height: 200px; }
.img-h-300 { height: 300px; }
/* Responsive widths */
@media (max-width: 576px) {
    .img-sm-fluid { max-width: 100%; height: auto; }
}
@media (min-width: 768px) {
    .img-md-fluid { max-width: 100%; height: auto; }
}
@media (min-width: 992px) {
    .img-lg-fluid { max-width: 100%; height: auto; }
}