/* Modern Interactive Dark Theme */\n\n/* Interactive Elements */\n.card { transition: all 0.3s ease; cursor: pointer; }\n.card:hover { transform: scale(1.02) translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }\n\nnav a { transition: all 0.3s ease; }\nnav a:hover { transform: scale(1.05); }\n\n.btn-primary { transition: all 0.3s ease; position: relative; overflow: hidden; }\n.btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s; }\n.btn-primary:hover::before { left: 100%; }\n\n/* Parallax Background */\n.header-bg { transition: transform 0.5s ease; }\nheader:hover .header-bg { transform: scale(1.1); }\n\n/* Smooth Scroll */\nhtml { scroll-behavior: smooth; }\n\n/* Loading Animation */\n@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\n.fade-in { animation: fadeInUp 0.6s ease forwards; }\n\n/* Auto-scroll images */\n@keyframes scroll {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n.scroll-container { display: flex; }\n.animate-scroll { animation: scroll 30s linear infinite; }\n.scroll-container:hover { animation-play-state: paused; }\n.image-card { flex-shrink: 0; transition: transform 0.3s ease; }\n.image-card:hover { transform: scale(1.05); }\n\n/* Responsive Modern Grid */\n@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }