/* Section Styling */
#basic-features {
    background-color: #031B1B; /* Dark background */
    color: #C9FEFF; /* Light teal for text */
    padding: 40px 20px; /* Adjusted padding for better fit on mobile */
    border-radius: 15px; /* Rounded corners for the section */
    margin: 20px auto; /* Center the section and add margin */
    max-width: 1600px; /* Set a max width for the section */
}

/* Centered and Enlarged H2 Styling */
#basic-features h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5em; /* Slightly reduced font size for better fit on mobile */
    color: #C9FEFF; /* Light teal color */
    text-align: center; /* Center the heading */
    margin-bottom: 30px; /* Adjusted space below the heading */
}

/* Feature Row Styling */
.feature-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px; /* Reduced margin for better spacing on mobile */
}

.feature-row.even {
    flex-direction: row;
}

/* Feature Image Styling */
.feature-image {
    flex: 1;
    max-width: 45%;
    margin: 20px;
    text-align: center; /* Center the image for better appearance on mobile */
}

.feature-image img {
    width: 100%;
    border-radius: 15px;
}

/* Feature Text Styling */
.feature-description {
    flex: 1;
    max-width: 45%;
    margin: 20px;
    text-align: center; /* Center the text for better appearance on mobile */
}

/* Heading Styling */
.feature-description h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 2em; /* Adjusted font size for better fit on mobile */
    color: #C9FEFF; /* Light teal color for heading */
    margin-bottom: 20px; /* Space below the heading */
}

/* Paragraph Styling */
.feature-description p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em; /* Slightly reduced font size for readability on mobile */
    color: #C9FEFF; /* Light teal color for paragraph text */
    line-height: 1.6; /* Line height for better readability */
    text-align: justify; /* Justify text for a clean look */
    margin: 0 auto 20px auto; /* Center align the text block and add margin at the bottom */
    max-width: 800px; /* Set a max width for the text block */
}

.plus-image {
    background: white;
}

.plus-image img {
    width: 25rem;
    height: 25rem;
}

.premium-image {
    background: white;
}

.premium-image img {
    width: 25rem;
    height: 25rem;
}

@media (max-width: 768px) {
    .feature-row,
    .feature-row.even {
        flex-direction: column-reverse; /* Reverse the order of the elements */
        align-items: center;
        text-align: center;
    }

    .feature-row.even {
        flex-direction: column;
    }

    .feature-image, .feature-description {
        max-width: 90%; /* Ensure images and descriptions have equal width */
        width: 100%; /* Ensure full width on mobile */
        margin: 20px 0; /* Add vertical margin between cards */
    }

    .feature-image img {
        width: 100%; /* Ensure images take up full width */
        border-radius: 15px;
    }
}

@media (max-width: 576px) {
    .feature-row,
    .feature-row.even {
        align-items: center;
        text-align: center;
    }

    .feature-row.even {
        flex-direction: column;
    }

    .feature-image, .feature-description {
        max-width: 100%; /* Ensure images and descriptions have equal width */
        width: 100%; /* Ensure full width on smaller screens */
        margin: 20px 0; /* Add vertical margin between cards */
    }

    .feature-image img {
        width: 100%; /* Ensure images take up full width */
        border-radius: 15px;
    }
}