html, body {margin: 0 auto; max-width: 1920px;}

.top {
  margin: 0 auto;
  width: 100%;          /* full width of viewport */
  max-width: 1222px;    /* but won’t exceed this on large screens */
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;    /* stay side by side until stacking */
  box-sizing: border-box;
  padding: 0 10px;      /* small padding on edges */
}

.top img {
  flex: 1 1 0;          /* grow and shrink equally */
  max-width: calc(50% - 10px);  /* half container minus half the gap */
  height: auto;
  margin-top: 50px;
  object-fit: contain;
}
  
  /* CONTENT AREA */
  .content {
    margin: 0 auto;
    max-width: 1222px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 2.5em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 20px;
    margin-top: 150px;
  
  }
  .contact-container {
    margin: 20px auto;
    width: 100%;
    max-width: 1222px;
    padding: 10px;
    text-align: center;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    box-sizing: border-box;
  }
  
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }
  
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    border: 2px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box; /* prevents overflow */
  }
  
  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: #333;
  }
  
  .contact-form button {
    width: 100%;
    padding: 12px;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #333;
    color: white;
    transition: 0.2s;
    box-sizing: border-box;
  }
  
  .contact-form button:hover {
    background: #555;
  }


/* STACK IMAGES WHEN SCREEN <= 799px */
@media (max-width: 574px) {
  .top {
      flex-direction: column;
      align-items: center;
      flex-wrap: wrap;
  }

  .top img {
      flex: unset;
      max-width: 90%; /* smaller than container, responsive */
  }
}