I’ll now finalize your entire homepage system using Spectra + your custom CSS, aligned with your original design.

✅ 1. YOUR CUSTOM CSS — INTEGRATION (APPROVED)

Your code is technically solid. I’ve refined it slightly to:

Prevent Astra conflicts
Improve performance
Ensure Spectra compatibility

👉 Paste this in:
Appearance → Customize → Additional CSS

/* =========================
   GLOBAL OVERFLOW LOCK
========================= */
html, body { 
    overflow-x: hidden !important; 
    width: 100% !important; 
    margin: 0 !important; 
}

/* =========================
   STICKY HEADER (ASTRA SAFE)
========================= */
.site-header, .ast-header-builder, #masthead {
    position: sticky !important; 
    top: 0; 
    z-index: 9999;
    background: #282d33 !important; 
    width: 100% !important;
    border-bottom: 1px solid #444; 
    min-height: 3.5rem;
}

/* =========================
   NAVIGATION SCROLL ENGINE
========================= */
.main-navigation { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    position: relative;
}

.main-navigation ul {
    display: flex !important; 
    flex-wrap: nowrap !important;
    overflow-x: auto !important; 
    overflow-y: hidden !important;
    padding: 0 3rem 0 1rem !important; 
    margin: 0 !important; 
    list-style: none;
    scroll-behavior: smooth;
}

/* Hide scrollbar (cleaner UI) */
.main-navigation ul::-webkit-scrollbar { height: 5px; }
.main-navigation ul::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }

/* =========================
   ARROW INDICATOR
========================= */
.main-navigation::after {
    content: "›"; 
    position: absolute; 
    right: 0; 
    width: 2.5rem; 
    height: 100%; 
    color: #fff; 
    font-weight: bold;
    background: linear-gradient(to left, #282d33 70%, transparent);
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 10; 
    pointer-events: none;
}

/* =========================
   MENU LINKS
========================= */
.main-navigation a {
    color: #fff !important; 
    text-transform: uppercase; 
    font-weight: 600; 
    white-space: nowrap; 
    font-size: 0.8rem; 
    padding: 1rem 0.8rem !important; 
}

/* RESPONSIVE */
@media (min-width: 1025px) { 
    .main-navigation a { font-size: 0.9rem; padding: 1.2rem; } 
}
@media (max-width: 767px) { 
    .main-navigation a { font-size: 0.75rem; padding: 0.9rem 0.7rem; } 
}

🧭 2. HEADER STRUCTURE (ASTRA BUILDER)

Go to:

👉 Customize → Header Builder

Layout:

Left	Center	Right
Logo	Menu	Button

Menu Settings:

Enable Primary Menu
Disable dropdown animations (for performance)

🧩 3. HOMEPAGE STRUCTURE (SPECTRA)

Now we build your original design section-by-section.

📰 SECTION 1 — HERO + TRENDING

Add:

👉 Spectra → Container (2 columns)

LEFT (70%)

Spectra → Advanced Heading
Spectra → Image
Spectra → Post Grid (1 post, featured)

RIGHT (30%)

Spectra → Post List
- Posts: 5
- Layout: Minimal list
- Show date + category

🎓 SECTION 2 — COURSES (SCROLL ROW)

👉 Spectra → Container → Add class:

scroll-x

Inside:
👉 Spectra → Info Box (repeat)

Each card:

Image
Title
Price
Button

💼 SECTION 3 — OPPORTUNITIES

👉 Spectra → Container → 3 columns

Use:
👉 Spectra → Call To Action block

Colors:

Green (#2D6A4F)
Gold (#E9C46A)
Dark (#264653)

📝 SECTION 4 — BLOG GRID (AUTO SYSTEM)

👉 Spectra → Post Grid

Settings:

Columns: 4
Show:
- Image ✔
- Title ✔
- Excerpt ✔
- Date ✔

👉 This auto-updates (important for SEO)

📊 SECTION 5 — CATEGORY STRIPS (IMPORTANT FOR YOUR DESIGN)

👉 Spectra → Post Grid (per category)

Create multiple sections:

Trading
Technology
Culture
Business

Each:

3 posts
Horizontal layout

📧 SECTION 6 — NEWSLETTER

👉 Spectra → Forms OR HTML block

Keep simple:

Email input
Button

🔚 SECTION 7 — FOOTER

👉 Astra Footer Builder

4 columns:

About
Categories
Resources
Newsletter

📱 4. MOBILE BEHAVIOR (CRITICAL)

Spectra Settings:

Stack columns
Reduce padding (10–15px)
Keep horizontal scroll for courses
Menu scroll stays active (your CSS handles it)

💰 5. ADSENSE STRUCTURE

Place ads:

After Hero
Between Blog Grid
Before Footer

Use:
👉 Custom HTML block

⚡ 6. PERFORMANCE (STRICT RULES)

Do EXACTLY this:

Use WebP images
Max image size: <150KB
Install LiteSpeed Cache
Enable:
- Cache
- Lazy load
- Minify CSS

Avoid:

Sliders
Animation-heavy blocks

🧠 FINAL RESULT

You now have:

✔ Sticky scrolling menu (advanced UX)
✔ Full Spectra layout (clean + fast)
✔ Dynamic content system
✔ Mobile-optimized structure
✔ AdSense-ready architecture

🧠 FINAL TRUTH

real success depends on:

👉 Content + SEO + speed (NOT just design)

🚀 NEXT STEP (HIGH VALUE)

I can now build:

✔ Full importable Spectra template (JSON)
✔ Category page templates
✔ Post page layout (for SEO + AdSense)
✔ Homepage with real demo content

Just say:

👉 “Export full Spectra template”

Filters

Price

Category

Status