Show description
Webull Success Guide
Webull Success Guide
Webull Success Guide
Webull Guide
From Beginner to Trader
App Basics
Placing an Order
Finding Stocks
Reading Charts
Success Habits
Basics
Orders
Finding
Charts
Habits
Understanding the App Basics
Get to know the 5 main tabs at the bottom of your app.
1. Watchlist (Home)
This is your customized home base. Add any stock (ticker symbol) here to monitor its price at a glance. You can create multiple watchlists (e.g., "Tech Stocks," "Long-Term Holds").
2. Markets (Discovery)
This is your "discovery" tab. Come here to find new investment ideas. You can see **Top Gainers**, **Top Losers**, **Most Active** stocks, and sector performance.
3. Account (Center Button)
This is your account center. See your **Positions** (stocks you own), **Buying Power** (money available to trade), and your overall **Profit & Loss (P&L)**.
4. Community
A social feed where other Webull users share ideas. **Be careful:** This is a good place to see what's popular, but *never* trade based on a social media post alone. Always do your own research.
5. Menu
Access to all other tools. The most important ones are the **Stock Screener** (to find stocks) and **Paper Trading** (to practice with fake money).
Mastering the Trade Ticket
These are the most critical settings. Understand them to avoid costly mistakes.
Buy (Going Long) vs. Sell (Going Short)
Buy: This is what you'll do 99% of the time as a beginner. You buy a stock hoping its price will **go up**.
Sell (Short): This is an advanced, high-risk strategy. You are betting the stock's price will **go down**. Avoid this until you are an expert.
Order Types: Market vs. Limit
Market Order
The "get it now" button. This order buys at the *best available price* instantly. Warning: In a fast-moving market, the price you *get* (the "fill price") can be much worse than the price you *saw*. Use with caution.
Limit Order (Recommended)
The "price I want" button. You set the *maximum* price you're willing to pay. If the stock is $10.50, you can set a Limit Buy at $10.00. Your order will only execute if the price drops to $10.00 or lower.…
Webull Success Guide
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webull Success Guide</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Inter Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #0a0a0a;
color: #e5e7eb; /* gray-200 */
}
/* Glassmorphism Card Style */
.card {
background: rgba(255, 255, 255, 0.05); /* very light white/10 */
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.75rem; /* rounded-xl */
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #111827; /* gray-900 */
}
::-webkit-scrollbar-thumb {
background: #4f46e5; /* indigo-600 */
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6366f1; /* indigo-500 */
}
/* Active Nav Link */
.nav-link.active {
background-color: #4f46e5; /* indigo-600 */
color: #ffffff;
}
</style>
</head>
<body class="antialiased">
<!-- Main Container -->
<div class="relative min-h-screen md:flex">
<!-- Mobile Header -->
<div class="md:hidden p-4 bg-gray-900 border-b border-gray-700 sticky top-0 z-20">
<h1 class="text-2xl font-bold text-white text-center">Webull Success Guide</h1>
</div>
<!-- Sidebar / Navigation -->
<aside class="sticky top-0 h-screen md:w-64 bg-gray-900 text-gray-300 z-10 hidden md:block shadow-lg">
<div class="p-6">
<h1 class="text-3xl font-bold text-white">Webull Guide</h1>
<p class="text-sm text-indigo-400">From Beginner to Trader</p>
</div>
<nav id="nav-menu" class="mt-6 flex flex-col space-y-2 px-4">
<a href="#basics" class="nav-link group flex items-center px-4 py-3 rounded-lg hover:bg-indigo-600 hover:text-white transition-all duration-200">
<svg class="h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
App Basics
</a>
<a href="#orders" class="nav-link group flex items-center px-4 py-3 rounded-lg hover:bg-indigo-600 hover:text-white transition-all duration-200">
<svg class="h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
Placing an Order
</a>
<a href="#finding" class="nav-link group flex items-center px-4 py-3 rounded-lg hover:bg-indigo-600 hover:text-white transition-all duration-200">
<svg class="h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
Finding Stocks
</a>
<a href="#charts" class="nav-link group flex items-center px-4 py-3 rounded-lg hover:bg-indigo-600 hover:text-white transition-all duration-200">
<svg class="h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h12M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-1.5m-15 0H3.75m0 0h12m0 0h1.5m0 0v-2.25m0 2.25v2.25m0 0h1.5m1.5-1.5H18v-3.75m0 0h1.5m1.5 0V6.75m0 0H18v3.75m0 0h-1.5m0 0h-12m0 0V6.75m0 0H3.75v3.75m0 0h1.5m0 0h-1.5m0 0H3" /></svg>
Reading Charts
</a>
<a href="#strategy" class="nav-link group flex items-center px-4 py-3 rounded-lg hover:bg-indigo-600 hover:text-white transition-all duration-200">
<svg class="h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-6.75c-.621 0-1.125.504-1.125 1.125V18.75m9 0h-9M12 15.75h.008v.008H12v-.008Zm0 0v-3.375m0 0h4.125c.621 0 1.125.504 1.125 1.125V15.75m-5.25 0h-4.125c-.621 0-1.125.504-1.125 1.125V15.75" /></svg>
Success Habits
</a>
</nav>
</aside>
<!-- Mobile Nav Bar (bottom) -->
<nav id="mobile-nav-menu" class="md:hidden fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 z-20 flex justify-around p-2">
<a href="#basics" class="nav-link group flex flex-col items-center p-2 rounded-lg text-gray-400 hover:text-white" data-section="basics">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
<span class="text-xs">Basics</span>
</a>
<a href="#orders" class="nav-link group flex flex-col items-center p-2 rounded-lg text-gray-400 hover:text-white" data-section="orders">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
<span class="text-xs">Orders</span>
</a>
<a href="#finding" class="nav-link group flex flex-col items-center p-2 rounded-lg text-gray-400 hover:text-white" data-section="finding">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
<span class="text-xs">Finding</span>
</a>
<a href="#charts" class="nav-link group flex flex-col items-center p-2 rounded-lg text-gray-400 hover:text-white" data-section="charts">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h12M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-1.5m-15 0H3.75m0 0h12m0 0h1.5m0 0v-2.25m0 2.25v2.25m0 0h1.5m1.5-1.5H18v-3.75m0 0h1.5m1.5 0V6.75m0 0H18v3.75m0 0h-1.5m0 0h-12m0 0V6.75m0 0H3.75v3.75m0 0h1.5m0 0h-1.5m0 0H3" /></svg>
<span class="text-xs">Charts</span>
</a>
<a href="#strategy" class="nav-link group flex flex-col items-center p-2 rounded-lg text-gray-400 hover:text-white" data-section="strategy">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-6.75c-.621 0-1.125.504-1.125 1.125V18.75m9 0h-9M12 15.75h.008v.008H12v-.008Zm0 0v-3.375m0 0h4.125c.621 0 1.125.504 1.125 1.125V15.75m-5.25 0h-4.125c-.621 0-1.125.504-1.125 1.125V15.75" /></svg>
<span class="text-xs">Habits</span>
</a>
</nav>
<!-- Main Content -->
<main class="flex-1 p-6 md:p-10 pb-20 md:pb-10">
<!-- Section 1: App Basics -->
<section id="basics" class="mb-16">
<h2 class="text-4xl font-bold mb-2 text-white">Understanding the App Basics</h2>
<p class="text-lg text-gray-400 mb-8">Get to know the 5 main tabs at the bottom of your app.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Watchlist Card -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">1. Watchlist (Home)</h3>
<p class="text-gray-300">This is your customized home base. Add any stock (ticker symbol) here to monitor its price at a glance. You can create multiple watchlists (e.g., "Tech Stocks," "Long-Term Holds").</p>
</div>
<!-- Markets Card -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">2. Markets (Discovery)</h3>
<p class="text-gray-300">This is your "discovery" tab. Come here to find new investment ideas. You can see **Top Gainers**, **Top Losers**, **Most Active** stocks, and sector performance.</p>
</div>
<!-- Account Card -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">3. Account (Center Button)</h3>
<p class="text-gray-300">This is your account center. See your **Positions** (stocks you own), **Buying Power** (money available to trade), and your overall **Profit & Loss (P&L)**.</p>
</div>
<!-- Community Card -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">4. Community</h3>
<p class="text-gray-300">A social feed where other Webull users share ideas. **Be careful:** This is a good place to see what's popular, but *never* trade based on a social media post alone. Always do your own research.</p>
</div>
<!-- Menu Card -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">5. Menu</h3>
<p class="text-gray-300">Access to all other tools. The most important ones are the **Stock Screener** (to find stocks) and **Paper Trading** (to practice with fake money).</p>
</div>
</div>
</section>
<!-- Section 2: Placing an Order -->
<section id="orders" class="mb-16">
<h2 class="text-4xl font-bold mb-2 text-white">Mastering the Trade Ticket</h2>
<p class="text-lg text-gray-400 mb-8">These are the most critical settings. Understand them to avoid costly mistakes.</p>
<div class="space-y-6">
<!-- Buy vs Sell -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">Buy (Going Long) vs. Sell (Going Short)</h3>
<p class="text-gray-300 mb-2"><strong class="text-green-400">Buy:</strong> This is what you'll do 99% of the time as a beginner. You buy a stock hoping its price will **go up**.</p>
<p class="text-gray-300"><strong class="text-red-400">Sell (Short):</strong> This is an advanced, high-risk strategy. You are betting the stock's price will **go down**. Avoid this until you are an expert.</p>
</div>
<!-- Order Types -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">Order Types: Market vs. Limit</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-xl font-semibold text-cyan-400 mb-2">Market Order</h4>
<p class="text-gray-300">The "get it now" button. This order buys at the *best available price* instantly. <strong class="text-red-400">Warning:</strong> In a fast-moving market, the price you *get* (the "fill price") can be much worse than the price you *saw*. Use with caution.</p>
</div>
<div>
<h4 class="text-xl font-semibold text-green-400 mb-2">Limit Order (Recommended)</h4>
<p class="text-gray-300">The "price I want" button. You set the *maximum* price you're willing to pay. If the stock is $10.50, you can set a Limit Buy at $10.00. Your order will only execute if the price drops to $10.00 or lower. This gives you full control.</p>
</div>
</div>
</div>
<!-- Risk Management Orders -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">Risk Management: Stop-Loss & Take-Profit</h3>
<p class="text-gray-400 mb-4">These are optional orders you can set up *after* you buy to manage your trade automatically.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-xl font-semibold text-red-400 mb-2">Stop-Loss Order</h4>
<p class="text-gray-300">Protects you from big losses. If you buy a stock at $100, you can set a Stop-Loss at $90. If the price *falls* to $90, this order triggers and automatically sells your stock, limiting your loss to 10%.</p>
</div>
<div>
<h4 class="text-xl font-semibold text-green-400 mb-2">Take-Profit Order</h4>
<p class="text-gray-300">Locks in your gains. If you buy at $100, you can set a Take-Profit at $120. If the price *rises* to $120, this order triggers and automatically sells your stock, securing your 20% profit.</p>
</div>
</div>
</div>
<!-- Time-in-Force -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">Time-in-Force: Day vs. GTC</h3>
<p class="text-gray-300 mb-2"><strong class="text-cyan-400">Day:</strong> Your order (e.g., a Limit Buy) is only active for the current trading day. If it doesn't fill by 4:00 PM ET, it is automatically canceled.</p>
<p class="text-gray-300"><strong class="text-purple-400">GTC (Good 'til Canceled):</strong> Your order stays active every day (usually for 90 days) until it either fills or you manually cancel it. Use this for Limit orders you're willing to wait for.</p>
</div>
</div>
</section>
<!-- Section 3: Finding Stocks -->
<section id="finding" class="mb-16">
<h2 class="text-4xl font-bold mb-2 text-white">Discovering Opportunities</h2>
<p class="text-lg text-gray-400 mb-8">Two key tools for finding what to trade.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Markets Tab -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">Using the "Markets" Tab</h3>
<p class="text-gray-300">This is your daily dashboard for what's hot. It's a great place to get a quick pulse on the market.</p>
<ul class="list-disc list-inside mt-4 text-gray-300 space-y-2">
<li><strong class="text-green-400">Top Gainers:</strong> Stocks with the highest price increase today.</li>
<li><strong class="text-red-400">Top Losers:</strong> Stocks with the biggest price drop today.</li>
<li><strong class="text-cyan-400">Most Active:</strong> Stocks with the highest trading volume.</li>
<li><strong class="text-purple-400">Hot Stocks:</strong> Stocks being discussed most in the Community.</li>
</ul>
</div>
<!-- Stock Screener -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">Using the "Stock Screener"</h3>
<p class="text-gray-300">This is your powerful search engine for stocks. Go to **Menu > Screener** to find stocks that match your specific criteria. Common filters include:</p>
<ul class="list-disc list-inside mt-4 text-gray-300 space-y-2">
<li><strong class="text-gray-100">Market Cap:</strong> The company's size (e.g., "Large-Cap" > $10B).</li>
<li><strong class="text-gray-100">P/E Ratio (Price-to-Earnings):</strong> A valuation metric. Lower can mean "cheaper."</li>
<li><strong class="text-gray-100">Dividend Yield:</strong> Find stocks that pay you (e.g., "Over 2%").</li>
<li><strong class="text-gray-100">Analyst Rating:</strong> See what Wall Street analysts rate the stock.</li>
</ul>
</div>
</div>
</section>
<!-- Section 4: Reading Charts -->
<section id="charts" class="mb-16">
<h2 class="text-4xl font-bold mb-2 text-white">A Beginner's Guide to Charts</h2>
<p class="text-lg text-gray-400 mb-8">You don't need to be an expert, but you should know the basics.</p>
<div class="space-y-6">
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">Candlesticks</h3>
<p class="text-gray-300">Each "candle" represents a time period (e.g., one day). It tells you 4 prices: the open, close, high, and low.</p>
<p class="text-green-400 mt-2"><strong>Green Candle:</strong> The price *closed* higher than it opened (a good day).</p>
<p class="text-red-400 mt-1"><strong>Red Candle:</strong> The price *closed* lower than it opened (a bad day).</p>
<p class="text-gray-300 mt-1"><strong>Wicks (the thin lines):</strong> Show the highest and lowest prices reached during that period.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="card p-6">
<h3 class="text-xl font-semibold mb-3 text-white">Volume (The Bars at Bottom)</h3>
<p class="text-gray-300">Shows how many shares were traded. High volume on a price move (up or down) means the move is "strong" or has high conviction.</p>
</div>
<div class="card p-6">
<h3 class="text-xl font-semibold mb-3 text-white">Moving Averages (MA)</h3>
<p class="text-gray-300">A simple line on your chart that smooths out price data to show the trend. If the price is *above* the MA, the trend is generally up. If it's *below*, the trend is generally down.</p>
</div>
<div class="card p-6">
<h3 class="text-xl font-semibold mb-3 text-white">RSI (Relative Strength Index)</h3>
<p class="text-gray-300">An indicator (usually from 0-100) that shows momentum. A common reading is that >70 means "overbought" (may be due for a pullback) and <30 means "oversold" (may be due for a bounce).</p>
</div>
</div>
</div>
</section>
<!-- Section 5: Success Habits -->
<section id="strategy" class="mb-16">
<h2 class="text-4xl font-bold mb-2 text-white">Habits of a Successful Trader</h2>
<p class="text-lg text-gray-400 mb-8">Success isn't about one magic indicator. It's about discipline and good habits.</p>
<div class="space-y-6">
<!-- Paper Trading -->
<div class="card p-6 border-l-4 border-indigo-500">
<h3 class="text-2xl font-semibold mb-3 text-indigo-400">1. Start with Paper Trading (Most Important!)</h3>
<p class="text-gray-300">Go to **Menu > Paper Trading**. Webull gives you virtual money to practice with. Make your first 10... 20... 50 trades here. Learn the platform, test your strategies, and make your beginner mistakes with *fake* money, not *real* money.</p>
</div>
<!-- DYOR -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">2. Do Your Own Research (DYOR)</h3>
<p class="text-gray-300">Don't blindly follow tips from the Community tab, social media, or "gurus." When you see a stock, tap on it. Read the **News** tab. Look at the **Analysis** tab. Check the **Financials**. Ask yourself *why* you are buying it.</p>
</div>
<!-- Risk Management -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">3. Master Risk Management</h3>
<p class="text-gray-300">This is what separates pros from gamblers. Never invest more than you are willing to lose on a single trade. A common rule for beginners is to risk no more than 1-2% of your *total account* on one idea.</p>
</div>
<!-- Diversification -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">4. Diversify Your Portfolio</h3>
<p class="text-gray-300">Don't put all your money into one stock or one sector (like just tech). If that stock or sector has a bad month, your whole portfolio suffers. Spreading your money across 5-10+ different companies in different industries reduces your risk.</p>
</div>
<!-- Have a Plan -->
<div class="card p-6">
<h3 class="text-2xl font-semibold mb-3 text-white">5. Have a Plan (And Stick to It)</h3>
<p class="text-gray-300">Before you ever click "Buy," you should know three prices:</p>
<ul class="list-decimal list-inside mt-4 text-gray-200 space-y-2">
<li><strong>Your Entry Price:</strong> The price you want to buy at (use a Limit Order).</li>
<li><strong>Your Exit Price (Profit):</strong> The price you will sell at for a gain (use a Take-Profit).</li>
<li><strong>Your Stop-Loss Price:</strong> The price you will sell at for a small loss to protect yourself.</li>
</ul>
<p class="text-gray-300 mt-4">Trading without a plan is just gambling. Trading *with* a plan is a strategy.</p>
</div>
</div>
</section>
</main>
</div>
<script>
// Simple Intersection Observer for active nav link
document.addEventListener('DOMContentLoaded', () => {
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('id');
// Remove active class from all links
navLinks.forEach(link => link.classList.remove('active'));
// Add active class to corresponding links (desktop and mobile)
const activeLinks = document.querySelectorAll(`.nav-link[href="#${id}"], .nav-link[data-section="${id}"]`);
activeLinks.forEach(link => link.classList.add('active'));
}
});
}, { rootMargin: '-30% 0px -70% 0px' }); // Trigger when section is in the middle 30% of the viewport
sections.forEach(section => {
observer.observe(section);
});
});
</script>
</body>
</html>