/*
 * ============================================================
 *  BMI Responsive System v1.0
 *  Bio Med Ingredients — Universal Responsive CSS
 *  Created: 2026-11
 *  Covers: All 45+ PHP pages | Bootstrap 5.3.3 compatible
 *  Load order: After style.css, before chatbot.css
 *  DO NOT modify style.css — this file is additive only.
 * ============================================================
 *
 *  Breakpoints:
 *  ≥1200px   — Large desktop
 *  992–1199  — Desktop / laptop
 *  768–991   — Tablet
 *  481–767   — Mobile
 *  ≤480      — Small mobile
 * ============================================================
 */


/* ============================================================
   SECTION A — CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    --bmi-section-pad-xl: 88px;
    --bmi-section-pad-lg: 68px;
    --bmi-section-pad-md: 56px;
    --bmi-section-pad-sm: 44px;
    --bmi-section-pad-xs: 32px;
    --bmi-green: #198754;
    --bmi-green-dark: #0b5e37;
    --bmi-radius-card: 16px;
    --bmi-radius-sm: 10px;
}


/* ============================================================
   SECTION B — GLOBAL ANTI-OVERFLOW & BASE RESET
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

img,
video,
iframe,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

/* Three.js canvas exception — must maintain WebGL buffer dimensions */
#threejs-canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

table {
    max-width: 100%;
}

/* Prevent sections with background decorations from causing horizontal scroll */
section,
main {
    overflow-x: clip;
}

/* Prevent decorative blur circles from exceeding viewport bounds */
.blur-3xl,
[class*="blur-3xl"],
div[style*="filter: blur(60px)"],
div[style*="filter: blur(80px)"] {
    max-width: 100vw !important;
    pointer-events: none !important;
}

/* Offcanvas closed state: prevent offscreen translation from expanding page scrollWidth */
.offcanvas:not(.show):not(.showing) {
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
}

/* Floating badges on homepage eco section */
@media (max-width: 1200px) {
    .glass-badge[style*="right: -20px"],
    .glass-badge[style*="right:-20px"],
    .glass-badge {
        right: 12px !important;
    }

    .eco-float-img[style*="left: -60px"],
    .eco-float-img[style*="left:-60px"] {
        left: -10px !important;
    }
}

/* Prevent large inline-style fixed min-widths from causing overflow */
@media (max-width: 991.98px) {
    [style*="min-width: 1000px"],
    [style*="min-width: 1200px"],
    [style*="min-width: 1400px"],
    [style*="min-width: 1600px"],
    [style*="min-width:1000px"],
    [style*="min-width:1200px"],
    [style*="min-width:1400px"],
    [style*="min-width:1600px"],
    [style*="min-width: 800px"],
    [style*="min-width: 900px"],
    [style*="min-width:800px"],
    [style*="min-width:900px"] {
        min-width: unset !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    [style*="min-height: 500px"],
    [style*="min-height:500px"] {
        min-height: 300px !important;
    }

    [style*="min-height: 550px"],
    [style*="min-height:550px"] {
        min-height: 320px !important;
    }

    [style*="height: 500px"],
    [style*="height:500px"] {
        height: auto !important;
        min-height: 260px !important;
    }
}

@media (max-width: 480px) {
    [style*="min-height: 380px"],
    [style*="min-height:380px"] {
        min-height: 220px !important;
    }
}


/* ============================================================
   SECTION C — TYPOGRAPHY SCALE (Fluid + Clamp)
   ============================================================ */

/* -- Tablet (768–991) -- */
@media (max-width: 991.98px) {
    h1, .h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
    h2, .h2 { font-size: clamp(1.6rem, 3.8vw, 2.4rem); }
    h3, .h3 { font-size: clamp(1.3rem, 3vw, 2rem); }
    h4, .h4 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); }
    h5, .h5 { font-size: clamp(1rem, 2vw, 1.25rem); }
    h6, .h6 { font-size: clamp(0.9rem, 1.8vw, 1.1rem); }

    .display-1 { font-size: clamp(2.8rem, 7vw, 5rem) !important; }
    .display-2 { font-size: clamp(2.4rem, 6vw, 4.5rem) !important; }
    .display-3 { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
    .display-4 { font-size: clamp(1.8rem, 4.5vw, 3rem) !important; }
    .display-5 { font-size: clamp(1.6rem, 4vw, 2.5rem) !important; }
    .display-6 { font-size: clamp(1.4rem, 3.5vw, 2rem) !important; }

    .lead { font-size: clamp(0.95rem, 2vw, 1.15rem); }
}

/* -- Mobile (≤767) -- */
@media (max-width: 767.98px) {
    h1, .h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
    h2, .h2 { font-size: clamp(1.4rem, 5.5vw, 2rem); }
    h3, .h3 { font-size: clamp(1.2rem, 4.5vw, 1.7rem); }
    h4, .h4 { font-size: clamp(1rem, 4vw, 1.4rem); }
    h5, .h5 { font-size: clamp(0.95rem, 3.5vw, 1.15rem); }
    h6, .h6 { font-size: clamp(0.88rem, 3vw, 1rem); }

    .display-1 { font-size: clamp(2rem, 9vw, 3.5rem) !important; }
    .display-2 { font-size: clamp(1.8rem, 8vw, 3rem) !important; }
    .display-3 { font-size: clamp(1.6rem, 7vw, 2.5rem) !important; }
    .display-4 { font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important; }
    .display-5 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
    .display-6 { font-size: clamp(1.2rem, 5.5vw, 1.7rem) !important; }

    .lead { font-size: clamp(0.9rem, 3.5vw, 1.05rem); }

    p { font-size: clamp(0.875rem, 3vw, 1rem); line-height: 1.65; }
    small, .small { font-size: 0.8rem; }

    /* Clean left-alignment and disable automatic hyphenation splitting on mobile */
    p,
    .text-muted,
    .lead,
    .desc,
    .text-reveal-para,
    .card-body p,
    .about-text-content p,
    .why-love-us-section p,
    .news-insights-section p,
    .cross-accent-box p {
        text-align: left !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
        hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
}

/* -- Small Mobile (≤480) -- */
@media (max-width: 480px) {
    h1, .h1 { font-size: clamp(1.4rem, 7vw, 2rem); }
    h2, .h2 { font-size: clamp(1.2rem, 6.5vw, 1.7rem); }
    .display-3 { font-size: clamp(1.4rem, 8vw, 2rem) !important; }
    .display-5 { font-size: clamp(1.2rem, 7vw, 1.6rem) !important; }
    .display-6 { font-size: clamp(1.1rem, 6.5vw, 1.4rem) !important; }
}


/* ============================================================
   SECTION D — CONTAINER & LAYOUT
   ============================================================ */

/* Tablet */
@media (max-width: 991.98px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .row.g-5 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }
    .row.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
}

/* Mobile */
@media (max-width: 767.98px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .row.g-5 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
    .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
    .row.g-3 { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ============================================================
   SECTION E — NAVIGATION
   ============================================================ */

/* Desktop / Laptop Navbar (992px–1199px) — keep items on a single line */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-nav {
        gap: 2px !important;
    }
    .navbar-nav .nav-link {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 0.82rem !important;
    }
    .navbar-brand {
        margin-right: 8px !important;
    }
    .navbar-brand span {
        font-size: 0.95rem !important;
    }
    .navbar-brand img {
        height: 36px !important;
    }
}

/* Navbar pill container */
@media (max-width: 991.98px) {
    #navbarMain .navbar-collapse {
        background: rgba(27, 65, 42, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: 0 0 20px 20px;
        padding: 12px 20px 20px;
        margin-top: 8px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .navbar-toggler {
        border: none;
        outline: none;
        box-shadow: none;
        padding: 6px 10px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .nav-link {
        color: rgba(255, 255, 255, 0.85) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        font-size: 0.95rem;
    }

    .nav-link:last-child {
        border-bottom: none;
    }

    .dropdown-menu {
        background: rgba(255, 255, 255, 0.07) !important;
        border-radius: 10px !important;
        margin-top: 4px !important;
    }

    .dropdown-item {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 0.88rem;
        padding: 8px 14px !important;
        border-radius: 6px !important;
    }

    .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
    }
}

/* Fixed bottom nav — ensure it stays above chatbot FAB */
@media (max-width: 991.98px) {
    #mobileBottomNav,
    .mobile-bottom-nav {
        z-index: 1040 !important;
    }
}

/* Scroll-to-top button: adjust position on mobile to avoid bottom nav */
@media (max-width: 767.98px) {
    .scroll-to-top {
        bottom: 76px !important;
        right: 16px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
    }
}


/* ============================================================
   SECTION F — HERO / PAGE BANNER SECTIONS
   ============================================================ */

/* Inner page banners (contact, about, herbal, etc.) */
@media (max-width: 991.98px) {
    .parallax-hero-section,
    .hero-wrapper.py-4,
    section[style*="min-height: 380px"] {
        min-height: 280px !important;
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }

    .parallax-curtain-section {
        margin-top: -40px !important;
        border-top-left-radius: 36px !important;
        border-top-right-radius: 36px !important;
    }

    .hero-wrapper + section,
    .hero-wrapper + main,
    .hero-wrapper + div {
        margin-top: -40px !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
    }
}

@media (max-width: 767.98px) {
    .parallax-hero-section,
    .hero-wrapper.py-4,
    section[style*="min-height: 380px"] {
        min-height: 220px !important;
        padding-top: 70px !important;
        padding-bottom: 32px !important;
    }

    .parallax-curtain-section {
        margin-top: -28px !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
    }

    .hero-wrapper + section,
    .hero-wrapper + main {
        margin-top: -28px !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    /* Breadcrumb on mobile */
    .breadcrumb {
        font-size: 0.8rem;
        flex-wrap: wrap;
    }

    .breadcrumb-item + .breadcrumb-item {
        padding-left: 0.3rem;
    }

    /* Normalize inner overlay min-height in hero banners */
    .parallax-hero-section > div[style*="min-height"] {
        min-height: unset !important;
    }
}

@media (max-width: 480px) {
    .parallax-hero-section,
    section[style*="min-height: 380px"] {
        min-height: 180px !important;
        padding-top: 65px !important;
    }
}


/* ============================================================
   SECTION G — PRODUCT CARDS & GRIDS
   ============================================================ */

/* Tablet: 2-col grids */
@media (max-width: 991.98px) {
    .col-lg-3.col-md-4,
    .col-lg-3 {
        /* Allow Bootstrap to handle natural stacking */
    }

    /* Product card images — targeted to product cards, preserving icon/badge cards */
    .product-card-media,
    .product-card-item img,
    .product-item-img,
    .product-card .card-img-top {
        height: 200px;
        object-fit: cover;
    }
}

/* Mobile: 2-column on landscape / phablets (481–767px) */
@media (min-width: 481px) and (max-width: 767.98px) {
    .product-card-item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Mobile: single column products */
@media (max-width: 767.98px) {
    /* Product images height on mobile */
    .product-card-media,
    .card-img-top {
        height: 180px !important;
        object-fit: cover !important;
    }

    /* Herbal extract / product page images */
    img[style*="height: 220px"],
    img[style*="height:220px"] {
        height: 180px !important;
    }

    /* Card paddings */
    .card {
        border-radius: var(--bmi-radius-card) !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    /* Filter sidebar → stacked above products */
    .product-filter-sidebar,
    .filter-sidebar,
    aside.col-lg-3,
    aside.col-md-3 {
        margin-bottom: 1.5rem;
    }

    /* Product document cards grid */
    .product-doc-card {
        margin-bottom: 1rem;
    }
}

/* Small mobile: even tighter */
@media (max-width: 480px) {
    .product-card-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .product-card-media,
    .card-img-top {
        height: 160px !important;
    }

    .card-body {
        padding: 0.875rem !important;
    }
}


/* ============================================================
   SECTION H — TABLES (Scrollable on Mobile)
   ============================================================ */

/* Wrap all plain tables to allow horizontal scroll */
@media (max-width: 991.98px) {
    table:not(.table-responsive table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        width: 100%;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Product documents table */
    .product-docs-table th,
    .product-docs-table td {
        min-width: 120px;
        font-size: 0.85rem;
        padding: 0.6rem 0.75rem;
    }
}

@media (max-width: 767.98px) {
    table th,
    table td {
        font-size: 0.82rem;
        padding: 0.5rem 0.6rem;
    }
}


/* ============================================================
   SECTION I — FORMS
   ============================================================ */

@media (max-width: 767.98px) {
    /* Full-width inputs on mobile */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="password"],
    select,
    textarea {
        width: 100% !important;
        font-size: 0.95rem;
        padding: 0.6rem 0.9rem;
    }

    .form-control,
    .form-select {
        font-size: 0.95rem;
    }

    /* Stacked button groups */
    .btn-group,
    .input-group > * {
        flex-wrap: wrap;
    }

    /* Form labels */
    label,
    .form-label {
        font-size: 0.88rem;
        margin-bottom: 4px;
    }

    /* Contact form row: stack fields */
    .contact-form .row.g-3 > [class*="col-"]:not(.col-12) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Enquire / expo booking forms */
    .enquire-form .row.g-3 > [class*="col-sm-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Submit buttons full width */
    .form-submit-btn,
    .btn[type="submit"] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .form-control,
    .form-select {
        font-size: 0.9rem;
        padding: 0.55rem 0.8rem;
    }
}


/* ============================================================
   SECTION J — PAGE-SPECIFIC: ABOUT COMPANY
   ============================================================ */

/* About collage min-height */
@media (max-width: 767.98px) {
    .collage-container,
    [class*="collage"] {
        height: auto !important;
        min-height: 280px !important;
    }

    /* Company stats / counter cards */
    .counter-card,
    .stat-card {
        padding: 1.25rem !important;
        text-align: center;
    }

    /* Vision / mission cards */
    .vision-card,
    .mission-card {
        margin-bottom: 1rem;
    }
}

/* Timeline — already in about_company.php inline style;
   supplementary fixes for extra small screens */
@media (max-width: 480px) {
    .timeline-container {
        padding-left: 0 !important;
    }

    .timeline-item {
        padding-left: 40px !important;
    }

    .timeline-item .timeline-dot-box {
        width: 32px !important;
    }

    .timeline-card {
        padding: 0.875rem 1rem !important;
    }

    .timeline-card h5 {
        font-size: 0.95rem !important;
    }
}


/* ============================================================
   SECTION K — PAGE-SPECIFIC: RESEARCH
   ============================================================ */

@media (max-width: 767.98px) {
    .research-area-card,
    .research-card {
        margin-bottom: 1.25rem;
    }

    /* Research area detail hero */
    .research-hero,
    section.research-hero-section {
        min-height: 200px !important;
    }
}


/* ============================================================
   SECTION L — PAGE-SPECIFIC: CERTIFICATES / ACCREDITATIONS
   ============================================================ */

@media (max-width: 767.98px) {
    .cert-card,
    .accred-card-item,
    .certificate-item {
        padding: 0.75rem !important;
    }

    /* Certificate grid: 2 cols on mobile */
    .cert-grid .col-lg-3,
    .cert-grid .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 480px) {
    /* Single column certs on small mobile */
    .cert-grid .col-lg-3,
    .cert-grid .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ============================================================
   SECTION M — PAGE-SPECIFIC: CONTACT
   ============================================================ */

@media (max-width: 991.98px) {
    /* Contact info cards stack */
    .contact-info-card {
        margin-bottom: 1.5rem;
    }

    /* Google Maps embed */
    .map-embed,
    iframe[src*="google.com/maps"],
    iframe[src*="maps.google"] {
        height: 300px !important;
        width: 100% !important;
        border-radius: var(--bmi-radius-sm) !important;
    }
}

@media (max-width: 767.98px) {
    .contact-section .row.g-5 {
        --bs-gutter-y: 1.5rem;
    }

    .contact-section .col-lg-8,
    .contact-section .col-lg-4 {
        /* Bootstrap handles stacking; just ensure padding */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .map-embed,
    iframe[src*="google.com/maps"] {
        height: 240px !important;
    }
}


/* ============================================================
   SECTION N — PAGE-SPECIFIC: GALLERY
   ============================================================ */

@media (max-width: 767.98px) {
    /* Gallery grid images */
    .gallery-item img,
    .gallery-grid img {
        height: 180px !important;
        object-fit: cover !important;
    }

    /* Gallery masonry columns */
    .gallery-col {
        column-count: 2 !important;
        column-gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .gallery-item img,
    .gallery-grid img {
        height: 140px !important;
    }

    .gallery-col {
        column-count: 1 !important;
    }
}


/* ============================================================
   SECTION O — PAGE-SPECIFIC: TEAM
   ============================================================ */

@media (max-width: 767.98px) {
    /* Team magazine layout */
    .magazine-team-row {
        flex-direction: column !important;
    }

    .team-member-img {
        width: 100% !important;
        height: 240px !important;
        object-fit: cover !important;
        border-radius: var(--bmi-radius-card) !important;
    }

    .team-card {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .team-member-img {
        height: 200px !important;
    }
}


/* ============================================================
   SECTION P — PAGE-SPECIFIC: CSR
   ============================================================ */

@media (max-width: 767.98px) {
    .csr-carousel-img {
        min-height: 200px !important;
        max-height: 220px !important;
    }
}

@media (max-width: 480px) {
    .csr-carousel-img {
        min-height: 180px !important;
        max-height: 200px !important;
    }
}


/* ============================================================
   SECTION Q — PAGE-SPECIFIC: NEWS & EVENTS
   ============================================================ */

@media (max-width: 767.98px) {
    .news-insta-img {
        height: 200px !important;
    }

    /* News card grid */
    .news-card {
        margin-bottom: 1.25rem;
    }

    /* Event cards */
    .event-card-img {
        height: 180px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 480px) {
    .news-insta-img {
        height: 160px !important;
    }
}


/* ============================================================
   SECTION R — PAGE-SPECIFIC: FACILITY & INFRASTRUCTURE
   ============================================================ */

@media (max-width: 767.98px) {
    .facility-img,
    .infrastructure-img {
        min-height: 200px !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .facility-section .col-lg-6,
    .infrastructure-section .col-lg-6 {
        margin-bottom: 1.5rem;
    }
}


/* ============================================================
   SECTION S — PAGE-SPECIFIC: FARMING / CSR / QUALITY
   ============================================================ */

@media (max-width: 767.98px) {
    /* Full-width images in farming sections */
    .farming-img,
    .quality-img {
        width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
        border-radius: var(--bmi-radius-card) !important;
    }

    /* Step / process cards */
    .process-card,
    .step-card {
        margin-bottom: 1rem;
        padding: 1rem !important;
    }
}


/* ============================================================
   SECTION T — PAGE-SPECIFIC: TRADE MARK / BRANDS
   ============================================================ */

@media (max-width: 767.98px) {
    /* Brand card images */
    .brand-card img,
    .trademark-card img {
        height: 140px !important;
        object-fit: contain !important;
    }

    .brand-card {
        margin-bottom: 1rem;
    }
}


/* ============================================================
   SECTION U — PAGE-SPECIFIC: CAREER
   ============================================================ */

@media (max-width: 767.98px) {
    .career-card,
    .job-card {
        margin-bottom: 1.25rem;
        padding: 1rem !important;
    }

    .career-detail-content {
        padding: 1.25rem !important;
    }
}


/* ============================================================
   SECTION V — PAGE-SPECIFIC: PRODUCT DOCUMENTS
   ============================================================ */

@media (max-width: 991.98px) {
    /* Expanded folder view: full screen on tablet */
    .expanded-folder-view {
        max-width: 95vw !important;
        max-height: 95vh !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.92) translateY(24px) !important;
    }

    .expanded-folder-view.show {
        transform: translateX(-50%) scale(1) translateY(0) !important;
    }
}

@media (max-width: 767.98px) {
    /* Product doc cards: 2-col grid on mobile */
    .product-doc-card {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Folder card heights */
    .folder-container {
        max-width: 160px !important;
    }

    /* Filter bar above docs: horizontal scroll if needed */
    .doc-filter-bar {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .doc-filter-bar .btn {
        display: inline-block;
        margin-right: 6px;
        font-size: 0.8rem;
        padding: 4px 12px;
    }
}

@media (max-width: 480px) {
    .product-doc-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ============================================================
   SECTION W — PAGE-SPECIFIC: INGREDIENT FINDER
   ============================================================ */

@media (max-width: 991.98px) {
    .ingredient-finder-modal,
    #ingredientFinderModal .modal-dialog {
        max-width: 95vw !important;
    }
}

@media (max-width: 767.98px) {
    /* Ingredient filter chips — horizontal scroll */
    .ingredient-filter-row,
    .filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .ingredient-filter-row .btn,
    .filter-chips .btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.8rem;
    }

    /* Ingredient grid: 1-col on mobile */
    .ingredient-grid .col-lg-3,
    .ingredient-grid .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #ingredientFinderModal .modal-body {
        padding: 1rem !important;
    }
}


/* ============================================================
   SECTION X — FOOTER
   ============================================================ */

@media (max-width: 991.98px) {
    footer .col-lg-3,
    footer .col-lg-2 {
        margin-bottom: 1.5rem;
    }

    footer h3,
    footer h5 {
        font-size: 1rem;
    }

    footer p,
    footer li,
    footer a {
        font-size: 0.88rem;
    }

    /* Newsletter form in footer */
    footer .input-group {
        flex-direction: column;
        gap: 8px;
    }

    footer .input-group .form-control {
        border-radius: 50px !important;
        width: 100% !important;
    }

    footer .input-group .btn {
        border-radius: 50px !important;
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    /* Mobile footer padding */
    footer {
        padding-bottom: 80px !important; /* clear mobile bottom nav */
    }

    footer .row.g-4 {
        --bs-gutter-y: 1rem;
    }

    footer .col-lg-3,
    footer .col-md-6 {
        text-align: center !important;
    }

    /* Social icons center */
    footer .social-icons,
    footer .d-flex.gap-3 {
        justify-content: center !important;
    }

    /* Footer links: center aligned */
    footer ul {
        align-items: center !important;
    }

    /* Copyright bar */
    .footer-bottom {
        font-size: 0.78rem;
        text-align: center !important;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    footer {
        padding-bottom: 90px !important;
    }
}


/* ============================================================
   SECTION Y — BUTTONS & BADGES
   ============================================================ */

@media (max-width: 767.98px) {
    /* Prevent buttons from being too cramped */
    .btn-lg {
        font-size: 0.95rem !important;
        padding: 0.6rem 1.4rem !important;
    }

    .btn-sm {
        font-size: 0.78rem !important;
        padding: 0.35rem 0.9rem !important;
    }

    /* Badge pills font size */
    .badge {
        font-size: 0.72rem !important;
    }

    /* Download / action button groups: stack on mobile */
    .btn-group-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .btn-group-actions .btn {
        width: 100%;
    }
}


/* ============================================================
   SECTION Z — SWIPER / CAROUSELS (Global)
   ============================================================ */

@media (max-width: 767.98px) {
    /* Swiper navigation arrows: hide on small phones */
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    /* Swiper pagination dots: always visible */
    .swiper-pagination {
        bottom: 6px !important;
    }

    .swiper-pagination-bullet {
        width: 6px !important;
        height: 6px !important;
    }

    .swiper-pagination-bullet-active {
        width: 20px !important;
        border-radius: 3px !important;
    }

    /* General Bootstrap carousel */
    .carousel-control-prev,
    .carousel-control-next {
        width: 40px !important;
    }

    .carousel-caption {
        padding: 1rem !important;
        font-size: 0.85rem;
    }
}


/* ============================================================
   SECTION AA — AOS ANIMATIONS (Reduce on Mobile)
   ============================================================ */

@media (max-width: 767.98px) {
    /* Reduce AOS distances to prevent layout jumps */
    [data-aos] {
        transition-duration: 400ms !important;
    }

    [data-aos="fade-left"],
    [data-aos="fade-right"] {
        /* Convert horizontal slides to fade on mobile */
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        transition-duration: 0ms !important;
        transform: none !important;
        opacity: 1 !important;
    }
}


/* ============================================================
   SECTION BB — MODALS (Bootstrap)
   ============================================================ */

@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 1rem) !important;
    }

    .modal-content {
        border-radius: 20px !important;
    }

    .modal-header {
        padding: 1rem 1.25rem !important;
    }

    .modal-body {
        padding: 1rem 1.25rem !important;
    }

    .modal-footer {
        padding: 0.75rem 1.25rem !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .modal-dialog {
        margin: 0.25rem !important;
        max-width: calc(100vw - 0.5rem) !important;
    }

    .modal-content {
        border-radius: 16px !important;
    }
}


/* ============================================================
   SECTION CC — CHATBOT
   ============================================================ */

@media (max-width: 767.98px) {
    /* Chatbot FAB — position above mobile bottom nav */
    #chatbot-fab,
    .chatbot-fab,
    #chatbotTrigger {
        bottom: 72px !important;
        right: 16px !important;
        z-index: 1050 !important;
    }

    /* Chatbot window */
    #chatbot-window,
    .chatbot-window {
        bottom: 130px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 65vh !important;
    }
}

@media (max-width: 480px) {
    #chatbot-window,
    .chatbot-window {
        bottom: 120px !important;
        max-height: 60vh !important;
    }
}


/* ============================================================
   SECTION DD — MARQUEE / ACCREDITATION STRIP
   ============================================================ */

/* Universal Accreditation Hover Effect: restores real original colors smoothly */
.accred-card img {
    filter: grayscale(100%) contrast(1.05);
    opacity: 0.88;
    transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: filter, opacity, transform;
}

.accred-card:hover img,
.accred-card:focus img,
.accred-card:active img,
.accred-card img:hover {
    filter: grayscale(0%) contrast(1) !important;
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

@media (max-width: 991.98px) {
    .accred-section {
        padding-top: 20px !important;
        padding-bottom: 24px !important;
        margin-top: 8px !important;
    }

    .accred-heading {
        margin-bottom: 12px !important;
        padding: 0 16px !important;
    }

    .accred-strip {
        padding: 6px 0 10px !important;
    }

    .accred-card {
        width: 68px !important;
        height: 68px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .accred-card img {
        width: 62px !important;
        height: 62px !important;
        max-height: 62px !important;
        max-width: 62px !important;
        filter: grayscale(100%) contrast(1.05) !important;
        opacity: 0.88 !important;
    }

    .accred-card:hover img,
    .accred-card:focus img,
    .accred-card:active img {
        filter: grayscale(0%) contrast(1) !important;
        opacity: 1 !important;
        transform: scale(1.1) !important;
    }

    .accred-track {
        gap: 16px !important;
    }
}

@media (max-width: 767.98px) {
    .accred-section {
        padding-top: 14px !important;
        padding-bottom: 18px !important;
        margin-top: 0 !important;
        background: #f8faf9;
    }

    /* Accreditation heading: tight, balanced spacing */
    .accred-heading {
        margin: 0 auto 6px !important;
        padding: 0 16px !important;
        max-width: 520px !important;
    }

    .accred-kicker {
        margin-bottom: 4px !important;
        padding: 2px 10px !important;
        font-size: 0.68rem !important;
    }

    .accred-heading h2 {
        font-size: clamp(1.25rem, 4.8vw, 1.65rem) !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }

    .accred-heading p {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
        color: #4a5f53 !important;
        margin-bottom: 0 !important;
    }

    /* Accreditation marquee strip: zero wasted vertical gap */
    .accred-strip {
        padding: 4px 0 8px !important;
    }

    .accred-row {
        margin-bottom: 0 !important;
        -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent) !important;
        mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent) !important;
    }

    .accred-track {
        gap: 12px !important;
    }

    /* Accreditation logo cards: square-fit, tight spacing, seamless floating */
    .accred-card {
        width: 54px !important;
        height: 54px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .accred-card img {
        width: 50px !important;
        height: 50px !important;
        max-height: 50px !important;
        max-width: 50px !important;
        object-fit: contain !important;
        filter: grayscale(100%) contrast(1.05) !important;
        opacity: 0.88 !important;
    }

    .accred-card:hover img,
    .accred-card:focus img,
    .accred-card:active img {
        filter: grayscale(0%) contrast(1) !important;
        opacity: 1 !important;
        transform: scale(1.1) !important;
    }
}

@media (max-width: 480px) {
    .accred-section {
        padding-top: 10px !important;
        padding-bottom: 14px !important;
    }

    .accred-heading {
        margin-bottom: 4px !important;
    }

    .accred-heading h2 {
        font-size: clamp(1.15rem, 4.5vw, 1.4rem) !important;
        margin-bottom: 3px !important;
    }

    .accred-heading p {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
    }

    .accred-strip {
        padding: 2px 0 6px !important;
    }

    .accred-card {
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .accred-card img {
        width: 46px !important;
        height: 46px !important;
        max-height: 46px !important;
        max-width: 46px !important;
        filter: grayscale(100%) contrast(1.05) !important;
        opacity: 0.88 !important;
    }

    .accred-card:hover img,
    .accred-card:focus img,
    .accred-card:active img {
        filter: grayscale(0%) contrast(1) !important;
        opacity: 1 !important;
        transform: scale(1.1) !important;
    }

    .accred-track {
        gap: 10px !important;
    }
}


/* ============================================================
   SECTION EE — HOMEPAGE SPECIFIC
   ============================================================ */

/* Stats / counter row */
@media (max-width: 767.98px) {
    .counter-section .col-6,
    .counter-section .col-md-3 {
        margin-bottom: 1rem;
    }

    .counter-number,
    .stat-number {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    }

    .counter-label,
    .stat-label {
        font-size: 0.8rem !important;
    }
}

/* Solutions / product category grid */
@media (max-width: 767.98px) {
    .solutions-grid .col-lg-3,
    .solutions-grid .col-md-6 {
        margin-bottom: 1.25rem;
    }

    .solution-card-img {
        height: 180px !important;
        object-fit: cover !important;
    }
}

/* Eco / farming section */
@media (max-width: 767.98px) {
    .eco-section img,
    .farming-section img {
        height: auto !important;
        min-height: 200px !important;
        border-radius: var(--bmi-radius-card) !important;
    }
}

/* FAQ accordion */
@media (max-width: 767.98px) {
    .accordion-button {
        font-size: 0.9rem !important;
        padding: 0.875rem 1rem !important;
    }

    .accordion-body {
        font-size: 0.875rem !important;
        padding: 0.875rem 1rem !important;
    }
}

/* Wheel section — already handled in style.css;
   extra safety for very small screens */
@media (max-width: 480px) {
    #wheel-section {
        overflow: visible !important;
    }
}


/* ============================================================
   SECTION FF — UTILITY CLASSES
   ============================================================ */

/* Force mobile-stack on demand */
@media (max-width: 767.98px) {
    .bmi-mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .bmi-mobile-center {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .bmi-mobile-hide {
        display: none !important;
    }

    .bmi-mobile-show {
        display: block !important;
    }

    /* Remove decorative background patterns on mobile for performance */
    .bmi-bg-pattern {
        background-image: none !important;
    }

    /* Spacing helpers */
    .bmi-mt-mobile-0 { margin-top: 0 !important; }
    .bmi-mb-mobile-0 { margin-bottom: 0 !important; }
    .bmi-p-mobile-0  { padding: 0 !important; }
}


/* ============================================================
   SECTION GG — PRINT MEDIA
   ============================================================ */

@media print {
    /* Hide navigation, footer, chatbot, AOS */
    nav,
    footer,
    #chatbot-fab,
    .chatbot-fab,
    #chatbot-window,
    .chatbot-window,
    .scroll-to-top,
    #mobileBottomNav,
    .mobile-bottom-nav,
    .cookie-banner,
    [data-aos] {
        display: none !important;
    }

    /* Remove shadows for clean print */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        font-size: 11pt;
        color: #000;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #555;
    }
}


/* ============================================================
   SECTION HH — BRAND DETAIL PAGE
   ============================================================ */

@media (max-width: 767.98px) {
    /* Product image container */
    .product-image-container {
        min-height: 240px !important;
        padding: 20px !important;
    }

    .product-image-container img {
        max-height: 220px !important;
    }

    /* Thumbnails: horizontal scroll */
    .thumbnail-row {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
    }

    .thumbnail-box {
        flex-shrink: 0 !important;
        width: 60px !important;
        height: 60px !important;
    }

    /* Product title */
    .product-title {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
    }

    /* Shop hero */
    .shop-hero {
        padding: 50px 0 !important;
    }

    .shop-hero h1 {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
    }
}


/* ============================================================
   SECTION II — CHATBOT PAGE
   ============================================================ */

@media (max-width: 767.98px) {
    .chatbot-page-container {
        padding: 1rem !important;
    }

    .chatbot-messages {
        max-height: 55vh !important;
    }
}


/* ============================================================
   SECTION JJ — PRIVACY POLICY / TERMS / 404
   ============================================================ */

@media (max-width: 767.98px) {
    .policy-content,
    .terms-content,
    .legal-content {
        padding: 1.5rem 1rem !important;
    }

    .policy-content h2,
    .terms-content h2 {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    }

    /* 404 page */
    .error-404 h1,
    .not-found-title {
        font-size: clamp(4rem, 15vw, 8rem) !important;
    }

    .error-404 h2,
    .not-found-subtitle {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    }
}


/* ============================================================
   SECTION KK — EXPO BOOKING / APPLY NOW / ENQUIRE
   ============================================================ */

@media (max-width: 767.98px) {
    .expo-booking-form,
    .apply-form,
    .enquire-form {
        padding: 1.25rem !important;
        border-radius: var(--bmi-radius-card) !important;
    }

    /* Multi-step forms */
    .form-steps {
        flex-wrap: wrap;
        gap: 8px;
    }

    .form-step-indicator {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}


/* ============================================================
   SECTION LL — BRANDED PRODUCTS MARQUEE (INDEX.PHP)
   Desktop & Tablet: Preserved in original state
   Mobile View ONLY: Sized for touch, clarity, and zero overflow
   ============================================================ */

/* Mobile (≤767.98px) */
@media (max-width: 767.98px) {
    body .brands-marquee-section,
    section.brands-marquee-section {
        padding-top: 1.8rem !important;
        padding-bottom: 1.8rem !important;
    }

    body .brands-marquee-section .brands-heading,
    .brands-heading {
        top: 34px !important;
        font-size: clamp(1.8rem, 6.5vw, 2.5rem) !important;
        color: rgba(15, 67, 37, 0.20) !important;
    }

    body .brands-marquee-section .framer-brands-wrapper,
    .framer-brands-wrapper {
        padding-top: 24px !important;
    }

    .framer-brands-content {
        gap: 12px !important;
        padding-right: 12px !important;
    }

    body .brands-marquee-section .brand-story-card,
    .brand-story-card {
        width: 180px !important;
        height: 230px !important;
        border-radius: 10px !important;
    }

    body .brands-marquee-section .brand-logo,
    .brand-logo {
        width: 100px !important;
        max-height: 36px !important;
    }

    body .brands-marquee-section .read-story-link,
    .read-story-link {
        bottom: 14px !important;
        font-size: 0.72rem !important;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    body .brands-marquee-section,
    section.brands-marquee-section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    body .brands-marquee-section .brands-heading,
    .brands-heading {
        top: 30px !important;
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
        color: rgba(15, 67, 37, 0.20) !important;
    }

    body .brands-marquee-section .framer-brands-wrapper,
    .framer-brands-wrapper {
        padding-top: 20px !important;
    }

    body .brands-marquee-section .brand-story-card,
    .brand-story-card {
        width: 165px !important;
        height: 215px !important;
        border-radius: 9px !important;
    }

    body .brands-marquee-section .brand-logo,
    .brand-logo {
        width: 92px !important;
        max-height: 32px !important;
    }

    body .brands-marquee-section .read-story-link,
    .read-story-link {
        bottom: 12px !important;
        font-size: 0.70rem !important;
    }
}


/* ============================================================
   SECTION MM — HOMEPAGE COUNTERS & STATS SECTION (MOBILE)
   Compact 2x2 grid, optimized card padding, icon & typography
   ============================================================ */

/* Mobile (≤767.98px) */
@media (max-width: 767.98px) {
    .counters-section {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .counters-section .counter-card {
        padding: 0.95rem 0.65rem !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 130px !important;
    }

    .counters-section .counter-card .mb-3 {
        margin-bottom: 0.35rem !important;
    }

    .counters-section .counter-card i.bi {
        font-size: 1.65rem !important;
    }

    .counters-section .counter-card h2.display-5 {
        font-size: 1.65rem !important;
        line-height: 1.15 !important;
        margin-bottom: 0.25rem !important;
    }

    .counters-section .counter-card p {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0 !important;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    .counters-section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        margin-top: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    .counters-section .counter-card {
        padding: 0.85rem 0.5rem !important;
        border-radius: 12px !important;
        min-height: 120px !important;
    }

    .counters-section .counter-card i.bi {
        font-size: 1.45rem !important;
    }

    .counters-section .counter-card h2.display-5 {
        font-size: 1.45rem !important;
    }

    .counters-section .counter-card p {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
    }
}


/* ============================================================
   SECTION NN — THREE.JS 3D PORTFOLIO & CAROUSEL (RESPONSIVE)
   Immune to navbar/floating-button collisions across all viewports
   ============================================================ */

/* Universal / Desktop */
#threejs-portfolio-section {
    position: relative !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 620px !important;
    overflow: hidden !important;
}

.threejs-heading-overlay {
    top: 92px !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.threejs-heading-overlay h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
    margin-bottom: 0.35rem !important;
}

.threejs-heading-overlay .badge {
    font-size: 0.72rem !important;
    padding: 4px 12px !important;
}

#carousel-ui {
    padding-bottom: max(78px, 9.5vh) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

#carousel-text {
    padding-left: clamp(80px, 6.5vw, 105px) !important;
    max-width: 640px !important;
}

#carousel-text #c-title {
    font-size: clamp(1.4rem, 2.3vw, 2.1rem) !important;
    margin-bottom: 6px !important;
}

#carousel-text #c-desc {
    font-size: clamp(0.82rem, 0.95vw, 0.92rem) !important;
    line-height: 1.55 !important;
    max-width: 500px !important;
    margin-bottom: 0 !important;
}

#carousel-text .accent-bar {
    width: 40px !important;
    height: 3px !important;
    margin-bottom: 8px !important;
}

#carousel-text #c-link {
    font-size: 0.82rem !important;
    padding: 6px 16px !important;
}

/* Tablet (768px–991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .threejs-heading-overlay {
        top: 90px !important;
    }

    #carousel-ui {
        padding-bottom: 78px !important;
    }

    #carousel-text {
        padding-left: 80px !important;
        padding-right: 60px !important;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767.98px) {
    #threejs-portfolio-section {
        min-height: 560px !important;
    }

    .threejs-heading-overlay {
        top: 86px !important;
    }

    .threejs-heading-overlay h2 {
        font-size: clamp(1.2rem, 5.2vw, 1.55rem) !important;
        margin-bottom: 2px !important;
        line-height: 1.25 !important;
    }

    .threejs-heading-overlay .badge {
        font-size: 0.65rem !important;
        padding: 3px 10px !important;
    }

    #carousel-ui {
        padding-bottom: 64px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #carousel-text {
        padding-left: 68px !important;
        padding-right: 48px !important;
        max-width: 100% !important;
    }

    #carousel-text #c-title {
        font-size: clamp(1.1rem, 4.2vw, 1.35rem) !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }

    #carousel-text .accent-bar {
        width: 30px !important;
        height: 2.5px !important;
        margin-bottom: 5px !important;
    }

    #carousel-text #c-desc {
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
        max-width: 100% !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 4px !important;
    }

    #carousel-text #c-link {
        font-size: 0.72rem !important;
        padding: 4px 12px !important;
        border-radius: 50rem !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}


/* ============================================================
   END OF BMI RESPONSIVE SYSTEM v1.0
   ============================================================ */