Fire Lighting | Seal Fuels

.hero { position: relative; min-height: 550px; display: flex; align-items: center; overflow: hidden; } /* Hero Slideshow */ .hero-slideshow { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: heroFade 18s infinite; } .hero-slide:nth-child(1) { animation-delay: 0s; } .hero-slide:nth-child(2) { animation-delay: 6s; } .hero-slide:nth-child(3) { animation-delay: 12s; } @keyframes heroFade { 0% { opacity: 0; } 5% { opacity: 1; } 33% { opacity: 1; } 38% { opacity: 0; } 100% { opacity: 0; } } /* Hero Overlay (50% black) */ .hero::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1; } /* Hero Container - IMPORTANT: z-index: 2 puts content above overlay */ .hero .container { position: relative; z-index: 2; max-width: 1400px; padding-top: 60px; padding-bottom: 60px; display: grid; grid-template-columns: 1fr 1fr; } .hero-content { color: white; } /* Hero Badge */ .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 500; margin-bottom: 24px; border: 1px solid rgba(255,255,255,0.1); } .hero-badge span { color: var(--seal-orange-light); } /* Hero Heading */ .hero h1 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'DM Sans', sans-serif; font-size: 56px; font-weight: 800; line-height: 1.1; margin-bottom: 24px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #ffffff; } .hero h1 .highlight { color: var(--seal-orange-light); } /* Hero Paragraph */ .hero p { font-size: 18px; color: #ffffff; margin-bottom: 36px; max-width: 500px; line-height: 1.7; text-shadow: 0 1px 3px rgba(0,0,0,0.3); } /* Hero CTAs */ .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }