/* ========================================================================== 
   3. Page-Specific Sections
   ========================================================================== */

/* --- Contact Page --- */
.contact-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 40px;
  justify-content: center; /* Center content on smaller screens */
}

.contact {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  width: 100%; /* Ensure it scales on small screens */
}

.contact-block img {
  width: 450px;
  height: 450px; /* Maintain square shape */
  object-fit: cover; /* Prevent stretching */
  border-radius: 1%;
}

/* ========================================================================== 
   Responsive for Phones & Small Screens
   ========================================================================== */
@media (max-width: 768px) {
  .contact-block {
    flex-direction: column; /* Stack elements vertically */
    padding: 20px;
    gap: 15px;
  }

  .contact-block img {
    width: 100%;     /* Make image scale to container */
    max-width: 300px; /* Limit maximum width */
    height: auto;    /* Maintain aspect ratio */
  }

  .contact {
    padding: 10px;
    margin: 20px auto;
  }
}