body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #ffffff;
    color: #000000;
}

/* ------------ Header ------------ */
header {
    background: #0A4A7A;
    
    display: flex;
    align-items: center;
    
    height: 25%;
    width: auto;
    justify-content: space-between;
    padding: 30px 30ox; 
    flex-wrap: wrap;
}

.logo{
    height: 50%; width: 75%;
    display: flex;
    align-items: center;
    
   
    justify-content: space-between;
    padding: 60px 30ox; 
    flex-wrap: wrap;

}
nav ul { list-style-type: none; margin: 0; padding: 0;}
nav a { display: flex; align-items: center; padding: 5px 10px; color: white; font-weight: bold; text-decoration: none; flex-wrap: wrap;}
.hero {  display: flex; align-items: center; justify-content: space-between; padding: 60px 30px; background: #0E6FB0; color: white; flex-wrap: wrap;}
.hero-content { max-width: 300px; }
.hero-image { width: 90%; height: auto; border-radius: 10px; margin-top: 20px; }
.button { background: white; color: #000000; padding: 12px 25px; display: inline-block; border-radius: 5px; text-decoration: none; font-weight: bold; }
.services { padding: 50px 20px; text-align: center; font-weight:bold;}
.service-grid { display: grid; grid-template-columns: auto auto; gap: 25px; margin-top: 25px; }
.service-card { background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1); }
.service-card img { width: 60px; height: 60px; margin-bottom: 15px; }

.about, .contact { padding: 60px 20px; background: #f5f5f5; margin-top: 20px; text-align: center; color: #000000; font-weight: bold;}

.contact form { display: flex; align-items: center; flex-direction: column; margin: 20px auto 0; border-style: solid: border-width: 2px; border-color: #aaa; border-radius: 5px; background: #f5f5f5; color: #000000;}

.contact input { padding: 12px; margin-top; 15px; margin-bottom: 15px; border-style: solid; border-width: 2px; border-color: #aaa; border-radius: 5px; background: #ffffff; color: #000000;}

.contact button { padding: 12px; background: #0A4A7A; color: #ffffff; border: solid; border-width: 2px; font-weight: bold; margin-top: 15px; margin-bottom: 15px; border-radius: 5px;}


footer { text-align: center; padding: 20px; background: #0A4A7A; color: white; margin-top: 40px; }
footer a { color: white; text-decoration: none; }

@media (max-width: 400px ) { .hero { text-align: center; flex-direction: column; } .hero-image { width: 100%; height: auto;}}