/* Base Setup */
body {
    font-family: 'Helvetica Neue', sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
  }
  
  .faint-background img {
    width: 100%;
    opacity: 0.04;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  
  /* Hero Branding */
  .hero-branding {
    text-align: center;
    padding: 2rem 1rem 1rem;
  }
  
  .branding-logo img {
    max-width: 140px;
    margin-bottom: 0.5rem;
  }
  
  .atl-brand-title {
    font-size: 2rem;
    color: #000000;
    margin: 0;
  }
  
  .subtitle {
    font-size: 1.1rem;
    color: #444;
    margin-top: 0.25rem;
  }
  
  /* Ad Campaign */
  .ad-campaign-bar {
    background-color: #CDB252;
    padding: 0.75rem 1rem;
    text-align: center;
  }
  
  .ad-campaign-link {
    color: #fff;
    text-decoration: underline;
    font-size: 1rem;
    font-weight: 600;
  }
  
  .ad-placeholder {
    text-align: center;
    margin: 1.5rem 0;
  }
  
  .ad-placeholder img {
    max-width: 100%;
    border-radius: 8px;
  }
  
  /* Headline */
  .headline-story {
    background-color: #fff;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .headline-image-container {
    position: relative;
  }
  
  .headline-image {
    width: 100%;
    border-radius: 6px;
  }
  
  .headline-arrow {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  
  .headline-meta .headline-category {
    color: #000000;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-top: 1rem;
    display: block;
  }
  
  .headline-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
    color: #222;
  }
  
  .headline-snippet {
    font-size: 1rem;
    color: #555;
    margin-bottom: 0.75rem;
  }
  
  .headline-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
  }
  
  .headline-author img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  
  .author-name {
    color: #444;
    font-weight: 500;
  }
  
  /* Secondary Story */
  .secondary-story {
    background-color: #fff;
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  }
  
  .story-category {
    color: #000000;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
  }
  
  .secondary-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .secondary-title {
    font-size: 1.25rem;
    font-weight: 600;
  }
  
  .secondary-description {
    font-size: 0.95rem;
    color: #555;
  }
  
  .secondary-author {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    gap: 0.5rem;
  }
  
  .secondary-author img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  
  .secondary-image img {
    max-width: 160px;
    border-radius: 6px;
  }
  
  /* Third Story */
  .third-story {
    background-color: #fff;
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .third-image img {
    width: 100%;
    border-radius: 6px;
  }
  
  .third-category {
    background-color: #000000;
    color: #fff;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    margin: 0.75rem 0;
    display: inline-block;
  }
  
  .third-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  
  .third-author {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    gap: 0.5rem;
  }
  
  .third-author img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  
  /* Most Read */
  .most-read {
    background-color: #fff;
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 3rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .most-read-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  
  .most-read-list {
    list-style: none;
    padding: 0;
  }
  
  .most-read-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: #333;
  }
  
  .most-read-rank {
    background-color: #000000;
    color: #fff;
    font-weight: bold;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
  }
  
  /* Latest News */
  .main-story,
  .latest-news,
  .featured-locals,
  .upcoming-events,
  .newsletter-signup {
    background: #fff;
    padding: 2rem 1rem;
    margin-bottom: 3rem;
    border-radius: 8px;
  }
  
  .section-header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  
  .news-card {
    background-color: #fdfdfd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }
  
  .news-card img {
    width: 100%;
    height: auto;
  }
  
  .news-content {
    padding: 1rem;
  }
  
  .read-more {
    display: inline-block;
    margin-top: 0.5rem;
    color: #000000;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: underline;
  }
  
  /* Featured Locals */
  .locals-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
  }
  
  .local-profile {
    max-width: 220px;
    text-align: center;
  }
  
  .local-profile img {
    width: 100%;
    border-radius: 50%;
    max-width: 140px;
    height: 140px;
    object-fit: cover;
    margin-bottom: 0.75rem;
  }
  
  .local-profile p {
    font-size: 0.9rem;
    color: #555;
  }
  
  /* Events */
  .events-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .event-item {
    display: flex;
    gap: 1rem;
    background-color: #fdfdfd;
    padding: 1rem;
    border-left: 4px solid #000000;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
  }
  
  .event-date {
    text-align: center;
    background: #000000;
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    width: 60px;
  }
  
  .event-meta {
    font-size: 0.85rem;
    color: #666;
  }
  
  /* Newsletter */
  .signup-container form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .signup-container input[type="email"] {
    padding: 0.6rem;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
  }
  
  .signup-container button {
    background-color: #CDB252;
    color: #fff;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
  }
  
  /* Footer 
  .site-footer {
    background-color: #1c1c1c;
    color: #fff;
    padding: 2rem 1rem;
  }
  
  .footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  
  .footer-left p,
  .footer-links a {
    font-size: 0.9rem;
    color: #ccc;
  }
  
  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
  }
  
  .footer-links li {
    display: inline-block;
    margin-left: 1rem;
  }
  
  .social-icons a img {
    width: 24px;
    height: 24px;
    margin-left: 0.5rem;
  }
  */
  /* --- News Categories Sub-Header --- */
  .c-topics {
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #fff;
    padding: 0.75rem 1rem;
  }
  
  .topics-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .topics {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 1.25rem;
    border-left: 1px solid #000000;
  }
  
  .topics li {
    margin: 0;
    padding-left: 1rem;
    border-right: 1px solid #000000;
  }
  
  .topics li:last-child {
    border-right: none;
  }
  
  .nav-itemText {
    text-decoration: none;
    color: #000000;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s;
    white-space: nowrap;
  }
  
  .nav-itemText:hover {
    color: #b22222;
    text-decoration: underline;
  }
  
  /* --- Main Story Section --- */
  
  /* --- Main Story Section --- */
  .main-story {
    background-color: #fff;
    padding: 2rem 1rem;
    margin-bottom: 3rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .main-story-image img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 1rem;
    object-fit: cover;
    max-height: 450px;
  }
  
  .main-story-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #1C1C1C;
    line-height: 1.3;
  }
  
  .main-story-description {
    font-size: 1.05rem;
    color: #444;
    margin-bottom: 1.5rem;
    line-height: 1.6;
  }
  
  .read-more-btn {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    background-color: #000000;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.3s ease;
  }
  
  .read-more-btn:hover {
    background-color: #a00000;
  }
  
  
  .section-5-article-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1rem;
    margin: 2rem auto;
    max-width: 1200px;
  }
  
  
  
  .article-category {
    text-transform: uppercase;
    font-weight: bold;
    color: #6c6c6c;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
  }
  
  .article-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1c1c1c;
    line-height: 1.3;
    margin-bottom: 1.2rem;
    text-transform: capitalize;
  }
  
  /* === Article Share Icons === */
  .article-share-icons {
    margin-top: 1rem;
    margin-left: 0.5rem;
    display: flex;
    align-items: center;
  }
  
  .social-icons a {
    margin-right: 0.75rem;
    display: inline-block;
    transition: transform 0.2s ease;
  }
  
  .social-icons a img {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
  }
  
  .social-icons a:hover img {
    transform: scale(1.1);
  }
  
  
  
  /* === Article Author & Timestamp === */
  .article-author {
    margin-top: 1rem;
    margin-left: 0.5rem;
    font-size: 1.5rem;
    color: #555;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  .article-author .article-meta {
    font-weight: bold;
    color: #222; 
    margin-bottom: 0.2rem;
  }
  
  /* === Article Section Container === */
  .article-section {
    background-color: #ffffff; /* white background */
    padding: 2rem 1.5rem; /* vertical and horizontal spacing */
    margin: 2rem auto;
    max-width: 900px; /* prevent full screen width on large screens */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* subtle lift */
    border-radius: 8px;
  }
  
  /* === Horizontal Divider === */
  .section-divider {
    border: none;
    border-top: 1px solid #dcdcdc; /* light gray */
    margin: 1.5rem 0;
  }
  
  /* === Section Title === */
  .section-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #1c1c1c;
    margin-bottom: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: capitalize;
  }
  
  /* === Paragraphs === */
  .section-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  /* Copyright text styling */
  .section-content .copyright-text {
    font-size: 0.85rem;
    font-style: italic;
    color: #777;
    line-height: 1.6;
  }
  
  /* === Section 8 FAQ Styles === */
  .section-8-article-faqs {
    background-color: #ffffff;
    padding: 2rem 1.5rem;
    margin: 2rem auto;
    max-width: 900px;
  }
  
  .section-8-article-faqs .faq-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 1.5rem;
    text-align: left;
  }
  
  /* FAQ Item Container */
  .faq-item {
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #d1d1d1;
    padding-bottom: 1rem;
  }
  
  /* FAQ Question Button */
  .faq-question {
    font-size: 1.2rem;
    font-weight: bold;
    background: none;
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0;
    color: #1c1c1c;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  
  .faq-question:hover {
    color: #000000; /* Optional hover color */
  }
  
  /* FAQ Answer (Initially hidden) */
  .faq-answer {
    display: none;
    padding: 0.5rem 1rem 0 0.25rem;
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
  }
  
  /* Show class toggled via JS */
  .faq-answer.show {
    display: block;
  }
  
  /* === Section 9: Comments Banner === */
  .comments-banner {
    background-color: #ffffff;
    padding: 1rem 1.5rem;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-top: 2rem;
  }
  
  .comments-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  /* Left side: Icon + count */
  .comments-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .chat-icon {
    width: 45px;
    height: 45px;
  }
  
  .comment-count {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
  }
  
  /* Center: Join text */
  .comments-center {
    flex: 1;
    text-align: center;
  }
  
  .join-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1c1c1c;
  }
  
  /* Right: Button */
  .comments-right {
    text-align: right;
  }
  
  .view-comments-button {
    background-color: #000;
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease;
  }
  
  .view-comments-button:hover {
    background-color: #333;
  }
  
  
  /* === Section 10: Read Next Carousel === */
  .section-10-read-next {
    background-color: #CDB252; /* Atlanta Locals maroon */
    padding: 2rem 1rem;
    color: #ffffff;
    margin-top: 3rem;
  }
  
  .read-next-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  
  .read-next-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ffffff;
  }
  
  /* Carousel core */
  .carousel-wrapper {
    position: relative;
    overflow: hidden;
  }
  
  .carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  /* Carousel item */
  .carousel-item {
    flex: 0 0 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  
  .carousel-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 0.75rem;
  }
  
  .carousel-post-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
  }
  
  /* Dots */
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  
  .carousel-dots .dot {
    width: 10px;
    height: 10px;
    background-color: #ffffffa0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .carousel-dots .dot.active {
    background-color: #ffffff;
  }
  /* === Section 11 Ads === */
  .section-11-ads {
    padding: 2rem 1rem;
    background-color: #ffffff;
  }
  
  .ads-header {
    color: #8c8c8c; /* medium gray */
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 1px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 1.5rem;
    margin-left: 0.5rem;
  }
  
  .ads-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
  }
  
  .ad-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ad-item img {
    width: 50%;
    max-width: 50%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
  }
  
  .ad-item img:hover {
    transform: scale(1.02);
  }
  
  .learn-more-btn {
    margin-top: 0.75rem;
    display: inline-block;
    background-color: #000000;
    color: #ffffff;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  .learn-more-btn:hover {
    background-color: #1c1c1c;
    transform: translateY(-2px);
  }
  
  /* === Section 12 Most Read === */
  .section-12-most-read {
    padding: 2rem 1rem;
    background-color: #f8f8f8;
  }
  
  .most-read-title {
    font-size: 2rem;
    font-weight: bold;
    color: #1c1c1c;
    margin-bottom: 1.5rem;
    margin-left: 0.5rem;
  }
  
  .most-read-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .most-read-item {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .most-read-item img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  .most-read-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1c1c1c;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .most-read-link:hover {
    color: #8c8c8c;
  }
  
  /* === Section 13 Related Articles === */
  .section-13-related {
    padding: 2rem 1rem;
    background-color: #f8f8f8;
  }
  
  .related-title {
    font-size: 2rem;
    font-weight: bold;
    color: #1c1c1c;
    margin-bottom: 1.5rem;
    margin-left: 0.5rem;
  }
  
  .related-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .related-item {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .related-item img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  .related-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1c1c1c;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .related-link:hover {
    color: #8c8c8c;
  }

  .section-4-watch-now {
    background-color: #ffffff;
    padding: 2rem 1.5rem;
    margin: 2rem auto;
    max-width: 900px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .watch-now-title {
    font-size: 2rem;
    font-weight: bold;
    color: #CDB252; /* LSM gold brand */
    margin-bottom: 1rem;
  }
  
  .watch-now-video iframe {
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  
  /* Optional: Responsive tweak */
  @media (min-width: 768px) {
    /* === Section 5 Article Main === */
    .section-5-article-main {
      display: flex;
      flex-direction: row;
      gap: 2rem;
      align-items: flex-start;
      justify-content: space-between;
      padding: 2rem 1rem;
    }
  
    .article-heading {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  
    .article-img {
      width: 80%;
      margin: 0;
    }
  
    .article-img img {
      width: 100%;
      height: auto;
      max-height: 480px;
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  
    .article-title {
      font-size: 2rem;
      font-weight: 700;
      color: #1c1c1c;
      line-height: 1.3;
      margin-top: 0.75rem;
      margin-bottom: 1.2rem;
      text-transform: capitalize;
    }
  
    .article-category {
      text-transform: uppercase;
      font-weight: bold;
      color: #6c6c6c;
      font-size: 1.5rem;
      margin-left: 0.5rem;
      margin-bottom: 0.25rem;
      letter-spacing: 1px;
    }
  
    /* === Section 12: Most Read === */
    .most-read-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 2rem;
    }
  
    .most-read-item {
      flex: 1 1 calc(50% - 2rem);
      max-width: calc(50% - 2rem);
    }
  
    /* === Section 13: Related === */
    .related-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 2rem;
    }
  
    .related-item {
      flex: 1 1 calc(50% - 2rem);
      max-width: calc(50% - 2rem);
    }
  }
  
  
  
  
  
  
  /* Responsive Layout */
  @media (max-width: 1024px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
  
    .secondary-content {
        flex-direction: column;
    }
  
    .secondary-image img {
        max-width: 100%;
        margin-top: 1rem;
    }
  
    .event-item {
        flex-direction: column;
        text-align: center;
    }
  
    .event-date {
        margin: 0 auto 0.5rem;
    }
  
    .topics {
        flex-direction: column;
        border-left: none;
        gap: 0.75rem;
    }
  
    .topics li {
        padding-left: 0;
        border-right: none;
        border-bottom: 1px solid #000000;
        padding-bottom: 0.5rem;
    }
  
    .topics li:last-child {
        border-bottom: none;
    }
  
  
    .main-story {
      display: flex;
      gap: 2rem;
      align-items: flex-start;
      width: 100%;
      background-color: #fff;
      padding: 2rem 1rem;
      margin-top: 2rem;
      margin-bottom: 3rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    
    
    .main-story-title {
      font-size: 1.5rem;
    }
    
    .main-story-description {
      font-size: 0.95rem;
    }
    
    .read-more-btn {
      font-size: 0.85rem;
      padding: 0.5rem 1rem;
    }
    
    
  }




  
  @media (min-width: 768px) {
    .headline-image {
        max-width: 700px;
        margin: 0 auto;
        display: block;
    }
  
    .secondary-image img {
        max-width: 250px;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
  
    .main-story {
      display: flex;
      gap: 2rem;
      align-items: flex-start;
      margin-bottom: 3rem;
    }
    
    .main-story-image img {
      max-width: 100%;
      height: auto;
      border-radius: 6px;
    }
    
    .main-story-content {
      flex: 1;
    }
    
  }
  
  @media (min-width: 1025px) {
    .topics {
      gap: 1.5rem;
      justify-content: center;
    }
  
    .topics li {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    .main-story {
      display: flex;
      align-items: flex-start;
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 0;
    }
  
    .main-story-image,
    .main-story-image img {
      flex: 1;
      max-width: 600px;
      border-radius: 6px;
    }
  
    .main-story-content {
      flex: 1;
    }
  
    .main-story-title {
      font-size: 2rem;
      text-align: left;
    }
  
    .main-story-description {
      font-size: 1.1rem;
      text-align: left;
    }
  
    .read-more-btn {
      margin-left: 0;
    }
  
    
    .main-story {
      display: flex;
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
      align-items: flex-start;
    }
    
    .main-story-image img {
      max-width: 100%;
      height: auto;
    }
    
    .main-story-content {
      flex: 1;
    }
  

    
    
  }
  @media (max-width: 767px) {
    .news-grid,
    .locals-grid{
      display: flex;
      flex-direction: column;
      gap: 2rem;
      align-items: center; /* ✅ Center child items horizontally */
    }
  
    .news-card,
    .local-profile {
      width: 60%;
      max-width: 400px; /* ✅ Optional: keeps profiles from getting too wide */
      padding: 1rem;
      box-sizing: border-box;
    }
    .local-profile img {
      width: 100%;
      max-width: 150px;
      margin: 0 auto 1rem auto;
      display: block;
    }
  
  }