/* Define Custom Properties (CSS Variables) */
:root {
    --black: #000000;
    --raisin-black: #231f20ff;
    --onyx: #404041ff;
    --davys-gray: #58585aff;
    --dim-gray: #6d6e71ff;
    --gray: #818285ff;
    --silver: #bdbec0ff;
    --platinum: #e7e8e9ff;
    --white: #ffffffff;
}


/* Customize the carousel size */
.carousel {
    background: #EEE;
    margin: auto;
}

.carousel-cell {
    width: 24%;
    /* Show 3 items per row on larger screens */
    background-size: cover;
    background-position: center;
    padding: 10px;
    box-sizing: border-box;
}

.carousel-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Style the custom navigation buttons */
.carousel-nav {
    margin-top: 10px;
}

.carousel-nav button {
    padding: 10px 20px;
    margin: 0 5px;
    font-size: 16px;
    cursor: pointer;
}

/* Extra-large screens (1500px and up) */
@media (min-width: 1500px) {
    .carousel-cell {
        width: 25%;
        /* 3 items per row */
    }
}

/* Large screens (1200px to 1499px) */
@media (max-width: 1499px) {
    .carousel-cell {
        width: 33.33%;
        /* 2–3 items per row */
    }
}

@media (max-width: 1200px) {
    .carousel-cell {
        width: 45%;
        /* Show 1 item per row on small screens */
    }
}

@media (max-width: 768px) {
    .carousel-cell {
        width: 60%;
        /* Show 1 item per row on small screens */
    }
}


/* Media query for small screens (mobile devices) */
@media (max-width: 576px) {
    .carousel-cell {
        width: 90%;
        /* Show 1 item per row on small screens */
    }
}

/* Media query for small screens (mobile devices) */
@media (max-width: 400px) {
    .carousel-cell {
        width: 100%;
        /* Show 1 item per row on small screens */
    }
}


/* hide elementor page header */
.page-header {
    display: none;
}

.tabs-container {
    overflow-x: auto;
    /* Enables horizontal scrolling */
    white-space: nowrap;
    /* Prevents wrapping of tabs */
    border-bottom: 2px solid #333;
    background-color: #000;
}

.tabs {
    display: inline-flex;
    /* Ensures tabs are displayed in a row */

}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    margin-right: 5px;
    border-bottom: 2px solid transparent;
    color: #ccc;
    /* Light gray for inactive tabs */
    flex-shrink: 0;
    /* Prevents tabs from shrinking */
    transition: color 0.3s, border-bottom 0.3s, background-color 0.3s;
    /* Smooth hover effects */
}

.tab.active {
    border-bottom: 2px solid #007BFF;
    /* Blue underline for active tab */
    color: #fff;
    /* White text for active tab */
    font-weight: bold;
}

.tab:hover {
    color: #fff;
    /* White text on hover */
    background-color: #333;
    /* Slightly lighter background on hover */
    border-bottom: 2px solid #555;
    /* Subtle underline change on hover */
}

.content {
    background-color: #000;
    display: none;
    color: #fff;
}

.content.active {
    display: block;
}

/* Hide horizontal scrollbar */
.tabs-container::-webkit-scrollbar {
    display: none;
}

.tabs-container {
    scrollbar-width: none;
    /* For Firefox */
}


.calendar-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #000;
    /* Black background */
    gap: 10px;
}

/* General container styling */
.dropdown-container {
    display: inline-block;
    position: relative;
}

/* Style the select dropdown */
.dropdown-select {
    appearance: none;
    /* Remove default browser styles */
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 200px;
    /* Set consistent width */
    height: 40px;
    /* Control height for round look */
    padding: 8px 12px;
    padding-right: 36px;
    /* Ensure space for the arrow */

    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    /* Rounded shape */

    font-size: 16px;
    color: #000;
    cursor: pointer;
}

/* Add the ▼ arrow using a pseudo-element */
.dropdown-container::after {
    content: "▼";
    /* Basic arrow symbol */
    font-size: 12px;
    color: #000;

    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* Prevent the arrow from interfering with clicks */
}

/* Hover state */
.dropdown-select:hover {
    border-color: #888;
}

/* Focus state */
.dropdown-select:focus {
    outline: none;
    border-color: #555;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Options styling */
.dropdown-select option {
    padding: 10px 8px;
    line-height: 2;
    font-size: 16px;
    color: #000;
}

/* Button Styling */
.button-container {
    margin-left: auto;
    /* Pushes "Today" button to the far right */
}

.button {
    background-color: #1a1a1a;
    /* Dark background for the button */
    color: #fff;
    /* White text */
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.calendar-header {
    position: sticky;
    top: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--raisin-black);
    padding: 10px;
    color: #fff;
    z-index: 10000;
}

.nav-btn {
    width: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    margin-right: 4px;
    margin-left: 4px;
    background-color: transparent;
}

.nav-btn.hidden-text {
    height: 100%;
    /* Match the height of calendar items */
    background-color: transparent;
}

.schedule-page {
    background-color: var(--black);
}

.calendar-items {
    display: flex;
    justify-content: space-around;
    flex-grow: 1;
    gap: 10px;
    align-items: center;
}

.calendar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--dim-gray);
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    min-width: calc(20%);
    min-height: 50px;
}

/* Styling for the .day class */
.calendar-item .day {
    font-weight: bold;
    /* Makes the day bold */
    font-size: 18px;
    /* Adjust font size as needed */
    color: var(--white);
    /* Sets the text color to white (or another color of your choice) */
    display: inline-block;
    /* Makes the day inline with other content */
    padding: 5px;
    /* Adds some spacing around the day */
}

/* Styling for the .month class */
.calendar-item .month {
    font-size: 14px;
    /* Adjust font size for the month */
    color: var(--white);
    /* Sets the text color to silver (or another color) */
    display: inline-block;
    /* Makes the month inline with other content */
    margin-left: 10px;
    /* Adds some space between the day and the month */
}

.columns-container {
    height: calc(80vh - 60px);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Space between columns */
    justify-content: center;
    /* Center columns horizontally */
    background-color: var(--black);
    overflow-y: auto;
    /* Enable vertical scrolling */
    padding-right: 10px;
    /* Optional: If you want a little space on the right */
    margin-top: 10px;
    /* Optional: Adds spacing from the header */
}

.column {
    flex: 1 1 100px;
    /* Each column takes up equal space but with a minimum width of 100px */
    max-width: 450px;
    /* Prevent columns from growing too large */
    padding: 20px;
    box-sizing: border-box;

    display: flex;
    /* Enable flexbox */
    flex-direction: column;
    /* Stack items vertically */
    align-items: center;
    /* Center items horizontally */
    justify-content: flex-start;
    /* Align items to the top of the column (can be changed to 'center' for vertical centering) */
}


/* .class-schedule-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
} */

.schedule-card {
    background-color: white;
    width: 320px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.3s, opacity 0.3s;
    margin-bottom: 10px;
    /* Adds space below each card */
}

.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.schedule-header.paticipants-per-activity-size {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.schedule-time-info,
.schedule-instructor-name-duration {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.schedule-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
}

.schedule-time {
    font-size: 18px;
    color: #333;
}

.instructor-name {
    font-size: 14px;
    color: #888;
}

.schedule-duration {
    font-size: 14px;
    color: #888;
}

/* Hidden button by default */
.schedule-book-now {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.schedule-full {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: red;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Show button when card is hovered */
.schedule-card:hover .schedule-book-now,
.schedule-card:hover .schedule-full {
    opacity: 1;
    visibility: visible;
}

/* Reduce opacity of other contents when hovering the card */
.schedule-card:hover .schedule-header,
.schedule-card:hover .schedule-time-info,
.schedule-card:hover .schedule-instructor-name-duration {
    opacity: 0.4;
}

/* Optional: Add subtle shadow when hovering or clicking over the card */
.schedule-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1000px) {
    .nav-btn.hidden-text {
        flex: 0 0 auto;
        /* Ensure button height equals calendar item height */
        width: 50px;
        /* Fixed width for smaller screens */
    }

    .schedule-title {
        font-size: 24px;
    }

    .schedule-time {
        font-size: 18px;
    }

    .class-schedule-name,
    .schedule-duration {
        font-size: 14px;
    }

    .column {
        max-width: calc(100% - 30px);
    }

    .schedule-card {
        width: calc(100% - 30px);

    }
}

@media (max-width: 576px) {
    .nav-btn {
        display: none;
    }

    .calendar-items {
        padding: 15px;
    }

    .calendar-item {
        min-width: calc(20%);
        min-height: 50px;
        gap: calc(6.67%);
    }

    .schedule-card {
        width: calc(100% - 30px);
        /* Adjusted width for smaller screens */
    }

    .schedule-title {
        font-size: 20px;
    }

    .schedule-time {
        font-size: 16px;
    }

    .class-schedule-name,
    .schedule-duration {
        font-size: 12px;
    }
}



/* Media query for smaller screens like iPhone SE */
@media (max-width: 376px) {

    .schedule-title {
        font-size: 24px;
        /* Adjusted font size for smaller screens */
    }

    .schedule-time {
        font-size: 16px;
        /* Adjusted font size for smaller screens */
    }

    .class-schedule-name,
    .schedule-duration {
        font-size: 12px;
        /* Adjusted font size for smaller screens */
    }
}