/* hob/css/contact.css */

.contact.container {
    max-width: 600px;
    margin: 3rem auto;
    padding: 0 1rem;
  }
  
  .contact h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--color-accent);
  }
  
  .contact form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .contact label {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    color: var(--color-dark);
  }
  
  .contact input,
  .contact textarea {
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
  }
  
  .contact .btn-primary {
    align-self: flex-start;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-accent);
    color: var(--color-light);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  
  .contact .btn-primary:hover {
    opacity: 0.9;
  }
  
  /* Feedback messages */
  .contact .success,
  .contact .error {
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.95rem;
  }
  
  .contact .success {
    background-color: #e6f9e6;
    color: #2d662d;
    border: 1px solid #2d662d;
  }
  
  .contact .error {
    background-color: #fbeaea;
    color: #662d2d;
    border: 1px solid #662d2d;
  }
  
  /* Responsive */
  @media (max-width: 480px) {
    .contact.container {
      margin: 2rem auto;
    }
    .contact h2 {
      font-size: 1.5rem;
    }
  }