:root { --primary: #007399; --secondary: #005875; --text: #333; --light: #f4f4f4; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: var(--text); margin: 0; }
        a { text-decoration: none; color: var(--primary); }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
        header { background: #fff; padding: 20px 0; border-bottom: 3px solid var(--primary); }
        .logo-img { max-width: 250px; }
        nav ul { list-style: none; padding: 0; display: flex; gap: 20px; background: #eee; padding: 10px; }
        .hero-banner { width: 100%; height: 300px; background: #ddd; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2em; text-transform: uppercase; background-image: linear-gradient(var(--primary), var(--secondary)); }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 40px 0; }
        .card { border: 1px solid #ddd; padding: 15px; border-radius: 4px; }
        .card img { max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        footer { background: #222; color: #fff; padding: 40px 0; margin-top: 50px; }
        .btn { display: inline-block; padding: 10px 20px; background: var(--primary); color: #fff; border-radius: 4px; }
        @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }