/* =====================================================================
   Mission 1 Production - mobile / touch fixes
   Is file ko har page me </head> se pehle link kiya gaya hai,
   isliye ye theme ke baqi CSS ke baad lagti hai.
   ===================================================================== */

/* --- 1) Hover par khulne wala text phone par kabhi dikhta hi nahi tha ---
   ("Why Choose Us", "Our Services" waghera ke descriptions opacity:0 the
   aur sirf :hover par aate the. Touch screen par hover hota nahi.) */
@media (hover: none), (max-width: 991.98px) {
    .serv-style4 .item .text {
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

/* --- 2) Phone par cards ki zyada padding / khali jagah kam --- */
@media (max-width: 767.98px) {
    .serv-style4 .item {
        padding: 34px 22px;
    }
    .serv-style4 .item h6.mb-30px {
        margin-bottom: 14px !important;
    }
    .serv-style4 .row.mb-80px,
    .intro-style5 .row.mb-80px {
        margin-bottom: 40px !important;
    }
    .serv-style4 .item .text p:last-child {
        margin-bottom: 0;
    }
}

/* --- 3) Hero ki tagline (PRE + POST PRODUCTION ...) --- */
.vh-tags {
    font-size: clamp(.78rem, 2.9vw, 1rem);
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.9;
    text-transform: uppercase;
}

/* --- 4) Lag kam karne ke liye: phone / tablet par bhaari effects band --- */
@media (max-width: 991.98px), (hover: none) {

    /* desktop-only custom cursor aur neeche ka fixed blur patta */
    .cursor,
    .blur-div {
        display: none !important;
    }

    /* scroll karte waqt har frame par page ke peeche ka blur dobara banta tha */
    .navbar.blur,
    .navbar.nav-scroll {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background-color: rgba(12, 12, 14, .82) !important;
    }
    .vh-marq,
    .mr-tag,
    .mr-sound {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(0, 0, 0, .6) !important;
    }

    /* sections ke peeche 110px blur + hamesha chalne wali animation -> halka gradient */
    .m1-sec::before {
        filter: none !important;
        animation: none !important;
        width: 90vw !important;
        height: 90vw !important;
        background: radial-gradient(circle, var(--glow, #d4202f) 0%, transparent 65%) !important;
        opacity: .14 !important;
    }
    .m1-sec[data-n]::after {
        animation: none !important;
    }
    .lc-sec::before {
        filter: none !important;
        animation: none !important;
    }
}

/* --- 5) Chhoti screen ki layout --- */
@media (max-width: 767.98px) {
    /* lambay shabd (e.g. "commitment") darmiyan se na tootein */
    h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* iPhone par form field par tap karne se page zoom na ho */
    input, select, textarea {
        font-size: 16px;
    }

    /* kuch bhi screen se bahar na nikle */
    img, video, svg, iframe {
        max-width: 100%;
    }
}

/* --- 6) Jinhon ne device me "reduce motion" on rakha hai --- */
@media (prefers-reduced-motion: reduce) {
    .vh-track,
    .m1-marq-track {
        animation: none !important;
    }
}