@charset "UTF-8";
/* ==========================================================================
   Responsive Media Query Breakpoints (Mobile-First, Clean, and Professional)
   ========================================================================== */
/* Base styles: Mobile first (0 - 575px) */
/* Small devices (phones, 576px and up) */
@media (min-width: 576px) {
  /* Styles for ≥576px (small phones and up) */
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* Styles for ≥768px (tablets and up) */
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Styles for ≥992px (desktops and up) */
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Styles for ≥1200px (large desktops and up) */
}
/* Super large screens (1440px and up) */
@media (min-width: 1440px) {
  /* Styles for ≥1440px (very large screens) */
}
/* ==========================================================================
   Optional: Max-width breakpoints for targeting below certain sizes
   ========================================================================== */
/* Below 1200px */
@media (max-width: 1199.98px) {
  /* Styles for <1200px */
}
/* Below 992px */
@media (max-width: 991.98px) {
  /* Styles for <992px */
}
/* Below 768px */
@media (max-width: 767.98px) {
  /* Styles for <768px */
}
/* Below 576px */
@media (max-width: 575.98px) {
  /* Styles for <576px */
}
/* Ultra small devices (below 475px) */
@media (max-width: 474.98px) {
  /* Styles for <475px */
}
/* ==========================================================================
   Example: "Between" Ranges (for precise targeting)
   ========================================================================== */
/* Only tablets (768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Styles for tablets only */
}
/* Only small desktops (992px - 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Styles for small desktops only */
}