/* Use Roboto for all text and form controls */ /* Feedback Section - pixel-perfect testimonials under Trusted Brands */ .fb-section { background: #ffffff; padding: 24px 0 32px; } .fb-wrap { max-width: 1100px; width: 92%; margin: 0 auto; } .fb-grid { display: grid; grid-template-columns: repeat(3, 360px); gap: 28px; justify-content: center; } .fb-card { background: #fff; border: 1px solid #e6e8ee; border-radius: 20px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06); padding: 36px 28px 28px; height: 240px; display: flex; flex-direction: column; justify-content: space-between; } .fb-quote { color: #111827; font-size: 14px; line-height: 22px; text-align: center; margin: 0 6px; } .fb-author { display: flex; align-items: center; justify-content: flex-start; gap: 14px; } .fb-dot { width: 22px; height: 22px; background: #000; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .fb-author-info { display: grid; gap: 4px; } .fb-name { font-size: 12px; font-weight: 900; letter-spacing: 0.6px; color: #101223; } .fb-role { font-size: 12px; color: #6b7280; } .fb-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; } .fb-page-dot { width: 8px; height: 8px; border-radius: 999px; background: #cfd3dc; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); border: none; padding: 0; cursor: pointer; } .fb-page-dot.active { background: #8b90a0; } /* Responsiveness to maintain proportions on smaller viewports */ @media (max-width: 1200px) { .fb-grid { grid-template-columns: repeat(3, 320px); } .fb-card { height: 230px; } } @media (max-width: 1024px) { .fb-grid { grid-template-columns: repeat(2, 320px); } } @media (max-width: 640px) { .fb-grid { grid-template-columns: 1fr; } .fb-card { height: auto; padding: 28px 22px; } } /* Carousel structure for testimonials */ .fb-viewport { overflow: hidden; position: relative; } .fb-track { display: flex; width: 100%; transition: transform .5s ease; will-change: transform; } .fb-slide { min-width: 100%; box-sizing: border-box; } /* Each slide lays out three cards on desktop */ .fb-slide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; justify-content: center; padding: 2px; } @media (max-width: 1200px) { .fb-slide { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Keep 3 cards in a single row for tablet 1024x1366 */ @media (max-width: 992px) { .fb-slide { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .fb-slide { grid-template-columns: 1fr; } } html, body, input, textarea, select, button { font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* Prevent horizontal scrolling and content shifting */ html, body { overflow-x: hidden; width: 100%; max-width: 100%; position: relative; } /* Ensure all containers don't exceed viewport width */ * { max-width: 100%; box-sizing: border-box; } /* Prevent horizontal overflow on all sections */ .relative, .absolute, .w-full, .max-w-7xl, .max-w-4xl, .max-w-2xl { max-width: 100%; overflow-x: hidden; } /* Add this to your or main.css */ .scrolling-tags-container { position: relative; overflow: hidden; width: 100%; max-width: 100%; height: 40px; /* Adjust as needed */ } .scrolling-tags { display: flex; gap: 1rem; min-width: max-content; align-items: center; /* continuous loop: duplicate content and translate left by 50% */ animation: tags-scroll var(--tags-duration, 100s) linear infinite; will-change: transform; } @keyframes tags-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* pause for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .scrolling-tags { animation: none; } } /* optional: visual pause on hover/focus (JS also handles this) */ .scrolling-tags-container:hover .scrolling-tags, .scrolling-tags-container:focus-within .scrolling-tags { animation-play-state: paused; } /* Hero fade-in / staggered reveal */ .hero-animate .stagger-item { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(.22, .9, .37, 1), transform 600ms cubic-bezier(.22, .9, .37, 1); will-change: opacity, transform; } .hero-animate.in-view .stagger-item { opacity: 1; transform: translateY(0); } /* small stagger delays (adjust count/order if you change markup) */ .hero-animate.in-view .stagger-item:nth-of-type(1) { transition-delay: 0ms; } .hero-animate.in-view .stagger-item:nth-of-type(2) { transition-delay: 90ms; } .hero-animate.in-view .stagger-item:nth-of-type(3) { transition-delay: 170ms; } .hero-animate.in-view .stagger-item:nth-of-type(4) { transition-delay: 250ms; } .hero-animate.in-view .stagger-item:nth-of-type(5) { transition-delay: 330ms; } @media (prefers-reduced-motion: reduce) { .hero-animate .stagger-item, .trusted-animate .stagger { transition: none; transform: none; opacity: 1; } } /* Industry Spotlights marquee + misalignment */ .spot-marquee { overflow: hidden; width: 100%; max-width: 100%; margin: 0 0 20px 0; } .spot-track { display: flex; gap: 0.5rem; align-items: center; min-width: max-content; /* The animation moves the whole track left by 50% (we duplicate content for seamless loop) */ animation: spot-scroll var(--spot-duration, 20s) linear infinite; } .spot-track img { object-fit: cover; border-radius: 0.75rem; display: block; } @keyframes spot-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* responsive heights */ .spot-img { height: 200px; } @media (min-width: 640px) { .spot-img { height: 300px; } } @media (min-width: 1024px) { .spot-img { height: 470px; } } /* Slight misalignment (top row / bottom row differ) */ .spot-marquee.top .spot-img:nth-child(odd) { transform: translateY(0px); } .spot-marquee.top .spot-img:nth-child(even) { transform: translateY(0px); } .spot-marquee.bottom .spot-img:nth-child(odd) { transform: translateY(0px); } .spot-marquee.bottom .spot-img:nth-child(even) { transform: translateY(0px); } /* change speed per row */ .spot-marquee.top .spot-track { --spot-duration: 22s; } .spot-marquee.bottom .spot-track { --spot-duration: 18s; } /* Trusted section reveal (fade up) */ .trusted-animate { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.22, .9, .37, 1), transform 700ms cubic-bezier(.22, .9, .37, 1); will-change: opacity, transform; } .trusted-animate.in-view { opacity: 1; transform: translateY(0); } /* Staggered child fade for a nicer reveal of the whole section */ .trusted-animate .stagger { opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(.22, .9, .37, 1), transform 600ms cubic-bezier(.22, .9, .37, 1); } .trusted-animate.in-view .stagger { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .trusted-animate { transition: none; transform: none; opacity: 1; } .trusted-animate .stagger { transition: none; transform: none; opacity: 1; } } /* Drag-to-scroll helper for carousels */ .trusted-animate .overflow-x-auto.dragging { cursor: grabbing; cursor: -webkit-grabbing; user-select: none; -webkit-user-select: none; -ms-user-select: none; } /* Hide horizontal scrollbar for the testimonials carousel */ .trusted-animate .overflow-x-auto { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .trusted-animate .overflow-x-auto::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ height: 0; } /* Product carousel: hide scrollbar + drag-to-scroll helper */ .products-carousel { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ touch-action: pan-y; /* allow vertical page scrolling while enabling our horizontal drag handling */ } .products-carousel::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ height: 0; } .products-carousel.dragging { cursor: grabbing; cursor: -webkit-grabbing; user-select: none; -webkit-user-select: none; -ms-user-select: none; } /* Prevent dragging / selection / touch-callout on product images */ .products-carousel img { -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Brand logos marquee */ .brand-marquee { overflow: hidden; width: 100%; max-width: 100%; } .brand-track { display: flex; gap: 2rem; align-items: center; min-width: max-content; /* loop: duplicate content and move left by 50% for seamless scroll */ animation: brand-scroll 90s linear infinite; } .brand-track img { display: block; height: 1.5rem; /* matches existing .h-6 */ opacity: .8; transition: opacity .15s; -webkit-user-drag: none; } .brand-track img:hover { opacity: 1; } /* Your Vision grid: force 3 columns on tablet and up */ @media (min-width: 768px) { .vision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @keyframes brand-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } } nav.main-nav { position: relative; z-index: 70; /* make sure nav sits above other header elements */ transition: background-color .22s ease, color .18s ease; font-weight: normal; } /* Ensure navigation links and logo have normal font weight */ nav.main-nav a, nav.main-nav img { font-weight: normal; } /* Hover (and .scrolled) -> white background, dark links */ nav.main-nav:hover, nav.main-nav.scrolled { background-image: none !important; background-color: #ffffff !important; } /* Make nav links switch color on hover / scrolled */ nav.main-nav a { transition: color .18s ease, opacity .18s ease; } nav.main-nav:hover a, nav.main-nav.scrolled a { color: #111 !important; opacity: 0.95; } /* Logo swap: show light/white logo on dark, colored logo on white */ nav.main-nav .logo-white { display: block; } nav.main-nav .logo-color { display: none; } nav.main-nav:hover .logo-white, nav.main-nav.scrolled .logo-white { display: none; } nav.main-nav:hover .logo-color, nav.main-nav.scrolled .logo-color { display: block; } /* Search icon: invert on dark background, normal on white */ nav.main-nav .search-icon { filter: brightness(0) invert(1); transition: filter .18s ease; } nav.main-nav:hover .search-icon, nav.main-nav.scrolled .search-icon { filter: brightness(0) saturate(100%) invert(0); } /* Fix: Turn search icon black when hovering the main navigation */ nav.main-nav:hover #searchTrigger, nav.main-nav:hover #searchTrigger svg, nav.main-nav:hover #searchTrigger svg path { color: #000 !important; stroke: #000 !important; } /* Fix: Turn search icon black when main navigation is scrolled */ nav.main-nav.scrolled #searchTrigger, nav.main-nav.scrolled #searchTrigger svg, nav.main-nav.scrolled #searchTrigger svg path { color: #000 !important; stroke: #000 !important; } /* Mobile menu button: white on dark background, black on white background */ nav.main-nav button[onclick="toggleMobileMenu()"] { color: white; transition: color .18s ease; } nav.main-nav:hover button[onclick="toggleMobileMenu()"], nav.main-nav.scrolled button[onclick="toggleMobileMenu()"] { color: #111 !important; } /* Ensure hover works when child elements receive pointer events */ nav.main-nav, nav.main-nav * { pointer-events: auto; } /* Accessibility: keyboard focus triggers same visual */ nav.main-nav:focus-within { background-color: #fff !important; } /* Mega Menu Styles */ .mega-menu-global { position: absolute; width: 100%; background: #fff; box-shadow: 0 1px 0 #ececec, 0 8px 32px rgba(0, 0, 0, 0.06); border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; transition: opacity .22s, visibility .22s; z-index: 100; } .mega-menu-global.active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .mega-menu-inner-container { padding: 2.5rem 3rem; } .mega-menu-global ul { list-style: none; margin: 0; padding: 0; } .mega-menu-global a { font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 1.125rem; color: #45475a; text-decoration: none; transition: color .18s; padding-bottom: 0.5rem; display: inline-block; } .mega-menu-global a:hover { color: #bf2026; } .mega-menu-global a.active, .mega-menu-global a[aria-current="page"] { border-bottom: 2px solid #101223; color: #101223; } nav.main-nav .lg\:flex a:first-child { position: relative; transition: color .22s cubic-bezier(.22, .9, .37, 1); } nav.main-nav .lg\:flex a:first-child.home-highlight, nav.main-nav .lg\:flex a:first-child:hover { color: #bf2026 !important; } nav.main-nav .lg\:flex a:first-child.home-highlight::after, nav.main-nav .lg\:flex a:first-child:hover::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: #bf2026; border-radius: 2px; opacity: 1; transform: scaleX(1); transition: opacity .22s, transform .22s cubic-bezier(.22, .9, .37, 1); } nav.main-nav .lg\:flex a:first-child::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: #bf2026; border-radius: 2px; opacity: 0; transform: scaleX(0); transition: opacity .22s, transform .22s cubic-bezier(.22, .9, .37, 1); } /* Apply animated underline and color to all desktop nav links */ nav.main-nav .lg\:flex a { position: relative; transition: color .22s cubic-bezier(.22, .9, .37, 1); } /* Highlight on hover/focus */ nav.main-nav .lg\:flex a:hover, nav.main-nav .lg\:flex a:focus { color: #bf2026 !important; } /* Animated underline on hover/focus */ nav.main-nav .lg\:flex a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: #bf2026; border-radius: 2px; opacity: 0; transform: scaleX(0); transition: opacity .22s, transform .22s cubic-bezier(.22, .9, .37, 1); } nav.main-nav .lg\:flex a:hover::after, nav.main-nav .lg\:flex a:focus::after { opacity: 1; transform: scaleX(1); } /* Video optimizations for mobile */ video { /* Ensure video scales properly on all devices */ max-width: 100%; height: auto; /* Improve video rendering performance */ transform: translateZ(0); -webkit-transform: translateZ(0); /* Prevent video from causing layout shifts */ background-color: #000; } /* Mobile-specific height adjustments for hero section */ @media (max-width: 1023px) { /* Increase hero video height on mobile to fit content */ video[src*="LEDWALL_ARANETA_COVER.mp4"] { height: auto !important; /* Let content determine height */ min-height: 100vh; max-height: none; object-position: center; object-fit: cover; /* Mobile video optimizations */ width: 100%; display: block; /* Ensure video doesn't interfere with touch interactions */ pointer-events: none; } /* Ensure hero content stays within the taller image */ .hero-content { position: absolute !important; inset: 0; height: auto; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding: 8rem 1.5rem 2rem 1.5rem; margin-top: 0; } /* Adjust hero text sizing for better mobile fit */ .hero-animate h1 { font-size: 2rem !important; line-height: 1.2 !important; margin-bottom: 1.5rem; } .hero-animate p { font-size: 1rem; margin-bottom: 1rem; } .hero-animate ul { margin-top: 1.5rem; margin-bottom: 2rem; } .hero-animate button { margin-top: 1rem; } } /* Smaller phones */ @media (max-width: 640px) { video[src*="LEDWALL_ARANETA_COVER.mp4"] { min-height: 100vh; height: auto !important; } .hero-content { padding: 7rem 1rem 2rem 1rem; justify-content: flex-start; min-height: 100vh; } } } .hero-animate h1 { font-size: 1.75rem !important; line-height: 1.1 !important; margin-bottom: 1rem; } .hero-animate p { font-size: 0.9rem; margin-bottom: 0.8rem; } .hero-animate ul { margin-top: 1rem; margin-bottom: 1.5rem; } .hero-animate ul li { font-size: 0.9rem; margin-bottom: 0.3rem; } .hero-animate button { font-size: 0.9rem; padding: 0.75rem 1.5rem; margin-top: 0.5rem; } } /* iPhone 13 Pro specific adjustments */ @media (max-width: 428px) and (max-height: 926px) { video[src*="LEDWALL_ARANETA_COVER.mp4"] { min-height: 100vh; height: auto !important; } .hero-content { padding: 6rem 1rem 1.5rem 1rem; min-height: 100vh; } .hero-animate h1 { font-size: 1.6rem !important; line-height: 1.1 !important; margin-bottom: 0.8rem; } .hero-animate p { font-size: 0.85rem; margin-bottom: 0.6rem; } .hero-animate ul { margin-top: 0.8rem; margin-bottom: 1.2rem; } .hero-animate ul li { font-size: 0.85rem; margin-bottom: 0.2rem; } .hero-animate button { font-size: 0.85rem; padding: 0.6rem 1.2rem; margin-top: 0.3rem; } } @media (min-width: 1024px) { .hero-content { position: absolute !important; inset: 0; padding-top: 160px; /* Moves content below logo */ padding-left: 80px; /* Positions content from left edge */ display: flex; align-items: flex-start; justify-content: flex-start; } /* change to 48rem */ .hero-animate { max-width: 60rem; } } /* Desktop portrait orientation: ensure hero fills viewport so content isn't cut off */ @media (min-width: 1024px) and (orientation: portrait) { /* Grow hero image/container to at least viewport height on portrait */ video[src*="LEDWALL_ARANETA_COVER.mp4"] { height: 60vh !important; min-height: 60vh !important; object-fit: cover; } .hero-section-container, .hero-content { min-height: 60vh !important; } } /* Desktop landscape: explicitly shorten hero height (avoids needing Tailwind rebuild) update 1000px to 100px */ @media (min-width: 1024px) and (orientation: landscape) { video[src*="LEDWALL_ARANETA_COVER.mp4"] { height: 1000px !important; /* adjust to taste */ min-height: 1000px !important; object-fit: cover; } .hero-section-container, .hero-content { min-height: 800px !important; } } /* Tablet / iPad ranges */ /* Generic tablets: 768–1023px (covers iPad, iPad Air, many Android tablets) */ @media (min-width: 768px) and (max-width: 1180px) { video[src*="LEDWALL_ARANETA_COVER.mp4"] { height: vh !important; min-height: 85vh !important; object-fit: cover; } .hero-section-container, .hero-content { min-height: 85vh !important; } } /* iPad Pro portrait (12.9" and similar): 1024–1366px wide in portrait min-height: 75vh !important; */ @media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) { video[src*="LEDWALL_ARANETA_COVER.mp4"] { height: 75vh !important; min-height: 75vh !important; object-fit: cover; } .hero-section-container, .hero-content { min-height: 45vh !important; } } /* iPad Pro 11" landscape and similar: slightly shorter than desktop */ @media (min-width: 1024px) and (max-width: 1194px) and (orientation: landscape) { video[src*="LEDWALL_ARANETA_COVER.mp4"] { height: 80vh !important; min-height: 80vh !important; object-fit: cover; } .hero-section-container, .hero-content { min-height: 80vh !important; } } /* Force hero checkmarks to be white globally */ .hero-animate ul li span:first-child { color: white !important; } /* Additional specificity for checkmarks */ .hero-animate ul li span:first-child, .hero-animate ul li span:first-child * { color: white !important; } /* Specific checkmark class styling */ .checkmark { color: white !important; font-weight: bold; } /* Force checkmark color on all devices */ .hero-animate .checkmark { color: white !important; } /* Mobile adjustments */ @media (max-width: 1023px) { .hero-content { position: absolute !important; inset: 0; padding: 8rem 1.5rem 2rem 1.5rem; /* Increased top padding for logo */ display: flex; flex-direction: column; justify-content: flex-start; min-height: 100vh; } .hero-animate { max-width: 100%; } .hero-image-responsive { height: auto !important; min-height: 100vh; object-position: center; object-fit: cover; } /* Ensure hero section container has enough height min-height: 100vh; */ .relative.w-full>.relative.w-full { min-height: 20vh; } /* Force hero section to be tall enough for all content Update to 120 to 20vh */ .hero-section-container { min-height: 20vh !important; } /* Prevent horizontal scrolling on mobile */ body { overflow-x: hidden !important; position: relative; width: 100vw; max-width: 100vw; } /* Fix any elements that might cause horizontal overflow */ .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Ensure all containers respect viewport width */ .max-w-7xl, .max-w-4xl, .max-w-2xl, .max-w-3xl { /*max-width: calc(100vw - 2rem) !important; */ margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } /* Mobile Mega Menu Styles - Matching React Implementation */ .mobile-mega-menu { transition: all 0.3s ease-in-out; max-height: 0; overflow: hidden; opacity: 0; } .mobile-mega-menu:not(.hidden) { max-height: 800px; opacity: 1; } .mobile-nav-item svg { transition: transform 0.3s ease-in-out; } .mobile-nav-item svg.rotate-180 { transform: rotate(180deg); } /* Mobile menu styling matching React implementation */ .mobile-nav-item button, .mobile-nav-item a { min-height: 48px; display: flex; align-items: center; width: 100%; border: none; background: none; font-family: inherit; cursor: pointer; } /* Mobile menu positioning and styling - Full screen */ #mobileMenu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 9999; background: white; overflow-y: auto; display: flex; flex-direction: column; } #mobileMenu.hidden { display: none !important; } /* Ensure mobile menu is always on top */ #mobileMenu:not(.hidden) { display: flex !important; } /* Text styling matching React implementation */ #mobileMenu span, #mobileMenu a { font-family: 'Roboto', Helvetica, Arial, sans-serif; font-weight: 400; } /* Hover effects matching React implementation */ .mobile-nav-item button:hover, .mobile-nav-item a:hover { background-color: #f9fafb; } /* Submenu items styling */ .mobile-mega-menu a { font-size: 16px; line-height: 1.5; text-decoration: none; color: #374151; padding-left: 1rem; /* 16px left padding for all submenu items */ } .mobile-mega-menu a:hover { color: #ef4444; } /* Ensure proper indentation for submenu items */ .mobile-mega-menu .flex.flex-col.gap-3 a { padding-left: 1rem; } .mobile-mega-menu .flex.flex-col.gap-2 a { padding-left: 1rem; } /* Ensure mobile menu content takes full width */ #mobileMenu .flex.flex-col { width: 100%; min-height: 100%; } /* Full width for mobile menu items */ .mobile-nav-item { width: 100%; } /* Ensure mobile menu header is properly positioned */ #mobileMenu .flex.items-center.justify-between { flex-shrink: 0; } /* Ensure mobile menu content area is scrollable */ #mobileMenu .flex.flex-col.flex-1 { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Mobile menu responsive adjustments */ @media (max-width: 1024px) { #mobileMenu { display: flex; } #mobileMenu.hidden { display: none; } } /* Force hero checkmarks to be white on mobile */ .hero-animate ul li span:first-child { color: white !important; } /* Additional specificity for checkmarks */ .hero-animate ul li span:first-child, .hero-animate ul li span:first-child * { color: white !important; } /* Force hero checkmarks to be white */ .hero-animate ul li span:first-child { color: white !important; } /* Additional specificity for checkmarks */ .hero-animate ul li span:first-child, .hero-animate ul li span:first-child * { color: white !important; } } /* Tablets (e.g., iPad widths 820–1023): sync container with image to avoid gray bar UPdate change to 85vh to 30vh */ @media (min-width: 820px) and (max-width: 1023px) { /* Pick your desired tablet hero height */ video[src*="LEDWALL_ARANETA_COVER.mp4"] { height: 85vh !important; min-height: 85vh !important; object-fit: cover; } .hero-section-container, .hero-content { min-height: 30vh !important; /* overrides the 120vh mobile rule */ } }