.expanded-benefit {
    height: 200px;
    overflow: hidden;
    transition: all 0.5s;
    background: #ffffff;
}


.collapsed-benefit {
    height: 70px;
    overflow: hidden;
    transition: all 0.5s;
    background: #F1F3F6;
}

.description-benefit {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    padding: 6px;
}

.description-benefit.hidden {
    opacity: 0;
    display: none;
}

.expand-icon-benefit {
    width: 32px;
    height: 32px;
    transition: transform 0.3s;
}

.collapse-icon-benefit {
    width: 32px;
    height: 32px;
    transition: transform 0.3s;
}

.collapse-icon-benefit.hidden {
    display: none;
}

.expand-icon-benefit.hidden {
    display: none;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .expanded-benefit {
        height: 230px; /* Slightly smaller for smaller screens */
    }

    .collapsed-benefit {
        height: 70px; /* Slightly smaller for smaller screens */
    }
}

@media (max-width: 480px) {
    .expanded-benefit {
        height: 230px; /* Adjusted for very small screens */
    }


    .collapsed-benefit {
        height: 70px; /* Adjusted for very small screens */
    }
}

@media (max-width: 344px) {
    .expanded-benefit {
        height: 240px; /* Adjusted for very small screens */
    }
    .description-benefit {
        padding: 2px;
    }

    .collapsed-benefit {
        height: 70px; /* Adjusted for very small screens */
    }
}

.custom-grid-benefit {
    display: grid;
    grid-template-columns: 1fr; /* Default: Single column for smaller screens */
    gap: 1.5rem; /* Matches the Tailwind `gap-6` */

    /* Two columns for screens 1200px and larger */
    @media (min-width: 1200px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.custom-grid-benefit > div:first-child {
    order: 2; /* Default order for smaller screens */
}

.custom-grid-benefit > div:last-child {
    order: 1; /* Default order for smaller screens */
}

/* Reset order for screens 1200px and larger */
@media (min-width: 1200px) {
    .custom-grid-benefit > div:first-child {
        order: 1;
    }

    .custom-grid-benefit > div:last-child {
        order: 2;
    }
}