/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styles */
body {
    font-family: 'Arial', sans-serif; /* Base font */
    line-height: 1.6; /* Line height for readability */
    background-color: #1A1A2E; /* Dark background for contrast */
    color: #EDEDED; /* Light text color for readability */
}

/* Header Styles */
header {
    background-color: #5B2E91; /* Purple background for header */
    padding: 20px; /* Padding for header */
    text-align: center; /* Center text */
}

nav h1 {
    font-size: 2.5em; /* Title size */
    margin-bottom: 10px; /* Margin below title */
}

nav ul {
    list-style: none; /* Remove list styles */
    padding: 0; /* Remove default padding */
}

nav ul li {
    display: inline; /* Inline list items */
    margin: 0 15px; /* Horizontal spacing between links */
}

nav ul li a {
    text-decoration: none; /* No underline */
    color: #EDEDED; /* Link color */
    padding: 8px 12px; /* Padding around links */
    transition: color 0.3s, background-color 0.3s; /* Smooth transition */
    border-radius: 5px; /* Rounded corners for links */
}

nav ul li a:hover {
    background-color: #EDEDED; /* Light background on hover */
    color: #5B2E91; /* Change text color on hover */
}

/* Main Section Styles */
main {
    padding: 20px; /* Padding for main content */
}

/* Features Section */
#features {
    background-color: #5B2E91; /* Purple background for features section */
    padding: 20px; /* Padding for features section */
}

.features-container {
    display: grid; /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 20px; /* Gap between grid items */
    padding: 20px; /* Padding for grid container */
}

.feature-item {
    background-color: #2A2A72; /* Darker purple background for feature items */
    border-radius: 8px; /* Rounded corners */
    padding: 15px; /* Padding inside feature items */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */
}

.feature-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}

.feature-image {
    width: 100%; /* Image takes full width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Rounded corners for images */
}

/* Download Section */
#download {
    background-color: #5B2E91; /* Purple background */
    padding: 40px 20px; /* Increased padding for better spacing */
}

/* Download Button Container */
.button-container {
    margin-top: 30px; /* Space above the button */
}

/* Download Button */
.btn-download {
    background-color: black; 
    color: white;
    padding: 15px 30px; /* Increased padding for better button size */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.5em; /* Larger font size for better visibility */
    display: inline-block;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

.btn-download:hover {
    background-color: #5B2E91; /* Darker button on hover */
    color: #EDEDED; /* Change text color on hover */
}

/* Info Sections */
.info-section {
    padding: 50px 0;
    width: 100%;
    background-color: white;
    text-align: center; /* Center text */
}

.info-section h2 {
    color: #d32f2f; /* Red */
    font-size: 2.2em;
    margin-bottom: 20px;
}

.info-section p {
    font-size: 1.2em;
    color: #333;
}


/* Footer Styles */
footer {
    text-align: center; /* Center text */
    padding: 10px 0; /* Padding for footer */
    background-color: #5B2E91; /* Purple background for footer */
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    nav ul li {
        display: block; /* Stack links vertically on small screens */
        margin: 5px 0; /* Adjust margin for mobile */
    }

    .features-container {
        grid-template-columns: 1fr; /* Single column layout on small screens */
    }

    .btn-download {
        font-size: 1em; /* Smaller button text on mobile */
    }
}