/* CorpsGuide marketing site layout & components. Colors come from --mud-palette-* (theme.css), so
   everything below adapts to light/dark automatically. */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--mud-palette-background);
}

a {
    text-decoration: none;
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* FocusOnNavigate (Routes.razor) moves focus to the page <h1> on load/navigation so screen readers
   announce the new page. That leaves a visible focus ring on the heading until you click away. The
   <h1> is non-interactive, so suppress its outline — the focus move (and screen-reader announcement)
   still happens; only the ring is hidden. Interactive controls keep their focus rings. */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* ---------- Brand logo light/dark swap (mirrors theme.css palette logic) ---------- */
.brand-logo.dark-mode,
.footer-logo.dark-mode {
    display: none;
}

.brand-logo.light-mode,
.footer-logo.light-mode {
    display: inline-block;
}

:root[data-theme="dark"] .brand-logo.light-mode,
:root[data-theme="dark"] .footer-logo.light-mode {
    display: none;
}

:root[data-theme="dark"] .brand-logo.dark-mode,
:root[data-theme="dark"] .footer-logo.dark-mode {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .brand-logo.light-mode,
    :root:not([data-theme]) .footer-logo.light-mode {
        display: none;
    }

    :root:not([data-theme]) .brand-logo.dark-mode,
    :root:not([data-theme]) .footer-logo.dark-mode {
        display: inline-block;
    }
}

/* ---------- Header ---------- */
.main-appbar {
    backdrop-filter: saturate(180%) blur(10px);
    background-color: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.appbar-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

.appbar-brand {
    align-items: center;
    display: inline-flex;
    gap: 0.6rem;
}

.appbar-brand .brand-logo {
    height: 38px;
    width: auto;
}

.appbar-links-desktop {
    align-items: center;
    gap: 0.35rem;
}

.appbar-link {
    border-radius: 8px;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    padding: 0.45rem 0.7rem;
    transition: background-color 120ms ease, color 120ms ease;
}

.appbar-link:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.download-button {
    font-weight: 700;
    margin-left: 0.35rem;
}

.theme-toggle {
    align-items: center;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    transition: background-color 120ms ease, color 120ms ease;
}

.theme-toggle:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.theme-toggle .theme-toggle-dark {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-toggle-dark {
    display: inline-flex;
}

:root[data-theme="dark"] .theme-toggle .theme-toggle-light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle .theme-toggle-dark {
        display: inline-flex;
    }

    :root:not([data-theme]) .theme-toggle .theme-toggle-light {
        display: none;
    }
}

/* ---------- Mobile navigation (native details/summary, no circuit) ---------- */
.mobile-navigation summary {
    list-style: none;
    cursor: pointer;
}

.mobile-navigation summary::-webkit-details-marker {
    display: none;
}

.appbar-menu-button {
    align-items: center;
    color: var(--mud-palette-text-primary);
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

.mobile-navigation-panel {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    position: absolute;
    right: 12px;
    top: 64px;
    width: min(320px, calc(100vw - 24px));
    z-index: 1300;
}

.mobile-drawer-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.mobile-drawer-header .brand-logo {
    height: 26px;
    width: auto;
}

.mobile-navigation-close {
    background: none;
    border: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
}

.mobile-drawer-links {
    display: flex;
    flex-direction: column;
}

.mobile-drawer-link {
    border-radius: 8px;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    padding: 0.7rem 0.6rem;
}

.mobile-drawer-link:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.mobile-drawer-download {
    margin-top: 0.5rem;
}

/* ---------- Main content ---------- */
.web-main-content {
    min-height: 70vh;
}

.main-content {
    padding-left: 0;
    padding-right: 0;
}

section {
    scroll-margin-top: 80px;
}

.page-section {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 20px;
    width: 100%;
}

.section-narrow {
    max-width: 860px;
}

/* ---------- Hero ---------- */
.hero {
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--mud-palette-primary-rgb), 0.16), transparent 42%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)),
            var(--mud-palette-surface) 70%);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 28px;
    overflow: hidden;
}

.hero-brand-lockup {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.hero-app-icon {
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    height: 56px;
    width: 56px;
}

.hero-title {
    font-size: clamp(2.1rem, 5vw, 3.4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.08 !important;
}

.hero-eyebrow {
    color: var(--mud-palette-primary);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.section-title {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    line-height: 1.15 !important;
}

.card-title {
    font-size: 1.14rem !important;
    font-weight: 700 !important;
}

/* ---------- Trust strip ---------- */
.trust-strip {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
}

.trust-item {
    align-items: center;
    display: inline-flex;
    font-weight: 700;
    gap: 0.4rem;
}

/* ---------- Feature cards ---------- */
.feature-card {
    border-radius: 18px !important;
    height: 100%;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.feature-card:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    transform: translateY(-3px);
}

.feature-icon {
    align-items: center;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    border-radius: 12px;
    color: var(--mud-palette-primary);
    display: inline-flex;
    height: 46px;
    justify-content: center;
    width: 46px;
}

/* Inline brand icons from the app (AppIcon). currentColor = brand; the cutout parts read
   --mud-palette-background, which we pin to the card surface so they blend on the card. */
.app-icon {
    display: inline-flex;
    line-height: 0;
}

.app-icon svg {
    display: block;
    height: 100%;
    width: 100%;
}

.feature-app-icon {
    --mud-palette-background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    height: 56px;
    width: 56px;
}

.cta-panel {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface)),
            color-mix(in srgb, var(--mud-palette-secondary) 16%, var(--mud-palette-surface)));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 28px;
}

/* ---------- App screenshot frame ---------- */
.app-screenshot {
    margin: 0;
}

.app-screenshot-frame {
    align-items: center;
    background: linear-gradient(160deg, var(--mud-palette-background-gray), var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 26px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
}

.app-screenshot-img {
    border-radius: 18px;
    display: block;
    height: auto;
    max-width: 100%;
}

.app-screenshot-placeholder {
    align-items: center;
    aspect-ratio: 9 / 19;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
}

.app-screenshot-caption {
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
    margin-top: 0.6rem;
    text-align: center;
}

/* ---------- Footer ---------- */
.footer-divider {
    margin-top: 3rem;
}

.footer {
    margin: 0 auto;
    max-width: 1200px;
    padding: 2.5rem 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}

.footer-brand {
    max-width: 420px;
}

.footer-logo {
    height: 28px;
    width: auto;
}

.footer-tagline {
    color: var(--mud-palette-text-secondary);
    margin: 0.75rem 0 0.5rem;
}

.footer-disclaimer {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    margin-top: 0.5rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-col-title {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.footer-copyright {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    margin-top: 1.5rem;
    text-align: center;
}

/* ---------- FAQ (native details/summary) ---------- */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
}

.faq-question {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: 1rem;
    justify-content: space-between;
    list-style: none;
    padding: 1.1rem 1.25rem;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
    transition: transform 160ms ease;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    padding: 1rem 1.25rem 1.25rem;
}

/* ---------- Legal / long-form content ---------- */
.legal-content {
    color: var(--mud-palette-text-primary);
    margin: 0 auto;
    max-width: 820px;
}

.legal-content h2 {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 2.25rem 0 0.75rem;
}

.legal-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
}

.legal-content p,
.legal-content li {
    color: var(--mud-palette-text-secondary);
    line-height: 1.7;
}

.legal-content ul,
.legal-content ol {
    margin: 0.5rem 0 0.5rem 1.5rem;
}

.legal-content li {
    margin-bottom: 0.4rem;
}

.legal-content a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

/* ---------- Stub pages ---------- */
.stub-page {
    margin: 4rem auto;
    max-width: 620px;
    padding: 0 20px;
    text-align: center;
}

.stub-page h1 {
    font-size: 2rem;
    font-weight: 800;
}

/* ---------- Blazor error UI (created by js/blazor-error-ui.js) ---------- */
#blazor-error-ui {
    background: #b02a37;
    bottom: 0;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.3);
    color: #fff;
    display: none;
    left: 0;
    padding: 0.9rem 1.4rem;
    position: fixed;
    right: 0;
    z-index: 3000;
}

#blazor-error-ui .reload {
    color: #fff;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.75rem;
}

/* ---------- Tools hub (/tools) ---------- */
.tool-card-link {
    color: inherit !important;
    display: block;
    height: 100%;
}

.tool-card-link:hover {
    color: inherit !important;
}

.tool-card-head {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.tool-badge {
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.6rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.tool-badge-live {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-primary);
}

.tool-badge-soon {
    background-color: color-mix(in srgb, var(--mud-palette-text-secondary) 16%, transparent);
    color: var(--mud-palette-text-secondary);
}

/* Upcoming tools: muted and non-interactive (no hover lift). */
.tool-card-soon {
    opacity: 0.72;
}

.tool-card-soon:hover {
    border-color: var(--mud-palette-lines-default);
    transform: none;
}

/* ---------- Tool pages (calculators) ---------- */
/* Prose blocks for the explanatory SEO content around a calculator widget. */
.tool-prose p {
    color: var(--mud-palette-text-secondary);
    line-height: 1.7;
}

/* Interactive calculator card (the InteractiveServer island). */
.calc-card {
    border-radius: 20px !important;
}

.calc-grid {
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .calc-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.calc-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.calc-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.calc-segment {
    display: flex;
    gap: 0.5rem;
}

.calc-segment .mud-button-root {
    flex: 1 1 0;
}

.calc-event {
    padding: 1rem 0;
}

.calc-event-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.calc-event-title-group {
    align-items: center;
    display: inline-flex;
    gap: 0.6rem;
}

/* App brand event glyph next to each event title (currentColor = brand primary). Sized by height so
   each glyph keeps its natural aspect ratio (the plank is wider/flatter than pull-up and run). */
.calc-event-glyph {
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.app-icon.calc-event-glyph svg {
    height: 28px;
    width: auto;
}

.calc-event-title {
    font-weight: 700 !important;
}

/* App brand glyph inside the tinted square on the three "PFT events" cards (height-sized, centered). */
.feature-icon .app-icon.calc-card-glyph svg {
    height: 24px;
    width: auto;
}

.calc-readout {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

/* Results block */
.calc-results {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    margin-top: 1rem;
    padding: 1.25rem 1.4rem;
}

.calc-result-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
}

.calc-result-total {
    align-items: baseline;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    justify-content: space-between;
    margin-top: 0.6rem;
    padding-top: 0.8rem;
}

.calc-total-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.calc-class {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
    margin-top: 0.4rem;
}

.calc-note {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    margin-top: 0.75rem;
}

/* Standards / class-band table */
.calc-table {
    border-collapse: collapse;
    width: 100%;
}

.calc-table caption {
    text-align: left;
}

.calc-table th,
.calc-table td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 0.7rem 0.9rem;
    text-align: left;
}

.calc-table th {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.calc-table td:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.calc-table-wrap {
    overflow-x: auto;
}

/* Standards tables whose every column after the first is a number (body composition), not just the
   last one — keeps the digits aligned across all of them. */
.calc-table-numeric td:not(:first-child) {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ---------- Ribbon rack builder ----------
   The rack is centered and the rows stack tight, the way a rack is actually worn. Ribbon art is a
   fixed 150x42 aspect, so widths are set per row-count and height follows. */
.rack-preview {
    align-items: center;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.75rem;
    min-height: 132px;
    justify-content: center;
    padding: 1.1rem 1rem;
}

.rack-empty {
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
}

.rack-row {
    display: flex;
    gap: 2px;
    justify-content: center;
}

/* Each ribbon is a button so removal works by keyboard as well as pointer. */
.rack-ribbon {
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    line-height: 0;
    padding: 0;
}

.rack-ribbon:hover,
.rack-ribbon:focus-visible {
    border-color: var(--mud-palette-primary);
}

.rack-ribbon img {
    display: block;
    height: auto;
    width: 88px;
}

.rack-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 0.9rem;
}

/* Picker list: one scrollable column so the rack above stays in view while choosing. */
.ribbon-picker {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    list-style: none;
    margin: 0;
    max-height: 26rem;
    overflow-y: auto;
    padding: 0;
}

.ribbon-option + .ribbon-option {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ribbon-option-button {
    align-items: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 0.85rem;
    padding: 0.6rem 0.85rem;
    text-align: left;
    width: 100%;
}

.ribbon-option-button:hover,
.ribbon-option-button:focus-visible {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.ribbon-option-button img {
    flex: 0 0 auto;
    height: auto;
    width: 64px;
}

.ribbon-option-name {
    flex: 1 1 auto;
    font-size: 0.92rem;
    min-width: 0;
}

.ribbon-option.is-selected .ribbon-option-name {
    font-weight: 700;
}

/* Cutting scores table: MOS codes read as data, and the change column keeps its icon and text on
   one line. Long MOS titles wrap rather than forcing the table wider than its scroll container. */
.scores-head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
}

.scores-table {
    min-width: 34rem;
}

.scores-table td {
    vertical-align: top;
}

.scores-mos {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.scores-change {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    white-space: nowrap;
}

/* ---------- Ad slots ----------
   Space is reserved here, in CSS, so an injected ad lands in a pre-sized box and costs no layout
   shift. Heights are the standard unit sizes plus room for the label; if a slot is ever served a
   different size, change the height here to match or CLS comes straight back. The container is
   centered and overflow-hidden so an oversized creative cannot widen the page. */
.ad-slot {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: center;
    margin-inline: auto;
    max-width: 100%;
    overflow: hidden;
}

.ad-slot-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    opacity: 0.75;
    text-transform: uppercase;
}

.ad-slot-fill {
    max-width: 100%;
    width: 100%;
}

/* 300x250 rectangle inside prose. */
.ad-slot-inarticle .ad-slot-fill {
    height: 250px;
    width: 300px;
}

/* 320x100 on mobile, 728x90 from the small breakpoint up. */
.ad-slot-leaderboard .ad-slot-fill {
    height: 100px;
    width: 320px;
}

@media (min-width: 768px) {
    .ad-slot-leaderboard .ad-slot-fill {
        height: 90px;
        width: 728px;
    }
}

/* Small uppercase qualifier under a card title (e.g. a category's point maximum). */
.card-eyebrow {
    color: var(--mud-palette-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin: 0.35rem 0 0;
    text-transform: uppercase;
}

/* Checkbox group inside a calculator section (JEPES bonus billets). */
.calc-checks {
    display: grid;
    gap: 0.1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .calc-checks {
        grid-template-columns: 1fr 1fr;
    }
}

/* Standard-version marker centered above the calculator inputs. */
.calc-badge-row {
    display: flex;
    justify-content: center;
    margin-bottom: 1.1rem;
}

/* Numbered step badge, reusing the tinted .feature-icon square instead of a brand glyph. */
.step-number {
    font-size: 1.25rem;
    font-weight: 800;
}

/* Bulleted prose lists inside a tool article. */
.tool-list {
    color: var(--mud-palette-text-secondary);
    line-height: 1.7;
    margin: 0;
    padding-left: 1.25rem;
}

.tool-list li + li {
    margin-top: 0.5rem;
}

/* ---------- Utilities ---------- */
.d-none {
    display: none !important;
}

@media (min-width: 960px) {
    .d-md-flex {
        display: flex !important;
    }

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