.benefit-grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /*Ensures 4 grids per row*/
    column-gap: 20px; /*Adjust column spacing*/
    row-gap: 20px; /*Adjust row spacing*/
    justify-items: center;
    width: 100%; /*Ensure grid takes up full width*/
}

.benefit-grid-item, .partnership-grid-item {
    flex: 0 0 250px; /*Fixed width for each grid item*/
    position: relative;
    background-color: #fff7e6;
    padding: 20px;
    border-radius: 12px; /*Rounded corners*/
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    width: 240px; /*Fixed width for medium size*/
    height: 120px; /*Height to accommodate*/
    overflow: revert-layer;
    transition: transform 0.3s ease;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #d84315; /*Title color*/
}

.benefit-icon, .partnership-icon {
    width: 50px; /*Small icon size*/
    height: 50px;
    margin-bottom: 10px; /*Space between icon and title*/
}

.benefit-description, .partnership-description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white; /*Slight opacity*/
    padding: 10px;
    border-radius: 12px;
    font-size: 14px;
    color: black;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%; /* Adjust width to allow proper text wrapping */
    height: auto; /* Allow height to adjust based on content */
    white-space: normal; /* Ensure the text wraps */
    word-wrap: break-word; /* Handle long words */
    overflow: visible; /* Ensure content is visible */
}

.benefit-grid-item:hover, .partnership-grid-item:hover {
    transform: scale(1.05); /*Slight zoom effect*/
}

    .benefit-grid-item:hover .benefit-description, .partnership-grid-item:hover .partnership-description {
        opacity: 1; /*Show description on hover*/
    }

    .benefit-grid-item:hover h3, .partnership-grid-item:hover h3 {
        opacity: 0; /*Hide title on hover */
    }

.benefit-scroll-container, .partnership-scroll-container {
    display: flex;
    overflow-x: scroll; /*Enable horizontal scrolling*/
    scroll-behavior: smooth; /*Smooth scrolling effect*/
    gap: 20px;
    padding: 20px 0;
    width: 100%;
    white-space: nowrap;
}

    /* Hide scrollbar */
    .benefit-scroll-container::-webkit-scrollbar {
        display: none;
    }

.benefit-scroll-container,  {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}