/* Import Google Font - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Basic reset and font application */
body {
    font-family: 'Inter', sans-serif;
    @apply bg-gray-50 text-gray-800; /* Tailwind classes for body background and text color */
}

/* Header Styling */
header {
    @apply bg-green-600 text-white p-4 shadow-lg flex justify-between items-center rounded-b-lg;
}

header h1 {
    @apply text-2xl font-bold;
}

/* Navigation Styling */
nav ul {
    @apply flex space-x-4; /* Horizontal links with spacing */
}

nav ul li a {
    @apply text-white text-lg font-medium hover:text-green-200 transition-colors duration-200 p-2 rounded-md;
}

/* Active navigation link (for current page) */
nav ul li a.active {
    @apply bg-green-700 text-green-50;
}

/* Main Content Area */
main {
    @apply p-6 max-w-4xl mx-auto my-8 bg-white shadow-xl rounded-lg;
}

main h2 {
    @apply text-3xl font-semibold text-green-700 mb-4;
}

main p {
    @apply text-lg leading-relaxed mb-4;
}

/* Footer Styling */
footer {
    @apply bg-gray-800 text-white p-4 text-center text-sm mt-10 rounded-t-lg;
}

footer a {
    @apply text-green-400 hover:underline;
}

/* Utility classes for content sections */
.section-card {
    @apply bg-white p-6 rounded-lg shadow-md mb-6;
}

.section-card h3 {
    @apply text-2xl font-semibold text-gray-700 mb-3;
}

.section-card ul {
    @apply list-disc list-inside;
}

.section-card li {
    @apply mb-2;
}


/* Button Style */
.btn {
    /* Existing styles for shape and base color */
    @apply inline-block bg-green-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition-colors duration-200 text-center no-underline;
    
    /* Hover state */
    @apply hover:bg-green-700;

    /* Active state: when the button is clicked/pressed */
    background-color: #dcfce7; /* Corresponds to Tailwind's bg-green-100 */
    color: #166534; /* A darker green for text on light background */
    
    /* Set width to 25% */
    width: 25%;
}