/* ========================================================= product-detail.css - Product detail pages: video hero (same structure as index hero) - Fix: .feature-list not showing (scoped ONLY to product pages) ========================================================= */ /* Add this class on product pages: ... */ /* ===== Video Hero (same idea as index .hero-section) ===== */ .product-hero-section{ position: relative; height: 55vh; width: 100%; min-height: 420px; display: flex; align-items: center; overflow: hidden; padding: 0; margin: 0; margin-top: 40px; /* match your index spacing */ } .product-hero-section .video-background{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .product-hero-section .video-background video{ position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; object-position: center 60%; } .product-hero-section .hero-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,0.35); } .product-hero-section .hero-content{ position: relative; z-index: 2; color: #fff; text-align: center; width: 100%; } .product-hero-section .hero-title{ font-size: 2.8rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,0.45); } .product-hero-section .hero-subtitle{ font-size: 1.2rem; margin-bottom: 0; opacity: 0.95; text-shadow: 0 2px 10px rgba(0,0,0,0.45); } @media (max-width: 768px){ .product-hero-section{ height: 48vh; min-height: 360px; margin-top: 34px; /* match your mobile navbar spacing */ } .product-hero-section .hero-title{ font-size: 2.1rem; } .product-hero-section .hero-subtitle{ font-size: 1rem; } } /* ===== Fix: feature-list not showing (scoped to product pages only) ===== */ body.product-detail-page ul.feature-list{ list-style: none !important; padding-left: 0 !important; margin: 0.9rem 0 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; } body.product-detail-page ul.feature-list > li{ display: block !important; position: relative !important; padding-left: 1.6rem !important; margin: 0.45rem 0 !important; line-height: 1.6 !important; color: var(--text-color, #333) !important; visibility: visible !important; opacity: 1 !important; } body.product-detail-page ul.feature-list > li::before{ content: "✓" !important; position: absolute !important; left: 0 !important; top: 0.05rem !important; color: var(--primary-color, #0066cc) !important; font-weight: 700 !important; } /* If any overlay was covering text inside cards, force content to the front */ body.product-detail-page .company-info, body.product-detail-page .company-vision, body.product-detail-page .job-detail-content, body.product-detail-page .expertise-card, body.product-detail-page .strength-feature-card{ position: relative; z-index: 2; }