body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        header {
            background-color: #494e53;
            padding: 20px;
            text-align: center;
        }

        header img {
            max-width: 200px;
            height: auto;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px;
            text-align: center;
        }

        h1 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #494e53;
        }

        p {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 40px;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 30px;
            background-image: linear-gradient(#42A1EC, #0070C9);
            border: 1px solid #0077CC;
            color: white;
            text-decoration: none;
            font-size: 20px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .cta-button:hover {
            background-image: linear-gradient(#51A9EE, #147BCD);
        }

        footer {
            background-color: #494e53;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 14px;
        }

        footer a {
            color: white;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }
        
        .announcement-banner 
        {
            background-color: #8bc34a;
            padding: 15px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }

        .beta-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #8bc34a; /* Bright green color for the badge */
            color: white;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 3px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .banner-container {
            position: relative;
            display: inline-block;
            background-color: purple;
        }
        
        /* Simplified Ribbon Wrapping Style */
        .beta-ribbon {
            position: absolute;
            top: 140px;
            right: 0;
            width: 200px;
            background-color: #8bc34a; /* Bright green color for the ribbon */
            color: white;
            padding: 10px 0;
            font-size: 16px;
            text-align: center;
            transform: rotate(45deg);
            transform-origin: top right;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
            z-index: 1;
        }
        
        /* Style to make sure ribbon looks good on any image */
        .banner-container img {
            display: block;
            max-width: 100%;
            height: auto;
        }
      .ticker-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-around;
    
        /* Add a background image */
        background-image: url('./users/images/banner.png');
        background-size: cover; /* Cover the entire container */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* No repeat */
    
        /* Create a semi-transparent overlay effect */
        position: relative;
        padding: 20px; /* Add padding to give some space around tickers */
        color: white;
      }
    
      /* Adding an overlay for subtle effect */
      .ticker-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7); /* Black overlay with 50% opacity */
        z-index: 1; /* Put it behind the content */
      }
    
      /* Ensure the content is above the background overlay */
      .ticker-container > * {
        position: relative;
        z-index: 2;
      }
      .index-main
      {
          display: flex;
          justify-content: center;
          background: rgba(0, 0, 0, 0.8);
          width: 80%;
          color: white;
          margin: 0 auto;
          padding: 10px;
          height: 110vh;
      }
      
#calendar 
{
    background-color: #0F303E;
    /* background-color: red; */
    border-radius: 15px; /* Rounded corners */
    padding: 40px; /* Add spacing around the calendar */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Shadow for depth */
    color: white !important; /* Default text color */
    font-family: Arial, sans-serif; /* Clean font */
    cursor: default !important;
    width: 80%;
    position: relative;
    min-height: 100vh;
    height: auto;
    overflow: visible !important;
    margin-top: 10px;

}

#calendar a
{
    text-decoration: none !important;
    color: white !important;
    cursor: default !important;
}

/* Day of the Week Headers ('Sun', 'Mon', etc.) */
.fc-daygrid-weekday {
    background-color: #1E88A8; /* Set the header background color */
    color: #FFFFFF !important; /* Text color */
    text-decoration: none !important;
    font-weight: bold; /* Bold text for emphasis */
    text-transform: uppercase; /* Optional: Make the text uppercase */
    padding: 10px; /* Add padding around day names */
    border-radius: 5px; /* Add rounded corners */
    text-align: center; /* Center align the text */
}

/* Hover Effect for Day Headers */
.fc-daygrid-weekday:hover {
    background-color: #3FBAC2; /* Lighter shade for hover effect */
    cursor: default !important; /* No pointer cursor as it's not interactive */
}

/* Highlight Today's Date */
.fc-day-today 
{
    background-color: #1A4858 !important; 
    border: 3px solid #1E88A8 !important; 
    border-radius: 5px; 
    color: #FFFFFF; 
}

/* Highlight the Number of Today's Date */
.fc-day-today .fc-daygrid-day-number {
    font-weight: bold; /* Bold text for today's number */
    background-color: #2A9D8F; /* Distinct green for today's number */
    color: #FFFFFF !important; /* White text */
    padding: 5px; /* Padding around the number */
    border-radius: 50%; /* Circular background for today's number */
    text-decoration: none !important;
}

/* Hover Effect for Days */
.fc-daygrid-day:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover highlight */
    cursor: default;
}

/* General Event Styling */
.fc-event {
    background-color: #2A9D8F; /* Event background */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    padding: 5px;
    color: #FFFFFF; /* Event text color */
    font-size: 14px; /* Adjust font size */
}

/* Navigation Buttons */
.fc .fc-button {
    background-color: #1E88A8; /* Custom button color */
    color: #FFFFFF; /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    padding: 5px 10px; /* Add padding for better sizing */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}
.fc .fc-button:hover 
{
    background-color: #3FBAC2; /* Lighter color on hover */
}

/* Header Toolbar (Navigation Area) */
.fc-header-toolbar {
    background-color: #0F5257; /* Matches your site's dark tone */
    color: #FFFFFF;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

/* Calendar Title (Month, Week) */
.fc-toolbar-title {
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
}
/* Ensure all days are the same height */
.fc-daygrid-day-frame {
    min-height: 50px; /* Adjust based on your preference */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Ensure event content does not affect row heights */
.fc-daygrid-day-events 
{
    flex-grow: 1;
}

/* Set a fixed height for each row */
.fc-daygrid-body tr {
    height: 50px !important; /* Adjust as needed */
}

/* Ensures events don’t expand the day height */
.fc-daygrid-day {
    position: relative;
    height: 50px; /* Keep consistent day heights */
}

#donate {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    width: 100%;
    margin: 20px auto; /* centers the container horizontally */
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-size: 1.6em;
    font-weight: bold;
}
.donate-message {
    font-size: 1.4em;
}
.donate-description {
    font-size: 1em;
}

.wallet-container {
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px auto;
    width: fit-content;
    padding: 8px 15px;
    border-radius: 8px;
    color: #8bc34a;
}

.wallet-container:hover {
    background-color: black;
}

.copy-btn {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.copy-btn:hover svg {
    fill: #8bc34a; /* Change color on hover, adjust as needed */
}

.token-info {
    font-size: 0.8em;
}