/* ===== Base / Layout ===== */
body { margin:0; font-family: Arial, sans-serif; color:#000; }

header {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px; border-bottom:2px solid #000;
}
header nav a { margin-left:20px; text-decoration:none; color:#000; font-weight:bold; }

section { padding:50px 20px; max-width:1100px; margin:auto; }
h1, h2 { text-align:center; font-weight:900; }

/* ===== Meets grid ===== */
.meets {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:30px;
  margin-top:40px;
}
.meet-card { text-align:center; }

/* Buttons above images */
.meet-button {
  display:inline-block;
  padding:10px 20px;
  background:#000;
  color:#fff;
  text-decoration:none;
  border-radius:20px;
  font-weight:bold;
}
.meet-button.disabled {
  opacity:0.6;
  pointer-events:none;
}

/* Robust 2:3 image box */
.img-23 {
  position:relative;
  width:100%;
  aspect-ratio:2 / 3;
  overflow:hidden;
  border-radius:8px;
  margin-top:10px;
}
.img-23 img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* ===== About (square image ~half width) ===== */
.about {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:center;
}
.about-text { text-align:left; }

.about-img-wrapper {
  position:relative;
  width:50%;         /* adjust to 40%/60% if you want smaller/bigger */
  margin:0 auto;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:8px;
}
.about-img-wrapper img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* ===== Contact / Form ===== */
.contact-info { margin-bottom:20px; }
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:20px;
}
form { display:grid; gap:12px; }
input, textarea {
  padding:10px; font-size:16px; border:1px solid #ccc; border-radius:4px; width:100%;
}
button {
  padding:10px; font-size:16px; background:#000; color:#fff;
  border:none; border-radius:4px; cursor:pointer;
}

/* ===== Mobile ===== */
@media (max-width:768px) {
  .about { grid-template-columns:1fr; }
  .about-img-wrapper { width:100%; }
  .contact-grid { grid-template-columns:1fr; }
}