.hero-section {
  position: relative;
  width: 100vw; /* Full viewport width */
  margin-left: calc(-50vw + 50%); /* Break out of container constraints */
  aspect-ratio: 2.22 / 1; /* Maintain 2.22:1 ratio */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden; /* Prevent any content overflow */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Align text to the right */
}

.hero-textbox {
  width: 48%; /* Increased width from 45% to 48% */
  max-width: 535px; /* Increased max width by ~7% */
  background: rgba(0, 0, 0, 0.7); /* Black with opacity */
  color: var(--mcbb-text); /* Use light text color */
  padding: 2.14rem; /* Increased padding by ~7% */
  border-radius: 8px;
  margin-right: 5%; /* Keep the same horizontal position */
  text-align: left;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border: 2px solid #000; /* Changed border to black */
}

.hero-textbox p {
  font-family: 'Poppins', Arial, sans-serif; /* Replace 'Poppins' with your chosen font */
  font-size: 1.61rem;
  font-weight: 500; /* Adjust weight as needed */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  margin: 0;
}