.w-10  { width: 10% !important; }
.w-20  { width: 20% !important; }
.w-30  { width: 30% !important; }
.w-25  { width: 25% !important; }
.w-40  { width: 40% !important; }
.w-50  { width: 50% !important; }
.w-60  { width: 60% !important; }
.w-70  { width: 70% !important; }
.w-80  { width: 80% !important; }
.w-90  { width: 90% !important; }
.w-100 { width: 100% !important; }

/* Tablet (≥768px and <992px) */
@media (max-width: 991.98px) and (min-width: 768px) {
  .w-md-10  { width: 10% !important; }
  .w-md-20  { width: 20% !important; }
  .w-md-30  { width: 30% !important; }
  .w-md-40  { width: 40% !important; }
  .w-md-50  { width: 50% !important; }
  .w-md-60  { width: 60% !important; }
  .w-md-70  { width: 70% !important; }
  .w-md-80  { width: 80% !important; }
  .w-md-90  { width: 90% !important; }
  .w-md-100 { width: 100% !important; }
}

/* Mobile (<768px) */
@media (max-width: 767.98px) {
  .w-sm-10  { width: 10% !important; }
  .w-sm-20  { width: 20% !important; }
  .w-sm-30  { width: 30% !important; }
  .w-sm-40  { width: 40% !important; }
  .w-sm-50  { width: 50% !important; }
  .w-sm-60  { width: 60% !important; }
  .w-sm-70  { width: 70% !important; }
  .w-sm-80  { width: 80% !important; }
  .w-sm-90  { width: 90% !important; }
  .w-sm-100 { width: 100% !important; }
}

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

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

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

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

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

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-2 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-3 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-4 { margin-left: 2rem !important; margin-right: 2rem !important; }
.mx-5 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-2 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-3 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-4 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }



/* Padding Utilities (All sides) */
/* Desktop-first padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }
.p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }
.p-5 { padding: 2.5rem !important; }

/* Tablet override */
@media (max-width: 991.98px) {
  .p-1 { padding: 0.5rem !important; }
  .p-2 { padding: 0.75rem !important; }
  .p-3 { padding: 1rem !important; }
  .p-4 { padding: 1.25rem !important; }
  .p-5 { padding: 1.5rem !important; }
}

/* Mobile override */
@media (max-width: 767.98px) {
  .p-1 { padding: 0.25rem !important; }
  .p-2 { padding: 0.5rem !important; }
  .p-3 { padding: 0.75rem !important; }
  .p-4 { padding: 1rem !important; }
  .p-5 { padding: 1.25rem !important; }
}


/* Padding Top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.5rem !important; }
.pt-2 { padding-top: 1rem !important; }
.pt-3 { padding-top: 1.5rem !important; }
.pt-4 { padding-top: 2rem !important; }
.pt-5 { padding-top: 2.5rem !important; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.5rem !important; }
.pb-2 { padding-bottom: 1rem !important; }
.pb-3 { padding-bottom: 1.5rem !important; }
.pb-4 { padding-bottom: 2rem !important; }
.pb-5 { padding-bottom: 2.5rem !important; }

/* Padding Start (Left in LTR) */
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.5rem !important; }
.ps-2 { padding-left: 1rem !important; }
.ps-3 { padding-left: 1.5rem !important; }
.ps-4 { padding-left: 2rem !important; }
.ps-5 { padding-left: 2.5rem !important; }

/* Padding End (Right in LTR) */
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.5rem !important; }
.pe-2 { padding-right: 1rem !important; }
.pe-3 { padding-right: 1.5rem !important; }
.pe-4 { padding-right: 2rem !important; }
.pe-5 { padding-right: 2.5rem !important; }



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

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


.d-block    { display: block !important; }
.d-flex     { display: flex !important; }

/* Tablet (≥768px and <1200px) */
@media (max-width: 1199.98px) {
  .d-md-block { display: block !important; }
  .d-md-flex  { display: flex !important; }
}

/* Mobile (<768px) */
@media (max-width: 767.98px) {
  .d-sm-block { display: block !important; }
  .d-sm-flex  { display: flex !important; }
}}

.d-none       { display: none !important; }


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

/* Medium (max-width: 991.98px) */
@media (max-width: 991.98px) {
    .flex-md-column {
      flex-direction: column !important;
  }
}

/* Small (max-width: 767.98px) */
@media (max-width: 767.98px) {
    .flex-sm-column {
      flex-direction: column !important;
  }
}



/* Flex Justify Content */
.justify-start    { justify-content: flex-start !important; }
.justify-center   { justify-content: center !important; }
.justify-end      { justify-content: flex-end !important; }
.justify-between  { justify-content: space-between !important; }
.justify-around   { justify-content: space-around !important; }

/* Flex Align Items */
.align-start   { align-items: flex-start !important; }
.align-center  { align-items: center !important; }
.align-end     { align-items: flex-end !important; }

/* ===== Background Colors ===== */
.bg-white   { background-color: #fff !important; }
.bg-light   { background-color: #f8f9fa !important; }
.bg-dark    { background-color: #343a40 !important; }
.bg-light-blue { background-color: #DCE8FF !important; }


/* ===== Text Colors ===== */
.text-white   { color: #fff !important; }
.text-light   { color: #f8f9fa !important; }
.text-dark    { color: #343a40 !important; }
.text-black   { color: #000 !important; }
.text-danger   { color: #ff0000 !important; }




/* Desktop First (≥992px) */
.fs-1 { font-size: 3.5rem !important; }
.fs-2 { font-size: 3rem !important; }
.fs-3 { font-size: 2.5rem !important; }
.fs-4 { font-size: 2rem !important; }
.fs-5 { font-size: 1.75rem !important; }
.fs-6 { font-size: 1.5rem !important; }
.fs-7 { font-size: 1.25rem !important; }
.fs-8 { font-size: 1rem !important; }
.fs-9 { font-size: 0.875rem !important; }

/* Tablet (≥768px and <992px) */
@media (max-width: 991.98px) {
  .fs-1 { font-size: 2.5rem !important; }
  .fs-2 { font-size: 2.25rem !important; }
  .fs-3 { font-size: 2rem !important; }
  .fs-4 { font-size: 1.75rem !important; }
  .fs-5 { font-size: 1.5rem !important; }
  .fs-6 { font-size: 1.25rem !important; }
  .fs-7 { font-size: 1rem !important; }
  .fs-8 { font-size: 0.875rem !important; }
  .fs-9 { font-size: 0.75rem !important; }
}

/* Mobile (<768px) */
@media (max-width: 767.98px) {
  .fs-1 { font-size: 1.75rem !important; }
  .fs-2 { font-size: 1.45rem !important; }
  .fs-3 { font-size: 1.35rem !important; }
  .fs-4 { font-size: 1.25rem !important; }
  .fs-5 { font-size: 1rem !important; }
  .fs-6 { font-size: 1rem !important; }
  .fs-7 { font-size: 1rem !important; }
  .fs-8 { font-size: 0.825rem !important; }
  .fs-9 { font-size: 0.7rem !important; }
}



.btn-primary{
  background-color: #1A6AFF !important;
  color: #FFFFFF !important;
}

.rounded-0{border-radius: 0rem;}
.rounded-1{border-radius: 0.5rem;}
.rounded-2{border-radius: 1rem;}
.gap-2 {  gap: 0.5rem; }
.gap-3 {  gap: 0.75rem; }
.gap-4 {  gap: 1.25rem; }