/* Contacts */
.contact {
  padding: 64px 24px 72px;
  background: radial-gradient(ellipse at 85% 0, rgba(36, 85, 87, .314), transparent 50%), #111d30;
  color: #eef4f9;
}
.contact__wrap { max-width: 1240px; margin-inline: auto; }
.contact h2 { margin-top: 50px; font-size: 30px; font-weight: 500; line-height: 1.16; letter-spacing: -1px; }
.contact section > h2:first-child { margin-top: 0; }
.contact__label { display: block; margin-bottom: 16px; color: #91e2ce; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.contact__layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }

.contact__intro { margin-bottom: 30px; }
.contact .contact__title { font-size: clamp(38px, 4vw, 56px); }
.contact__title em { color: #92e3d0; font-style: normal; }
.contact__intro p { margin-top: 22px; color: #c0cede; font-size: 18px; line-height: 1.8; }

.contact__item { display: flex; gap: 18px; padding: 26px 0; border-bottom: 1px solid rgba(139, 165, 189, .208); color: #edf5fa; }
.contact__icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 12px; background: rgba(145, 226, 206, .094); color: #91e2ce; font-size: 23px; }
.contact__item small { display: block; margin-bottom: 8px; color: #9eafc4; font-size: 11px; letter-spacing: 1.5px; }
.contact__item strong, .contact__item a { display: block; font-size: 18px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
.contact__item a:hover, a.contact__item:hover strong { color: #91e2ce; }

.contact__social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; font-size: 14px; }
.contact__social span { width: 100%; color: #aabed1; }
.contact__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(134, 220, 203, .333);
  border-radius: 50%;
  background: rgba(142, 227, 208, .063);
  color: #91e2ce;
  transition: background-color .2s, color .2s, transform .2s;
}
.contact__social svg { width: 21px; height: 21px; }
.contact__social a:hover { background: #91e2ce; color: #142d35; transform: translateY(-2px); }

.contact__panel { padding: 36px; border-radius: 22px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .133); color: #20354a; }
.contact__panel .contact__label { color: #157b6d; }
.contact__panel > p { margin: 16px 0 26px; color: #607184; }
.contact__form label { display: block; margin-bottom: 8px; color: #294456; font-size: 14px; font-weight: 600; }
.contact__form input, .contact__form textarea {
  display: block;
  width: 100%;
  height: 49px;
  margin-bottom: 19px;
  padding: 12px 15px;
  border: 1px solid #d2dfe5;
  border-radius: 10px;
  background: #f4f7f9;
  color: #20354a;
  font: 400 16px/1.6 Manrope, Arial, sans-serif;
}
.contact__form textarea { height: 140px; min-height: 140px; resize: vertical; }
.contact__form button { width: 100%; height: 52px; border: 0; border-radius: 10px; background: #183e40; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.contact__form button:hover { background: #24645d; }
.contact__form button:disabled { opacity: .6; }
.contact__form [role="status"] { margin-top: 16px; font-size: 15px; line-height: 1.7; }
.contact__trap { position: absolute; left: -10000px; }

.contact__map { display: grid; grid-template-columns: .8fr 1.2fr; margin-top: 58px; overflow: hidden; border: 1px solid rgba(115, 139, 163, .263); border-radius: 20px; background: #1d2f46; }
.contact__map > div { align-self: center; padding: 36px; }
.contact__map p { margin-top: 20px; color: #c2cedb; font-size: 17px; line-height: 1.875; }
.contact__map iframe { display: block; width: 100%; height: 330px; border: 0; }

@media (max-width: 800px) {
  .contact { padding: 44px 20px; }
  .contact__layout { grid-template-columns: 1fr; gap: 32px; }
  .contact__intro p br { display: none; }
  .contact__panel { padding: 26px; }
  .contact__map { grid-template-columns: 1fr; }
  .contact__map > div { padding: 28px; }
  .contact__map iframe { height: 290px; }
}