/* Basic Setup for the Layout */

      *  body {    
             font-family: sans-serif;
             margin: 0;
             background-color: #f4f4f4;
         }
        
        .container { 
            display: grid; 
            grid-template-columns: 7fr 3fr; /* 70% Left, 30% Right */
            gap: 20px; 
            max-width: 1200px; 
            margin: 20px auto; 
        }

        /* News Section */
        .news-feed { background: white; padding: 20px; border-radius: 8px; }
        .signup-box { background: #eee; padding: 20px; border: 2px solid #ccc; margin-bottom: 20px; }
        .article-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
        .card { border: 1px solid #ddd; padding: 10px; border-radius: 4px; }

       /* Centering the Main Headline */
.news-feed h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}

header { 
    text-align: center; 
    background-color: #333; /* Matches Footer */
    padding: 20px 0; 
    border-bottom: 4px solid #ffcc00; /* Matches Footer Border */
}

/* Make sure your Nav links are visible on the dark background */
nav a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
}

nav a:hover {
    color: white;
}


/* Optional: Center the "Stay in the Know" text inside the signup box too */
.signup-box {
    text-align: center; 
    background: #eee; 
    padding: 20px; 
    border: 2px solid #ccc; 
    margin-bottom: 20px;
}

        
        /* Sidebar Section */
.sidebar { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    text-align: center; /* This centers the "Sponsor The Buzz" title */
}

/* Container for the two small logo ads */
.logo-ad-container {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px;
}

.logo-ad { 
    background: #fff; 
    border: 1px solid #333; 
    height: 75px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    font-size: 0.8rem;
}

.ad-box { background: #fff; border: 1px solid #333; text-align: center; padding: 10px; }

.contact-form { 
    background: #ffcc00; 
    padding: 20px; 
    border-radius: 8px; 
    text-align: left; /* Keeps the form labels/inputs aligned left for readability */
}

.contact-form input, .contact-form textarea { 
    width: 90%; 
    margin-bottom: 10px; 
    padding: 8px; 
    border: 1px solid #ccc;
    border-radius: 4px;
}

        /* Container to hold two smaller ads side-by-side or stacked */
.logo-ad-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two side-by-side */
    gap: 10px;
}
.logo-ad {
    background: #fff;
    border: 1px solid #333;
    height: 75px; /* Half of your original 150px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
}
    

    /* Footer Styling */
    footer {
        background-color: #333;
        color: white;
        padding: 40px 0;
        margin-top: 40px;
        border-top: 4px solid #ffcc00; /* Your bright yellow theme */
    }
    .footer-container {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
    .footer-column h4 {
        color: #ffcc00;
        margin-bottom: 15px;
        text-transform: uppercase;
        font-size: 0.9rem;
    }
    .footer-column p, .footer-column a {
        color: #ccc;
        text-decoration: none;
        font-size: 0.85rem;
        line-height: 1.6;
    }
    .footer-column a:hover { color: #ffcc00; }
    .footer-bottom {
        text-align: center;
        padding-top: 30px;
        margin-top: 30px;
        border-top: 1px solid #444;
        font-size: 0.75rem;
        color: #888;
    }