/* Custom Fixes for Header Visibility and Overlap */ /* 1. Force the header style that should be applied on scroll. */ /* The template hides the header when does NOT have the .scrolled class. We target the header's appearance when the body lacks that class (the initial state) */ body:not(.scrolled) #header { /* These properties usually control the header's color/opacity/visibility in the default state. We force them to look like the 'scrolled' state, ensuring the header is solid/visible. */ background: rgba(4, 11, 20, 0.9) !important; /* Forces a solid background */ color: white !important; /* Ensures text is visible */ height: 70px !important; /* Ensures a consistent height */ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important; } /* 2. Ensure content starts below the fixed header on all pages (excluding the Home page hero) */ .main { padding-top: 80px !important; } /* 3. Ensure the hero section on the home page still starts at the very top */ #hero { padding-top: 0 !important; }