/* Global Styles */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    color: #374151; /* text-gray-700 - Slightly softer than #333 */
    background-color: #fdfdff; /* Lighter, almost white background */
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Smoother fonts on WebKit browsers */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
}

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

header {
    background-color: #ffffff; /* White background for a cleaner look */
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Softer shadow */
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure header is above other content */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Increased max-width for a more spacious feel */
    margin: 0 auto;
}

nav .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between logo and text */
}

.logo a,
.logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c; /* Darker color for logo text on white bg */
    text-decoration: none;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 2.5rem; /* Increased gap for better spacing */
}

nav ul li a {
    text-decoration: none;
    color: #374151; /* Darker gray for nav links for better contrast */
    font-weight: 500; /* Medium weight for nav links */
    transition: color 0.2s ease-in-out;
}

nav ul li a:hover {
    color: #0066ff; /* Primary blue on hover */
}

main {
    max-width: 1200px; /* Consistent max-width */
    margin: 3rem auto; /* Increased top/bottom margin */
    padding: 0 1.5rem;
}

section {
    padding: 5rem 0; /* Increased padding for more breathing room */
    border-bottom: none;
}

section:last-child {
    border-bottom: none;
}

section h1, section h2, section h3, section h4 {
    color: #1a202c; /* text-gray-900 - Darker for strong contrast */
    font-weight: 700;
}

section h1 {
    font-size: 2.75rem; /* Slightly increased */
    margin-bottom: 1.25rem;
    line-height: 1.2;
}

section h2 {
    font-size: 2.25rem; /* Slightly increased */
    text-align: center;
    margin-bottom: 2rem; /* Increased margin */
    font-weight: 700; /* Bold for section titles */
}

section h3 {
    font-size: 1.5rem; /* text-2xl */
    margin-bottom: 1rem;
    font-weight: 600; /* Semibold */
}

section p {
    color: #4a5568; /* text-gray-600 */
    margin-bottom: 1.25rem; /* Increased margin */
    line-height: 1.7; /* Improved readability */
}

button, .button-link {
    background-color: #0066ff; /* Brighter primary blue */
    color: white;
    border: none;
    padding: 0.875rem 1.75rem; /* Adjusted padding for better proportions */
    border-radius: 0.5rem; /* Standard rounded corners, not full pill */
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    margin-right: 1em; /* Kept for now, can be adjusted per component */
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.15), 0 1px 3px rgba(0,0,0,0.05); /* Refined shadow */
}

button:hover, .button-link:hover {
    background-color: #0052cc; /* Darker shade on hover */
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.2), 0 2px 4px rgba(0,0,0,0.07);
}

button:active, .button-link:active {
    transform: translateY(0px);
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.15), 0 1px 3px rgba(0,0,0,0.05);
}

button.secondary, .button-link.secondary {
    background-color: #f0f5ff; /* Lighter blueish background */
    color: #0052cc; /* Primary blue text */
    border: 1px solid #b3d1ff; /* Light blue border */
    box-shadow: 0 2px 8px rgba(0, 82, 204, 0.08);
}

button.secondary:hover, .button-link.secondary:hover {
    background-color: #e6efff; /* Slightly darker on hover */
    border-color: #80b3ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.12);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem; /* Slightly larger default radius for images */
    margin-top: 1em; /* Keep general margin for now */
}

/* Hero Section Styling */
#hero {
    text-align: center;
    padding: 6rem 1.5rem 7rem; /* Further increased padding */
    background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%); /* Even softer, modern gradient */
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

#hero h1 {
    font-size: 3.5rem; /* text-6xl */
    font-weight: 800; /* font-extrabold */
    color: #111827; /* text-gray-900 - Very dark gray for strong impact */
    margin-bottom: 1.75rem; /* Increased margin */
    line-height: 1.15; /* Tighter line height for large headings */
}

#hero p {
    font-size: 1.25rem; /* text-xl */
    max-width: 56rem; /* max-w-4xl for better readability */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem; /* Increased margin */
    color: #4b5563; /* text-gray-600 - Adjusted for modern feel */
}

#hero .button-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

@media (min-width: 640px) { /* sm breakpoint */
    #hero .button-group {
        flex-direction: row;
    }
}

#hero img {
    margin-top: 4rem; /* Further Increased margin */
    max-width: 80%; /* Slightly increase size if appropriate */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); /* Softer, more spread out shadow */
    border-radius: 1.25rem; /* Slightly larger radius for hero image */
}

#create-engage-grow {
    background-color: #fdfdff; /* Consistent light background */
    padding-top: 2rem; /* Less padding as it's just a title */
    padding-bottom: 0;
}

#create-engage-grow h2 {
    color: #2d3748; /* text-gray-800 */
}

/* Section with alternating image and text */
#course-creation, #multimedia-integration, #management, #discussions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem; /* Increased gap */
    align-items: center;
    padding: 4rem 1.5rem; /* Standardized padding for these sections */
}

@media (min-width: 768px) { /* md breakpoint */
    #course-creation, #multimedia-integration, #management, #discussions {
        grid-template-columns: 1fr 1fr;
        gap: 4rem; /* Larger gap on desktop */
    }
}

#course-creation div, #multimedia-integration div, #management div, #discussions div {
    padding: 0; /* Remove padding here, handled by section/grid gap */
}

#course-creation img, #multimedia-integration img, #management img, #discussions img {
    border-radius: 1rem; /* rounded-xl */
    box-shadow: 0 15px 30px rgba(0, 50, 100, 0.08), 0 3px 8px rgba(0,0,0,0.03); /* Softer, more layered shadow */
}

/* Specific section background like Alva Music's gradient-accent */
#multimedia-integration, #discussions {
    background: linear-gradient(135deg, #f0f7ff 0%, #fdfdff 70%); /* Softer gradient */
    padding: 5rem 1.5rem; /* Match overall section padding */
    border-radius: 1rem; /* Optional: round the section itself if not full bleed */
    margin: 2rem 0; /* Add some margin if sections have their own backgrounds */
}
#course-creation, #management {
    background: #fdfdff; /* Consistent light background */
     padding: 5rem 1.5rem; /* Match overall section padding */
}

/* Features Grid (Empower section) */
#empower {
    background-color: #f7faff; /* Slightly off-white background for this section */
    padding: 5rem 1.5rem;
    border-radius: 1rem; /* Rounded corners for the section */
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Increased minmax for more space */
    gap: 2.5rem; /* Increased gap */
    margin-top: 2.5rem; /* Increased margin */
}

.features-grid div {
    background-color: #fff;
    padding: 2.5rem; /* Increased padding */
    border-radius: 1rem; /* rounded-xl */
    box-shadow: 0 8px 16px rgba(0, 50, 100, 0.05), 0 3px 6px rgba(0,0,0,0.02); /* Subtle shadow */
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.features-grid div:hover {
    transform: translateY(-10px); /* More pronounced hover effect */
    box-shadow: 0 12px 24px rgba(0, 50, 100, 0.08), 0 5px 10px rgba(0,0,0,0.03); /* Enhanced shadow on hover */
}

.features-grid img {
    background-color: #e6f0ff; /* Lighter, softer blue background for icons */
    border-radius: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 1.5rem; /* Increased margin */
    height: 36px; /* Slightly smaller for a more refined look */
    width: 36px;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0,102,255,0.1); /* Subtle shadow for icon background */
}

.features-grid h4 {
    font-weight: 600;
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 0.5rem; /* Reduced margin */
    color: #1a202c; /* Darker text */
}

.features-grid p {
    font-size: 0.95rem; /* Slightly smaller for card body text */
    color: #5a657d; /* Softer gray */
    line-height: 1.6;
}

/* Pricing Section */
#pricing {
    text-align: center;
    background: linear-gradient(180deg, #f0f7ff 0%, #fdfdff 70%); /* Softer gradient */
    padding: 5rem 1.5rem;
}

#pricing h3 {
    font-size: 1.25rem; /* text-xl */
    color: #4a5568; /* text-gray-600 */
    font-weight: 500;
    margin-bottom: 2.5rem;
}

.pricing-card {
    background-color: #fff;
    border: 1px solid #e2e8f0; /* Lighter border, more subtle */
    padding: 2.5rem; /* Increased padding */
    border-radius: 1rem; /* rounded-xl */
    max-width: 380px; /* Slightly narrower */
    margin: 2rem auto;
    box-shadow: 0 10px 20px rgba(0, 50, 100, 0.06), 0 3px 7px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 50, 100, 0.1), 0 5px 10px rgba(0,0,0,0.05);
}

.pricing-card h4 {
    font-size: 1.375rem; /* Larger plan name */
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.pricing-card .price {
    font-size: 2.75rem; /* Larger price */
    font-weight: 700;
    color: #0066ff; /* Primary blue */
    margin: 1rem 0 1.5rem; /* Adjusted margin */
}

.pricing-card .price span.term {
    font-size: 1rem;
    font-weight: 500;
    color: #5a657d;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0; /* Increased margin */
    text-align: left;
}

.pricing-card ul li {
    margin-bottom: 0.875rem; /* Increased spacing */
    display: flex;
    align-items: center;
    color: #374151; /* Darker text for list items */
    font-size: 0.95rem;
}

.pricing-card ul li::before { /* Replicating SVG checkmark */
    content: '✓';
    color: #38a169; /* Green checkmark */
    margin-right: 0.75rem; /* Increased margin */
    font-weight: bold;
    font-size: 1.1rem; /* Slightly larger checkmark */
}

.pricing-card button {
    width: 100%;
    margin-top: 1.5rem; /* Increased margin */
    padding: 1rem 1.75rem; /* Larger button padding */
}

.pricing-card p.view-features-link {
    margin-top: 1.5rem;
}

.pricing-card p.view-features-link a {
    color: #0066ff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.pricing-card p.view-features-link a:hover {
    color: #0052cc;
    text-decoration: underline;
}

/* FAQ Section */
#faq {
    background-color: #fdfdff; /* Consistent light background */
    padding: 5rem 1.5rem;
}

.faq-container {
    max-width: 800px; /* Constrain width for better readability */
    margin: 0 auto;
}

#faq .faq-item {
    background-color: #fff; /* White background for FAQ items */
    padding: 1.75rem; /* Increased padding */
    margin-bottom: 1.25rem; /* Increased margin */
    border-radius: 0.75rem; /* rounded-lg */
    border: 1px solid #e2e8f0; /* Subtle border */
    transition: box-shadow 0.3s ease;
}

#faq .faq-item:hover {
    box-shadow: 0 8px 16px rgba(0, 50, 100, 0.05); /* Subtle shadow on hover */
}

#faq .faq-item h4 {
    cursor: pointer;
    margin: 0 0 0.5rem 0; /* Adjusted margin */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600;
    color: #1a202c;
    display: flex; /* For icon alignment */
    justify-content: space-between; /* To push icon to the right */
    align-items: center;
    transition: color 0.2s ease;
}

#faq .faq-item h4:hover {
    color: #0066ff; /* Primary color on hover */
}

#faq .faq-item h4::after { /* Basic +/- icon */
    content: '+';
    font-size: 1.5rem;
    color: #90cdf4; /* Light blue */
    transition: transform 0.3s ease;
}

#faq .faq-item.active h4::after {
    transform: rotate(45deg);
    color: #0066ff; /* Darker blue when active */
}

#faq .faq-item p {
    margin-top: 1rem; /* Add margin when expanded */
    color: #4a5568;
    display: none;
    line-height: 1.7;
    font-size: 0.95rem;
}

#faq .faq-item.active p {
    display: block;
}

/* Footer */
footer {
    background: #f0f7ff; /* Lighter, solid background */
    color: #4a5568; /* text-gray-600 */
    padding: 5rem 1.5rem 2.5rem; /* Adjusted padding */
    text-align: center;
}

.footer-container {
    max-width: 1200px; /* Match main content width */
    margin: 0 auto;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2.5rem; /* Increased gap */
    max-width: 1100px; /* Slightly adjusted max-width */
    margin: 0 auto 3.5rem auto; /* Increased bottom margin */
    text-align: left;
}

@media (min-width: 640px) { /* sm breakpoint */
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .footer-links {
        grid-width: repeat(4, 1fr);
        gap: 2rem; /* Adjust gap for 4 columns */
    }
}

.footer-links > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the start for left-align */
}

.footer-links > div:first-child p {
    font-size: 0.9rem; /* text-sm */
    color: #5a657d; /* Softer gray */
    line-height: 1.6;
    max-width: 300px; /* Limit width of the description text */
}

.footer-links .logo {
    margin-bottom: 1.25rem; /* mb-5 */
    color: #1a202c;
}

.footer-links .logo a {
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.footer-links h4 {
    font-size: 1rem; /* text-base */
    font-weight: 600;
    margin-bottom: 1.25rem; /* mb-5 */
    color: #2d3748; /* text-gray-800 */
}

.footer-links ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* space-y-3 */
}

.footer-links ul li a {
    color: #4a5568;
    text-decoration: none;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
    font-size: 0.9rem;
}

.footer-links ul li a:hover {
    color: #0066ff; /* Primary color hover */
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 2.5rem; /* pt-10 */
    margin-top: 2.5rem; /* mt-10 */
    border-top: 1px solid #d1e0f0; /* Lighter border */
}

@media (min-width: 768px) { /* md breakpoint */
    .footer-bottom {
        flex-direction: row;
    }
}

.copyright {
    font-size: 0.875rem;
    color: #5a657d;
    /* Remove border-top and padding-top as it's handled by .footer-bottom */
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.footer-social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem; /* Add margin for mobile view */
}

@media (min-width: 768px) {
    .footer-social-links {
        margin-top: 0; /* No margin on desktop */
    }
}

.footer-social-links a {
    color: #718096; /* text-gray-500 */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-social-links a:hover {
    color: #0066ff; /* Primary color hover */
}

.footer-social-links img { /* Assuming you might use SVGs or small icon images */
    width: 24px;
    height: 24px;
    fill: currentColor; /* If using inline SVGs, this will color them */
}

/* Terms page specific styling */
#terms-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#terms-content h1 {
    font-size: 2.25rem; /* Larger heading */
    margin-bottom: 2rem;
    color: #1a202c;
}

#terms-content h2 {
    font-size: 1.75rem; /* Larger subheading */
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    text-align: left;
    color: #2d3748;
}

#terms-content p {
    margin-bottom: 1.25rem;
    line-height: 1.8; /* Increased line height for readability */
    color: #374151;
}

#terms-content ul, #terms-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
    color: #374151;
}

#terms-content li {
    margin-bottom: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    nav ul {
        /* Kept as flex for horizontal on mobile, can be changed if needed */
        /* flex-direction: column; 
        align-items: center; 
        gap: 1rem; */
    }
    /* Other mobile styles from previous version if still applicable or new ones */
    #course-creation, #multimedia-integration, #management, #discussions {
        grid-template-columns: 1fr; /* Already set for mobile, explicit here */
        padding: 3rem 1rem; /* Slightly reduced padding on mobile for these sections */
    }

    /* Ensure image is first on mobile for these sections if desired */
    #course-creation img, #management img {
        order: -1; /* Makes image appear before text block on mobile */
    }

    @media (min-width: 768px) {
        #course-creation img, #management img {
            order: 0; /* Reset order for desktop */
        }
        #multimedia-integration div, #discussions div {
             order: -1; /* Text first on desktop */
        }
         #multimedia-integration img, #discussions img {
            order: 0;
        }
    }

    .footer-links {
        text-align: left; /* Keep text left-aligned on mobile for footer sections */
    }
    .footer-links > div {
        align-items: flex-start; /* Align items to the start */
    }
     .footer-links ul {
        align-items: flex-start; /* Align list items to the start */
    }
}

.header-logo-img {
    height: 36px; /* Slightly larger */
    width: auto;
    margin-top: 0; /* Reset margin from general img styles */
    border-radius: 0; /* Reset if global img has radius */
}

.footer-logo-img {
    height: 36px; /* Consistent with header logo */
    width: auto;
    margin-bottom: 0; /* Remove margin as it's handled by flex gap in .logo a */
    margin-top: 0;
    border-radius: 0;
}

/* Re-enable image order for specific sections where text should be first on mobile */
@media (max-width: 767px) { /* Below md breakpoint */
    #multimedia-integration img, #discussions img {
        order: -1; /* Image first on mobile for these two sections */
    }
}

@media (max-width: 768px) { /* md breakpoint */
    .footer-links > div:first-child {
        align-items: center; /* Center logo and text in footer on mobile */
    }
    .footer-logo-img {
        margin-left: auto; /* Center the image itself if text is centered */
        margin-right: auto;
    }
}

/* General utility class for screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Privacy Policy Page Styles */
.policy-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem 1.5rem;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.policy-container h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    text-align: left;
}

.policy-container .last-updated {
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.policy-container section {
    margin-bottom: 2.5rem;
    padding: 0;
}

.policy-container h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1rem;
    text-align: left;
}

.policy-container p {
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.policy-container ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.policy-container ul li {
    color: #4a5568;
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.policy-container strong {
    font-weight: 600;
    color: #2d3748;
}

@media (max-width: 768px) {
    .policy-container {
        margin: 1rem;
        padding: 1.5rem 1rem;
    }

    .policy-container h1 {
        font-size: 2rem;
    }

    .policy-container h2 {
        font-size: 1.25rem;
    }
}