/* General Styles */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background: #F5F5DC;
}

/* Header Section */
.header {
    text-align: center;
    background: linear-gradient(to right, #2E7D32, #81C784);
    color: #fff;
    padding: 10px 10px;
}

    .header .logo {
        max-width: 100px;
        margin-bottom: 20px;
    }

    .header h1 {
        font-size: 2.5em;
        margin-bottom: 10px;
    }

    .header p {
        font-size: 1.2em;
        margin-bottom: 30px;
    }

    .header .cta-btn {
        display: inline-block;
        padding: 15px 36px; /* slightly wider */
        font-size: 1.1rem; /* slightly bigger text */
        font-weight: 600; /* bolder text */
        color: #fff;
        background-color: #388E3C;
        border-radius: 30px;
        text-decoration: none;
        box-shadow: 0 4px 8px rgba(56, 142, 60, 0.3); /* subtle shadow */
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        cursor: pointer;
        user-select: none; /* prevent accidental text selection */
    }

        .header .cta-btn:hover, .cta-btn:focus {
            background-color: #2E7D32;
            box-shadow: 0 6px 12px rgba(46, 125, 50, 0.5);
            transform: scale(1.05); /* subtle zoom */
            outline: none; /* remove default outline */
        }

        .header .cta-btn:focus-visible {
            outline: 3px solid #A5D6A7; /* accessible focus ring */
            outline-offset: 4px;
        }

/* Features Section */
.features {
    text-align: center;
    padding: 50px 20px;
    background: #F5F5DC;
}

    .features h2 {
        font-size: 2em;
        color: #2E7D32;
        margin-bottom: 30px;
    }

.features-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.feature-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

    .feature-card i {
        font-size: 3em;
        color: #FF9800;
        margin-bottom: 15px;
    }

    .feature-card h3 {
        font-size: 1.2em;
        margin-bottom: 10px;
        color: #2E7D32;
    }

/* Footer Section */
.footer {
    background: #2E7D32;
    color: #fff;
    text-align: center;
    padding: 20px;
}

    .footer nav a {
        color: #fff !important;
        text-decoration: none;
        margin: 0 10px;
        font-size: 0.9em;
    }

        .footer nav a:hover {
            text-decoration: underline;
        }

@media (max-width: 600px) {
    .features {
        padding: 30px 15px; /* Reduce padding */
    }

        .features h2 {
            font-size: 1.5em; /* Smaller heading */
            margin-bottom: 20px;
        }

    .features-grid {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align */
        gap: 15px; /* Reduce gap */
    }

    .feature-card {
        max-width: 90%; /* Full width for small screens */
        padding: 15px; /* Reduce padding */
    }

        .feature-card i {
            font-size: 2.5em; /* Reduce icon size */
        }

        .feature-card h3 {
            font-size: 1.1em; /* Adjust heading size */
        }

    .footer {
        padding: 15px; /* Reduce padding */
    }

        .footer nav a {
            font-size: 0.8em; /* Reduce font size */
            margin: 0 5px; /* Reduce spacing */
        }
}

.btn-save {
    min-width: 140px;
}