.elementor-8500 .elementor-element.elementor-element-5349e3c{--display:flex;}/* Start custom CSS for html, class: .elementor-element-3ea51a55 *//* Container that holds the buttons */
.agenda-buttons {
  display: flex;                 /* make buttons horizontal */
  justify-content: space-between; /* spread them evenly */
  align-items: center;           /* vertical alignment */
  width: 100%;                   /* full width container */
  max-width: 800px;              /* optional max width */
  margin: 0 auto;                /* center container */
}

/* Individual buttons */
.agenda-btn {
  padding: 10px 20px;
  background-color: transparent; /* default */
  color: var(--e-global-color-20858dd6); /* blue text */
  border: 1px solid var(--e-global-color-20858dd6); /* blue border */
  text-decoration: none;
  font-weight: 500;
  border-radius: 50px;
  text-align: center;
  transition: all 0.3s ease;
  flex-shrink: 0;                /* prevent buttons from shrinking */
}

/* Mobile-friendly buttons */
@media (max-width: 767px) { /* target screens smaller than 768px */
  .agenda-buttons {
    display: flex;                 /* make buttons horizontal */
    justify-content: space-between; /* spread them evenly */
    gap: 8px; /* smaller spacing */
    width: 100%;
  }

  .agenda-btn {
    padding: 8px 12px; /* smaller padding */
    font-size: 14px; /* smaller text */
  }
}

/* Hover and active styling */
.agenda-btn:hover,
.agenda-btn.active {
  background-color: #ffffff;
  color:  var(--e-global-color-9e1f7be);
  border-color var(--e-global-color-9e1f7be)

/* Hover effect */
.agenda-btn:hover {
  background-color: #ffffff; /* white background */
  color: var(--e-global-color-9e1f7be); /* blue text */
  border-color: var(--e-global-color-9e1f7be); /* blue border */
}

/* Active page (current page) */
.agenda-btn.active {
  background-color: #ffffff; /* same as hover */
  color: var(--e-global-color-9e1f7be); /* same as hover */
  border-color: var(--e-global-color-9e1f7be);
}/* End custom CSS */