Upload 9 files

README.md

@@ -1,12 +1,70 @@
----
-title: INTEL ONE-API
-emoji: 🐠
-colorFrom: indigo
-colorTo: pink
-sdk: streamlit
-sdk_version: 1.41.1
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+
+# 🌍 **Empower_AI: Your Comprehensive Investment Companion** 🌱
+
+Empower_AI is designed to break down barriers to stock market investments and promote renewable energy investments in India. With advanced AI analysis, we make complex financial decisions simpler, smarter, and more accessible to all.
+
+## **Empower_AI (Checkout our website)** https://kprit-hackathon-o25h.vercel.app/
+
+## **Empower_AI: powered by intel oneAPI** https://huggingface.co/spaces/muskangoyal06/Investo_AI (Deployed on hugging face)
+
+## **The Problem We're Solving**
+
+India has a low participation rate in stock market investments, with only 3% of the population involved, far behind countries like the USA and China.  
+This is due to:
+
+- Perceived complexity of stock markets.
+- Limited awareness of investment options.
+- Apprehension towards market volatility.
+
+At the same time, India's renewable energy sector is in dire need of more investment to meet environmental and energy demands, but faces challenges such as:
+
+- Regulatory uncertainties.
+- Financial constraints.
+
+## **Our Solution & Key Features**
+
+### 🌡 **Sentiment Analysis**
+Empower_AI uses public sentiment to guide investors through market mood shifts that can impact stock prices.
+
+### 📈 **Technical & Fundamental Analysis**
+- **Technical Analysis**: Uses historical data to predict stock price movements.
+- **Fundamental Analysis**: Evaluates revenue, profit, and market capitalization for an informed approach.
+
+### 📊 **Recommendation & Data Visualization**
+Provides clear buy, sell, or hold recommendations, visualized for easy decision-making.
+
+
+## **Why Choose Empower_AI?**
+
+### 🔍 **Simplified Data Analysis**
+We turn complex data into actionable insights. Empower yourself to make informed choices without being bogged down by complicated metrics.
+
+### 🎯 **Accuracy**
+Unlike traditional platforms that rely on a few expert opinions, Empower_AI leverages thousands of datasets to deliver more precise recommendations.
+
+### 🌱 **Recognizing the Unrecognized**
+We specialize in uncovering hidden opportunities in renewable energy stocks, identifying promising investments that others might overlook.
+
+## **Tech Stack**
+- **Intel OneAPI AI Analytics Toolkit**: Optimizes machine learning and numerical computations, especially for large datasets and performance-intensive tasks like technical analysis.
+- **One DAAL**: intel data analytics library for analysis of stocks
+
+- **Python**: Core programming language used to build the entire backend logic and data handling of the web app.
+  
+- **Streamlit**: Provides the interactive and user-friendly interface, enabling the creation of a web app dashboard for stock analysis.
+
+- **Yahoo Finance API**: Fetches real-time stock market data, such as price history, fundamental data (like P/E ratio, earnings), and other key metrics for analysis.
+
+- **Transformers (Hugging Face)**: Powers the app's natural language processing tasks, enabling advanced models to assist with sentiment analysis if needed.
+
+- **Pandas**: Used for handling and manipulating stock data, providing efficient ways to clean, analyze, and visualize data.
+
+- **NumPy**: Supports mathematical operations, including array manipulation and numerical analysis for technical stock metrics.
+
+- **Torch (PyTorch)**: Deep learning framework used for complex machine learning models, allowing for predictions and more advanced computations.
+
+- **virtualenv**: Isolates the Python environment, ensuring that all dependencies and packages are managed cleanly, avoiding conflicts.
+
+
+

app.py

@@ -0,0 +1,94 @@
+import streamlit as st
+import yfinance as yf
+import requests
+from googleapiclient.discovery import build
+from transformers import pipeline
+import numpy as np
+
+# YouTube API setup
+def youtube_api_setup():
+    api_key = 'AIzaSyB-pW8FME-a7KMRqwEeQJStTxDPqvQNMm0'  # Replace with your YouTube API key
+    youtube = build('youtube', 'v3', developerKey=api_key)
+    return youtube
+
+# Fetch YouTube sentiment
+def fetch_youtube_sentiment(symbol, youtube, sentiment_model):
+    search_response = youtube.search().list(q=symbol, part='snippet', maxResults=10).execute()
+    video_ids = [item['id']['videoId'] for item in search_response['items'] if 'videoId' in item['id']]
+    
+    comments = []
+    for video_id in video_ids:
+        comment_response = youtube.commentThreads().list(part='snippet', videoId=video_id, maxResults=50).execute()
+        for comment in comment_response['items']:
+            comment_text = comment['snippet']['topLevelComment']['snippet']['textOriginal']
+            comments.append(comment_text)
+    
+    sentiments = sentiment_model(comments)
+    sentiment_scores = [s['label'] for s in sentiments]
+    positive = sentiment_scores.count('POSITIVE')
+    negative = sentiment_scores.count('NEGATIVE')
+    return positive, negative
+
+# Moving Average (technical analysis)
+def calculate_moving_average(stock_data, window_size):
+    prices = stock_data['Close'].to_numpy()
+    moving_avg = np.convolve(prices, np.ones(window_size)/window_size, mode='valid')
+    return moving_avg
+
+# Fetch stock data using Yahoo Finance
+def fetch_stock_data(symbol):
+    stock = yf.Ticker(symbol)
+    stock_data = stock.history(period="1y")
+    return stock_data
+
+# Main app
+def main():
+    st.title("Empower_AI: powered by intel ONEapi")
+    
+    # Input for stock symbol
+    stock_symbol = st.text_input("Enter Stock Symbol (e.g., AAPL, TSLA):", "AAPL")
+    
+    if st.button("Analyze"):
+        # Fetch stock data
+        stock_data = fetch_stock_data(stock_symbol)
+        
+        # Display stock data overview
+        st.subheader(f"Stock Overview - {stock_symbol}")
+        st.write(stock_data.tail())
+
+        # Sentiment analysis
+        sentiment_model = pipeline("sentiment-analysis")
+
+        # YouTube Sentiment
+        st.subheader("YouTube Sentiment Analysis")
+        youtube = youtube_api_setup()
+        positive_youtube, negative_youtube = fetch_youtube_sentiment(stock_symbol, youtube, sentiment_model)
+        st.write(f"Positive Comments: {positive_youtube}, Negative Comments: {negative_youtube}")
+        
+        # Technical analysis (Moving Average)
+        st.subheader("Technical Analysis (Moving Average)")
+        window_size = st.slider("Select Moving Average Window Size:", 5, 100, 20)
+        moving_avg = calculate_moving_average(stock_data, window_size)
+        st.line_chart(moving_avg)
+
+        # Fundamental analysis
+        st.subheader("Fundamental Analysis")
+        st.write("Market Cap:", stock_data['Close'].iloc[-1] * stock_data['Volume'].mean())
+        st.write("Price-to-Earnings Ratio (P/E):", stock_data['Close'].iloc[-1] / (stock_data['Close'].mean()))
+        
+        # Recommendation based on sentiment analysis
+        st.subheader("Stock Recommendation")
+        total_positive = positive_youtube
+        total_negative = negative_youtube
+        if total_positive > total_negative:
+            st.write(f"Recommendation: **BUY** {stock_symbol}")
+        elif total_negative > total_positive:
+            st.write(f"Recommendation: **SELL** {stock_symbol}")
+        else:
+            st.write(f"Recommendation: **HOLD** {stock_symbol}")
+
+if __name__ == "__main__":
+    main()
+
+
+

environment.txt

@@ -0,0 +1,7 @@
+python --version
+pip install virtualenv
+cd path/to/your/project
+virtualenv venv
+venv\Scripts\activate
+pip install -r requirements.txt
+

gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

index.html

@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EmpowerAI</title>
+    <link rel="stylesheet" href="styles.css">
+    <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=DM+Mono:ital,wght@0,300;0,400;0,500&display=swap"
+        rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet" />
+</head>
+
+<body>
+    <div class="main">
+        <div class="header">
+            <nav>
+                <a href="#" class="logo">EmpowerAI.</a>
+                <ul>
+                    <li>Home</li>
+                    <li>Services</li>
+                    <li>About</li>
+                    <li>What's new?</li>
+                </ul>
+                <div class="btns">
+                    <button class="navBtn" id="exploreBtn">Login</button>
+                    <button class="navBtn" id="exploreBtn">Sign up</button>
+                </div>
+
+
+            </nav>
+        </div>
+        <div class="page1">
+            <div class="content1">
+                <div class="left1">
+                    <div>
+                        <h1><span class="secondSpan">Unlocking investments</span><br><span class="firstSpan">to the
+                                people</span><br><span class="firstSpan">for the people</span><br><span
+                                class="firstSpan">by the people</span><br></h1>
+                    </div>
+
+                    <div class="line"></div>
+
+                    <div class="imgCircles">
+                        <div class="img">
+                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                                alt="">
+                        </div>
+                        <div class="img over-first">
+                            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cG9ydHJhaXR8ZW58MHx8MHx8fDA%3D"
+                                alt="">
+                        </div>
+                        <div class="img over-second">
+                            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXR8ZW58MHx8MHx8fDA%3D"
+                                alt="">
+                        </div>
+                        <div class="img over-third">
+                            <img src="https://plus.unsplash.com/premium_photo-1664298528358-790433ba0815?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cG9ydHJhaXR8ZW58MHx8MHx8fDA%3D"
+                                alt="">
+                        </div>
+                        <div class="img over-fourth">
+                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHBvcnRyYWl0fGVufDB8fDB8fHww"
+                                alt="">
+                        </div>
+                    </div>
+
+                    <div class="line-btm"></div>
+
+                    <div class="link">
+                        <div class="circle"></div>
+                        <div class="link-icon">
+                            <i class="ri-arrow-right-up-line"></i>
+                        </div>
+                        <div class="text1">
+                            <p>Enhance financial literacy and economic growth through greater stock market
+                                participation, and accelerate India's transition to sustainable energy, ensuring
+                                long-term environmental and economic stability.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="right1">
+                    <img src="images/demo.png" alt="">
+                </div>
+            </div>
+        </div>
+        <div class="page2">
+            <div class="content2">
+                <div class="left2">
+                    <img src="images/graph_colors.jpg" alt="">
+                </div>
+                <div class="right2">
+                    <div class="text2">
+                        <h1><span class="secondSpan">Why</span> <span class="firstSpan">choose</span> <span
+                                class="thirdSpan">us?</span></h1>
+                        <p>Enhance financial literacy and economic growth through greater stock market participation,
+                            and accelerate India's transition.</p>
+                        <div class="first-row2">
+                            <div class="choose-card">
+                                <div class="link-icon">
+                                    <i class="ri-arrow-right-up-line"></i>
+                                    <h4>Simplified analysis of data</h4>
+                                </div>
+                            </div>
+                            <div class="choose-card">
+                                <div class="link-icon">
+                                    <i class="ri-arrow-right-up-line"></i>
+                                    <h4>Accuracy</h4>
+
+                                </div>
+                            </div>
+
+                            <div class="choose-card">
+                                <div class="link-icon">
+                                    <i class="ri-arrow-right-up-line"></i>
+                                    <h4>Recognizing the unrecognized</h4>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="page3">
+            <div class="content3">
+                <div class="text3">
+                    <h1><span class="secondSpan">Explore</span> <span class="firstSpan">the</span> <span
+                            class="thirdSpan">future</span> <span class="secondSpan">of</span> <span
+                            class="firstSpan">stocks</span> </h1>
+                    <p>Enhance financial literacy and economic growth through greater stock market participation, and
+                        accelerate India's transition to sustainable energy, ensuring long-term environmental and
+                        economic stability.</p>
+                </div>
+                <div class="slide-cards">
+                    <div class="first-row">
+                        <div class="card">
+                            <img src="images/healthcare.jpg" alt="">
+                            <div class="card-hover">
+                                <h2>Healthcare</h2>
+                                <a href="healthcare/healthcare.html" target="_blank" class="knowMoreBtn">Know More</a>
+                            </div>
+                        </div>
+                        <div class="card">
+                            <img src="images/pollutionControl.jpg" alt="">
+                            <div class="card-hover">
+                                <h2>Pollution Control</h2>
+                                <a href="pollutionControl/pollutionControl.html" target="_blank"
+                                    class="knowMoreBtn">Know More</a>
+                            </div>
+                        </div>
+                        <div class="card">
+                            <img src="images/privateSector.jpg" alt="">
+                            <div class="card-hover">
+                                <h2>Private Sector</h2>
+                                <a href="privateSector/privateSector.html" target="_blank" class="knowMoreBtn">Knows
+                                    More</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="second-row">
+                        <div class="card">
+                            <img src="images/recycle.jpg" alt="">
+                            <div class="card-hover">
+                                <h2>Recycling</h2>
+                                <a href="recycling/recycling.html" target="_blank" class="knowMoreBtn">Know More</a>
+                            </div>
+                        </div>
+                        <div class="card">
+                            <img src="images/renewable-energy.jpg" alt="">
+                            <div class="card-hover">
+                                <h2>Renewable Energy</h2>
+                                <a href="renewableEnergy/renewableEnergy.html" target="_blank" class="knowMoreBtn">Know
+                                    More</a>
+                            </div>
+                        </div>
+                        <div class="card">
+                            <img src="images/farming.jpg" alt="">
+                            <div class="card-hover">
+                                <h2>Farming</h2>
+                                <a href="farmer/farming.html" target="_blank" class="knowMoreBtn">Know More</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="page4">
+            <div class="btnContainer1">
+                <p>Lorem ipsum dolor sit amet.</p>
+                <div class="tryBtn">
+                    <a href="https://partyrock.aws/u/muskangoyal/cp2TNnD6I/Empower-AI%3A-Your-Comprehensive-Investment-Companion"
+                        target="_blank" class="tryItNow">Try it Now</a>
+                </div>
+            </div>
+            <div class="btnContainer2">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, praesentium.</p>
+                <div class="tryBtn">
+                    <a href="https://huggingface.co/spaces/muskangoyal06/Investo_AI" target="_blank"
+                        class="tryItNow">Try it Now</a>
+                </div>
+            </div>
+
+        </div>
+
+        <footer>
+            <div class="footContent">
+                <div class="logo_info">
+                    <a href="#" class="logo">EmpowerAI.</a>
+                    <p>Transforming the investment <br>landscape to the people</p>
+                    <div class="socialLinks">
+                        <div class="outerCircle">
+                            <div class="link-icon">
+                                <i class="ri-facebook-circle-line"></i>
+                            </div>
+                        </div>
+                        <div class="outerCircle">
+                            <div class="link-icon">
+                                <i class="ri-twitter-x-line"></i>
+                            </div>
+                        </div>
+                        <div class="outerCircle">
+                            <div class="link-icon">
+                                <i class="ri-instagram-line"></i>
+                            </div>
+                        </div>
+                        <div class="outerCircle">
+                            <div class="link-icon">
+                                <i class="ri-linkedin-fill"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p>© 2024 EmpowerAI.</p>
+                </div>
+                <div class="info">
+                    <div class="col1">
+                        <h2>Products</h2>
+                        <ul>
+                            <li>Rainbow Wallet</li>
+                            <li>IRISplorer</li>
+                            <li>Endpoints & SDKs</li>
+                            <li>CLI Client</li>
+                        </ul>
+                    </div>
+                    <div class="col2">
+                        <h2>Information</h2>
+                        <ul>
+                            <li>Market Explore</li>
+                            <li>Ready Token</li>
+                            <li>Main Option</li>
+                            <li>File Checking</li>
+                        </ul>
+                    </div>
+                    <div class="col3">
+                        <h2>Resources</h2>
+                        <ul>
+                            <li>FAQ</li>
+                            <li>Blog</li>
+                            <li>Docs</li>
+                            <li>Press Kit</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="news-info">
+                    <h2>Newsletter</h2>
+                    <div class="inputSearch">
+                        <input type="email" placeholder="Enter your email">
+                        <button>Subscribe</button>
+                    </div>
+                    <p>Transforming the investment<br>landscape to the people</p>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+
+    <script src="script.js"></script>
+    </div>
+
+</body>
+
+</html>

models.py

@@ -0,0 +1,19 @@
+import torch
+from transformers import pipeline
+
+model_id = "meta-llama/Llama-3.2-3B-Instruct"
+pipe = pipeline(
+    "text-generation",
+    model=model_id,
+    torch_dtype=torch.bfloat16,
+    device_map="auto",
+)
+messages = [
+    {"role": "system", "content": "You are a pirate chatbot who always responds in pirate speak!"},
+    {"role": "user", "content": "Who are you?"},
+]
+outputs = pipe(
+    messages,
+    max_new_tokens=256,
+)
+print(outputs[0]["generated_text"][-1])

requirements.txt

@@ -0,0 +1,9 @@
+streamlit==1.26.0
+transformers==4.33.2
+torch==2.0.1
+google-api-python-client==2.93.0
+yfinance==0.2.30
+requests==2.31.0
+numpy==1.24.4
+
+

script.js

@@ -0,0 +1,4 @@
+var tryItNow = document.getElementById("tryItNow");
+tryItNow.onclick(() => {
+    windows.open("https://partyrock.aws/u/muskangoyal/cp2TNnD6I/Empower-AI%3A-Your-Comprehensive-Investment-Companion", "_blank");
+})

styles.css

@@ -0,0 +1,655 @@
+:root {
+    --greenyellow: #d3ff5c;
+    --black: rgb(32, 36, 37);
+    --whitesmoke: rgb(241, 242, 243);
+    --buttonclr: rgb(21, 26, 34);
+    --textfade: rgb(201, 203, 205);
+    --body: rgb(9, 11, 15);
+    --navfont: rgb(177, 181, 185);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body,
+.main {
+    height: 100%;
+    width: 100%;
+    background-color: var(--body);
+    font-family: "DM Mono", monospace;
+    font-weight: 300;
+    font-style: normal;
+}
+
+nav {
+    padding: 0px 120px 0px 120px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 90px;
+    width: 100%;
+}
+
+.logo {
+    color: var(--greenyellow);
+    text-decoration: none;
+    font-size: 1.6em;
+    font-weight: 450;
+    letter-spacing: 0.1px;
+}
+
+.header nav ul {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 140px;
+}
+
+nav ul li {
+    margin-right: 40px;
+    color: var(--navfont);
+    font-size: 16px;
+}
+
+.btns {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.navBtn {
+    background-color: var(--greenyellow);
+    color: var(--navBtn);
+    width: 90px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    letter-spacing: -1px;
+    font-weight: 500;
+    border-radius: 10px;
+    border: none;
+    cursor: pointer;
+}
+
+.navBtn:hover {
+    background-color: var(--black);
+    color: var(--greenyellow);
+}
+
+.page1 {
+    width: 100%;
+    height: calc(100% - 90px);
+}
+
+.content1 {
+    padding: 60px 50px 20px 90px;
+    display: flex;
+    align-items: center;
+}
+
+.left1 h3 {
+    font-size: 1.3rem;
+    color: rgb(200, 202, 204);
+    margin-bottom: 30px;
+    width: 70%;
+}
+
+.left1 h1 {
+    font-size: 3rem;
+    line-height: 55px;
+}
+
+.left1 h1 .secondSpan {
+    background: linear-gradient(to right, rgb(229, 231, 232), rgb(80, 82, 86));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    width: fit-content;
+}
+
+.left1 h1 .firstSpan {
+    color: var(--greenyellow);
+}
+
+div.line {
+    height: 1px;
+    width: 600px;
+    background-color: var(--navfont);
+    margin-top: 20px;
+}
+
+.imgCircles {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 70px;
+    margin-top: 8px;
+}
+
+.img {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-radius: 50%;
+    height: 70px;
+    width: 70px;
+    position: relative;
+}
+
+.over-first {
+    z-index: 1;
+    position: absolute;
+    left: 10%;
+}
+
+.over-second {
+    z-index: 1;
+    position: absolute;
+    left: 13.2%;
+}
+
+.over-third {
+    z-index: 1;
+    position: absolute;
+    left: 16.5%;
+}
+
+.over-fourth {
+    z-index: 1;
+    position: absolute;
+    left: 19.7%;
+}
+
+.img img {
+    width: 65px;
+    height: 65px;
+    object-fit: cover;
+    border-radius: 50%;
+    padding: 2px;
+}
+
+div.line-btm {
+    height: 1px;
+    width: 600px;
+    background-color: var(--navfont);
+    margin-top: 11px;
+}
+
+.link {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 70px;
+    margin-top: 8px;
+    position: relative;
+}
+
+.link .circle {
+    border-radius: 50%;
+    height: 60px;
+    width: 60px;
+    border: 2px solid var(--greenyellow);
+}
+
+.link .link-icon {
+    border-radius: 50%;
+    height: 60px;
+    width: 60px;
+    background-color: var(--greenyellow);
+    position: absolute;
+    left: 5%;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.link-icon i {
+    font-size: 2rem;
+    font-weight: 200;
+    cursor: pointer;
+}
+
+.link-icon h4 {
+    color: var(--navfont);
+    font-size: 1.4rem;
+    margin-left: 240px;
+    margin-top: 50px;
+    width: fit-content;
+}
+
+.link .text1 {
+    margin-left: 80px;
+    font-size: 0.8rem;
+    color: var(--navfont);
+    width: 500px;
+}
+
+.right1 {
+    width: 40%;
+    height: calc(100% - 90px);
+    margin-left: 90px;
+}
+
+.right1 img {
+    width: 100%;
+    height: fit-content;
+}
+
+.page2 {
+    width: 100%;
+    height: 100%;
+}
+
+.content2 {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.left2 {
+    width: 50%;
+    margin-left: 50px;
+    margin-right: 30px;
+}
+
+.left2 img {
+    width: 100%;
+    height: fit-content;
+    border-radius: 20px;
+}
+
+.right2{
+    width: 50%;
+}
+
+.text2 h1 {
+    font-size: 3rem;
+}
+
+.text2 p {
+    color: var(--navfont);
+    padding-left: 20px;
+    border-left: 4px solid #d3ff5c;
+}
+
+.first-row2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-top: 15px;
+    margin-left: -20px;
+}
+
+.choose-card {
+    width: 50%;
+    height: 120px;
+    /* background-color: #fff; */
+    margin-right: 10px;
+    margin-bottom: 10px;
+    position: relative;
+    border-radius: 10px;
+    border: 1px solid var(--greenyellow);
+    padding: 20px;
+}
+
+.choose-card .link-icon {
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+    background-color: var(--greenyellow);
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 10px;
+    margin-left: 10px;
+}
+
+.choose-card .link-icon i {
+    position: absolute;
+    left: 12%;
+    top: 10%;
+}
+
+
+
+.page3 {
+    width: 100%;
+    height: 100%;
+}
+
+.content3 {
+    padding: 40px 50px 20px 90px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.text3 {
+    text-align: center;
+}
+
+.firstSpan {
+    color: var(--greenyellow);
+}
+
+.secondSpan {
+    background: linear-gradient(to right, rgb(229, 231, 232), rgb(80, 82, 86));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    width: fit-content;
+}
+.thirdSpan {
+    background: linear-gradient(to right, rgb(80, 82, 86), rgb(229, 231, 232));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    width: fit-content;
+}
+
+.text3 p {
+    color: var(--navfont);
+    width: 550px;
+    margin-top: 15px;
+}
+
+.first-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 15px;
+}
+
+.second-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.card {
+    width: 280px;
+    /* Width of the card */
+    height: 180px;
+    /* Height of the card */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10px;
+    /* Margin around each card */
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(45 deg, rgb(34,38,39), rgb(14,15,19));
+    margin-right: 30px;
+    margin-bottom: 30px;
+    overflow: hidden;
+    position: relative;
+}
+
+.card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+}
+
+.card-hover {
+    position: absolute;
+    top: 0;
+    right: -100%;
+    width: 100%;
+    height: 100%;
+    background-color: #d4ff5c4f;
+    border-radius: 10px;
+    backdrop-filter: blur(2px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: rgb(0, 0, 0);
+    transition: 1s;
+}
+
+.knowMoreBtn {
+    color: var(--greenyellow);
+    background-color: black;
+    width: 110px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    letter-spacing: -1px;
+    font-weight: 600;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-top: 12px;
+    text-decoration: none;
+}
+
+.card:hover .card-hover {
+    right: 0;
+}
+
+.page4 {
+    width: 100%;
+    height: 70%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.btnContainer1 {
+    margin: 0px 70px 0px 70px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 600px;
+    height: 150px;
+    background-color: cornsilk;
+    border-radius: 20px;
+}
+
+.page4 p {
+    margin: 20px 30px 0px 30px;
+}
+
+.btnContainer2 {
+    margin: 0px 70px 0px 0px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 600px;
+    height: 150px;
+    border-radius: 20px;
+    background-color: #fff;
+}
+
+
+.tryBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 90px;
+    width: 100%;
+}
+
+.tryItNow {
+    background-color: var(--greenyellow);
+    color: var(--black);
+    width: 140px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    letter-spacing: 0px;
+    font-weight: 500;
+    border-radius: 10px;
+    border: none;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+footer {
+    width: 100%;
+    height: calc(70% - 90px);
+    border-top: 2px solid var(--greenyellow);
+}
+
+.footContent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 50px;
+}
+
+.logo_info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.logo_info .logo {
+    font-size: 1.6rem;
+    
+}
+
+.logo_info p {
+    color: var(--navfont);
+    font-size: 0.7rem;
+    margin-left: 23px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}
+
+.socialLinks {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.socialLinks .outerCircle {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: var(--greenyellow);
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tryIt {
+    text-decoration: none;
+    font-size: 1.5rem;
+    color: var(--greenyellow)
+}
+
+.outerCircle .link-icon i {
+    font-size: 18px;
+}
+
+.info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.info h2 {
+    color: white;
+    font-size: 1.3rem;
+    letter-spacing: 1px;
+}
+
+.info li {
+    color: var(--navfont);
+    font-size: 0.8rem;
+    margin-bottom: 17px;
+    width: fit-content;
+}
+
+.col1 ul, .col2 ul, .col3 ul {
+    list-style-type: none;
+}
+
+.col1, .col2, .col3 {
+    margin: 50px;
+}
+
+.col1 h2, .col2 h2, .col3 h2 {
+    margin-bottom: 18px;
+}
+
+.news-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-bottom: 70px;
+}
+
+.news-info h2 {
+    color: white;
+    font-size: 1.3rem;
+    letter-spacing: 1px;
+    margin-bottom: 18px;
+}
+
+.inputSearch {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: column;
+    display: inline-block;
+    position: relative; 
+}
+
+.inputSearch input {
+    width: 250px;
+    height: 30px;
+    border: none;
+    background-color: rgb(21, 26, 34);
+    padding: 3px;
+}
+
+.inputSearch button {
+    position: absolute; 
+    top: 0; 
+    right: 0; 
+    border: none; 
+    background-color: var(--greenyellow); 
+    cursor: pointer; 
+    height: 100%;
+    width: 30%;
+}
+
+.news-info p {
+    color: var(--navfont);
+    font-size: 0.7rem;
+    margin-left: -60px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}