/* ================================ 
   RESPONSIVE GRID SYSTEM 
   ================================ */

/* CSS Variables for consistent spacing */
:root {
    --spacer-0: 0;
    --spacer-1: 0.25rem;  /* 4px */
    --spacer-2: 0.5rem;   /* 8px */
    --spacer-3: 1rem;     /* 16px */
    --spacer-4: 1.5rem;   /* 24px */
    --spacer-5: 3rem;     /* 48px */
    --spacer-6: 4.25rem;     /* 48px */
    --gutter: 12px;       /* Default gutter size */
}

/* Base row styles */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--gutter) * -1);
    margin-left: calc(var(--gutter) * -1);
}

/* Responsive Row utilities */
@media (min-width: 576px) {
    .row-sm {
        display: flex;
        flex-wrap: wrap;
        margin-right: calc(var(--gutter) * -1);
        margin-left: calc(var(--gutter) * -1);
    }
}

@media (min-width: 768px) {
    .row-md {
        display: flex;
        flex-wrap: wrap;
        margin-right: calc(var(--gutter) * -1);
        margin-left: calc(var(--gutter) * -1);
    }
}

@media (min-width: 992px) {
    .row-lg {
        display: flex;
        flex-wrap: wrap;
        margin-right: calc(var(--gutter) * -1);
        margin-left: calc(var(--gutter) * -1);
    }
}

@media (min-width: 1200px) {
    .row-xl {
        display: flex;
        flex-wrap: wrap;
        margin-right: calc(var(--gutter) * -1);
        margin-left: calc(var(--gutter) * -1);
    }
}

/* Base column styles */
.col {
    flex: 1 0 0;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
}

/* All column variants also inherit base padding */
[class*="col-"] {
    padding-right: var(--gutter);
    padding-left: var(--gutter);
}

/* Default grid columns (Mobile First) */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ================================
   ENHANCED FLEXBOX UTILITIES
   ================================ */

/* Flex Direction */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-col { flex-direction: column !important; }
.flex-column { flex-direction: column !important; }
.flex-col-reverse { flex-direction: column-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

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

/* Flex Flow (shorthand for direction + wrap) */
.flex-row-wrap { flex-flow: row wrap !important; }
.flex-row-nowrap { flex-flow: row nowrap !important; }
.flex-col-wrap { flex-flow: column wrap !important; }
.flex-column-wrap { flex-flow: column wrap !important; }
.flex-col-nowrap { flex-flow: column nowrap !important; }
.flex-column-nowrap { flex-flow: column nowrap !important; }

/* Flex Grow */
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-grow { flex-grow: 1 !important; }

/* Flex Shrink */
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-shrink { flex-shrink: 1 !important; }

/* Flex */
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-initial { flex: 0 1 auto !important; }
.flex-none { flex: none !important; }

/* Flex Fill */
.flex-fill { flex: 1 1 auto !important; }

/* ================================
   RESPONSIVE FLEXBOX UTILITIES - SMALL (576px+)
   ================================ */
@media (min-width: 576px) {
    /* SM Flex Direction */
    .flex-sm-row { flex-direction: row !important; }
    .flex-sm-row-reverse { flex-direction: row-reverse !important; }
    .flex-sm-col { flex-direction: column !important; }
    .flex-sm-column { flex-direction: column !important; }
    .flex-sm-col-reverse { flex-direction: column-reverse !important; }
    .flex-sm-column-reverse { flex-direction: column-reverse !important; }
    
    /* SM Flex Wrap */
    .flex-sm-wrap { flex-wrap: wrap !important; }
    .flex-sm-nowrap { flex-wrap: nowrap !important; }
    .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; }
    
    /* SM Flex Grow/Shrink */
    .flex-sm-grow-0 { flex-grow: 0 !important; }
    .flex-sm-grow-1 { flex-grow: 1 !important; }
    .flex-sm-grow { flex-grow: 1 !important; }
    
    .flex-sm-shrink-0 { flex-shrink: 0 !important; }
    .flex-sm-shrink-1 { flex-shrink: 1 !important; }
    .flex-sm-shrink { flex-shrink: 1 !important; }
    
    /* SM Flex */
    .flex-sm-1 { flex: 1 1 0% !important; }
    .flex-sm-auto { flex: 1 1 auto !important; }
    .flex-sm-initial { flex: 0 1 auto !important; }
    .flex-sm-none { flex: none !important; }
    .flex-sm-fill { flex: 1 1 auto !important; }
}

/* ================================
   RESPONSIVE FLEXBOX UTILITIES - MEDIUM (768px+)
   ================================ */
@media (min-width: 768px) {
    /* MD Flex Direction */
    .flex-md-row { flex-direction: row !important; }
    .flex-md-row-reverse { flex-direction: row-reverse !important; }
    .flex-md-col { flex-direction: column !important; }
    .flex-md-column { flex-direction: column !important; }
    .flex-md-col-reverse { flex-direction: column-reverse !important; }
    .flex-md-column-reverse { flex-direction: column-reverse !important; }
    
    /* MD Flex Wrap */
    .flex-md-wrap { flex-wrap: wrap !important; }
    .flex-md-nowrap { flex-wrap: nowrap !important; }
    .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; }
    
    /* MD Flex Grow/Shrink */
    .flex-md-grow-0 { flex-grow: 0 !important; }
    .flex-md-grow-1 { flex-grow: 1 !important; }
    .flex-md-grow { flex-grow: 1 !important; }
    
    .flex-md-shrink-0 { flex-shrink: 0 !important; }
    .flex-md-shrink-1 { flex-shrink: 1 !important; }
    .flex-md-shrink { flex-shrink: 1 !important; }
    
    /* MD Flex */
    .flex-md-1 { flex: 1 1 0% !important; }
    .flex-md-auto { flex: 1 1 auto !important; }
    .flex-md-initial { flex: 0 1 auto !important; }
    .flex-md-none { flex: none !important; }
    .flex-md-fill { flex: 1 1 auto !important; }
}

/* ================================
   RESPONSIVE FLEXBOX UTILITIES - LARGE (992px+)
   ================================ */
@media (min-width: 992px) {
    /* LG Flex Direction */
    .flex-lg-row { flex-direction: row !important; }
    .flex-lg-row-reverse { flex-direction: row-reverse !important; }
    .flex-lg-col { flex-direction: column !important; }
    .flex-lg-column { flex-direction: column !important; }
    .flex-lg-col-reverse { flex-direction: column-reverse !important; }
    .flex-lg-column-reverse { flex-direction: column-reverse !important; }
    
    /* LG Flex Wrap */
    .flex-lg-wrap { flex-wrap: wrap !important; }
    .flex-lg-nowrap { flex-wrap: nowrap !important; }
    .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; }
    
    /* LG Flex Grow/Shrink */
    .flex-lg-grow-0 { flex-grow: 0 !important; }
    .flex-lg-grow-1 { flex-grow: 1 !important; }
    .flex-lg-grow { flex-grow: 1 !important; }
    
    .flex-lg-shrink-0 { flex-shrink: 0 !important; }
    .flex-lg-shrink-1 { flex-shrink: 1 !important; }
    .flex-lg-shrink { flex-shrink: 1 !important; }
    
    /* LG Flex */
    .flex-lg-1 { flex: 1 1 0% !important; }
    .flex-lg-auto { flex: 1 1 auto !important; }
    .flex-lg-initial { flex: 0 1 auto !important; }
    .flex-lg-none { flex: none !important; }
    .flex-lg-fill { flex: 1 1 auto !important; }
}

/* ================================
   RESPONSIVE FLEXBOX UTILITIES - EXTRA LARGE (1200px+)
   ================================ */
@media (min-width: 1200px) {
    /* XL Flex Direction */
    .flex-xl-row { flex-direction: row !important; }
    .flex-xl-row-reverse { flex-direction: row-reverse !important; }
    .flex-xl-col { flex-direction: column !important; }
    .flex-xl-column { flex-direction: column !important; }
    .flex-xl-col-reverse { flex-direction: column-reverse !important; }
    .flex-xl-column-reverse { flex-direction: column-reverse !important; }
    
    /* XL Flex Wrap */
    .flex-xl-wrap { flex-wrap: wrap !important; }
    .flex-xl-nowrap { flex-wrap: nowrap !important; }
    .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; }
    
    /* XL Flex Grow/Shrink */
    .flex-xl-grow-0 { flex-grow: 0 !important; }
    .flex-xl-grow-1 { flex-grow: 1 !important; }
    .flex-xl-grow { flex-grow: 1 !important; }
    
    .flex-xl-shrink-0 { flex-shrink: 0 !important; }
    .flex-xl-shrink-1 { flex-shrink: 1 !important; }
    .flex-xl-shrink { flex-shrink: 1 !important; }
    
    /* XL Flex */
    .flex-xl-1 { flex: 1 1 0% !important; }
    .flex-xl-auto { flex: 1 1 auto !important; }
    .flex-xl-initial { flex: 0 1 auto !important; }
    .flex-xl-none { flex: none !important; }
    .flex-xl-fill { flex: 1 1 auto !important; }
}

/* ================================
   ENHANCED ALIGNMENT UTILITIES (already exist but ensure completeness)
   ================================ */

/* Justify Content (already exists in your code) */
.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 (already exists in your code) */
.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 */
.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 */
.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; }

/* ================================
   RESPONSIVE ALIGNMENT UTILITIES
   ================================ */

/* Responsive Justify Content - SMALL (576px+) */
@media (min-width: 576px) {
    .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; }
}

/* Responsive Alignment - MEDIUM (768px+) */
@media (min-width: 768px) {
    .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; }
}

/* Responsive Alignment - LARGE (992px+) */
@media (min-width: 992px) {
    .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; }
}

/* Responsive Alignment - EXTRA LARGE (1200px+) */
@media (min-width: 1200px) {
    .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; }
}

/* ================================
   COMPLETE DISPLAY UTILITIES (enhanced)
   ================================ */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-inline-grid { display: inline-grid !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }

/* Responsive Display Utilities - Enhanced */
@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline-flex { display: inline-flex !important; }
    .d-sm-grid { display: grid !important; }
    .d-sm-inline-grid { display: inline-grid !important; }
    .d-sm-table { display: table !important; }
    .d-sm-table-row { display: table-row !important; }
    .d-sm-table-cell { display: table-cell !important; }
}

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

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

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

/* ================================
   COMMON FLEXBOX PATTERNS
   ================================ */

/* Quick flexbox patterns */
.flex-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.flex-center-between {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.flex-center-around {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

.flex-col-center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.flex-col-start {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.flex-col-end {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

/* Responsive patterns */
@media (min-width: 768px) {
    .flex-md-center {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .flex-md-center-between {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .flex-md-col-center {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* Flexible spacing options */
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

/* Horizontal gutters only (gx = gutter-x) */
.gx-0 { margin-right: 0; margin-left: 0; }
.gx-0 > .col, .gx-0 > [class*="col-"] { padding-right: 0; padding-left: 0; }
.gx-1 { margin-right: calc(var(--spacer-1) * -1); margin-left: calc(var(--spacer-1) * -1); }
.gx-1 > .col, .gx-1 > [class*="col-"] { padding-right: var(--spacer-1); padding-left: var(--spacer-1); }
.gx-2 { margin-right: calc(var(--spacer-2) * -1); margin-left: calc(var(--spacer-2) * -1); }
.gx-2 > .col, .gx-2 > [class*="col-"] { padding-right: var(--spacer-2); padding-left: var(--spacer-2); }
.gx-3 { margin-right: calc(var(--spacer-3) * -1); margin-left: calc(var(--spacer-3) * -1); }
.gx-3 > .col, .gx-3 > [class*="col-"] { padding-right: var(--spacer-3); padding-left: var(--spacer-3); }
.gx-4 { margin-right: calc(var(--spacer-4) * -1); margin-left: calc(var(--spacer-4) * -1); }
.gx-4 > .col, .gx-4 > [class*="col-"] { padding-right: var(--spacer-4); padding-left: var(--spacer-4); }
.gx-5 { margin-right: calc(var(--spacer-5) * -1); margin-left: calc(var(--spacer-5) * -1); }
.gx-5 > .col, .gx-5 > [class*="col-"] { padding-right: var(--spacer-5); padding-left: var(--spacer-5); }

/* Vertical gutters (gy = gutter-y) */
.gy-0 > .col, .gy-0 > [class*="col-"] { padding-top: 0; padding-bottom: 0; }
.gy-1 > .col, .gy-1 > [class*="col-"] { padding-top: var(--spacer-1); padding-bottom: var(--spacer-1); }
.gy-2 > .col, .gy-2 > [class*="col-"] { padding-top: var(--spacer-2); padding-bottom: var(--spacer-2); }
.gy-3 > .col, .gy-3 > [class*="col-"] { padding-top: var(--spacer-3); padding-bottom: var(--spacer-3); }
.gy-4 > .col, .gy-4 > [class*="col-"] { padding-top: var(--spacer-4); padding-bottom: var(--spacer-4); }
.gy-5 > .col, .gy-5 > [class*="col-"] { padding-top: var(--spacer-5); padding-bottom: var(--spacer-5); }

/* Column ordering */
.order-first { order: -1; }
.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-last { order: 13; }

/* Offset utilities */
.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }

/* Responsive offsets for medium devices */
@media (min-width: 768px) {
    .offset-md-0 { margin-left: 0; }
    .offset-md-1 { margin-left: 8.333333%; }
    .offset-md-2 { margin-left: 16.666667%; }
    .offset-md-3 { margin-left: 25%; }
    .offset-md-4 { margin-left: 33.333333%; }
    .offset-md-5 { margin-left: 41.666667%; }
    .offset-md-6 { margin-left: 50%; }
    .offset-md-7 { margin-left: 58.333333%; }
    .offset-md-8 { margin-left: 66.666667%; }
    .offset-md-9 { margin-left: 75%; }
    .offset-md-10 { margin-left: 83.333333%; }
    .offset-md-11 { margin-left: 91.666667%; }
}

/* Responsive offsets for large devices */
@media (min-width: 992px) {
    .offset-lg-0 { margin-left: 0; }
    .offset-lg-1 { margin-left: 8.333333%; }
    .offset-lg-2 { margin-left: 16.666667%; }
    .offset-lg-3 { margin-left: 25%; }
    .offset-lg-4 { margin-left: 33.333333%; }
    .offset-lg-5 { margin-left: 41.666667%; }
    .offset-lg-6 { margin-left: 50%; }
    .offset-lg-7 { margin-left: 58.333333%; }
    .offset-lg-8 { margin-left: 66.666667%; }
    .offset-lg-9 { margin-left: 75%; }
    .offset-lg-10 { margin-left: 83.333333%; }
    .offset-lg-11 { margin-left: 91.666667%; }
}

/* ================================
   MODERN CSS GRID & FLEXBOX UTILITIES
   ================================ */
/* Base Grid Templates (Mobile First) */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

/* Auto-fit and Auto-fill variants */
.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; }

/* Extended Grid Rows */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
.grid-rows-7 { grid-template-rows: repeat(7, minmax(0, 1fr)) !important; }
.grid-rows-8 { grid-template-rows: repeat(8, minmax(0, 1fr)) !important; }
.grid-rows-9 { grid-template-rows: repeat(9, minmax(0, 1fr)) !important; }
.grid-rows-10 { grid-template-rows: repeat(10, minmax(0, 1fr)) !important; }
.grid-rows-11 { grid-template-rows: repeat(11, minmax(0, 1fr)) !important; }
.grid-rows-12 { grid-template-rows: repeat(12, minmax(0, 1fr)) !important; }

/* Auto-fit and Auto-fill for rows */
.grid-rows-auto-fit { grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)) !important; }
.grid-rows-auto-fill { grid-template-rows: repeat(auto-fill, minmax(100px, 1fr)) !important; }

/* Responsive Grid Rows - SMALL (576px+) */
@media (min-width: 576px) {
    .grid-rows-sm-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
    .grid-rows-sm-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
    .grid-rows-sm-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
    .grid-rows-sm-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
    .grid-rows-sm-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
    .grid-rows-sm-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
    .grid-rows-sm-auto-fit { grid-template-rows: repeat(auto-fit, minmax(80px, 1fr)) !important; }
}

/* Responsive Grid Rows - MEDIUM (768px+) */
@media (min-width: 768px) {
    .grid-rows-md-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
    .grid-rows-md-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
    .grid-rows-md-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
    .grid-rows-md-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
    .grid-rows-md-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
    .grid-rows-md-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
    .grid-rows-md-7 { grid-template-rows: repeat(7, minmax(0, 1fr)) !important; }
    .grid-rows-md-8 { grid-template-rows: repeat(8, minmax(0, 1fr)) !important; }
    .grid-rows-md-auto-fit { grid-template-rows: repeat(auto-fit, minmax(120px, 1fr)) !important; }
}

/* Responsive Grid Rows - LARGE (992px+) */
@media (min-width: 992px) {
    .grid-rows-lg-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
    .grid-rows-lg-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
    .grid-rows-lg-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
    .grid-rows-lg-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
    .grid-rows-lg-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
    .grid-rows-lg-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
    .grid-rows-lg-7 { grid-template-rows: repeat(7, minmax(0, 1fr)) !important; }
    .grid-rows-lg-8 { grid-template-rows: repeat(8, minmax(0, 1fr)) !important; }
    .grid-rows-lg-9 { grid-template-rows: repeat(9, minmax(0, 1fr)) !important; }
    .grid-rows-lg-10 { grid-template-rows: repeat(10, minmax(0, 1fr)) !important; }
    .grid-rows-lg-auto-fit { grid-template-rows: repeat(auto-fit, minmax(150px, 1fr)) !important; }
}

/* Responsive Grid Rows - EXTRA LARGE (1200px+) */
@media (min-width: 1200px) {
    .grid-rows-xl-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
    .grid-rows-xl-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
    .grid-rows-xl-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
    .grid-rows-xl-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
    .grid-rows-xl-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
    .grid-rows-xl-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
    .grid-rows-xl-7 { grid-template-rows: repeat(7, minmax(0, 1fr)) !important; }
    .grid-rows-xl-8 { grid-template-rows: repeat(8, minmax(0, 1fr)) !important; }
    .grid-rows-xl-9 { grid-template-rows: repeat(9, minmax(0, 1fr)) !important; }
    .grid-rows-xl-10 { grid-template-rows: repeat(10, minmax(0, 1fr)) !important; }
    .grid-rows-xl-11 { grid-template-rows: repeat(11, minmax(0, 1fr)) !important; }
    .grid-rows-xl-12 { grid-template-rows: repeat(12, minmax(0, 1fr)) !important; }
    .grid-rows-xl-auto-fit { grid-template-rows: repeat(auto-fit, minmax(180px, 1fr)) !important; }
}

/* Grid Column & Row 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-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Base Row Span */
.row-span-1 { grid-row: span 1 / span 1 !important; }
.row-span-2 { grid-row: span 2 / span 2 !important; }
.row-span-3 { grid-row: span 3 / span 3 !important; }
.row-span-4 { grid-row: span 4 / span 4 !important; }
.row-span-5 { grid-row: span 5 / span 5 !important; }
.row-span-6 { grid-row: span 6 / span 6 !important; }
.row-span-7 { grid-row: span 7 / span 7 !important; }
.row-span-8 { grid-row: span 8 / span 8 !important; }
.row-span-9 { grid-row: span 9 / span 9 !important; }
.row-span-10 { grid-row: span 10 / span 10 !important; }
.row-span-11 { grid-row: span 11 / span 11 !important; }
.row-span-12 { grid-row: span 12 / span 12 !important; }
.row-span-full { grid-row: 1 / -1 !important; }

/* Responsive Row Span - SMALL (576px+) */
@media (min-width: 576px) {
    .row-span-sm-1 { grid-row: span 1 / span 1 !important; }
    .row-span-sm-2 { grid-row: span 2 / span 2 !important; }
    .row-span-sm-3 { grid-row: span 3 / span 3 !important; }
    .row-span-sm-4 { grid-row: span 4 / span 4 !important; }
    .row-span-sm-5 { grid-row: span 5 / span 5 !important; }
    .row-span-sm-6 { grid-row: span 6 / span 6 !important; }
    .row-span-sm-full { grid-row: 1 / -1 !important; }
}

/* Responsive Row Span - MEDIUM (768px+) */
@media (min-width: 768px) {
    .row-span-md-1 { grid-row: span 1 / span 1 !important; }
    .row-span-md-2 { grid-row: span 2 / span 2 !important; }
    .row-span-md-3 { grid-row: span 3 / span 3 !important; }
    .row-span-md-4 { grid-row: span 4 / span 4 !important; }
    .row-span-md-5 { grid-row: span 5 / span 5 !important; }
    .row-span-md-6 { grid-row: span 6 / span 6 !important; }
    .row-span-md-7 { grid-row: span 7 / span 7 !important; }
    .row-span-md-8 { grid-row: span 8 / span 8 !important; }
    .row-span-md-full { grid-row: 1 / -1 !important; }
}

/* Responsive Row Span - LARGE (992px+) */
@media (min-width: 992px) {
    .row-span-lg-1 { grid-row: span 1 / span 1 !important; }
    .row-span-lg-2 { grid-row: span 2 / span 2 !important; }
    .row-span-lg-3 { grid-row: span 3 / span 3 !important; }
    .row-span-lg-4 { grid-row: span 4 / span 4 !important; }
    .row-span-lg-5 { grid-row: span 5 / span 5 !important; }
    .row-span-lg-6 { grid-row: span 6 / span 6 !important; }
    .row-span-lg-7 { grid-row: span 7 / span 7 !important; }
    .row-span-lg-8 { grid-row: span 8 / span 8 !important; }
    .row-span-lg-9 { grid-row: span 9 / span 9 !important; }
    .row-span-lg-10 { grid-row: span 10 / span 10 !important; }
    .row-span-lg-full { grid-row: 1 / -1 !important; }
}

/* Responsive Row Span - EXTRA LARGE (1200px+) */
@media (min-width: 1200px) {
    .row-span-xl-1 { grid-row: span 1 / span 1 !important; }
    .row-span-xl-2 { grid-row: span 2 / span 2 !important; }
    .row-span-xl-3 { grid-row: span 3 / span 3 !important; }
    .row-span-xl-4 { grid-row: span 4 / span 4 !important; }
    .row-span-xl-5 { grid-row: span 5 / span 5 !important; }
    .row-span-xl-6 { grid-row: span 6 / span 6 !important; }
    .row-span-xl-7 { grid-row: span 7 / span 7 !important; }
    .row-span-xl-8 { grid-row: span 8 / span 8 !important; }
    .row-span-xl-9 { grid-row: span 9 / span 9 !important; }
    .row-span-xl-10 { grid-row: span 10 / span 10 !important; }
    .row-span-xl-11 { grid-row: span 11 / span 11 !important; }
    .row-span-xl-12 { grid-row: span 12 / span 12 !important; }
    .row-span-xl-full { grid-row: 1 / -1 !important; }
}

/* Responsive Row Span - EXTRA EXTRA LARGE (1400px+) */
@media (min-width: 1400px) {
    .row-span-xxl-1 { grid-row: span 1 / span 1 !important; }
    .row-span-xxl-2 { grid-row: span 2 / span 2 !important; }
    .row-span-xxl-3 { grid-row: span 3 / span 3 !important; }
    .row-span-xxl-4 { grid-row: span 4 / span 4 !important; }
    .row-span-xxl-5 { grid-row: span 5 / span 5 !important; }
    .row-span-xxl-6 { grid-row: span 6 / span 6 !important; }
    .row-span-xxl-full { grid-row: 1 / -1 !important; }
}

/* Grid Column & Row Start/End */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }
.col-start-13 { grid-column-start: 13; }
.col-start-auto { grid-column-start: auto; }

.col-end-1 { grid-column-end: 1; }
.col-end-2 { grid-column-end: 2; }
.col-end-3 { grid-column-end: 3; }
.col-end-4 { grid-column-end: 4; }
.col-end-5 { grid-column-end: 5; }
.col-end-6 { grid-column-end: 6; }
.col-end-7 { grid-column-end: 7; }
.col-end-8 { grid-column-end: 8; }
.col-end-9 { grid-column-end: 9; }
.col-end-10 { grid-column-end: 10; }
.col-end-11 { grid-column-end: 11; }
.col-end-12 { grid-column-end: 12; }
.col-end-13 { grid-column-end: 13; }
.col-end-auto { grid-column-end: auto; }

/* ================================
   MISSING RESPONSIVE COL-START/END FOR CONSISTENCY
   ================================ */

/* Enhanced responsive col-start/end to match row utilities */
@media (min-width: 576px) {
    .col-start-sm-1 { grid-column-start: 1 !important; }
    .col-start-sm-2 { grid-column-start: 2 !important; }
    .col-start-sm-3 { grid-column-start: 3 !important; }
    .col-start-sm-4 { grid-column-start: 4 !important; }
    .col-start-sm-5 { grid-column-start: 5 !important; }
    .col-start-sm-6 { grid-column-start: 6 !important; }
    .col-start-sm-auto { grid-column-start: auto !important; }
    
    .col-end-sm-1 { grid-column-end: 1 !important; }
    .col-end-sm-2 { grid-column-end: 2 !important; }
    .col-end-sm-3 { grid-column-end: 3 !important; }
    .col-end-sm-4 { grid-column-end: 4 !important; }
    .col-end-sm-5 { grid-column-end: 5 !important; }
    .col-end-sm-6 { grid-column-end: 6 !important; }
    .col-end-sm-auto { grid-column-end: auto !important; }
}

/* Row Start utilities */
.row-start-1 { grid-row-start: 1 !important; }
.row-start-2 { grid-row-start: 2 !important; }
.row-start-3 { grid-row-start: 3 !important; }
.row-start-4 { grid-row-start: 4 !important; }
.row-start-5 { grid-row-start: 5 !important; }
.row-start-6 { grid-row-start: 6 !important; }
.row-start-7 { grid-row-start: 7 !important; }
.row-start-8 { grid-row-start: 8 !important; }
.row-start-9 { grid-row-start: 9 !important; }
.row-start-10 { grid-row-start: 10 !important; }
.row-start-11 { grid-row-start: 11 !important; }
.row-start-12 { grid-row-start: 12 !important; }
.row-start-13 { grid-row-start: 13 !important; }
.row-start-auto { grid-row-start: auto !important; }

/* Row End utilities */
.row-end-1 { grid-row-end: 1 !important; }
.row-end-2 { grid-row-end: 2 !important; }
.row-end-3 { grid-row-end: 3 !important; }
.row-end-4 { grid-row-end: 4 !important; }
.row-end-5 { grid-row-end: 5 !important; }
.row-end-6 { grid-row-end: 6 !important; }
.row-end-7 { grid-row-end: 7 !important; }
.row-end-8 { grid-row-end: 8 !important; }
.row-end-9 { grid-row-end: 9 !important; }
.row-end-10 { grid-row-end: 10 !important; }
.row-end-11 { grid-row-end: 11 !important; }
.row-end-12 { grid-row-end: 12 !important; }
.row-end-13 { grid-row-end: 13 !important; }
.row-end-auto { grid-row-end: auto !important; }

/* ================================
   RESPONSIVE ROW START/END UTILITIES - SMALL (576px+)
   ================================ */
@media (min-width: 576px) {
    .row-start-sm-1 { grid-row-start: 1 !important; }
    .row-start-sm-2 { grid-row-start: 2 !important; }
    .row-start-sm-3 { grid-row-start: 3 !important; }
    .row-start-sm-4 { grid-row-start: 4 !important; }
    .row-start-sm-5 { grid-row-start: 5 !important; }
    .row-start-sm-6 { grid-row-start: 6 !important; }
    .row-start-sm-auto { grid-row-start: auto !important; }
    
    .row-end-sm-1 { grid-row-end: 1 !important; }
    .row-end-sm-2 { grid-row-end: 2 !important; }
    .row-end-sm-3 { grid-row-end: 3 !important; }
    .row-end-sm-4 { grid-row-end: 4 !important; }
    .row-end-sm-5 { grid-row-end: 5 !important; }
    .row-end-sm-6 { grid-row-end: 6 !important; }
    .row-end-sm-auto { grid-row-end: auto !important; }
}

/* ================================
   RESPONSIVE ROW START/END UTILITIES - MEDIUM (768px+)
   ================================ */
@media (min-width: 768px) {
    .row-start-md-1 { grid-row-start: 1 !important; }
    .row-start-md-2 { grid-row-start: 2 !important; }
    .row-start-md-3 { grid-row-start: 3 !important; }
    .row-start-md-4 { grid-row-start: 4 !important; }
    .row-start-md-5 { grid-row-start: 5 !important; }
    .row-start-md-6 { grid-row-start: 6 !important; }
    .row-start-md-7 { grid-row-start: 7 !important; }
    .row-start-md-8 { grid-row-start: 8 !important; }
    .row-start-md-auto { grid-row-start: auto !important; }
    
    .row-end-md-1 { grid-row-end: 1 !important; }
    .row-end-md-2 { grid-row-end: 2 !important; }
    .row-end-md-3 { grid-row-end: 3 !important; }
    .row-end-md-4 { grid-row-end: 4 !important; }
    .row-end-md-5 { grid-row-end: 5 !important; }
    .row-end-md-6 { grid-row-end: 6 !important; }
    .row-end-md-7 { grid-row-end: 7 !important; }
    .row-end-md-8 { grid-row-end: 8 !important; }
    .row-end-md-auto { grid-row-end: auto !important; }
}

/* ================================
   RESPONSIVE ROW START/END UTILITIES - LARGE (992px+)
   ================================ */
@media (min-width: 992px) {
    .row-start-lg-1 { grid-row-start: 1 !important; }
    .row-start-lg-2 { grid-row-start: 2 !important; }
    .row-start-lg-3 { grid-row-start: 3 !important; }
    .row-start-lg-4 { grid-row-start: 4 !important; }
    .row-start-lg-5 { grid-row-start: 5 !important; }
    .row-start-lg-6 { grid-row-start: 6 !important; }
    .row-start-lg-7 { grid-row-start: 7 !important; }
    .row-start-lg-8 { grid-row-start: 8 !important; }
    .row-start-lg-9 { grid-row-start: 9 !important; }
    .row-start-lg-10 { grid-row-start: 10 !important; }
    .row-start-lg-auto { grid-row-start: auto !important; }
    
    .row-end-lg-1 { grid-row-end: 1 !important; }
    .row-end-lg-2 { grid-row-end: 2 !important; }
    .row-end-lg-3 { grid-row-end: 3 !important; }
    .row-end-lg-4 { grid-row-end: 4 !important; }
    .row-end-lg-5 { grid-row-end: 5 !important; }
    .row-end-lg-6 { grid-row-end: 6 !important; }
    .row-end-lg-7 { grid-row-end: 7 !important; }
    .row-end-lg-8 { grid-row-end: 8 !important; }
    .row-end-lg-9 { grid-row-end: 9 !important; }
    .row-end-lg-10 { grid-row-end: 10 !important; }
    .row-end-lg-auto { grid-row-end: auto !important; }
}

/* ================================
   RESPONSIVE ROW START/END UTILITIES - EXTRA LARGE (1200px+)
   ================================ */
@media (min-width: 1200px) {
    .row-start-xl-1 { grid-row-start: 1 !important; }
    .row-start-xl-2 { grid-row-start: 2 !important; }
    .row-start-xl-3 { grid-row-start: 3 !important; }
    .row-start-xl-4 { grid-row-start: 4 !important; }
    .row-start-xl-5 { grid-row-start: 5 !important; }
    .row-start-xl-6 { grid-row-start: 6 !important; }
    .row-start-xl-7 { grid-row-start: 7 !important; }
    .row-start-xl-8 { grid-row-start: 8 !important; }
    .row-start-xl-9 { grid-row-start: 9 !important; }
    .row-start-xl-10 { grid-row-start: 10 !important; }
    .row-start-xl-11 { grid-row-start: 11 !important; }
    .row-start-xl-12 { grid-row-start: 12 !important; }
    .row-start-xl-auto { grid-row-start: auto !important; }
    
    .row-end-xl-1 { grid-row-end: 1 !important; }
    .row-end-xl-2 { grid-row-end: 2 !important; }
    .row-end-xl-3 { grid-row-end: 3 !important; }
    .row-end-xl-4 { grid-row-end: 4 !important; }
    .row-end-xl-5 { grid-row-end: 5 !important; }
    .row-end-xl-6 { grid-row-end: 6 !important; }
    .row-end-xl-7 { grid-row-end: 7 !important; }
    .row-end-xl-8 { grid-row-end: 8 !important; }
    .row-end-xl-9 { grid-row-end: 9 !important; }
    .row-end-xl-10 { grid-row-end: 10 !important; }
    .row-end-xl-11 { grid-row-end: 11 !important; }
    .row-end-xl-12 { grid-row-end: 12 !important; }
    .row-end-xl-auto { grid-row-end: auto !important; }
}

/* ================================
   RESPONSIVE ROW START/END UTILITIES - EXTRA EXTRA LARGE (1400px+)
   ================================ */
@media (min-width: 1400px) {
    .row-start-xxl-1 { grid-row-start: 1 !important; }
    .row-start-xxl-2 { grid-row-start: 2 !important; }
    .row-start-xxl-3 { grid-row-start: 3 !important; }
    .row-start-xxl-4 { grid-row-start: 4 !important; }
    .row-start-xxl-5 { grid-row-start: 5 !important; }
    .row-start-xxl-6 { grid-row-start: 6 !important; }
    .row-start-xxl-auto { grid-row-start: auto !important; }
    
    .row-end-xxl-1 { grid-row-end: 1 !important; }
    .row-end-xxl-2 { grid-row-end: 2 !important; }
    .row-end-xxl-3 { grid-row-end: 3 !important; }
    .row-end-xxl-4 { grid-row-end: 4 !important; }
    .row-end-xxl-5 { grid-row-end: 5 !important; }
    .row-end-xxl-6 { grid-row-end: 6 !important; }
    .row-end-xxl-auto { grid-row-end: auto !important; }
}

/* Enhanced CSS Grid Gap */
.gap-0 { gap: var(--spacer-0); }
.gap-1 { gap: var(--spacer-1); }
.gap-2 { gap: var(--spacer-2); }
.gap-3 { gap: var(--spacer-3); }
.gap-4 { gap: var(--spacer-4); }
.gap-5 { gap: var(--spacer-5); }
.gap-6 { gap: 2rem; }      /* 32px */
.gap-7 { gap: 2.5rem; }    /* 40px */
.gap-8 { gap: 3rem; }      /* 48px */
.gap-9 { gap: 3.5rem; }    /* 56px */
.gap-10 { gap: 4rem; }     /* 64px */

/* Enhanced Row & Column Gap */
.row-gap-0 { row-gap: var(--spacer-0); }
.row-gap-1 { row-gap: var(--spacer-1); }
.row-gap-2 { row-gap: var(--spacer-2); }
.row-gap-3 { row-gap: var(--spacer-3); }
.row-gap-4 { row-gap: var(--spacer-4); }
.row-gap-5 { row-gap: var(--spacer-5); }
.row-gap-6 { row-gap: 2rem; }
.row-gap-7 { row-gap: 2.5rem; }
.row-gap-8 { row-gap: 3rem; }

.col-gap-0 { column-gap: var(--spacer-0); }
.col-gap-1 { column-gap: var(--spacer-1); }
.col-gap-2 { column-gap: var(--spacer-2); }
.col-gap-3 { column-gap: var(--spacer-3); }
.col-gap-4 { column-gap: var(--spacer-4); }
.col-gap-5 { column-gap: var(--spacer-5); }
.col-gap-6 { column-gap: 2rem; }
.col-gap-7 { column-gap: 2.5rem; }
.col-gap-8 { column-gap: 3rem; }

/* Grid Auto Flow */
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-dense { grid-auto-flow: dense; }
.grid-flow-row-dense { grid-auto-flow: row dense; }
.grid-flow-col-dense { grid-auto-flow: column dense; }

/* Grid Auto Columns */
.auto-cols-auto { grid-auto-columns: auto; }
.auto-cols-min { grid-auto-columns: min-content; }
.auto-cols-max { grid-auto-columns: max-content; }
.auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

/* Grid Auto Rows */
.auto-rows-auto { grid-auto-rows: auto; }
.auto-rows-min { grid-auto-rows: min-content; }
.auto-rows-max { grid-auto-rows: max-content; }
.auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }

/* Grid Alignment */
.justify-items-start { justify-items: start; }
.justify-items-end { justify-items: end; }
.justify-items-center { justify-items: center; }
.justify-items-stretch { justify-items: stretch; }

.justify-self-auto { justify-self: auto; }
.justify-self-start { justify-self: start; }
.justify-self-end { justify-self: end; }
.justify-self-center { justify-self: center; }
.justify-self-stretch { justify-self: stretch; }

.place-content-center { place-content: center; }
.place-content-start { place-content: start; }
.place-content-end { place-content: end; }
.place-content-between { place-content: space-between; }
.place-content-around { place-content: space-around; }
.place-content-evenly { place-content: space-evenly; }
.place-content-stretch { place-content: stretch; }

.place-items-start { place-items: start; }
.place-items-end { place-items: end; }
.place-items-center { place-items: center; }
.place-items-stretch { place-items: stretch; }

.place-self-auto { place-self: auto; }
.place-self-start { place-self: start; }
.place-self-end { place-self: end; }
.place-self-center { place-self: center; }
.place-self-stretch { place-self: stretch; }

/* ================================
   RESPONSIVE GRID UTILITIES - SMALL (576px+)
   ================================ */
@media (min-width: 576px) {
    .grid-cols-sm-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-sm-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-sm-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-cols-sm-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .grid-cols-sm-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .grid-cols-sm-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .grid-cols-sm-7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    .grid-cols-sm-8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
    .grid-cols-sm-9 { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
    .grid-cols-sm-10 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
    .grid-cols-sm-11 { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
    .grid-cols-sm-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
    .grid-cols-sm-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
    .grid-cols-sm-auto-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
    
    /* SM Gap utilities */
    .gap-sm-0 { gap: var(--spacer-0) !important; }
    .gap-sm-1 { gap: var(--spacer-1) !important; }
    .gap-sm-2 { gap: var(--spacer-2) !important; }
    .gap-sm-3 { gap: var(--spacer-3) !important; }
    .gap-sm-4 { gap: var(--spacer-4) !important; }
    .gap-sm-5 { gap: var(--spacer-5) !important; }
    .gap-sm-6 { gap: 2rem !important; }
    .gap-sm-7 { gap: 2.5rem !important; }
    .gap-sm-8 { gap: 3rem !important; }
    
    /* SM Column Span */
    .col-span-sm-1 { grid-column: span 1 / span 1 !important; }
    .col-span-sm-2 { grid-column: span 2 / span 2 !important; }
    .col-span-sm-3 { grid-column: span 3 / span 3 !important; }
    .col-span-sm-4 { grid-column: span 4 / span 4 !important; }
    .col-span-sm-5 { grid-column: span 5 / span 5 !important; }
    .col-span-sm-6 { grid-column: span 6 / span 6 !important; }
    .col-span-sm-7 { grid-column: span 7 / span 7 !important; }
    .col-span-sm-8 { grid-column: span 8 / span 8 !important; }
    .col-span-sm-9 { grid-column: span 9 / span 9 !important; }
    .col-span-sm-10 { grid-column: span 10 / span 10 !important; }
    .col-span-sm-11 { grid-column: span 11 / span 11 !important; }
    .col-span-sm-12 { grid-column: span 12 / span 12 !important; }
    .col-span-sm-full { grid-column: 1 / -1 !important; }
}

/* ================================
   RESPONSIVE GRID UTILITIES - MEDIUM (768px+)
   ================================ */
@media (min-width: 768px) {
    .grid-cols-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .grid-cols-md-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .grid-cols-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .grid-cols-md-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    .grid-cols-md-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
    .grid-cols-md-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
    .grid-cols-md-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
    .grid-cols-md-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
    .grid-cols-md-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
    .grid-cols-md-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }
    .grid-cols-md-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; }
    
    /* MD Gap utilities */
    .gap-md-0 { gap: var(--spacer-0); }
    .gap-md-1 { gap: var(--spacer-1); }
    .gap-md-2 { gap: var(--spacer-2); }
    .gap-md-3 { gap: var(--spacer-3); }
    .gap-md-4 { gap: var(--spacer-4); }
    .gap-md-5 { gap: var(--spacer-5); }
    .gap-md-6 { gap: 2rem; }
    .gap-md-7 { gap: 2.5rem; }
    .gap-md-8 { gap: 3rem; }
    .gap-md-9 { gap: 3.5rem; }
    .gap-md-10 { gap: 4rem; }
    
    /* MD Column Span */
    .col-span-md-1 { grid-column: span 1 / span 1; }
    .col-span-md-2 { grid-column: span 2 / span 2; }
    .col-span-md-3 { grid-column: span 3 / span 3; }
    .col-span-md-4 { grid-column: span 4 / span 4; }
    .col-span-md-5 { grid-column: span 5 / span 5; }
    .col-span-md-6 { grid-column: span 6 / span 6; }
    .col-span-md-7 { grid-column: span 7 / span 7; }
    .col-span-md-8 { grid-column: span 8 / span 8; }
    .col-span-md-9 { grid-column: span 9 / span 9; }
    .col-span-md-10 { grid-column: span 10 / span 10; }
    .col-span-md-11 { grid-column: span 11 / span 11; }
    .col-span-md-12 { grid-column: span 12 / span 12; }
    .col-span-md-full { grid-column: 1 / -1; }
    
    /* MD Column Start/End */
    .col-start-md-1 { grid-column-start: 1; }
    .col-start-md-2 { grid-column-start: 2; }
    .col-start-md-3 { grid-column-start: 3; }
    .col-start-md-4 { grid-column-start: 4; }
    .col-start-md-5 { grid-column-start: 5; }
    .col-start-md-6 { grid-column-start: 6; }
    .col-start-md-7 { grid-column-start: 7; }
    .col-start-md-8 { grid-column-start: 8; }
    .col-start-md-9 { grid-column-start: 9; }
    .col-start-md-10 { grid-column-start: 10; }
    .col-start-md-11 { grid-column-start: 11; }
    .col-start-md-12 { grid-column-start: 12; }
    .col-start-md-13 { grid-column-start: 13; }
    .col-start-md-auto { grid-column-start: auto; }
    
    .col-end-md-1 { grid-column-end: 1; }
    .col-end-md-2 { grid-column-end: 2; }
    .col-end-md-3 { grid-column-end: 3; }
    .col-end-md-4 { grid-column-end: 4; }
    .col-end-md-5 { grid-column-end: 5; }
    .col-end-md-6 { grid-column-end: 6; }
    .col-end-md-7 { grid-column-end: 7; }
    .col-end-md-8 { grid-column-end: 8; }
    .col-end-md-9 { grid-column-end: 9; }
    .col-end-md-10 { grid-column-end: 10; }
    .col-end-md-11 { grid-column-end: 11; }
    .col-end-md-12 { grid-column-end: 12; }
    .col-end-md-13 { grid-column-end: 13; }
    .col-end-md-auto { grid-column-end: auto; }
}

/* ================================
   RESPONSIVE GRID UTILITIES - LARGE (992px+)
   ================================ */
@media (min-width: 992px) {
    .grid-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .grid-cols-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .grid-cols-lg-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .grid-cols-lg-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    .grid-cols-lg-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
    .grid-cols-lg-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
    .grid-cols-lg-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
    .grid-cols-lg-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
    .grid-cols-lg-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
    .grid-cols-lg-auto-fit { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
    .grid-cols-lg-auto-fill { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }
    
    /* LG Gap utilities */
    .gap-lg-0 { gap: var(--spacer-0); }
    .gap-lg-1 { gap: var(--spacer-1); }
    .gap-lg-2 { gap: var(--spacer-2); }
    .gap-lg-3 { gap: var(--spacer-3); }
    .gap-lg-4 { gap: var(--spacer-4); }
    .gap-lg-5 { gap: var(--spacer-5); }
    .gap-lg-6 { gap: 2rem; }
    .gap-lg-7 { gap: 2.5rem; }
    .gap-lg-8 { gap: 3rem; }
    .gap-lg-9 { gap: 3.5rem; }
    .gap-lg-10 { gap: 4rem; }
    
    /* LG Column Span */
    .col-span-lg-1 { grid-column: span 1 / span 1; }
    .col-span-lg-2 { grid-column: span 2 / span 2; }
    .col-span-lg-3 { grid-column: span 3 / span 3; }
    .col-span-lg-4 { grid-column: span 4 / span 4; }
    .col-span-lg-5 { grid-column: span 5 / span 5; }
    .col-span-lg-6 { grid-column: span 6 / span 6; }
    .col-span-lg-7 { grid-column: span 7 / span 7; }
    .col-span-lg-8 { grid-column: span 8 / span 8; }
    .col-span-lg-9 { grid-column: span 9 / span 9; }
    .col-span-lg-10 { grid-column: span 10 / span 10; }
    .col-span-lg-11 { grid-column: span 11 / span 11; }
    .col-span-lg-12 { grid-column: span 12 / span 12; }
    .col-span-lg-full { grid-column: 1 / -1; }
    
    /* LG Row & Column Gap */
    .row-gap-lg-0 { row-gap: var(--spacer-0); }
    .row-gap-lg-1 { row-gap: var(--spacer-1); }
    .row-gap-lg-2 { row-gap: var(--spacer-2); }
    .row-gap-lg-3 { row-gap: var(--spacer-3); }
    .row-gap-lg-4 { row-gap: var(--spacer-4); }
    .row-gap-lg-5 { row-gap: var(--spacer-5); }
    .row-gap-lg-6 { row-gap: 2rem; }
    .row-gap-lg-7 { row-gap: 2.5rem; }
    .row-gap-lg-8 { row-gap: 3rem; }
    
    .col-gap-lg-0 { column-gap: var(--spacer-0); }
    .col-gap-lg-1 { column-gap: var(--spacer-1); }
    .col-gap-lg-2 { column-gap: var(--spacer-2); }
    .col-gap-lg-3 { column-gap: var(--spacer-3); }
    .col-gap-lg-4 { column-gap: var(--spacer-4); }
    .col-gap-lg-5 { column-gap: var(--spacer-5); }
    .col-gap-lg-6 { column-gap: 2rem; }
    .col-gap-lg-7 { column-gap: 2.5rem; }
    .col-gap-lg-8 { column-gap: 3rem; }
}

/* ================================
   RESPONSIVE GRID UTILITIES - EXTRA LARGE (1200px+)
   ================================ */
@media (min-width: 1200px) {
    .grid-cols-xl-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-cols-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .grid-cols-xl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .grid-cols-xl-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .grid-cols-xl-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    .grid-cols-xl-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
    .grid-cols-xl-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
    .grid-cols-xl-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
    .grid-cols-xl-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
    .grid-cols-xl-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
    .grid-cols-xl-auto-fit { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important; }
    .grid-cols-xl-auto-fill { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important; }
    
    /* XL Gap utilities */
    .gap-xl-0 { gap: var(--spacer-0); }
    .gap-xl-1 { gap: var(--spacer-1); }
    .gap-xl-2 { gap: var(--spacer-2); }
    .gap-xl-3 { gap: var(--spacer-3); }
    .gap-xl-4 { gap: var(--spacer-4); }
    .gap-xl-5 { gap: var(--spacer-5); }
    .gap-xl-6 { gap: 2rem; }
    .gap-xl-7 { gap: 2.5rem; }
    .gap-xl-8 { gap: 3rem; }
    .gap-xl-9 { gap: 3.5rem; }
    .gap-xl-10 { gap: 4rem; }
    
    /* XL Column Span */
    .col-span-xl-1 { grid-column: span 1 / span 1; }
    .col-span-xl-2 { grid-column: span 2 / span 2; }
    .col-span-xl-3 { grid-column: span 3 / span 3; }
    .col-span-xl-4 { grid-column: span 4 / span 4; }
    .col-span-xl-5 { grid-column: span 5 / span 5; }
    .col-span-xl-6 { grid-column: span 6 / span 6; }
    .col-span-xl-7 { grid-column: span 7 / span 7; }
    .col-span-xl-8 { grid-column: span 8 / span 8; }
    .col-span-xl-9 { grid-column: span 9 / span 9; }
    .col-span-xl-10 { grid-column: span 10 / span 10; }
    .col-span-xl-11 { grid-column: span 11 / span 11; }
    .col-span-xl-12 { grid-column: span 12 / span 12; }
    .col-span-xl-full { grid-column: 1 / -1; }
}

/* ================================
   EXTRA LARGE (1400px+) for modern screens
   ================================ */
@media (min-width: 1400px) {
    .grid-cols-xxl-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-xxl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-xxl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-cols-xxl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .grid-cols-xxl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .grid-cols-xxl-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .grid-cols-xxl-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
    
    .gap-xxl-0 { gap: var(--spacer-0); }
    .gap-xxl-1 { gap: var(--spacer-1); }
    .gap-xxl-2 { gap: var(--spacer-2); }
    .gap-xxl-3 { gap: var(--spacer-3); }
    .gap-xxl-4 { gap: var(--spacer-4); }
    .gap-xxl-5 { gap: var(--spacer-5); }
    .gap-xxl-6 { gap: 2rem; }
    .gap-xxl-8 { gap: 3rem; }
    .gap-xxl-10 { gap: 4rem; }
    
    .col-span-xxl-1 { grid-column: span 1 / span 1; }
    .col-span-xxl-2 { grid-column: span 2 / span 2; }
    .col-span-xxl-3 { grid-column: span 3 / span 3; }
    .col-span-xxl-4 { grid-column: span 4 / span 4; }
    .col-span-xxl-5 { grid-column: span 5 / span 5; }
    .col-span-xxl-6 { grid-column: span 6 / span 6; }
    .col-span-xxl-12 { grid-column: span 12 / span 12; }
    .col-span-xxl-full { grid-column: 1 / -1; }
}

/* ========== MARGIN UTILITIES ========== */

/* Margin - All sides */
.m-0 { margin: var(--spacer-0); }
.m-1 { margin: var(--spacer-1); }
.m-2 { margin: var(--spacer-2); }
.m-3 { margin: var(--spacer-3); }
.m-4 { margin: var(--spacer-4); }
.m-5 { margin: var(--spacer-5); }

/* Margin - Top */
.mt-0 { margin-top: var(--spacer-0); }
.mt-1 { margin-top: var(--spacer-1); }
.mt-2 { margin-top: var(--spacer-2); }
.mt-3 { margin-top: var(--spacer-3); }
.mt-4 { margin-top: var(--spacer-4); }
.mt-5 { margin-top: var(--spacer-5); }

/* Margin - Bottom */
.mb-0 { margin-bottom: var(--spacer-0); }
.mb-1 { margin-bottom: var(--spacer-1); }
.mb-2 { margin-bottom: var(--spacer-2); }
.mb-3 { margin-bottom: var(--spacer-3); }
.mb-4 { margin-bottom: var(--spacer-4); }
.mb-5 { margin-bottom: var(--spacer-5); }

/* Margin - Left */
.ml-0, .ms-0 { margin-left: var(--spacer-0); }
.ml-1, .ms-1 { margin-left: var(--spacer-1); }
.ml-2, .ms-2 { margin-left: var(--spacer-2); }
.ml-3, .ms-3 { margin-left: var(--spacer-3); }
.ml-4, .ms-4 { margin-left: var(--spacer-4); }
.ml-5, .ms-5 { margin-left: var(--spacer-5); }

/* Margin - Right */
.mr-0, .me-0 { margin-right: var(--spacer-0); }
.mr-1, .me-1 { margin-right: var(--spacer-1); }
.mr-2, .me-2 { margin-right: var(--spacer-2); }
.mr-3, .me-3 { margin-right: var(--spacer-3); }
.mr-4, .me-4 { margin-right: var(--spacer-4); }
.mr-5, .me-5 { margin-right: var(--spacer-5); }

/* Margin - X axis (left + right) */
.mx-0 { margin-left: var(--spacer-0); margin-right: var(--spacer-0); }
.mx-1 { margin-left: var(--spacer-1); margin-right: var(--spacer-1); }
.mx-2 { margin-left: var(--spacer-2); margin-right: var(--spacer-2); }
.mx-3 { margin-left: var(--spacer-3); margin-right: var(--spacer-3); }
.mx-4 { margin-left: var(--spacer-4); margin-right: var(--spacer-4); }
.mx-5 { margin-left: var(--spacer-5); margin-right: var(--spacer-5); }

/* Margin - Y axis (top + bottom) */
.my-0 { margin-top: var(--spacer-0); margin-bottom: var(--spacer-0); }
.my-1 { margin-top: var(--spacer-1); margin-bottom: var(--spacer-1); }
.my-2 { margin-top: var(--spacer-2); margin-bottom: var(--spacer-2); }
.my-3 { margin-top: var(--spacer-3); margin-bottom: var(--spacer-3); }
.my-4 { margin-top: var(--spacer-4); margin-bottom: var(--spacer-4); }
.my-5 { margin-top: var(--spacer-5); margin-bottom: var(--spacer-5); }

/* ========== PADDING UTILITIES ========== */

/* Padding - All sides */
.p-0 { padding: var(--spacer-0); }
.p-1 { padding: var(--spacer-1); }
.p-2 { padding: var(--spacer-2); }
.p-3 { padding: var(--spacer-3); }
.p-4 { padding: var(--spacer-4); }
.p-5 { padding: var(--spacer-5); }

/* Padding - Top */
.pt-0 { padding-top: var(--spacer-0); }
.pt-1 { padding-top: var(--spacer-1); }
.pt-2 { padding-top: var(--spacer-2); }
.pt-3 { padding-top: var(--spacer-3); }
.pt-4 { padding-top: var(--spacer-4); }
.pt-5 { padding-top: var(--spacer-5); }

/* Padding - Bottom */
.pb-0 { padding-bottom: var(--spacer-0); }
.pb-1 { padding-bottom: var(--spacer-1); }
.pb-2 { padding-bottom: var(--spacer-2); }
.pb-3 { padding-bottom: var(--spacer-3); }
.pb-4 { padding-bottom: var(--spacer-4); }
.pb-5 { padding-bottom: var(--spacer-5); }
.pb-6 { padding-bottom: var(--spacer-6); }

/* Padding - Left */
.pl-0, .ps-0 { padding-left: var(--spacer-0); }
.pl-1, .ps-1 { padding-left: var(--spacer-1); }
.pl-2, .ps-2 { padding-left: var(--spacer-2); }
.pl-3, .ps-3 { padding-left: var(--spacer-3); }
.pl-4, .ps-4 { padding-left: var(--spacer-4); }
.pl-5, .ps-5 { padding-left: var(--spacer-5); }

/* Padding - Right */
.pr-0, .pe-0 { padding-right: var(--spacer-0); }
.pr-1, .pe-1 { padding-right: var(--spacer-1); }
.pr-2, .pe-2 { padding-right: var(--spacer-2); }
.pr-3, .pe-3 { padding-right: var(--spacer-3); }
.pr-4, .pe-4 { padding-right: var(--spacer-4); }
.pr-5, .pe-5 { padding-right: var(--spacer-5); }

/* Padding - X axis (left + right) */
.px-0 { padding-left: var(--spacer-0); padding-right: var(--spacer-0); }
.px-1 { padding-left: var(--spacer-1); padding-right: var(--spacer-1); }
.px-2 { padding-left: var(--spacer-2); padding-right: var(--spacer-2); }
.px-3 { padding-left: var(--spacer-3); padding-right: var(--spacer-3); }
.px-4 { padding-left: var(--spacer-4); padding-right: var(--spacer-4); }
.px-5 { padding-left: var(--spacer-5); padding-right: var(--spacer-5); }

/* Padding - Y axis (top + bottom) */
.py-0 { padding-top: var(--spacer-0); padding-bottom: var(--spacer-0); }
.py-1 { padding-top: var(--spacer-1); padding-bottom: var(--spacer-1); }
.py-2 { padding-top: var(--spacer-2); padding-bottom: var(--spacer-2); }
.py-3 { padding-top: var(--spacer-3); padding-bottom: var(--spacer-3); }
.py-4 { padding-top: var(--spacer-4); padding-bottom: var(--spacer-4); }
.py-5 { padding-top: var(--spacer-5); padding-bottom: var(--spacer-5); }

/* ========== NEGATIVE MARGINS ========== */
.mt-n1 { margin-top: calc(var(--spacer-1) * -1); }
.mt-n2 { margin-top: calc(var(--spacer-2) * -1); }
.mt-n3 { margin-top: calc(var(--spacer-3) * -1); }

.mb-n1 { margin-bottom: calc(var(--spacer-1) * -1); }
.mb-n2 { margin-bottom: calc(var(--spacer-2) * -1); }
.mb-n3 { margin-bottom: calc(var(--spacer-3) * -1); }

.ml-n1, .ms-n1 { margin-left: calc(var(--spacer-1) * -1); }
.ml-n2, .ms-n2 { margin-left: calc(var(--spacer-2) * -1); }
.ml-n3, .ms-n3 { margin-left: calc(var(--spacer-3) * -1); }

.mr-n1, .me-n1 { margin-right: calc(var(--spacer-1) * -1); }
.mr-n2, .me-n2 { margin-right: calc(var(--spacer-2) * -1); }
.mr-n3, .me-n3 { margin-right: calc(var(--spacer-3) * -1); }

/* ========== AUTO MARGINS ========== */
.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto, .ms-auto { margin-left: auto !important; }
.mr-auto, .me-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* ========== RESPONSIVE SPACING ========== */

/* Medium devices (768px and up) */
@media (min-width: 768px) {
    .mt-md-0 { margin-top: var(--spacer-0) !important; }
    .mt-md-1 { margin-top: var(--spacer-1) !important; }
    .mt-md-2 { margin-top: var(--spacer-2) !important; }
    .mt-md-3 { margin-top: var(--spacer-3) !important; }
    .mt-md-4 { margin-top: var(--spacer-4) !important; }
    .mt-md-5 { margin-top: var(--spacer-5) !important; }

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

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

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

/* Large devices (992px and up) */
@media (min-width: 992px) {
    .mt-lg-0 { margin-top: var(--spacer-0) !important; }
    .mt-lg-1 { margin-top: var(--spacer-1) !important; }
    .mt-lg-2 { margin-top: var(--spacer-2) !important; }
    .mt-lg-3 { margin-top: var(--spacer-3) !important; }
    .mt-lg-4 { margin-top: var(--spacer-4) !important; }
    .mt-lg-5 { margin-top: var(--spacer-5) !important; }

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

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

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

/* ================================
   TEXT & COMMON UTILITIES
   ================================ */

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Responsive Text alignment */
@media (min-width: 576px) {
    .text-sm-left { text-align: left !important; }
    .text-sm-center { text-align: center !important; }
    .text-sm-right { text-align: right !important; }
    .text-sm-justify { text-align: justify !important; }
}

@media (min-width: 768px) {
    .text-md-left { text-align: left !important; }
    .text-md-center { text-align: center !important; }
    .text-md-right { text-align: right !important; }
    .text-md-justify { text-align: justify !important; }
}

@media (min-width: 992px) {
    .text-lg-left { text-align: left !important; }
    .text-lg-center { text-align: center !important; }
    .text-lg-right { text-align: right !important; }
    .text-lg-justify { text-align: justify !important; }
}

@media (min-width: 1200px) {
    .text-xl-left { text-align: left !important; }
    .text-xl-center { text-align: center !important; }
    .text-xl-right { text-align: right !important; }
    .text-xl-justify { text-align: justify !important; }
}

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

/* Font weight */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: bolder !important; }

/* Responsive Font Weight */
@media (min-width: 576px) {
    .fw-sm-light { font-weight: 300 !important; }
    .fw-sm-normal { font-weight: 400 !important; }
    .fw-sm-bold { font-weight: 700 !important; }
    .fw-sm-bolder { font-weight: bolder !important; }
}

@media (min-width: 768px) {
    .fw-md-light { font-weight: 300 !important; }
    .fw-md-normal { font-weight: 400 !important; }
    .fw-md-bold { font-weight: 700 !important; }
    .fw-md-bolder { font-weight: bolder !important; }
}

@media (min-width: 992px) {
    .fw-lg-light { font-weight: 300 !important; }
    .fw-lg-normal { font-weight: 400 !important; }
    .fw-lg-bold { font-weight: 700 !important; }
    .fw-lg-bolder { font-weight: bolder !important; }
}

/* Width & Height 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; }

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

/* Responsive Width utilities */
@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; }
}

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

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

/* Responsive Height utilities */
@media (min-width: 576px) {
    .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; }
}

@media (min-width: 768px) {
    .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; }
}

@media (min-width: 992px) {
    .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; }
}

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

/* Responsive Position utilities */
@media (min-width: 576px) {
    .position-sm-static { position: static !important; }
    .position-sm-relative { position: relative !important; }
    .position-sm-absolute { position: absolute !important; }
    .position-sm-fixed { position: fixed !important; }
    .position-sm-sticky { position: sticky !important; }
}

@media (min-width: 768px) {
    .position-md-static { position: static !important; }
    .position-md-relative { position: relative !important; }
    .position-md-absolute { position: absolute !important; }
    .position-md-fixed { position: fixed !important; }
    .position-md-sticky { position: sticky !important; }
}

@media (min-width: 992px) {
    .position-lg-static { position: static !important; }
    .position-lg-relative { position: relative !important; }
    .position-lg-absolute { position: absolute !important; }
    .position-lg-fixed { position: fixed !important; }
    .position-lg-sticky { position: sticky !important; }
}

/* Overflow utilities */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

/* Responsive Overflow utilities */
@media (min-width: 576px) {
    .overflow-sm-auto { overflow: auto !important; }
    .overflow-sm-hidden { overflow: hidden !important; }
    .overflow-sm-visible { overflow: visible !important; }
    .overflow-sm-scroll { overflow: scroll !important; }
}

@media (min-width: 768px) {
    .overflow-md-auto { overflow: auto !important; }
    .overflow-md-hidden { overflow: hidden !important; }
    .overflow-md-visible { overflow: visible !important; }
    .overflow-md-scroll { overflow: scroll !important; }
}

@media (min-width: 992px) {
    .overflow-lg-auto { overflow: auto !important; }
    .overflow-lg-hidden { overflow: hidden !important; }
    .overflow-lg-visible { overflow: visible !important; }
    .overflow-lg-scroll { overflow: scroll !important; }
}

/* Float utilities */
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }

/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Border utilities */
.border { border: 1px solid var(--color-border) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-end { border-right: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.border-start { border-left: 1px solid var(--color-border) !important; }

/* Border radius */
.rounded { border-radius: 0.375rem !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: 0.25rem !important; }
.rounded-2 { border-radius: 0.375rem !important; }
.rounded-3 { border-radius: 0.5rem !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }

/* Responsive Border Radius utilities */
@media (min-width: 576px) {
    .rounded-sm { border-radius: 0.375rem !important; }
    .rounded-sm-0 { border-radius: 0 !important; }
    .rounded-sm-1 { border-radius: 0.25rem !important; }
    .rounded-sm-2 { border-radius: 0.375rem !important; }
    .rounded-sm-3 { border-radius: 0.5rem !important; }
    .rounded-sm-circle { border-radius: 50% !important; }
    .rounded-sm-pill { border-radius: 50rem !important; }
}

@media (min-width: 768px) {
    .rounded-md { border-radius: 0.375rem !important; }
    .rounded-md-0 { border-radius: 0 !important; }
    .rounded-md-1 { border-radius: 0.25rem !important; }
    .rounded-md-2 { border-radius: 0.375rem !important; }
    .rounded-md-3 { border-radius: 0.5rem !important; }
    .rounded-md-circle { border-radius: 50% !important; }
    .rounded-md-pill { border-radius: 50rem !important; }
}

@media (min-width: 992px) {
    .rounded-lg { border-radius: 0.375rem !important; }
    .rounded-lg-0 { border-radius: 0 !important; }
    .rounded-lg-1 { border-radius: 0.25rem !important; }
    .rounded-lg-2 { border-radius: 0.375rem !important; }
    .rounded-lg-3 { border-radius: 0.5rem !important; }
    .rounded-lg-circle { border-radius: 50% !important; }
    .rounded-lg-pill { border-radius: 50rem !important; }
}

/* Shadow utilities */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }

/* Responsive Shadow utilities */
@media (min-width: 576px) {
    .shadow-sm-none { box-shadow: none !important; }
    .shadow-sm-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
    .shadow-sm { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
    .shadow-sm-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
}

@media (min-width: 768px) {
    .shadow-md-none { box-shadow: none !important; }
    .shadow-md-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
    .shadow-md { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
    .shadow-md-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
}

@media (min-width: 992px) {
    .shadow-lg-none { box-shadow: none !important; }
    .shadow-lg-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
    .shadow-lg { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
    .shadow-lg-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
}

/* ================================
   BUTTON UTILITIES
   ================================ */

/* Base button styles */
.btn {
    font-family: "Montserrat";
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

.btn:hover {
    text-decoration: none;
}

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Button sizes */
.btn-xs {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.125rem;
    border-radius: 0.5rem;
}

.btn-xl {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
}

/* Main Button */
.btn-main {
    color: #fff;
    background-color: var(--color-main);
    border-color: var(--color-main);
}

.btn-main:hover {
    color: #fff;
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.btn-main:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-main:active {
    background-color: var(--color-blue);
    border-color: var(--color-main);
}

/* Button shapes */
.btn-rounded {
    border-radius: 1.5rem !important;
}

.btn-square {
    border-radius: 0 !important;
}

.btn-circle {
    border-radius: 50% !important;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Button states */
.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.5rem 0 0 -0.5rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-loading-spin 0.6s linear infinite;
}

@keyframes btn-loading-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Button block */
.btn-block {
    display: block;
    width: 100%;
}

/* Button groups */
.btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-group > .btn {
    position: relative;
    flex: 1 1 auto;
}

.btn-group > .btn:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:hover {
    z-index: 1;
}


/* Gradient Buttons */
.btn-gradient-main {
    background: linear-gradient(45deg, var(--color-main), var(--color-blue));
    border: none;
    color: white;
}

/* ================================
   TEXT CLAMP & CONTENT UTILITIES
   ================================ */

/* Line clamp utilities */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Line clamp gradient overlay */
.line-clamp-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, white);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* When expanded, hide gradient */
.line-clamp-expanded .line-clamp-gradient {
    opacity: 0;
}

/* Expanded state */
.line-clamp-expanded .line-clamp-3,
.line-clamp-expanded .line-clamp-2,
.line-clamp-expanded .line-clamp-1 {
    display: block;
    line-clamp: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
}

/* Read more/less button animation */
.line-clamp-toggle {
    transition: all 0.3s ease;
}

.line-clamp-toggle i {
    transition: transform 0.3s ease;
}

.line-clamp-expanded .line-clamp-toggle i {
    transform: rotate(180deg);
}

/* Truncate text utilities */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Content fade in animation */
.content-fade-in {
    animation: fadeInContent 0.5s ease-in-out;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   CARD UTILITIES 
   ================================ */

/* Base card styles */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.375rem;
}

.card>hr {
    margin-right: 0;
    margin-left: 0;
}

.card>.list-group {
    border-top: inherit;
    border-bottom: inherit;
}

.card>.list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: calc(0.375rem - 1px);
    border-top-right-radius: calc(0.375rem - 1px);
}

.card>.list-group:last-child {
    border-bottom-width: 0;
    border-bottom-right-radius: calc(0.375rem - 1px);
    border-bottom-left-radius: calc(0.375rem - 1px);
}

.card>.card-header+.list-group,
.card>.list-group+.card-footer {
    border-top: 0;
}

/* Card body */
.card-body {
    flex: 1 1 auto;
    padding: 1rem 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
}

.card-subtitle {
    margin-top: -0.25rem;
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link:hover {
    text-decoration: none;
}

.card-link+.card-link {
    margin-left: 1rem;
}

/* Card header */
.card-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
    border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
}

/* Card footer */
.card-footer {
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer:last-child {
    border-radius: 0 0 calc(0.375rem - 1px) calc(0.375rem - 1px);
}

/* Card image */
.card-img,
.card-img-top,
.card-img-bottom {
    width: 100%;
}

.card-img,
.card-img-top {
    border-top-left-radius: calc(0.375rem - 1px);
    border-top-right-radius: calc(0.375rem - 1px);
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: calc(0.375rem - 1px);
    border-bottom-left-radius: calc(0.375rem - 1px);
}

/* Card image overlay */
.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    border-radius: calc(0.375rem - 1px);
}

/* Card groups */
.card-group {
    display: flex;
    flex-direction: column;
}

.card-group>.card {
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .card-group {
        flex-flow: row wrap;
    }

    .card-group>.card {
        flex: 1 0 0%;
        margin-bottom: 0;
    }

    .card-group>.card+.card {
        margin-left: 0;
        border-left: 0;
    }

    .card-group>.card:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .card-group>.card:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

/* Card deck */
.card-deck {
    display: flex;
    flex-direction: column;
}

.card-deck .card {
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .card-deck {
        flex-flow: row wrap;
        margin-right: -0.75rem;
        margin-left: -0.75rem;
    }

    .card-deck .card {
        flex: 1 0 0%;
        margin-right: 0.75rem;
        margin-bottom: 0;
        margin-left: 0.75rem;
    }
}

/* Card columns */
.card-columns .card {
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .card-columns {
        column-count: 3;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1;
    }

    .card-columns .card {
        display: inline-block;
        width: 100%;
    }
}