:root { --primary: #007bff; --dark: #222; --light: #f9f9f9; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; color: var(--dark); line-height: 1.6; } a { text-decoration: none; color: inherit; } h3 { text-align: center; margin: 1rem auto; } h3.text-left { text-align: start; } .logo-link { display: inline-block; } .logo-img { height: 300px; width: auto; } .nav { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 1rem 2rem; top: 0; z-index: 10; } .menu { list-style: none; display: flex; gap: 1rem; } .btn { padding: 0.6rem 1.2rem; border: 2px solid var(--primary); border-radius: 4px; } .btn-primary { background: var(--primary); color: white; transition: background 0.3s; } .btn-primary:hover { background: darken(var(--primary), 10%); } .hero { height: 80vh; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--dark); margin-top: 0; background: linear-gradient(135deg, rgba(255, 200, 200, 0.5), rgba(200, 240, 255, 0.5)); background-blend-mode: screen; } @keyframes flow { 0%, 100% { background-position: 0% 0%, 100% 100%; } 50% { background-position: 100% 100%, 0% 0%; } } .hero-content p { margin-top: 1rem; margin-bottom: 2rem; } .section { padding: 4rem 2rem; } .services .cards { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .card { background: white; padding: 1.5rem; border-radius: 8px; text-align: center; height: 100%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .about { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; } .about-image { flex: 1; min-height: 250px; background: url("./about.jpg") center/cover no-repeat; border-radius: 8px; } .about-text { flex: 2; } .trust .logos { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: center; } .trust img { max-height: 50px; opacity: 0.7; filter: grayscale(80%); transition: opacity 0.3s, filter 0.3s; } .trust img:hover { opacity: 1; filter: none; } .contact-form { max-width: 500px; margin: auto; display: flex; flex-direction: column; gap: 1rem; } input, textarea { padding: 0.8rem; border: 1px solid #ccc; border-radius: 4px; width: 100%; } .form-msg { color: green; font-size: 0.9rem; text-align: center; } .footer { background: var(--light); text-align: center; padding: 1rem 0; } @media (max-width: 768px) { .about { flex-direction: column; } }