/* Features section */
.features {
    display: block; /* Fallback for older browsers */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of items */
    justify-content: space-between;
    margin-top: 6%;
    text-align: left;
    padding: 0; /* Ensure no padding around the features section */
}

.features .feature1, .features .feature2, .features .feature3 {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0 0 4%;
    border-radius: 0.3125rem 0.3125rem 0 0; /* Match the top border-radius of h3 */
    width: 30%; /* Responsive width using percentage */
    box-sizing: border-box; /* Prevent content from overflowing */
    overflow: hidden; /* Ensure content doesn't overflow */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.feature1 h4 {
    background-color: #4CA7B8; /* Sci-fi dark background color */
}

.feature2 h4 {
    background-color: #4885B8; /* Sci-fi dark background color */
}

.feature3 h4 {
    background-color: #435FB8; /* Sci-fi dark background color */
}

.features h4 {
    font-size: 1.5rem;
    color: #f8f8f8; /* Light font color for contrast */
    margin-top: 0; /* Ensure no space at the top */
    margin-bottom: 2%;
    text-transform: uppercase;
    word-wrap: break-word;
    word-break: break-word;
    padding: 0.5rem 1rem;
    border-radius: 0.3125rem 0.3125rem 0 0; /* Rounded corners on top to create bookmark feel */
    box-shadow: 0 0.125rem 0.25rem rgba(109, 109, 109, 0.342); /* Soft shadow */
    position: relative; /* Make sure we can position the "bookmark tail" */
    text-align: left;
}

.features p {
    font-size: 1.125rem;
    margin-bottom: 1.75rem;
    color: #555555;
    text-align: left;
    line-height: 1.6;
    padding: 0.2rem 1rem;
}
/* Hover effect for feature items */
.features .feature1:hover, .features .feature2:hover, .features .feature3:hover {
    transform: scale(1.05);
}
/* Mobile view: stack features vertically */
@media screen and (max-width: 48rem) {
    .features {
        flex-direction: column; /* Stack items vertically on mobile */
        align-items: center; /* Center align the items */
    }

    .features .feature1, .features .feature2, .features .feature3 {
        width: 100%; /* Full width for each feature */
        margin-bottom: 4%; /* Add some spacing between stacked items */
    }
}