/* ================================================================
   MEDIVICE TECHNO BD - COMPREHENSIVE MOBILE RESPONSIVE CSS
   Version 2.0 - Smart selectors, no product card override
   ================================================================ */

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

/* ---------------------------------------------------------------
   MOBILE BREAKPOINT (max 767px)
--------------------------------------------------------------- */
@media (max-width: 767px) {

    /* --- Body: prevent horizontal scroll --- */
    body {
        overflow-x: hidden !important;
    }
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }

    /* ---------------------------------------------------------------
       WYSIWYG FLOATED IMAGES - center and make full width on mobile
    --------------------------------------------------------------- */
    img.note-float-right,
    img.note-float-left,
    img[style*="float: right"],
    img[style*="float:right"],
    img[style*="float: left"],
    img[style*="float:left"] {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 12px auto !important;
        border-radius: 10px !important;        /* consistent all sides */
    }

    /* Content section paragraph images (WYSIWYG) */
    #aboutus-body .col-md-12 > p img,
    .message-page .col-md-12 > p img,
    .MsoNormal img {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 12px auto !important;
        border-radius: 10px !important;
    }

    /* About-us page & similar pages: main content image */
    .about-us-page img,
    #aboutus-body > .container > .row img,
    #aboutus-body .col-md-6 img:not(.prod-card img) {
        display: block !important;
        margin: 12px auto !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 10px !important;
        float: none !important;
    }

    /* ---------------------------------------------------------------
       BOOTSTRAP COLUMN RESET
    --------------------------------------------------------------- */
    .col-md-12,
    .col-md-9,
    .col-md-8,
    .col-md-7,
    .col-md-6,
    .col-md-5,
    .col-md-4,
    .col-md-3,
    .col-lg-12,
    .col-lg-6,
    .col-lg-4,
    .col-lg-3 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* ---------------------------------------------------------------
       HEADER / NAVBAR
    --------------------------------------------------------------- */
    #header2_mid {
        padding: 8px 0 !important;
    }
    #header2_mid .row {
        align-items: center !important;
    }
    #header2_mid .head2_mid_logo img {
        max-height: 55px !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
        float: none !important;
    }
    #header2_mid .Header_slogan h2 {
        font-size: 0.95rem !important;
        text-align: center !important;
        margin: 3px 0 !important;
    }
    #header2_mid .col-md-3,
    #header2_mid .col-md-6 {
        text-align: center !important;
        margin-bottom: 4px !important;
    }

    /* ---------------------------------------------------------------
       HERO SLIDER
    --------------------------------------------------------------- */
    #slider-section .without_slider {
        padding: 0 !important;
    }
    .home .slide,
    #slider-section .slide {
        min-height: 180px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* ---------------------------------------------------------------
       BREADCRUMB
    --------------------------------------------------------------- */
    section.breadcrumb,
    .breadcrumb {
        padding: 6px 0 !important;
    }
    .uk-breadcrumb {
        font-size: 0.78rem !important;
        padding: 0 !important;
        flex-wrap: wrap !important;
    }

    /* ---------------------------------------------------------------
       ABOUT SECTION (Homepage)
    --------------------------------------------------------------- */
    #aboutus-two {
        padding: 20px 0 !important;
    }
    #aboutus-two .aboutus-head h3 {
        font-size: 1.4rem !important;
        text-align: center !important;
    }
    #aboutus-two .aboutus-img {
        text-align: center !important;
        margin-top: 15px !important;
    }
    #aboutus-two .aboutus-img img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        float: none !important;
        display: block !important;
    }
    #aboutus-two .aboutus-readmore {
        text-align: center !important;
    }
    #aboutus-two .aboutus-readmore a {
        display: inline-block !important;
    }

    /* ---------------------------------------------------------------
       HOMEPAGE PRODUCT CATEGORY CARDS
    --------------------------------------------------------------- */
    #product-categories-two {
        margin: 10px 0 !important;
    }
    #product-categories-two .category-overlay {
        padding: 20px 10px !important;
    }
    #product-categories-two .card {
        margin-bottom: 16px !important;
    }
    #product-categories-two .card-img img {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        float: none !important;
        margin: 0 !important;
        border-radius: 6px !important;
    }
    #product-categories-two .card-title a.btn {
        font-size: 0.88rem !important;
        padding: 10px 8px !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* ---------------------------------------------------------------
       CONTENT / INNER PAGES (#aboutus-body)
    --------------------------------------------------------------- */
    #aboutus-body {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    #aboutus-body h3 {
        font-size: 1.35rem !important;
        text-align: center !important;
    }
    #aboutus-body h4 {
        font-size: 1.1rem !important;
    }
    #aboutus-body p {
        font-size: 0.88rem !important;
        line-height: 1.65 !important;
    }

    /* ---- Tables (medicine categories table) ---- */
    #aboutus-body table,
    .message-page table {
        width: 100% !important;
        font-size: 0.78rem !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #aboutus-body td,
    #aboutus-body th,
    .message-page td,
    .message-page th {
        padding: 5px 7px !important;
        min-width: 80px !important;
        word-break: break-word !important;
    }

    /* ---- topimg (human/animal medicine/about-us page image) ---- */
    .topimg, .top_img img {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 12px auto !important;
        border-radius: 10px !important;
        border-top-right-radius: 10px !important;
        border-bottom-left-radius: 10px !important;
        border-top-left-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

    /* ---------------------------------------------------------------
       ALL PRODUCT GRIDS (human-medicine, animal-medicine, about-us)
       Forces 2 columns for any grid using auto-fill minmax
    --------------------------------------------------------------- */
    #featured-products, #featured-vet-products, #aboutus-body {
        padding: 30px 0 40px !important;
    }
    #featured-products h2, #featured-vet-products h2 {
        font-size: 1.4rem !important;
    }
    #featured-products p {
        font-size: 0.88rem !important;
    }
    
    /* Force 2 columns on mobile for ALL dynamic grids */
    div[style*="grid-template-columns: repeat(auto-fill"],
    div[style*="grid-template-columns:repeat(auto-fill"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Product card image container height on mobile */
    .prod-card > div:first-child,
    .about-prod-card > div:first-child {
        height: 150px !important;
        padding: 10px !important;
    }
    .prod-card > div:first-child img,
    .about-prod-card > div:first-child img {
        max-height: 130px !important;
    }
    .prod-card > div:last-child,
    .about-prod-card > div:last-child {
        padding: 10px 12px 14px !important;
    }
    .prod-card h5, .about-prod-card div[style*="font-weight:600"] {
        font-size: 0.82rem !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    .prod-card p {
        display: none; /* hide description on mobile */
    }
    .prod-card span, .about-prod-card span {
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
        margin-top: 6px !important;
    }

    /* ---------------------------------------------------------------
       QUALITY ASSURANCE PAGE
    --------------------------------------------------------------- */
    #aboutus-body .row.align-items-center {
        flex-direction: column !important;
    }
    #aboutus-body .col-12.col-md-6 img,
    #aboutus-body img.img-fluid {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        display: block !important;
        float: none !important;
        margin: 0 0 16px 0 !important;
    }
    /* Stats 2x2 grid stays on mobile */
    #aboutus-body div[style*="grid-template-columns:1fr 1fr"],
    #aboutus-body div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ---------------------------------------------------------------
       MESSAGE/TEAM PAGES (executive, advisory, global-business)
    --------------------------------------------------------------- */
    .message-page {
        padding: 15px 0 !important;
    }
    .message-page h3 {
        font-size: 1.3rem !important;
        text-align: center !important;
    }
    .message-page p,
    .message-page span {
        font-size: 0.85rem !important;
        line-height: 1.65 !important;
    }

    /* ---------------------------------------------------------------
       DISTRIBUTION NETWORK PAGE
    --------------------------------------------------------------- */
    .distribution-page .col-md-12 img {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block !important;
        margin: 10px auto !important;
        max-width: 100% !important;
        border-radius: 8px !important;
    }

    /* ---------------------------------------------------------------
       CONTACT PAGE
    --------------------------------------------------------------- */
    #contact-section .col-md-6,
    #contact-section .col-md-4 {
        margin-bottom: 20px !important;
    }
    #contact-section input,
    #contact-section textarea,
    #contact-section select {
        width: 100% !important;
        font-size: 0.9rem !important;
    }

    /* ---------------------------------------------------------------
       FOOTER
    --------------------------------------------------------------- */
    #footer_two_ {
        padding: 20px 0 10px !important;
    }
    #footer_two_ .row {
        flex-direction: column !important;
    }
    #footer_two_ [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;
        padding: 0 15px !important;
    }
    #footer_two_ .footer_two_logo {
        text-align: center !important;
    }
    #footer_two_ .footer_two_logo img {
        max-height: 70px !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
        float: none !important;
    }
    #footer_two_ h5 {
        font-size: 1rem !important;
        margin: 10px 0 8px !important;
    }
    #footer_two_ p,
    #footer_two_ li,
    #footer_two_ a {
        font-size: 0.82rem !important;
    }
    #footer-buttom {
        padding: 8px 0 !important;
    }
    #footer-buttom p {
        font-size: 0.78rem !important;
        text-align: center !important;
    }

    /* ---------------------------------------------------------------
       TYPOGRAPHY
    --------------------------------------------------------------- */
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.35rem !important; }
    h3 { font-size: 1.2rem !important; }
    h4 { font-size: 1.05rem !important; }

    /* Utility spacing */
    .py-md-5 { padding-top: 20px !important; padding-bottom: 20px !important; }
    .pt-md-5 { padding-top: 20px !important; }
    .pb-md-5 { padding-bottom: 20px !important; }
    .my-md-5 { margin-top: 15px !important; margin-bottom: 15px !important; }
    .mt-md-5 { margin-top: 15px !important; }
    .mb-md-5 { margin-bottom: 15px !important; }
    .py-md-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
    .my-md-4 { margin-top: 12px !important; margin-bottom: 12px !important; }
}

/* ---------------------------------------------------------------
   TABLET BREAKPOINT (768px - 991px)
--------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    #slider-section .slide {
        min-height: 300px !important;
    }
    #header2_mid .head2_mid_logo img {
        max-height: 65px !important;
    }
    /* Keep 2 col product cards on tablet */
    #product-categories-two .col-md-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Featured products - 3 cols on tablet */
    #featured-products > .container > div[style*="display: grid"],
    #featured-vet-products > .container > div[style*="display: grid"] {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 18px !important;
    }
    #aboutus-body p {
        font-size: 0.9rem !important;
    }
}