.events-page {
    .calendar-header {
        display: flex;
        justify-content: center;
        gap: 20px;
        align-items: center;
        padding: 10px 0;
    }

    .calendar-header h5 {
        margin: 0;
        font-size: 1.25rem;
    }

    .calendar-week {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .calendar-day {
        padding: 10px;
        border: 1px solid #ddd;
        margin-bottom: 10px;
    }

    .week-nav {
        background-color: var(--primary-color);
        color: var(--white-color);
        border: none;
        /* padding: 10px 20px; */
        cursor: pointer;
        border-radius: 5px;
        font-size: 16px;
        transition: background-color 0.3s;

        &:hover {
            background-color: var(--secondary-color);
        }
    }

    .event {
        padding: 5px;
        margin-top: 5px;
        border-radius: 5px;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .event-color-1 {
        background-color: #181C14;
        color: var(--white-color);
    }

    .event-color-2 {
        background-color: #85A98F;
        color: var(--white-color);
    }

    .event-color-3 {
        background-color: #697565;
        color: var(--white-color);
    }

    .event-color-4 {
        background-color: #ECDFCC;
        color: var(--accent-color);
    }

    .event-info-heading {
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--accent-color);
        margin-bottom: 20px;
        text-align: center;
        background-color: var(--background-color);
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .event-details {
        margin-top: 20px;
    }

    .swipe-area {
        padding: 15px 0;
    }

    @media (hover: none) {
        .swipe-area {
            display: none;
        }
    }

    .year-month-selector-icon {
        cursor: pointer;
        font-size: 1.5rem;
        color: var(--primary-color);
    }

    .current-week-btn {
        display: none;
        cursor: pointer;
        font-size: 1.5rem;
        color: var(--primary-color);
    }

    .current-week-btn.show {
        display: block;
    }

    #resultsContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .media-card {
        margin-bottom: 20px;
        flex: 1 1 calc(33.333% - 20px);
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
        transition: transform 0.2s ease;
        max-width: 32.53%;
    }

    .media-card:hover {
        transform: scale(1.05);
    }

    .media-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        object-position: top;
    }

    .icon-overlay {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: var(--white-color);
        padding: 5px 10px;
        border-radius: 5px;
    }

    .card-body {
        background-color: var(--background-color);
        padding: 20px;
        border-top: 1px solid #dee2e6;
        /* border-radius: 0 0 10px 10px; */
    }

    .card-title {
        font-size: 1rem;
        font-weight: bold;
        color: var(--accent-color);
    }

    .card-date {
        font-size: 0.9rem;
        color: var(--primary-color);
        /* text-transform: uppercase; */
        text-align: right;
    }

    .card-event i,
    .card-themes i {
        color: var(--primary-color);
    }

    .card-date a,
    .card-event a,
    .card-themes a {
        color: var(--primary-color);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .card-date a:hover,
    .card-event a:hover,
    .card-themes a:hover {
        color: var(--secondary-color);
        text-decoration: underline;
    }

    .date-link {
        color: var(--primary-color);
        text-decoration: none;
    }

    @media (max-width: 768px) {
        .media-card {
            flex: 1 1 100%;
            max-width: 100%;
        }
    }

    .rtl-text {
        direction: rtl;
        text-align: right;
    }

    .fade-out {
        opacity: 0;
    }
}

/* Custom hover effect for Select2 dropdown options */
.select2-results__option:hover {
    background-color: var(--secondary-color) !important;
}

/* Set a high z-index for Select2 dropdown */
.select2-container--open .select2-dropdown {
    z-index: 9999 !important;
}

#select2-yearSelect-container,
#select2-monthSelect-container {
    width: 7rem !important;
}

#dateSelectorModal {
    #jumpToDate {
        background-color: var(--primary-color);
        border-color: var(--primary-color);

        &:hover {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
    }

    /* width */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px var(--background-color);
        border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--secondary-color);
        border-radius: 10px;
    }
}