/* Reset and clean up the container for this page */
.online-section {
    max-width: none;               /* Full width of the page */
    width: 100%;
    margin: 0 auto;                /* Center the container */
    padding: 0;                    /* Remove default padding */
    box-sizing: border-box;        /* Include padding/borders in calculations */
    text-align: center;            /* Center-align text if needed */
  }
  
  /* Main container for the three columns */
  .online-section .flexorator4 {
    display: flex;                 /* Enable flex layout */
    /* flex-wrap: nowrap;             Prevent stacking on desktop */
    justify-content: center;       /* Center all items together */
    gap: 20px;                     /* Add spacing between columns */
    width: auto;                   /* Shrink-wrap to content */
    margin: 0 auto;                /* Center-align layout */
    box-sizing: border-box;        /* Consistent width calculations */
    padding: 0;
  }
  
  /* Card columns (Card 1 and Card 2 only) */
  .online-section .flexorator4 > .sectionator2:not(.calendar-col) {
    flex: 0 0 auto;                /* Let cards size themselves naturally */
    padding: 10px;                 /* Add internal spacing */
    box-sizing: border-box;
    background-color: transparent; /* No backdrop for cards */
    border: none;                  /* No border */
    border-radius: 0;              /* No rounded corners */
    text-align: left;              /* Align text to the left */
  }
  
  /* Calendar column */
  .online-section .flexorator4 > .calendar-col {
    flex: 0 0 auto;                /* Maintain sizing behavior */
    width: 380px;                  /* Fixed width */
    padding: 10px;                 /* Internal spacing */
    box-sizing: border-box;
    background-color: transparent; /* No backdrop for calendar */
    border: none;                  /* No border */
    border-radius: 0;              /* No rounded corners */
    text-align: left;
  }
  
  /* Optional: Specific content alignment for cards' content */
  .online-section .flard1 {
    text-align: center;            /* Center the content inside flard1 */
  }
  
  /* Light mode variables */
  :root {
    --bg-color: #ffffff;           /* White background for light mode */
    --border-color: #ddd;          /* Light border color */
    --text-color: #000000;         /* Black text color */
  }
  
  /* Dark mode variables */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-color: #121212;         /* Dark background */
      --border-color: #444;        /* Dark border color */
      --text-color: #f0f0f0;       /* Light text color */
    }
  }

@media only screen and (max-width: 600px) {
  .online-section .flexorator4 {
    flex-wrap: wrap; /* Stack vertically */
    justify-content: center; /* Center-align stacked items */
    gap: 10px; /* Adjust spacing between stacked items */
  }

  .online-section .flexorator4 > .sectionator2,
  .online-section .flexorator4 > .calendar-col {
    flex: 0 0 100%; /* Full width for stacked items */
    max-width: 100%;
    padding: 0; /* Remove padding to prevent overflow */
    margin: 0 auto; /* Center-align within the parent */
    text-align: center; /* Center-align text for mobile view */
  }
}

/* New responsive rule - targeting the hierarchy step-by-step */
@media (max-width: 1060px) {
  .flexorator4 {
      display: flex;
      flex-wrap: wrap; /* Enable wrapping */
      gap: 20px; /* Maintain spacing */
      justify-content: center; /* Center all items */
  }

  .flexorator4 > .sectionator2,
  .flexorator4 > .calendar-col {
      flex: 1 1 100%; /* Let items stretch to full width */
      max-width: 100%; /* Enforce width boundaries */
      margin: 0; /* Ensure consistent centering */
  }

  .sectionator2 .flard1,
  .calendar .calendar-header {
      text-align: center; /* Make content visually centered */
  }
}

.infoContainer {
  display: inline-flex; /* Inline so it doesn't take a full block */
  align-items: center; /* Vertically aligns text with the button */
  gap: 10px; /* Adds space between the text and the button */
}

.infoContainer span {
  font-family: Arial, sans-serif; /* Keep it consistent */
  font-size: 0.9rem;
  color: var(--textColor, #333); /* Matches your theme */
}

.globalButton2,
.aquaStyle {
  cursor: pointer; /* Ensures the pointer shows */
}