{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root { --primary: #6a11cb; --secondary: #2575fc; --background: #f9f9f9; --text: #333; --accent: #00c6ff; } body { margin: 0; font-family: 'Inter', sans-serif; scroll-behavior: smooth; background: var(--background); color: var(--text); overflow-x: hidden; } nav { position: fixed; top: 0; width: 100%; background: #fff; padding: 1rem 2rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; z-index: 1000; } nav a { margin-left: 1.5rem; text-decoration: none; color: var(--text); font-weight: 600; transition: color 0.3s; } nav a:hover { color: var(--secondary); } .hero { position: relative; height: 50vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2rem; overflow: hidden; color: #fff; z-index: 1; } .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 200%; background: linear-gradient(45deg, var(--primary), var(--secondary)); animation: wave 10s ease-in-out infinite alternate; transform: rotate(-10deg); z-index: -1; } @keyframes wave { 0% { transform: translateX(0) rotate(-10deg); } 100% { transform: translateX(-50%) rotate(-10deg); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; animation: fadeIn 1s ease-out forwards; } .hero p { font-size: 1.2rem; max-width: 600px; animation: fadeIn 1.5s ease-out forwards; } section { padding: 6rem 2rem; max-width: 1000px; margin: auto; opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } section.visible { opacity: 1; transform: translateY(0); } h2 { text-align: center; margin-bottom: 2rem; font-size: 2.2rem; color: var(--primary); } .services { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); text-align: center; } .service-item svg { width: 50px; height: 50px; margin-bottom: 1rem; fill: var(--secondary); transition: transform 0.3s; } .service-item:hover svg { transform: scale(1.1); } footer { background: var(--primary); color: #fff; text-align: center; padding: 2rem 1rem; font-size: 0.9rem; } a.email-link { color: var(--accent); text-decoration: none; font-weight: 600; } a.email-link:hover { text-decoration: underline; } @media (max-width: 600px) { nav { flex-direction: column; } nav a { margin: 0.5rem 0; } }