/* Import Quicksand from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap');


body { font-family: 'Quicksand', sans-serif; margin: 0; background: #f4f4f4; }

/* Logo specific styling */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;800&display=swap');

.logo { 
    display: flex;
    align-items: center; /* Vertical centering */
    font-family: 'Onest', sans-serif; 
    font-weight: 300; 
    font-size: 24px; 
    letter-spacing: -0.5px; 
    color: #FFCC00; 
    margin-right: 40px; 
}

.logo-icon {
    height: 50px; /* Adjust height based on your header size */
    width: auto;
    margin-left: 15px; /* Spacing between image and text */
}


header { background: #243E56; color: white; position: sticky; top: 0; z-index: 1000; font-family: 'Quicksand', sans-serif;}
.top-nav { display: flex; align-items: center; padding: 10px 5%; border-bottom: 1px solid rgba(255,255,255,0.1); }
.header-widgets { display: flex; align-items: center; margin-left: auto; }
.weather { color: #996600; margin-right: 15px; font-weight: bold; }
nav a { color: white; text-decoration: none; margin-left: 20px; font-size: 14px; }
.sub-nav { background: #3F5E76; padding: 8px 5%; font-size: 14px; }
.sub-nav a { color: #FFFFFF; text-decoration: none; margin-right: 15px; }

/* Rest of the styles for .container, .hero, and footer remain the same */

.container { max-width: 1100px; margin: 20px auto; padding: 0 20px; }
.hero img { width: 100%; height: auto; border-bottom: 5px solid #996600; }
.hero h1 { font-size: 32px; margin-top: 15px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.card { background: white; padding-bottom: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.card img { width: 100%; height: auto; }
.card h3 { padding: 10px; font-size: 16px; }


.header-widgets { display: flex; align-items: center; margin-left: auto; margin-right: 20px; }
.weather { color: #FFCC00; font-weight: bold; margin-right: 15px; }
.search-bar input { padding: 5px; border-radius: 4px; border: none; }

footer { background: #243E56; color: white; padding: 40px 5% 20px; border-top: 4px solid #996600; font-family: 'Quicksand', sans-serif; }

.footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 30px; }
.footer-logo { color: #FFCC00; font-weight: 300; font-size: 24px; font-family: 'Onest', sans-serif; }

.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.footer-col h4 { color: #996600; font-weight: 500; text-transform: uppercase; font-size: 14px; margin-bottom: 15px; }
.footer-col p { font-size: 13px; opacity: 0.7; margin: 8px 0; }

.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.footer-legal a { color: #ccc; text-decoration: none; margin-right: 15px; font-weight: 300; }
.footer-legal a:hover { color: #996600; }
.footer-brand {
    font-family: 'Onest', sans-serif;
    font-weight: 300; /* Matching the thinness of your logo image */
    color: #FFCC00;     /* You can also change the color here if needed */
}