/* ==================================
   FORCE MOBILE VIEW TO MATCH INSPECT
   ================================== */

@media only screen and (max-width: 480px) {

    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        font-size: 14px;
    }

    /* Bootstrap containers */
    .container,
    .container-fluid {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Rows */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row > * {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Force columns to behave like 400px view */
    [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Cards */
    .shop-cat-box,
    .blog-card,
    .mv-card,
    .about-image {
        width: 100% !important;
        margin: 0 auto 18px;
    }

    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Section titles */
    .title-all,
    .section-header {
        text-align: left !important;
        margin-bottom: 25px;
    }

    .title-all h1,
    .section-header h2 {
        font-size: 20px;
    }

    .title-all p,
    .section-header p {
        font-size: 13px;
        line-height: 1.5;
    }

    /* NAVBAR */
    /* .navbar {
        height: auto;
        padding: 8px 12px;
    } */

    .navbar-brand img.logo {
        height: 50px;
        margin-right: 0 !important;
    }

    /* Disable slider arrows */
    .owl-nav,
    .owl-prev,
    .owl-next {
        display: none !important;
    }
}

@media (max-width: 991px) {

    /* RESET any flex damage */
    nav.navbar.bootsnav,
    nav.navbar.bootsnav > .container,
    nav.navbar.bootsnav .navbar-header {
        display: block !important;
    }

    /* Header width */
    nav.navbar.bootsnav .navbar-header {
        width: 100%;
        position: relative;
    }

    /* LOGO — LEFT */
    nav.navbar.bootsnav .navbar-brand {
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* HAMBURGER — RIGHT */
    nav.navbar.bootsnav .navbar-toggler {
        float: right !important;
        margin: 0 !important;
        padding: 6px 10px;
        border: none;
        background: transparent;
    }

    nav.navbar.bootsnav .navbar-toggler i {
        font-size: 24px;
        color: #000;
    }
}



/* =========================================
   INSTAGRAM SECTION – FINAL MOBILE FIX
   ========================================= */

@media (max-width: 768px) {

    /* Reduce overall section height */
    .instagram-box {
        padding: 15px 0 0 !important;
        min-height: unset !important;
        margin-bottom: 0 !important;
    }

    /* Force owl stage to wrap content tightly */
    .main-instagram.owl-carousel .owl-stage-outer {
        padding-bottom: 0 !important;
    }

    /* Align items to top instead of center */
    .main-instagram.owl-carousel .owl-stage {
        display: flex !important;
        align-items: flex-start !important;
    }

    /* Card container */
    .instagram-box .ins-inner-box {
        height: auto !important;
        padding: 10px !important;
        background: #fff;
        border-radius: 12px;
    }

    /* Image handling – NO CUT, CLEAN SIZE */
    .instagram-box .ins-inner-box img {
        width: 100%;
        height: auto !important;
        max-height: 240px;
        object-fit: contain !important;
        display: block;
        margin: 0 auto;
    }

    /* Remove extra bottom spacing per slide */
    .main-instagram .owl-item {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Disable hover overlay on mobile */
    .hov-in {
        display: none !important;
    }
}