html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f4f7f9;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content {
    flex: 1;
    padding: 20px;
}
.navbar {
    background-color: #1A2E40;
}
.navbar-brand, .nav-link, footer {
    color: white !important;
}
.btn-accent {
    background-color: #2ECC71;
    color: white;
}
footer {
    margin-top: auto;
    bottom: 0;
    position: fixed;
    width: 100%;
}
/* logo box */
.logo-rect {
    background-color: #FFF9F0;    /* light sand (matches your home background) */
    border-radius: 6px;
    padding: 6px 10px;           /* gives rectangle padding */
    height: 48px;                /* header-friendly height */
    display: inline-flex;
    align-items: center;
}

/* image inside the box */
.logo-img {
    height: 36px;                /* leaves padding top/bottom */
    width: auto;
    display: block;
}

/* smaller screens: shrink logo rectangle */
@media (max-width: 576px) {
    .logo-rect { height: 40px; padding: 4px 8px; }
    .logo-img { height: 28px; }
    .navbar-brand span { display: none; } /* hide text on tiny screens */
}