/* ============================================================
   MEDICINE DETAIL PAGE STYLES  (loaded only on medicine-detail.php)
   ============================================================ */

/* ---------------- product hero ---------------- */

.md-hero {
    padding: 150px 0 90px;
    background: #fff;
}

.md-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* reversed layout: info on the left, image on the right
   (used when the default placeholder image is shown) */
.md-hero-grid.is-reversed .md-media-wrap {
    order: 2;
}

.md-hero-grid.is-reversed .md-info {
    order: 1;
}

/* --- left : product image --- */
.md-media {
    position: relative;
    border: 1px solid #e8edf4;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #F2F2F2; /* grey backdrop behind the product image */
}

/* image fit follows the global setting (data-fit on .md-media-wrap):
   contain (default) shows the whole pack shot centred on white; cover fills
   the frame edge-to-edge; none uses the natural size; fill stretches the
   default placeholder to fill the frame. */
.md-media img.md-product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    display: block;
}
.md-media-wrap[data-fit="fill"]  .md-product-img   { object-fit: fill;    padding: 0; }
.md-media-wrap[data-fit="cover"] .md-product-img   { object-fit: cover;   padding: 0; }
.md-media-wrap[data-fit="none"]  .md-product-img   { object-fit: none;    padding: 24px; }

.md-media-seal {
    position: absolute;
    top: 26px;
    right: 26px;
    width: 96px;
    height: 96px;
    z-index: 2;
    filter: drop-shadow(0 6px 14px rgba(1, 40, 84, .18));
}

/* --- right : product info --- */
.md-info {
    padding-top: 6px;
}

.md-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.md-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 40px;
    background: rgba(30, 100, 240, .10);
    color: #1E64F0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-family: var(--font-mono);
}

.md-title {
    font-size: 46px;
    font-weight: 500;
    line-height: 1.1;
    color: #27377F;
    margin-bottom: 18px;
}

.md-lead {
    color: #27377F;
    font-family: 'Geist', var(--font-sans);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 30px;
    max-width: 520px;
}

/* --- accordion / collapsibles --- */
.md-accordion {
    border-top: 1px solid #e6eaf1;
    margin-bottom: 34px;
}

.md-acc-item {
    border-bottom: 1px solid #e6eaf1;
}

.md-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 20px 4px;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #27377F;
    transition: color .25s;
}

.md-acc-head:hover {
    color: var(--orange);
}

.md-acc-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.md-acc-icon::before,
.md-acc-icon::after {
    content: "";
    position: absolute;
    background: #0E182E;
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}

.md-acc-icon::before {
    top: 8px;
    left: 0;
    width: 18px;
    height: 2px;
}

.md-acc-icon::after {
    top: 0;
    left: 8px;
    width: 2px;
    height: 18px;
}

.md-acc-item.is-open .md-acc-icon::after {
    transform: scaleY(0);
    opacity: 0;
}

.md-acc-item.is-open .md-acc-head {
    color: #27377F;
}

.md-acc-item.is-open .md-acc-icon::before,
.md-acc-item.is-open .md-acc-icon::after {
    background: #0E182E;
}

.md-acc-body {
    display: none;
    padding: 0 4px 22px;
    color: #565C67;
    font-size: 14px;
    line-height: 1.85;
    font-weight: 400;
}

.md-acc-item.is-open .md-acc-body {
    display: block;
}

/* --- enquire button --- */
.md-enquire {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    background: #f7941d;
    color: #fff;
    padding: 16px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    text-decoration: none;
    transition: .35s;
}

.md-enquire span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.md-enquire span img {
    width: 14px;
    height: 14px;
}

.md-enquire:hover {
    background: #e17d04;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(247, 148, 29, .32);
}

/* ---------------- medicine information ---------------- */

.md-information {
    padding: 20px 0 90px;
    background: #fff;
}

.md-info-title {
    font-size: 34px;
    font-weight: 500;
    color: var(--blue);
    margin-bottom: 36px;
    line-height: 1.15;
}

.md-info-block {
    margin-bottom: 40px;
}

.md-info-block:last-child {
    margin-bottom: 0;
}

.md-info-block h3 {
    font-size: 20px;
    font-weight: 600;
    color: #27377F;
    margin-bottom: 16px;
}

.md-info-block p {
    color: #565C67;
    font-family: 'Geist', var(--font-sans);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0;
    max-width: 900px;
}

.md-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 780px;
}

.md-benefits li {
    position: relative;
    padding-left: 24px;
    color: #565C67;
    font-family: 'Geist', var(--font-sans);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0;
}

.md-benefits li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #565C67;
}

.md-benefits li strong {
    color: rgba(1, 40, 84, 1);
    font-weight: 600;
}

/* rich-text key benefits (admin-entered HTML) */
.md-benefits--rich {
    color: #565C67;
    font-family: 'Geist', var(--font-sans);
    font-size: 18px;
    line-height: 26px;
    max-width: 820px;
}
/* Anything pasted into the admin editor from Word / Google Docs can arrive with
   its own font, size and highlight colour baked in. Force every descendant back
   to the block's own type so admin-entered content always matches the rest of
   the page (this also normalises content saved before the server-side cleanup). */
.md-benefits--rich * {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
    color: inherit !important;
    background-color: transparent !important;
}
.md-benefits--rich ul,
.md-benefits--rich ol { margin: 0 0 0 22px; padding: 0; }
.md-benefits--rich li { margin-bottom: 8px; }
.md-benefits--rich p { margin: 0 0 12px; }
.md-benefits--rich h3, .md-benefits--rich h4 {
    color: rgba(1, 40, 84, 1) !important;
    font-weight: 600;
    margin: 14px 0 8px;
}
.md-benefits--rich strong,
.md-benefits--rich b { color: rgba(1, 40, 84, 1) !important; font-weight: 600; }
.md-benefits--rich a { color: var(--orange, #F68C31) !important; text-decoration: underline; }

/* --- image gallery: main image + thumbnail strip --- */
.md-media-wrap { display: flex; flex-direction: column; gap: 14px; }
.md-thumbs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.md-thumb {
    width: 76px;
    height: 76px;
    padding: 0;
    border: 2px solid #e8edf4;
    border-radius: 12px;
    overflow: hidden;
    background: #F2F2F2;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}
.md-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }
.md-media-wrap[data-fit="cover"] .md-thumb img { object-fit: cover; padding: 0; }
.md-thumb:hover { transform: translateY(-2px); }
.md-thumb.is-active { border-color: var(--orange, #F68C31); }

/* ---------------- floating back button ----------------
   Pinned to the viewport so it stays reachable however far the page scrolls.
   Held against the far LEFT edge of the screen: that keeps it off the product
   image (which starts inside the centred container) and clear of the fixed
   navbar above, the ENQUIRE NOW column on the right and the centred CTA below.
   z-index sits under the navbar (1000) and the division modal (1200), so the
   mobile menu and any dialog cover it rather than fight with it. */
.md-back {
    position: fixed;
    bottom: 30px;
    left: 20px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(1, 40, 84, .14);
    background: #fff;
    color: rgba(1, 40, 84, 1);
    text-decoration: none;
    box-shadow: 0 8px 26px rgba(10, 25, 60, .16);
    transition: background .2s ease, border-color .2s ease, color .2s ease,
                box-shadow .2s ease, transform .2s ease;
}

.md-back .ic {
    flex: none;
    transition: transform .2s ease;
}

.md-back:hover {
    background: rgba(1, 40, 84, 1);
    border-color: rgba(1, 40, 84, 1);
    color: #fff;
    box-shadow: 0 12px 30px rgba(10, 25, 60, .26);
    transform: translateY(-1px);
}

.md-back:hover .ic { transform: translateX(-3px); }

.md-back:focus-visible {
    outline: 2px solid rgba(1, 40, 84, .55);
    outline-offset: 3px;
}

/* a printed page has no use for a navigation button */
@media print { .md-back { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .md-back, .md-back .ic { transition: none; }
    .md-back:hover { transform: none; }
    .md-back:hover .ic { transform: none; }
}

/* ---------------- responsive ---------------- */

@media (max-width: 991.98px) {
    .md-hero {
        padding: 120px 0 60px;
    }

    .md-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* stacked layout: normal shows the image first; reversed (placeholder)
       shows the info first, matching the desktop order */
    .md-hero-grid .md-media-wrap { order: -1; margin-top: 20px; }
    .md-hero-grid .md-info { order: 0; }
    .md-hero-grid.is-reversed .md-media-wrap { order: 0; }
    .md-hero-grid.is-reversed .md-info { order: -1; }

    .md-media {
        max-width: 520px;
    }

    .md-title {
        font-size: 36px;
    }

    .md-information {
        padding: 10px 0 60px;
    }

    .md-info-title {
        font-size: 28px;
    }
}

@media (max-width: 575.98px) {
    .md-hero {
        padding: 110px 0 50px;
    }

    /* smaller and tighter into the corner, so it covers as little as possible */
    .md-back {
        left: 12px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }

    .md-media-seal {
        width: 68px;
        height: 68px;
        top: 16px;
        right: 16px;
    }

    .md-title {
        font-size: 30px;
    }

    .md-lead {
        text-align: justify;
    }

    .md-info-block h3 {
        font-size: 18px;
    }
}


/* ============================================================
   RELATED PRODUCTS
   ============================================================ */

.md-related {
    padding: 90px 0;
    background: linear-gradient(136.76deg, #FEFCFD 0%, #F2F2F9 39.68%, #D9DEF1 64.45%, #FEFCFD 99.91%);
}

.md-related-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.md-related-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 40px;
    background: #fff;
    border: 1px solid #f0f0f0;
    color: #012854;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.md-related-badge .badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green-dot);
    flex-shrink: 0;
}

.md-related-title {
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--blue);
    margin: 0;
}

.md-related-viewall {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #f7941d;
    color: #fff;
    padding: 8px 8px 8px 22px;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: .35s;
    white-space: nowrap;
}

.md-related-viewall span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.md-related-viewall span img {
    width: 15px;
    height: 15px;
}

.md-related-viewall:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(39, 55, 127, .3);
}

.md-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.md-related-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.md-related-img {
    border-radius: 18px;
    overflow: hidden;
    background: #F2F2F2;
    aspect-ratio: 1 / 1.04;
    margin-bottom: 18px;
}

.md-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
/* per-card fit: placeholder fills the frame (fill); real images use contain/none
   so nothing is cropped, or cover to fill without distortion */
.md-related-img[data-fit="fill"] img    { object-fit: fill; }
.md-related-img[data-fit="contain"]     { background: #F2F2F2; }
.md-related-img[data-fit="contain"] img { object-fit: contain; padding: 16px; }
.md-related-img[data-fit="none"]        { background: #F2F2F2; }
.md-related-img[data-fit="none"] img    { object-fit: none; padding: 16px; }
.md-related-img[data-fit="cover"] img   { object-fit: cover; padding: 0; }

.md-related-card:hover .md-related-img img {
    transform: scale(1.05);
}

.md-related-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.md-related-meta h4 {
    font-family: 'Inter', var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    line-height: 22.5px;
    letter-spacing: 0;
    color: #012854;
    margin: 0 0 6px;
}

.md-related-meta span {
    font-size: 13.5px;
    font-weight: 500;
    color: #1E64F0;
}

.md-related-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e6eaf1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .3s;
}

.md-related-arrow img {
    width: 16px;
    height: 16px;
    filter: brightness(0);
    transition: filter .3s;
}

.md-related-arrow.is-active {
    background: #f7941d;
    border-color: #f7941d;
}

.md-related-arrow.is-active img {
    filter: brightness(0) invert(1);
}

.md-related-card:hover .md-related-arrow {
    background: #f7941d;
    border-color: #f7941d;
    transform: translateY(-2px);
}

.md-related-card:hover .md-related-arrow img {
    filter: brightness(0) invert(1);
}


/* ============================================================
   FAQ + CTA  (shared markup borrowed from the generic page,
   styles duplicated here so this page is self-contained)
   ============================================================ */

/* ---------------- faq ---------------- */

.faq-section {
    padding: 100px 0;
    background: #fff;
}

.faq-section .faq-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: 60px;
}

.faq-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1px solid #f0f0f0;
    border-radius: 40px;
    background: #fff;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    margin-bottom: 20px;
    font-weight: 550;
}

.faq-dot {
    width: 8px;
    height: 8px;
    background: #00b894;
    border-radius: 50%;
}

.faq-title {
    font-size: 49px;
    font-weight: 500;
    line-height: 1.05;
    color: var(--blue);
    margin-bottom: 20px;
}

.faq-title span {
    color: #00b894;
    font-style: italic;
    font-size: 49px;
    font-family: var(--font-serif);
}

.faq-description {
    color: #777;
    font-size: 15px;
    line-height: 1.8;
    max-width: 270px;
    font-weight: 400;
}

.faq-accordion .accordion-item {
    border-bottom: 1px solid #e6e6e6;
}

.faq-accordion .accordion-header {
    margin: 0;
}

.faq-accordion .accordion-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    border: none;
    cursor: pointer;
    background: #fff;
    box-shadow: none;
    padding: 25px 30px;
    font-size: 18px;
    font-weight: 500;
    color: #222;
}

.faq-accordion .accordion-button::after {
    content: "+";
    font-size: 28px;
    font-weight: 300;
    color: #555;
    line-height: 1;
    margin-left: 16px;
}

.faq-accordion .accordion-item.is-open {
    background-image: url('../images/faq-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.faq-accordion .accordion-item.is-open .accordion-button {
    color: #1f2937;
    background: transparent;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    content: "\2212";
}

.faq-accordion .accordion-collapse {
    display: none;
}

.faq-accordion .accordion-collapse.show {
    display: block;
}

.faq-accordion .accordion-body {
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.7;
    padding: 0 30px 26px;
}

/* ---------------- cta / partner ---------------- */

.partner-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: #012B59;
    isolation: isolate;
}

.partner-section .cta-corner {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 40%;
    max-width: 500px;
    height: auto;
}

.partner-section .cta-corner-tr {
    top: 0;
    right: 0;
}

.partner-section .cta-corner-bl {
    bottom: 0;
    left: 0;
}

.partner-section::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    left: -320px;
    bottom: -320px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(120, 180, 240, .45) 0%,
            rgba(70, 130, 200, .28) 25%,
            rgba(20, 70, 130, .12) 55%,
            rgba(1, 43, 89, 0) 75%);
    filter: blur(40px);
    z-index: -1;
}

.partner-section::after {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    right: -250px;
    top: -250px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(150, 200, 245, .35) 0%,
            rgba(80, 140, 205, .20) 35%,
            rgba(1, 43, 89, 0) 75%);
    filter: blur(35px);
    z-index: -1;
}

.partner-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: auto;
    text-align: center;
}

.partner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 1.2px;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.partner-badge .badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d26a;
}

.partner-content h2 {
    font-size: 56px;
    color: rgba(252, 250, 250, 1);
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 1.1;
}

.partner-content p {
    color: rgba(252, 250, 250, 1);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
    max-width: 476px;
    margin: 0 auto 40px;
}

.partner-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.btn-enquire {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    background: #f7941d;
    color: #fff;
    padding: 10px 28px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    transition: .35s;
    text-transform: uppercase;
}

.btn-enquire span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-enquire span img {
    width: 16px;
    height: 16px;
}

.btn-enquire:hover {
    color: #fff;
    transform: translateY(-5px);
    background: #eb8308;
}

.btn-distributor2 {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    background: #fff;
    color: rgba(1, 40, 84, 1);
    padding: 10px 20px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    transition: .35s;
    text-transform: uppercase;
}

.btn-distributor2:hover {
    color: #0a376b;
    transform: translateY(-5px);
}

.handshake {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #edf4ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.handshake img {
    width: 16px;
    height: 16px;
}

/* ---------------- faq + cta responsive ---------------- */

@media (max-width: 991.98px) {
    .faq-section {
        padding: 60px 0;
    }

    .faq-section .faq-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .faq-title {
        font-size: 36px;
    }

    .faq-title span {
        font-size: 36px;
    }

    .faq-description {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .faq-accordion .accordion-button {
        padding: 18px 20px;
        font-size: 16px;
    }

    .faq-accordion .accordion-body {
        padding: 0 20px 20px;
    }

    .partner-section {
        padding: 80px 0;
    }

    .partner-content h2 {
        font-size: 40px;
    }
}

@media (max-width: 575.98px) {
    .faq-title {
        font-size: 26px;
    }

    .faq-title span {
        font-size: 26px;
    }

    .partner-content h2 {
        font-size: 30px;
    }

    .partner-buttons {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 12px;
    }

    .btn-enquire,
    .btn-distributor2 {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding-left: 14px;
        padding-right: 14px;
        gap: 8px;
        text-align: center;
    }
}


/* ---------------- related products responsive ----------------
   (placed after the .md-related base styles so the grid columns
   actually override at each breakpoint) */

@media (max-width: 991.98px) {
    .md-related {
        padding: 60px 0;
    }

    .md-related-head {
        margin-bottom: 32px;
    }

    .md-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 575.98px) {
    .md-related-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .md-related-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}