/* =========================
   Root Variables & Base
   ========================= */
:root {
    --bg-deep-indigo: #1A1A2E;
    --bg-dark-card: #23233B;
    --bg-input: #18182E;
    --text-light-gray: #E0E0E0;
    --text-medium-gray: #B0B0B0;
    --accent-cyan: #00BCD4;
    --accent-gold: #FFD700;
    --border-color: #2C2C4A;
    --font-primary: 'Hind Siliguri', sans-serif;
    --font-secondary: 'Hind Siliguri', sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    background-color: var(--bg-deep-indigo);
    color: var(--text-light-gray);
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* avoid unexpected overflow from padding */
    overflow-x: hidden; /* prevent horizontal sliding on small screens */
}

.main-content {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 110px 16px 48px; /* reduced top padding so header + content don't cause large scroll */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.container {
    width: 100%;
    max-width: 1100px;
    background: none;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

main {
    padding: 0 10px;
}

section {
    background: var(--bg-dark-card);
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 188, 212, 0.10);
    border: 1px solid var(--border-color);
    padding: 36px 28px;
    margin: 0 0 24px 0;
}

h2 {
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 24px;
    color: var(--accent-cyan);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 10px;
}

h3 {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 18px;
    color: var(--accent-gold);
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Extra spacing for month headings inside program sections */
.program-section > h3 {
    margin-top: 10px; /* larger gap before each month block */
}

h4 {
    color: var(--accent-gold) !important;
}

p, li {
    font-size: 16px;
    color: var(--text-medium-gray);
}

ul, ol {
    margin: 0;
    padding: 0;
}

/* =========================
   Feature List Styles
   ========================= */
#features-list,
#competitive-advantage-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    list-style: none;
    padding-left: 0;
    margin-bottom: 10px;
}

/* Section Spacing and Layout Control */
section {
    margin-bottom: 10px;
    clear: both;
    position: relative;
}

.program-section {
    margin-bottom: 10px;
    padding-bottom: 10px;
    clear: both;
}

.program-section h3 {
    color: #FFD700;
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* Program Overview Section */
.program-overview {
    margin-bottom: 10px !important;
}

/* Curriculum Overview Section */
#curriculum-overview {
    margin-bottom: 10px !important;
    clear: both;
}

/* Why Join Section */
#why-join {
    margin-bottom: 10px !important;
    clear: both;
}

/* Testimonials Section */
#testimonials {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    clear: both;
}

/* Curriculum Overview Grid Layout */
.competitive-advantage-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    list-style: none;
    padding: 0;
    margin: 20px 0 20px 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Handle odd number of items - CSS fallback */
.competitive-advantage-list .feature-item:nth-child(odd):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 500px;
}

/* Single item centering for competitive-advantage-list - More compatible approach */
.competitive-advantage-list .feature-item:only-child {
    grid-column: 1 / -1;
    max-width: 500px;
    justify-self: center;
}

.feature-item {
    flex: 1 1 350px;
    min-width: 300px;
    margin-bottom: 0;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 22px 24px;
    box-shadow: 0 2px 12px rgba(0,188,212,0.07);
    transition: box-shadow 0.2s, transform 0.2s;
    /* ensure pseudo-element borders/glows and stacking work consistently */
    position: relative;
    overflow: hidden;
}

.feature-item:hover {
    box-shadow: 0 6px 24px rgba(0,188,212,0.15);
    transform: translateY(-4px) scale(1.02);
}

.feature-item strong {
    color: var(--accent-gold);
    font-size: 1.08em;
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

.feature-item p {
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 0.95em;
    color: var(--text-medium-gray);
}

/* =========================
   Button Styles
   ========================= */

/* Base button styles */
.buy-btn, .order-btn, .whatsapp-btn, .basic-btn {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.08em;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 14px 32px;
    margin: 28px auto 0 auto;
    border: none;
    outline: none;
    border-radius: 10px;
    box-sizing: border-box;
    width: auto;
    min-width: 120px;
    max-width: 100%;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Buy button specific styles */
.buy-btn {
    background: #111218;
    color: var(--accent-gold);
    border-radius: 18px 4px 18px 4px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 0 10px 2px #00bcd4cc, 0 0 2px 1px #FFD70055;
}

.buy-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px 4px 18px 4px;
    padding: 2px;
    background: linear-gradient(120deg, #00bcd4, #FFD700, #00bcd4, #FFD700, #00bcd4);
    background-size: 400% 400%;
    animation: borderGlow 2.5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

@keyframes borderGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.buy-btn > * {
    position: relative;
    z-index: 3;
}

.buy-btn:hover, .buy-btn:focus {
    background: #18182E;
    color: var(--accent-gold);
    border-radius: 4px 18px 4px 18px;
    box-shadow: 0 0 6px 1px #00bcd499, 0 0 1px 1px #FFD70044;
}

.buy-btn:hover::before, .buy-btn:focus::before {
    border-radius: 4px 18px 4px 18px;
    filter: brightness(1.1) blur(0.5px);
}

/* Order and WhatsApp button styles */
.order-btn, .whatsapp-btn {
    background: #111218;
    color: var(--accent-gold);
    border-radius: 10px;
    box-shadow: 0 0 10px 2px #FFD70055;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Basic button (for header) */
.basic-btn {
    background: var(--accent-cyan);
    color: #fff;
    font-size: 0.95em;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.basic-btn:hover {
    background: var(--accent-gold);
    color: #111218;
}

/* CTA button container: center buttons and allow wrapping/stacking on small screens */
.program-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* allow buttons to wrap to next line on narrow screens */
}

/* Ensure in small screens buttons stack vertically and remain centered */
@media (max-width: 700px) {
    .program-cta {
        flex-direction: column;
        gap: 10px;
    }
    .program-cta .buy-btn, .program-cta .order-btn, .program-cta .whatsapp-btn {
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Ensure anchors that wrap buttons become full-width containers and center the button inside on small screens */
@media (max-width: 700px) {
    .program-cta > a {
        display: flex;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
    .program-cta > a > .buy-btn,
    .program-cta > a > .order-btn,
    .program-cta > a > .whatsapp-btn {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        display: inline-flex;
        justify-content: center;
    }
}

/* FAQ accordion styles */
.faq { display: block; margin-top: 8px; }
.faq-item { border-top: 1px solid var(--border-color); }
.faq-item:first-child { border-top: none; }
.faq-question {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 12px;
        cursor: pointer;
        background: transparent;
        color: var(--text-light-gray);
}
.faq-question h4 { margin: 0; font-size: 1em; color: var(--accent-cyan); }
.faq-question .chev { transition: transform 0.25s ease; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.28s ease, padding 0.2s ease; padding: 0 12px; }
.faq-answer.open { padding: 12px; }
.faq-answer p { margin: 0; color: var(--text-medium-gray); }
.faq-item.open .chev { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    .faq-question .chev, .faq-answer { transition: none; }
}

/* Modernized FAQ card styling */
.faq { display: grid; gap: 14px; }
.faq-item { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); overflow: visible; }
.faq-question { padding: 16px 18px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }

/* Outcomes: reduce horizontal padding on small screens only */
@media (max-width: 700px) {
    #why-results-matter .feature-item {
        /* smaller vertical padding keeps card spacing, but reduce left/right gutters */
        padding: 14px 12px;
    }
}
.faq-question:hover { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); }
.faq-question h4 { font-size: 1.02em; color: var(--text-light-gray); margin: 0; }
.chev { display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; color: var(--accent-cyan); }
.faq-answer { transition: max-height 0.36s cubic-bezier(.2,.9,.19,1), opacity 0.28s ease; opacity: 0; }
.faq-answer.open { opacity: 1; }
.faq-item .faq-answer { padding: 0 18px 18px 18px; }
.faq-answer p { color: var(--text-medium-gray); line-height:1.6; margin:0; }
.faq-item { position: relative; }

/* Animated edge glow for FAQ cards */
.faq-item::before{
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 14px;
        padding: 3px;
        background: linear-gradient(90deg, #00bcd4, #ffd700, #00bcd4);
        background-size: 300% 100%;
        animation: faqEdgeGlow 4s linear infinite;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
        opacity: 0.55;
        transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}
.faq-item::after{ /* subtle inner sheen */
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
        pointer-events: none;
        z-index: 0;
}
.faq-item .faq-question, .faq-item .faq-answer { position: relative; z-index: 2; }

.faq-item:hover{ transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
.faq-item:hover::before{ opacity: 1; transform: scale(1.02); filter: blur(.6px); }

/* Keep glow active when opened */
.faq-item.open::before{ opacity: 1; animation-duration: 2.4s; filter: drop-shadow(0 6px 10px rgba(255,215,0,0.08)); }
.faq-item.open .chev { transform: rotate(90deg); }

@keyframes faqEdgeGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Centered FAQ variant: short Q/A pairs that should appear centered */
.faq-item.faq-center .faq-question { justify-content: center; gap: 12px; text-align: center; }
.faq-item.faq-center .faq-question h4 { text-align: center; width: auto; }
.faq-item.faq-center .chev { margin-left: 8px; }
.faq-item.faq-center .faq-answer { text-align: center; }

/* =========================
    Competitive Advantage
    ========================= */
/* support both id and class usage for the list container so syllabus and
    homepage variants receive identical styling */
.competitive-advantage-list .feature-item,
#competitive-advantage-list .feature-item {
     border-left: 4px solid var(--accent-cyan);
     border-radius: 8px;
     padding: 20px;
     margin-bottom: 18px;
     background-color: var(--bg-input);
}

/* Curriculum Overview: reduce horizontal padding on small screens only (affects only curriculum cards) */
@media (max-width: 700px) {
    #curriculum-overview .feature-item,
    .competitive-advantage-list .feature-item {
        padding: 14px 12px;
    }
}

#competitive-advantage-list .feature-item:last-child {
    margin-bottom: 0;
}

/* =========================
   Audience Section Styles
   ========================= */
#audience-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
}

.audience-item {
    background-color: var(--bg-input);
    padding: 15px 20px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-cyan);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    transition: box-shadow 0.2s, transform 0.2s;
}

/* Why-join / feature-boxes: exact copy of homepage feature styles prefixed with
   #why-join to ensure specificity when used on the syllabus page. This provides
   the animated gradient edge, mask, hover background, and text transitions. */
#why-join #features-list .feature-item {
    position: relative;
    background: #18182E;
    border: none;
    box-shadow: 0 0 0 2px #00bcd4, 0 0 18px 2px #00bcd455;
    border-radius: 18px 4px 18px 4px;
    overflow: hidden;
    transition: box-shadow 0.3s, background 0.3s, border-radius 0.3s;
}
#why-join #features-list .feature-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px 4px 18px 4px;
    padding: 2.5px;
    background: linear-gradient(120deg, #00bcd4, #FFD700, #00bcd4, #FFD700, #00bcd4);
    background-size: 400% 400%;
    animation: featureTechyGlow 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
    transition: border-radius 0.3s;
}
#why-join #features-list .feature-item > * {
    position: relative;
    z-index: 2;
    transition: color 0.3s;
}
#why-join #features-list .feature-item:hover,
#why-join #features-list .feature-item:focus {
    background: linear-gradient(120deg, #ffea82 0%, #fffc68 40%, #00bcd4 100%);
    box-shadow: 0 0 0 3px #00bcd4, 0 0 24px 4px #FFD70099;
    border-radius: 4px 18px 4px 18px;
}
#why-join #features-list .feature-item:hover::before,
#why-join #features-list .feature-item:focus::before {
    border-radius: 4px 18px 4px 18px;
    filter: brightness(1.1) blur(0.5px);
}
#why-join #features-list .feature-item:hover h4,
#why-join #features-list .feature-item:focus h4,
#why-join #features-list .feature-item:hover p,
#why-join #features-list .feature-item:focus p {
    color: #111218 !important;
}
#why-join #features-list .feature-item h4 {
    text-align: center;
    width: 100%;
    color: #FFD700;
    font-weight: 800;
}

.audience-item p {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    color: var(--text-medium-gray);
}

#audience .audience-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 20px rgba(0, 188, 212, 0.15);
}

#audience .audience-item strong {
    color: var(--accent-gold);
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

#audience .audience-item p {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
}

/* =========================
   Results Features Section
   ========================= */
.results-features-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 28px 36px;
    margin: 32px auto 0 auto;
    max-width: 1100px; /* keep the grid contained */
    justify-items: center; /* center items inside their grid cells */
    justify-content: center; /* center the whole grid within its container */
}

.results-features-list .feature-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 22px 24px;
    box-shadow: 0 2px 12px rgba(0,188,212,0.07);
    transition: box-shadow 0.2s, transform 0.2s;
    width: 100%;
    max-width: 360px; /* keep boxes from becoming too wide */
}

/* Why-results-matter: special edge + glow effect (no hover) used on homepage
   section titled "আপনার সাফল্যই আমাদের লক্ষ্য". Reused for syllabus Outcomes. */
#why-results-matter .feature-item {
    position: relative;
    background: #18182E;
    border: none;
    border-radius: 18px 4px 18px 4px;
    overflow: hidden;
    box-shadow:
        0 0 0 3px #00bcd4,
        0 0 8px 2px #FFD70055,
        0 0 16px 3px #00bcd455;
}
#why-results-matter .feature-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px 4px 18px 4px;
    padding: 2.5px;
    background: linear-gradient(120deg, #00bcd4, #FFD700, #00bcd4, #FFD700, #00bcd4);
    background-size: 400% 400%;
    animation: whyResultsTechyGlow 4s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
}
@keyframes whyResultsTechyGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* -----------------------------
   Responsive fixes & overrides
   - Make syllabus grids responsive
   - Center the odd/5th outcomes item on desktop/tablet
   - Normalize section vertical spacing to standard values
   - Ensure header displays like index page on small screens
   ----------------------------- */

/* Standardized section spacing */
section { margin-bottom: 28px; padding: 28px; }
.program-section { margin-bottom: 20px; padding-bottom: 18px; }

/* Results/Outcomes responsive grid */
.results-features-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 22px 28px;
    margin: 24px auto 0 auto;
    max-width: 1100px;
}

/* If there are 5 items, make the 5th sit in the middle column on desktop */
.results-features-list .feature-item:nth-child(5) {
    grid-column: 2 / 3;
}

/* For 4 or fewer items the grid naturally fills; for odd counts >3 the rule above centers the extra item */

/* Curriculum two-column grid (keeps two boxes side-by-side) */
.competitive-advantage-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 20px;
    align-items: start;
}

/* If the competitive list contains an only-child, center it */
.competitive-advantage-list .feature-item:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 640px;
}

/* Make feature boxes adapt on narrow screens */
@media (max-width: 1024px) {
    .results-features-list { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
    .results-features-list .feature-item:nth-child(5) { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .competitive-advantage-list { grid-template-columns: 1fr; }
    .results-features-list { grid-template-columns: 1fr; gap: 16px; }
    section { padding: 18px; }
    .program-hero h1 { font-size: 1.28em; }
}

/* Mobile safety: prevent wide feature boxes from causing horizontal scroll */
@media (max-width: 720px) {
    /* feature items should never force a minimum width on small screens */
    .feature-item,
    .results-features-list .feature-item,
    .competitive-advantage-list .feature-item,
    #features-list .feature-item {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 14px !important;
    }

    /* force one-column layout and tighten gaps */
    #features-list,
    #competitive-advantage-list,
    .results-features-list,
    #audience-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* ensure header is fixed and full-width on mobile */
    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }

    /* ensure body/main respects header height */
    body, main.program-container, .main-content { padding-top: calc(var(--header-height, 56px) + 6px) !important; }

    /* particles container should not intercept or overflow */
    #particles-bg { overflow: hidden !important; left: 0 !important; right: 0 !important; }
}

/* Header parity: ensure header looks like index (sticky, padding, basic-btn positioning) */
.main-header { position: sticky; top: 0; z-index: 120; background: var(--bg-deep-indigo); box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.main-header .header-title-only { padding: 14px 0; }
.main-header .header-title-only h1 { margin: 0; font-family: 'Orbitron', var(--font-primary); font-weight: 700; }
.main-header a[ href="/syllabus.html" ] { position: absolute; right: 16px; top: 12px; }

@media (max-width: 720px) {
    .main-header { position: fixed; left: 0; right: 0; top: 0; }
    /* reduce header title padding on small screens to save space */
    .main-header .header-title-only { padding: 10px 8px; }
    /* ensure main container respects header height via CSS var set by JS */
    main.program-container, .main-content { padding-top: calc(var(--header-height, 56px) + 12px); }
}

/* Strong override: make header fixed and always on top; ensure body respects header height
   This complements the JS that sets --header-height. It helps on devices where sticky
   may behave inconsistently. */
.main-header.sticky-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 12000 !important; /* sit above particles and any other element */
    background: linear-gradient(90deg, #18182E 60%, #00BCD4 120%) !important;
    box-shadow: 0 6px 30px rgba(0,0,0,0.5) !important;
}

/* Ensure page content is pushed below the fixed header consistently */
body, main.program-container, .main-content { padding-top: calc(var(--header-height, 64px) + 8px) !important; }

/* Make particle background non-interactive and clipped to viewport to avoid creating overflow */
#particles-bg { pointer-events: none !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; z-index: 0 !important; }

/* Buttons responsive small tweaks */
@media (max-width: 480px) {
    .buy-btn, .order-btn, .whatsapp-btn, .basic-btn { padding: 10px 14px; font-size: 0.98em; }
    .program-cta .buy-btn, .program-cta .order-btn { width: 100%; max-width: 480px; }
}

#why-results-matter .feature-item > * {
    position: relative;
    z-index: 2;
}
/* Keep text color stable on hover for the results/outcomes section (homepage
   shows these boxes without changing inner text color on hover). This
   overrides the generic .feature-item:hover rules. */
#why-results-matter .feature-item:hover h4,
#why-results-matter .feature-item:focus h4 {
    color: #FFD700 !important;
}
#why-results-matter .feature-item:hover p,
#why-results-matter .feature-item:focus p {
    color: #BFDFFF !important;
}

/* =========================
   Setup Steps Section
   ========================= */
.setup-steps ol {
    margin: 0 0 24px 0;
    padding-left: 20px;
}

.setup-steps li {
    padding-left: 40px;
    position: relative;
    margin-bottom: 18px;
}


.important-note {
    background: rgba(255, 215, 0, 0.08);
    border-left: 4px solid var(--accent-gold);
    padding: 16px 18px;
    border-radius: 6px;
    margin-top: 18px;
    font-size: 1em;
    color: var(--text-light-gray);
}

.code-span {
    font-family: monospace;
    background-color: var(--bg-input);
    color: var(--accent-cyan);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.95em;
    border: 1px solid var(--border-color);
}

/* =========================
   Highlight Box for Pricing
   ========================= */
.highlight-box {
    padding: 20px 25px;
    margin: 30px 0;
    border-radius: 8px;
    font-size: 1.05em;
    background-color: rgba(0, 188, 212, 0.1);
    border: 1px solid var(--accent-cyan);
    text-align: center;
}

.highlight-box strong {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--accent-cyan);
    font-size: 1.2em;
}

/* =========================
   Sales Pitch Style
   ========================= */
.sales-pitch {
    font-style: italic;
    color: var(--text-light-gray);
    margin: 25px 0;
    padding: 0 15px;
    border-left: 3px solid var(--accent-gold);
    text-align: center;
}

/* =========================
   Cost Comparison Table
   ========================= */
table.cost-comparison {
    width: 100%;
    margin: 25px 0;
    border-collapse: collapse;
    color: var(--text-medium-gray);
}
table.cost-comparison th, table.cost-comparison td {
    border: 1px solid var(--border-color);
    padding: 12px;
    text-align: center;
}
table.cost-comparison th {
    background-color: var(--bg-input);
    color: var(--accent-cyan);
    font-family: var(--font-secondary);
    font-weight: 700;
}
table.cost-comparison .pro-col {
    background-color: rgba(0, 188, 212, 0.1);
    font-weight: bold;
    color: var(--text-light-gray);
}

/* =========================
   Pro Features List
   ========================= */
.pro-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 36px;
}

.pro-features-list li {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 22px 24px;
    box-shadow: 0 2px 12px rgba(0,188,212,0.07);
    transition: box-shadow 0.2s, transform 0.2s;
}

.pro-features-list li:hover {
    box-shadow: 0 6px 24px rgba(0,188,212,0.15);
    transform: translateY(-4px) scale(1.02);
}

.pro-features-list strong {
    color: var(--accent-gold);
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
}

.pro-features-list p {
    color: var(--text-medium-gray);
    font-size: 1em;
    margin: 0;
}

#pro-features .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 36px 24px;
    background: var(--bg-dark-card);
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 188, 212, 0.10);
    border: 1px solid var(--border-color);
}

/* =========================
   Responsive Design
   ========================= */
@media (max-width: 900px) {
    .main-content {
        padding: 160px 4vw 48px;
    }
    section {
        padding: 24px 10px;
    }
    #features-list,
    #competitive-advantage-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pro-features-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    #pro-features .container {
        padding: 24px 8px;
    }
    #audience-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .results-features-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0.5in;
        margin: 10px;
        min-height: auto;
    }
    #audience ul {
        grid-template-columns: 1fr;
    }
    .dynamic-feature-card-content {
        flex-direction: column;
        text-align: center;
    }
    .dynamic-feature-card .icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
    h2 { font-size: 20px; }
}

@media (max-width: 600px) {
    .main-content {
        padding: 160px 2vw 24px;
        gap: 24px;
    }
    section {
        padding: 14px 4px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0.3in;
        margin: 5px;
    }
    h2 { font-size: 18px; }
    h3 { font-size: 16px; }
    p, li { font-size: 14px; }
    .feature-item, .audience-item {
        padding: 10px;
    }
    .dynamic-feature-card-content {
        padding: 15px;
    }
    .code-span {
        padding: 2px 6px;
        font-size: 0.9em;
    }
    .highlight-box {
        padding: 15px;
        font-size: 0.95em;
    }
    .important-note {
        padding: 10px;
        font-size: 0.85em;
    }
    .sales-pitch {
        margin: 15px 0;
        padding: 0 10px;
    }
    .setup-steps li {
        padding-left: 40px;
    }
    .setup-steps li::before {
        width: 30px;
        height: 30px;
        font-size: 16px;
        line-height: 30px;
    }
    table.cost-comparison th, table.cost-comparison td {
        padding: 10px;
        font-size: 14px;
    }
}

/* =========================
   End of home.css
   ========================= */

/* --- Scoped mobile padding adjustments for 'Why join this program?' ---
   Reduce left/right padding inside the feature boxes only for the #why-join
   section on smaller screens so the text uses the available width more
   efficiently on phones. These rules are intentionally specific and placed
   near the end of the stylesheet to ensure they override earlier declarations.
*/
@media (max-width: 700px) {
    #why-join #features-list .feature-item {
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }
    #why-join #features-list .feature-item h4,
    #why-join #features-list .feature-item p {
        padding-left: 8px !important;
        padding-right: 8px !important;
        text-align: left !important;
    }
}

@media (max-width: 480px) {
    #why-join #features-list .feature-item {
        padding: 10px 6px !important;
    }
    #why-join #features-list .feature-item h4,
    #why-join #features-list .feature-item p {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* Pricing note horizontal padding for readability */
.pricing-note {
    padding-left: 18px;
    padding-right: 18px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media (max-width: 900px) {
    .pricing-note { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 480px) {
    .pricing-note { padding-left: 10px; padding-right: 10px; font-size: 16.5px; }
}

/* Improve line-height and font-size for pricing note */
.pricing-note { line-height: 1.6; font-size: 17px; }

@media (max-width: 900px) {
    .pricing-note { line-height: 1.5; font-size: 16px; }
}

@media (max-width: 480px) {
    .pricing-note { line-height: 1.45; font-size: 15px; }
}

/* Curriculum intro paragraph readability */
.curriculum-intro { line-height: 1.7; font-size: 17px; max-width: 900px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
    .curriculum-intro { line-height: 1.55; font-size: 16px; }
}

@media (max-width: 480px) {
    .curriculum-intro { line-height: 1.45; font-size: 15px; }
}

/* Final CTA paragraph horizontal padding */
.final-cta-note {
    padding-left: 18px;
    padding-right: 18px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media (max-width: 900px) {
    .final-cta-note { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 480px) {
    .final-cta-note { padding-left: 10px; padding-right: 10px; font-size: 15.5px; }
}

/* Force larger visible padding on desktop and ensure padding counts in width */
section#final-cta .final-cta-note {
    padding-left: 64px !important;
    padding-right: 64px !important;
    box-sizing: border-box !important;
    line-height: 1.75 !important; /* more readable multi-line paragraphs */
    font-size: 18px !important;
}

@media (max-width: 1200px) {
    section#final-cta .final-cta-note { padding-left: 48px !important; padding-right: 48px !important; }
}

@media (max-width: 900px) {
    section#final-cta .final-cta-note { padding-left: 22px !important; padding-right: 22px !important; line-height: 1.6 !important; }
}

@media (max-width: 480px) {
    section#final-cta .final-cta-note { padding-left: 12px !important; padding-right: 12px !important; font-size: 15.5px !important; line-height: 1.5 !important; }
}

/* stronger selector to ensure desktop padding is not overridden */
section#final-cta .final-cta-note {
    padding-left: 28px; /* slightly larger on desktop for clear breathing room */
    padding-right: 28px;
}

/* If a feature grid contains a single box, center that box for balance */
.competitive-advantage-list > .feature-item:only-child,
.results-features-list > .feature-item:only-child,
#features-list > .feature-item:only-child {
    justify-self: center; /* center the grid item */
    max-width: 720px;     /* limit width so it doesn't span full column */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .competitive-advantage-list > .feature-item:only-child,
    .results-features-list > .feature-item:only-child,
    #features-list > .feature-item:only-child {
        max-width: 100%;
        justify-self: stretch;
        margin-left: 0;
        margin-right: 0;
    }

    /* Make curriculum overview single column on tablet */
    .competitive-advantage-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Center single items on tablet */
    .competitive-advantage-list .feature-item:only-child {
        max-width: 600px;
        justify-self: center;
    }

    /* Add horizontal padding inside boxes on tablet and smaller to improve readability */
    .feature-item h4, .feature-item p,
    .audience-item p,
    .results-features-list .feature-item h4,
    .results-features-list .feature-item p {
        padding-left: 14px;
        padding-right: 14px;
        box-sizing: border-box;
    }

    /* Make the results grid single-column and centered on narrower viewports */
    .results-features-list {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    /* Slightly larger inner padding for small phones */
    .feature-item h4, .feature-item p,
    .audience-item p,
    .results-features-list .feature-item h4,
    .results-features-list .feature-item p {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Single column for curriculum overview on mobile */
    .competitive-advantage-list {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 10px;
    }

    .competitive-advantage-list .feature-item:only-child {
        max-width: 100%;
    }
}

/* Outcomes Section Specific Styling */
#outcomes {
    background: transparent !important;
    padding: 0 !important;
    margin: 40px 0 !important;
    border: none !important;
    box-shadow: none !important;
    clear: both;
}

#outcomes .results-features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
    justify-content: center;
    align-items: start;
}

#outcomes .results-features-list .feature-item {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border: 2px solid #333;
    border-radius: 15px;
    padding: 25px 20px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 350px;
    justify-self: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    margin-bottom: 0;
}

#outcomes .results-features-list .feature-item:hover {
    transform: translateY(-8px);
    border-color: #00bcd4;
    box-shadow: 0 15px 35px rgba(0, 188, 212, 0.2);
}

#outcomes .results-features-list .feature-item h4 {
    color: #00bcd4;
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 600;
}

#outcomes .results-features-list .feature-item p {
    color: #ccc;
    line-height: 1.6;
    font-size: 14px;
}

/* Button System Enhanced Responsiveness */
@media screen and (max-width: 1024px) {
    .buy-btn, .order-btn, .whatsapp-btn, .basic-btn {
        padding: 12px 24px;
        font-size: 14px;
    }
    
    #outcomes .results-features-list {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        padding: 15px;
    }
}

@media screen and (max-width: 768px) {
    .buy-btn, .order-btn, .whatsapp-btn, .basic-btn {
        padding: 10px 20px;
        font-size: 13px;
        width: 100%;
        text-align: center;
    }
    
    #outcomes .results-features-list {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 10px;
        max-width: 500px;
    }
    
    #outcomes .results-features-list .feature-item {
        max-width: 100%;
        padding: 20px 15px;
    }
}

/* Curriculum Overview: reduce inner horizontal padding on mobile */
@media (max-width: 700px) {
    /* target only the curriculum overview feature items */
    #curriculum-overview .competitive-advantage-list .feature-item h4,
    #curriculum-overview .competitive-advantage-list .feature-item p {
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
    }
    /* reduce the container gutters slightly on small screens */
    #curriculum-overview .competitive-advantage-list {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 480px) {
    #curriculum-overview .competitive-advantage-list .feature-item h4,
    #curriculum-overview .competitive-advantage-list .feature-item p {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    #curriculum-overview .competitive-advantage-list {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* Program Overview & Hero: left-align and add horizontal gutters on small screens */
@media (max-width: 700px) {
    /* force left alignment for the program intro and hero blocks */
    .program-overview, .program-hero { text-align: left !important; }

    /* apply to the specific text elements quoted by the user */
    .program-overview p,
    .program-hero h1,
    .program-hero p {
        text-align: left !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .program-overview p,
    .program-hero h1,
    .program-hero p {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Curriculum intro: left-align and add gutters on small screens */
@media (max-width: 700px) {
    #curriculum-overview .curriculum-intro {
        text-align: left !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    #curriculum-overview .curriculum-intro {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Outcomes: reduce left/right inner padding on small screens only */
@media (max-width: 700px) {
    /* reduce the overall box horizontal padding so content breathes on narrow viewports */
    #outcomes .results-features-list .feature-item {
        padding-left: 12px !important;
        padding-right: 12px !important;
        /* keep vertical padding comfortable */
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        box-sizing: border-box;
        max-width: 100%;
    }

    /* tighten inner headings and paragraphs inside outcome boxes */
    #outcomes .results-features-list .feature-item h4,
    #outcomes .results-features-list .feature-item p {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 480px) {
    #outcomes .results-features-list .feature-item {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    #outcomes .results-features-list .feature-item h4,
    #outcomes .results-features-list .feature-item p {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* Desktop / Laptop: add very large horizontal padding to the cohort note paragraph */
@media (min-width: 1024px) {
    .cohort-note {
        padding-left: 120px !important;
        padding-right: 120px !important;
        max-width: none !important;
    }
}

@media (min-width: 1440px) {
    .cohort-note {
        padding-left: 220px !important;
        padding-right: 220px !important;
    }
}

/* Curriculum intro: add wide horizontal gutters on laptop/desktop screens */
@media (min-width: 1024px) {
    #curriculum-overview .curriculum-intro {
        padding-left: 120px !important;
        padding-right: 120px !important;
        max-width: none !important;
    }
}

@media (min-width: 1440px) {
    #curriculum-overview .curriculum-intro {
        padding-left: 220px !important;
        padding-right: 220px !important;
    }
}

/* Testimonials paragraph: add wide gutters on laptop/desktop screens */
@media (min-width: 1024px) {
    .testimonials-note {
        padding-left: 120px !important;
        padding-right: 120px !important;
        max-width: none !important;
    }
}

@media (min-width: 1440px) {
    .testimonials-note {
        padding-left: 220px !important;
        padding-right: 220px !important;
    }
}

/* Final CTA paragraph: add wide gutters on laptop/desktop screens */
@media (min-width: 1024px) {
    .final-cta-note {
        padding-left: 120px !important;
        padding-right: 120px !important;
        max-width: none !important;
    }
}

@media (min-width: 1440px) {
    .final-cta-note {
        padding-left: 220px !important;
        padding-right: 220px !important;
    }
}

/* Reduce the visible width of the final CTA paragraph on larger screens
   — override the wide gutters and cap the max-width so the line-length is comfortable */
@media (min-width: 1024px) {
    .final-cta-note {
        max-width: 720px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 1440px) {
    .final-cta-note {
        max-width: 780px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Center the certificate feature box in the outcomes section without changing its text.
   Use flexible layout and a max-width so it appears centered both on narrow and wide viewports. */
#outcomes .results-features-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* center child items horizontally */
    gap: 18px; /* preserve spacing between items */
}
#outcomes .results-features-list .feature-item {
    flex: 1 1 320px; /* allow items to resize but keep reasonable min width */
    max-width: 420px;
}
#outcomes .results-features-list .certificate-item {
    flex: 0 1 640px; /* let certificate be wider but not full width */
    max-width: 720px;
    align-self: center; /* vertically center if siblings wrap */
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center; /* center the text inside the certificate box */
}

/* Keep paragraph inside certificate left-aligned visually if author explicitly set it */
#outcomes .results-features-list .certificate-item p[style*="text-align:left"] {
    text-align: left !important;
    max-width: 640px;
    margin: 0.5rem auto 0;
}