diff --git a/index.html b/index.html
index 2e165de..ac34f79 100644
--- a/index.html
+++ b/index.html
@@ -1,211 +1,211 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Personal Portfolio Website - Ilsa</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-    <div id="header">
-        <div class="container">
-            <nav>
-                <img src="images/ILSA.png" class="logo">
-                <ul>
-                    <li><a href="#header">Home</a></li>
-                    <li><a href="#About">About me</a></li>
-                    <li><a href="#projects">Projects</a></li>
-                    <li><a href="#contact">Contact</a></li>
-                </ul>
-            </nav>
-            <div class="header-text">
-                <h1>ILSA TARIQ WANT</h1>
-                <p>Software Engineer</p>
-                <a href="#projects">
-                    <button class="btn">Projects</button>
-                </a>
-                <a href="#contact">
-                    <button class="btn">Contact</button>
-                </a>
-
-            </div>
-        </div>
-        <!-- ------------about------------- -->
-        <div id="About">
-            <div class="container1">
-                <div class="row">
-                    <div class="about-col-1">
-                        <img src="images/ilsaimage.jpg">
-                        <a href="images/Ilsa_CV[1].pdf" download>
-                            <button class="btn">Download CV</button>
-                        </a>
-                    </div>
-                    <div class="about-col-2">
-                        <h1 class="sub-title">About Me</h1>
-                        <p>Motivated and detail-oriented final-year Software Engineering student at the University of
-                            Malaya, with a strong foundation in programming, software design, and teamwork. Eager
-                            to contribute to real-world projects and continuously improve through hands-on
-                            experience.</p>
-
-                        <div class="tab-titles">
-                            <p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
-                            <p class="tab-links" onclick="opentab('relevant-courses')">Relevant Courses</p>
-                            <p class="tab-links" onclick="opentab('education')">Education</p>
-                        </div>
-                        <div class="tab-contents active-tab" id="skills">
-                            <div class="tab-content-col-1">
-                                <h3>Languages</h3>
-                                <ul>
-                                    <li>Java<br></li>
-                                    <li>Python<br></li>
-                                    <li>HTML, CSS, JavaScript<br></li>
-                                    <li>SQL<br></li>
-                                </ul>
-                            </div>
-                            <div class="tab-content-col-2">
-                                <h3>Technologies & Tools</h3>
-                                <ul>
-                                    <li>Git & Github<br></li>
-                                    <li>Firebase<br></li>
-                                    <li>Streamlit<br></li>
-                                    <li>VS Code<br></li>
-                                    <li>Android Studio<br></li>
-                                    <li>Google Colab<br></li>
-                                    <li>Figma<br></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="tab-contents" id="relevant-courses">
-                            <div class="tab-content-col">
-                                <ul>
-                                    <li>Object-Oriented Programming<br></li>
-                                    <li>Mobile Application Development<br></li>
-                                    <li>Data Structures and Algorithms<br></li>
-                                    <li>Machine Learning<br></li>
-                                    <li>Python for Scientific Computing<br></li>
-                                    <li>Network Technology Foundation<br></li>
-                                    <li>Database<br></li>
-                                    <li>Software Modeling<br></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="tab-contents" id="education">
-                            <div class="tab-content-col">
-                                <h3>Unversiti Malaya</h3>
-                                <h4>Bachelor in Computer Science (Software Engineering)</h4>
-                                <ul>
-                                    <li>Sep 2023 - Present<br></li>
-                                    <li>CGPA 3.63 / 4.00<br></li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- ---------projects---------- -->
-        <div id="projects">
-            <div class="container1">
-                <h1 class="sub-title">My Projects</h1>
-                <div class="project-1">
-                    <div class="project-description">
-                        <h2>Mobile Application - Farmer Pal</h2>
-                        <h4>Java, Android Studio</h4>
-                        <p>
-                            I developed a smart farming mobile application aimed at addressing
-                            <b>SDG 2: Zero Hunger</b>, designed to support farmers in improving
-                            agricultural productivity and sustainability.
-                            The app integrates key modules such as
-                            <b>weather updates, soil health analysis, pest detection,
-                                an AI-powered chatbot, and community interaction</b>.
-                            Notably, I implemented the chatbot using <b>JAM AI and Retrofit</b>,
-                            enabling it to provide <b>personalized planting advice</b> tailored
-                            to specific environmental conditions.
-                        </p>
-                    </div>
-                    <div class="project-image">
-                        <img src="images/farmerPal.png">
-                    </div>
-                </div>
-
-                <div class="project-2">
-                    <div class="project-image">
-                        <img src="images/farmerPal.png">
-                    </div>
-                    <div class="project-description">
-                        <h2>Pokémon-Inspired Battle Game</h2>
-                        <h4>Java</h4>
-                        <p>
-                            I designed and developed a turn-based Pokémon-style game in Java that features battle
-                            mechanics, character stats, and evolution logic. The game applies object-oriented
-                            programming principles such as inheritance, encapsulation, and polymorphism to effectively
-                            model creatures, moves, and battle systems.
-                        </p>
-                    </div>
-                </div>
-
-                <div class="project-3">
-                    <div class="project-description">
-                        <h2>MemeCoin Dashboard</h2>
-                        <h4>Python, Streamlit, Pandas, Plotly</h4>
-                        <p>
-                            I built an interactive MemeCoin Dashboard using Python and Streamlit that features real-time
-                            memecoin data, sentiment analysis, and dynamic visualizations. Leveraging Plotly and
-                            Streamlit, the dashboard presents price trends, trading volume, and market depth through
-                            interactive charts for an engaging user experience.
-
-                        </p>
-                    </div>
-                    <div class="project-image">
-                        <img src="images/farmerPal.png">
-                    </div>
-                </div>
-
-            </div>
-        </div>
-        <!-- ---------Contact---------- -->
-         <div id="contact">
-            <div class="container1">
-                <h1 class="sub-title">Contact</h1>
-                <div class="row2">
-                    <div class="col-1">
-                        <h3>You can reach me through:</h3>
-                        <p>
-                            📧 <a href="mailto:ilsatariq@example.com">ilsatariq@example.com</a><br>
-                            📞 <a href="tel:+60123456789">+60 12-345 6789</a><br>
-                            🌐 <a href="https://www.linkedin.com/in/ilsa-want" target="_blank">LinkedIn</a> | 
-                            <a href="https://github.com/ilsatariqwant" target="_blank">GitHub</a>
-                        </p>
-                    </div>
-                    <div class="col-2">
-                        <h3>Address</h3>
-                        <p>Pantai Panorama Condominium <br>Bangsar South, 59200 Kuala Lumpur</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <script>
-
-            var tablinks = document.getElementsByClassName("tab-links");
-            var tabcontents = document.getElementsByClassName("tab-contents");
-
-            function opentab(tabname) {
-                // hides content when tablink is clicked
-                for (tablink of tablinks) {
-                    tablink.classList.remove("active-link")
-                }
-                for (tabcontent of tabcontents) {
-                    tabcontent.classList.remove("active-tab")
-                }
-                // diaplays content and underline
-                event.currentTarget.classList.add("active-link");
-                document.getElementById(tabname).classList.add("active-tab");
-            }
-
-        </script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Personal Portfolio Website - Ilsa</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div id="header">
+        <div class="container">
+            <nav>
+                <img src="images/ILSA.png" class="logo">
+                <ul>
+                    <li><a href="#header">Home</a></li>
+                    <li><a href="#About">About me</a></li>
+                    <li><a href="#projects">Projects</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="header-text">
+                <h1>ILSA TARIQ WANT</h1>
+                <p>Software Engineer</p>
+                <a href="#projects">
+                    <button class="btn">Projects</button>
+                </a>
+                <a href="#contact">
+                    <button class="btn">Contact</button>
+                </a>
+
+            </div>
+        </div>
+        <!-- ------------about------------- -->
+        <div id="About">
+            <div class="container1">
+                <div class="row">
+                    <div class="about-col-1">
+                        <img src="images/ilsaimage.jpg">
+                        <a href="images/Ilsa_CV[1].pdf" download>
+                            <button class="btn">Download CV</button>
+                        </a>
+                    </div>
+                    <div class="about-col-2">
+                        <h1 class="sub-title">About Me</h1>
+                        <p>Motivated and detail-oriented final-year Software Engineering student at the University of
+                            Malaya, with a strong foundation in programming, software design, and teamwork. Eager
+                            to contribute to real-world projects and continuously improve through hands-on
+                            experience.</p>
+
+                        <div class="tab-titles">
+                            <p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
+                            <p class="tab-links" onclick="opentab('relevant-courses')">Relevant Courses</p>
+                            <p class="tab-links" onclick="opentab('education')">Education</p>
+                        </div>
+                        <div class="tab-contents active-tab" id="skills">
+                            <div class="tab-content-col-1">
+                                <h3>Languages</h3>
+                                <ul>
+                                    <li>Java<br></li>
+                                    <li>Python<br></li>
+                                    <li>HTML, CSS, JavaScript<br></li>
+                                    <li>SQL<br></li>
+                                </ul>
+                            </div>
+                            <div class="tab-content-col-2">
+                                <h3>Technologies & Tools</h3>
+                                <ul>
+                                    <li>Git & Github<br></li>
+                                    <li>Firebase<br></li>
+                                    <li>Streamlit<br></li>
+                                    <li>VS Code<br></li>
+                                    <li>Android Studio<br></li>
+                                    <li>Google Colab<br></li>
+                                    <li>Figma<br></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="tab-contents" id="relevant-courses">
+                            <div class="tab-content-col">
+                                <ul>
+                                    <li>Object-Oriented Programming<br></li>
+                                    <li>Mobile Application Development<br></li>
+                                    <li>Data Structures and Algorithms<br></li>
+                                    <li>Machine Learning<br></li>
+                                    <li>Python for Scientific Computing<br></li>
+                                    <li>Network Technology Foundation<br></li>
+                                    <li>Database<br></li>
+                                    <li>Software Modeling<br></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="tab-contents" id="education">
+                            <div class="tab-content-col">
+                                <h3>Unversiti Malaya</h3>
+                                <h4>Bachelor in Computer Science (Software Engineering)</h4>
+                                <ul>
+                                    <li>Sep 2023 - Present<br></li>
+                                    <li>CGPA 3.63 / 4.00<br></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- ---------projects---------- -->
+        <div id="projects">
+            <div class="container1">
+                <h1 class="sub-title">My Projects</h1>
+                <div class="project-1">
+                    <div class="project-description">
+                        <h2>Mobile Application - Farmer Pal</h2>
+                        <h4>Java, Android Studio</h4>
+                        <p class="glass">
+                            I developed a smart farming mobile application aimed at addressing
+                            <b>SDG 2: Zero Hunger</b>, designed to support farmers in improving
+                            agricultural productivity and sustainability.
+                            The app integrates key modules such as
+                            <b>weather updates, soil health analysis, pest detection,
+                                an AI-powered chatbot, and community interaction</b>.
+                            Notably, I implemented the chatbot using <b>JAM AI and Retrofit</b>,
+                            enabling it to provide <b>personalized planting advice</b> tailored
+                            to specific environmental conditions.
+                        </p>
+                    </div>
+                    <div class="project-image">
+                        <img src="images/farmerPal.png">
+                    </div>
+                </div>
+
+                <div class="project-2">
+                    <div class="project-image">
+                        <img src="images/farmerPal.png">
+                    </div>
+                    <div class="project-description">
+                        <h2>Pokémon-Inspired Battle Game</h2>
+                        <h4>Java</h4>
+                        <p class="glass">
+                            I designed and developed a turn-based Pokémon-style game in Java that features battle
+                            mechanics, character stats, and evolution logic. The game applies object-oriented
+                            programming principles such as inheritance, encapsulation, and polymorphism to effectively
+                            model creatures, moves, and battle systems.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="project-3">
+                    <div class="project-description">
+                        <h2>MemeCoin Dashboard</h2>
+                        <h4>Python, Streamlit, Pandas, Plotly</h4>
+                        <p class="glass">
+                            I built an interactive MemeCoin Dashboard using Python and Streamlit that features real-time
+                            memecoin data, sentiment analysis, and dynamic visualizations. Leveraging Plotly and
+                            Streamlit, the dashboard presents price trends, trading volume, and market depth through
+                            interactive charts for an engaging user experience.
+
+                        </p>
+                    </div>
+                    <div class="project-image">
+                        <img src="images/farmerPal.png">
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <!-- ---------Contact---------- -->
+         <div id="contact">
+            <div class="container1">
+                <h1 class="sub-title">Contact</h1>
+                <div class="row2">
+                    <div class="col-1">
+                        <h3>You can reach me through:</h3>
+                        <p>
+                            📧 <a href="mailto:ilsatariqwant@gmail.com">ilsatariqwant@gmail.com</a><br>
+                            📞 <a href="tel:+60123456789">+60 12-345 6789</a><br>
+                            🌐 <a href="https://www.linkedin.com/in/ilsa-want" target="_blank">LinkedIn</a> | 
+                            <a href="https://github.com/ilsatariqwant" target="_blank">GitHub</a>
+                        </p>
+                    </div>
+                    <div class="col-2">
+                        <h3>Address</h3>
+                        <p>Pantai Panorama Condominium <br>Bangsar South, 59200 Kuala Lumpur</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script>
+
+            var tablinks = document.getElementsByClassName("tab-links");
+            var tabcontents = document.getElementsByClassName("tab-contents");
+
+            function opentab(tabname) {
+                // hides content when tablink is clicked
+                for (tablink of tablinks) {
+                    tablink.classList.remove("active-link")
+                }
+                for (tabcontent of tabcontents) {
+                    tabcontent.classList.remove("active-tab")
+                }
+                // diaplays content and underline
+                event.currentTarget.classList.add("active-link");
+                document.getElementById(tabname).classList.add("active-tab");
+            }
+
+        </script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 5a8e294..89bc18d 100644
--- a/style.css
+++ b/style.css
@@ -1,248 +1,258 @@
-*{
-    margin: 0;
-    padding: 0;
-    font-family: 'Poppins', sans-serif;
-    box-sizing: border-box;
-}
-html {
-  scroll-behavior: smooth;
-}
-
-body{ 
-    background: #080808; 
-    color: #fff; 
-}
-
-#header {
-    width: 100%;
-    height: 100vh;
-
-    background: 
-        url(images/pixel-art-12601_256.gif),
-        radial-gradient(circle 200px at calc(100% - 150px) center,
-                        rgba(161, 0, 255, 0.5), 
-                        transparent 100%);
-
-    background-repeat: no-repeat, no-repeat;
-    background-size: 25% auto, cover;  /* gif size, gradient covers */
-    background-position: calc(100% - 150px) center, calc(100% - 150px) center;
-}
-
-.container{
-    margin-bottom: 100px;
-}
-nav{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap ;
-    background-color: #1A0B2E;
-    padding-left: 40px;
-}
-
-.logo{
-    width: 90px;
-}
-nav ul li{
-    display: inline-block;
-    list-style: none;
-    margin: 20px 20px;
-}
-nav ul li a{
-    color: #fff;
-    text-decoration: none;
-    padding: 10px 20px;
-    border-radius: 999px;
-    font-size: 18px;
-    transition: 0.3s;
-}
-nav ul li a:hover{
-    background-color: #A100FF;
-}
-.header-text{
-    padding: 20px 10%;
-    margin-top: 20px;
-    font-size: 25px;
-    font-style: italic;
-}
-.header-text h1{
-    font-size: 50px;
-    font-style: normal;
-    margin-top: 10%;
-    color: #A100FF;
-    margin-bottom: 15px;
-}
-.header-text p{
-    margin-bottom: 50px;
-}
-.btn{
-    background-color: #A100FF;
-    color: #fff;
-    border: none;
-    padding: 12px 25px;
-    font-size: 16px;
-    border-radius: 999px;
-    cursor: pointer;
-    transition: 0.3s;
-    margin: 5px;
-}
-.btn:hover{
-    background-color: #fff;
-    color: #000;
-    transform: scale(1.05);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
-}
-
-
-/* ------------about------------ */
-.container1{
-    padding: 20px 10%;
-}
-#About{
-    padding: 40px 0;
-}
-.row{
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-.about-col-1{
-    flex-basis: 35%;
-}
-.about-col-1 img{
-    width: 100%;
-    border-radius: 15px;
-    margin-bottom: 20px;
-}
-.about-col-2{
-    flex-basis: 60%;
-}
-.sub-title{
-    font-size: 45px;
-    font-weight: 600;
-    color: #fff;
-    margin-bottom: 20px;
-}
-.tab-titles{
-    display: flex;
-    margin: 20px 0 40px;
-}
-.tab-links{
-    margin-right: 50px;
-    font-size: 18px;
-    font-weight: 700;
-    cursor: pointer;
-    position: relative;
-}
-.tab-links::after{
-    content: "";
-    position: absolute;
-    left: 0;
-    bottom: -5px;                   /* space below text */
-    width: 0;
-    height: 2px;
-    background: #A100FF;            /* your purple color */
-    transition: width 0.3s ease;
-}
-.tab-links:hover::after{
-    width: 100%;
-}
-.tab-links.active-link::after{
-    width: 50%;
-}
-
-.tab-content-col-1{
-    flex-basis: 40%;
-}
-.tab-content-col-2{
-    flex-basis: 50%;
-}
-.tab-contents ul li{
-    margin: 10px;
-}
-.tab-contents h3{
-    color: #B039F5;
-}
-.tab-contents h4{
-    font-style: italic;
-    font-weight: 100;
-    margin-top: 10px;
-}
-.tab-contents{
-    display: none;
-}
-.tab-contents.active-tab{
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-/* --------projects-------- */
-#projects{
-    padding: 40px 0;
-}
-.project-1{
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    margin-top: 30px;
-}
-.project-description{
-    flex-basis: 65%;
-}
-.project-image{
-    flex-basis: 25%;
-}
-.project-image img {
-    width: 100%;
-    border-radius: 10px;
-}
-.project-description h2{
-    color: #A100FF;
-}
-.project-description h4{
-    font-style: italic;
-    font-weight: 500;
-}
-.project-description p{
-    margin-top: 10px;
-}
-
-.project-2{
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    margin-top: 50px;
-}
-.project-3{
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    margin-top: 50px;
-}
-/* ----------contact----------- */
-#contact{
-    padding: 40px 0;
-}
-.row2{
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-
-.row2 a {
-  color: #A100FF;         /* purple text */
-  text-decoration: none;  /* remove underline */
-  font-weight: 500;
-  transition: color 0.3s, border-bottom 0.3s;
-}
-
-.row2 a:hover {
-  color: #FF6F61;         /* hover color */
-  border-bottom: 2px solid #FF6F61;  /* underline effect */
-}
-
-
-.row2 h3{
-    margin-top: 20px;
-    margin-bottom: 20px;
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
+}
+html {
+  scroll-behavior: smooth;
+}
+
+body{ 
+    /* background: #080808;  */
+    background: #fff;
+    color: #fff; 
+}
+
+#header {
+    width: 100%;
+    height: 100vh;
+
+    background: 
+        url(images/pixel-art-12601_256.gif),
+        radial-gradient(circle 200px at calc(100% - 150px) center,
+                        rgba(161, 0, 255, 0.5), 
+                        transparent 100%);
+
+    background-repeat: no-repeat, no-repeat;
+    background-size: 25% auto, cover;  /* gif size, gradient covers */
+    background-position: calc(100% - 150px) center, calc(100% - 150px) center;
+}
+
+.container{
+    margin-bottom: 100px;
+}
+nav{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap ;
+    background-color: #1A0B2E;
+    padding-left: 40px;
+}
+
+.logo{
+    width: 90px;
+}
+nav ul li{
+    display: inline-block;
+    list-style: none;
+    margin: 20px 20px;
+}
+nav ul li a{
+    color: #fff;
+    text-decoration: none;
+    padding: 10px 20px;
+    border-radius: 999px;
+    font-size: 18px;
+    transition: 0.3s;
+}
+nav ul li a:hover{
+    background-color: #A100FF;
+}
+.header-text{
+    padding: 20px 10%;
+    margin-top: 20px;
+    font-size: 25px;
+    font-style: italic;
+}
+.header-text h1{
+    font-size: 50px;
+    font-style: normal;
+    margin-top: 10%;
+    color: #A100FF;
+    margin-bottom: 15px;
+}
+.header-text p{
+    margin-bottom: 50px;
+}
+.btn{
+    background-color: #A100FF;
+    color: #fff;
+    border: none;
+    padding: 12px 25px;
+    font-size: 16px;
+    border-radius: 999px;
+    cursor: pointer;
+    transition: 0.3s;
+    margin: 5px;
+}
+.btn:hover{
+    background-color: #fff;
+    color: #000;
+    transform: scale(1.05);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+
+/* ------------about------------ */
+.container1{
+    padding: 20px 10%;
+}
+#About{
+    padding: 40px 0;
+}
+.row{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.about-col-1{
+    flex-basis: 35%;
+}
+.about-col-1 img{
+    width: 100%;
+    border-radius: 15px;
+    margin-bottom: 20px;
+}
+.about-col-2{
+    flex-basis: 60%;
+}
+.sub-title{
+    font-size: 45px;
+    font-weight: 600;
+    color: #fff;
+    margin-bottom: 20px;
+}
+.tab-titles{
+    display: flex;
+    margin: 20px 0 40px;
+}
+.tab-links{
+    margin-right: 50px;
+    font-size: 18px;
+    font-weight: 700;
+    cursor: pointer;
+    position: relative;
+}
+.tab-links::after{
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -5px;                   /* space below text */
+    width: 0;
+    height: 2px;
+    background: #A100FF;            /* your purple color */
+    transition: width 0.3s ease;
+}
+.tab-links:hover::after{
+    width: 100%;
+}
+.tab-links.active-link::after{
+    width: 50%;
+}
+
+.tab-content-col-1{
+    flex-basis: 40%;
+}
+.tab-content-col-2{
+    flex-basis: 50%;
+}
+.tab-contents ul li{
+    margin: 10px;
+}
+.tab-contents h3{
+    color: #B039F5;
+}
+.tab-contents h4{
+    font-style: italic;
+    font-weight: 100;
+    margin-top: 10px;
+}
+.tab-contents{
+    display: none;
+}
+.tab-contents.active-tab{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+/* --------projects-------- */
+#projects{
+    padding: 40px 0;
+}
+.project-1{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 30px;
+}
+.project-description{
+    flex-basis: 65%;
+}
+.glass {
+  background: rgba(255, 255, 255, 0.1); /* translucent white */
+  backdrop-filter: blur(8px);           /* blur background behind */
+  -webkit-backdrop-filter: blur(8px);   /* Safari support */
+  border-radius: 12px;                  /* rounded corners */
+  padding: 15px 20px;                   /* spacing inside */
+}
+
+.project-image{
+    flex-basis: 25%;
+}
+.project-image img {
+    width: 100%;
+    border-radius: 10px;
+}
+.project-description h2{
+    color: #A100FF;
+}
+.project-description h4{
+    font-style: italic;
+    font-weight: 500;
+    margin-bottom: 20px;
+}
+.project-description p{
+    margin-top: 10px;
+}
+
+.project-2{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 50px;
+}
+.project-3{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 50px;
+}
+/* ----------contact----------- */
+#contact{
+    padding: 40px 0;
+}
+.row2{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.row2 a {
+  color: #A100FF;         /* purple text */
+  text-decoration: none;  /* remove underline */
+  font-weight: 500;
+  transition: color 0.3s, border-bottom 0.3s;
+}
+
+.row2 a:hover {
+  color: #FF6F61;         /* hover color */
+  border-bottom: 2px solid #FF6F61;  /* underline effect */
+}
+
+
+.row2 h3{
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
\ No newline at end of file
