.og-contact-page { overflow: hidden; background: #f4f5f8; }

.og-contact-template-card {
  min-height: 214px;
  color: #fcfcfc;
  box-shadow: 0 22px 50px -36px rgba(11, 12, 16, .65);
}

.og-contact-template-card > *:not(.og-contact-card-overlay) { position: relative; z-index: 1; }

.og-contact-card-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  user-select: none;
}

.og-contact-card-overlay--one { top: -187px; left: 174px; width: 350px; height: 350px; transform: rotate(-78deg); }
.og-contact-card-overlay--two { top: -206px; left: -36px; width: 350px; height: 350px; transform: rotate(62deg); }
.og-contact-card-overlay--three { top: -264px; left: -255px; width: 450px; height: 450px; }

.og-contact-country-role {
  color: rgba(252, 252, 252, .82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.og-contact-template-form { border: 1px solid rgba(26, 26, 28, .05); box-shadow: 0 30px 80px -54px rgba(26, 26, 28, .5); }
.og-contact-template-form input,
.og-contact-template-form select,
.og-contact-template-form textarea { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.og-contact-template-form input:focus,
.og-contact-template-form select:focus,
.og-contact-template-form textarea:focus { border-color: #8b00f0; background: #fff; box-shadow: 0 0 0 4px rgba(139, 0, 240, .08); }
.og-contact-template-form input:user-invalid,
.og-contact-template-form select:user-invalid,
.og-contact-template-form textarea:user-invalid { border-color: #cf3f4f; }

.og-contact-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.og-contact-consent { cursor: pointer; }
.og-contact-status { padding: 12px 14px; border-radius: 11px; color: #9a2f3d; background: #fff0f2; font-size: 13px; line-height: 1.45; }
.og-contact-submit { display: inline-flex !important; min-height: 48px; align-items: center; justify-content: center; }
.og-contact-submit:disabled { opacity: .68; cursor: wait; }
.og-contact-submit__loading { align-items: center; gap: 9px; }
.og-contact-submit__loading > span { width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: og-contact-spin .7s linear infinite; }

.og-contact-success { min-height: 540px; padding: 110px 24px; text-align: center; }
.og-contact-success > span { display: grid; width: 72px; height: 72px; margin: 0 auto 24px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #8f00ff, #4d19b8); box-shadow: 0 18px 34px -18px rgba(94, 21, 184, .62); }
.og-contact-success svg { width: 37px; height: 37px; }
.og-contact-success h3 { margin: 0 0 10px; font-family: "Inter Tight", sans-serif; font-size: 34px; font-weight: 600; letter-spacing: -.035em; }
.og-contact-success p { max-width: 420px; margin: 0 auto; color: #686a72; font-size: 16px; line-height: 1.6; }

#contact-map { z-index: 0; background: #e9ecef; }
#contact-map .leaflet-control-attribution { font-size: 10px; }
.og-contact-map-marker { display: grid !important; width: 32px !important; height: 32px !important; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #8b00f0; box-shadow: 0 8px 20px rgba(69, 13, 112, .35); font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.og-contact-map-popup { font-family: "Inter Tight", sans-serif; font-size: 13px; font-weight: 700; }

[dir="rtl"] .og-contact-card-overlay--one { right: 174px; left: auto; }
[dir="rtl"] .og-contact-card-overlay--two { right: -36px; left: auto; }
[dir="rtl"] .og-contact-card-overlay--three { right: -255px; left: auto; }

@keyframes og-contact-spin { to { transform: rotate(360deg); } }

@media (max-width: 1023px) {
  .og-contact-template-card { min-height: 230px; }
}

@media (max-width: 767px) {
  .og-contact-page > section:first-child { padding-top: 132px; }
  .og-contact-template-card { min-height: 214px; padding: 34px 28px; }
  .og-contact-template-form { border-radius: 22px; }
  .og-contact-success { min-height: 420px; padding: 70px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .og-contact-page *, .og-contact-page *::before, .og-contact-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}