body { margin: 0; font-family: 'Open Sans', sans-serif; color: #333; background-color: #f9f9f9; overflow-x: hidden; }
h1, h2, h3 { font-family: 'Roboto', sans-serif; color: #0044cc; text-align: center; }
a { text-decoration: none; color: #007BFF; transition: all 0.3s ease-in-out; }
a:hover { transform: scale(1.1); }
header { position: fixed; top: 0; width: 100%; background: rgba(0, 76, 153, 0.9); padding: 15px 0; z-index: 1000; }
nav { display: flex; justify-content: space-around; align-items: center; }
nav a { color: white; font-size: 18px; padding: 10px 15px; border-radius: 5px; }
nav a:hover { background: #0056b3; }
.hero { height: 100vh; background: linear-gradient(to bottom, #0044cc, #007BFF); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.hero h1 { font-size: 48px; margin-bottom: 20px; }
.hero p { font-size: 24px; max-width: 800px; line-height: 1.6; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 60px 20px; background: white; }
.feature { background: #f1f1f1; padding: 20px; border-radius: 10px; text-align: center; transition: transform 0.5s ease; }
.feature:hover { transform: translateY(-10px); }
.clients { background: #e9ecef; padding: 40px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.client-card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: box-shadow 0.3s ease; }
.client-card:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.2); }
footer { background: #0044cc; color: white; padding: 20px; text-align: center; }
@media (max-width: 768px) { nav { flex-direction: column; } .hero h1 { font-size: 36px; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 1.5s ease-in-out; }
button { border: none; border-radius: 8px; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; }
.cta-button { background: linear-gradient(90deg, #007BFF, #00C853); color: white; }
.cta-button:hover { background: linear-gradient(90deg, #0056b3, #009933); }