/* Wrapper for the container and buttons */
.athletes-wrapper {
    position: relative;
}

/* Positioning the scroll buttons */
/* Positioning the scroll buttons */
.scroll-buttons-ath {
    position: absolute;
    top: -31px;
    right: 10px;
    display: flex;
    gap: 4;
	z-index: 10;
}

.scroll-button-ath {
	 padding: 0px!important;
    line-height: 0!important;
    background: transparent!important;
    border: 1px solid black!important;
    border-radius: 100px!important;
	margin-left: 4px!important;
}

.scroll-button-ath:hover {
	background: #eeeeee!important;
}

.scroll-button svg {
    fill: #333; /* Adjust color as needed */
}

.scroll-button:hover svg {
    fill: #000;
}

/* Base styles for the container */
.athletes-container {
    display: flex;
    overflow-x: scroll; /* Force scrollbar to always be visible */
    flex-wrap: nowrap;
    gap: 24px;
    position: relative;
    padding-bottom: 10px; /* Add padding to prevent overlap with scrollbar */
}

/* Scrollbar styles for WebKit browsers (Chrome, Safari) */
.athletes-container::-webkit-scrollbar {
    height: 12px;
    background: #f1f1f1;
}

.athletes-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

.athletes-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Scrollbar styles for Firefox */
.athletes-container {
    scrollbar-width: auto;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Adjust the card styles */
.athlete-card {
    background: #fafafa;
    border-radius: 0px;
    overflow: hidden;
    flex: 0 0 calc(32% - 10px); /* Adjust to show 3 cards at once */
    position: relative;
    box-sizing: border-box; /* Include padding and border in width */
    flex-shrink: 0; /* Prevent cards from shrinking */
    transition: transform 0.3s ease-in-out;
}

.athletes-container .athlete-card:last-child {
    margin-right: 0; /* Remove margin from the last card */
}

@media only screen and (max-width: 900px) {
    .athlete-card {
        flex: 0 0 calc(50% - 10px); /* Show 2 cards at once on medium screens */
    }
}

@media only screen and (max-width: 600px) {
    .athlete-card {
        flex: 0 0 100%; /* Full width on small screens */
        margin-right: 0; /* Remove right margin */
    }

    .athletes-container {
        padding: 20px;
        padding-bottom: 10px; /* Maintain padding for scrollbar */
    }

    /* Adjust scroll buttons position */
    .scroll-buttons {
        top: 5px;
        right: 5px;
    }
}

/* Hover effect on cards */
.athlete-card:hover {
    transform: translateY(-10px);
}

/* Athlete image */
.athlete-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

/* Athlete content */
.athlete-content {
	margin-top: -7px;
    text-align: left;
	    border: 1px solid #e3e3e3;
	border-top: 0px;
	    padding: 18px;
}

/* Athlete name */
.athlete-name {
    font-size: 1.3em !important;
    font-weight: bold;
    margin: 5px 0;
    color: var(--e-global-color-accent);
    text-align: left; /* Align text to the left */
}

/* Athlete age and date joined */
.athlete-age,
.athlete-date-joined {
    font-family: Cabin;
    font-size: 14px!important;
    font-weight: 400!important;
    color: #666;
		margin: 0px;
}