:root {
      /* Spacing Variables */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
      --spacing-3xl: 4rem;
      --spacing-4xl: 5rem;

      /* Layout Variables */
      --container-max-width: 1200px;
      --container-padding: 1rem;

      /* Breakpoints (for reference in media queries) */
      --mobile: 480px;
      --tablet: 768px;
      --desktop: 1024px;

      /* Typography Scale */
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-med: 1rem;
      --font-size-base: 1.25rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 2rem;
      --font-size-4xl: 2.5rem;
      --font-size-8xl: 4.5rem;
      --font-size-12xl: 6rem;

      /* Brand Colors */
      --notice-yellow: #fbc516;
      --notice-black: #1a1919;
      --notice-grey: #808285;
      --notice-white: #ffffff;

      /* Functional Colors */
      --notice-bg-primary: var(--notice-black);
      --notice-bg-secondary: #242424;  /* slightly lighter than black for layering */
      --notice-text-primary: var(--notice-white);
      --notice-text-secondary: var(--notice-grey);
      --notice-accent: var(--notice-yellow);
      
      /* Background tints for subtle variations */
      --notice-bg-grey-light: rgba(128, 130, 133, 0.1);
      --notice-bg-grey-medium: rgba(128, 130, 133, 0.2);
      
      /* Font Families */
      --font-primary: 'Roboto', sans-serif;
      /*--font-accent: 'Impact', sans-serif;*/
      --font-accent: 'Roboto', sans-serif;
      
      /* Font Weights */
      --font-regular: 400;
      --font-bold: 700;
  }

  /* Reset and Base Styles - Update to remove any default margins */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  html, body {
      overflow-x: hidden;  /* Prevent horizontal scrolling */
      position: relative;  /* Create new stacking context */
      width: 100%;
      margin: 0;
      padding: 0;
      overscroll-behavior-x: none;  /* Prevent horizontal overscroll */
      touch-action: pan-y pinch-zoom;  /* Only allow vertical touch actions */
  }

  html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-height); /* Add this variable to your root */
  }

  /* Utility Classes for Typography */
  .text-accent {
      font-family: var(--font-accent);
  }

  .text-yellow {
      color: var(--notice-accent);
  }


  /* Main Container Styles - Ensure no top margin/padding */
  .notice-coalition-main {
      width: 100%;
      font-family: var(--font-primary);
      color: var(--notice-text-primary);
      background-color: var(--notice-bg-primary);
  }

  /* Navigation Styles - Position at very top */
  .notice-nav {
      width: 100%;
      padding: var(--spacing-md) 0;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      background-color: black;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }


  .nav-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  /* Logo Styles */
  .nav-logo {
      margin-right: var(--spacing-xl);
  }

  .nav-logo img {
      height: 55px;
      width: auto;
  }

  /* Navigation Links */
  .nav-links {
      display: flex;
      gap: var(--spacing-xl);
      align-items: center;
      margin: 0 auto;
  }

  .nav-links a {
      color: var(--notice-text-primary);
      text-decoration: none;
      font-size: var(--font-size-base);
      font-weight: var(--font-bold);
      font-family: var(--font-accent);
      transition: color 0.2s ease;
  }

  .nav-links a:hover {
      color: var(--notice-accent);
  }

  /* Add selected nav link style */
  .nav-links a.selected {
      color: var(--notice-accent);
      position: relative;
  }

  .nav-links a.selected::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--notice-accent);
  }

  /* CTA Button */
  .nav-cta {
      margin-left: var(--spacing-xl);
  }

   /* Button Styles */
   .notice-btn {
      background-color: var(--notice-accent);
      color: var(--notice-black);
      font-family: var(--font-accent);
      font-weight: var(--font-bold);
      padding: var(--spacing-sm) var(--spacing-lg);
      border: none;
      cursor: pointer;
      transition: transform 0.2s ease;
      border-radius: 4px;
  }

  .notice-btn:hover {
      transform: translateY(-2px);
  }

  /* Section Base Styles - Add content container */
  .notice-coalition-main > section {
      width: 100%;
      padding: var(--spacing-2xl) 0; /* Remove horizontal padding */
      overflow-x: hidden;  /* Prevent horizontal scrolling within sections */
  }

  .notice-intro {
      position: relative;
      min-height: 80vh;
      display: flex;
      align-items: center;
      background-image: url('https://images.squarespace-cdn.com/content/5b9081c58ab7224793278e1d/6e391794-d948-42f7-9101-012d7949d059/AdobeStock_880759896.jpeg?content-type=image%2Fjpeg'); 
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin: 0; /* Ensure no margins */
      padding-top: var(--nav-height);
      top: 0; /* Align to top */
  }


  /* Updated Intro Content Styles */
  .intro-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      margin-top: var(--spacing-2xl); /* Added more space below navigation */
  }

  .intro-text-container {
      max-width: 90%; /* Increased from previous max-width */
      margin: 0 auto;
      padding: 0 var(--container-padding);
  }

  .intro-catchphrase {
      font-family: var(--font-accent);
      font-size: var(--font-size-8xl);
      color: var(--notice-white);
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      letter-spacing: 0.02em;
      line-height: 0.9;
      text-transform: uppercase;
      text-align: left;
      border-bottom: 4px solid var(--notice-white);
      padding-bottom: var(--spacing-lg);
      margin-bottom: var(--spacing-xl);
  }

  .intro-cta-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacing-xl);
  }

  .intro-cta-text {
      color: var(--notice-white);
      font-size: var(--font-size-xl);
      font-weight: var(--font-bold);
      max-width: 60%;
      text-align: left;
  }

  .intro-cta-btn {
      flex-shrink: 0;
      font-size: var(--font-size-lg);
      padding: var(--spacing-md) var(--spacing-xl);
      background-color: transparent; /* Remove background */
      border: 2px solid var(--notice-accent); /* Add border */
      color: var(--notice-accent); /* Match text to border color */
      transition: all 0.3s ease; /* Smooth transition for all changes */
      border-radius: 4px;
  }

  .intro-cta-btn:hover {
      background-color: var(--notice-accent); /* Fill background on hover */
      color: var(--notice-black); /* Change text color for contrast */
  }



  /* Section Header Styles */
  .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-2xl);
  }

  .section-title {
      font-family: var(--font-accent);
      font-size: var(--font-size-3xl);
      color: var(--notice-white);
  }

  /* Add content container for each section */
  .section-content {
      max-width: var(--container-max-width);
      margin: 0 auto;
      padding: 0 var(--container-padding);
  }

  .section-link {
      font-family: var(--font-accent);
      font-size: var(--font-size-lg);
      color: var(--notice-accent);
      text-decoration: none;
      position: relative;
      padding-bottom: var(--spacing-xs);
  }

  .section-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--notice-accent);
      transform: scaleX(0);
      transition: transform 0.3s ease;
  }

  .section-link:hover::after {
      transform: scaleX(1);
  }

  /* Temporary About Us Section */
  .notice-aboutus-temp {
  background-color: var(--notice-bg-primary);
  padding: var(--spacing-3xl) 0;
  }

  .notice-aboutus-temp .section-title {
      text-align: center;
      margin-bottom: var(--spacing-2xl); /* Might want to adjust spacing for centered title */
  }



  .origin-story-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-2xl);
      margin-bottom: var(--spacing-2xl);
  }

  .story-column {
      color: var(--notice-text-primary);
      font-size: var(--font-size-base);
      line-height: 1.6;
  }

  .story-column p {
      margin-bottom: var(--spacing-lg);
      font-size: var(--font-size-base);
      font-weight: var(--font-bold);
  }

  .story-column p:last-child {
      margin-bottom: 0;
  }

  /* Newsletter Section Styles */
  .notice-newsletter {
      padding: var(--spacing-3xl) 0;
      /*min-height: 600px;*/
      display: flex;
      align-items: center;
  }


  .newsletter-widget-container {
      margin-top: var(--spacing-xl);
  }

  /* Social Media Section / Footer Styles */
  .notice-social {
      padding: var(--spacing-3xl) 0;
      text-align: center;
  }

  .notice-social-links {
      display: flex;
      justify-content: center;
      gap: var(--spacing-xl);
      margin-bottom: var(--spacing-2xl);
  }

  .social-icon {
      width: 64px;
      height: 64px;
      background-color: var(--notice-bg-secondary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
  }

  .social-icon:hover {
      transform: translateY(-2px);
  }

  .social-icon img {
      width: 32px;
      height: 32px;
      filter: brightness(0) invert(1);
  }

  .social-icon i {
      font-size: 32px;
      color: var(--notice-white);
  }

  .notice-footer-logo {
      display: block;
      margin: 0 auto;
      transition: opacity 0.3s ease;
  }

  .notice-footer-logo img {
      height: 60px;
      width: auto;
  }

  .notice-footer-logo:hover {
      opacity: 0.8;
  }

  /* Add new alternating background colors */
  .notice-coalition-main > section:not(.notice-intro):nth-child(odd) {
      background-color: var(--notice-bg-primary);
  }

  .notice-coalition-main > section:not(.notice-intro):nth-child(even) {
      background-color: var(--notice-bg-secondary);
  }

  
  @media screen and (max-width: 1400px) {
      
  }

  @media screen and (max-width: 1200px) {
      .nav-links a {
          font-size: var(--font-size-med);
      }
  }

  /* Responsive Design */
  @media screen and (max-width: 1024px) {
      :root {
          /* Adjust spacing for tablet */
          --container-padding: 2rem;
      }
  }

  @media screen and (max-width: 1024px) {
      .nav-logo {
          display: none;
      }
  }
  @media screen and (max-width: 768px) {
      :root {
          /* Adjust spacing for mobile */
          --container-padding: 1rem;
          --font-size-4xl: 2rem;
          --font-size-3xl: 1.75rem;
          --font-size-2xl: 1.25rem;
      }

      .notice-coalition-main > section {
          padding: var(--spacing-xl) var(--spacing-md);
      }

      /* Navigation Styles */
      .nav-container {
          flex-direction: column;
          gap: var(--spacing-md);
      }

      .nav-logo {
          display: block;
      }

      .nav-links {
          flex-wrap: wrap;
          justify-content: center;
          gap: var(--spacing-md);
      }

      .nav-cta {
          margin-left: 0;
      }

      /* Intro Section Styles */
      .intro-catchphrase {
          font-size: calc(var(--font-size-4xl) * 0.8);
          letter-spacing: 0.1em;
          line-height: 1.6;
          margin-bottom: var(--spacing-lg);
      }

      .intro-cta-container {
          flex-direction: column;
          gap: var(--spacing-lg);
      }

      .intro-cta-text {
          max-width: 100%;
          font-size: var(--font-size-lg);
          text-align: center;
      }

      .intro-cta-btn {
          width: 100%;
          text-align: center;
      }

      .origin-story-content {
          grid-template-columns: 1fr;
          gap: var(--spacing-xl);
      }

      .story-column {
          font-size: var(--font-size-base);
      }

      .notice-newsletter {
          min-height: 300px;
          padding: var(--spacing-2xl) 0;
      }

      /* Social Media Section / Footer Styles */
      .notice-social {
          padding: var(--spacing-2xl) 0;
      }

      .notice-social-links {
          gap: var(--spacing-lg);
          margin-bottom: var(--spacing-2xl);
      }

      .social-icon {
          width: 48px;
          height: 48px;
      }

      .social-icon img {
          width: 24px;
          height: 24px;
      }

      .notice-footer-logo img {
          height: 48px;
      }
  }

  .notice-team {
      padding: var(--spacing-3xl) 0;
  }

  .team-section {
      margin-bottom: var(--spacing-3xl);
  }

  .team-section:last-child {
      margin-bottom: 0;
  }

  .team-section-title {
      font-family: var(--font-accent);
      font-size: var(--font-size-2xl);
      color: var(--notice-accent);
      margin-bottom: var(--spacing-xl);
  }

  .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-xl);
  }

  .team-member {
      background-color: var(--notice-bg-grey-light);
      padding: var(--spacing-lg);
      border-radius: 8px;
      transition: transform 0.3s ease;
      position: relative; /* Add position relative for modal positioning */
      cursor: pointer; /* Add cursor pointer to indicate interactivity */
  }

  .team-member:hover {
      transform: translateY(-4px);
  }

  .member-name {
      font-family: var(--font-accent);
      font-size: var(--font-size-xl);
      color: var(--notice-white);
      margin-bottom: var(--spacing-xs);
  }

  .member-role {
      font-size: var(--font-size-base);
      color: var(--notice-text-secondary);
  }

  /* Add styles for the member image modal */
  .member-image-modal {
      position: absolute;
      top: -150px;
      left: 50%;
      transform: translateX(-50%) scale(0);
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
      z-index: 100;
      background-color: var(--notice-bg-secondary);
      border: 3px solid var(--notice-accent);
  }

  .member-image-modal img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .team-member:hover .member-image-modal {
      transform: translateX(-50%) scale(1);
      opacity: 1;
  }

  @media screen and (max-width: 768px) {
      .team-grid {
          grid-template-columns: 1fr;
      }

      .team-section {
          margin-bottom: var(--spacing-2xl);
      }
  }

  .nav-separator {
      height: 24px;
      width: 1px;
      background-color: var(--notice-grey);
      margin: 0 var(--spacing-md);
      opacity: 0.6;
  }

  /* For mobile view */
  @media screen and (max-width: 768px) {
      .nav-separator {
          height: 1px;
          width: 80%;
          margin: var(--spacing-xs) auto;
      }
  }