Innovation Redefined

Discover the future of technology

★

Design

Beautifully crafted for every detail

⚙

Performance

Power meets efficiency

📞

Innovation

Leading edge technology

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'San Francisco', sans-serif; color: #333; line-height: 1.6; } header { display: flex; align-items: center; padding: 20px 5%; background: #fff; position: fixed; width: 100%; z-index: 1000; } .logo { font-size: 24px; font-weight: bold; flex: 1; } .desktop-nav ul { display: flex; list-style: none; gap: 30px; } .desktop-nav a { text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s; } .desktop-nav a:hover { color: #555; } .menu-toggle { display: none; font-size: 24px; cursor: pointer; } .hero { height: 100vh; background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url('hero-bg.jpg'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; } .jumbotron h1 { font-size: 48px; margin-bottom: 20px; } .jumbotron p { font-size: 18px; color: #666; margin-bottom: 30px; } .jumbotron button { padding: 12px 30px; background: #000; color: #fff; border: none; border-radius: 25px; font-size: 16px; cursor: pointer; transition: background 0.3s; } .jumbotron button:hover { background: #1a1a1a; } .features { padding: 50px 5%; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 80px; } .feature-card { background: #f5f5f5; padding: 30px; border-radius: 15px; text-align: center; transition: transform 0.2s; } .feature-card:hover { transform: translateY(-5px); } .feature-card .icon { font-size: 48px; color: #000; margin-bottom: 20px; } footer { background: #333; color: #fff; padding: 40px 5%; text-align: center; } .footer-links ul { display: flex; gap: 20px; margin-bottom: 20px; } .footer-links a { color: #fff; text-decoration: none; } .social-icons a { color: #fff; font-size: 24px; margin: 0 10px; } /* Mobile menu styles */ .mobile-nav { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background: #fff; transition: right 0.3s; padding: 40px; } .mobile-nav.active { right: 0; } .mobile-nav .close-btn { position: absolute; top: 20px; right: 20px; font-size: 30px; cursor: pointer; } .mobile-nav ul { list-style: none; padding: 20px 0; } .mobile-nav a { display: block; padding: 10px 0; color: #333; font-weight: 600; } /* Media queries */ @media (max-width: 768px) { .desktop-nav { display: none; } .menu-toggle { display: block; } } document.querySelector('.menu-toggle').addEventListener('click', () => { document.body.classList.add('menu-active'); }); document.querySelector('.close-btn').addEventListener('click', () => { document.body.classList.remove('menu-active'); }); window.addEventListener('click', (e) => { if (e.target.classList.contains('menu-active-overlay')) { document.body.classList.remove('menu-active'); } });