/*
 * Bootstrap CSS Only Utilities
 *
 * This file contains a subset of common Bootstrap utility classes
 * extracted for a lightweight, utilities-only approach.
 * It does NOT include Bootstrap's components, layout, or full theming.
 *
 * Customize values and add more utilities as needed for your project.
 */

 :root {
    /* You might define your own spacing scale or other variables here */
    --bs-spacer: 1rem;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;

    /* Bootstrap 5 Font Sizes based on heading scale */
    --bs-font-size-base: 1rem; /* Typically 16px */
    --bs-font-size-sm: 0.875rem; /* 14px */
    --bs-font-size-lg: 1.25rem; /* 20px */

    /* Heading scale font sizes */
    --bs-h1-font-size: 2.5rem;   /* fs-1 */
    --bs-h2-font-size: 2rem;     /* fs-2 */
    --bs-h3-font-size: 1.75rem;  /* fs-3 */
    --bs-h4-font-size: 1.5rem;   /* fs-4 */
    --bs-h5-font-size: 1.25rem;  /* fs-5 */
    --bs-h6-font-size: 1rem;     /* fs-6 */

    /* Display font sizes (larger headings) - optional, but good to include if you need them */
    --bs-display-font-sizes-1: 5rem;
    --bs-display-font-sizes-2: 4.5rem;
    --bs-display-font-sizes-3: 4rem;
    --bs-display-font-sizes-4: 3.5rem;
    --bs-display-font-sizes-5: 3rem;
    --bs-display-font-sizes-6: 2.5rem;
  }
  
  /* Base Breakpoints (adjust as per Bootstrap's default or your needs) */
  /* Bootstrap 5 default breakpoints:
     sm: 576px
     md: 768px
     lg: 992px
     xl: 1200px
     xxl: 1400px
  */
  @media (min-width: 576px) {
    /* Small devices (landscape phones, 576px and up) */
  }
  
  @media (min-width: 768px) {
    /* Medium devices (tablets, 768px and up) */
  }
  
  @media (min-width: 992px) {
    /* Large devices (desktops, 992px and up) */
  }
  
  @media (min-width: 1200px) {
    /* Extra large devices (large desktops, 1200px and up) */
  }
  
  @media (min-width: 1400px) {
    /* Extra extra large devices (larger desktops, 1400px and up) */
  }


/* --- Font Size Utilities (fs-*) --- */
/* Based on Bootstrap's fs-* classes and heading sizes */

.fs-1 {
  font-size: var(--bs-h1-font-size) !important;
}
.fs-2 {
  font-size: var(--bs-h2-font-size) !important;
}
.fs-3 {
  font-size: var(--bs-h3-font-size) !important;
}
.fs-4 {
  font-size: var(--bs-h4-font-size) !important;
}
.fs-5 {
  font-size: var(--bs-h5-font-size) !important;
}
.fs-6 {
  font-size: var(--bs-h6-font-size) !important;
}

/* Optional: Additional common sizes */
.fs-sm {
  font-size: var(--bs-font-size-sm) !important;
}
.fs-base { /* Maps to default body font size */
  font-size: var(--bs-font-size-base) !important;
}
.fs-lg {
  font-size: var(--bs-font-size-lg) !important;
}
  
  
  /* --- Spacing Utilities (Margin & Padding) --- */
  /*
   * Property: m = margin, p = padding
   * Sides: t = top, b = bottom, s = start (left), e = end (right), x = horizontal, y = vertical, all = all sides
   * Sizes: 0 to 5 (or custom scale), auto
   * Example: mt-3 (margin-top: 1rem), px-2 (padding-left: 0.5rem; padding-right: 0.5rem)
   */
  
  .m-0 { margin: 0 !important; }
  .m-1 { margin: calc(var(--bs-spacer) * 0.25) !important; } /* 0.25rem */
  .m-2 { margin: calc(var(--bs-spacer) * 0.5) !important; }  /* 0.5rem */
  .m-3 { margin: var(--bs-spacer) !important; } /* 1rem */
  .m-4 { margin: calc(var(--bs-spacer) * 1.5) !important; } /* 1.5rem */
  .m-5 { margin: calc(var(--bs-spacer) * 3) !important; } /* 3rem */
  .m-auto { margin: auto !important; }
  
  .mt-0 { margin-top: 0 !important; }
  .mt-1 { margin-top: calc(var(--bs-spacer) * 0.25) !important; }
  .mt-2 { margin-top: calc(var(--bs-spacer) * 0.5) !important; }
  .mt-3 { margin-top: var(--bs-spacer) !important; }
  .mt-4 { margin-top: calc(var(--bs-spacer) * 1.5) !important; }
  .mt-5 { margin-top: calc(var(--bs-spacer) * 3) !important; }
  .mt-auto { margin-top: auto !important; }
  
  .mb-0 { margin-bottom: 0 !important; }
  .mb-1 { margin-bottom: calc(var(--bs-spacer) * 0.25) !important; }
  .mb-2 { margin-bottom: calc(var(--bs-spacer) * 0.5) !important; }
  .mb-3 { margin-bottom: var(--bs-spacer) !important; }
  .mb-4 { margin-bottom: calc(var(--bs-spacer) * 1.5) !important; }
  .mb-5 { margin-bottom: calc(var(--bs-spacer) * 3) !important; }
  .mb-auto { margin-bottom: auto !important; }
  
  .ms-0 { margin-inline-start: 0 !important; }
  .ms-1 { margin-inline-start: calc(var(--bs-spacer) * 0.25) !important; }
  .ms-2 { margin-inline-start: calc(var(--bs-spacer) * 0.5) !important; }
  .ms-3 { margin-inline-start: var(--bs-spacer) !important; }
  .ms-4 { margin-inline-start: calc(var(--bs-spacer) * 1.5) !important; }
  .ms-5 { margin-inline-start: calc(var(--bs-spacer) * 3) !important; }
  .ms-auto { margin-inline-start: auto !important; }
  
  .me-0 { margin-inline-end: 0 !important; }
  .me-1 { margin-inline-end: calc(var(--bs-spacer) * 0.25) !important; }
  .me-2 { margin-inline-end: calc(var(--bs-spacer) * 0.5) !important; }
  .me-3 { margin-inline-end: var(--bs-spacer) !important; }
  .me-4 { margin-inline-end: calc(var(--bs-spacer) * 1.5) !important; }
  .me-5 { margin-inline-end: calc(var(--bs-spacer) * 3) !important; }
  .me-auto { margin-inline-end: auto !important; }
  
  .mx-0 { margin-inline: 0 !important; }
  .mx-1 { margin-inline: calc(var(--bs-spacer) * 0.25) !important; }
  .mx-2 { margin-inline: calc(var(--bs-spacer) * 0.5) !important; }
  .mx-3 { margin-inline: var(--bs-spacer) !important; }
  .mx-4 { margin-inline: calc(var(--bs-spacer) * 1.5) !important; }
  .mx-5 { margin-inline: calc(var(--bs-spacer) * 3) !important; }
  .mx-auto { margin-inline: auto !important; }
  
  .my-0 { margin-block: 0 !important; }
  .my-1 { margin-block: calc(var(--bs-spacer) * 0.25) !important; }
  .my-2 { margin-block: calc(var(--bs-spacer) * 0.5) !important; }
  .my-3 { margin-block: var(--bs-spacer) !important; }
  .my-4 { margin-block: calc(var(--bs-spacer) * 1.5) !important; }
  .my-5 { margin-block: calc(var(--bs-spacer) * 3) !important; }
  .my-auto { margin-block: auto !important; }
  
  /* Padding utilities follow the same pattern */
  .p-0 { padding: 0 !important; }
  .p-1 { padding: calc(var(--bs-spacer) * 0.25) !important; }
  .p-2 { padding: calc(var(--bs-spacer) * 0.5) !important; }
  .p-3 { padding: var(--bs-spacer) !important; }
  .p-4 { padding: calc(var(--bs-spacer) * 1.5) !important; }
  .p-5 { padding: calc(var(--bs-spacer) * 3) !important; }
  
  .pt-0 { padding-top: 0 !important; }
  .pt-1 { padding-top: calc(var(--bs-spacer) * 0.25) !important; }
  .pt-2 { padding-top: calc(var(--bs-spacer) * 0.5) !important; }
  .pt-3 { padding-top: var(--bs-spacer) !important; }
  .pt-4 { padding-top: calc(var(--bs-spacer) * 1.5) !important; }
  .pt-5 { padding-top: calc(var(--bs-spacer) * 3) !important; }
  
  .pb-0 { padding-bottom: 0 !important; }
  .pb-1 { padding-bottom: calc(var(--bs-spacer) * 0.25) !important; }
  .pb-2 { padding-bottom: calc(var(--bs-spacer) * 0.5) !important; }
  .pb-3 { padding-bottom: var(--bs-spacer) !important; }
  .pb-4 { padding-bottom: calc(var(--bs-spacer) * 1.5) !important; }
  .pb-5 { padding-bottom: calc(var(--bs-spacer) * 3) !important; }
  
  .ps-0 { padding-inline-start: 0 !important; }
  .ps-1 { padding-inline-start: calc(var(--bs-spacer) * 0.25) !important; }
  .ps-2 { padding-inline-start: calc(var(--bs-spacer) * 0.5) !important; }
  .ps-3 { padding-inline-start: var(--bs-spacer) !important; }
  .ps-4 { padding-inline-start: calc(var(--bs-spacer) * 1.5) !important; }
  .ps-5 { padding-inline-start: calc(var(--bs-spacer) * 3) !important; }
  
  .pe-0 { padding-inline-end: 0 !important; }
  .pe-1 { padding-inline-end: calc(var(--bs-spacer) * 0.25) !important; }
  .pe-2 { padding-inline-end: calc(var(--bs-spacer) * 0.5) !important; }
  .pe-3 { padding-inline-end: var(--bs-spacer) !important; }
  .pe-4 { padding-inline-end: calc(var(--bs-spacer) * 1.5) !important; }
  .pe-5 { padding-inline-end: calc(var(--bs-spacer) * 3) !important; }
  
  .px-0 { padding-inline: 0 !important; }
  .px-1 { padding-inline: calc(var(--bs-spacer) * 0.25) !important; }
  .px-2 { padding-inline: calc(var(--bs-spacer) * 0.5) !important; }
  .px-3 { padding-inline: var(--bs-spacer) !important; }
  .px-4 { padding-inline: calc(var(--bs-spacer) * 1.5) !important; }
  .px-5 { padding-inline: calc(var(--bs-spacer) * 3) !important; }
  
  .py-0 { padding-block: 0 !important; }
  .py-1 { padding-block: calc(var(--bs-spacer) * 0.25) !important; }
  .py-2 { padding-block: calc(var(--bs-spacer) * 0.5) !important; }
  .py-3 { padding-block: var(--bs-spacer) !important; }
  .py-4 { padding-block: calc(var(--bs-spacer) * 1.5) !important; }
  .py-5 { padding-block: calc(var(--bs-spacer) * 3) !important; }
  
  /* Responsive spacing examples */
  @media (min-width: 768px) {
    .mb-md-0 { margin-bottom: 0 !important; }
    .mt-md-3 { margin-top: var(--bs-spacer) !important; }
    .px-md-4 { padding-inline: calc(var(--bs-spacer) * 1.5) !important; }
  }
  
  
  /* --- Display Utilities --- */
  .d-inline { display: inline !important; }
  .d-inline-block { display: inline-block !important; }
  .d-block { display: block !important; }
  .d-grid { display: grid !important; }
  .d-table { display: table !important; }
  .d-table-cell { display: table-cell !important; }
  .d-table-row { display: table-row !important; }
  .d-none { display: none !important; }
  
  /* Responsive display examples */
  @media (min-width: 768px) {
    .d-md-inline { display: inline !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-none { display: none !important; }
  }
  
  
  /* --- Flexbox Utilities --- */
  .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-content-start { justify-content: flex-start !important; }
  .justify-content-end { justify-content: flex-end !important; }
  .justify-content-center { justify-content: center !important; }
  .justify-content-between { justify-content: space-between !important; }
  .justify-content-around { justify-content: space-around !important; }
  .justify-content-evenly { justify-content: space-evenly !important; }
  
  .align-items-start { align-items: flex-start !important; }
  .align-items-end { align-items: flex-end !important; }
  .align-items-center { align-items: center !important; }
  .align-items-baseline { align-items: baseline !important; }
  .align-items-stretch { align-items: stretch !important; }
  
  .align-content-start { align-content: flex-start !important; }
  .align-content-end { align-content: flex-end !important; }
  .align-content-center { align-content: center !important; }
  .align-content-between { align-content: space-between !important; }
  .align-content-around { align-content: space-around !important; }
  .align-content-stretch { align-content: stretch !important; }
  
  .align-self-auto { align-self: auto !important; }
  .align-self-start { align-self: flex-start !important; }
  .align-self-end { align-self: flex-end !important; }
  .align-self-center { align-self: center !important; }
  .align-self-baseline { align-self: baseline !important; }
  .align-self-stretch { align-self: stretch !important; }
  
  .gap-0 { gap: 0 !important; }
  .gap-1 { gap: calc(var(--bs-spacer) * 0.25) !important; }
  .gap-2 { gap: calc(var(--bs-spacer) * 0.5) !important; }
  .gap-3 { gap: var(--bs-spacer) !important; }
  .gap-4 { gap: calc(var(--bs-spacer) * 1.5) !important; }
  .gap-5 { gap: calc(var(--bs-spacer) * 3) !important; }
  
  /* Responsive flexbox examples */
  @media (min-width: 992px) {
    .flex-lg-column { flex-direction: column !important; }
    .justify-content-lg-end { justify-content: flex-end !important; }
    .align-items-lg-center { align-items: center !important; }
  }
  
  
  /* --- Text Utilities --- */
  .text-start { text-align: left !important; }
  .text-end { text-align: right !important; }
  .text-center { text-align: center !important; }
  .text-decoration-none { text-decoration: none !important; }
  .text-wrap { white-space: normal !important; }
  .text-nowrap { white-space: nowrap !important; }
  .text-break { word-wrap: break-word !important; word-break: break-word !important; } /* For older browsers */
  .text-lowercase { text-transform: lowercase !important; }
  .text-uppercase { text-transform: uppercase !important; }
  .text-capitalize { text-transform: capitalize !important; }
  .fw-light { font-weight: 300 !important; }
  .fw-lighter { font-weight: lighter !important; }
  .fw-normal { font-weight: 400 !important; }
  .fw-bold { font-weight: 700 !important; }
  .fw-bolder { font-weight: bolder !important; }
  .fst-italic { font-style: italic !important; }
  .fst-normal { font-style: normal !important; }
  
  /* Responsive text examples */
  @media (min-width: 768px) {
    .text-md-start { text-align: left !important; }
    .text-md-end { text-align: right !important; }
    .text-md-center { text-align: center !important; }
  }
  
  
/* --- Responsive Sizing Utilities --- */

/* Width Utilities */
.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;
}

/* Height Utilities */
.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;
}

/* Max-width Utilities */
.mw-100 {
  max-width: 100% !important;
}

/* Max-height Utilities */
.mh-100 {
  max-height: 100% !important;
}

/* --- Responsive Breakpoints for Sizing --- */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .w-sm-25 {
    width: 25% !important;
  }
  .w-sm-50 {
    width: 50% !important;
  }
  .w-sm-75 {
    width: 75% !important;
  }
  .w-sm-100 {
    width: 100% !important;
  }
  .w-sm-auto {
    width: auto !important;
  }

  .h-sm-25 {
    height: 25% !important;
  }
  .h-sm-50 {
    height: 50% !important;
  }
  .h-sm-75 {
    height: 75% !important;
  }
  .h-sm-100 {
    height: 100% !important;
  }
  .h-sm-auto {
    height: auto !important;
  }

  .mw-sm-100 {
    max-width: 100% !important;
  }
  .mh-sm-100 {
    max-height: 100% !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .w-md-25 {
    width: 25% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-75 {
    width: 75% !important;
  }
  .w-md-100 {
    width: 100% !important;
  }
  .w-md-auto {
    width: auto !important;
  }

  .h-md-25 {
    height: 25% !important;
  }
  .h-md-50 {
    height: 50% !important;
  }
  .h-md-75 {
    height: 75% !important;
  }
  .h-md-100 {
    height: 100% !important;
  }
  .h-md-auto {
    height: auto !important;
  }

  .mw-md-100 {
    max-width: 100% !important;
  }
  .mh-md-100 {
    max-height: 100% !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .w-lg-25 {
    width: 25% !important;
  }
  .w-lg-50 {
    width: 50% !important;
  }
  .w-lg-75 {
    width: 75% !important;
  }
  .w-lg-100 {
    width: 100% !important;
  }
  .w-lg-auto {
    width: auto !important;
  }

  .h-lg-25 {
    height: 25% !important;
  }
  .h-lg-50 {
    height: 50% !important;
  }
  .h-lg-75 {
    height: 75% !important;
  }
  .h-lg-100 {
    height: 100% !important;
  }
  .h-lg-auto {
    height: auto !important;
  }

  .mw-lg-100 {
    max-width: 100% !important;
  }
  .mh-lg-100 {
    max-height: 100% !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .w-xl-25 {
    width: 25% !important;
  }
  .w-xl-50 {
    width: 50% !important;
  }
  .w-xl-75 {
    width: 75% !important;
  }
  .w-xl-100 {
    width: 100% !important;
  }
  .w-xl-auto {
    width: auto !important;
  }

  .h-xl-25 {
    height: 25% !important;
  }
  .h-xl-50 {
    height: 50% !important;
  }
  .h-xl-75 {
    height: 75% !important;
  }
  .h-xl-100 {
    height: 100% !important;
  }
  .h-xl-auto {
    height: auto !important;
  }

  .mw-xl-100 {
    max-width: 100% !important;
  }
  .mh-xl-100 {
    max-height: 100% !important;
  }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .w-xxl-25 {
    width: 25% !important;
  }
  .w-xxl-50 {
    width: 50% !important;
  }
  .w-xxl-75 {
    width: 75% !important;
  }
  .w-xxl-100 {
    width: 100% !important;
  }
  .w-xxl-auto {
    width: auto !important;
  }

  .h-xxl-25 {
    height: 25% !important;
  }
  .h-xxl-50 {
    height: 50% !important;
  }
  .h-xxl-75 {
    height: 75% !important;
  }
  .h-xxl-100 {
    height: 100% !important;
  }
  .h-xxl-auto {
    height: auto !important;
  }

  .mw-xxl-100 {
    max-width: 100% !important;
  }
  .mh-xxl-100 {
    max-height: 100% !important;
  }
}

  
  
  /* --- Visibility Utilities --- */
  .visible { visibility: visible !important; }
  .invisible { visibility: hidden !important; }
  
  
  /* --- Shadow Utilities (Example - you'd need to define your shadows) --- */
  /* .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; } */
  /* .shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } */
  /* .shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; } */
  /* .shadow-none { box-shadow: none!important; } */
  
  
  /* --- Border Utilities (Example - requires border variables or hardcoding) --- */
  /* .border { border: 1px solid #dee2e6!important; } */
  /* .border-0 { border: 0!important; } */
  /* .border-top-0 { border-top: 0!important; } */
  /* .border-bottom-0 { border-bottom: 0!important; } */
  .rounded { border-radius: .25rem!important; }
  .rounded-circle { border-radius: 50%!important; }
  
  
  /* --- Position Utilities --- */
  .position-static { position: static !important; }
  .position-relative { position: relative !important; }
  .position-absolute { position: absolute !important; }
  .position-fixed { position: fixed !important; }
  .position-sticky { position: sticky !important; }
  
  /* Top, Right, Bottom, Left (TRBL) utilities */
  .top-0 { top: 0 !important; }
  .start-0 { left: 0 !important; } /* or start: 0 for logical properties */
  .bottom-0 { bottom: 0 !important; }
  .end-0 { right: 0 !important; } /* or end: 0 for logical properties */
  .top-50 { top: 50% !important; }
  .start-50 { left: 50% !important; }
  .bottom-50 { bottom: 50% !important; }
  .end-50 { right: 50% !important; }
  .top-100 { top: 100% !important; }
  .start-100 { left: 100% !important; }
  .bottom-100 { bottom: 100% !important; }
  .end-100 { right: 100% !important; }
  
  /* Translate utilities (for centering) */
  .translate-middle {
    transform: translate(-50%, -50%) !important;
  }
  .translate-middle-x {
    transform: translateX(-50%) !important;
  }
  .translate-middle-y {
    transform: translateY(-50%) !important;
  }
  
  /* Z-index utilities */
  .z-0 { z-index: 0 !important; }
  .z-1 { z-index: 1 !important; }
  .z-2 { z-index: 2 !important; }
  .z-3 { z-index: 3 !important; }
  .z-auto { z-index: auto !important; }
  
  
  /* --- Overflow Utilities --- */
  .overflow-auto { overflow: auto !important; }
  .overflow-hidden { overflow: hidden !important; }
  .overflow-visible { overflow: visible !important; }
  .overflow-scroll { overflow: scroll !important; }
  
  
  /* --- Vertical Alignment Utilities --- */
  .align-baseline { vertical-align: baseline !important; }
  .align-top { vertical-align: top !important; }
  .align-middle { vertical-align: middle !important; }
  .align-bottom { vertical-align: bottom !important; }
  .align-text-bottom { vertical-align: text-bottom !important; }
  .align-text-top { vertical-align: text-top !important; }
  
  
  /* --- Pointer Events Utilities --- */
  .pe-none { pointer-events: none !important; }
  .pe-auto { pointer-events: auto !important; }
  
  
/* --- Aspect Ratio Utilities (Ratio) --- */
.ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ratio::before {
  content: "";
  display: block;
  /* This will be overridden by .ratio-* classes or custom style */
  padding-top: var(--bs-aspect-ratio);
}

.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio > img {
  display: block; /* Important to remove extra space below image */
  max-width: 100%;
  max-height: 100%;
}


/* Default aspect ratios */
.ratio-1x1 { --bs-aspect-ratio: 100%; } /* 1 / 1 * 100% */
.ratio-4x3 { --bs-aspect-ratio: calc(3 / 4 * 100%); }
.ratio-16x9 { --bs-aspect-ratio: calc(9 / 16 * 100%); }
.ratio-21x9 { --bs-aspect-ratio: calc(9 / 21 * 100%); }


.object-fit-cover {
  object-fit: cover !important;
}

.object-fit-contain {
  object-fit: contain !important;
}

.object-fit-fill {
  object-fit: fill !important;
}

.object-position-center {
  object-position: center center !important; /* Default, but explicit */
}
.object-position-top {
  object-position: top center !important;
}
.object-position-bottom {
  object-position: bottom center !important;
}
.object-position-left {
  object-position: center left !important;
}
.object-position-right {
  object-position: center right !important;
}

/* --- Responsive Flex Utilities --- */

/* Base Flex Display */
.d-flex {
  display: flex !important;
}
.d-inline-flex {
  display: inline-flex !important;
}

/* Base Flex Direction */
.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;
}

/* Base Flex Wrap */
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

/* Base Justify Content */
.justify-content-start {
  justify-content: flex-start !important;
}
.justify-content-end {
  justify-content: flex-end !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.justify-content-around {
  justify-content: space-around !important;
}
.justify-content-evenly {
  justify-content: space-evenly !important;
}

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

/* Base Align Content */
.align-content-start {
  align-content: flex-start !important;
}
.align-content-end {
  align-content: flex-end !important;
}
.align-content-center {
  align-content: center !important;
}
.align-content-between {
  align-content: space-between !important;
}
.align-content-around {
  align-content: space-around !important;
}
.align-content-stretch {
  align-content: stretch !important;
}

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

/* Base Gap Utilities (Requires --bs-spacer to be defined) */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: calc(var(--bs-spacer) * 0.25) !important; } /* 0.25rem */
.gap-2 { gap: calc(var(--bs-spacer) * 0.5) !important; }  /* 0.5rem */
.gap-3 { gap: var(--bs-spacer) !important; }             /* 1rem */
.gap-4 { gap: calc(var(--bs-spacer) * 1.5) !important; } /* 1.5rem */
.gap-5 { gap: calc(var(--bs-spacer) * 3) !important; }   /* 3rem */


/* --- Responsive Breakpoints --- */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .d-sm-flex { display: flex !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
  .d-sm-block { display: block !important; } /* Common for responsive display */
  .d-sm-none { display: none !important; }

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

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

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

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

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

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

  .gap-sm-0 { gap: 0 !important; }
  .gap-sm-1 { gap: calc(var(--bs-spacer) * 0.25) !important; }
  .gap-sm-2 { gap: calc(var(--bs-spacer) * 0.5) !important; }
  .gap-sm-3 { gap: var(--bs-spacer) !important; }
  .gap-sm-4 { gap: calc(var(--bs-spacer) * 1.5) !important; }
  .gap-sm-5 { gap: calc(var(--bs-spacer) * 3) !important; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .d-md-flex { display: flex !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .d-md-block { display: block !important; }
  .d-md-none { display: none !important; }

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

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

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

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

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

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

  .gap-md-0 { gap: 0 !important; }
  .gap-md-1 { gap: calc(var(--bs-spacer) * 0.25) !important; }
  .gap-md-2 { gap: calc(var(--bs-spacer) * 0.5) !important; }
  .gap-md-3 { gap: var(--bs-spacer) !important; }
  .gap-md-4 { gap: calc(var(--bs-spacer) * 1.5) !important; }
  .gap-md-5 { gap: calc(var(--bs-spacer) * 3) !important; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .d-lg-block { display: block !important; }
  .d-lg-none { display: none !important; }

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

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

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

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

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

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

  .gap-lg-0 { gap: 0 !important; }
  .gap-lg-1 { gap: calc(var(--bs-spacer) * 0.25) !important; }
  .gap-lg-2 { gap: calc(var(--bs-spacer) * 0.5) !important; }
  .gap-lg-3 { gap: var(--bs-spacer) !important; }
  .gap-lg-4 { gap: calc(var(--bs-spacer) * 1.5) !important; }
  .gap-lg-5 { gap: calc(var(--bs-spacer) * 3) !important; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .d-xl-flex { display: flex !important; }
  .d-xl-inline-flex { display: inline-flex !important; }
  .d-xl-block { display: block !important; }
  .d-xl-none { display: none !important; }

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

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

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

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

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

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

  .gap-xl-0 { gap: 0 !important; }
  .gap-xl-1 { gap: calc(var(--bs-spacer) * 0.25) !important; }
  .gap-xl-2 { gap: calc(var(--bs-spacer) * 0.5) !important; }
  .gap-xl-3 { gap: var(--bs-spacer) !important; }
  .gap-xl-4 { gap: calc(var(--bs-spacer) * 1.5) !important; }
  .gap-xl-5 { gap: calc(var(--bs-spacer) * 3) !important; }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .d-xxl-flex { display: flex !important; }
  .d-xxl-inline-flex { display: inline-flex !important; }
  .d-xxl-block { display: block !important; }
  .d-xxl-none { display: none !important; }

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

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

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

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

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

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

  .gap-xxl-0 { gap: 0 !important; }
  .gap-xxl-1 { gap: calc(var(--bs-spacer) * 0.25) !important; }
  .gap-xxl-2 { gap: calc(var(--bs-spacer) * 0.5) !important; }
  .gap-xxl-3 { gap: var(--bs-spacer) !important; }
  .gap-xxl-4 { gap: calc(var(--bs-spacer) * 1.5) !important; }
  .gap-xxl-5 { gap: calc(var(--bs-spacer) * 3) !important; }
}