/* Basic Setup for the Layout */

      *  body {    
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             margin: 0;
             background-color: #f4f4f4;
             color: #333;
         }
        
        .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;
       }

       /* Matching Header & Footer */

       header, footer { 
        background-color: #333; /* Matches Footer */
        color: white;
        text-align: center;
        padding: 30px 0; 
        border-bottom: 5px solid #ffcc00; /* Matches Footer Border */
      }

      /* The Big Center Image */
       
       .hero-image {
         display: block;       /* Required for margin: auto to work */
         margin: 0 auto 30px;  /* Centers the box and adds bottom spacing */
         width: 100%;
         max-width: 600px;
         height: auto;
         border-radius: 12px;
         box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      }

        h1 { 
             font-size: 2.5rem; 
             text-align: center;
             text-transform: uppercase; 
             margin-bottom: 10px; 
        }

        p { 
            font-size: 1.2rem; 
            color: #666; 
            margin-bottom: 30px; 
        }

        /* Centered Signup Box */

        .signup-box {
            background: white;
            padding: 40px;
            border-radius: 10px;
            border: 2px solid #ddd;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .signup-box input[type="email"] {
            padding: 15px;
            width: 70%;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
        }

        .signup-box button {
            padding: 15px 30px;
            background-color: #ffcc00;
            border: none;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: 0.3s;
        }

        .signup-box button:hover { background-color: #e6b800; }


      /* 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 { 
           border-top: 5px solid #ffcc00; /* Your bright yellow theme */
           border-bottom: none;
           background-color: #333;
           color: white; 
           margin-top: 50px; 
           padding: 40px 0;

      }

        
       .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;
    }