.values{
    background-color: white;
    width: 100%;
    padding: 100px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}
.values-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.inner-container{
    width: 100%;
    max-width: 1124px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Container for value cards */
.value-cards {
    margin: 32px 10px 0px 10px;
    width: 100%;
    max-width: 1130px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

/* Individual value card */
.value-card {
    text-align: center;
    min-width: 200px;
    flex:1 1 19%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    cursor: pointer;
    background-color: #F9F9F9; /* Neutral background for a clean look */
    overflow: hidden; /* Prevents the description from overflowing outside the card */
}

/* Card Backgrounds */
#gray {
    background: #F5F7FA; /* Muted light blue-gray */
}

#light-orange {
    background: #FFF4E6; /* Soft peach */
}

/* Hover effects */
.value-card:hover {
    transform: translateY(-5px) scale(1.05); /* Slight lift effect on hover */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
    background-color: #1E90FF; /* Bright blue for hover */
    border-radius: 16px; /* Slightly increase border-radius */
}

#gray:hover {
    background-color: #1E90FF; /* Bright blue for hover */
}

#light-orange:hover {
    background-color: #FF6347; /* Tomato red for hover */
}

/* Text color changes on hover */
.value-card:hover .value-text {
    color: white; /* White text for better contrast */
}

/* Change description text color on hover */
.value-card:hover .value-description {
    color: white; /* White description text */
    font-size: 16px; /* Slightly increase size on hover */
}

/* Background change for logo container */
.value-card:hover .value-logo-div {
    background-color: white; /* White background for logo container */
    padding: 20px; /* Increase padding slightly */
}

/* Logo inside the card */
.value-logo-div {
    width: 100%;
    padding: 20px 10px;
    transition: background-color 0.3s ease, padding 0.3s ease;
    text-align: center;
}

/* Value logo size */
.value-logo {
    width: 80px;
    padding: 24px 0;
    transition: transform 0.3s ease;
}

/* Animation for logo scale on hover */
.value-card:hover .value-logo {
    transform: scale(1.1); /* Slight scale up on hover */
}

/* Value text style */
.value-text {
    /* color: #333333; */
    color: #ddb410;
    font-weight: 700;
    font-size: 18px;
    padding: 12px 10px;
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Value description style */
.value-description {
    font-size: 15px;
    font-weight: 400;
    padding: 0px 10px 24px 10px;
    color: rgba(0, 0, 0, 0.7); /* Slightly darker gray text */
    transition: color 0.3s ease, font-size 0.3s ease, max-height 0.5s ease, padding 0.5s ease;
    max-height: 0; /* Initially hide the description */
    padding-bottom: 0px; /* No bottom padding when hidden */
    overflow: hidden; /* Hide the description when it's not hovered */
}

/* Slide-out effect when hovered */
.value-card:hover .value-description {
    max-height: 100px; /* Increase max-height to allow description to fully expand */
    padding-bottom: 24px; /* Add padding when visible */
    color: white; /* White text for visibility */
    overflow: visible; /* Allow description to be visible when hovered */
}

@media screen and (max-width: 600px) {
    .value-cards{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 20px;

    }
    .value-card{
        max-width: 90vw;
    }
    .value-logo {
        transform: scale(1.1); /* Slight scale up on hover */
    }
    .value-description {
        max-height: 100px; /* Increase max-height to allow description to fully expand */
        padding-bottom: 24px; /* Add padding when visible */
        color: white; /* White text for visibility */
        overflow: visible; /* Allow description to be visible when hovered */
        color: white; /* White description text */
        font-size: 16px; /* Slightly increase size on hover */
    }
    .value-logo-div {
        background-color: white; /* White background for logo container */
        padding: 20px; /* Increase padding slightly */
    }
    .value-text {
        color: white; /* White text for better contrast */
    }
    .value-card {
        transform: translateY(-5px) scale(1.0); /* Slight lift effect on hover */
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
        background-color: #1E90FF; /* Bright blue for hover */
        border-radius: 16px; /* Slightly increase border-radius */
    }

    #gray {
        background-color: #1E90FF; /* Bright blue for hover */
    }

    #light-orange {
        background-color: #FF6347; /* Tomato red for hover */
    }

}