/*! Bootstrap Grid Only v5.x.x (Custom Build) */
/* Container */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

/* Grid Rows */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y, 0));
    margin-right: calc(-0.5 * var(--bs-gutter-x, 0.75rem));
    margin-left: calc(-0.5 * var(--bs-gutter-x, 0.75rem));
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x, 0.75rem) * 0.5);
    padding-left: calc(var(--bs-gutter-x, 0.75rem) * 0.5);
    margin-top: var(--bs-gutter-y, 0);
}

.justify-content-center {
    justify-content: center !important;
}

/* Columns */
.col {
    flex: 1 0 0;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Responsive column classes (only xs shown for demo; typically you'd include sm-md-lg-xl-xxl) */
@media (min-width: 576px) {
    .col-sm-1 { width: 8.333333%; }
    .col-sm-2 { width: 16.666667%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.333333%; }
    .col-sm-5 { width: 41.666667%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.333333%; }
    .col-sm-8 { width: 66.666667%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.333333%; }
    .col-sm-11 { width: 91.666667%; }
    .col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
    .col-md-1 { width: 8.333333%; }
    .col-md-2 { width: 16.666667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.333333%; }
    .col-md-5 { width: 41.666667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.333333%; }
    .col-md-8 { width: 66.666667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.333333%; }
    .col-md-11 { width: 91.666667%; }
    .col-md-12 { width: 100%; }
}

/* Order utility classes */
.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-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }
.order-first { order: -1; }
.order-last { order: 13; }

/* Responsive order classes */
@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-7 { order: 7; }
    .order-sm-8 { order: 8; }
    .order-sm-9 { order: 9; }
    .order-sm-10 { order: 10; }
    .order-sm-11 { order: 11; }
    .order-sm-12 { order: 12; }
    .order-sm-first { order: -1; }
    .order-sm-last { order: 13; }
}

@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-7 { order: 7; }
    .order-md-8 { order: 8; }
    .order-md-9 { order: 9; }
    .order-md-10 { order: 10; }
    .order-md-11 { order: 11; }
    .order-md-12 { order: 12; }
    .order-md-first { order: -1; }
    .order-md-last { order: 13; }
}

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

@media (min-width: 576px) {
    .align-items-sm-start { align-items: flex-start; }
    .align-items-sm-end { align-items: flex-end; }
    .align-items-sm-center { align-items: center; }
    .align-items-sm-baseline { align-items: baseline; }
    .align-items-sm-stretch { align-items: stretch; }
}

@media (min-width: 768px) {
    .align-items-md-start { align-items: flex-start; }
    .align-items-md-end { align-items: flex-end; }
    .align-items-md-center { align-items: center; }
    .align-items-md-baseline { align-items: baseline; }
    .align-items-md-stretch { align-items: stretch; }
}

/* Gutter utilities (g-0 to g-5) */
.g-0 {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.g-1 {
    --bs-gutter-x: 0.25rem;
    --bs-gutter-y: 0.25rem;
}
.g-2 {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
}
.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}
.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}
.g-5 {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 3rem;
}

@media (min-width: 1200px) {
    .col-xl-1 { width: 8.333333%; }
    .col-xl-2 { width: 16.666667%; }
    .col-xl-3 { width: 25%; }
    .col-xl-4 { width: 33.333333%; }
    .col-xl-5 { width: 41.666667%; }
    .col-xl-6 { width: 50%; }
    .col-xl-7 { width: 58.333333%; }
    .col-xl-8 { width: 66.666667%; }
    .col-xl-9 { width: 75%; }
    .col-xl-10 { width: 83.333333%; }
    .col-xl-11 { width: 91.666667%; }
    .col-xl-12 { width: 100%; }
}

@media (min-width: 1400px) {
    .col-xxl-1 { width: 8.333333%; }
    .col-xxl-2 { width: 16.666667%; }
    .col-xxl-3 { width: 25%; }
    .col-xxl-4 { width: 33.333333%; }
    .col-xxl-5 { width: 41.666667%; }
    .col-xxl-6 { width: 50%; }
    .col-xxl-7 { width: 58.333333%; }
    .col-xxl-8 { width: 66.666667%; }
    .col-xxl-9 { width: 75%; }
    .col-xxl-10 { width: 83.333333%; }
    .col-xxl-11 { width: 91.666667%; }
    .col-xxl-12 { width: 100%; }
}

/* Container max-widths (Bootstrap 5 standard) */
@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;
    }
}

/* Gutter X-axis spacing utilities */
.gx-0 {
    --bs-gutter-x: 0;
}
.gx-1 {
    --bs-gutter-x: 0.25rem;
}
.gx-2 {
    --bs-gutter-x: 0.5rem;
}
.gx-3 {
    --bs-gutter-x: 1rem;
}
.gx-4 {
    --bs-gutter-x: 1.5rem;
}
.gx-5 {
    --bs-gutter-x: 3rem;
}

/* Gutter Y-axis spacing utilities */
.gy-0 {
    --bs-gutter-y: 0;
}
.gy-1 {
    --bs-gutter-y: 0.25rem;
}
.gy-2 {
    --bs-gutter-y: 0.5rem;
}
.gy-3 {
    --bs-gutter-y: 1rem;
}
.gy-4 {
    --bs-gutter-y: 1.5rem;
}
.gy-5 {
    --bs-gutter-y: 3rem;
}