/* 
 * Bixing Technology Website - CSS Breakpoints
 * Standardized responsive breakpoints for consistent media queries
 * Created: May 25, 2025
 */

:root {
  /* 
   * BREAKPOINT DEFINITIONS
   * Standard Bootstrap breakpoints for consistency
   */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
}

/*
 * USAGE GUIDE
 * 
 * To ensure consistent responsive behavior across the site,
 * use these standard media query patterns:
 *
 * Extra small devices (phones, less than 576px)
 * @media (max-width: 575.98px) { ... }
 *
 * Small devices (landscape phones, 576px and up)
 * @media (min-width: 576px) and (max-width: 767.98px) { ... }
 * @media (min-width: 576px) { ... }  // sm and up
 *
 * Medium devices (tablets, 768px and up)
 * @media (min-width: 768px) and (max-width: 991.98px) { ... }
 * @media (min-width: 768px) { ... }  // md and up
 *
 * Large devices (desktops, 992px and up)
 * @media (min-width: 992px) and (max-width: 1199.98px) { ... }
 * @media (min-width: 992px) { ... }  // lg and up
 *
 * X-Large devices (large desktops, 1200px and up)
 * @media (min-width: 1200px) and (max-width: 1399.98px) { ... }
 * @media (min-width: 1200px) { ... }  // xl and up
 *
 * XX-Large devices (larger desktops, 1400px and up)
 * @media (min-width: 1400px) { ... }  // xxl and up
 */

/* 
 * RESPONSIVE HELPER CLASSES
 * These classes help with responsive design implementation
 */

/* Hide elements at specific breakpoints */
@media (max-width: 575.98px) {
  .d-xs-none {
    display: none !important;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .d-sm-none {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .d-md-none {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .d-lg-none {
    display: none !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .d-xl-none {
    display: none !important;
  }
}

@media (min-width: 1400px) {
  .d-xxl-none {
    display: none !important;
  }
}

/* Show elements only at specific breakpoints */
.d-xs-only {
  display: none !important;
}
.d-sm-only {
  display: none !important;
}
.d-md-only {
  display: none !important;
}
.d-lg-only {
  display: none !important;
}
.d-xl-only {
  display: none !important;
}
.d-xxl-only {
  display: none !important;
}

@media (max-width: 575.98px) {
  .d-xs-only {
    display: block !important;
  }
  .d-xs-only.d-flex {
    display: flex !important;
  }
  .d-xs-only.d-inline {
    display: inline !important;
  }
  .d-xs-only.d-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .d-sm-only {
    display: block !important;
  }
  .d-sm-only.d-flex {
    display: flex !important;
  }
  .d-sm-only.d-inline {
    display: inline !important;
  }
  .d-sm-only.d-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .d-md-only {
    display: block !important;
  }
  .d-md-only.d-flex {
    display: flex !important;
  }
  .d-md-only.d-inline {
    display: inline !important;
  }
  .d-md-only.d-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .d-lg-only {
    display: block !important;
  }
  .d-lg-only.d-flex {
    display: flex !important;
  }
  .d-lg-only.d-inline {
    display: inline !important;
  }
  .d-lg-only.d-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .d-xl-only {
    display: block !important;
  }
  .d-xl-only.d-flex {
    display: flex !important;
  }
  .d-xl-only.d-inline {
    display: inline !important;
  }
  .d-xl-only.d-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 1400px) {
  .d-xxl-only {
    display: block !important;
  }
  .d-xxl-only.d-flex {
    display: flex !important;
  }
  .d-xxl-only.d-inline {
    display: inline !important;
  }
  .d-xxl-only.d-inline-block {
    display: inline-block !important;
  }
}