.usability {
    background-color: white;
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 6vh;
    overflow: hidden;
    padding: 4vh 4vw;
}

.usability-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4vh;
}

.usability-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80%;
    gap: 4vh;
}

.usability-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
}

.usability-card-image {
    width: 100%;
}

.usability-card-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.usability-header-icon {
    height: 40%;
}

/* Media query for mobile (max-width: 480px) */
@media (max-width: 480px) {
    .usability-cards {
        flex-direction: column; /* Switch to column layout for mobile */
        align-items: center;
        width: 100%; /* Adjust width to fill available space */
        gap: 4vh; /* Maintain spacing between cards */
    }

    .usability-card {
        width: 100%; /* Make cards full-width on mobile */
    }

    .usability-header {
        flex-direction: row; /* Stack header content vertically */
        align-items: center;
        gap: 1vh; /* Adjust gap for smaller screens */
    }

    .usability-card-image {
        width: 70%;
    }

    .usability-header-icon {
        width: 20%;
    }
}