.solutions-article-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  background-color: var(--black);
  color: white;
  position: relative;
  padding: 0rem 2rem;
}

.header-img {
  position: absolute;
  height: 100%;
  right: 0;
  z-index: 1; /* ensure it's behind other overlays if needed */
  mask: linear-gradient(to right, transparent 0%, black 20%);
  -webkit-mask: linear-gradient(to right, transparent 0%, black 20%);
}

.header-container {
  max-width: 1200px;
  width: 100%;
  padding: 6rem 0rem;
  padding-top: calc(6rem + 80px);
  z-index: 2;
}

.solutions-article-header .title {
  font-size: 3rem;
  font-weight: bold;
  padding-bottom: 2rem;
  width: 50%;
}

.solutions-article-header .subtitle {
  font-size: 1.3rem;
  width: 50%;
  opacity: 0.8;
}

.solutions-article-section {
  margin: auto;
  max-width: 1200px;
  padding: 5rem 2rem;
}

.solutions-article-section .sub {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  padding: 7rem 0rem;
  border-bottom: 1px solid black;
}

.sub-text {
  width: 100%;
}

.full-width {
  width: 100%;
}

.sub-title {
  font-size: 2rem;
  font-weight: 400;
  padding-bottom: 2rem;
  font-weight: bold;
}

.sub-body {
  font-size: 1.4rem;
  line-height: 2rem;
  opacity: 1;
  padding-bottom: 2rem;
}

.sub-body li {
  font-size: 1.4rem;
  padding: 0.5rem 0rem;
}

.sub-image-container {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sub-image {
  width: 100%;
  border-radius: 10px;
}

.padded {
  width: 10rem;
}

.summary-container {
  width: 100%;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.sum-container {
  width: 100%;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.summary-section {
  flex-direction: row;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem 2rem;
  padding-top: 5rem;
}

.summary-inside {
  max-width: 1200px;
  width: 100%;
  display: flex;
  gap: 5rem;
  justify-content: center;
  align-items: center;
  padding-bottom: 5rem;
  border-bottom: 1px solid black;
}

.section-inside {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 5rem;
  border-bottom: 1px solid black;
}

.summary {
  padding-bottom: 4rem;
  font-size: 1.2rem;
  line-height: 2rem;
}

.summary-title {
  /* max-width: 1200px;
  width: 100%; */
  font-size: 2.5rem;
  padding-bottom: 2rem;
  font-weight: bold;
}

.sum-text {
  width: 75%;
}

.sum-img {
  width: 25%;
}

.systems-container {
}

.cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.get-started {
  padding: 2rem;
  color: white;
  background-color: #000000;
  font-size: 3rem;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.get-started:hover {
  opacity: 0.7;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .summary-inside {
    flex-direction: column;
  }

  .sub-image-container {
    width: 100%;
  }

  .sum-container {
    flex-direction: column-reverse;
  }

  .sum-text {
    width: 100%;
  }

  .sum-img {
    width: 50%;
  }

  .cta-container {
    width: 100%;
  }

  .summary-title {
    font-size: 2.1rem;
  }

  .solutions-article-header .title {
    width: 100%;
        font-size: 2.7rem;
  }

  .solutions-article-header .subtitle {
    width: 100%;
    opacity: 1;
  }

  .header-img {
    position: absolute;
    height: 100%;
    right: 0;
    z-index: 1;
    mask: linear-gradient(to right, transparent 0%, black 20%);
    -webkit-mask: linear-gradient(to right, transparent 0%, black 95.1%);
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* Styles for small devices */
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /* Tablet styles */
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* Desktop styles */
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /* Large desktop styles */
}