@media (min-width:992px) {

    .hero-video-mobile {
        display: none;
    }

    .hero-video-desktop {
        display: block;
    }
}

@media (max-width:991px) {
    .social-bar {
        display: none;
    }

    .hero {
        margin-top: 72px;
        height: unset;
    }

    .hero-video {
        position: relative;
        width: 100%;
        overflow: hidden;
        background: #000;
    }

        .hero-video video {
            display: block;
            width: 100%;
            height: auto;
            object-fit: contain;
        }

    .hero-video-desktop {
        display: none;
    }

    .hero-video-mobile {
        display: block;
    }

        .hero-video-mobile video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center center;
            background: #000;
        }

    .hero-video-mobile {
        display: block;
    }

    .hero-video-desktop {
        display: none;
    }

    .hero-discover-btn {
        gap: unset;
    }

        .hero-discover-btn .btn-icon {
            margin-top: 7px;
        }

    .main-title {
        font-size: 45px;
    }

    .video-cta-button {
        gap: unset;
    }

    .cta-icon {
        margin-top: 7px;
    }

    .video-cta-button {
        bottom: 7%;
    }

    .section-heading {
        font-size: 45px;
    }

    /* ===========================
    Two Columns Section - Mobile
    =========================== */

    .two-col-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .col-item {
        width: 100%;
        flex: none;
    }

    .col-image {
        width: 100%;
    }

    .cover-img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .col-content {
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 5px solid #f5f2ef;
        padding: 106px 10px 28px 10px;
        box-sizing: border-box;
        flex: unset;
        display: unset;
        flex-direction: unset;
        justify-content: unset;
        align-items: unset;
        text-align: center;
        border-top: unset;
        background-color: unset;
        /*padding: unset;*/
    }

    .col-title {
        margin: 0;
    }

    .button-wrapper-pro {
        width: 100%;
        padding: 0 24px 24px;
        box-sizing: border-box;
    }

    .col-button {
        padding: 12px 10px;
    }

    .mpl-logo {
        margin-bottom: 25px;
    }

    .marmonite-logo {
        margin-bottom: 30px;
    }

    .casestudy-badge {
        font-size: 30px;
    }

    .casestudy-description {
        text-align: left;
    }

    .colour-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .colour-info {
        order: 1;
        width: 100%;
        padding: 0 32px 28px;
        box-sizing: border-box;
        text-align: left;
    }

    .colour-title {
        margin: 0;
        text-align: left;
        line-height: 1.2;
    }

    .colour-info > h2 {
        font-size: 34px;
    }

    .colour-image {
        order: 2;
        width: 100%;
    }

        .colour-image img {
            display: block;
            width: 100%;
            height: auto;
        }



    /* =====================================================
    PRODUCTS SLIDER - MOBILE
    ===================================================== */


    .marmonite-products-slider {
        padding: 70px 0;
    }

    .marmonite-products-container {
        padding: 0 20px;
    }

    /* ---------- تبدیل دو ستون به یک ستون ---------- */

    .slider-two-columns {
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    /* ---------- برندها ---------- */

    .brands-filter-col {
        flex: none;
        width: 100%;
    }

    .brands-filter-sticky {
        position: static;
    }

    .brands-filter-title {
        margin-bottom: 18px;
        font-size: 12px;
        letter-spacing: 2px;
    }

    .brands-list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 22px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 5px;
    }

        .brands-list::-webkit-scrollbar {
            display: none;
        }

    .brand-item {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 18px;
    }

    /* ---------- ستون اسلایدر ---------- */

    .slider-content-col {
        width: 100%;
        min-width: 0;
    }

    /* ---------- فلش و پروگرس ---------- */

    .slider-top-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .slider-progress-wrapper {
        flex: 1;
        margin-right: 25px;
    }

    /* ---------- Swiper ---------- */

    .marmonite-products-swiper {
        overflow: visible;
    }

        .marmonite-products-swiper .swiper-wrapper {
            align-items: stretch;
        }

        .marmonite-products-swiper .swiper-slide {
            width: 78vw !important;
            max-width: none;
        }

    /* ---------- کارت ---------- */

    .product-card {
        max-width: none;
        width: 100%;
        margin: 0;
        border-radius: 8px;
    }

    .product-image {
        aspect-ratio: 1/1.18;
    }

    .product-name {
        font-size: 14px;
        margin-top: 18px;
    }

    .product-view {
        font-size: 11px;
        margin-bottom: 18px;
    }

    /* ===========================
   Imagination Section - Mobile
=========================== */
    .imagination-section {
        background-image: url("../../assets/images/1 (1).jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin:15px 0px;
    }

    .imagination-title {
        color: #cccccc;
        background-color :#4c4c4ca8;
    }

    .cards-grid {
        display: none;
    }
}