/* J&V Modern Redesign 2.4.3 — foreground contrast, darker bridge and wider CTA */ :root { --jvmr-gold: #f6cf58; --jvmr-deep: #071226; --jvmr-text: #f5f7fb; } /* ====================================================================== HERO → CONTENT: one full-viewport, symmetric and blurred handoff ====================================================================== */ /* The bridge lives directly under , therefore no theme section can clip its right or left edge. Extra viewport width + blur remove the last visible seam under the hero photograph. */ #jvmr-hero-bridge { position: absolute; left: 50%; width: calc(100vw + 360px); transform: translateX(-50%); pointer-events: none; z-index: 2; opacity: .96; overflow: visible; filter: blur(18px); background: radial-gradient(ellipse 43% 80% at 8% 48%, rgba(52, 104, 181, .24) 0%, rgba(31, 69, 127, .105) 43%, transparent 76%), radial-gradient(ellipse 43% 80% at 92% 48%, rgba(52, 104, 181, .24) 0%, rgba(31, 69, 127, .105) 43%, transparent 76%), radial-gradient(ellipse 70% 74% at 50% 46%, rgba(47, 91, 158, .14) 0%, rgba(27, 58, 108, .07) 48%, transparent 79%), linear-gradient( to bottom, rgba(16, 26, 47, 0) 0%, rgba(16, 26, 47, .20) 16%, rgba(17, 31, 57, .74) 37%, rgba(18, 36, 68, .48) 61%, rgba(18, 36, 68, .18) 82%, rgba(16, 26, 47, 0) 100% ); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); } #jvmr-hero-bridge::before, #jvmr-hero-bridge::after { content: ""; position: absolute; pointer-events: none; } #jvmr-hero-bridge::before { inset: -34px -8vw; border-radius: 50%; background: radial-gradient(ellipse 72% 48% at 50% 50%, rgba(50, 96, 168, .12), transparent 75%); filter: blur(24px); } #jvmr-hero-bridge::after { left: 5%; right: 5%; top: 35%; height: 42%; background: linear-gradient(90deg, transparent, rgba(47, 91, 158, .075) 22%, rgba(47, 91, 158, .095) 50%, rgba(47, 91, 158, .075) 78%, transparent); filter: blur(28px); } /* Remove clipping from the legacy wrappers around the first home section. */ body.jvmr-safe-v2.home .tm-main.tm-home, body.jvmr-safe-v2.home .tm-main.tm-home > .tm-centered-content, body.jvmr-safe-v2.home .tm-catalog-block, body.jvmr-safe-v2.home .tm-catalog-block__other { overflow: visible !important; } /* The old local pseudo bridge remains as a very soft supporting layer, but it is wider than the viewport and has identical left/right behaviour. */ body.jvmr-safe-v2.home .tm-main.tm-home > .tm-centered-content::before { left: 50% !important; width: calc(100vw + 360px) !important; height: clamp(600px, 72vh, 920px) !important; transform: translateX(-50%) !important; filter: blur(12px); background: radial-gradient(58% 78% at 50% 18%, rgba(70, 124, 202, .085) 0%, rgba(70, 124, 202, .028) 45%, transparent 78%), radial-gradient(42% 70% at 8% 34%, rgba(56, 108, 187, .105), transparent 76%), radial-gradient(42% 70% at 92% 34%, rgba(56, 108, 187, .105), transparent 76%), linear-gradient( 180deg, #101a2f 0%, rgba(16, 27, 49, .99) 10%, rgba(17, 31, 58, .90) 29%, rgba(18, 36, 68, .62) 54%, rgba(18, 36, 68, .28) 78%, rgba(18, 36, 68, 0) 100% ) !important; } /* The photograph itself fades into the same navy on the full width. */ body.jvmr-safe-v2.home.jvmr-hero-on .tm-banner::after { background: linear-gradient(90deg, rgba(16,26,47,.05), transparent 18%, transparent 82%, rgba(16,26,47,.05)), linear-gradient( to bottom, rgba(16, 26, 47, 0) 0%, rgba(16, 26, 47, .10) 42%, rgba(16, 26, 47, .48) 68%, rgba(16, 26, 47, .86) 88%, #101a2f 100% ) !important; } /* ====================================================================== CASE BUTTONS: visible label + separate arrow lane ====================================================================== */ .jvmr-case-detail-button, .jvmr-case-more-button { box-sizing: border-box !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; width: clamp(226px, 82%, 252px) !important; max-width: 100% !important; min-width: 0 !important; min-height: 56px !important; padding: 8px 62px 8px 20px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; line-height: 1 !important; font-size: clamp(12px, .82vw, 14px) !important; letter-spacing: -.025em !important; } .jvmr-case-more-button { width: clamp(190px, 72%, 220px) !important; } .jvmr-case-detail-button > span:last-child, .jvmr-case-more-button > span:last-child { position: absolute !important; right: 8px !important; top: 50% !important; bottom: auto !important; margin: 0 !important; width: 40px !important; height: 40px !important; flex: 0 0 40px !important; transform: translateY(-50%) !important; } .jvmr-case-detail-button > *, .jvmr-case-more-button > * { min-width: 0; } .jvmr-case-detail-button svg, .jvmr-case-detail-button img, .jvmr-case-more-button svg, .jvmr-case-more-button img { flex: 0 0 auto !important; } /* Fallback colours. JS copies exact values from the quiz block. */ .jvmr-review-kicker { color: rgba(216, 223, 235, .72) !important; opacity: 1 !important; } .jvmr-review-subtitle { color: rgba(222, 228, 239, .80) !important; opacity: 1 !important; } /* ====================================================================== FLOATING QUIZ CTA: quieter glass card, right side, no advertising eyebrow ====================================================================== */ #jvmr-floating-cta { position: fixed; right: 22px; left: auto; bottom: 22px; z-index: 99990; width: min(288px, calc(100vw - 44px)); padding: 15px; border: 1px solid rgba(197, 214, 239, .18); border-radius: 22px; background: radial-gradient(circle at 100% 0%, rgba(91, 137, 205, .18), transparent 48%), linear-gradient(145deg, rgba(32, 53, 85, .88), rgba(17, 31, 56, .86)); box-shadow: 0 16px 46px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(20px) saturate(1.12); backdrop-filter: blur(20px) saturate(1.12); color: var(--jvmr-text); transform: translateY(16px) scale(.985); opacity: 0; visibility: hidden; transition: transform .4s cubic-bezier(.2, .75, .25, 1), opacity .3s ease, visibility .3s ease, border-color .25s ease, box-shadow .25s ease; } #jvmr-floating-cta.is-visible { transform: translateY(0) scale(1); opacity: 1; visibility: visible; } #jvmr-floating-cta:hover { border-color: rgba(216, 228, 246, .28); box-shadow: 0 18px 52px rgba(0, 0, 0, .28), 0 0 36px rgba(65, 111, 181, .09), inset 0 1px 0 rgba(255, 255, 255, .08); } .jvmr-floating-cta__close { position: absolute; top: 9px; right: 9px; width: 27px; height: 27px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .065); color: rgba(255, 255, 255, .70); font: 400 18px/1 Arial, sans-serif; cursor: pointer; } .jvmr-floating-cta__close:hover, .jvmr-floating-cta__close:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; outline: none; } .jvmr-floating-cta__title { margin: 1px 34px 5px 0; color: rgba(255, 255, 255, .96); font-size: 15px; line-height: 1.2; font-weight: 620; letter-spacing: -.018em; } .jvmr-floating-cta__text { margin: 0 34px 12px 0; color: rgba(226, 233, 244, .70); font-size: 12px; line-height: 1.4; } .jvmr-floating-cta__button { width: 100%; min-height: 42px; padding: 5px 6px 5px 15px; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #f7d665, #f3c84a); color: #071226; font: inherit; font-size: 12.5px; line-height: 1.15; font-weight: 720; text-align: left; cursor: pointer; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } .jvmr-floating-cta__button:hover { transform: translateY(-1px); filter: brightness(1.025); box-shadow: 0 8px 20px rgba(246, 207, 88, .14); } .jvmr-floating-cta__arrow { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 31px; border-radius: 50%; background: rgba(255, 255, 255, .86); font-size: 17px; } .jvmr-quiz-pulse { animation: jvmrQuizPulse 1.35s ease-out 1; } @keyframes jvmrQuizPulse { 0% { box-shadow: 0 0 0 0 rgba(246, 207, 88, 0); } 35% { box-shadow: 0 0 0 5px rgba(246, 207, 88, .28), 0 0 48px rgba(246, 207, 88, .18); } 100% { box-shadow: 0 0 0 0 rgba(246, 207, 88, 0); } } #jvmr-floating-cta button:focus-visible, .jvmr-case-detail-button:focus-visible, .jvmr-case-more-button:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; } @media (max-width: 1200px) { .jvmr-case-detail-button { width: min(100%, 232px) !important; min-height: 52px !important; padding-left: 17px !important; padding-right: 57px !important; font-size: 12px !important; } .jvmr-case-more-button { width: min(100%, 202px) !important; } } @media (max-width: 1023px) { #jvmr-floating-cta { display: none !important; } #jvmr-hero-bridge { width: calc(100vw + 180px); opacity: .78; filter: blur(14px); } body.jvmr-safe-v2.home .tm-main.tm-home > .tm-centered-content::before { width: calc(100vw + 180px) !important; } .jvmr-case-detail-button, .jvmr-case-more-button { width: min(100%, 224px) !important; min-width: 0 !important; white-space: nowrap !important; font-size: 11.5px !important; } } @media (prefers-reduced-motion: reduce) { #jvmr-floating-cta, .jvmr-floating-cta__button { transition: none !important; animation: none !important; } } /* ====================================================================== 2.4.2 — keep first-section content above the decorative hero bridge ====================================================================== */ /* The bridge must tint only the background. The first content wrapper is transparent, so lifting it above the bridge preserves the glow while restoring the original contrast of headings, copy, buttons and cards. */ body.jvmr-safe-v2.home .tm-main.tm-home > .tm-centered-content { position: relative !important; z-index: 4 !important; } body.jvmr-safe-v2.home .jvmr-services-foreground { position: relative !important; z-index: 5 !important; isolation: isolate; } body.jvmr-safe-v2.home .jvmr-services-foreground > * { position: relative; z-index: 2; } /* The decorative bridge stays above the hero photograph but below content. */ #jvmr-hero-bridge { z-index: 2; } /* ====================================================================== 2.4.2 — wider, higher and more legible floating quiz card ====================================================================== */ body.jvmr-safe-v2 #jvmr-floating-cta { right: 28px; bottom: 38px; width: min(330px, calc(100vw - 56px)); padding: 18px; border-radius: 24px; } body.jvmr-safe-v2 #jvmr-floating-cta .jvmr-floating-cta__title { margin-right: 38px; font-size: 16px; line-height: 1.18; } body.jvmr-safe-v2 #jvmr-floating-cta .jvmr-floating-cta__text { margin-right: 38px; margin-bottom: 14px; font-size: 13px; line-height: 1.38; } body.jvmr-safe-v2 #jvmr-floating-cta .jvmr-floating-cta__button { box-sizing: border-box !important; width: 100% !important; min-height: 50px !important; padding: 7px 7px 7px 18px !important; gap: 14px !important; font-size: 14px !important; line-height: 1.08 !important; white-space: nowrap !important; } body.jvmr-safe-v2 #jvmr-floating-cta .jvmr-floating-cta__button > span:first-child { min-width: 0; white-space: nowrap; } body.jvmr-safe-v2 #jvmr-floating-cta .jvmr-floating-cta__arrow { width: 36px !important; height: 36px !important; flex-basis: 36px !important; font-size: 19px !important; } /* Native anchor navigation and the JS fallback use the same comfortable viewport offset, keeping the quiz heading below the sticky header. */ #jv-quiz, .tm-quiz-block, .jvmr-page-quiz, .tm-quiz-form, .jv-quiz, [data-quiz] { scroll-margin-top: 140px; } @media (max-height: 760px) and (min-width: 1024px) { body.jvmr-safe-v2 #jvmr-floating-cta { bottom: 24px; width: min(318px, calc(100vw - 48px)); padding: 15px; } } /* ====================================================================== 2.4.3 — true foreground contrast + darker blue bridge ====================================================================== */ /* The bridge is decorative background only. Keeping it below .tm-page prevents it from tinting headings, copy, cards or the “БІЛЬШ ДЕТАЛЬНО” button while preserving the smooth hero handoff. */ body.jvmr-safe-v2 #jvmr-hero-bridge { z-index: 0 !important; opacity: .78 !important; filter: blur(22px) !important; background: radial-gradient(ellipse 44% 82% at 8% 48%, rgba(29, 66, 116, .18) 0%, rgba(23, 52, 93, .075) 46%, transparent 78%), radial-gradient(ellipse 44% 82% at 92% 48%, rgba(29, 66, 116, .18) 0%, rgba(23, 52, 93, .075) 46%, transparent 78%), radial-gradient(ellipse 72% 76% at 50% 46%, rgba(35, 75, 130, .105) 0%, rgba(22, 48, 86, .05) 50%, transparent 80%), linear-gradient( to bottom, rgba(12, 22, 40, 0) 0%, rgba(13, 25, 47, .14) 16%, rgba(15, 31, 59, .56) 39%, rgba(16, 34, 65, .38) 63%, rgba(15, 30, 57, .13) 84%, rgba(12, 22, 40, 0) 100% ) !important; } body.jvmr-safe-v2.home .jvmr-services-foreground, body.jvmr-safe-v2.home .jvmr-services-foreground.jvmr-safe-reveal { position: relative !important; z-index: 8 !important; opacity: 1 !important; filter: none !important; isolation: isolate !important; } body.jvmr-safe-v2.home .jvmr-services-foreground > *, body.jvmr-safe-v2.home .jvmr-services-heading, body.jvmr-safe-v2.home .jvmr-services-subtitle, body.jvmr-safe-v2.home .jvmr-services-more { position: relative !important; z-index: 9 !important; opacity: 1 !important; filter: none !important; } body.jvmr-safe-v2.home .jvmr-services-heading, body.jvmr-safe-v2.home .jvmr-services-heading * { color: #f7f8fb !important; opacity: 1 !important; text-shadow: none !important; } body.jvmr-safe-v2.home .jvmr-services-subtitle, body.jvmr-safe-v2.home .jvmr-services-subtitle * { color: rgba(224, 231, 242, .86) !important; opacity: 1 !important; text-shadow: none !important; } body.jvmr-safe-v2.home .jvmr-services-more, body.jvmr-safe-v2.home .jvmr-services-more * { opacity: 1 !important; filter: none !important; } /* Ensure no reveal animation can leave the first content section muted. */ body.jvmr-safe-v2.home .jvmr-services-foreground .jvmr-safe-reveal, body.jvmr-safe-v2.home .jvmr-services-foreground .jvmr-stagger-card { opacity: 1 !important; filter: none !important; } /* ====================================================================== 2.4.3 — wider floating quiz CTA with a protected arrow lane ====================================================================== */ body.jvmr-safe-v2 #jvmr-floating-cta { width: min(370px, calc(100vw - 56px)) !important; padding: 19px !important; } body.jvmr-safe-v2 #jvmr-floating-cta .jvmr-floating-cta__button { display: grid !important; grid-template-columns: minmax(0, 1fr) 38px !important; align-items: center !important; column-gap: 12px !important; min-height: 52px !important; padding: 7px 7px 7px 18px !important; } body.jvmr-safe-v2 #jvmr-floating-cta .jvmr-floating-cta__button > span:first-child { min-width: 0 !important; width: auto !important; max-width: 100% !important; padding-right: 2px !important; overflow: hidden !important; text-overflow: clip !important; white-space: nowrap !important; font-size: 13.5px !important; line-height: 1.08 !important; } body.jvmr-safe-v2 #jvmr-floating-cta .jvmr-floating-cta__arrow { justify-self: end !important; width: 38px !important; height: 38px !important; min-width: 38px !important; flex: 0 0 38px !important; } @media (max-height: 760px) and (min-width: 1024px) { body.jvmr-safe-v2 #jvmr-floating-cta { width: min(352px, calc(100vw - 48px)) !important; padding: 16px !important; } } /* ====================================================================== 2.4.4 — seamless hero-to-content fade without a separate glow layer ====================================================================== */ /* The previous floating bridge could still expose a horizontal boundary on very wide screens. The handoff now uses one plain full-width vertical fade: the hero ends in #101a2f and the first content background starts in exactly the same colour, then gradually becomes lighter. No radial glow is used. */ body.jvmr-safe-v2.home #jvmr-hero-bridge { display: none !important; } body.jvmr-safe-v2.home .tm-main.tm-home > .tm-centered-content { position: relative !important; isolation: isolate !important; overflow: visible !important; background: transparent !important; } body.jvmr-safe-v2.home .tm-main.tm-home > .tm-centered-content::before { content: "" !important; display: block !important; position: absolute !important; z-index: -1 !important; pointer-events: none !important; top: -122px !important; left: 50% !important; width: calc(100vw + 6px) !important; height: clamp(720px, 82vh, 1040px) !important; transform: translateX(-50%) !important; border: 0 !important; border-radius: 0 !important; opacity: 1 !important; filter: none !important; box-shadow: none !important; -webkit-mask-image: none !important; mask-image: none !important; background: linear-gradient( to bottom, rgba(16, 26, 47, 0) 0, rgba(16, 26, 47, .58) 68px, #101a2f 120px, #101a2f 190px, #111d35 350px, #12223e 540px, rgba(18, 35, 64, .78) 690px, rgba(18, 35, 64, .28) 86%, rgba(18, 35, 64, 0) 100% ) !important; } /* Match the final hero pixels to the first pixels of the content fade. */ body.jvmr-safe-v2.home.jvmr-hero-on .tm-banner::after { background: linear-gradient( to bottom, rgba(16, 26, 47, 0) 0%, rgba(16, 26, 47, .10) 43%, rgba(16, 26, 47, .46) 70%, rgba(16, 26, 47, .84) 88%, #101a2f 100% ) !important; } @media (max-width: 1023px) { body.jvmr-safe-v2.home .tm-main.tm-home > .tm-centered-content::before { top: -92px !important; width: calc(100vw + 4px) !important; height: 720px !important; background: linear-gradient( to bottom, rgba(16, 26, 47, 0) 0, rgba(16, 26, 47, .62) 48px, #101a2f 90px, #101a2f 150px, #111d35 300px, #12223e 470px, rgba(18, 35, 64, .58) 610px, rgba(18, 35, 64, 0) 100% ) !important; } } /* ====================================================================== 2.4.5 — one continuous hero/services surface + fitted services CTA ====================================================================== */ /* * A single full-width atmosphere is painted on the home main wrapper. * Unlike the previous fixed-height layer, this element extends to the end * of the main content, so there is no bottom edge that can become a visible * horizontal colour seam below the service cards. */ body.jvmr-safe-v2.home .tm-main.tm-home { position: relative !important; isolation: isolate !important; background: transparent !important; } body.jvmr-safe-v2.home .tm-main.tm-home::before { content: none !important; display: none !important; } body.jvmr-safe-v2.home .tm-main.tm-home::after { content: "" !important; display: block !important; position: absolute !important; z-index: 0 !important; pointer-events: none !important; top: calc(100vh - 250px) !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; background: linear-gradient( to bottom, rgba(16, 26, 47, 0) 0, rgba(16, 26, 47, .34) 90px, rgba(16, 26, 47, .88) 210px, #101a2f 330px, #111d35 560px, rgba(18, 34, 62, .76) 820px, rgba(18, 35, 64, .38) 1080px, rgba(18, 35, 64, .14) 1320px, rgba(18, 35, 64, 0) 1580px ) !important; } @supports (height: 100svh) { body.jvmr-safe-v2.home .tm-main.tm-home::after { top: calc(100svh - 250px) !important; } } /* Remove the old finite bridge completely. Its fixed bottom edge was the source of the line visible beneath the service slider on wide displays. */ body.jvmr-safe-v2.home .tm-main.tm-home > .tm-centered-content::before, body.jvmr-safe-v2.home #jvmr-hero-bridge { content: none !important; display: none !important; background: none !important; } /* Every real home section remains above the atmosphere. */ body.jvmr-safe-v2.home .tm-main.tm-home > * { position: relative !important; z-index: 2 !important; } /* Legacy wrappers must not paint their own rectangular background or shadow over the continuous layer. */ body.jvmr-safe-v2.home .tm-main.tm-home > .tm-centered-content, body.jvmr-safe-v2.home .tm-catalog-block, body.jvmr-safe-v2.home .tm-catalog-block__other, body.jvmr-safe-v2.home .jvmr-services-foreground { background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* The hero finishes in exactly the same navy used by the continuous layer. */ body.jvmr-safe-v2.home.jvmr-hero-on .tm-banner::after { background: linear-gradient( to bottom, rgba(16, 26, 47, 0) 0%, rgba(16, 26, 47, .08) 38%, rgba(16, 26, 47, .34) 62%, rgba(16, 26, 47, .72) 82%, #101a2f 100% ) !important; } /* "БІЛЬШ ДЕТАЛЬНО" in the services block: a protected text lane and a separate arrow circle. This keeps both elements visible at all desktop widths and prevents the arrow from covering the final letters. */ body.jvmr-safe-v2.home .jvmr-services-more { box-sizing: border-box !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: clamp(270px, 18vw, 310px) !important; max-width: 100% !important; min-width: 270px !important; min-height: 62px !important; padding: 10px 72px 10px 26px !important; white-space: nowrap !important; overflow: visible !important; line-height: 1 !important; font-size: clamp(14px, .95vw, 17px) !important; letter-spacing: -.025em !important; } body.jvmr-safe-v2.home .jvmr-services-more > span:last-child, body.jvmr-safe-v2.home .jvmr-services-more > i:last-child, body.jvmr-safe-v2.home .jvmr-services-more > svg:last-child { position: absolute !important; top: 50% !important; right: 8px !important; bottom: auto !important; left: auto !important; width: 46px !important; height: 46px !important; min-width: 46px !important; flex: 0 0 46px !important; margin: 0 !important; transform: translateY(-50%) !important; } body.jvmr-safe-v2.home .jvmr-services-more > * { min-width: 0 !important; } /* Some theme builds keep the label in a nested span. Reserve the same arrow lane there as well and never allow clipping. */ body.jvmr-safe-v2.home .jvmr-services-more > span:first-child:not(:last-child) { display: block !important; width: auto !important; max-width: 100% !important; overflow: visible !important; white-space: nowrap !important; } @media (max-width: 1200px) { body.jvmr-safe-v2.home .jvmr-services-more { width: 268px !important; min-width: 268px !important; min-height: 58px !important; padding-right: 66px !important; padding-left: 22px !important; font-size: 14px !important; } body.jvmr-safe-v2.home .jvmr-services-more > span:last-child, body.jvmr-safe-v2.home .jvmr-services-more > i:last-child, body.jvmr-safe-v2.home .jvmr-services-more > svg:last-child { width: 42px !important; height: 42px !important; min-width: 42px !important; flex-basis: 42px !important; } } @media (max-width: 1023px) { body.jvmr-safe-v2.home .tm-main.tm-home::after { top: calc(100vh - 180px) !important; background: linear-gradient( to bottom, rgba(16, 26, 47, 0) 0, rgba(16, 26, 47, .44) 70px, rgba(16, 26, 47, .90) 150px, #101a2f 250px, #111d35 430px, rgba(18, 34, 62, .60) 650px, rgba(18, 35, 64, .20) 850px, rgba(18, 35, 64, 0) 1040px ) !important; } body.jvmr-safe-v2.home .jvmr-services-more { width: min(100%, 252px) !important; min-width: 0 !important; min-height: 54px !important; padding: 8px 60px 8px 19px !important; font-size: 13px !important; } } @media (max-width: 767px) { body.jvmr-safe-v2.home .tm-main.tm-home::after { top: calc(100vh - 120px) !important; } }