.section-content-button-container {
  display: flex;
  flex-wrap: wrap;
  border-radius: var(--border-radius-24);
  overflow: hidden;
  background: #fff;
  min-height: 480px;
  gap: var(--mp64);
}

.section-content-button-container.reverse {
  flex-direction: row-reverse;
}

.section-content-text {
  flex: 1 1 45%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: left;
  padding-left: var(--mp32);
}

.section-content-detail {
  margin-bottom: 0px;
}

.content-detail-html {
  text-align: left;
}

.content-detail-html h4,
.content-detail-html p,
.content-detail-html ul,
.content-detail-html ol,
.content-detail-html li {
  text-align: left;
}

.content-detail-html h4 {
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16);
  line-height: 1.5;
  margin: 0 0 12px;
  color: rgba(75, 85, 99, 1);
}

.content-detail-html ul,
.content-detail-html ol {
  margin: 1em 0 1em 1.5em;
  padding: 0;
}

.content-detail-html ul {
  list-style-type: disc;
}

.content-detail-html ul ul {
  list-style-type: circle;
}

.content-detail-html ul ul ul {
  list-style-type: square;
}

.content-detail-html ol {
  list-style-type: decimal;
}

.content-detail-html ol ol {
  list-style-type: lower-alpha;
}

.content-detail-html li {
  margin-bottom: 0.5em;
  line-height: 1.6;
}

.section-content-image {
  flex: 1 1 45%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 480px;
  margin: 0 var(--mp32);
  border-radius: var(--border-radius-24);
  overflow: hidden;
}

.section-content-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(282.95deg, rgba(38, 15, 70, 0) 1.56%, #260F46 102.58%);
}

.content-image-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  width: 100%;
  color: #fff;
}

.content-text-block {
  margin-bottom: var(--mp32);
}

.content-text-block .content-title {
  font-family: var(--font-canela);
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-36);
  line-height: 1.5;
  margin: 0 0 var(--mp20);
  color: rgba(255, 255, 255, 1);
}

.content-text-block .content-sub-title {
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-20);
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.content-button-action {
  margin-top: 20px;
  text-align: center;
}

.button-content-action {
  display: inline-block;
}

.button-content-action:hover {
  background: #eee;
}

/* ========================= */
/* ✅ Responsive Styles */
/* ========================= */

/* Tablet */
@media (max-width: 1024px) {
  .section-content-button-container {
    gap: var(--mp32);
    min-height: auto;
  }

  .section-content-text,
  .section-content-image {
    flex: 1 1 100%;
    margin: 0;
  }

  .section-content-text {
    padding: var(--mp24);
  }

  .section-content-image {
    min-height: 360px;
    border-radius: var(--border-radius-16);
  }

  .content-title {
    font-size: var(--font-size-28);
  }

  .content-sub-title {
    font-size: var(--font-size-18);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .section-content-button-container {
    flex-direction: column;
    gap: var(--mp20);
  }

  .section-content-text,
  .section-content-image {
    flex: 1 1 100%;
    margin: 0;
  }

  .content-image-overlay {
    padding: 20px;
  }

  .content-title {
    font-size: var(--font-size-24);
    line-height: 1.3;
  }

  .content-sub-title {
    font-size: var(--font-size-16);
  }

  .button-content-action {
    width: 100%;
  }
}