/* ============================================
   UTILITY CLASSES
   ============================================
   
   This file contains all utility classes for the project.
   
   Sections:
   1. Color Utilities (Text, Background, Border)
   2. Flexbox Utilities
   3. Grid Utilities
   4. Gap Utilities
   5. Margin Utilities
   6. Padding Utilities
   7. Width & Height Utilities
   8. Position Utilities
   9. Display Utilities
   10. Text Utilities
   11. Overflow Utilities
   12. Visibility & Opacity
   13. Cursor Utilities
   14. Z-Index Utilities
   15. Border Radius Utilities
   16. Responsive Utilities (sm, md, lg, xl, xxl)
   ============================================ */

/* ============================================
   Text Color Utilities
   ============================================ */
.text-blue {
    color: var(--blue);
}

.text-dark-blue {
    color: var(--dark-blue);
}

.text-white {
    color: var(--text-white);
}

.text-gold {
    color: var(--gold);
}

.text-dark-gold {
    color: var(--dark-gold);
}

.text-black {
    color: var(--black);
}

/* Hover Text Colors */
.hover-text-blue:hover {
    color: var(--blue);
}

.hover-text-dark-blue:hover {
    color: var(--dark-blue);
}

.hover-text-white:hover {
    color: var(--text-white);
}

.hover-text-gold:hover {
    color: var(--gold);
}

.hover-text-dark-gold:hover {
    color: var(--dark-gold);
}

.hover-text-black:hover {
    color: var(--black);
}

/* ============================================
   Background Color Utilities
   ============================================ */
.bg-blue {
    background-color: var(--blue);
}

.bg-dark-blue {
    background-color: var(--dark-blue);
}

.bg-white {
    background-color: var(--background-white);
}

.bg-gold {
    background-color: var(--gold);
}

.bg-dark-gold {
    background-color: var(--dark-gold);
}

.bg-black {
    background-color: var(--black);
}

.bg-transparent {
    background-color: transparent;
}

.bg-card-gray {
    background-color: var(--card-gray);
}

/* Hover Background Colors */
.hover-bg-blue:hover {
    background-color: var(--blue);
}

.hover-bg-dark-blue:hover {
    background-color: var(--dark-blue);
}

.hover-bg-white:hover {
    background-color: var(--background-white);
}

.hover-bg-gold:hover {
    background-color: var(--gold);
}

.hover-bg-dark-gold:hover {
    background-color: var(--dark-gold);
}

.hover-bg-black:hover {
    background-color: var(--black);
}

.hover-bg-transparent:hover {
    background-color: transparent;
}

.hover-bg-card-gray:hover {
    background-color: var(--card-gray);
}

/* ============================================
   Border Color Utilities
   ============================================ */
.border-blue {
    border-color: var(--blue);
}

.border-dark-blue {
    border-color: var(--dark-blue);
}

.border-white {
    border-color: var(--background-white);
}

.border-gold {
    border-color: var(--gold);
}

.border-dark-gold {
    border-color: var(--dark-gold);
}

.border-black {
    border-color: var(--black);
}

.border-transparent {
    border-color: transparent;
}

/* Hover Border Colors */
.hover-border-blue:hover {
    border-color: var(--blue);
}

.hover-border-dark-blue:hover {
    border-color: var(--dark-blue);
}

.hover-border-white:hover {
    border-color: var(--background-white);
}

.hover-border-gold:hover {
    border-color: var(--gold);
}

.hover-border-dark-gold:hover {
    border-color: var(--dark-gold);
}

.hover-border-black:hover {
    border-color: var(--black);
}

.hover-border-transparent:hover {
    border-color: transparent;
}

/* ============================================
   Border Width Utilities
   ============================================ */
.border-0 {
    border-width: 0;
}

.border {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-3 {
    border-width: 3px;
}

.border-4 {
    border-width: 4px;
}

/* Border Top Width */
.border-t-0 {
    border-top-width: 0;
}

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

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

.border-t-4 {
    border-top-width: 4px;
}

/* Border Right Width */
.border-r-0 {
    border-right-width: 0;
}

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

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

.border-r-4 {
    border-right-width: 4px;
}

/* Border Bottom Width */
.border-b-0 {
    border-bottom-width: 0;
}

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

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

.border-b-4 {
    border-bottom-width: 4px;
}

/* Border Left Width */
.border-l-0 {
    border-left-width: 0;
}

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

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

.border-l-4 {
    border-left-width: 4px;
}

/* Border X (Left + Right) */
.border-x-0 {
    border-left-width: 0;
    border-right-width: 0;
}

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

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

.border-x-4 {
    border-left-width: 4px;
    border-right-width: 4px;
}

/* Border Y (Top + Bottom) */
.border-y-0 {
    border-top-width: 0;
    border-bottom-width: 0;
}

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

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

.border-y-4 {
    border-top-width: 4px;
    border-bottom-width: 4px;
}

/* ============================================
   Border Style Utilities
   ============================================ */
.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed;
}

.border-dotted {
    border-style: dotted;
}

.border-double {
    border-style: double;
}

.border-none {
    border-style: none;
}

/* ============================================
   Border Shorthand Utilities (1px solid)
   ============================================ */
/* All sides */
.border-all {
    border: 1px solid var(--black);
}

.border-all-blue {
    border: 1px solid var(--blue);
}

.border-all-dark-blue {
    border: 1px solid var(--dark-blue);
}

.border-all-gold {
    border: 1px solid var(--gold);
}

.border-all-dark-gold {
    border: 1px solid var(--dark-gold);
}

.border-all-white {
    border: 1px solid var(--background-white);
}

/* Top */
.border-top {
    border-top: 1px solid var(--black);
}

.border-top-blue {
    border-top: 1px solid var(--blue);
}

.border-top-gold {
    border-top: 1px solid var(--gold);
}

/* Right */
.border-right {
    border-right: 1px solid var(--black);
}

.border-right-blue {
    border-right: 1px solid var(--blue);
}

.border-right-gold {
    border-right: 1px solid var(--gold);
}

/* Bottom */
.border-bottom {
    border-bottom: 1px solid var(--black);
}

.border-bottom-blue {
    border-bottom: 1px solid var(--blue);
}

.border-bottom-gold {
    border-bottom: 1px solid var(--gold);
}

/* Left */
.border-left {
    border-left: 1px solid var(--black);
}

.border-left-blue {
    border-left: 1px solid var(--blue);
}

.border-left-gold {
    border-left: 1px solid var(--gold);
}

/* ============================================
   Flexbox Utilities
   ============================================ */
.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

/* Flex Direction */
.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

/* Flex Wrap */
.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 */
.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-center {
    align-items: center;
}

.align-baseline {
    align-items: baseline;
}

.align-stretch {
    align-items: stretch;
}

/* Align Self */
.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

.align-self-baseline {
    align-self: baseline;
}

.align-self-stretch {
    align-self: stretch;
}

/* Flex Grow & Shrink */
.flex-grow-0 {
    flex-grow: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-shrink-1 {
    flex-shrink: 1;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-none {
    flex: none;
}

/* ============================================
   Grid Utilities
   ============================================ */
.d-grid {
    display: grid;
}

.d-inline-grid {
    display: inline-grid;
}

/* Grid Template Columns */
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Grid Template Rows */
.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

/* Grid Column Span */
.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.col-span-full {
    grid-column: 1 / -1;
}

/* Grid Row Span */
.row-span-1 {
    grid-row: span 1 / span 1;
}

.row-span-2 {
    grid-row: span 2 / span 2;
}

.row-span-3 {
    grid-row: span 3 / span 3;
}

.row-span-4 {
    grid-row: span 4 / span 4;
}

.row-span-full {
    grid-row: 1 / -1;
}

/* Place Items */
.place-items-start {
    place-items: start;
}

.place-items-end {
    place-items: end;
}

.place-items-center {
    place-items: center;
}

.place-items-stretch {
    place-items: stretch;
}

/* ============================================
   Gap Utilities (4-point system: 0-256px)
   ============================================ */
.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-28 {
    gap: 28px;
}

.gap-32 {
    gap: 32px;
}

.gap-36 {
    gap: 36px;
}

.gap-40 {
    gap: 40px;
}

.gap-48 {
    gap: 48px;
}

.gap-56 {
    gap: 56px;
}

.gap-64 {
    gap: 64px;
}

.gap-72 {
    gap: 72px;
}

.gap-80 {
    gap: 80px;
}

.gap-96 {
    gap: 96px;
}

.gap-128 {
    gap: 128px;
}

.gap-160 {
    gap: 160px;
}

.gap-192 {
    gap: 192px;
}

.gap-224 {
    gap: 224px;
}

.gap-256 {
    gap: 256px;
}

/* Row Gap */
.row-gap-0 {
    row-gap: 0;
}

.row-gap-4 {
    row-gap: 4px;
}

.row-gap-8 {
    row-gap: 8px;
}

.row-gap-12 {
    row-gap: 12px;
}

.row-gap-16 {
    row-gap: 16px;
}

.row-gap-20 {
    row-gap: 20px;
}

.row-gap-24 {
    row-gap: 24px;
}

.row-gap-32 {
    row-gap: 32px;
}

.row-gap-40 {
    row-gap: 40px;
}

.row-gap-48 {
    row-gap: 48px;
}

.row-gap-64 {
    row-gap: 64px;
}

/* Column Gap */
.col-gap-0 {
    column-gap: 0;
}

.col-gap-4 {
    column-gap: 4px;
}

.col-gap-8 {
    column-gap: 8px;
}

.col-gap-12 {
    column-gap: 12px;
}

.col-gap-16 {
    column-gap: 16px;
}

.col-gap-20 {
    column-gap: 20px;
}

.col-gap-24 {
    column-gap: 24px;
}

.col-gap-32 {
    column-gap: 32px;
}

.col-gap-40 {
    column-gap: 40px;
}

.col-gap-48 {
    column-gap: 48px;
}

.col-gap-64 {
    column-gap: 64px;
}

/* ============================================
   Margin Utilities (4-point system: 0-256px)
   ============================================ */

/* Margin All */
.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-28 {
    margin: 28px;
}

.m-32 {
    margin: 32px;
}

.m-36 {
    margin: 36px;
}

.m-40 {
    margin: 40px;
}

.m-48 {
    margin: 48px;
}

.m-56 {
    margin: 56px;
}

.m-64 {
    margin: 64px;
}

.m-72 {
    margin: 72px;
}

.m-80 {
    margin: 80px;
}

.m-96 {
    margin: 96px;
}

.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-28 {
    margin-top: 28px;
}

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

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

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

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

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

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

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

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

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

.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;
}

/* 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-28 {
    margin-right: 28px;
}

.mr-32 {
    margin-right: 32px;
}

.mr-36 {
    margin-right: 36px;
}

.mr-40 {
    margin-right: 40px;
}

.mr-48 {
    margin-right: 48px;
}

.mr-56 {
    margin-right: 56px;
}

.mr-64 {
    margin-right: 64px;
}

.mr-72 {
    margin-right: 72px;
}

.mr-80 {
    margin-right: 80px;
}

.mr-96 {
    margin-right: 96px;
}

.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-28 {
    margin-bottom: 28px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-36 {
    margin-bottom: 36px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-48 {
    margin-bottom: 48px;
}

.mb-56 {
    margin-bottom: 56px;
}

.mb-64 {
    margin-bottom: 64px;
}

.mb-72 {
    margin-bottom: 72px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mb-96 {
    margin-bottom: 96px;
}

.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-28 {
    margin-left: 28px;
}

.ml-32 {
    margin-left: 32px;
}

.ml-36 {
    margin-left: 36px;
}

.ml-40 {
    margin-left: 40px;
}

.ml-48 {
    margin-left: 48px;
}

.ml-56 {
    margin-left: 56px;
}

.ml-64 {
    margin-left: 64px;
}

.ml-72 {
    margin-left: 72px;
}

.ml-80 {
    margin-left: 80px;
}

.ml-96 {
    margin-left: 96px;
}

.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 (Left + Right) */
.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-64 {
    margin-left: 64px;
    margin-right: 64px;
}

.mx-80 {
    margin-left: 80px;
    margin-right: 80px;
}

.mx-96 {
    margin-left: 96px;
    margin-right: 96px;
}

.mx-128 {
    margin-left: 128px;
    margin-right: 128px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Margin Y (Top + Bottom) */
.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-64 {
    margin-top: 64px;
    margin-bottom: 64px;
}

.my-80 {
    margin-top: 80px;
    margin-bottom: 80px;
}

.my-96 {
    margin-top: 96px;
    margin-bottom: 96px;
}

.my-128 {
    margin-top: 128px;
    margin-bottom: 128px;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

/* ============================================
   Padding Utilities (4-point system: 0-256px)
   ============================================ */

/* Padding All */
.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-28 {
    padding: 28px;
}

.p-32 {
    padding: 32px;
}

.p-36 {
    padding: 36px;
}

.p-40 {
    padding: 40px;
}

.p-48 {
    padding: 48px;
}

.p-56 {
    padding: 56px;
}

.p-64 {
    padding: 64px;
}

.p-72 {
    padding: 72px;
}

.p-80 {
    padding: 80px;
}

.p-96 {
    padding: 96px;
}

.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-28 {
    padding-top: 28px;
}

.pt-32 {
    padding-top: 32px;
}

.pt-36 {
    padding-top: 36px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-48 {
    padding-top: 48px;
}

.pt-56 {
    padding-top: 56px;
}

.pt-64 {
    padding-top: 64px;
}

.pt-72 {
    padding-top: 72px;
}

.pt-80 {
    padding-top: 80px;
}

.pt-96 {
    padding-top: 96px;
}

.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-28 {
    padding-right: 28px;
}

.pr-32 {
    padding-right: 32px;
}

.pr-36 {
    padding-right: 36px;
}

.pr-40 {
    padding-right: 40px;
}

.pr-48 {
    padding-right: 48px;
}

.pr-56 {
    padding-right: 56px;
}

.pr-64 {
    padding-right: 64px;
}

.pr-72 {
    padding-right: 72px;
}

.pr-80 {
    padding-right: 80px;
}

.pr-96 {
    padding-right: 96px;
}

.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-28 {
    padding-bottom: 28px;
}

.pb-32 {
    padding-bottom: 32px;
}

.pb-36 {
    padding-bottom: 36px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-48 {
    padding-bottom: 48px;
}

.pb-56 {
    padding-bottom: 56px;
}

.pb-64 {
    padding-bottom: 64px;
}

.pb-72 {
    padding-bottom: 72px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pb-96 {
    padding-bottom: 96px;
}

.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-28 {
    padding-left: 28px;
}

.pl-32 {
    padding-left: 32px;
}

.pl-36 {
    padding-left: 36px;
}

.pl-40 {
    padding-left: 40px;
}

.pl-48 {
    padding-left: 48px;
}

.pl-56 {
    padding-left: 56px;
}

.pl-64 {
    padding-left: 64px;
}

.pl-72 {
    padding-left: 72px;
}

.pl-80 {
    padding-left: 80px;
}

.pl-96 {
    padding-left: 96px;
}

.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 (Left + Right) */
.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-64 {
    padding-left: 64px;
    padding-right: 64px;
}

.px-80 {
    padding-left: 80px;
    padding-right: 80px;
}

.px-96 {
    padding-left: 96px;
    padding-right: 96px;
}

.px-128 {
    padding-left: 128px;
    padding-right: 128px;
}

/* Padding Y (Top + Bottom) */
.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-64 {
    padding-top: 64px;
    padding-bottom: 64px;
}

.py-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.py-96 {
    padding-top: 96px;
    padding-bottom: 96px;
}

.py-128 {
    padding-top: 128px;
    padding-bottom: 128px;
}

/* ============================================
   Width & Height Utilities
   ============================================ */
.w-screen {
    width: 100vw;
}

.w-auto {
    width: auto;
}

.w-fit {
    width: fit-content;
}

.w-min {
    width: min-content;
}

.w-max {
    width: max-content;
}

.w-50 {
    width: 50%;
}

.w-33 {
    width: 33.333333%;
}

.w-25 {
    width: 25%;
}

.w-20 {
    width: 20%;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-auto {
    height: auto;
}

.h-fit {
    height: fit-content;
}

.w-40 {
    width: 40px;
}

.h-40 {
    height: 40px;
}

/* ============================================
   Text Size Utilities
   ============================================ */
.text-sm {
    font-size: 14px;
}

.text-base {
    font-size: 16px;
}

.text-lg {
    font-size: 18px;
}

.text-xl {
    font-size: 20px;
}

.text-2xl {
    font-size: 24px;
}

/* Translucent Border */
.border-white-10 {
    border-color: rgba(255, 255, 255, 0.1);
}

.h-min {
    height: min-content;
}

.h-max {
    height: max-content;
}

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

.min-w-full {
    min-width: 100%;
}

.max-w-full {
    max-width: 100%;
}

/* ============================================
   Position Utilities
   ============================================ */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.static {
    position: static;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.top-0 {
    top: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

/* ============================================
   Display Utilities
   ============================================ */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

/* ============================================
   Text Utilities
   ============================================ */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-normal {
    text-transform: none;
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* ============================================
   Overflow Utilities
   ============================================ */
.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

/* ============================================
   Visibility & Opacity
   ============================================ */
.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

.opacity-0 {
    opacity: 0;
}

.opacity-25 {
    opacity: 0.25;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}

/* ============================================
   Cursor Utilities
   ============================================ */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-grab {
    cursor: grab;
}

/* ============================================
   Z-Index Utilities
   ============================================ */
.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-999 {
    z-index: 999;
}

.z-9999 {
    z-index: 9999;
}

/* ============================================
   Border Radius Utilities
   ============================================ */
.rounded-none {
    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-full {
    border-radius: 9999px;
}

/* ============================================
   Transition Utilities
   ============================================ */
/* Transition Duration */
.transition {
    transition: all 0.3s ease;
}

.transition-none {
    transition: none;
}

.transition-fast {
    transition: all 0.15s ease;
}

.transition-slow {
    transition: all 0.5s ease;
}

.duration-75 {
    transition-duration: 75ms;
}

.duration-100 {
    transition-duration: 100ms;
}

.duration-150 {
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.duration-700 {
    transition-duration: 700ms;
}

.duration-1000 {
    transition-duration: 1000ms;
}

/* Transition Timing */
.ease-linear {
    transition-timing-function: linear;
}

.ease-in {
    transition-timing-function: ease-in;
}

.ease-out {
    transition-timing-function: ease-out;
}

.ease-in-out {
    transition-timing-function: ease-in-out;
}

/* Transition Property */
.transition-all {
    transition-property: all;
}

.transition-colors {
    transition-property: color, background-color, border-color;
}

.transition-opacity {
    transition-property: opacity;
}

.transition-transform {
    transition-property: transform;
}

.transition-shadow {
    transition-property: box-shadow;
}

/* Transform Utilities */
.transform {
    transform: translateX(0);
}

.scale-95 {
    transform: scale(0.95);
}

.scale-100 {
    transform: scale(1);
}

.scale-105 {
    transform: scale(1.05);
}

.scale-110 {
    transform: scale(1.1);
}

.hover-scale-105:hover {
    transform: scale(1.05);
}

.hover-scale-110:hover {
    transform: scale(1.1);
}

.hover-scale-95:hover {
    transform: scale(0.95);
}

.translate-y-0 {
    transform: translateY(0);
}

.translate-y-1 {
    transform: translateY(4px);
}

.translate-y-2 {
    transform: translateY(8px);
}

.-translate-y-1 {
    transform: translateY(-4px);
}

.-translate-y-2 {
    transform: translateY(-8px);
}

.hover-translate-y-1:hover {
    transform: translateY(-4px);
}

.hover-translate-y-2:hover {
    transform: translateY(-8px);
}

/* Hover Opacity */
.hover-opacity-75:hover {
    opacity: 0.75;
}

.hover-opacity-50:hover {
    opacity: 0.5;
}

.hover-opacity-100:hover {
    opacity: 1;
}

/* ============================================
   RESPONSIVE UTILITY CLASSES
   ============================================
   
   Breakpoint System:
   - sm: 576px and up (Small devices)
   - md: 768px and up (Medium devices / Tablets)
   - lg: 992px and up (Large devices / Desktops)
   - xl: 1200px and up (Extra large devices)
   - xxl: 1400px and up (Extra extra large devices)
   
   Usage: .{breakpoint}-{utility}
   Example: .md-d-flex, .lg-gap-32, .xl-p-64
   ============================================ */

/* ============================================
   Small Devices (576px and up)
   ============================================ */
@media (min-width: 576px) {

    /* Display */
    .sm-d-none {
        display: none;
    }

    .sm-d-block {
        display: block;
    }

    .sm-d-flex {
        display: flex;
    }

    .sm-d-grid {
        display: grid;
    }

    .sm-d-inline {
        display: inline;
    }

    .sm-d-inline-block {
        display: inline-block;
    }

    .sm-d-inline-flex {
        display: inline-flex;
    }

    /* Flex Direction */
    .sm-flex-row {
        flex-direction: row;
    }

    .sm-flex-column {
        flex-direction: column;
    }

    .sm-flex-row-reverse {
        flex-direction: row-reverse;
    }

    .sm-flex-column-reverse {
        flex-direction: column-reverse;
    }

    /* Flex Wrap */
    .sm-flex-wrap {
        flex-wrap: wrap;
    }

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

    /* Justify Content */
    .sm-justify-start {
        justify-content: flex-start;
    }

    .sm-justify-end {
        justify-content: flex-end;
    }

    .sm-justify-center {
        justify-content: center;
    }

    .sm-justify-between {
        justify-content: space-between;
    }

    .sm-justify-around {
        justify-content: space-around;
    }

    .sm-justify-evenly {
        justify-content: space-evenly;
    }

    /* Align Items */
    .sm-align-start {
        align-items: flex-start;
    }

    .sm-align-end {
        align-items: flex-end;
    }

    .sm-align-center {
        align-items: center;
    }

    .sm-align-stretch {
        align-items: stretch;
    }

    /* Grid Columns */
    .sm-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .sm-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sm-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    /* Gap */
    .sm-gap-0 {
        gap: 0;
    }

    .sm-gap-4 {
        gap: 4px;
    }

    .sm-gap-8 {
        gap: 8px;
    }

    .sm-gap-12 {
        gap: 12px;
    }

    .sm-gap-16 {
        gap: 16px;
    }

    .sm-gap-20 {
        gap: 20px;
    }

    .sm-gap-24 {
        gap: 24px;
    }

    .sm-gap-32 {
        gap: 32px;
    }

    .sm-gap-40 {
        gap: 40px;
    }

    .sm-gap-48 {
        gap: 48px;
    }

    .sm-gap-64 {
        gap: 64px;
    }

    /* Padding */
    .sm-p-0 {
        padding: 0;
    }

    .sm-p-8 {
        padding: 8px;
    }

    .sm-p-16 {
        padding: 16px;
    }

    .sm-p-24 {
        padding: 24px;
    }

    .sm-p-32 {
        padding: 32px;
    }

    .sm-p-40 {
        padding: 40px;
    }

    .sm-p-48 {
        padding: 48px;
    }

    .sm-p-64 {
        padding: 64px;
    }

    .sm-px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .sm-px-16 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sm-px-24 {
        padding-left: 24px;
        padding-right: 24px;
    }

    .sm-px-32 {
        padding-left: 32px;
        padding-right: 32px;
    }

    .sm-px-48 {
        padding-left: 48px;
        padding-right: 48px;
    }

    .sm-px-64 {
        padding-left: 64px;
        padding-right: 64px;
    }

    .sm-py-0 {
        padding-top: 0;
        padding-bottom: 0;
    }

    .sm-py-16 {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .sm-py-24 {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .sm-py-32 {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .sm-py-48 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .sm-py-64 {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    /* Margin */
    .sm-m-0 {
        margin: 0;
    }

    .sm-m-auto {
        margin: auto;
    }

    .sm-mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .sm-mt-0 {
        margin-top: 0;
    }

    .sm-mt-16 {
        margin-top: 16px;
    }

    .sm-mt-24 {
        margin-top: 24px;
    }

    .sm-mt-32 {
        margin-top: 32px;
    }

    .sm-mt-48 {
        margin-top: 48px;
    }

    .sm-mb-0 {
        margin-bottom: 0;
    }

    .sm-mb-16 {
        margin-bottom: 16px;
    }

    .sm-mb-24 {
        margin-bottom: 24px;
    }

    .sm-mb-32 {
        margin-bottom: 32px;
    }

    .sm-mb-48 {
        margin-bottom: 48px;
    }

    /* Width */
    .sm-w-full {
        width: 100% !important;
    }

    .sm-w-auto {
        width: auto;
    }

    .sm-w-50 {
        width: 50%;
    }

    /* Text */
    .sm-text-left {
        text-align: left;
    }

    .sm-text-center {
        text-align: center;
    }

    .sm-text-right {
        text-align: right;
    }
}

/* ============================================
   Medium Devices (768px and up)
   ============================================ */
@media (min-width: 768px) {

    /* Display */
    .md-d-none {
        display: none;
    }

    .md-d-block {
        display: block;
    }

    .md-d-flex {
        display: flex;
    }

    .md-d-grid {
        display: grid;
    }

    .md-d-inline {
        display: inline;
    }

    .md-d-inline-block {
        display: inline-block;
    }

    .md-d-inline-flex {
        display: inline-flex;
    }

    /* Flex Direction */
    .md-flex-row {
        flex-direction: row;
    }

    .md-flex-column {
        flex-direction: column;
    }

    .md-flex-row-reverse {
        flex-direction: row-reverse;
    }

    .md-flex-column-reverse {
        flex-direction: column-reverse;
    }

    /* Flex Wrap */
    .md-flex-wrap {
        flex-wrap: wrap;
    }

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

    /* Justify Content */
    .md-justify-start {
        justify-content: flex-start;
    }

    .md-justify-end {
        justify-content: flex-end;
    }

    .md-justify-center {
        justify-content: center;
    }

    .md-justify-between {
        justify-content: space-between;
    }

    .md-justify-around {
        justify-content: space-around;
    }

    .md-justify-evenly {
        justify-content: space-evenly;
    }

    /* Align Items */
    .md-align-start {
        align-items: flex-start;
    }

    .md-align-end {
        align-items: flex-end;
    }

    .md-align-center {
        align-items: center;
    }

    .md-align-stretch {
        align-items: stretch;
    }

    /* Grid Columns */
    .md-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .md-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .md-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    /* Gap */
    .md-gap-0 {
        gap: 0;
    }

    .md-gap-4 {
        gap: 4px;
    }

    .md-gap-8 {
        gap: 8px;
    }

    .md-gap-12 {
        gap: 12px;
    }

    .md-gap-16 {
        gap: 16px;
    }

    .md-gap-20 {
        gap: 20px;
    }

    .md-gap-24 {
        gap: 24px;
    }

    .md-gap-32 {
        gap: 32px;
    }

    .md-gap-40 {
        gap: 40px;
    }

    .md-gap-48 {
        gap: 48px;
    }

    .md-gap-64 {
        gap: 64px;
    }

    /* Padding */
    .md-p-0 {
        padding: 0;
    }

    .md-p-8 {
        padding: 8px;
    }

    .md-p-16 {
        padding: 16px;
    }

    .md-p-24 {
        padding: 24px;
    }

    .md-p-32 {
        padding: 32px;
    }

    .md-p-40 {
        padding: 40px;
    }

    .md-p-48 {
        padding: 48px;
    }

    .md-p-64 {
        padding: 64px;
    }

    .md-p-80 {
        padding: 80px;
    }

    .md-p-96 {
        padding: 96px;
    }

    .md-px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .md-px-16 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .md-px-24 {
        padding-left: 24px;
        padding-right: 24px;
    }

    .md-px-32 {
        padding-left: 32px;
        padding-right: 32px;
    }

    .md-px-48 {
        padding-left: 48px;
        padding-right: 48px;
    }

    .md-px-64 {
        padding-left: 64px;
        padding-right: 64px;
    }

    .md-px-80 {
        padding-left: 80px;
        padding-right: 80px;
    }

    .md-py-0 {
        padding-top: 0;
        padding-bottom: 0;
    }

    .md-py-16 {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .md-py-24 {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .md-py-32 {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .md-py-48 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .md-py-64 {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .md-py-80 {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    /* Margin */
    .md-m-0 {
        margin: 0;
    }

    .md-m-auto {
        margin: auto;
    }

    .md-mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .md-mt-0 {
        margin-top: 0;
    }

    .md-mt-16 {
        margin-top: 16px;
    }

    .md-mt-24 {
        margin-top: 24px;
    }

    .md-mt-32 {
        margin-top: 32px;
    }

    .md-mt-48 {
        margin-top: 48px;
    }

    .md-mt-64 {
        margin-top: 64px;
    }

    .md-mb-0 {
        margin-bottom: 0;
    }

    .md-mb-16 {
        margin-bottom: 16px;
    }

    .md-mb-24 {
        margin-bottom: 24px;
    }

    .md-mb-32 {
        margin-bottom: 32px;
    }

    .md-mb-48 {
        margin-bottom: 48px;
    }

    .md-mb-64 {
        margin-bottom: 64px;
    }

    /* Width */
    .md-w-full {
        width: 100% !important;
    }

    .md-w-auto {
        width: auto;
    }

    .md-w-50 {
        width: 50%;
    }

    .md-w-33 {
        width: 33.333333%;
    }

    /* Text */
    .md-text-left {
        text-align: left;
    }

    .md-text-center {
        text-align: center;
    }

    .md-text-right {
        text-align: right;
    }

    /* Order */
    .md-order-1 {
        order: 1;
    }

    .md-order-2 {
        order: 2;
    }

    .md-order-first {
        order: -1;
    }

    .md-order-last {
        order: 999;
    }
}

/* ============================================
   Large Devices (992px and up)
   ============================================ */
@media (min-width: 992px) {

    /* Display */
    .lg-d-none {
        display: none;
    }

    .lg-d-block {
        display: block;
    }

    .lg-d-flex {
        display: flex;
    }

    .lg-d-grid {
        display: grid;
    }

    .lg-d-inline {
        display: inline;
    }

    .lg-d-inline-block {
        display: inline-block;
    }

    .lg-d-inline-flex {
        display: inline-flex;
    }

    /* Flex Direction */
    .lg-flex-row {
        flex-direction: row;
    }

    .lg-flex-column {
        flex-direction: column;
    }

    .lg-flex-row-reverse {
        flex-direction: row-reverse;
    }

    .lg-flex-column-reverse {
        flex-direction: column-reverse;
    }

    /* Flex Wrap */
    .lg-flex-wrap {
        flex-wrap: wrap;
    }

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

    /* Justify Content */
    .lg-justify-start {
        justify-content: flex-start;
    }

    .lg-justify-end {
        justify-content: flex-end;
    }

    .lg-justify-center {
        justify-content: center;
    }

    .lg-justify-between {
        justify-content: space-between;
    }

    .lg-justify-around {
        justify-content: space-around;
    }

    .lg-justify-evenly {
        justify-content: space-evenly;
    }

    /* Align Items */
    .lg-align-start {
        align-items: flex-start;
    }

    .lg-align-end {
        align-items: flex-end;
    }

    .lg-align-center {
        align-items: center;
    }

    .lg-align-stretch {
        align-items: stretch;
    }

    /* Grid Columns */
    .lg-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    /* Gap */
    .lg-gap-0 {
        gap: 0;
    }

    .lg-gap-4 {
        gap: 4px;
    }

    .lg-gap-8 {
        gap: 8px;
    }

    .lg-gap-12 {
        gap: 12px;
    }

    .lg-gap-16 {
        gap: 16px;
    }

    .lg-gap-20 {
        gap: 20px;
    }

    .lg-gap-24 {
        gap: 24px;
    }

    .lg-gap-32 {
        gap: 32px;
    }

    .lg-gap-40 {
        gap: 40px;
    }

    .lg-gap-48 {
        gap: 48px;
    }

    .lg-gap-64 {
        gap: 64px;
    }

    .lg-gap-80 {
        gap: 80px;
    }

    .lg-gap-256 {
        gap: 256px;
    }

    /* Padding */
    .lg-p-0 {
        padding: 0;
    }

    .lg-p-8 {
        padding: 8px;
    }

    .lg-p-16 {
        padding: 16px;
    }

    .lg-p-24 {
        padding: 24px;
    }

    .lg-p-32 {
        padding: 32px;
    }

    .lg-p-40 {
        padding: 40px;
    }

    .lg-p-48 {
        padding: 48px;
    }

    .lg-p-64 {
        padding: 64px;
    }

    .lg-p-80 {
        padding: 80px;
    }

    .lg-p-96 {
        padding: 96px;
    }

    .lg-p-128 {
        padding: 128px;
    }

    .lg-px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .lg-px-16 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .lg-px-24 {
        padding-left: 24px;
        padding-right: 24px;
    }

    .lg-px-32 {
        padding-left: 32px;
        padding-right: 32px;
    }

    .lg-px-48 {
        padding-left: 48px;
        padding-right: 48px;
    }

    .lg-px-64 {
        padding-left: 64px;
        padding-right: 64px;
    }

    .lg-px-80 {
        padding-left: 80px;
        padding-right: 80px;
    }

    .lg-px-96 {
        padding-left: 96px;
        padding-right: 96px;
    }

    .lg-py-0 {
        padding-top: 0;
        padding-bottom: 0;
    }

    .lg-py-16 {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .lg-py-24 {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .lg-py-32 {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .lg-py-48 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .lg-py-64 {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .lg-py-80 {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .lg-py-96 {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    /* Margin */
    .lg-m-0 {
        margin: 0;
    }

    .lg-m-auto {
        margin: auto;
    }

    .lg-mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .lg-mt-0 {
        margin-top: 0;
    }

    .lg-mt-16 {
        margin-top: 16px;
    }

    .lg-mt-24 {
        margin-top: 24px;
    }

    .lg-mt-32 {
        margin-top: 32px;
    }

    .lg-mt-48 {
        margin-top: 48px;
    }

    .lg-mt-64 {
        margin-top: 64px;
    }

    .lg-mt-80 {
        margin-top: 80px;
    }

    .lg-mb-0 {
        margin-bottom: 0;
    }

    .lg-mb-16 {
        margin-bottom: 16px;
    }

    .lg-mb-24 {
        margin-bottom: 24px;
    }

    .lg-mb-32 {
        margin-bottom: 32px;
    }

    .lg-mb-48 {
        margin-bottom: 48px;
    }

    .lg-mb-64 {
        margin-bottom: 64px;
    }

    .lg-mb-80 {
        margin-bottom: 80px;
    }

    /* Width */
    .lg-w-full {
        width: 100% !important;
    }

    .lg-w-auto {
        width: auto;
    }

    .lg-w-50 {
        width: 50%;
    }

    .lg-w-33 {
        width: 33.333333%;
    }

    .lg-w-25 {
        width: 25%;
    }

    /* Text */
    .lg-text-left {
        text-align: left;
    }

    .lg-text-center {
        text-align: center;
    }

    .lg-text-right {
        text-align: right;
    }

    /* Order */
    .lg-order-1 {
        order: 1;
    }

    .lg-order-2 {
        order: 2;
    }

    .lg-order-first {
        order: -1;
    }

    .lg-order-last {
        order: 999;
    }
}

/* ============================================
   Extra Large Devices (1200px and up)
   ============================================ */
@media (min-width: 1200px) {

    /* Display */
    .xl-d-none {
        display: none;
    }

    .xl-d-block {
        display: block;
    }

    .xl-d-flex {
        display: flex;
    }

    .xl-d-grid {
        display: grid;
    }

    .xl-d-inline {
        display: inline;
    }

    .xl-d-inline-block {
        display: inline-block;
    }

    .xl-d-inline-flex {
        display: inline-flex;
    }

    /* Flex Direction */
    .xl-flex-row {
        flex-direction: row;
    }

    .xl-flex-column {
        flex-direction: column;
    }

    .xl-flex-row-reverse {
        flex-direction: row-reverse;
    }

    .xl-flex-column-reverse {
        flex-direction: column-reverse;
    }

    /* Justify Content */
    .xl-justify-start {
        justify-content: flex-start;
    }

    .xl-justify-end {
        justify-content: flex-end;
    }

    .xl-justify-center {
        justify-content: center;
    }

    .xl-justify-between {
        justify-content: space-between;
    }

    .xl-justify-around {
        justify-content: space-around;
    }

    .xl-justify-evenly {
        justify-content: space-evenly;
    }

    /* Align Items */
    .xl-align-start {
        align-items: flex-start;
    }

    .xl-align-end {
        align-items: flex-end;
    }

    .xl-align-center {
        align-items: center;
    }

    .xl-align-stretch {
        align-items: stretch;
    }

    /* Grid Columns */
    .xl-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .xl-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .xl-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .xl-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    /* Gap */
    .xl-gap-0 {
        gap: 0;
    }

    .xl-gap-8 {
        gap: 8px;
    }

    .xl-gap-16 {
        gap: 16px;
    }

    .xl-gap-24 {
        gap: 24px;
    }

    .xl-gap-32 {
        gap: 32px;
    }

    .xl-gap-40 {
        gap: 40px;
    }

    .xl-gap-48 {
        gap: 48px;
    }

    .xl-gap-64 {
        gap: 64px;
    }

    .xl-gap-80 {
        gap: 80px;
    }

    .xl-gap-96 {
        gap: 96px;
    }

    .xl-gap-256 {
        gap: 256px;
    }

    /* Padding */
    .xl-p-0 {
        padding: 0;
    }

    .xl-p-16 {
        padding: 16px;
    }

    .xl-p-24 {
        padding: 24px;
    }

    .xl-p-32 {
        padding: 32px;
    }

    .xl-p-48 {
        padding: 48px;
    }

    .xl-p-64 {
        padding: 64px;
    }

    .xl-p-80 {
        padding: 80px;
    }

    .xl-p-96 {
        padding: 96px;
    }

    .xl-p-128 {
        padding: 128px;
    }

    .xl-px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .xl-px-24 {
        padding-left: 24px;
        padding-right: 24px;
    }

    .xl-px-32 {
        padding-left: 32px;
        padding-right: 32px;
    }

    .xl-px-48 {
        padding-left: 48px;
        padding-right: 48px;
    }

    .xl-px-64 {
        padding-left: 64px;
        padding-right: 64px;
    }

    .xl-px-80 {
        padding-left: 80px;
        padding-right: 80px;
    }

    .xl-px-96 {
        padding-left: 96px;
        padding-right: 96px;
    }

    .xl-px-128 {
        padding-left: 128px;
        padding-right: 128px;
    }

    .xl-py-0 {
        padding-top: 0;
        padding-bottom: 0;
    }

    .xl-py-24 {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .xl-py-32 {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .xl-py-48 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .xl-py-64 {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .xl-py-80 {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .xl-py-96 {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .xl-py-128 {
        padding-top: 128px;
        padding-bottom: 128px;
    }

    /* Margin */
    .xl-m-0 {
        margin: 0;
    }

    .xl-mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .xl-mt-0 {
        margin-top: 0;
    }

    .xl-mt-24 {
        margin-top: 24px;
    }

    .xl-mt-32 {
        margin-top: 32px;
    }

    .xl-mt-48 {
        margin-top: 48px;
    }

    .xl-mt-64 {
        margin-top: 64px;
    }

    .xl-mt-80 {
        margin-top: 80px;
    }

    .xl-mt-96 {
        margin-top: 96px;
    }

    .xl-mb-0 {
        margin-bottom: 0;
    }

    .xl-mb-24 {
        margin-bottom: 24px;
    }

    .xl-mb-32 {
        margin-bottom: 32px;
    }

    .xl-mb-48 {
        margin-bottom: 48px;
    }

    .xl-mb-64 {
        margin-bottom: 64px;
    }

    .xl-mb-80 {
        margin-bottom: 80px;
    }

    .xl-mb-96 {
        margin-bottom: 96px;
    }

    /* Width */
    .xl-w-full {
        width: 100% !important;
    }

    .xl-w-auto {
        width: auto;
    }

    .xl-w-50 {
        width: 50%;
    }

    .xl-w-33 {
        width: 33.333333%;
    }

    .xl-w-25 {
        width: 25%;
    }

    .xl-w-20 {
        width: 20%;
    }

    /* Text */
    .xl-text-left {
        text-align: left;
    }

    .xl-text-center {
        text-align: center;
    }

    .xl-text-right {
        text-align: right;
    }

    /* Order */
    .xl-order-1 {
        order: 1;
    }

    .xl-order-2 {
        order: 2;
    }

    .xl-order-first {
        order: -1;
    }

    .xl-order-last {
        order: 999;
    }
}

/* ============================================
   Extra Extra Large Devices (1400px and up)
   ============================================ */
@media (min-width: 1400px) {

    /* Display */
    .xxl-d-none {
        display: none;
    }

    .xxl-d-block {
        display: block;
    }

    .xxl-d-flex {
        display: flex;
    }

    .xxl-d-grid {
        display: grid;
    }

    /* Flex Direction */
    .xxl-flex-row {
        flex-direction: row;
    }

    .xxl-flex-column {
        flex-direction: column;
    }

    /* Justify Content */
    .xxl-justify-start {
        justify-content: flex-start;
    }

    .xxl-justify-end {
        justify-content: flex-end;
    }

    .xxl-justify-center {
        justify-content: center;
    }

    .xxl-justify-between {
        justify-content: space-between;
    }

    /* Align Items */
    .xxl-align-start {
        align-items: flex-start;
    }

    .xxl-align-end {
        align-items: flex-end;
    }

    .xxl-align-center {
        align-items: center;
    }

    /* Grid Columns */
    .xxl-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xxl-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xxl-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xxl-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .xxl-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    /* Gap */
    .xxl-gap-16 {
        gap: 16px;
    }

    .xxl-gap-24 {
        gap: 24px;
    }

    .xxl-gap-32 {
        gap: 32px;
    }

    .xxl-gap-48 {
        gap: 48px;
    }

    .xxl-gap-64 {
        gap: 64px;
    }

    .xxl-gap-80 {
        gap: 80px;
    }

    /* Padding */
    .xxl-p-32 {
        padding: 32px;
    }

    .xxl-p-48 {
        padding: 48px;
    }

    .xxl-p-64 {
        padding: 64px;
    }

    .xxl-p-96 {
        padding: 96px;
    }

    .xxl-p-128 {
        padding: 128px;
    }

    .xxl-px-48 {
        padding-left: 48px;
        padding-right: 48px;
    }

    .xxl-px-64 {
        padding-left: 64px;
        padding-right: 64px;
    }

    .xxl-px-96 {
        padding-left: 96px;
        padding-right: 96px;
    }

    .xxl-px-128 {
        padding-left: 128px;
        padding-right: 128px;
    }

    .xxl-py-48 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .xxl-py-64 {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .xxl-py-96 {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .xxl-py-128 {
        padding-top: 128px;
        padding-bottom: 128px;
    }

    /* Margin */
    .xxl-mt-32 {
        margin-top: 32px;
    }

    .xxl-mt-48 {
        margin-top: 48px;
    }

    .xxl-mt-64 {
        margin-top: 64px;
    }

    .xxl-mt-96 {
        margin-top: 96px;
    }

    .xxl-mb-32 {
        margin-bottom: 32px;
    }

    .xxl-mb-48 {
        margin-bottom: 48px;
    }

    .xxl-mb-64 {
        margin-bottom: 64px;
    }

    .xxl-mb-96 {
        margin-bottom: 96px;
    }

    /* Width */
    .xxl-w-full {
        width: 100% !important;
    }

    .xxl-w-auto {
        width: auto;
    }

    .xxl-w-50 {
        width: 50%;
    }

    .xxl-w-33 {
        width: 33.333333%;
    }

    .xxl-w-25 {
        width: 25%;
    }

    /* Text */
    .xxl-text-left {
        text-align: left;
    }

    .xxl-text-center {
        text-align: center;
    }

    .xxl-text-right {
        text-align: right;
    }
}