/* Global fix for Elementor headings and text (forces white text on dark backgrounds) */ h1, h2, h3, h4, h5, h6, .elementor-heading-title, .elementor-heading-title p, .elementor-heading-title strong, .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor strong { color: #ffffff !important; } /* Reset for testing */ body { margin: 0; font-family: 'Helvetica Neue', Arial, sans-serif; background: #0a0a0a; color: #fff; } .custom-hero-container { display: flex; width: 100vw; height: 80vh; margin-left: calc(-50vw + 50%); overflow: hidden; background: #000; } .hero-section { flex: 1; position: relative; overflow: hidden; /* Slanted container */ transform: skewX(-15deg); border-right: 2px solid #000; } .hero-section:last-child { border-right: none; } /* Adjust first and last to cover the screen edges due to skew */ .hero-section.hero-men { margin-left: -5vw; } .hero-section.hero-women { margin-right: -5vw; } .hero-inner { display: block; position: absolute; top: 0; /* Expand sides to prevent empty gaps when skewing back */ left: -10vw; right: -10vw; bottom: 0; /* Reverse skew for the background/content */ transform: skewX(15deg); background-size: cover; background-position: center; text-decoration: none !important; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.55); transition: background 0.4s ease; z-index: 1; } .hero-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 28px; border: 1px solid #fff; color: #fff !important; border-radius: 6px; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; background: transparent; transition: all 0.4s ease; z-index: 2; /* Prevent text selection */ user-select: none; -webkit-user-select: none; } /* Hover Interactions */ .hero-section:hover .hero-overlay { background: rgba(0, 0, 0, 0.3); /* Brighter overlay */ } /* Zoom the background image smoothly */ .hero-section:hover .hero-inner { transform: skewX(15deg) scale(1.05); } .hero-section:hover .hero-btn { background: #fff; color: #000 !important; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); } /* Responsiveness: Mobile Layout */ @media (max-width: 768px) { .custom-hero-container { flex-direction: column; height: auto; margin-left: 0; width: 100%; } .hero-section { transform: none; margin: 0 !important; height: 33.333vh; /* Split 100vh into 3 */ min-height: 250px; border-right: none; border-bottom: 2px solid #000; } .hero-section:last-child { border-bottom: none; } .hero-inner { transform: none; left: 0; right: 0; } /* Adjust hover state for mobile without skew */ .hero-section:hover .hero-inner { transform: scale(1.05); } }