/* ADD YOUR CUSTOM CSS BELOW THIS LINE */
.special-button {
    font-size: 15px; /* Adjust the size as needed */
}

/* Adjust the margin and padding if necessary to keep the buttons consistent */
.special-button img {
    width: 20px; /* Ensure the image size remains consistent */
    vertical-align: middle; /* Align the image with the text */
    margin-right: 5px; /* Add some space between the image and the text */
}

.special-button {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px; /* Adjust the padding if needed */
}

.container {
  position: relative;
}

.card {
  display: flex;
  flex-direction: row; /* Ensure items are in a row by default */
  position: relative;
  overflow: hidden; /* Ensure the card respects its boundaries */
}

.card-content {
  flex: 1; /* Allow content to take available space */
}

.card-image {
  position: relative;
  max-width: 35%; /* Ensure image does not exceed 35% of container width */
}

.card img {
  width: 100%; /* Ensure image takes full width of its container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px; /* Optional: To ensure rounded corners */
}

/* Styles for smaller screens */
@media (max-width: 768px) {
  .card {
    flex-direction: column; /* Stack items vertically on small screens */
    overflow: visible; /* Allow content to flow properly */
  }

  .card img {
    position: relative; /* Remove absolute positioning */
    width: 100%;
    margin-top: 1rem;
  }

  .card-content, .card-image {
    max-width: 100%; /* Ensure both take full width on small screens */
  }
}