Header with Text and Slideshow

body { margin: 0; padding: 0; font-family: Arial, sans-serif; }

.header-container { display: flex; align-items: center; width: 100%; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 0 20px; box-sizing: border-box; position: sticky; top: 0; z-index: 1000; }

.text-section { flex: 1; display: flex; align-items: center; justify-content: flex-start; }

.image-section { flex: 0 0 120px; position: relative; overflow: hidden; height: 60px; border-radius: 8px; margin-left: 20px; }

.image-section img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s ease-in-out; opacity: 0; border-radius: 8px; }

.image-section img.active { opacity: 1; }

/* Gradient Rainbow Text */ .rainbow-text { font-size: 1.8rem; font-weight: bold; background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff80, #0080ff, #8000ff, #ff0080); background-size: 400% 400%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: rainbowShift 3s ease-in-out infinite; text-shadow: 0 0 20px rgba(255,255,255,0.3); }

@keyframes rainbowShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Navigation placeholder */ .nav-section { flex: 1; display: flex; justify-content: center; align-items: center; }

.nav-links { display: flex; gap: 30px; }

.nav-links a { color: white; text-decoration: none; font-weight: 500; transition: color 0.3s ease; }

.nav-links a:hover { color: #ffff00; }

/* Responsive Design */ @media (max-width: 768px) { .header-container { height: 60px; padding: 0 10px; }

.rainbow-text { font-size: 1.2rem; }

.image-section { flex: 0 0 80px; height: 40px; margin-left: 10px; }

.nav-links { gap: 15px; }

.nav-links a { font-size: 0.9rem; } }

@media (max-width: 480px) { .nav-section { display: none; }

.rainbow-text { font-size: 1rem; }