/* ============================
   Global Styles
   ============================ */

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f7f5;
    color: #1f2d26;
    line-height: 1.6;
}

/* ============================
   Navigation Bar
   ============================ */

.topnav {
    background: #0b3d2e;
    overflow: hidden;
    padding: 10px 0;
    text-align: center;
}

.topnav a {
    color: white;
    text-decoration: none;
    padding: 14px 20px;
    font-size: 18px;
    display: inline-block;
}

.topnav a:hover {
    background: #145c45;
}

/* ============================
   Hero Section
   ============================ */

header.hero {
    background: linear-gradient(to bottom, #0b3d2e, #145c45);
    color: white;
    text-align: center;
    padding: 80px 20px;
}

header.hero h1 {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.tagline {
    font-size: 20px;
    margin-top: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* ============================
   Logo — Clean, Crisp, Balanced
   ============================ */

.hero-logo {
    width: 240px;        /* Perfect crisp size */
    height: auto;        /* Preserve aspect ratio */
    margin-bottom: 20px;
    image-rendering: auto;
}

/* Slightly larger on desktops */
@media (min-width: 900px) {
    .hero-logo {
        width: 280px;
    }
}

/* Slightly smaller on mobile */
@media (max-width: 480px) {
    .hero-logo {
        width: 200px;
    }
}

/* ============================
   Section Layout
   ============================ */

section {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    border-bottom: 1px solid #d9e3dd;
    padding-bottom: 30px;
    margin-bottom: 40px;
}

h2 {
    color: #0b3d2e;
}

/* ============================
   Lists
   ============================ */

ul {
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
}

ul li {
    margin-bottom: 6px;
}

/* ============================
   Service Blocks
   ============================ */

.service-block {
    background: #ffffff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

/* ============================
   CTA Section
   ============================ */

.cta {
    background: #e8f1ed;
    padding: 30px;
    border-radius: 6px;
    text-align: center;
    margin-top: 40px;
}

.cta strong {
    font-size: 18px;
}

/* ============================
   Contact Section
   ============================ */

.contact {
    text-align: center;
}

/* ============================
   Footer
   ============================ */

footer.footer {
    background: #0b3d2e;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 60px;
}

/* ============================
   Notice Section
   ============================ */

.notice {
    max-width: 900px;
    margin: 20px auto;
    padding: 10px 20px;
    text-align: center;
    font-style: italic;
    color: #0b3d2e;
    opacity: 0.85;
}

/* ============================
   Services Page
   ============================ */

.services h2 {
    margin-top: 40px;
    color: #0b3d2e;
}

.services p {
    margin-top: 10px;
}