.bg-transparent{
    background-color: transparent !important;
}
.bg-primary{
    background-color: var(--primary) !important;
}
.bg-secondary{
    background-color: var(--secondary) !important;
   
}
.bg-dark-yellow_600{
      background-color: hsl(from var(--yellow_600) calc(h + 0) calc(s + 0) calc(l + 0) / 1) 
}
.bg-light-yellow_50{
      background-color: hsl(from var(--light-yellow) calc(h + 0) calc(s + 0) calc(l + 0) / 1) 
}
.bg-light-yellow_10{
      background-color: hsl(from var(--secondary) calc(h + 0) calc(s + 0) calc(l + 0) / 0.10) 
}

/* Utilities: Object Fit (apply to IMG inside a wrapper) */

.object-contain img{
  object-fit: contain;
}

.object-cover img{
  object-fit: cover;
}

.object-fill img{
  object-fit: fill;
}

.object-none img{
  object-fit: none;
}

.object-scale-down img{
  object-fit: scale-down;
}

/* Utilities: Object Position (apply to IMG inside a wrapper) */

.object-center img{
  object-position: center;
}

.object-top img{
  object-position: top;
}

.object-right img{
  object-position: right;
}

.object-bottom img{
  object-position: bottom;
}

.object-left img{
  object-position: left;
}

.object-top-left img{
  object-position: left top;
}

.object-top-right img{
  object-position: right top;
}

.object-bottom-left img{
  object-position: left bottom;
}

.object-bottom-right img{
  object-position: right bottom;
}


/* Top */
.mt-n-5{ margin-top: -5px; }
.mt-n-10{ margin-top: -10px; }
.mt-n-15{ margin-top: -15px; }
.mt-n-20{ margin-top: -20px; }
.mt-n-25{ margin-top: -25px; }
.mt-n-30{ margin-top: -30px; }
.mt-n-40{ margin-top: -40px; }
.mt-n-50{ margin-top: -50px; }
.mt-n-60{ margin-top: -60px; }
.mt-n-75{ margin-top: -75px; }
.mt-n-100{ margin-top: -120px; }
.mt-n-150{ margin-top: -150px; }
.mt-n-200{ margin-top: -200px; }
.mt-n-145{ margin-top: -145px; }

/* Bottom */
.mb-n-5{ margin-bottom: -5px; }
.mb-n-10{ margin-bottom: -10px; }
.mb-n-15{ margin-bottom: -15px; }
.mb-n-20{ margin-bottom: -20px; }
.mb-n-25{ margin-bottom: -25px; }
.mb-n-30{ margin-bottom: -30px; }
.mb-n-40{ margin-bottom: -40px; }
.mb-n-50{ margin-bottom: -50px; }
.mb-n-60{ margin-bottom: -60px; }
.mb-n-75{ margin-bottom: -75px; }
.mb-n-100{ margin-bottom: -100px; }
.mb-n-150{ margin-bottom: -150px; }
.mb-n-200{ margin-bottom: -200px; }
.mb-n-250{ margin-bottom: -250px; }


/* Left */
.ml-n-5{ margin-left: -5px; }
.ml-n-10{ margin-left: -10px; }
.ml-n-15{ margin-left: -15px; }
.ml-n-20{ margin-left: -20px; }
.ml-n-25{ margin-left: -25px; }
.ml-n-30{ margin-left: -30px; }
.ml-n-40{ margin-left: -40px; }
.ml-n-50{ margin-left: -50px; }
.ml-n-60{ margin-left: -60px; }
.ml-n-75{ margin-left: -75px; }
.ml-n-100{ margin-left: -100px; }

/* Right */
.mr-n-5{ margin-right: -5px; }
.mr-n-10{ margin-right: -10px; }
.mr-n-15{ margin-right: -15px; }
.mr-n-20{ margin-right: -20px; }
.mr-n-25{ margin-right: -25px; }
.mr-n-30{ margin-right: -30px; }
.mr-n-40{ margin-right: -40px; }
.mr-n-50{ margin-right: -50px; }
.mr-n-60{ margin-right: -60px; }
.mr-n-75{ margin-right: -75px; }
.mr-n-100{ margin-right: -100px; }


/* =========================================
           4. GAP & ALIGNMENT UTILITIES
           ========================================= */
        
        /* Gap Adjusters (Scopes variable locally) */
        .gap-0  { --grid-gap: 0px; }
        .gap-xs { --grid-gap: var(--space-xs); }
        .gap-sm { --grid-gap: var(--space-sm); }
        .gap-md { --grid-gap: var(--space-md); }
        .gap-lg { --grid-gap: var(--space-lg); }
        .gap-xl { --grid-gap: var(--space-xl); }
        .gap-2xl { --grid-gap: calc(var(--space-xl) * 2); }

        /* Alignment (Horizontal - Main Axis) */
        .justify-start   { justify-content: flex-start; }
        .justify-center  { justify-content: center; }
        .justify-end     { justify-content: flex-end; }
        .justify-between { justify-content: space-between; }
        .justify-around  { justify-content: space-around; }

        /* Alignment (Vertical - Cross Axis) */
        .align-start   { align-items: flex-start; }
        .align-center  { align-items: center; }
        .align-end     { align-items: flex-end; }
        .align-stretch { align-items: stretch; }

        /* Spacing Utilities for Sections */
        .section-py { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
        .mb-md { margin-bottom: var(--space-md); }
        .mb-lg { margin-bottom: var(--space-lg); }