.values-container {
    display: flex;
    justify-content: space-around; /* Distributes space between cards */
    align-items: stretch; /* Makes cards same height if content differs slightly */
    flex-wrap: wrap; /* Allows cards to wrap onto the next line */
    gap: 30px; /* Space between cards horizontally and vertically when wrapped */
    padding: 15px 0; /* Optional: Add some padding above/below the cards */
}

/* --- Base Flip Card Container --- */
.flip-card {
    background-color: transparent; /* Required for 3D effect */
    flex: 1 1 300px; /* Flex grow, shrink, basis (adjust basis for default width) */
    min-width: 280px; /* Minimum width before wrapping strongly */
    max-width: 340px; /* Maximum width */
    height: 300px; /* Fixed height - adjust as needed */
    perspective: 1000px; /* Creates 3D space for the flip */
    border-radius: 15px;
    overflow: hidden; /* Ensures content doesn't spill out weirdly during animation */
}

/* --- Inner Element for Flipping --- */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s ease-in-out; /* Smoother flip animation */
    transform-style: preserve-3d;
    border-radius: 15px; /* Match outer card */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* --- Hover/Focus/Active Effect: Trigger Flip --- */
/* Applies to hover, keyboard focus, and touch/click */
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner, /* Use focus-within for better accessibility */
.flip-card:active .flip-card-inner {
    transform: rotateY(180deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Enhanced shadow on interact */
}
/* Add outline for keyboard focus visibility */
.flip-card:focus-visible {
    outline: 2px solid #2b572b; /* Or your preferred focus color */
    outline-offset: 2px;
}

/* --- Front and Back Face Styling (Common) --- */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* For Safari */
    backface-visibility: hidden; /* Hides the non-visible side during flip */
    border-radius: 15px; /* Match inner container */
    padding: 20px;
    box-sizing: border-box; /* Include padding in width/height calculation */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
}

/* --- Front Face Specific Styling --- */
.flip-card-front {
    background-color: #ffffff; /* White background for front */
    color: #2b572b; /* Title color (brand green) */
}

/* --- Back Face Specific Styling --- */
.flip-card-back {
    background-color: #2b572b; /* Use brand color for back */
    color: white; /* White text on dark background */
    transform: rotateY(180deg); /* Start flipped */
}

/* --- Content Styling (Icons, Titles, Paragraphs) --- */

.value-icon {
    max-width: 65px;
    height: auto;
    margin-bottom: 15px;
}

/* Title Styling */
.flip-card h3 {
    font-size: 1.6em;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
    /* Color is set by front/back face styles */
}

/* Paragraph Styling */
.flip-card-back p {
    font-size: 1em;
    color: #f0f0f0; /* Lighter text on the dark background */
    line-height: 1.6;
    margin: 0; /* Remove default paragraph margin */
    padding: 0 10px; /* Add slight horizontal padding if text is too close to edges */
}

/* Bold Text in Paragraph Styling */
.flip-card-back p strong {
    font-weight: 700;
    color: #ffffff; /* Make bold text pure white */
}


/* --- Responsive Design --- */

/* Adjustments for slightly smaller desktop/larger tablets */
@media (max-width: 992px) {
    .section-title {
        font-size: 2.2em;
    }
    .flip-card h3 {
        font-size: 1.4em; /* Adjust title size */
    }
    .flip-card {
         height: 280px; /* Slightly smaller height */
         flex-basis: 280px; /* Allow slightly smaller basis */
    }
    .values-container {
        gap: 25px; /* Reduce gap slightly */
    }
}

/* Tablet and Smaller (Stacking Point) */
@media (max-width: 768px) {
    .values-container {
        flex-direction: column; /* Stack cards vertically */
        align-items: center; /* Center cards in the column */
        gap: 25px; /* Vertical gap when stacked */
    }

    .flip-card {
        /* Override flex properties for stacking */
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;

        width: 85%; /* Make cards wider relative to viewport */
        max-width: 400px; /* Limit maximum width */
        height: 260px; /* Adjust height */
        margin-bottom: 0; /* Use gap for spacing */
    }
    /* No need for :last-child margin removal if using gap */

    .section-title {
        font-size: 2em;
        margin-bottom: 2rem !important; /* Adjust bottom margin for title */
    }
}

/* Mobile Phones */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.8em;
    }
    .flip-card {
        height: 250px; /* Slightly smaller height for small phones */
        width: 90%; /* Even wider on small screens */
    }
    .flip-card h3 {
        font-size: 1.3em;
    }
    .flip-card-back p {
        font-size: 0.95em;
        line-height: 1.5;
    }
    .value-icon {
        max-width: 55px; /* Smaller icon */
    }
}

/* Optional: Add styles for AOS animations if needed,
   although AOS itself handles the transitions. */
[data-aos] {
    /* You can add base styles for elements before they animate */
    /* Example: opacity: 0; */
}