

:root { --gray: #6e6f70; --navy: #221a46; --teal: #00a89c; --yellow: #ffff00; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: var(--navy); color: white; } .header .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: var(--gray); } .logo img { height: 40px; } .contact { font-size: 0.9rem; } .nav-bar { background-color: var(--navy); padding: 0.5rem 1rem; } .nav-bar ul { display: flex; list-style: none; justify-content: center; gap: 1.5rem; } .nav-bar a { text-decoration: none; color: white; font-weight: bold; } .nav-bar a:hover { color: var(--teal); } .hero { text-align: center; padding: 4rem 1rem; } .hero h1 { font-size: 2.5rem; } .hero p { margin: 1rem 0; } .btn { background-color: var(--teal); color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 5px; } .footer { background-color: var(--navy); color: white; display: flex; justify-content: space-around; padding: 2rem 1rem; flex-wrap: wrap; } .footer-left { flex: 1 1 200px; } .footer-logo { height: 30px; margin-bottom: 1rem; } .footer-columns { display: flex; gap: 2rem; flex: 2 1 400px; } .footer-columns h4 { margin-bottom: 0.5rem; } .footer-columns ul { list-style: none; } .footer-columns li { margin-bottom: 0.5rem; }