body {
      margin: 0;
      background-color: #0C0920;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color: #fff;
    }

    .site-header {
      height: 100px;
      width: 100%;
      background-color: #080F28;
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;          
      align-items: center;     
      box-sizing: border-box;
    }

      .projects-inner {
        display: flex;
        flex-direction: column;
        gap: 1rem; 
        align-items: stretch;
      }

    .container {
      max-width: 1700px;
      width: 100%;
      margin: 0 auto;
      padding: 0 0.5rem;
      display: flex;             
      align-items: center;
      gap: 1rem;
    }

    .brand {
      color: #6fc3ff;
      text-decoration: none;
      font-weight: 600;
      margin-left: 0.2rem;
      font-size: 1.125rem;
    }

    .site-nav {
      margin-left: auto;
     margin-right: 0.2rem;
    }

    .site-nav ul {
      display: flex;
      gap: 1rem;
      margin: 0;
      padding: 0;
      list-style: none;
      align-items: center;
    }

    .site-nav a {
      color: #fff;
      text-decoration: none;
      padding: 0.35rem 0.5rem;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
    }
    .site-nav a:hover {
      background: rgba(255,255,255,0.04);
      color: #6fc3ff;
    }

    .nav-toggle { display: none; }

    .site-main {
      text-align: center;
      min-height: calc(100vh - 100px); /* subtract header height */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      box-sizing: border-box;
    }

    .site-main .content {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
      padding: 2rem 1rem;
    }

      .project-card {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.04);
        padding: 1rem;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-width: 48rem;   
      }
      .project-title { margin: 0; font-size: 1.05rem; color: #fff; }
      .project-desc { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.95rem; flex: 1; }
      .project-link { align-self: flex-start; color: var(--accent); text-decoration: none; padding: 0.3rem 0.5rem; border-radius: 4px; }
      .project-link:hover { background: rgba(111,195,255,0.06); }

    @media (max-width: 720px) {
      .nav-toggle { display: inline-flex; margin-left: auto; background: none; border: 0; color: #fff; }
      .site-nav { display: none; width: 100%; }
      .site-nav.open { display: block; }
      .site-nav ul { flex-direction: column; gap: 0.5rem; padding: 0.5rem 0; }
      .container { position: relative; }
    }

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Adjust the spacing as needed */
  align-items: stretch; /* Stretch the links to fill the container */
  width: 300px; /* Set a fixed width for the column */
  margin: 0 auto; /* Center the column horizontally */
}

.contact-links a {
  text-decoration: none;
  color: #fff; /* White text */
  background-color: #6fc3ff; /* Button background color */
  padding: 12px 20px; /* Add padding for button appearance */
  border-radius: 8px; /* Rounded corners */
  text-align: center; /* Center the text */
  display: block; /* Make the link a block-level element */
  transition: background-color 0.3s ease; /* Add a smooth transition */
}

.contact-links a:hover {
  background-color: #55a5d8; /* Darker background color on hover */
  color: #fff; /* Ensure text remains white on hover */
}