/* ==========================================================================
   IntellectIT Theme — global.css

   Design token + utility layer for Oxygen Builder (WordPress).

   Variable naming follows Oxygen Builder conventions (flat, clean custom
   properties) rather than WordPress Block Editor --wp--preset--* tokens.
   If the block editor is also in use, map these to theme.json via
   settings.custom — do NOT re-declare --wp--preset--* tokens here.

   Sections:
     0  Font Face Declarations
     2  Base / Reset Extensions
     3  Layout Utilities
     4  Grid Utilities   ← replaces missing Oxygen grid layer
     5  Width + Viewport Utilities
     6  Typography Utilities
     7  Button Utilities
     8  Card Utilities
     9  Component Classes
    10  Spacing Utilities
    11  Gap Utilities
    12  Visibility & Accessibility
   ========================================================================== */


/* ==========================================================================
   Section 0 — Font Face Declarations
   ========================================================================== */

@font-face {
  font-family: "Kohinoor Bangla";
  font-weight: 300;
  font-style:  normal;
  font-display: swap;
  src: url("/wp-content/themes/intellectit-theme/assets/fonts/KohinoorBangla-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Kohinoor Bangla";
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
  src: url("/wp-content/themes/intellectit-theme/assets/fonts/KohinoorBangla-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Kohinoor Bangla";
  font-weight: 500;
  font-style:  normal;
  font-display: swap;
  src: url("/wp-content/themes/intellectit-theme/assets/fonts/KohinoorBangla-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Kohinoor Bangla";
  font-weight: 600;
  font-style:  normal;
  font-display: swap;
  src: url("/wp-content/themes/intellectit-theme/assets/fonts/KohinoorBangla-Semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Kohinoor Bangla";
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
  src: url("/wp-content/themes/intellectit-theme/assets/fonts/KohinoorBangla-Bold.woff2") format("woff2");
}

/* ==========================================================================
   Section 2 — Base / Reset Extensions
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg {
  display:   block;
  max-width: 100%;
  height:    auto;
}

figure {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--secondary);
  color:      var(--on-secondary);
}

*:focus-visible {
  outline:        2px solid var(--accent-cool);
  outline-offset: 2px;
}


/* ==========================================================================
   Section 3 — Layout Utilities
   ========================================================================== */

.bt-container {
  width:          100%;
  max-width:      var(--content-width);
  margin-inline:  auto;
  padding-inline: var(--gutter);
}

.bt-container-narrow {
  width:          100%;
  max-width:      var(--narrow-width);
  margin-inline:  auto;
  padding-inline: var(--gutter);
}

.bt-container-wide {
  width:          100%;
  max-width:      var(--wide-width);
  margin-inline:  auto;
  padding-inline: var(--gutter);
}

.bt-section {
  padding-block: var(--space-2xl);
}

.bt-section-alt {
  padding-block:    var(--space-2xl);
  background-color: var(--neutral-100);
}

.bt-section-dark {
  padding-block:    var(--space-2xl);
  background-color: var(--primary);
  color:            var(--on-primary);
}


/* ==========================================================================
   Section 4 — Grid Utilities
   Add these class names to Oxygen → Selectors Manager for editor access.
   ========================================================================== */

.row {
  display:        grid;
  grid-auto-flow: column;
  justify-content: start;
}

.column {
  display:        grid;
  grid-auto-flow: row;
  justify-items:  start;
  align-content:  start;
}

.columns-2  { display: grid; grid-template-columns: repeat(2, 1fr); }
.columns-3  { display: grid; grid-template-columns: repeat(3, 1fr); }
.columns-4  { display: grid; grid-template-columns: repeat(4, 1fr); }
.columns-5  { display: grid; grid-template-columns: repeat(5, 1fr); }
.columns-6  { display: grid; grid-template-columns: repeat(6, 1fr); }
.columns-7  { display: grid; grid-template-columns: repeat(7, 1fr); }
.columns-8  { display: grid; grid-template-columns: repeat(8, 1fr); }

/* Auto-fill responsive columns */
.columns-min-5  { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem,  1fr)); }
.columns-min-10 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.columns-min-20 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.columns-min-30 { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); }
.columns-min-40 { display: grid; grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr)); }
.columns-min-50 { display: grid; grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr)); }

/* ── Breakpoint: xl (1400 px) ── */
@media (max-width: 1400px) {
  .column--on-xl   { grid-template-columns: 1fr; grid-auto-flow: row; }
  .columns-2--on-xl { grid-template-columns: repeat(2, 1fr); }
  .columns-3--on-xl { grid-template-columns: repeat(3, 1fr); }
  .columns-4--on-xl { grid-template-columns: repeat(4, 1fr); }
  .columns-5--on-xl { grid-template-columns: repeat(5, 1fr); }
  .columns-6--on-xl { grid-template-columns: repeat(6, 1fr); }
}

/* ── Breakpoint: l (992 px) ── */
@media (max-width: 992px) {
  .column--on-l   { grid-template-columns: 1fr; grid-auto-flow: row; }
  .columns-2--on-l { grid-template-columns: repeat(2, 1fr); }
  .columns-3--on-l { grid-template-columns: repeat(3, 1fr); }
  .columns-4--on-l { grid-template-columns: repeat(4, 1fr); }
  .columns-5--on-l { grid-template-columns: repeat(5, 1fr); }
  .columns-6--on-l { grid-template-columns: repeat(6, 1fr); }
}

/* ── Breakpoint: m (768 px) ── */
@media (max-width: 768px) {
  .column--on-m   { grid-template-columns: 1fr; grid-auto-flow: row; }
  .columns-2--on-m { grid-template-columns: repeat(2, 1fr); }
  .columns-3--on-m { grid-template-columns: repeat(3, 1fr); }
  .columns-4--on-m { grid-template-columns: repeat(4, 1fr); }
  .columns-5--on-m { grid-template-columns: repeat(5, 1fr); }
  .columns-6--on-m { grid-template-columns: repeat(6, 1fr); }
}

/* ── Breakpoint: s (480 px) ── */
@media (max-width: 480px) {
  .column--on-s   { grid-template-columns: 1fr; grid-auto-flow: row; }
  .columns-2--on-s { grid-template-columns: repeat(2, 1fr); }
  .columns-3--on-s { grid-template-columns: repeat(3, 1fr); }
  .columns-4--on-s { grid-template-columns: repeat(4, 1fr); }
  .columns-5--on-s { grid-template-columns: repeat(5, 1fr); }
  .columns-6--on-s { grid-template-columns: repeat(6, 1fr); }
}


/* ==========================================================================
   Section 5 — Width + Viewport Utilities
   ========================================================================== */

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

.vh--80  { height: 80vh  !important; }
.vh--100 { height: 100vh !important; }

@media (max-width: 768px) {
  .width--90,
  .width--80,
  .width--70,
  .width--60,
  .width--50,
  .width--40,
  .width--30,
  .width--20,
  .width--10 {
    width: 100% !important;
  }

  .vh--80,
  .vh--100 {
    height: auto !important;
  }
}


/* ==========================================================================
   Section 6 — Typography Utilities
   ========================================================================== */

.bt-heading-1 { font-size: var(--text-4xl); font-weight: 700; line-height: 1.2;  }
.bt-heading-2 { font-size: var(--text-3xl); font-weight: 700; line-height: 1.25; }
.bt-heading-3 { font-size: var(--text-2xl); font-weight: 700; line-height: 1.3;  }
.bt-heading-4 { font-size: var(--text-xl);  font-weight: 700; line-height: 1.35; }

.bt-body-lg { font-size: var(--text-lg); line-height: 1.65; }
.bt-body    { font-size: var(--text-md); line-height: 1.65; }
.bt-body-sm { font-size: var(--text-sm); line-height: 1.5;  }
.bt-caption { font-size: var(--text-xs); line-height: 1.4;  }

.bt-text-muted   { color: var(--neutral-600); }
.bt-text-accent  { color: var(--accent-cool); }
.bt-text-on-dark { color: var(--on-primary);  }

.bt-section-heading {
  font-size:      var(--text-3xl);
  font-weight:    700;
  padding-bottom: var(--space-2xs);
  border-bottom:  3px solid var(--secondary);
  margin-bottom:  var(--space-md);
  display:        inline-block;
}

.bt-kicker {
  font-size:      var(--text-xs);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--accent-cool);
  margin-bottom:  var(--space-2xs);
  display:        block;
}

.bt-link {
  color:                 var(--accent-cool);
  text-decoration:       underline;
  text-underline-offset: 0.2em;
  transition:            color var(--transition-fast);
}

.bt-link:hover {
  color: var(--primary);
}

.bt-focus-ring:focus-visible {
  outline:        2px solid var(--accent-cool);
  outline-offset: 2px;
}


/* ==========================================================================
   Section 7 — Button Utilities
   ========================================================================== */

.bt-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2xs);
  padding:         0.75rem 1.5rem;
  font-family:     inherit;
  font-size:       var(--text-md);
  font-weight:     700;
  line-height:     1.25;
  border:          2px solid transparent;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  text-decoration: none;
  transition:      background-color var(--transition-fast),
                   border-color     var(--transition-fast),
                   color            var(--transition-fast),
                   box-shadow       var(--transition-fast);
}

/* Primary */
.bt-btn-primary {
  background-color: var(--primary);
  color:            var(--on-primary);
  border-color:     var(--primary);
}

.bt-btn-primary:hover {
  background-color: var(--accent-warm);
  border-color:     var(--accent-warm);
  color:            var(--on-accent-warm);
}

/* Secondary */
.bt-btn-secondary {
  background-color: var(--secondary);
  color:            var(--on-secondary);
  border-color:     var(--secondary);
}

.bt-btn-secondary:hover {
  background-color: var(--secondary-dark);
  border-color:     var(--secondary-dark);
  color:            var(--on-secondary);
}

/* Outline */
.bt-btn-outline {
  background-color: transparent;
  color:            var(--primary);
  border-color:     var(--primary);
}

.bt-btn-outline:hover {
  background-color: var(--primary);
  color:            var(--on-primary);
}

/* Ghost */
.bt-btn-ghost {
  background-color:      transparent;
  color:                 var(--accent-cool);
  border-color:          transparent;
  padding-inline:        0;
  text-decoration:       underline;
  text-underline-offset: 0.2em;
}

.bt-btn-ghost:hover {
  color: var(--primary);
}

/* Size modifiers */
.bt-btn-lg { padding: 1rem 2rem;    font-size: var(--text-lg); }
.bt-btn-sm { padding: 0.5rem 1rem;  font-size: var(--text-sm); }


/* ==========================================================================
   Section 8 — Card Utilities
   ========================================================================== */

.bt-card {
  background-color: var(--neutral-0);
  border-radius:    var(--radius-md);
  box-shadow:       var(--shadow-sm);
  overflow:         hidden;
}

.bt-card-hover {
  transition: box-shadow var(--transition-base),
              transform  var(--transition-base);
}

.bt-card-hover:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-2px);
}

.bt-card-body {
  padding: var(--space-md);
}

.bt-card-media {
  aspect-ratio: 16 / 10;
  overflow:     hidden;
}

.bt-card-media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.bt-card-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap:                   var(--gap-md);
}


/* ==========================================================================
   Section 9 — Component Classes
   ========================================================================== */

/* ── Hero ── */
.bt-hero {
  position:      relative;
  display:       flex;
  align-items:   center;
  min-height:    50vh;
  padding-block: var(--space-2xl);
  overflow:      hidden;
}

.bt-hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to right,
    rgba(0, 32, 91, 0.85) 0%,
    rgba(0, 32, 91, 0.60) 100%
  );
  z-index: 1;
}

.bt-hero > *:not(.bt-hero-overlay) {
  position: relative;
  z-index:  2;
}

/* ── Stats row ── */
.bt-stats-row {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--gap-lg);
  justify-content: center;
}

.bt-stat-item {
  text-align: center;
}

.bt-stat-item .bt-stat-number {
  display:     block;
  font-size:   var(--text-4xl);
  font-weight: 700;
  color:       var(--secondary);
  line-height: 1;
}

.bt-stat-item .bt-stat-label {
  display:    block;
  font-size:  var(--text-sm);
  color:      var(--neutral-600);
  margin-top: var(--space-4xs);
}

/* ── Trust strip ── */
.bt-trust-strip {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             var(--gap-lg);
}

.bt-trust-logo {
  filter:     grayscale(100%);
  opacity:    0.6;
  transition: filter var(--transition-base), opacity var(--transition-base);
}

.bt-trust-logo:hover {
  filter:  grayscale(0%);
  opacity: 1;
}

/* ── Testimonial card ── */
.bt-testimonial-card {
  background-color: var(--neutral-50);
  border-left:      4px solid var(--secondary);
  padding:          var(--space-md);
  border-radius:    var(--radius-md);
}

/* ── CTA band ── */
.bt-cta-band {
  background-color: var(--primary);
  color:            var(--on-primary);
  padding-block:    var(--space-xl);
  text-align:       center;
}

/* ── Process step ── */
.bt-process-step {
  position:       relative;
  padding-left:   var(--space-lg);
  padding-bottom: var(--space-md);
}

.bt-process-step::before {
  content:          "";
  display:          block;
  width:            12px;
  height:           12px;
  border-radius:    var(--radius-full);
  background-color: var(--accent-cool);
  position:         absolute;
  left:             0;
  top:              0.35rem;
}

.bt-process-connector {
  position:         absolute;
  left:             5px; /* centre of 12 px dot */
  top:              1.5rem;
  bottom:           0;
  width:            2px;
  background-color: var(--neutral-200);
}

/* ── Profile card ── */
.bt-profile-card {
  text-align: center;
}

.bt-profile-card .bt-profile-photo {
  width:         160px;
  height:        160px;
  border-radius: var(--radius-full);
  object-fit:    cover;
  margin-inline: auto;
  margin-bottom: var(--space-sm);
}

.bt-profile-card .bt-profile-name {
  font-size:     var(--text-xl);
  font-weight:   700;
  color:         var(--primary);
  margin-bottom: var(--space-4xs);
}

.bt-profile-card .bt-profile-role {
  font-size: var(--text-sm);
  color:     var(--neutral-600);
}

/* ── FAQ ── */
.bt-faq-item {
  border-bottom: 1px solid var(--neutral-200);
  padding-block: var(--space-sm);
}

.bt-faq-question {
  font-size:     var(--text-lg);
  font-weight:   600;
  color:         var(--primary);
  margin-bottom: var(--space-2xs);
  cursor:        pointer;
}

.bt-faq-answer {
  font-size: var(--text-md);
  color:     var(--neutral-600);
}

/* ── Callout ── */
.bt-callout {
  background-color: var(--neutral-50);
  border-left:      4px solid var(--neutral-400);
  border-radius:    0 var(--radius-md) var(--radius-md) 0;
  padding:          var(--space-sm) var(--space-md);
}

.bt-callout-info    { border-left-color: var(--accent-cool); }
.bt-callout-warning { border-left-color: var(--warning);     }

/* ── Chips ── */
.bt-chip {
  display:          inline-flex;
  align-items:      center;
  padding:          0.25rem 0.75rem;
  background-color: var(--neutral-100);
  color:            var(--neutral-800);
  border-radius:    var(--radius-full);
  font-size:        var(--text-sm);
  font-weight:      500;
}

.bt-chip-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2xs);
}

/* ── Sticky CTA ── */
.bt-sticky-cta {
  position:         sticky;
  top:              0;
  z-index:          100;
  background-color: var(--primary);
  color:            var(--on-primary);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          var(--space-2xs) var(--gutter);
}

/* ── Comparison table ── */
.bt-comparison-table {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0;
}

.bt-comparison-table th {
  background-color: var(--primary);
  color:            var(--on-primary);
  padding:          var(--space-2xs) var(--space-sm);
  text-align:       left;
  font-weight:      700;
}

.bt-comparison-table td {
  padding:       var(--space-2xs) var(--space-sm);
  border-bottom: 1px solid var(--neutral-200);
}

.bt-comparison-table tr:nth-child(even) td {
  background-color: var(--neutral-50);
}

/* ── Filter bar ── */
.bt-filter-bar {
  display:          flex;
  flex-wrap:        wrap;
  gap:              var(--space-2xs);
  background-color: var(--neutral-50);
  border-radius:    var(--radius-md);
  padding:          var(--space-2xs);
  margin-bottom:    var(--space-lg);
}

/* ── Author box ── */
.bt-author-box {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--space-sm);
  background-color: var(--neutral-50);
  border-radius:    var(--radius-md);
  padding:          var(--space-md);
}

.bt-author-box .bt-author-avatar {
  width:         64px;
  height:        64px;
  border-radius: var(--radius-full);
  object-fit:    cover;
  flex-shrink:   0;
}

/* ── Legal TOC ── */
.bt-legal-toc {
  position:         sticky;
  top:              var(--space-lg);
  background-color: var(--neutral-50);
  border-radius:    var(--radius-md);
  padding:          var(--space-md);
}

.bt-legal-toc a {
  display:         block;
  color:           var(--accent-cool);
  font-size:       var(--text-sm);
  text-decoration: none;
  padding-block:   var(--space-4xs);
  transition:      color var(--transition-fast);
}

.bt-legal-toc a:hover {
  color: var(--primary);
}

/* ── Portal links grid ── */
.bt-portal-links {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   var(--gap-md);
}

/* ── Contact methods grid ── */
.bt-contact-methods {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   var(--gap-md);
}

/* ── Map embed ── */
.bt-map-embed {
  aspect-ratio:  16 / 9;
  border-radius: var(--radius-md);
  overflow:      hidden;
}

.bt-map-embed iframe {
  width:  100%;
  height: 100%;
  border: 0;
}

/* ── Breadcrumb ── */
.bt-breadcrumb {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-4xs);
  font-size:  var(--text-sm);
  color:      var(--neutral-600);
  list-style: none;
  margin:     0;
  padding:    0;
}

.bt-breadcrumb a {
  color:           var(--accent-cool);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.bt-breadcrumb a:hover {
  color: var(--primary);
}

.bt-breadcrumb li:not(:last-child)::after {
  content:       "/";
  margin-inline: var(--space-4xs);
  color:         var(--neutral-400);
}


/* ==========================================================================
   Section 10 — Spacing Utilities
   ========================================================================== */

.bt-mt-0  { margin-top:    0; }
.bt-mb-0  { margin-bottom: 0; }
.bt-pt-0  { padding-top:    0; }
.bt-pb-0  { padding-bottom: 0; }

.bt-mt-4xs { margin-top:     var(--space-4xs); }
.bt-mb-4xs { margin-bottom:  var(--space-4xs); }
.bt-pt-4xs { padding-top:    var(--space-4xs); }
.bt-pb-4xs { padding-bottom: var(--space-4xs); }

.bt-mt-3xs { margin-top:     var(--space-3xs); }
.bt-mb-3xs { margin-bottom:  var(--space-3xs); }
.bt-pt-3xs { padding-top:    var(--space-3xs); }
.bt-pb-3xs { padding-bottom: var(--space-3xs); }

.bt-mt-2xs { margin-top:     var(--space-2xs); }
.bt-mb-2xs { margin-bottom:  var(--space-2xs); }
.bt-pt-2xs { padding-top:    var(--space-2xs); }
.bt-pb-2xs { padding-bottom: var(--space-2xs); }

.bt-mt-xs  { margin-top:     var(--space-xs); }
.bt-mb-xs  { margin-bottom:  var(--space-xs); }
.bt-pt-xs  { padding-top:    var(--space-xs); }
.bt-pb-xs  { padding-bottom: var(--space-xs); }

.bt-mt-sm  { margin-top:     var(--space-sm); }
.bt-mb-sm  { margin-bottom:  var(--space-sm); }
.bt-pt-sm  { padding-top:    var(--space-sm); }
.bt-pb-sm  { padding-bottom: var(--space-sm); }

.bt-mt-md  { margin-top:     var(--space-md); }
.bt-mb-md  { margin-bottom:  var(--space-md); }
.bt-pt-md  { padding-top:    var(--space-md); }
.bt-pb-md  { padding-bottom: var(--space-md); }

.bt-mt-lg  { margin-top:     var(--space-lg); }
.bt-mb-lg  { margin-bottom:  var(--space-lg); }
.bt-pt-lg  { padding-top:    var(--space-lg); }
.bt-pb-lg  { padding-bottom: var(--space-lg); }

.bt-mt-xl  { margin-top:     var(--space-xl); }
.bt-mb-xl  { margin-bottom:  var(--space-xl); }
.bt-pt-xl  { padding-top:    var(--space-xl); }
.bt-pb-xl  { padding-bottom: var(--space-xl); }

.bt-mt-2xl { margin-top:     var(--space-2xl); }
.bt-mb-2xl { margin-bottom:  var(--space-2xl); }
.bt-pt-2xl { padding-top:    var(--space-2xl); }
.bt-pb-2xl { padding-bottom: var(--space-2xl); }

.bt-mt-3xl { margin-top:     var(--space-3xl); }
.bt-mb-3xl { margin-bottom:  var(--space-3xl); }
.bt-pt-3xl { padding-top:    var(--space-3xl); }
.bt-pb-3xl { padding-bottom: var(--space-3xl); }


/* ==========================================================================
   Section 11 — Gap Utilities
   ========================================================================== */

.bt-gap-xs  { gap: var(--gap-xs);  }
.bt-gap-sm  { gap: var(--gap-sm);  }
.bt-gap-md  { gap: var(--gap-md);  }
.bt-gap-lg  { gap: var(--gap-lg);  }
.bt-gap-xl  { gap: var(--gap-xl);  }
.bt-gap-2xl { gap: var(--gap-2xl); }


/* ==========================================================================
   Section 12 — Visibility & Accessibility
   ========================================================================== */

.bt-sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

.bt-text-center { text-align: center; }
.bt-text-left   { text-align: left;   }
.bt-mx-auto     { margin-inline: auto; }

@media (max-width: 767.98px) {
  .bt-hide-md-down { display: none !important; }
}

@media (min-width: 768px) {
  .bt-hide-md-up { display: none !important; }
}