/* Base Styles */
html, body {
    font-family: 'Montserrat', sans-serif;
    background-color: white;
    margin: 0;
    padding: 0;
    color: #333;
}

/* ----------------------- */
/* Header Section          */
/* ----------------------- */
.header {
    padding: 1rem 2rem;
    background-color: white;
    border-bottom: 1px solid #ddd;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ----------------------- */
/* Hero Section            */
/* ----------------------- */
.hero-section {
    text-align: center;
    padding: 3rem 1rem;
}

    .hero-section h1 {
        margin: 1rem 0;
        font-size: 2.5rem;
        color: #1b6ec2; /* Blue accent */
    }

    .hero-section p {
        font-size: 1.2rem;
        margin: 0.5rem 0;
    }

.btn-blue {
    background-color: #1b6ec2;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1rem;
}

/* ----------------------- */
/* Key Features Section    */
/* ----------------------- */
.features-section {
    padding: 2rem 1rem;
    text-align: center;
    background-color: #f9f9f9;
}

    .features-section h2 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

.comparison-table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}

    .comparison-table th,
    .comparison-table td {
        border: 1px solid #ddd;
        padding: 1rem;
    }

/* ----------------------- */
/* Illustration & Course Features Section */
/* ----------------------- */
.course-features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 2rem 1rem;
}

.illustration-container,
.features-text {
    flex: 1;
    padding: 1rem;
}

    .features-text h3 {
        font-size: 1.8rem;
        color: #dc3545; /* Red accent */
    }

    .features-text ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .features-text li {
        margin: 0.5rem 0;
    }

/* ----------------------- */
/* Promo Section           */
/* ----------------------- */
.promo-section {
    text-align: center;
    padding: 2rem 1rem;
}

.promo-banner {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.speech-bubbles span {
    display: inline-block;
    background: #f1f1f1;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
}

/* ----------------------- */
/* Pricing Section         */
/* ----------------------- */
.pricing-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: #f9f9f9;
}

.pricing-card {
    border: 1px solid #ddd;
    padding: 1.5rem;
    margin: 1rem;
    flex: 1 1 250px;
    max-width: 300px;
    text-align: center;
    border-radius: 8px;
}

    .pricing-card h3 {
        margin-top: 0;
    }

.price {
    font-size: 1.5rem;
    color: #1b6ec2;
}

/* ----------------------- */
/* help Section             */
/* ----------------------- */
.help-section {
    padding: 2rem 1rem;
    text-align: center;
}

.accordion {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-button {
    background-color: #f7f7f7;
    border: none;
    padding: 1rem;
    text-align: left;
    width: 100%;
    cursor: pointer;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.accordion-body {
    padding: 1rem;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    margin-bottom: 1rem;
}

/* ----------------------- */
/* Footer Section          */
/* ----------------------- */
.footer {
    background-color: #f4f4f4;
    padding: 2rem 1rem;
    text-align: center;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    display: inline-flex;
    gap: 1rem;
}

.footer-links li {
    margin: 0;
}

.social-media a {
    margin: 0 0.5rem;
}

.footer-branding {
    margin-top: 1rem;
}

    .footer-branding p {
        margin: 0.5rem 0 0;
        color: #666;
    }