/* Responsive margin utilities */
@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .m-xl-x-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .m-xl-y-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .m-xl-t-0 {
    margin-top: 0 !important;
  }

  .m-xl-b-0 {
    margin-bottom: 0 !important;
  }

  .m-xl-l-0 {
    margin-left: 0 !important;
  }

  .m-xl-r-0 {
    margin-right: 0 !important;
  }
}

@media (max-width: 1199px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .m-sm-x-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .m-sm-y-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .m-sm-t-0 {
    margin-top: 0 !important;
  }

  .m-sm-b-0 {
    margin-bottom: 0 !important;
  }

  .m-sm-l-0 {
    margin-left: 0 !important;
  }

  .m-sm-r-0 {
    margin-right: 0 !important;
  }
}

/* Responsive padding utilities */
@media (min-width: 1200px) {
  .p-xl-0 {
    padding: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .p-xl-x-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .p-xl-y-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

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

  .p-sm-x-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .p-sm-y-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Responsive font sizes */
@media (min-width: 1200px) {
  .font-size-xl-12 {
    font-size: 12px !important;
  }

  .font-size-xl-14 {
    font-size: 14px !important;
  }

  .font-size-xl-16 {
    font-size: 16px !important;
  }

  .font-size-xl-18 {
    font-size: 18px !important;
  }

  .font-size-xl-20 {
    font-size: 20px !important;
  }
}

@media (max-width: 1199px) {
  .font-size-sm-10 {
    font-size: 10px !important;
  }

  .font-size-sm-12 {
    font-size: 12px !important;
  }

  .font-size-sm-14 {
    font-size: 14px !important;
  }

  .font-size-sm-16 {
    font-size: 16px !important;
  }
}

/* Responsive icon sizes */
@media (min-width: 1200px) {
  .fa-xl-2x {
    font-size: 2em !important;
  }

  .fa-xl-3x {
    font-size: 3em !important;
  }

  .fa-xl-4x {
    font-size: 4em !important;
  }
}

@media (max-width: 1199px) {
  .fa-sm-1x {
    font-size: 1em !important;
  }

  .fa-sm-2x {
    font-size: 2em !important;
  }

  .fa-sm-3x {
    font-size: 3em !important;
  }
}
/* Responsive height utilities */
/* XS - Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
    .min-h-xs-auto { min-height: auto !important; }
    .min-h-xs-25 { min-height: 25px !important; }
    .min-h-xs-50 { min-height: 50px !important; }
    .min-h-xs-100 { min-height: 100px !important; }
    .min-h-xs-150 { min-height: 150px !important; }
    .min-h-xs-200 { min-height: 200px !important; }
    .min-h-xs-250 { min-height: 250px !important; }
    .min-h-xs-300 { min-height: 300px !important; }
}

/* SM - Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
    .min-h-sm-auto { min-height: auto !important; }
    .min-h-sm-25 { min-height: 25px !important; }
    .min-h-sm-50 { min-height: 50px !important; }
    .min-h-sm-100 { min-height: 100px !important; }
    .min-h-sm-150 { min-height: 150px !important; }
    .min-h-sm-200 { min-height: 200px !important; }
    .min-h-sm-250 { min-height: 250px !important; }
    .min-h-sm-300 { min-height: 300px !important; }
}

/* MD - Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
    .min-h-md-auto { min-height: auto !important; }
    .min-h-md-25 { min-height: 25px !important; }
    .min-h-md-50 { min-height: 50px !important; }
    .min-h-md-100 { min-height: 100px !important; }
    .min-h-md-150 { min-height: 150px !important; }
    .min-h-md-200 { min-height: 200px !important; }
    .min-h-md-250 { min-height: 250px !important; }
    .min-h-md-300 { min-height: 300px !important; }
}

/* LG/XL - Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .min-h-xl-auto { min-height: auto !important; }
    .min-h-xl-25 { min-height: 25px !important; }
    .min-h-xl-50 { min-height: 50px !important; }
    .min-h-xl-100 { min-height: 100px !important; }
    .min-h-xl-150 { min-height: 150px !important; }
    .min-h-xl-200 { min-height: 200px !important; }
    .min-h-xl-250 { min-height: 250px !important; }
    .min-h-xl-300 { min-height: 300px !important; }
}

/* Mobile and tablet combined (less than 1200px) */
@media (max-width: 1199px) {
    .min-h-sm-200 { min-height: 200px !important; }
}