/* Mobile + tablet (up to 991.98px) */
@media (max-width: 991.98px) {

    /* header pill a bit tighter */
    .mmg-navbar {
        width: calc(100% - 24px);
        margin-top: 10px;
        padding: 6px 14px;
    }

    /* collapsed panel: card-like background under pill */
    .mmg-navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #565959;
        border-radius: 16px;
        padding: 12px 16px 16px;
        margin-top: 8px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.45);
        z-index: 1001;
    }

    /* nav items vertical */
    .mmg-nav-menu {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 4px;
    }

    .mmg-nav-menu .nav-item {
        margin: 4px 0;
    }

    .mmg-nav-menu .nav-link::after {
        bottom: -3px;
    }

    /* dropdown submenu – full width, background */
    .mmg-dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        background-color: #666666;
        border-radius: 4px;
        margin-top: 4px;
        box-shadow: none;
        padding: 4px 0;
    }

    .mmg-dropdown-menu .dropdown-item {
        padding-left: 20px;
    }

    /* mobile CTA inside menu */
    .mmg-header-cta-mobile {
        width: 100%;
        margin-top: 16px;
        justify-content: center;
    }

    /* HERO responsive */
    .mmg-hero-content {
        padding-top: 140px;
        padding-bottom: 80px;
    }

    .mmg-hero-title {
        font-size: 30px;
    }

    .mmg-hero-subtitle {
        font-size: 14px;
        max-width: 100%;
        margin-bottom: 24px;
    }

    .mmg-hero-ctas {
        flex-direction: column;
        align-items: flex-start !important;
    }

    /* MOBILE DIFFERENT STYLE:
       Hero "START YOUR PROJECT" – no border / pill */
    .mmg-hero-btn {
        border: none;
        border-radius: 0;
        background: transparent;
        padding-left: 0;
        padding-right: 0;
    }

    .mmg-hero-btn .mmg-cta-icon {
        position: static;
        transform: none;
        margin-left: 8px;
        font-size: 14px;
    }

    .mmg-hero-btn:hover {
        background: transparent;
        color: #00c48c;
    }
}

/* Very small screens */
@media (max-width: 575.98px) {
    .mmg-hero-title {
        font-size: 26px;
    }

    .mmg-logo-main {
        font-size: 16px;
    }
}

/*Home header end*/











/* WHO WE ARE – responsive */
@media (max-width: 991.98px) {
    .mmg-section-about {
        padding: 80px 0;
    }

    .mmg-section-about .row {
        text-align: left;
    }

    .mmg-about-label {
        margin-bottom: 16px;
    }

    .mmg-about-cta {
        margin-bottom: 24px;
    }

    .mmg-section-about .col-md-3,
    .mmg-section-about .col-md-6 {
        margin-bottom: 16px;
    }
}

@media (max-width: 575.98px) {
    .mmg-section-about {
        padding: 60px 0;
    }
}








/*image carousel home*/
@media (max-width: 991.98px) {
    .mmg-image-marquee {
        padding: 30px 0;
    }

    .mmg-image-card img {
        height: 60px;   /* slightly smaller on mobile, change if needed */
    }
}








/* WHY CLIENTS STAY – responsive */
@media (max-width: 991.98px) {
    .mmg-clients-section {
        padding: 60px 0;
    }

    .mmg-clients-inner {
        padding: 32px 20px 40px;
    }

    .mmg-clients-heading {
        font-size: 18px;
    }

    /* stack label on top, heading below on tablet/mobile */
    .mmg-clients-section .row.align-items-start > .col-md-3 {
        margin-bottom: 12px;
    }
}

@media (max-width: 575.98px) {
    .mmg-clients-section {
        padding: 48px 0;
    }

    .mmg-client-card {
        padding: 16px 16px;
    }
}














/* SERVICES TABS – responsive */
@media (max-width: 900px) {

    /* viewport: allow horizontal scroll, not fixed height */
    .mmg-services-viewport {
        min-height: 0;
        overflow-x: auto;      /* horizontal scroll */
        overflow-y: visible;
    }

    /* panels become relative, width based on content */
    .mmg-services-panel {
        position: relative;
        inset: auto;
        padding: 16px 0 4px;
        background-color: #F4F4F2;

        /* override JS transforms on mobile */
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto;

        width: max-content;    /* cards inline horizontally */
        display: none;         /* only active panel visible */
    }

    .mmg-services-panel.is-active {
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
    }

    /* cards as horizontal items */
    .mmg-service-card {
        flex: 0 0 80vw;        /* ~80% of viewport width each */
        max-width: 80vw;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    }

    .mmg-service-media {
        height: 220px;
    }

    /* remove right gradient on mobile */
    .mmg-services-gradient-right {
        display: none;
    }
}

@media (max-width: 640px) {
    .mmg-services-section {
        padding: 48px 0;
    }

    .mmg-services-shell {
        padding: 20px 16px 28px;
    }

    .mmg-service-tab {
        font-size: 13px;
        padding: 8px 18px;
    }

    .mmg-service-media {
        height: 200px;
    }
}











/* OUR WORK – responsive */
@media (max-width: 991.98px) {
    .mmg-work-section {
        padding: 70px 0;
    }

    .mmg-work-heading {
        font-size: 20px;
    }

    .mmg-work-card-inner img {
        height: 230px;
    }

    .mmg-work-card-wide .mmg-work-card-inner img {
        height: 240px;
    }

    .mmg-work-card-bottom {
        bottom: 10px;
    }
}

@media (max-width: 575.98px) {
    .mmg-work-section {
        padding: 56px 0;
    }

    .mmg-work-card-inner img {
        height: 210px;
    }

    .mmg-work-card-wide .mmg-work-card-inner img {
        height: 220px;
    }
}











/* PROCESS / TIMELINE – responsive */
@media (max-width: 768px) {
    .mmg-process-section {
        padding: 70px 0 90px;
    }

    .mmg-process-shell {
        padding: 40px 20px 80px;
    }

    .mmg-process-title {
        font-size: 22px;
    }

    .mmg-step-card {
        grid-template-columns: 1fr;   /* text over video on mobile */
    }

    .mmg-timeline-inner {
        padding-left: 75px;
    }

    .mmg-rail {
        left: 24px;
    }
}









/* FAQS – responsive */
@media (max-width: 991.98px) {
    .mmg-faq-section {
        padding: 80px 0 90px;
    }

    .mmg-faq-heading {
        font-size: 22px;
    }
}

@media (max-width: 575.98px) {
    .mmg-faq-section {
        padding: 60px 0 80px;
    }

    .mmg-faq-question {
        padding: 12px 44px 12px 14px;
    }

    .mmg-faq-answer {
        padding: 0 44px 12px 14px;
    }

    .mmg-faq-icon {
        right: 14px;
    }
}