.services {
  background-color: #f6f2e9;

  padding: 0 32px !important;
}

.services h2 {
  margin-top: 31px;
}

.service-subtitle {
  margin-top: 44px;
  text-align: center;
  padding: 0 360px;
}

.products {
  margin-top: 72px;
  margin-bottom: 72px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}

.product {
  width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.product img {
  height: 320px;
  width: 314px;
  object-fit: cover;
  box-shadow: 4px 4px 6px grey;
  margin-bottom: 8px;
}

.product p {
  margin-top: 8px;
  color: var(--color-primary);
  text-align: center;
}

.product span {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.568);
}

.product-title {
  font-weight: bold;
}

.products-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 31px;
}

.products-cta-btn {
  width: fit-content;
  background-color: var(--color-accent);
  padding: 8px 24px;
  color: var(--color-text);
  transition: all 0.3s;
}

.products-cta-btn:hover {
  cursor: pointer;
  background-color: var(--color-primary);
  color: white;
}

/* ===========================
   Responsives Design (Breakpoints)
   Range: 320px – 1920px
=========================== */

/* Extra Large Devices (1200px – 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
  .product img {
    height: 280px;
    width: 280px;
    object-fit: cover;
  }

  .product {
    width: 292px;
  }

  .products {
    margin-bottom: 44px;
  }

  .services {
    padding: 0 18px !important;
  }
}

@media (max-width: 1300px) {
  .services {
    padding: 0 18px !important;
  }

  .service-subtitle {
    padding: 0 120px;
  }

  .product img {
    height: 280px;
    width: 100%;
  }

  .products {
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 32px;
  }

  .product {
    width: 276px;
  }
}

/* Large Devices (992px – 1199px) */
@media (min-width: 992px) and (max-width: 1207px) {
  .product {
    width: 384px;
    margin-bottom: 32px;
  }

  .service-subtitle {
    padding: 0 72px;
  }
}

/* Medium Devices (768px – 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .product {
    width: 320px;
  }
  .products {
    margin-bottom: 32px;
  }

  .service-subtitle {
    padding: 0 72px;
  }
}

@media (max-width: 614px) {
  .product {
    width: 380px;
    margin-bottom: 32px;
  }
  .product span {
    margin-bottom: 4px;
  }

  .service-subtitle {
    padding: 0 72px;
  }
}

/* Extra Small Smartphones (320px – 575px) */
@media (max-width: 575px) {
  .product {
    width: 90%;
    margin-bottom: 24px;
  }

  .product span {
    margin-bottom: 4px;
  }

  .services {
    padding: 0 18px !important;
  }

  .service-subtitle {
    padding: 0 24px;
  }
}