/* Base padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* Individual sides */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

/* Axes */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Responsive (sm, md, lg, xl, xxl) */
@media (min-width: 576px) {
  .p-sm-0 { padding: 0 !important; }
  .p-sm-1 { padding: 0.25rem !important; }
  .p-sm-2 { padding: 0.5rem !important; }
  .p-sm-3 { padding: 1rem !important; }
  .p-sm-4 { padding: 1.5rem !important; }
  .p-sm-5 { padding: 3rem !important; }
  .pt-sm-0 { padding-top: 0 !important; }
  .pt-sm-1 { padding-top: 0.25rem !important; }
  .pt-sm-2 { padding-top: 0.5rem !important; }
  .pt-sm-3 { padding-top: 1rem !important; }
  .pt-sm-4 { padding-top: 1.5rem !important; }
  .pt-sm-5 { padding-top: 3rem !important; }
  .pe-sm-0 { padding-right: 0 !important; }
  .pe-sm-1 { padding-right: 0.25rem !important; }
  .pe-sm-2 { padding-right: 0.5rem !important; }
  .pe-sm-3 { padding-right: 1rem !important; }
  .pe-sm-4 { padding-right: 1.5rem !important; }
  .pe-sm-5 { padding-right: 3rem !important; }
  .pb-sm-0 { padding-bottom: 0 !important; }
  .pb-sm-1 { padding-bottom: 0.25rem !important; }
  .pb-sm-2 { padding-bottom: 0.5rem !important; }
  .pb-sm-3 { padding-bottom: 1rem !important; }
  .pb-sm-4 { padding-bottom: 1.5rem !important; }
  .pb-sm-5 { padding-bottom: 3rem !important; }
  .ps-sm-0 { padding-left: 0 !important; }
  .ps-sm-1 { padding-left: 0.25rem !important; }
  .ps-sm-2 { padding-left: 0.5rem !important; }
  .ps-sm-3 { padding-left: 1rem !important; }
  .ps-sm-4 { padding-left: 1.5rem !important; }
  .ps-sm-5 { padding-left: 3rem !important; }
  .px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-sm-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-sm-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-sm-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-sm-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-sm-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
  .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-sm-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-sm-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-sm-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-sm-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-sm-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/***     Width         **/
/* Fixed width utilities */
.w-20  { width: 20% !important; }
.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; }

/* Responsive width utilities */

/* SM (≥576px) */
@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; }
}

/* MD (≥768px) */
@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; }
}

/* LG (≥992px) */
@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; }
}

/* XL (≥1200px) */
@media (min-width: 1200px) {
  .w-xl-25  { width: 25% !important; }
  .w-xl-50  { width: 50% !important; }
  .w-xl-75  { width: 75% !important; }
  .w-xl-100 { width: 100% !important; }
  .w-xl-auto { width: auto !important; }
}

/* XXL (≥1400px) */
@media (min-width: 1400px) {
  .w-xxl-25  { width: 25% !important; }
  .w-xxl-50  { width: 50% !important; }
  .w-xxl-75  { width: 75% !important; }
  .w-xxl-100 { width: 100% !important; }
  .w-xxl-auto { width: auto !important; }
}

/*****        Margin        ***/
/* All sides */
.m-0   { margin: 0 !important; }
.m-1   { margin: 0.25rem !important; }
.m-2   { margin: 0.5rem !important; }
.m-3   { margin: 1rem !important; }
.m-4   { margin: 1.5rem !important; }
.m-5   { margin: 3rem !important; }
.m-auto { margin: auto !important; }

/* X-axis (left and right) */
.mx-0   { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1   { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2   { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3   { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4   { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5   { margin-left: 3rem !important; margin-right: 3rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Y-axis (top and bottom) */
.my-0   { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1   { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2   { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3   { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4   { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5   { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Top */
.mt-0   { margin-top: 0 !important; }
.mt-1   { margin-top: 0.25rem !important; }
.mt-2   { margin-top: 0.5rem !important; }
.mt-3   { margin-top: 1rem !important; }
.mt-4   { margin-top: 1.5rem !important; }
.mt-5   { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }

/* Bottom */
.mb-0   { margin-bottom: 0 !important; }
.mb-1   { margin-bottom: 0.25rem !important; }
.mb-2   { margin-bottom: 0.5rem !important; }
.mb-3   { margin-bottom: 1rem !important; }
.mb-4   { margin-bottom: 1.5rem !important; }
.mb-5   { margin-bottom: 3rem !important; }
.mb-auto { margin-bottom: auto !important; }

/* Start (left in LTR) */
.ms-0   { margin-left: 0 !important; }
.ms-1   { margin-left: 0.25rem !important; }
.ms-2   { margin-left: 0.5rem !important; }
.ms-3   { margin-left: 1rem !important; }
.ms-4   { margin-left: 1.5rem !important; }
.ms-5   { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }

/* End (right in LTR) */
.me-0   { margin-right: 0 !important; }
.me-1   { margin-right: 0.25rem !important; }
.me-2   { margin-right: 0.5rem !important; }
.me-3   { margin-right: 1rem !important; }
.me-4   { margin-right: 1.5rem !important; }
.me-5   { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }