/* Mobile Devices */
@media (max-width: 767px) {

    /* root */
    :root {
        --font-16: 16px;
        --font-18: 16px;
        --font-19: 19px;
        --font-20: 20px;
        --font-25: 25px;
        --font-26: 26px;
        --font-40: 32px;
        --font-70: 49px;

        /* Spacing */
        --mv-components-spacing: 100px;
        --mv-components-bw-spacing: 64px;
    }

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        width: 100%;
        padding-right: 35px;
        padding-left: 35px;
        margin-right: auto;
        margin-left: auto;
    }


    /* Top Banner */
    #mvTopBannerNavDropdown {
        min-height: 30px;
    }

    .mv-top__banner-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 15px;
        padding: 5px 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
        max-width: 100vw;
    }

    .mv-top__banner-menu::-webkit-scrollbar {
        display: none;
    }

    .mv-top__banner-menu .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .mv-top__banner-menu .nav-item.dropdown {
        position: static !important;
    }

    .mv-top__banner-menu .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 15px !important;
        right: auto !important;
        width: auto !important;
        min-width: 250px;
        margin-top: 0;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        z-index: 1050;
        background-color: var(--mv-color-white, #fff);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .mv-top__banner-menu .dropdown-menu .dropdown-item {
        color: var(--mv-color-black, #000);
        padding: 10px 15px;
    }

    .mv-top__banner-menu .dropdown-menu .dropdown-item:hover,
    .mv-top__banner-menu .dropdown-menu .dropdown-item:focus {
        background-color: #f8f9fa;
        color: var(--mv-color-black, #000);
    }

    /* Prevent the parent container from expanding and causing page scroll */
    #mvTopBannerNavDropdown {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
    }

    .mv-top__banner-nav {
        padding: 0;
    }

    /* nav */
    .navbar-toggler-icon {
        background-image: url(../images/icons/bars-solid.svg);
    }

    /* Hero Block */
    .mv-hero_block {
        padding-top: 200px;
        padding-bottom: 100px;
    }

    /* cards */
    .mv-cs__card {
        min-height: 413px;
    }

    .mv-about-us__content {
        padding-left: 0;
        margin-top: 0px;
    }

    .mv-our-brands__content {
        padding-right: 0;
    }

    .mv-innovation-card__image-wrap {
        height: 160px;
        overflow: hidden;
    }

    .mv-innovation-showcase__slider {
        margin-left: -35px;
        margin-right: -35px;
        padding-left: 15vw;
        padding-right: 15vw;
        gap: 20px;
    }

    .mv-innovation-card {
        flex: 0 0 70vw;
        scroll-snap-align: center;
    }

    .mv-innovation-showcase {
        background: #f5f5f5;
        background: linear-gradient(357deg, rgba(245, 245, 245, 1) 97%, rgba(255, 255, 255, 1) 80%);
    }

    .mv-innovation-showcase__controls {
        margin-top: 0px;
    }

    .mv-latest-updates__actions {
        width: 100%;
        justify-content: space-between;
        flex-direction: column-reverse;
    }

    .mv-latest-updates__header {
        text-align: center;
        display: flex;
        align-items: center;
    }

    .mv-site-header {
        top: 55px;
    }

    .mv-mobile-menu__nav .nav-link {
        display: flex;
        justify-content: flex-start;
    }

    .mv-site-header--sticky {
        top: var(--mv-top-banner-height, 0px);
    }

    .mv-site-header__brand {
        min-height: 40px;
    }

    .mv-site-header__brand img {
        height: 40px;
    }

    .mv-site-header {
        padding-bottom: 0px;
    }

    .mv-site-header--sticky .navbar-toggler-icon {
        filter: invert(1);
    }

    .mv-mobile-menu__logo {
        max-height: 180px;
        filter: brightness(0) invert(1);
        height: 40px;
    }

    .mv-testimonials__actions {
        display: flex;
        align-items: center;
        gap: 30px;
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
    }

    .mv-testimonial-card__author-name {
        text-align: left;
    }

    .mv-testimonials__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 50px;
        gap: 20px;
        flex-wrap: wrap;
        text-align: center;
    }

    .mv-upcoming-events__header {
        display: flex;
        align-items: center;
        text-align: center;
    }

    .mv-upcoming-events__actions {
        width: 100%;
        justify-content: space-between;
        flex-direction: column-reverse;
    }

    .mv-upcoming-events__slider {
        display: flex;
        flex-direction: row;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-left: -35px;
        margin-right: -35px;
        padding-left: 15vw;
        padding-right: 15vw;
    }

    .mv-upcoming-events__slider::-webkit-scrollbar {
        display: none;
    }

    .mv-upcoming-events__slider .mv-upcoming-events-card {
        flex: 0 0 70vw;
        min-width: 70vw;
        scroll-snap-align: center;
        min-height: auto;
    }

    .mv-testimonial-card__author-info {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        flex-direction: column;
    }

    .mv-testimonial-card__content {
        padding: 30px;
        text-align: center;
    }

    .mv-testimonial-card__read-more {
        align-self: center;
    }

    .mv-positive-plumbing {
        padding: 0 0 var(--mv-components-spacing) 0;
    }

    .mv-all-showcases__filters,
    .mv-all-events__filters,
    .mv-our-people__filters,
    .mv-all-testimonials__filters,
    .mv-vitow-brands__filters {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
        padding-bottom: 5px;
        white-space: nowrap;
        justify-content: flex-start !important;
    }

    .mv-all-showcases__filters::-webkit-scrollbar,
    .mv-all-events__filters::-webkit-scrollbar,
    .mv-our-people__filters::-webkit-scrollbar,
    .mv-all-testimonials__filters::-webkit-scrollbar,
    .mv-vitow-brands__filters::-webkit-scrollbar {
        display: none;
    }

    .mv-all-showcases__filter-btn,
    .mv-all-events__filter-btn,
    .mv-our-people__filter-btn,
    .mv-all-testimonials__filter-btn,
    .mv-vitow-brands__filter-btn {
        flex-shrink: 0;
    }

    .mv-vitow-brands__filters-wrap {
        justify-content: flex-start;
    }

    .mv-working-with-us__shape--top-left {
        top: -15px;
        left: -15px;
    }

    .mv-working-with-us__shape--bottom-right {
        bottom: -25px;
        right: 0px;
    }

    .mv-find-a-stockist__col--left .mv-find-a-stockist__card-title {
        text-align: center;
    }

    .mv-find-a-stockist__col--right .mv-find-a-stockist__card-title {
        text-align: center;
    }

    .mv-find-a-stockist__col--left p {
        text-align: center;
    }

    .mv-find-a-stockist__col--right p {
        text-align: center;
    }

    .mv-contact-image__form-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-us-from-m-100 {
        width: 100%;
        margin-top: 10px;
    }

    .mv-contact-image__form .submit_btn {
        width: 100%;
        margin-top: 10px;
    }

    .mv-open-account .container {
        padding: 0;
    }

    .account-form {
        padding: 0px;
        background-color: #f4f4f4;
    }

    .mv-open-account__right {
        padding-left: 35px;
        padding-right: 35px;
    }

    .mv-open-account .mv_btn {
        width: 100%;
    }

    .mv-open-account__left {
        background-color: #F5F5F5;
        padding: 35px;
    }

    .mv-open-account__form-wrap .mv-custom-file-row {
        display: flex;
        align-items: stretch;
        gap: 15px;
        margin-bottom: 24px;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    /* Keep the image square on mobile so the square overlay SVG aligns with the photo edges */
    .mv-about-us__image-wrapper {
        justify-content: center;
    }

    .mv-about-us__image-inner {
        display: flex;
        width: 100%;
    }

    .mv-about-us__image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
    }

    .mv-open-account__form-wrap .mv-custom-file-wrap {
        width: 100%;
        max-width: 100%;
    }

    .returns-form .form-check {
        padding: 0;
    }

    .full-width-btn {
        width: 100%;
    }

    /* .mv-contact-image__form-col {
        padding: 0px 50px !important;
    } */
}

/* Tablet Devices */
@media (min-width: 768px) and (max-width: 1024px) {}


/* Desktop Devices */
@media (min-width: 1025px) {
    .mv-our-mission__clip {
        display: flex;
        justify-content: flex-end;
        padding-right: 64px;
    }

    .mv-open-account__right {
        padding-left: 64px;
    }

    .mv-open-account__left {
        background-color: #f4f4f4;
        padding: 40px;
    }
}

/* Our History Mobile Styles */
@media (max-width: 991px) {
    .mv-our-history__item {
        flex-direction: column;
        margin-bottom: 60px;
    }

    .mv-our-history__year-col {
        width: 100%;
        margin-bottom: 30px;
        padding-left: 40px;
    }

    .mv-our-history__content-col {
        padding-left: 40px;
    }

    .mv-our-history__timeline-line {
        left: 11px;
    }

    .layout-3-img {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .layout-3-img .mv-our-history__img-wrap {
        grid-row: span 1 !important;
        height: 250px !important;
    }

    /* Contact Us with Image */
    .mv-contact-image {
        padding-bottom: 400px !important;
    }

    .mv-contact-image__bg {
        width: 100%;
        height: 400px;
        top: auto;
        bottom: 0;
    }

    .mv-contact-image__turquoise-shape {
        width: 100%;
        height: calc(100% - 330px) !important;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    }

    .mv-contact-image__purple-shape {
        width: 100%;
        height: calc(100% - 340px) !important;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    }

    .mv-contact-image__form-col {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Logo Slider Mobile/Tablet Styles */
    .mv-logo-slider {
        padding: 60px 0;
    }

    .mv-logo-slider__title {
        font-size: 22px;
        margin-bottom: 35px;
        padding: 0 15px;
    }

    .mv-logo-slider__track-inner {
        gap: 35px;
        padding-right: 35px;
    }

    .mv-logo-slider__item {
        height: 60px;
        width: auto;
        opacity: 1;
    }

    .mv-logo-slider__img {
        height: 32px;
    }

    /* Follow Us On Social Media Mobile Styles */
    .mv-follow-social {
        padding: 60px 0;
    }

    .mv-follow-social__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .mv-follow-social__content {
        align-items: center;
    }

    .mv-follow-social__title {
        font-size: 32px;
    }

    .mv-follow-social__line {
        margin-left: auto;
        margin-right: auto;
        width: 180px;
        height: 4px;
        margin-bottom: 25px;
    }

    .mv-follow-social__icons {
        justify-content: center;
        gap: 20px;
    }

    .mv-follow-social__gallery-wrap {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .mv-follow-social__slider-wrapper {
        overflow: hidden;
        width: 100%;
        margin-left: -35px;
        margin-right: -35px;
        padding-left: 35px;
        padding-right: 35px;
        position: relative;
    }

    .mv-follow-social__track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: max-content;
        animation: mv-follow-social-scroll var(--slider-speed, 30s) linear infinite;
    }

    .mv-follow-social__track:hover {
        animation-play-state: paused;
    }

    .mv-follow-social__track-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 15px;
        padding-right: 15px;
    }

    .mv-follow-social__slider-item {
        flex: 0 0 175px !important;
        width: 175px !important;
        max-width: 175px !important;
        height: 175px !important;
        position: relative;
        overflow: hidden;
        background-color: var(--mv-color-gray-light);
    }

    @keyframes mv-follow-social-scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .mv-follow-social__slider-wrapper.mobile-only {
        display: block !important;
    }

    .mv-follow-social__grid.desktop-only {
        display: none !important;
    }

    /* Left Heading Right Description Mobile Styles */
    .mv-lh-rd {
        padding: 60px 0;
    }

    .mv-lh-rd__inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mv-lh-rd__title {
        font-size: 28px;
        line-height: 1.3;
    }

    .mv-lh-rd__description p {
        margin-bottom: 20px;
    }

    /* Download Resources Mobile Styles */
    .mv-download-resources {
        padding: 60px 0;
    }

    .mv-download-resources__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }

    .mv-download-resources__title-area {
        width: 100%;
        margin-bottom: 20px;
    }

    .mv-download-resources__actions {
        width: 100%;
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
    }

    .mv-download-resources__cta.mv_btn {
        width: 100%;
        max-width: 320px;
    }

    .mv-download-resources__arrows {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }

    .mv-download-resources__slider {
        margin-left: -35px;
        margin-right: -35px;
        padding-left: 35px;
        padding-right: 35px;
        gap: 20px;
    }

    .mv-download-resources__card {
        flex: 0 0 75vw;
        min-width: 75vw;
        scroll-snap-align: start;
    }

    .mv-download-resources__card-title {
        font-size: 18px;
        margin-top: 15px;
        margin-bottom: 15px;
        height: 2.7em;
    }

    /* Product Champions Mobile Styles */
    .mv-product-champions {
        padding: 60px 0;
    }

    .mv-product-champions__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }

    .mv-product-champions__title-area {
        width: 100%;
        margin-bottom: 20px;
    }

    .mv-product-champions__actions {
        width: 100%;
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
    }

    .mv-product-champions__cta.mv_btn {
        width: 100%;
        max-width: 320px;
    }

    .mv-product-champions__arrows {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }

    .mv-product-champions__slider {
        grid-auto-columns: 75vw;
        gap: 20px;
    }

    .mv-product-champions__card-title {
        font-size: 18px;
        margin-top: 15px;
        margin-bottom: 15px;
        min-height: 2.7em;
    }
}

/* Product Comparison Table Responsive Overrides */
@media (max-width: 768px) {
    .mv-product-comparison {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .mv-comparison-table thead th {
        padding: 10px;
    }

    .mv-comparison-table tbody td {
        padding: 10px;
    }

    .mv-comparison-table tbody th {
        padding: 10px;
    }

    .mv-comparison-table__dot {
        width: 16px;
        height: 16px;
    }
}

/* Hide mega menu dropdown logo on screens less than 1400px and adjust padding */
@media (max-width: 1399px) {
    .mv-site-header__menu>.nav-item.dropdown>.dropdown-menu::after {
        display: none !important;
    }

    .mv-site-header__menu>.nav-item.dropdown>.dropdown-menu {
        padding-right: 20px !important;
    }
}