diff --git a/index.html b/index.html
index 9fd06ed..df29acf 100644
--- a/index.html
+++ b/index.html
@@ -3,11 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Sukhpreet</title>
+    <title>Sukhpreet Singh</title>
     <link rel="shortcut icon" href="./Images/sukhpreetsinghKhalsa.jpg" type="image/x-icon">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
     <link rel="stylesheet" href="./style.css">
+    <script src="https://cdn.emailjs.com/dist/email.min.js"></script>
+  
 </head>
 <body>
     <div id="header">
@@ -15,11 +17,11 @@
 
         <div>
             <ul id="navbar">
-                <li><a href="#main">Home</a></li>
-                <li><a href="#about">About</a></li>
-                <li><a href="#portfolio">Projects</a></li>
-                <li><a href="./Images/Resume-1.pdf" target="_blank">Resume</a></li>
-                <li><a href="#contact">Contact</a></li>
+                <li><a class="nav-link" href="#main">Home</a></li>
+                <li><a class="nav-link" href="#about">About</a></li>
+                <li><a class="nav-link" href="#portfolio">Projects</a></li>
+                <li><a class="nav-link" href="./Images/Resume-1.pdf" target="_blank">Resume</a></li>
+                <li><a class="nav-link" href="#contact">Contact</a></li>
                 <i class='bx bx-x' id="close"></i>
             </ul>
             <i class='bx bx-menu' id="bar"></i>
@@ -27,6 +29,10 @@
     </div>
 
     <div id="main">
+        <video autoplay muted loop id="bgVideo">
+            <source src="https://videos.pexels.com/video-files/4702442/4702442-hd_1920_1080_25fps.mp4" type="video/mp4">
+        
+        </video>
         <h1>Hello. I'm Sukhpreet</h1>
         <h1><span>A Web Developer</span></h1>
         <p>Welcome to my portfolio website! I'm a passionate and aspiring web developer with a strong desire to create innovative solutions and push the boundaries of technology.With a deep love for coding, I am constantly seeking opportunities to learn and grow in this ever-evolving field</p>
@@ -40,7 +46,7 @@ <h1><span>A Web Developer</span></h1>
     </div>
 
     <div id="about">
-        <div class="container">
+        <div class="container" >
             <div class="row">
                 <div class="about-col-1">
                     <img src="./Images/sukhpreetsinghKhalsa.jpg" alt="profile">
@@ -81,22 +87,22 @@ <h1 class="sub-title">About Me</h1>
                     
                     <div class="tab-contents" id="languages">
                         <ul>
-                            <li><span>English</span><br><i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ffffff1b' ></i>
+                            <li><span>English</span><br><i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#423f3f1b' ></i>
                             </li>
-                            <li><span>Punjabi</span><br><i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i></li>
-                            <li><span>Hindi</span><br><i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i>
-                                <i class='bx bxs-circle' style='color:#ababab' ></i></li>
+                            <li><span>Punjabi</span><br><i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i></li>
+                            <li><span>Hindi</span><br><i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i>
+                                <i class='bx bxs-circle' style='color:#000000a1' ></i></li>
                         </ul>
                     </div>
                     <div class="tab-contents" id="achievements">
@@ -186,8 +192,8 @@ <h3>Portfolio Website</h3>
             <div class="row">
                 <div class="contact-left">
                     <h1 class="sub-title">Contact Me</h1>
-                    <a href="mailto:sukh.singhlotey@gmail.com"><i class='bx bxs-paper-plane'></i> sukh.singhlotey@gmail.com</a>
-                    <p><i class='bx bxs-phone-call' ></i> +91 76791-38519</p>
+                    <a href="mailto:sukh.singhlotey@gmail.com" ><i class='bx bxs-paper-plane'></i> <span class="email-color">sukh.singhlotey@gmail.com</span></a>
+                    <p><i class='bx bxs-phone-call' ></i> <span class="num-color">+91 76791-38519</span></p>
                     <div class="social-icons">
                         <a href="mailto:sukh.singhlotey@gmail.com" target="_blank"><i class='bx bxs-envelope'></i></a>
                         <a href="https://www.linkedin.com/in/sukhpreetlotey/" target="_blank"><i class='bx bxl-linkedin-square' ></i></i></a>
@@ -195,10 +201,12 @@ <h1 class="sub-title">Contact Me</h1>
                         <a href="https://instagram.com/im.preet.0929" target="_blank"><i class='bx bxl-instagram-alt' ></i></i></a>
                         <a href="https://twitter.com/luvseverussnape" target="_blank"><i class='bx bxl-twitter' ></i></a>
                     </div>
+                    
                     <a href="./Images/Resume-1.pdf" target="_blank" class="btn btn2">Download CV</a>
                 </div>
              
             </div>
+           
         </div>
         <div class="copyright">
             <p>Copyright © 2024 by Sukhpreet Singh</p>
@@ -220,8 +228,25 @@ <h1 class="sub-title">Contact Me</h1>
             event.currentTarget.classList.add("active-link");
             document.getElementById(tabname).classList.add("active-tab");
         }
+      
+   
+document.addEventListener('DOMContentLoaded', () => {
+  const links = document.querySelectorAll('.nav-link');
+  links[0].classList.add('active');
+  links.forEach(link => {
+      link.addEventListener('click', function() {
+          links.forEach(node => node.classList.remove('active'));
+
+          this.classList.add('active');
+      });
+  });
+});
+
+
     </script>
 
     <script src="script.js"></script>
+
+
 </body>
 </html>
diff --git a/script.js b/script.js
index 3d1c648..1a9da1c 100644
--- a/script.js
+++ b/script.js
@@ -23,3 +23,5 @@ if(close) {
     })
 };
 
+// script.js
+
diff --git a/style.css b/style.css
index 2be978a..af8da51 100644
--- a/style.css
+++ b/style.css
@@ -1,603 +1,614 @@
-*{
-    padding: 0;
-    margin: 0;
-    font-family: "Noto Sans", sans-serif;
-    box-sizing: border-box;
+* {
+  padding: 0;
+  margin: 0;
+  font-family: "Noto Sans", sans-serif;
+  box-sizing: border-box;
 }
 
 body {
-    background: #1d1d1d;
-    color: #fff;
+  background: #ffffff;
+  color: #fff;
 }
 
 html {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
 /* ---------------------Header---part---of---website-------------------- */
 
 #header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px 60px;
-    background: #080808;
-    box-shadow: 0 5px 15px rgba(92, 92, 92, 0.115);
-    z-index: 999;
-    position: sticky;
-    top: 0;
-    left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 60px;
+  background: #080808;
+  box-shadow: 0 5px 15px rgba(92, 92, 92, 0.115);
+  z-index: 999;
+  position: sticky;
+  top: 0;
+  left: 0;
 }
 
 #navbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 #navbar li {
-    display: inline-block;
-    list-style: none;
-    padding: 0 20px;
+  display: inline-block;
+  list-style: none;
+  padding: 0 20px;
 }
 
 .logo {
-    width: 100px;
+  width: 100px;
 }
 
 #navbar li a {
-    text-decoration: none;
-    font-size: 16px;
-    font-weight: 400;
-    color: #BEBEBE;
-    transition: 0.3s ease;
-    position: relative;
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 400;
+  color: #bebebe;
+  transition: 0.3s ease;
+  position: relative;
 }
 
-#navbar li a::after {
-    content: '';
-    width: 0;
-    height: 3px;
-    background: #ff004f;
-    position: absolute;
-    left: 0;
-    bottom: -6px;
-    transition: 0.5s;
+#navbar li .nav-link::after {
+  content: "";
+  width: 0;
+  height: 3px;
+  background: #ff004f;
+  position: absolute;
+  left: 0;
+  bottom: -6px;
+  transition: 0.5s;
 }
 
-#navbar li a:hover::after {
-    width: 100%;
+#navbar li .nav-link.active::after {
+  width: 100%;
 }
 
 
 /* ---------------Main---part-------------- */
 
 #main {
-    background-image: url("./Images/Bg.jpg");
+  /* background-image: url("./Images/Bg.jpg");
     background-size: cover;
     height: 90vh;
     width: 100%;
     background-position: center;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-  }
+    */
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  height: 100vh;
+}
+#bgVideo {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  z-index: -1;
+  transform: translate(-50%, -50%);
+}
+#main h1,
+#main p,
+.social-icons {
+  position: relative;
+  z-index: 1;
+}
+.social-icons a {
+  color: white; /* Ensure visibility over video */
+}
 
 #main h1 {
-    font-size: 70px;
-    line-height: 1.3;
-    padding-bottom: 15px;
-    font-weight: 400;
-    color: #BEBEBE;
+  font-size: 70px;
+  line-height: 1.3;
+  padding-bottom: 15px;
+  font-weight: 400;
+  color: #ffffff;
 }
 
 #main h1 span {
-    color: #32A873;
+  color: #c7c4c4;
 }
 
 #main p {
-    font-weight: 300;
-    font-size: 18px;
-    letter-spacing: 2px;
-    color: #BEBEBE;
-    max-width: 60%;
-    text-align: center;
+  font-weight: 300;
+  font-size: 18px;
+  letter-spacing: 2px;
+  color: #ffffff;
+  max-width: 60%;
+  text-align: center;
 }
 
-
 /* ---------------------About-Me-------------------- */
 
 .container {
-    padding: 10px 10%;
+  padding: 10px 10%;
 }
 
 #about {
-    padding: 80px 0;
-    color: #ababab;
+  padding: 80px 0;
+  color: #ababab;
 }
 
 .row {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .about-col-1 {
-    flex-basis: 35%;
-    border: 1px solid #ababab;
-    border-radius: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  flex-basis: 35%;
+  border: 1px solid #ababab;
+  border-radius: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .about-col-1 img {
-    border-radius: 15px;
-    width: 230px;
-    height: auto;
-    margin: 150px 100px;
+  border-radius: 15px;
+  width: 230px;
+  height: auto;
+  margin: 150px 100px;
 }
 
 .about-col-2 {
-    flex-basis: 60%;
+  flex-basis: 60%;
 }
 
 .sub-title {
-    font-size: 30px;
-    font-weight: 400;
-    color: #fff;
-    padding-bottom: 20px;
+  font-size: 30px;
+  font-weight: 900;
+  color: #ff004f;
+  padding-bottom: 20px;
 }
 
 .about-col-2 p {
-    line-height: 1.5;
-    font-weight: 400;
-    font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  font-size: 16px;
 }
 
 .tab-titles {
-    display: flex;
-    margin: 20px 0 30px;
-    flex-wrap: wrap;
+  display: flex;
+  margin: 20px 0 30px;
+  flex-wrap: wrap;
 }
 
 .tab-links {
-    margin: 10px 50px 10px 0;
-    font-size: 18px;
-    cursor: pointer;
-    position: relative;
+  margin: 10px 50px 10px 0;
+  font-size: 18px;
+  cursor: pointer;
+  position: relative;
 }
 .tab-titles p:nth-child(4) {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 p.tab-links {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 .tab-links::after {
-    content: '';
-    width: 0;
-    height: 3px;
-    background: #ff004f;
-    position: absolute;
-    left: 0;
-    bottom: -8px;
-    transition: 0.5s;
+  content: "";
+  width: 0;
+  height: 3px;
+  background: #ff004f;
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  transition: 0.5s;
 }
 
 .tab-links.active-link::after {
-    width: 60%;
+  width: 60%;
 }
 
 .tab-contents {
-    line-height: 1.4;
-    display: none;
+  line-height: 1.4;
+  display: none;
 }
 
 .tab-contents ul li {
-    list-style: none;
-    margin: 10px 0;
+  list-style: none;
+  margin: 10px 0;
 }
 
 .tab-contents ul li span {
-    color: #ff004f;
-    font-size: 15px;
+  color: #ff0051;
+  font-size: 15px;
 }
 
 .tab-contents.active-tab {
-    display: block;
+  display: block;
 }
 
-.hack-btn{
-    color: #fff;
+.hack-btn {
+  color: #fff;
 }
 
 /* ---------------------------------------Projects------------------------------ */
 
 #portfolio {
-    padding: 50px 0;
+  padding: 50px 0;
 }
 
 .work-list {
-    display: flex;
-    /* justify-content: space-between; */
-    gap: 15px;
-    align-items: center;
-    margin-top: 50px;
-    flex-wrap: wrap;
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  margin-top: 50px;
+  flex-wrap: wrap;
 }
 
 .work {
-    border-radius: 10px;
-    width: 31%;
-    position: relative;
-    overflow: hidden;
-    margin-bottom: 40px;
+  border-radius: 10px;
+  width: 31%;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 40px;
 }
 
 .work img {
-    width: 100%;
-    border-radius: 10px;
-    display: block;
-    transition: transform 0.5s;
+  width: 100%;
+  border-radius: 10px;
+  display: block;
+  transition: transform 0.5s;
 }
 
 .layer {
-    width: 100%;
-    height: 0;
-    background: linear-gradient(rgba(0,0,0,0.6), #ff004f);
-    border-radius: 10px;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    padding: 0 30px;
-    text-align: center;
-    line-height: 1.5;
-    font-size: 16px;
-    transition: height 0.9s;
+  width: 100%;
+  height: 0;
+  background: linear-gradient(rgba(0, 0, 0, 0.6), #ff004f);
+  border-radius: 10px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 30px;
+  text-align: center;
+  line-height: 1.5;
+  font-size: 16px;
+  transition: height 0.9s;
 }
 
 .layer h3 {
-    font-weight: 600;
-    margin-bottom: 20px;
+  font-weight: 600;
+  margin-bottom: 20px;
 }
 
 .layer-btn {
-    margin-top: 20px;
-    display: block;
+  margin-top: 20px;
+  display: block;
 }
 
 .work .layer-btn a {
-    color: #ff004f;
-    text-decoration: none;
-    font-size: 20px;
-    line-height: 60px;
-    background: #fff;
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    text-align: center;
-    padding: 15px;
-    margin-left: 10px;
+  color: #ff004f;
+  text-decoration: none;
+  font-size: 20px;
+  line-height: 60px;
+  background: #fff;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  text-align: center;
+  padding: 15px;
+  margin-left: 10px;
 }
 
 .work:hover img {
-    transform: scale(1.1);
+  transform: scale(1.1);
 }
 
 .work:hover .layer {
-    height: 100%;
+  height: 100%;
 }
 
 .btn {
-    display: block;
-    margin: 50px auto;
-    width: fit-content;
-    border: 1px solid #ff004f;
-    padding: 14px 50px;
-    border-radius: 6px;
-    text-decoration: none;
-    color: #fff;
-    transition: background 0.5s;
+  display: block;
+  margin: 50px auto;
+  width: fit-content;
+  /* border: 1px solid #3a3a3a92; */
+  background-color: #3a3a3a92;
+  padding: 14px 50px;
+  font-size: 20px;
+  /* border-radius: 6px; */
+  text-decoration: none;
+  color: #3a3a3a92;
+  transition: all 0.5s;
 }
 
 .btn:hover {
-    background: #ff004f;
+  background: #3a3a3a92;
+  color: #ffffff;
 }
 
 /* ------------------------------Contact-part---------------------------- */
 
 .contact-left {
-    flex-basis: 35%;
+  flex-basis: 35%;
 }
 
 .contact-right {
-    flex-basis: 60%;
+  flex-basis: 60%;
 }
 
 .contact-left p {
-    margin-top: 30px;
+  margin-top: 30px;
+  color: #000000;
 }
 
 .contact-left > a {
-    margin-top: 30px;
-    text-decoration: none;
-    color: #fff;
+  margin-top: 30px;
+  text-decoration: none;
+  color: #222121;
 }
 
 .contact-left p i,
 .contact-left > a i {
-    color: #ff004f;
-    font-size: 20px;
+  color: #ff004f;
+  font-size: 20px;
+}
+.email-color {
+  color: #ababab;
+}
+.num-color {
+  color: #ababab;
 }
-
 .social-icons {
-    margin-top: 30px;
+  margin-top: 30px;
 }
 
 .social-icons a {
-    text-decoration: none;
-    font-size: 30px;
-    margin-right: 15px;
-    color: #ababab;
-    display: inline-block;
-    transition: transform 0.5s;
+  text-decoration: none;
+  font-size: 30px;
+  margin-right: 15px;
+  color: #fff;
+  display: inline-block;
+  transition: transform 0.5s;
 }
 
 .social-icons a:hover {
-    color: #32A873;
-    transform: translateY(-5px);
+  color: #ff004f;
+  transform: translateY(-5px);
 }
 
 .btn.btn2 {
-    display: inline-block;
-    background-color: #ff004f;
+  display: inline-block;
+  background-color: #3a3a3a92;
+  color: #3a3a3a92;
+  &:hover {
+    color: #fff;
+  }
 }
 
-.contact-right form {
-    width: 100%;
+.copyright {
+  width: 100%;
+  text-align: center;
+  padding: 20px 0;
+  background: #080808;
+  font-weight: 300;
+  margin-top: 20px;
+  color: #ababab;
 }
 
-form input, form textarea {
-    width: 100%;
-    border: 0;
-    outline: none;
-    background: #303030;
-    padding: 15px;
-    margin: 15px 0;
-    color: #fff;
-    font-size: 18px;
-    border-radius: 6px;
+/* width */
+::-webkit-scrollbar {
+  width: 5px;
 }
 
-form .btn2 {
-    padding: 14px 60x;
-    font-size: 18px;
-    margin-top: 20px;
-    cursor: pointer;
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
 }
 
-.copyright {
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #000000;
+}
+
+/* ---------------------------------media queries------------------------------ */
+
+#header .bx {
+  display: none;
+}
+
+@media screen and (max-width: 820px) {
+  #header .bx {
+    display: block;
+    font-size: 25px;
+  }
+
+  #navbar {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    background: #696868;
+    position: fixed;
+    top: 0;
+    left: 100%;
     width: 100%;
-    text-align: center;
-    padding: 20px 0;
-    background: #262626;
-    font-weight: 300;
-    margin-top: 20px;
-    color: #ababab;
+    height: 100vh;
+    padding: 80px 0 0 10px;
+    transition: 0.5s;
+  }
+
+  #navbar.active {
+    left: 0px;
+  }
+
+  #navbar li {
+    display: block;
+    margin-bottom: 25px;
+  }
+
+  #close {
+    position: absolute;
+    top: 25px;
+    left: 25px;
+    cursor: pointer;
+  }
+
+  #main {
+    height: 70vh;
+    padding: 0 40px;
+    background-size: cover;
+  }
+
+  #main h1 {
+    font-size: 50px;
+  }
+
+  #main p {
+    max-width: 80%;
+  }
+
+  .container {
+    padding: 0px 40px;
+  }
+
+  .about-col-1,
+  .about-col-2 {
+    flex-basis: 100%;
+  }
+
+  .about-col-1 {
+    border: 0;
+    margin-bottom: 40px;
+  }
+
+  .about-col-1 img {
+    width: 350px;
+    margin: 0px 0px;
+  }
+
+  .about-col-2 > p {
+    margin-bottom: 30px;
+  }
+
+  #about {
+    padding: 80px 0 0;
+  }
+
+  .work-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .work {
+    width: 70%;
+  }
+
+  .contact-left,
+  .contact-right {
+    flex-basis: 100%;
+  }
 }
 
-/* width */
-::-webkit-scrollbar {
-    width: 5px;
+@media screen and (max-width: 480px) {
+  body {
+    overflow-x: hidden;
+    /* width: 100%; */
+    margin-right: 0;
+    padding: 0;
   }
-  
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: #f1f1f1;
+
+  .container {
+    /* margin: 0; */
+    padding: 10px;
   }
-  
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: #000000;
+
+  #header {
+    padding: 10px 30px;
   }
 
-/* ---------------------------------media queries------------------------------ */
+  #main {
+    background-size: cover;
+  }
 
-#header .bx {
-    display: none;
-}
-
-@media screen and (max-width:820px) {
-
-    #header .bx {
-        display: block;
-        font-size: 25px;
-    }
-
-    #navbar {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
-        background: #32A873;
-        position: fixed;
-        top: 0;
-        left: 100%;
-        width: 100%;
-        height: 100vh;
-        padding: 80px 0 0 10px;
-        transition: 0.5s;
-    }
-
-    #navbar.active {
-        left: 0px;
-    }
-
-    #navbar li {
-        display: block;
-        margin-bottom: 25px;
-    }
-
-    #close {
-        position: absolute;
-        top: 25px;
-        left: 25px;
-        cursor: pointer;
-    }
-
-    #main {
-        height: 70vh;
-        padding: 0 40px;
-        background-size: cover;
-    }
-
-    #main h1 {
-        font-size: 50px;
-    }
-
-    #main p {
-        max-width: 80%;
-    }
-
-    .container {
-        padding: 0px 40px;
-    }
-
-    .about-col-1, .about-col-2 {
-        flex-basis: 100%;
-    }
-
-    .about-col-1 {
-        border: 0;
-        margin-bottom: 40px;
-    }
-
-    .about-col-1 img {
-        width: 350px;
-        margin: 0px 0px;
-    }
-
-    .about-col-2 > p {
-        margin-bottom: 30px;
-    }
-
-    #about {
-        padding: 80px 0 0;
-    }
-
-    .work-list {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    .work {
-        width: 70%;
-    }
-
-    .contact-left, .contact-right {
-        flex-basis: 100%;
-    }
-}
-
-
-@media screen and (max-width:480px) {
-    body {
-        overflow-x: hidden;
-        /* width: 100%; */
-        margin-right: 0;
-        padding: 0;
-     
-    }
-
-    .container{
-        /* margin: 0; */
-        padding: 10px;
-    }
-
-    #header {
-        padding: 10px 30px;
-    }
-
-    #main {
-        background-size: cover;
-    }
-
-    #main h1 {
-        font-size: 30px;
-    }
-
-    #main p {
-        max-width: 100%;
-        font-size: 14px;
-    }
-
-    .social-icons.bg-icons a {
-        font-size: 24px;
-    }
-    .about-col-1 img {
-        width: 250px;
-    }
-
-    .sub-title {
-        font-size: 25px;
-    }
-
-    .about-col-2 > p {
-        font-size: 14px;
-        overflow-wrap: break-word;
-    }
-
-    .work {
-        width: 100%;
-    }
-
-    .tab-links {
-        margin: 10px 25px 10px 0;
-        font-size: 16px;
-    }
-    
-    .tab-titles p:nth-child(4) {
-        margin-right: 0;
-    }
-
-    #portfolio {
-        padding: 10px 0;
-    }
-
-    .layer {
-        font-size: 14px;
-        line-height: 1.3;
-    }
-
-    .layer h3 {
-        font-size: 18px;
-    }
-
-    .layer a {
-        width: 50px;
-        height: 50px;
-    }
-
-    .copyright {
-        font-size: 14px;
-        padding: 15px 0;
-    }
-  
+  #main h1 {
+    font-size: 30px;
+  }
+
+  #main p {
+    max-width: 100%;
+    font-size: 14px;
+  }
+
+  .social-icons.bg-icons a {
+    font-size: 24px;
+  }
+  .about-col-1 img {
+    width: 250px;
+  }
+
+  .sub-title {
+    font-size: 25px;
+  }
+
+  .about-col-2 > p {
+    font-size: 14px;
+
+    text-align: justify;
+  }
+
+  .work {
+    width: 100%;
+  }
+
+  .tab-links {
+    margin: 10px 25px 10px 0;
+    font-size: 16px;
+  }
+
+  .tab-titles p:nth-child(4) {
+    margin-right: 0;
+  }
+
+  #portfolio {
+    padding: 10px 0;
+  }
+
+  .layer {
+    font-size: 14px;
+    line-height: 1.3;
+  }
+
+  .layer h3 {
+    font-size: 18px;
+  }
+
+  .layer a {
+    width: 50px;
+    height: 50px;
+  }
+
+  .copyright {
+    font-size: 14px;
+    padding: 15px 0;
+  }
 }
 
 #msg {
-    color: #61b752;
-    margin-top: -40px;
-    display: block;
+  color: #61b752;
+  margin-top: -40px;
+  display: block;
 }
