/* Basic Reset */

    .contact-container {
      max-width: 800px;
      margin: auto;
      margin-top: 200px;
      margin-bottom: 100px;
      padding: 20px;
      background: var(--nav-bg);
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .contact-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .contact-header h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
      color: var( --title-color);
    }

    .contact-header p {
      font-size: 1.1rem;
      color: #666;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      color: var( --title-color);
    }

    .contact-form label {
      margin-top: 15px;
      font-weight: bold;
    }

    .contact-form span{
      color: rgb(223, 7, 7);
    } 

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
      margin-top: 5px;
      padding: 10px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }

    .contact-form button {
      margin-top: 20px;
      padding: 12px;
      background-color: var(--contact-btn);
      color: white;
      font-size: 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .contact-form button:hover {
      background-color: var(--pages-color);
    }