.discover-hero-block {
    padding-top: 90px;
}

.hero-feture {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start; /* Align to the start to see the first item */
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    white-space: nowrap;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.hero-feture::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

.hero-feture li {
    min-width: max-content; /* This prevents the li from being smaller than its content */
    white-space: nowrap; /* This ensures the text in the li doesn't wrap */
    margin-right: 5px !important;
    flex: 0 0 auto; /* Do not allow the items to grow or shrink */
}

.hero-feture li:first-child {
    margin-left: 0 !important;
}

.hero-feture li:last-child {
    margin-right: 40px; /* Adjust if necessary to ensure last item isn't hidden behind the right arrow */
}




.scroll-arrow {
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border: 2px solid #d8d8d8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-in-out;
}

.scroll-arrow span {
    font-size: 24px;
    color: #000;
}

.left-arrow {
    left: 10px; /* Adjust if necessary */
}

.right-arrow {
    right: -20px; /* Adjust if necessary */
}

.scroll-arrow:hover {
    transform: translate(-50%, -50%) scale(1.1); /* Slightly increase size on hover */
}

/* Adjust padding to prevent content being hidden behind arrows */
.features-section.benefits .container {
    position: relative;
    padding: 0 30px; /* adjust as needed */
}

.events-section {
    padding-top: 0;
    padding-bottom: 3rem;
}

/* Media query for mobile devices */
@media (max-width: 767px) {
    .scroll-arrow { 
        top: 3rem;
    }
    .discover-hero-block {
        padding: 9px 0;
        border: 1px solid #d8d8d8;
    }

    .hero-feture {
        -webkit-overflow-scrolling: touch; /* for smooth scrolling on iOS */
    }

    .hero-feture li {
        /* Adjust font size, padding, etc. as necessary for smaller screens */
    }

    .hero-feture li:first-child {
        margin-left: 0 !important;
    }
}