From 021db3c2fd4370320247b04f69a4890e99af3ef9 Mon Sep 17 00:00:00 2001
From: notverifiedcode <101034581+Mrunalisa@users.noreply.github.com>
Date: Sat, 16 Aug 2025 17:31:50 +0530
Subject: [PATCH 1/2] feat(footer): enhance UI with modern styling and hover
 effects

---
 index.html      | 147 +++++---------
 styles/main.css | 528 +++++++++++++++++++++---------------------------
 2 files changed, 277 insertions(+), 398 deletions(-)
diff --git a/index.html b/index.html
index 2ec77e34..7ab0213e 100644
--- a/index.html
+++ b/index.html
@@ -40,21 +40,16 @@
     />
 
     <!-- ================ Vendor CSS ================  -->
-
- <main>
-    <!-- <link rel="stylesheet" href="styles/styles.css"> -->
-
-    <link rel="stylesheet" href="styles/bootstrap.min.css">
-    <link rel="stylesheet" href="styles/owl.carousel.min.css">
-    <link rel="stylesheet" href="styles/owl.theme.default.min.css">
-    <link rel="stylesheet" href="styles/fontawesome.css">
+    <link rel="stylesheet" href="styles/bootstrap.min.css" />
+    <link rel="stylesheet" href="styles/owl.carousel.min.css" />
+    <link rel="stylesheet" href="styles/owl.theme.default.min.css" />
+    <link rel="stylesheet" href="styles/fontawesome.css" />
 
     <!-- ================ Custom CSS ================  -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
-    <link rel="stylesheet" href="styles/main.css">
+    <link rel="stylesheet" href="styles/main.css" />
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
-
     <style>
       .icon-container {
         display: flex;
@@ -69,18 +64,7 @@
         transform: scale(1.2);
       }
     </style>
-
-</head>
-
-    <link rel="stylesheet" href="styles/bootstrap.min.css" />
-    <link rel="stylesheet" href="styles/owl.carousel.min.css" />
-    <link rel="stylesheet" href="styles/owl.theme.default.min.css" />
-    <link rel="stylesheet" href="styles/fontawesome.css" />
-
-    <!-- ================ Custom CSS ================  -->
-    <link rel="stylesheet" href="styles/main.css" />
   </head>
-  </main>
 
   <body>
     <a id="top"></a>  <!--added for issue 260 -->
@@ -540,84 +524,55 @@ <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span>About</sp
     </section>
 
     <!-- ================================ Footer Section Start Here ================================ -->
-    <footer id="contactFooter">
-      <div class="container">
-        <div class="row align-items-start justify-content-between py-4">
-          <div data-aos-duration="650" data-aos="fade-up" class="col-12 col-md-3 mb-4 mb-md-0 footer-logo-col">
-            <a class="navbar-brand mb-2" href="#homeSection"
-              >Code<span>Clip</span></a
-            > 
-            <p class="footer-desc mb-0">
-              CodeClip is a open source project under GirlScript Summer of Code
-              (GSSoC) 2025 to open for contribution
-            </p> 
-          </div>
-          <div data-aos-duration="650" data-aos="fade-left" class="col-12 col-md-6 mb-4 mb-md-0 footer-links-col">
-            <h5 class="footer-title">Important Links</h5>
-            <ul class="footer-links list-unstyled mb-0">
-              <li><a href="#homeSection">Home</a></li>
-              <li><a href="#challengeSection">Challenges</a></li>
-              <li><a href="#leaderboardSection">Leaderboard</a></li>
-              <li><a href="#aboutSection">About</a></li>
-            </ul>
-          </div>
-          <div class="col-12 col-md-6 footer-contact-col-main">
-            <h5 data-aos-duration="650" data-aos="fade-left" class="footer-title">Contact Us</h5>
-            <div class="footer-contact-row d-flex justify-content-center">
-              <div data-aos-duration="650" data-aos="fade-right"
-                class="footer-contact-col d-flex flex-column align-items-center"
-              >
-                <a
-                  href="https://github.com/opensource-society/CodeClip"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn"
-                  style="max-width: 250px"
-                >
-                  <i class="fab fa-github me-2"></i> GitHub
-                </a>
-                <a
-                  href="https://github.com/opensource-society/CodeClip"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn"
-                  style="max-width: 250px"
-                >
-                  <i class="fab fa-discord me-2"></i> Discord
-                </a>
-              </div>
-              <div data-aos-duration="650" data-aos="fade-left"
-                class="footer-contact-col d-flex flex-column align-items-center"
-              >
-              <!-- margin added -->
-                <a
-                  href="https://github.com/opensource-society/CodeClip"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn"
-                  style="max-width: 250px"
-                >
-                  <i class="fas fa-exclamation-circle me-2"></i> Open an Issue
-                </a>
-                <!-- Added linkdin social connection -->
-                <a
-                  href="https://www.linkedin.com/in/adityai0"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn"
-                  style="max-width: 250px"
-                >
-                  <i class="fab fa-linkedin-in me-2"></i> LinkedIn
-                </a>
-                
-              </div>
-            </div>
-          </div>
-        </div> 
-      </div> 
+    <footer id="contactFooter" style="background:#fff;">
+  <div class="container">
+    <div class="row align-items-start justify-content-between py-4">
+
+      <div class="col-12 col-md-3 mb-4 footer-logo-col">
+        <a class="navbar-brand mb-2" href="#homeSection">Code<span>Clip</span></a>
+        <p class="footer-desc mb-0">
+          CodeClip is an open-source project under GirlScript Summer of Code (GSSoC) 2025 open for contribution.
+        </p>
+      </div>
+
+      <!-- Resources -->
+      <div class="col-12 col-md-6 mb-4 footer-links-col">
+        <h5 class="footer-title w-100 imp-links">Resources</h5>
+        <ul class="footer-links list-unstyled mb-0">
+          <li><a href="#docsSection">Documentation</a></li>
+          <li><a href="#faqSection">FAQ</a></li>
+          <li><a href="https://github.com/opensource-society/CodeClip" target="_blank">Contribute</a></li>
+          <li><a href="#privacyPolicy">Privacy Policy</a></li>
+          <li><a href="#termsConditions">Terms & Conditions</a></li>
+        </ul>
+      </div>
+
+      <div class="col-12 col-md-6 footer-contact-col-main .footer-line">
+  <h5 class="footer-title w-100">Contact Us</h5>
+  
+  <div class="footer-contact-row">
+
+    <!-- Row 1: Open Issue Button -->
+    <div class="open-issue">
+      <a href="https://github.com/opensource-society/CodeClip" target="_blank">
+        <i class="fas fa-exclamation-circle me-2"></i> Open an Issue
+      </a>
     </div>
-    <hr />
-    <p data-aos-duration="650" data-aos="fade-up" class="footerNote text-center mb-0">
-      &copy; CodeClip | Open Source Project 2025
-    </p>
+
+    <!-- Row 2: Social Icons -->
+    <div class="contact-icons">
+      <a href="https://github.com/opensource-society/CodeClip" target="_blank"><i class="fab fa-github"></i></a>
+      <a href="https://github.com/opensource-society/CodeClip" target="_blank"><i class="fab fa-discord"></i></a>
+      <a href="https://www.linkedin.com/in/adityai0" target="_blank"><i class="fab fa-linkedin-in"></i></a>
+    </div>
+</div>
+  </div>
+</div>
+    <div class="footer-line"></div>
+    <p class="footerNote text-center mb-0">&copy; CodeClip | Open Source Project 2025</p>
   </div>
 </footer>
+
     <!--AOS Animations-->
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
     <script>
diff --git a/styles/main.css b/styles/main.css
index a685c84a..d5cb9820 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -522,363 +522,287 @@ nav {
 
 /* ================== About Styles End Here ================== */
 
+/* ================== Footer Styles Start Here ================== */
 
-/* --- Footer Redesign --- */
 .footer-contact-btn {
-    width: 150px;
-    min-width: 100px;
-    max-width: 170px;
-    font-size: 0.97rem;
-    padding: 0.45em 0;
-    border-radius: 8px;
-    gap: 0.4em;
+  width: 150px;
+  min-width: 100px;
+  max-width: 170px;
+  font-size: 0.97rem;
+  padding: 0.5em 1.2em;
+  border-radius: 9999px;
+  background: #fff;
+  color: #2563eb;
+  border: 2px solid #2563eb;
+  font-weight: 500;
+  gap: 0.4em;
+  box-shadow: 0 0 0 transparent;
+  transition: all 0.3s ease;
 }
 .footer-contact-btn:hover {
-    background: linear-gradient(90deg, #1e2c44 60%, #2563eb 100%);
-    color: #fff;
-    box-shadow: 0 4px 20px rgba(30,44,68,0.15);
-    transform: translateY(-2px) scale(1.03);
+  background: #2563eb;
+  color: #fff;
+  box-shadow: 0 0 12px rgba(37,99,235,0.45);
+  transform: translateY(-2px) scale(1.04);
 }
 .footer-contact-btn i {
-    font-size: 1em;
-    margin-right: 0.4em;
+  font-size: 1em;
+  margin-right: 0.4em;
 }
 
+/* Footer Container */
 footer {
-    padding-top: 2.5rem;
-    padding-bottom: 1.5rem;
-    background: linear-gradient(90deg, #f8fafc 60%, #e0ecfa 100%);
-    border-top: 1.5px solid #e5e7eb;
-    box-shadow: 0 -2px 16px rgba(30,44,68,0.06);
+  padding: 2.5rem 0 1.5rem;
+  background: linear-gradient(90deg, #f8fafc 60%, #e0ecfa 100%);
+  border-top: 1.5px solid #e5e7eb;
+  box-shadow: 0 -2px 16px rgba(30,44,68,0.06);
 }
 footer .container {
-    max-width: 1200px;
+  max-width: 1200px;
 }
 footer .row.align-items-start {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0;
-    row-gap: 2.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  row-gap: 2.5rem;
 }
-.footer-logo-col, .footer-links-col, .footer-contact-col-main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-width: 220px;
-    flex: 1 1 0;
-    padding: 0 1rem;
+
+.footer-logo-col,
+.footer-links-col,
+.footer-contact-col-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 220px;
+  flex: 1 1 0;
+  padding: 0 1rem;
 }
-.footer-links-col, .footer-contact-col-main {
-    border-left: 1.5px solid #e5e7eb;
+.footer-links-col,
+.footer-contact-col-main {
+  border-left: 1.5px solid #e5e7eb;
 }
 .footer-logo-col {
-    border-right: 2px solid #e5e7eb;
-    min-height: 140px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-@media (max-width: 991px) {
-    .footer-logo-col {
-        border-right: none;
-        min-height: unset;
-    }
-}
-.footer-logo, .footer-desc {
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
+  border-right: 2px solid #e5e7eb;
+  min-height: 140px;
 }
+
 .footer-logo {
-    font-size: 2.3rem;
-    font-weight: bolder;
-    color: #2563eb;
-    margin-bottom: 0.3rem;
-    letter-spacing: 1px;
+  font-size: 2.3rem;
+  font-weight: bolder;
+  color: #2563eb;
+  margin-bottom: 0.3rem;
+  letter-spacing: 1px;
+  text-align: center;
 }
 .footer-desc {
-    font-size: 1rem;
-    color: #4a5568;
-    opacity: 0.85;
-    margin-top: 0.3rem;
-    max-width: 320px;
-    padding-right: 1.5rem;
+  font-size: 1rem;
+  color: #4a5568;
+  opacity: 0.85;
+  margin-top: 0.3rem;
+  line-height: 1.6;
+  max-width: 380px;
+  text-align: center;
+  padding: 0 1.5rem;
 }
+
 .footer-title {
-    font-size: 1.2rem;
-    font-weight: 600;
-    margin-bottom: 0.7rem;
-    color: #1e2c44;
-    letter-spacing: 0.5px;
-    text-align: center;
-}
-.footer-contact-links {
-    margin-top: 0;
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+  color: #1e2c44;
+  text-align: center;
+  letter-spacing: 0.5px;
+}
+.footer-contact-col-main .footer-title,.imp-links  {
+  font-size: 1.45rem;
+  font-weight: 700;
+  color: #2563eb;
+  margin-bottom: 1.1rem;
+  position: relative;
+}
+.footer-contact-col-main .footer-title::after ,.imp-links::after {
+  content: '';
+  display: block;
+  width: 55%;
+  height: 3px;
+  background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
+  border-radius: 2px;
+  margin: 0.4rem auto 0 auto;
 }
+
 .footer-links {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    margin: 0;
-    padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
 }
 .footer-links li {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  list-style: none;
 }
 .footer-links a {
-    color: #1e2c44;
-    text-decoration: none;
-    font-size: 1rem;
-    opacity: 0.85;
-    transition: color 0.2s, opacity 0.2s;
+  color: #1e2c44;
+  text-decoration: none;
+  font-size: 1rem;
+  opacity: 0.85;
+  position: relative;
+  transition: color 0.3s ease, opacity 0.3s ease;
+}
+.footer-links a::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -3px;
+  width: 0;
+  height: 2px;
+  background: #2563eb;
+  transition: width 0.3s ease;
 }
 .footer-links a:hover {
-    color: #2563eb;
-    opacity: 1;
+  color: #2563eb;
+  opacity: 1;
+}
+.footer-links a:hover::after {
+  width: 100%;
+}
+
+.footer-contact-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.8rem; 
+}
+.open-issue{
+    margin-top: 10%;
+}
+/* First Row: Open Issue Button */
+.open-issue a {
+  width: 180px;
+  font-size: 1rem;
+  padding: 0.7em 1.6em;
+  border-radius: 9999px; 
+  background: #fff;
+  color: #2563eb;
+  border: 1px solid #2563eb;
+  font-weight: 600;
+  box-shadow: 0 0 0 transparent;
+  transition: all 0.3s ease;
+  text-decoration: none;
+
+}
+
+.open-issue a:hover {
+  background: #fff;
+  color: #2563eb;
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 0 15px rgba(37,99,235,0.35);
+}
+
+/* Second Row: Social Icons */
+.contact-icons {
+  display: flex;
+  justify-content: center;
+  gap: 1.2rem;
+}
+
+.contact-icons a {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #2563eb;
+  color: #2563eb;
+  font-size: 1.2rem;
+  background: #fff;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 8px rgba(37,99,235,0.18);
+}
+
+.contact-icons a:hover {
+  background: #4077ec;
+  color: #fff;
+  transform: translateY(-3px) scale(1.08);
+  box-shadow: 0 0 18px rgba(37,99,235,0.45);
 }
-.scroll_to_top{
+
+/* Scroll to top button */
+.scroll_to_top {
   position: fixed;
-  color: white;
   bottom: 15px;
   right: 20px;
   z-index: 999;
   width: 40px;
   height: 40px;
-  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #2563eb;
-  transform: translateY(0);
+  color: #fff;
+  border-radius: 50%;
   transition: all 0.3s ease;
-  border-radius: 50%; 
   text-decoration: none;
 }
-.scroll_to_top:hover{
-    background: linear-gradient(45deg, #2563eb , #0000ff);
-    transform: translateY(-3px) scale(1.05);
-}
-
-
-@media (min-width: 992px) {
-    .footer-logo, .footer-desc {
-        text-align: center;
-        margin-left: auto;
-        margin-right: auto;
-    }
-    .footer-title {
-        font-size: 1.2rem;
-    }
-}
-@media (max-width: 991px) {
-    footer .row.align-items-start {
-        flex-direction: column;
-        align-items: center;
-        gap: 1.5rem;
-    }
-    .footer-logo-col, .footer-links-col, .footer-contact-col-main {
-        border: none;
-        padding: 0;
-        min-width: 0;
-    }
-    .footer-logo, .footer-desc, .footer-title {
-        text-align: center;
-        margin-left: auto;
-        margin-right: auto;
-        padding-right: 0;
-    }
-    .footer-links, .footer-contact-links {
-        align-items: center;
-        text-align: center;
-    }
-    .footer-contact-btn {
-        margin-left: auto;
-        margin-right: auto;
-    }
-    .footer-links {
-        margin-bottom: 2rem;
-        margin-right: 0;
-    }
-    .footer-title {
-        margin-bottom: 0.8rem;
-    }
-}
-@media (max-width: 768px) {
-    footer .row {
-        flex-direction: column;
-        align-items: center;
-    }
-    .footer-links, .footer-contact-links {
-        margin-bottom: 1.5rem;
-        margin-right: 0;
-    }
-    .footer-contact-btn {
-        width: 100%;
-        min-width: 0;
-        max-width: 100%;
-    }
+.scroll_to_top:hover {
+  background: linear-gradient(45deg, #2563eb , #0000ff);
+  transform: translateY(-3px) scale(1.05);
 }
 
-/* ================== Media queries start here for home screen and carousel buttons ================== */
-
-@media (max-width: 992px) {
-    .heroSectionBtn {
-        padding: 4px 40px !important;
-    }
-
-
+.footer-line{
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
+    margin: 1.5rem 0;
 }
 
-@media (max-width: 576px) {
-
-    .rankPosition,
-    .rankPoints {
-        padding: 4px 30px !important;
-    }
+#contactFooter {
+  background: #fff;
+  border-top: 1px solid #e5e7eb;
+  padding: 2.5rem 0 1.5rem;
 }
 
-/* ================== Media queries end here for home screen and carousel buttons ================== */
-
-.footer-logo, .footer-desc, .navbar-brand {
-    display: block;
+/* ===== Responsive ===== */
+@media (max-width: 991px) {
+  .footer-logo-col { border-right: none; min-height: unset; }
+  footer .row.align-items-start {
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+  }
+  .footer-logo-col,
+  .footer-links-col,
+  .footer-contact-col-main {
+    border: none;
+    padding: 0;
+    min-width: 0;
+  }
+  .footer-links,
+  .footer-contact-row {
+    align-items: center;
     text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-}
-.footer-desc {
-    font-size: 1rem;
-    color: #4a5568;
-    opacity: 0.85;
-    margin-top: 0.3rem;
-    max-width: 380px;
-    padding: 0 1.5rem;
-    line-height: 1.6;
-}
-@media (min-width: 992px) {
-    .footer-logo, .footer-desc, .navbar-brand {
-        text-align: center;
-        margin-left: auto;
-        margin-right: auto;
-        max-width: 420px;
-    }
-    .footer-desc {
-        max-width: 420px;
-        padding: 0 2rem;
-    }
+  }
+  .footer-contact-btn { margin: auto; }
+  .footer-links { margin-bottom: 2rem; }
 }
 
-.footer-links-row {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 2.5rem;
-}
-.footer-links-row .footer-links {
-    margin: 0;
-    padding: 0;
-    min-width: 110px;
-}
 @media (max-width: 768px) {
-    .footer-links-row {
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    .footer-links-row .footer-links {
-        min-width: 0;
-        margin-bottom: 0.5rem;
-    }
-}
-
-.footer-contact-row {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 2.5rem;
-}
-.footer-contact-col {
-    display: flex;
+  .footer-contact-row {
     flex-direction: column;
     align-items: center;
-    gap: 0.2rem;
-}
-@media (max-width: 768px) {
-    .footer-contact-row {
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    .footer-contact-col {
-        gap: 0.2rem;
-        margin-bottom: 0.5rem;
-    }
-}
-.footer-contact-col-main .footer-title {
-    font-size: 1.45rem;
-    font-weight: 700;
-    color: #2563eb;
-    letter-spacing: 1px;
-    margin-bottom: 1.1rem;
-    position: relative;
-}
-.footer-contact-col-main .footer-title::after {
-    content: '';
-    display: block;
-    width: 38px;
-    height: 3px;
-    background: linear-gradient(90deg, #2563eb 60%, #1e2c44 100%);
-    border-radius: 2px;
-    margin: 0.4rem auto 0 auto;
-}
-
-
-/* For medium devices (768px - 991px) */
-@media (min-width: 768px) and (max-width: 991px) {
-    footer .container{
-        display: flex;
-        justify-content: center;
-    }
-    footer .row.align-items-start {
-        flex-direction: column;
-        align-items: center;
-        gap: 2.5rem;
-    }
-
-    .footer-logo-col,
-    .footer-links-col,
-    .footer-contact-col-main {
-        width: 100%;
-        max-width: 500px;
-        border: none;
-        padding: 0;
-        text-align: center;
-    }
-
-    .footer-logo-col , .footer-links-col  {
-        padding-bottom: 1.5rem;
-    }
-
-    .footer-contact-col-main {
-        padding-bottom: 0;
-    }
-
-    .footer-desc {
-        max-width: 100%;
-        padding: 0;
-    }
-
-    .footer-links {
-        align-items: center;
-    }
+    gap: 0.5rem;
+  }
+  .footer-contact-btn {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
 
-    .footer-contact-row {
-        justify-content: center;
-    }
-}
\ No newline at end of file
+  .contact-icons a{
+    margin-top: 10%;
+  }
+}
+/* ================== Footer Styles End Here ================== */
\ No newline at end of file

From 5d7c04a8a1105dae92738bebbf74508d2b9c3b99 Mon Sep 17 00:00:00 2001
From: notverifiedcode <101034581+Mrunalisa@users.noreply.github.com>
Date: Sat, 16 Aug 2025 20:21:56 +0530
Subject: [PATCH 2/2] feat(ui): add transition animations & theme color
 consistency for Hero Section buttons and About Us button

---
 index.html      |   2 +-
 styles/main.css | 107 +++++++++++++++++++++++++++++++++---------------
 2 files changed, 76 insertions(+), 33 deletions(-)

diff --git a/index.html b/index.html
index 7ab0213e..a701fbea 100644
--- a/index.html
+++ b/index.html
@@ -136,7 +136,7 @@ <h1 data-aos="fade-right" data-aos-duration="650">
               <button data-aos-duration="650" data-aos="fade-right" class="btn heroSectionBtn">
                 <i class="fa-solid fa-gear"></i> Code
               </button>
-              <button data-aos-duration="650" data-aos="fade-right" class="btn heroSectionBtn">
+              <button data-aos-duration="650" data-aos="fade-right" class="btn heroSectionBtn heroSectionBtnOutline ">
                 <i class="fa-solid fa-cloud"></i> Run
               </button>
             </div>
diff --git a/styles/main.css b/styles/main.css
index d5cb9820..a12f8bd0 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -247,22 +247,52 @@ nav {
 }
 
 .heroSectionBtn {
-    text-align: center;
-    padding: 7px 60px !important;
-    border-radius: 40px !important;
-    background: #2563eb !important;
-    color: white !important;
-    transition: all 0.2s ease-in-out;
+  text-align: center;
+  padding: 7px 60px !important;
+  border-radius: 40px !important;
+  background: #2563eb !important;
+  color: white !important;
+  border: 1px solid #2563eb !important;
+  transition: all 0.3s ease-in-out;
+  font-weight: 600;
+  cursor: pointer;
 }
 
 .heroSectionBtn:hover {
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-    background-color: #0b5ed7;
+  background: #ffffff !important;
+  box-shadow: 0 4px 12px rgba(11, 94, 215, 0.3);
+  transform: translateY(-2px);
+  color:#2563eb !important;
 }
 
-.heroSectionBtn i {
-    font-size: 14px;
-    margin-right: 5px;
+.heroSectionBtnOutline {
+  text-align: center;
+  padding: 7px 60px !important;
+  border-radius: 40px !important;
+  background: white !important;
+  color: #2563eb !important;
+  border: 1px solid #2563eb !important;
+  transition: all 0.3s ease-in-out;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.heroSectionBtnOutline:hover {
+  background: #2563eb !important;
+  color: white !important;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+  transform: translateY(-2px);
+}
+.heroSectionBtn i,
+.heroSectionBtnOutline i {
+  font-size: 14px;
+  margin-right: 5px;
+  transition: transform 0.2s ease-in-out;
+}
+
+.heroSectionBtn:hover i,
+.heroSectionBtnOutline:hover i {
+  transform: translateX(3px);
 }
 
 /* ================== Hero Styles End Here ================== */
@@ -492,33 +522,46 @@ nav {
 }
 
 .aboutCTA-Btn {
-    text-decoration: none;
-    font-weight: 700;
-    margin-top: 1.5rem;
-    display: inline-block;
+  position: relative;
+  display: inline-block;
   padding: 0.75rem 1.75rem;
-  background: linear-gradient(135deg, #28a745, #218838);
-  color: #fff;
   font-size: 1rem;
-  border-radius: 12px;
+  font-weight: 600;
+  color: #fff;
+  background: #0000ff;
+  border-radius: 25px;
+  border: none;
+  cursor: pointer;
   text-decoration: none;
-  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25);
-  transition: all 0.3s ease;
-
+  overflow: hidden;
+  z-index: 1;
+  transition: color 0.3s ease, transform 0.3s ease;
 }
+
 .aboutCTA-Btn:hover {
-  background: linear-gradient(135deg, #218838, #1e7e34);
-  transform: scale(1.05);
-  box-shadow: 0 8px 20px rgba(33, 136, 56, 0.4);
+  color: #0000ff;
+  transform: translateY(-2px);
+  border: 1px solid #0000ff;
 }
-@keyframes pulse {
-    0%, 100% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.03);
-    }
-  }
+
+.aboutCTA-Btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  transition: left 0.4s ease;
+  z-index: -1;
+}
+
+.aboutCTA-Btn:hover::before {
+  left: 0;
+}
+
+
+
 
 /* ================== About Styles End Here ================== */
 
