body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #222;
    background: #fff; /* ensures page background is white */
}

a { 
    color: #0066cc; 
    text-decoration: none; 
}

/* HEADER */
.site-header {
    background: #fff;              /* pure white background */
    border: none !important;       /* ensure no bottom line */
    box-shadow: none !important;   /* remove subtle shadows */
    margin: 0;
    padding: 0;
}

/* TOP BAR */
.site-topbar {
    background: #00205B;  /* dark blue */
    padding: 6px 20px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin: 0;
    border: none;
}

/* LOGO */
.site-logo { 
    display: inline-block; 
    padding: 18px 20px; 
    vertical-align: middle; 
}

/* NAVIGATION */
.main-nav { 
    background: #fff; /* make nav background white to blend with header */
    border: none !important;
    box-shadow: none !important;
}

.main-nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    gap: 20px; 
    align-items: center; 
    justify-content: center; /* center align links neatly */
}

.main-nav li { 
    padding: 14px 10px; 
}

.main-nav a { 
    color: #00205B;     /* deep blue text */
    font-weight: 600; 
    transition: color 0.3s ease;
}

.main-nav a:hover { 
    color: #D4351C;     /* red hover color */
}

/* HERO & OTHER SECTIONS */
.hero { 
    position: relative; 
    background: #000 url('') center/cover no-repeat; 
    color: #fff; 
    padding: 60px 20px; 
}

.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 20px; 
}

.cards { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 18px; 
}

.card { 
    background: #fff; 
    border: 1px solid #d3d8db; 
    padding: 18px; 
    text-align: left; 
}

.callout { 
    background: #f6f7f8; 
    padding: 30px; 
    border: 1px solid #e1e1e1; 
    margin: 30px 0; 
}

.cta-banner { 
    background: #12345a; 
    color: #fff; 
    text-align: center; 
    padding: 40px 20px; 
}

.footer-widgets { 
    background: #2f2f2f; 
    color: #ddd; 
    padding: 40px 20px; 
}

.site-footer { 
    background: #1f1f1f; 
    color: #999; 
    text-align: center; 
    padding: 20px 0; 
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .cards { 
        grid-template-columns: repeat(1, 1fr); 
    }

    .main-nav ul { 
        flex-direction: column; 
        align-items: flex-start; 
    }

    .main-nav { 
        background: #00205B; /* make mobile menu dark blue for visibility */
    }

    .main-nav a { 
        color: #fff; 
        padding: 10px 0;
        display: block;
    }
}