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

/* --- About Page --- */
.about {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 40px;
}

.about img {
  width: 350px;
  height: 350px; /* Perfect circle */
  object-fit: cover;
  border-radius: 50%;
}

.about-text {
  flex: 1;
  min-width: 250px;
}

/* ==========================================================================
   Responsive for Phones & Small Screens
   ========================================================================== */
@media (max-width: 768px) {
  .about {
    flex-direction: column; /* Stack image and text vertically */
    padding: 20px;
    gap: 15px;
    text-align: center; /* Center text under image */
  }

  .about img {
    width: 250px;  /* Reduce image size for phones */
    height: 250px;
    margin: 0 auto; /* Center the image */
  }

  .about-text {
    min-width: unset; /* Allow text to shrink naturally */
  }
}