/* Responsive Design for Mobile Devices */
@media (max-width: 768px) {
    body {
        padding: 0 10px;
    }

    /* Navigation Bar Styles */
    nav {
        flex-direction: column;
    }

    nav a {
        padding: 10px;
        margin: 5px 0; /* Stack links vertically with space */
    }

    /* Donation Section Styles */
    .donation-section {
        font-size: x-large; /* Adjust font size for readability */
        padding: 20px;
        border-width: 2px;
        border-radius: 15px;
        min-height: 60vh;
    }

    /* Input and Button Styles */
    input[type='number'], input[type='text'], textarea, button {
        font-size: 1rem; /* Smaller text size for inputs and buttons */
        padding: 12px;
        border-radius: 10px; /* Smaller border-radius */
    }

    button {
        padding: 12px 24px;
    }

    /* Info Section Styles */
    .info-section {
        margin: 30px 0;
        padding: 30px 0;
    }

    .info-section h2 {
        font-size: 2rem; /* Smaller font size for headings */
    }

    .info-section p {
        font-size: 1rem; /* Smaller font size for paragraph text */
    }

    /* Footer Styles */
    footer {
        padding: 15px 0;
    }

    footer a {
        font-size: 1rem; /* Smaller font size for footer links */
    }

    /* About and Contact Section Styles */
    #about, #contact {
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 8px;
    }

    /* List Styles for Contact Section */
    #contact li:before {
        margin-right: 5px; /* Reduce margin for list item icons */
    }
}