/* Grid Container Styling */
.grid-container {
  display: grid;
  grid-template-columns: 60% 40%; /* Two columns: 60% and 40% */
  height: 20rem;
}

/* Grid Items */
.grid-item {
  padding: 1rem;
  background-color: #f9f9f9;
}

.right-corner {
  border-radius: 10px 10px 10px 0;
}

.left-corner {
  border-radius: 10px 0 0 10px;
}

/* Background Image for the 40% Section */
.grid-40 {
  background-image: url("../images/promo.webp"); /* Replace with your image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-left: none;
}

/* 📱 Responsive Design for Phones */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* Stack items vertically */
    height: auto; /* Let height adjust dynamically */
  }

  .grid-60,
  .grid-40 {
    width: 100%; /* Make sections full-width */
    border-radius: 10px; /* Keep consistent rounded corners */
  }

  .grid-40 {
    height: 15rem; /* Adjust background image height */
  }

  .right-corner {
    text-align: center; /* Center-align text */
    padding: 2rem; /* More spacing */
  }

  .cta-button {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    border-radius: 5px;
  }

  #contact-text {
    text-size-adjust: 60%;
  }
}