/* CTA Hero Image 2 - Centered Layout */

section.cta-hero-image-2 {
  position  : relative;
  overflow  : hidden;
  min-height: 400px;
}

/* Dark overlay for background images */
section.cta-hero-image-2[data-bg]::before {
  content       : '';
  position      : absolute;
  top           : 0;
  left          : 0;
  right         : 0;
  bottom        : 0;
  background    : linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.7) 100%);
  z-index       : 1;
  pointer-events: none;
}

.cta-hero-2-inner {
  position: relative;
  z-index : 2;
}

.cta-hero-2-content-wrapper {
  position       : relative;
  display        : flex;
  align-items    : center;
  justify-content: center;
  min-height     : 400px;
}

/* Content Centered */
.cta-hero-2-content {
  position  : relative;
  z-index   : 2;
  text-align: center;
  max-width : 800px;
  margin    : 0 auto;
  padding   : var(--space-lg);
}

.cta-hero-2-heading h2 {
  margin     : 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.4);
}

.cta-hero-2-description p {
  margin     : 0;
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
}

.cta-hero-2-subtext p {
  margin     : 0;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.cta-hero-2-button .btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  min-width      : 200px;
}

/* Background Product Image */
.cta-hero-2-background-image {
  position      : absolute;
  right         : 0;
  bottom        : 0;
  width         : 40%;
  max-width     : 500px;
  height        : 100%;
  z-index       : 1;
  opacity       : 0.15;
  pointer-events: none;
}

.cta-hero-2-background-image img {
  width          : 100%;
  height         : 100%;
  object-fit     : contain;
  object-position: right bottom;
}

/* Mobile specific */
@media (max-width: 1023px) {
  .cta-hero-2-content-wrapper {
    min-height: 300px;
  }

  .cta-hero-2-content {
    padding: var(--space-md);
  }

  .cta-hero-2-background-image {
    width  : 60%;
    opacity: 0.1;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .cta-hero-2-content-wrapper {
    min-height: 500px;
  }

  .cta-hero-2-content {
    padding: var(--space-2xl);
  }
}