/* ===========================================
   ZenOps - Contact Section Styles
   Source: Figma CSS Export (STRICT)
   =========================================== */

.contact {
  position: relative;
  width: 1512px;
  height: 827px;
}

/* Header */
.contact__kicker {
  position: absolute;
  width: 633px;
  left: 80px;
  top: 0px;
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 120%;
  letter-spacing: 0.03em;
  color: #3BFF9A;
  margin: 0;
}

.contact__title {
  position: absolute;
  width: 778px;
  left: 80px;
  top: 53px;
  font-family: 'Clash Grotesk', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 110%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  margin: 0;
}

.contact__subtitle {
  position: absolute;
  width: 435px;
  left: 80px;
  top: 188px;
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 120%;
  color: #A0B6D9;
  margin: 0;
}

/* Office Info */
.contact__office {
  position: absolute;
  width: 436px;
  left: 80px;
  top: 372px;
}

.contact__office-title {
  font-family: 'Clash Grotesk', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #F4F6FB;
  margin: 0 0 8px 0;
}

.contact__office-label {
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #3BFF9A;
  margin: 0 0 24px 0;
}

.contact__office-address {
  font-family: 'Clash Grotesk', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.02em;
  color: #F4F6FB;
  margin: 0;
}

.contact__office-address span {
  display: block;
}

.contact__office-phone {
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 120%;
  color: #A0B6D9;
  margin: 16px 0 0 0;
}

.contact__office-email {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 120%;
  margin: 8px 0 0 0;
}

.contact__office-email a {
  color: #3BFF9A;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.contact__office-email a:hover {
  opacity: 0.8;
}

/* Form Card */
.contact__form-card {
  position: absolute;
  width: 664px;
  height: 711px;
  left: 767px;
  top: 56px;
}

.contact__form-bg {
  position: absolute;
  width: 664px;
  height: 711px;
  left: 0px;
  top: 0px;
  background: radial-gradient(459.76% 431.16% at 27.94% -293.06%, #292D7F 0%, #121826 100%);
  opacity: 0.5;
  border-radius: 15px;
}

.contact__form {
  position: relative;
  padding: 48px;
}

.contact__form-title {
  font-family: 'Clash Grotesk', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #F4F6FB;
  margin: 0 0 32px 0;
}

/* Form Fields */
.contact__field {
  margin-bottom: 24px;
}

.contact__label {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 120%;
  color: #A0B6D9;
  margin: 0 0 8px 0;
}

.contact__input,
.contact__textarea {
  box-sizing: border-box;
  width: 571px;
  height: 48px;
  background: rgba(18, 24, 38, 0.6);
  border: 1px solid rgba(160, 182, 217, 0.3);
  border-radius: 15px;
  padding: 12px 16px;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  color: #F4F6FB;
  outline: none;
}

.contact__input:focus,
.contact__textarea:focus {
  border-color: rgba(59, 255, 154, 0.5);
}

.contact__textarea {
  height: 105px;
  resize: none;
}

/* Submit Button */
.contact__submit {
  position: absolute;
  right: 48px;
  bottom: 48px;
  width: 205px;
  height: 40px;
  background: linear-gradient(90deg, #3BFF9A 0%, #A1F3FF 100%);
  box-shadow: 0px 10px 25px #134C66;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.01em;
  color: #121826;
  text-align: center;
}

.contact__submit:hover {
  opacity: 0.9;
}