.region-card-container {
    display: flex;
    justify-content: center; /* Centers cards horizontally */
    align-items: stretch; /* Ensures all cards have the same height */
    flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
    gap: 2rem; /* Space between the cards */
    padding: 3rem 1rem; /* Padding around the container */
    width: 100%;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
  }
  
  /* WordPress Editor Fix:
    Hides any paragraph tags that WordPress might automatically insert,
    which can show up as unwanted boxes in a flex container.
  */
  .region-card-container > p {
    display: none;
  }

  /* Styling for each individual card, adapted for a dark theme.
    The card itself is an anchor tag (<a>) to make the whole area clickable.
  */
  .region-card {
    background: rgba(40, 42, 54, 0.5); /* Semi-transparent dark background */
    backdrop-filter: blur(12px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border-radius: 20px; /* Rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle light border for definition */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* Dark shadow for floating effect */
    color: #f8f8f2; /* Light text color for contrast */
    text-decoration: none;
    text-align: center;
    padding: 4rem 5rem;
    width: 320px; /* Set a fixed width to make all cards the same size */
    box-sizing: border-box; /* Ensures padding is included in the total width */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
    display: flex; /* Use flexbox to center content vertically inside the card */
    justify-content: center;
    align-items: center;
  }

  /* Hover effect for the cards.
    The card will "lift" and the shadow will become more pronounced.
  */
  .region-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
  }
  
  /* Styling for the text inside the card */
  .region-card h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0;
    color: inherit; /* Inherits color from the parent .region-card */
  }

  /* Responsive adjustments for smaller screens (e.g., mobile phones).
    The layout will stack vertically.
  */
  @media (max-width: 960px) {
    .region-card-container {
      flex-direction: column;
      align-items: center;
    }
    .region-card {
      width: 80%; /* Cards take up more width on smaller screens */
      max-width: 400px;
    }
  }