/* Font Face Declarations (Keep These) */
@font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nYivN04w.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  
  @font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nRivN04w.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  
  @font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nWivN04w.woff2) format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
  }
  
  @font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nbivN04w.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  
  @font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  @font-face {
    font-family: Rajdhani;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/rajdhani/v16/LDIxapCSOBg7S-QT7p4GM-aUWA.woff2) format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
  }
  
  @font-face {
    font-family: Rajdhani;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/rajdhani/v16/LDIxapCSOBg7S-QT7p4JM-aUWA.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  
  @font-face {
    font-family: Rajdhani;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/rajdhani/v16/LDIxapCSOBg7S-QT7p4HM-Y.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  @font-face {
    font-family: Rajdhani;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/rajdhani/v16/LDI2apCSOBg7S-QT7pa8FvOqeef2kg.woff2) format("woff2");
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
  }
  
  @font-face {
    font-family: Rajdhani;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/rajdhani/v16/LDI2apCSOBg7S-QT7pa8FvOleef2kg.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  
  @font-face {
    font-family: Rajdhani;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/rajdhani/v16/LDI2apCSOBg7S-QT7pa8FvOreec.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  /* Global Styles (Keep These) */
  body {
    font-family: sans-serif;
    color: #f0f0f0;
    background-color: #121212;
    margin: 0;
    padding: 0;
    line-height: 1.6;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: Rajdhani, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #00bcd4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
  }
  
  h1 {
    font-size: 3rem;
  }
  
  h2 {
    font-size: 2.5rem;
    color: #ff4081;
  }
  
  h3 {
    font-size: 1.8rem;
  }
  
  a {
    color: #00bcd4;
    text-decoration: none;
    transition: color .3s ease;
  }
  
  a:hover {
    color: #008ba7;
    text-decoration: underline;
  }
  
  .primary-button,
  .secondary-button {
    display: inline-block;
    padding: 1.2rem 2.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-family: Rajdhani, sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: background-color .3s ease, transform .2s ease-in-out, box-shadow .2s ease-in-out;
    box-shadow: 0 2px 6px #0000004d;
    border: 2px solid transparent;
    background-color: #00bcd4;
    color: #000;
    cursor: pointer;
  }
  
  .primary-button:hover,
  .secondary-button:hover {
    background-color: #008ba7;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px #0006;
    border-color: #00bcd4;
  }
  
  .primary-button:focus,
  .secondary-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px #00bcd480;
  }
  
  .secondary-button {
    background-color: #ff4081;
    color: #fff;
  }
  
  .secondary-button:hover {
    background-color: #d81b60;
    border-color: #ff4081;
  }
  
  .secondary-button:focus {
    box-shadow: 0 0 0 3px #ff408180;
  }
  
  .text-accent-primary {
    color: #00bcd4;
  }
  
  .text-accent-secondary {
    color: #ff4081;
  }
  
  .section-dark {
    background-color: #1e1e1e;
    color: #eee;
    padding: 2rem;
  }
  
  .section-light {
    background-color: #2c2c2c;
    color: #ccc;
    padding: 2rem;
  }
  
  .section-gradient {
    background: linear-gradient(135deg, #280154, #000 60%);
    color: #f0f0f0;
    padding: 2rem;
  }
  
  /* --- Responsive Grid Layout (Example - Adapt as needed) --- */
  
  /* General container for sections */
  .container {
    max-width: 1200px;
    /* Adjust as needed */
    margin: 0 auto;
    padding: 1rem;
  }
  
  /* Example: Grid layout for a section with cards or items */
  .grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Responsive columns */
    gap: 1rem;
  }
  
  .grid-item {
    /* Styles for individual grid items (cards, etc.) */
    background-color: #2c2c2c;
    /* Example */
    padding: 1rem;
    border-radius: 8px;
  }
  
  /* --- Adaptation for "Why Join Us" Section (index.html) --- */
  
  .reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Responsive columns */
    gap: 1rem;
  }
  
  .reason-card {
    background-color: #2c2c2c;
    /* Example background color for cards */
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    /* Center content within cards */
  }
  
  .reason-card i {
    margin-bottom: 1rem;
    /* Spacing for icons */
  }
  
  .reason-card h3 {
    font-size: 1.5rem;
    /* Slightly smaller heading */
    margin-bottom: 0.5rem;
  }
  
  /* --- Responsive Adjustments for Headings and Text --- */
  
  @media (max-width: 768px) {
    h1 {
      font-size: 2rem;
      /* Smaller main heading */
    }
  
    h2 {
      font-size: 1.75rem;
      /* Smaller subheading */
    }
  
    body {
      /* Or a specific container for your text */
      font-size: 1rem;
      /* Adjust base font size if needed */
      line-height: 1.4;
      /* Adjust line height for readability */
    }
  
    .container {
      padding: 0.5rem;
    }
  
    .reasons {
      grid-template-columns: 1fr;
      /* One column on small screens */
    }
  
    .reason-card {
      padding: 1rem;
      /* Less padding on small screens */
    }
  
    .reason-card h3 {
      font-size: 1.25rem;
      /* Even smaller heading on mobile */
    }
  }