/* Smooth transition when background changes */ .transition { transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* Style applied when navbar is scrolled */ .navbar-scrolled { background-color: #212121 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* Optional: change brand text color when scrolled */ .navbar-scrolled .navbar-brand span { color: #f2f2f2 !important; } .navbar-brand span { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 1.25rem; } .hero { background-image: url('assets/mobo-workers.jpg'); background-size: cover; background-position: center; height: 520px; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; } @media (max-width: 576px) { .hero { height: 400px; } } .hero-content { position: relative; z-index: 2; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .overlay-dark { background-color: rgba(0, 0, 0, 0.45); } .overlay-light { background-color: rgba(255, 255, 255, 0.05); }