/* =========================================================
   DATAMIND HOME PAGE
========================================================= */

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

.dm-hero {

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

}

.dm-hero-wrapper {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-xl);

}

.dm-hero-content {

  flex: 1;

}

.dm-hero-tag {

  display: inline-block;

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

  color: var(--color-primary);

  font-weight: 600;

}

.dm-hero-title {

  font-size: 2rem;

  line-height: 1.1;

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

}

.dm-hero-subtitle {

  max-width: 600px;

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

}

.dm-hero-actions {

  display: flex;

  gap: var(--space-md);

  flex-wrap: wrap;

}

.dm-hero-image {

  flex: 1;

  display: flex;

  justify-content: center;

}

.dm-hero-image img {

  max-width: 600px;

  width: 100%;

}

/* =========================================================
   SERVICES
========================================================= */

.dm-service-card {

  padding: 30px;

}

.dm-service-card h3 {

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

}

/* =========================================================
   PRODUCTS
========================================================= */

.dm-products-section {

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

}

.dm-product-card {

  padding: 30px;

}

.dm-product-card h3 {

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

}

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

.dm-home-cta {

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

}

.dm-home-cta h2 {

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

}

.dm-home-cta p {

  max-width: 700px;

  margin: 0 auto;

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 992px) {

  .dm-hero-wrapper {

    flex-direction: column;

    text-align: center;

  }

  .dm-hero-subtitle {

    margin-left: auto;

    margin-right: auto;

  }

  .dm-hero-actions {

    justify-content: center;

  }

}