.page-hero {
  position: relative;
  margin: 0;
  padding: 0;
}

.page-hero-image,
.page-hero-no-image {
  position: relative;
  width: 100%;
  height: auto;
  object-position: center bottom; /* Add this line */
  border-bottom: 8px solid #216d7f;
}

.page-hero-image img,
.page-hero-no-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: center bottom; /* Add this line */
}

.page-hero-no-image {
  background-color: #000000;
  background-image: url("https://belt.marketmentorsdev.com/wp-content/themes/belt-technologies-2025/public/page-hero-no-image.jpg");
  background-size: cover;
  background-position: center;
  height: 420px;
}

.page-hero-content-outer {
  width: 100%;
  background-color: #000000;
  border-top: 8px solid #216d7f;
}

.page-hero-content {
  max-width: 1280px;
  margin: 0 auto; /* Centers the box on the page */
  padding: 2rem; /* Keeps content from hitting the screen edges on smaller monitors */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.page-hero-content h1 {
  margin: 0;
  font-size: 2rem;
  color: white;
  text-align: left; /* Ensure left alignment */
}

/* Specific button overrides for the hero */
.page-hero-content .wp-block-button__link {
  width: auto !important; /* Overriding the 100% width in your global CSS */
  padding: 12px 20px !important; /* 20px padding left/right as requested */
  white-space: nowrap; /* Keeps text on one line */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .page-hero-content {
    /* Stack them again on mobile for better fit */
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1rem;
  }
  .page-hero-content h1 {
    font-size: 1.8rem;
    text-align: center;
  }
  .page-hero-content .wp-block-button__link {
    width: 100% !important; /* Full width usually looks better on mobile */
  }
}