/* =========================================================
   DATAMIND CONTACT PAGE
========================================================= */

/* =========================================================
   HERO
========================================================= */

.dm-contact-hero {

  padding: var(--space-xxl) 0;

}

.dm-contact-hero h1 {

  max-width: 850px;

  margin: 20px auto;

}

.dm-contact-hero p {

  max-width: 750px;

  margin: 0 auto;

}

/* =========================================================
   CONTACT LAYOUT
========================================================= */

.dm-contact-layout {

  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: 60px;

  align-items: start;

}

.dm-contact-info h2 {

  margin-bottom: var(--space-md);

}

.dm-contact-info > p {

  margin-bottom: var(--space-lg);

}

/* =========================================================
   CONTACT CARDS
========================================================= */

.dm-contact-card {

  display: flex;

  gap: 18px;

  align-items: flex-start;

  background: #ffffff;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: 22px;

  margin-bottom: 18px;

  box-shadow: var(--shadow-sm);

}

.dm-contact-card span {

  font-size: 1.8rem;

}

.dm-contact-card h3 {

  font-size: 1.1rem;

  margin-bottom: 5px;

}

/* =========================================================
   FORM
========================================================= */

.dm-contact-form-wrapper {

  background: #ffffff;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: 40px;

  box-shadow: var(--shadow-md);

}

.dm-contact-form-wrapper h2 {

  margin-bottom: var(--space-lg);

}

.dm-contact-form {

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.dm-form-group {

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.dm-form-group label {

  font-weight: 600;

  color: var(--color-text-main);

}

.dm-form-group input,
.dm-form-group select,
.dm-form-group textarea {

  width: 100%;

  padding: 14px 16px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  font: inherit;

  background: var(--color-bg-main);

  color: var(--color-text-main);

}

.dm-form-group input:focus,
.dm-form-group select:focus,
.dm-form-group textarea:focus {

  outline: none;

  border-color: var(--color-primary);

  box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);

}

.dm-form-group textarea {

  resize: vertical;

}

.dm-contact-status {

  font-weight: 600;

}

.dm-contact-status.success {

  color: var(--color-primary);

}

.dm-contact-status.error {

  color: #dc2626;

}

/* =========================================================
   CTA
========================================================= */

.dm-contact-cta {

  padding: var(--space-xxl) 0;

  background: var(--color-bg-section);

}

.dm-contact-cta h2 {

  margin-bottom: var(--space-md);

}

.dm-contact-cta p {

  max-width: 700px;

  margin: 0 auto;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

  .dm-contact-layout {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 576px) {

  .dm-contact-form-wrapper {

    padding: 28px;

  }

}