/* ============================================================
     BOOTSTRAP-COMPATIBLE GRID SYSTEM
  ============================================================ */
  .container {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
  }
  @media (min-width: 576px) { .container { max-width: 540px; } }
  @media (min-width: 768px) { .container { max-width: 720px; } }
  @media (min-width: 992px) { .container { max-width: 960px; } }
  @media (min-width: 1200px) { .container { max-width: 1140px; } }
  @media (min-width: 1400px) { .container { max-width: 1320px; } }
 
  .container-fluid {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
  }
 
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
  }
  .col-12 { flex: 0 0 auto; width: 100%; }
  .col-6  { flex: 0 0 auto; width: 50%; }

  @media (max-width: 575px) {
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
  }

  @media (min-width: 768px) {
    .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
  }
  @media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
  }

  /* Structural Gap Helpers */
  .row-gap {
    row-gap: 30px;
  }
  .row-gap-inputs {
    row-gap: 15px;
  }
 
  /* ============================================================
     UTILITY CLASSES
  ============================================================ */
  .d-flex { display: flex !important; }
  .d-none { display: none !important; }
  .flex-column { flex-direction: column !important; }
  .align-items-center { align-items: center !important; }
  .align-items-start  { align-items: flex-start !important; }
  .align-items-end    { align-items: flex-end !important; }
  .justify-content-between { justify-content: space-between !important; }
  .justify-content-center  { justify-content: center !important; }
  .justify-content-start   { justify-content: flex-start !important; }
  .justify-content-end     { justify-content: flex-end !important; }
  @media (min-width: 768px) {
    .d-md-flex { display: flex !important; }
    .d-md-none { display: none !important; }
  }
  @media (min-width: 992px) {
    .d-lg-flex { display: flex !important; }
  }
 
  /* Spacing */
  .m-0 { margin: 0 !important; }
  .p-0 { padding: 0 !important; }
  .mb-0 { margin-bottom: 0 !important; }
  .mb-1 { margin-bottom: 0.25rem !important; }
  .mb-2 { margin-bottom: 0.5rem !important; }
  .mb-3 { margin-bottom: 1rem !important; }
  .mb-4 { margin-bottom: 1.5rem !important; }
  .mb-5 { margin-bottom: 3rem !important; }
  .mt-1 { margin-top: 0.25rem !important; }
  .mt-2 { margin-top: 0.5rem !important; }
  .mt-3 { margin-top: 1rem !important; }
  .mt-4 { margin-top: 1.5rem !important; }
  .mt-5 { margin-top: 3rem !important; }
  .me-2 { margin-right: 0.5rem !important; }
  .me-3 { margin-right: 1rem !important; }
  .py-0 { padding-top: 0; padding-bottom: 0; }
  .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-4 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-5 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
  .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .pt-5 { padding-top: 4.5rem !important; }
  .pb-5 { padding-bottom: 4.5rem !important; }
 
  /* Text */
  .text-center   { text-align: center !important; }
  .text-start    { text-align: left !important; }
  .text-end      { text-align: right !important; }
  .text-uppercase{ text-transform: uppercase !important; }
  .text-muted    { color: var(--brand-gray) !important; }
  .text-white    { color: #ffffff !important; }
  @media (min-width: 768px) {
    .text-md-start  { text-align: left !important; }
    .text-md-center { text-align: center !important; }
  }
 
  /* Size */
  .h-100 { height: 100% !important; }
  .w-100 { width: 100% !important; }
  .position-relative { position: relative !important; }
 
  /* gap */
  .gap-2 { gap: 0.5rem !important; }
  .gap-3 { gap: 1rem !important; }
  .gap-4 { gap: 1.5rem !important; }