diff --git a/css/footer.css b/css/footer.css
new file mode 100644
index 00000000..ed0f72a6
--- /dev/null
+++ b/css/footer.css
@@ -0,0 +1,55 @@
+/* Footer Styles */
+.footer-dark {
+  background-color: #1a2238;
+  color: #fff;
+}
+
+.footer-heading {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 1.5rem;
+  color: #ffc107;
+}
+
+.footer-link {
+  color: #c6cbe9;
+  text-decoration: none;
+  display: block;
+  margin-bottom: 0.5rem;
+  transition: color 0.3s ease;
+}
+
+.footer-link:hover {
+  color: yellow;
+}
+
+.footer-contact-info li {
+  color: #c6cbe9;
+  margin-bottom: 1rem;
+}
+
+.footer-contact-info li i {
+  color: #ffc107;
+}
+
+.social-icons-footer a {
+  display: inline-block;
+  color: #fff;
+  background-color: #ffc107;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  border-radius: 50%;
+  margin-right: 10px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.social-icons-footer a:hover {
+  background-color: #e0a800;
+  transform: translateY(-3px) scale(1.1);
+}
+
+hr {
+  border-color: rgba(255, 255, 255, 0.1);
+}
diff --git a/css/style.css b/css/style.css
index 3bdc7a2d..fee122f5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,33 +1,38 @@
-body {
-  font-family: 'Roboto', sans-serif;
+html, body {
+  height: 100%;
   margin: 0;
   padding: 0;
-  overflow-x: hidden;
+  font-family: 'Roboto', sans-serif;
+  overflow-x: hidden; /* Prevents horizontal scrolling */
 }
 
-* {
-  box-sizing: border-box;
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; /* Ensures the body always fills the viewport height */
 }
-body, html {
-  overflow-x: hidden;
-  overflow-y: auto;
-  height: auto !important;
+
+.main-content {
+  flex-grow: 1; /* This pushes the footer down by taking up all available space */
 }
 
+* {
+  box-sizing: border-box;
+}
 
 .custom-bg {
   background-color: #3D52A0;
   padding: 10px 0;
 }
+
 .navbar {
   position: sticky;
   top: 0;
   z-index: 999;
-  background: color #7091e6; /* optional */
+  background-color: #7091e6;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
-
-
 .navbar-brand {
   font-size: 24px;
   color: white;
@@ -38,22 +43,27 @@ body, html {
   transition: all 0.3s ease;
 }
 
-.nav-link:hover {
+.nav-link:hover,
+.dropdown-item:hover {
   color: #C6CBE9 !important;
+  background-color: #2f3f83 !important;
   transform: translateY(-2px);
 }
 
 .dropdown-menu {
   background-color: #3D52A0;
   border: none;
+  animation: fadeIn 0.3s ease-in-out;
 }
 
 .dropdown-item {
   color: white;
+  padding: 10px 15px;
 }
 
-.dropdown-item:hover {
-  background-color: #2f3f83;
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .whatsapp-btn {
@@ -65,11 +75,13 @@ body, html {
   font-size: 20px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.3);
 }
+
 .insta-icon {
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
   color: white;
   border: none;
 }
+
 .insta-icon:hover {
   opacity: 0.8;
 }
@@ -86,15 +98,21 @@ body, html {
 .slider-container {
   position: relative;
   width: 100%;
-  height: 100vh;
-  overflow: hidden;
-  margin-top: 0;
+  padding-top: 100px;
+  padding-right: 60px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
 
 .slider {
+  position: absolute;
   width: 100%;
   height: 100%;
-  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 1;
 }
 
 .slide {
@@ -102,6 +120,8 @@ body, html {
   height: 100%;
   object-fit: cover;
   position: absolute;
+  top: 0;
+  left: 0;
   opacity: 0;
   transition: opacity 1s ease-in-out;
 }
@@ -111,50 +131,41 @@ body, html {
 }
 
 .form-overlay {
-  position: absolute;
-  top: 58%;
-  right: 8%;
-  transform: translateY(-50%);
-  padding: 40px 30px;
+  position: relative;
+  z-index: 2;
+  padding: 30px 25px;
   border-radius: 12px;
   max-width: 420px;
+  width: 100%;
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
   color: #fff;
-  z-index: 10;
 }
 
-
- /* ✅ GLASSMORPHISM EFFECT - Updated */
-background: rgba(255, 255, 255, 0.1); /* Slightly more transparent */
-border-radius: 16px;
-backdrop-filter: blur(12px);
--webkit-backdrop-filter: blur(12px);
-border: 1px solid rgba(255, 255, 255, 0.2);
-box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-color: #ffffff;
-padding: 20px;
-
-
-
-
 .form-box h2 {
   margin-bottom: 20px;
 }
 
+.form-box label {
+  color: black;
+  font-weight: 500;
+  margin-bottom: 5px;
+}
+
 .form-box input,
 .form-box select,
 .form-box button {
   padding: 12px;
   border-radius: 6px;
   border: 1px solid #ccc;
+  color: black;
 }
 
 .form-box button {
-  background-color: #007bff;
+  background-color: #6f7d8c;
   border: none;
   color: white;
   cursor: pointer;
@@ -166,40 +177,215 @@ padding: 20px;
 }
 
 @media (max-width: 768px) {
-  .form-overlay {
-    position: static;
-    transform: none;
-    width: 90%;
-    margin: 20px auto;
+  .slider-container {
+    flex-direction: column;
+    padding-top: 0;
+    padding-right: 0;
+    height: auto;
   }
 
   .slider {
-    height: 500px;
+    position: relative;
+    height: 300px;
+    min-height: auto;
   }
-}
-@media (max-width: 768px) {
+
+  .slide {
+    height: 300px;
+    min-height: auto;
+  }
+
   .form-overlay {
-    position: static;
-    transform: none;
-    max-width: 100%;
-    margin: 20px auto;
+    position: relative;
+    margin: 40px auto 20px;
+    max-width: 95%;
+    width: 100%;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
     padding: 20px;
-  }
-
-  .hero {
-    flex-direction: column;
-    align-items: center;
+    z-index: 2;
   }
 
   .form-box input,
   .form-box select {
     width: 100%;
   }
+
+  .dropdown-menu {
+    position: absolute;
+    width: 100%;
+    border-radius: 0;
+  }
+}
+
+.error-message {
+  font-size: 0.75rem;
+  color: red;
+  line-height: 1.2;
+  margin-top: 4px;
+  display: block;
 }
 
+input:invalid + .error-message,
+select:invalid + .error-message {
+  display: block;
+}
 
+/* Footer Styles */
+.footer-dark {
+  background-color: #3D52A0;
+  color: #fff;
+}
+
+.footer-heading {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 1.5rem;
+  color: white;
+}
+
+.footer-link {
+  color: #c6cbe9;
+  text-decoration: none;
+  display: block;
+  margin-bottom: 0.5rem;
+  transition: color 0.3s ease;
+}
+
+.footer-link:hover {
+  color: darkblue;
+}
+
+.footer-contact-info li {
+  color: #c6cbe9;
+  margin-bottom: 1rem;
+}
+
+.footer-contact-info li i {
+  color: white;
+}
+
+.social-icons-footer a {
+  display: inline-block;
+  color: #fff;
+  background-color:;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  border-radius: 50%;
+  margin-right: 10px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.social-icons-footer a:hover {
+  background-color: darkblue;
+  transform: translateY(-3px) scale(1.1);
+}
+
+hr {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+
+.dark-blue-text {
+    color: #1a3c61;
+}
+
+.light-blue-text {
+    color: #5c97d0;
+}
+
+
+.section-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    text-align: center; 
+    padding-bottom: 50px;
+}
+
+/* Styles for the "Why Choose Leverage Edu?" section */
+.feature-item {
+    background-color: transparent;
+    border: none;
+    padding: 20px;
+}
+
+.feature-item h4 {
+    font-size: 1.25rem;
+    color: #1a3c61;
+}
+
+.feature-item:hover {
+    cursor: pointer;
+    transition: 1s ease;
+}
+
+/* Container for images in "Why Choose Leverage Edu?" */
+.icon-circle {
+    width: 60px;
+    height: 60px;
+    background-color: #e6f0fa;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #5c97d0;
+    font-size: 24px;
+}
+
+
+.icon-circle img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%; 
+}
+
+/* Styles for the "Leverage Edu Advantage" section */
+.advantage-card {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: pointer;
+}
+
+.advantage-card:hover {
+    transform: translateX(5px);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Styling for images in "Leverage Edu Advantage" cards */
+.advantage-image {
+    width: 30px;
+    height: 30px;
+}
+
+.advantage-card p {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #4b4b4b;
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+    .section-title {
+        font-size: 2rem;
+    }
+    .advantage-card {
+        flex-direction: row;
+        text-align: left;
+        padding: 20px;
+    }
+    .advantage-icon {
+        margin-bottom: 0;
+    }
+}
diff --git a/images/advantage-img1.png b/images/advantage-img1.png
new file mode 100644
index 00000000..d87e669b
Binary files /dev/null and b/images/advantage-img1.png differ
diff --git a/images/advantage-img2.png b/images/advantage-img2.png
new file mode 100644
index 00000000..fa1b18bc
Binary files /dev/null and b/images/advantage-img2.png differ
diff --git a/images/advantage-img3.png b/images/advantage-img3.png
new file mode 100644
index 00000000..06286a70
Binary files /dev/null and b/images/advantage-img3.png differ
diff --git a/images/advantage-img4.png b/images/advantage-img4.png
new file mode 100644
index 00000000..e502acf8
Binary files /dev/null and b/images/advantage-img4.png differ
diff --git a/images/advantage-img5.png b/images/advantage-img5.png
new file mode 100644
index 00000000..7b46ea8a
Binary files /dev/null and b/images/advantage-img5.png differ
diff --git a/images/advantage-img6.png b/images/advantage-img6.png
new file mode 100644
index 00000000..40e9f941
Binary files /dev/null and b/images/advantage-img6.png differ
diff --git a/images/chooseus-img1.png b/images/chooseus-img1.png
new file mode 100644
index 00000000..7d44ffbf
Binary files /dev/null and b/images/chooseus-img1.png differ
diff --git a/images/chooseus-img2.png b/images/chooseus-img2.png
new file mode 100644
index 00000000..95955060
Binary files /dev/null and b/images/chooseus-img2.png differ
diff --git a/images/chooseus-img3.png b/images/chooseus-img3.png
new file mode 100644
index 00000000..0cdbaeb7
Binary files /dev/null and b/images/chooseus-img3.png differ
diff --git a/images/chooseus-img4.png b/images/chooseus-img4.png
new file mode 100644
index 00000000..0477aa02
Binary files /dev/null and b/images/chooseus-img4.png differ
diff --git a/index.html b/index.html
index 1b076f21..0eb88766 100644
--- a/index.html
+++ b/index.html
@@ -1,81 +1,95 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>EduVeera</title>
 
-  <!-- Google Font -->
-  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
+  <!-- External Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
 
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
 
-  <!-- Font Awesome -->
+  <!-- Font Awesome for icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
 
-  <!-- External CSS -->
+  <!-- Custom Stylesheet -->
   <link rel="stylesheet" href="css/style.css" />
 </head>
+
 <body>
-  <!-- Header Nav Section -->
+  <!-- Navigation Bar -->
   <nav class="navbar navbar-expand-lg custom-bg sticky-top">
     <div class="container-fluid px-4 d-flex justify-content-between align-items-center">
-      <!-- Brand and Socials (Left on large, stacked on small) -->
       <div class="d-flex align-items-center">
         <a class="navbar-brand fw-bold text-white me-3" href="#">EduVeera</a>
-
-        <!-- Mobile Social Icons - next to brand -->
         <div class="d-lg-none d-flex align-items-center gap-2">
-          <a href="https://api.whatsapp.com/message/S6YUAO2AGXQRN1?autoload=1&app_absent=0" class="btn btn-success rounded-circle social-icon" target="_blank">
+          <a href="https://api.whatsapp.com/message/S6YUAO2AGXQRN1?autoload=1&app_absent=0"
+            class="btn btn-success rounded-circle social-icon" target="_blank">
             <i class="fab fa-whatsapp"></i>
           </a>
-          <a href="https://www.linkedin.com/company/eduveera/posts/?feedView=all" class="btn btn-primary rounded-circle social-icon" target="_blank">
+          <a href="https://www.linkedin.com/company/eduveera/posts/?feedView=all"
+            class="btn btn-primary rounded-circle social-icon" target="_blank">
             <i class="fab fa-linkedin-in"></i>
           </a>
-          <a href="https://www.instagram.com" class="btn rounded-circle social-icon insta-icon" target="_blank">
+          <a href="https://www.instagram.com/eduveera/" class="btn rounded-circle social-icon insta-icon"
+            target="_blank">
             <i class="fab fa-instagram"></i>
           </a>
         </div>
       </div>
-
-      <!-- Toggler -->
       <button class="navbar-toggler bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
         <span class="navbar-toggler-icon"></span>
       </button>
-
-      <!-- Nav Items + Desktop Icons -->
       <div class="collapse navbar-collapse justify-content-between" id="navbarNav">
         <ul class="navbar-nav ms-auto me-3 mb-2 mb-lg-0">
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Universities</a>
             <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="#">UK</a></li>
-              <li><a class="dropdown-item" href="#">USA</a></li>
-              <li><a class="dropdown-item" href="#">Canada</a></li>
+              <li><a class="dropdown-item" href="#">Amity University</a></li>
+              <li><a class="dropdown-item" href="#">Manipal University Jaipur</a></li>
+              <li><a class="dropdown-item" href="#">Sikkim Manipal University</a></li>
+              <li><a class="dropdown-item" href="#">MAHE</a></li>
+              <li><a class="dropdown-item" href="#">Lovely Professional University</a></li>
+              <li><a class="dropdown-item" href="#">Jain University</a></li>
+              <li><a class="dropdown-item" href="#">Sharda University</a></li>
+              <li><a class="dropdown-item" href="#">Uttaranchal University</a></li>
+              <li><a class="dropdown-item" href="#">Kurushetra University</a></li>
+              <li><a class="dropdown-item" href="#">D.Y Patil University</a></li>
+              <li><a class="dropdown-item" href="#">Vivekanand Global University</a></li>
+              <li><a class="dropdown-item" href="#">UPES University</a></li>
+              <li><a class="dropdown-item" href="#">GLA University</a></li>
+              <li><a class="dropdown-item" href="#">Vignan University</a></li>
+              <li><a class="dropdown-item" href="#">NMIMS University</a></li>
+              <li><a class="dropdown-item" href="#">Chandigarh University</a></li>
+              <li><a class="dropdown-item" href="#">Amrita University</a></li>
             </ul>
           </li>
-
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Courses</a>
             <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="#">Engineering</a></li>
-              <li><a class="dropdown-item" href="#">Medicine</a></li>
-              <li><a class="dropdown-item" href="#">Business</a></li>
+              <li><a class="dropdown-item" href="#">MBA</a></li>
+              <li><a class="dropdown-item" href="#">MCA</a></li>
+              <li><a class="dropdown-item" href="#">MA</a></li>
+              <li><a class="dropdown-item" href="#">BBA</a></li>
+              <li><a class="dropdown-item" href="#">BCA</a></li>
+              <li><a class="dropdown-item" href="#">B.COM</a></li>
+              <li><a class="dropdown-item" href="#">BA</a></li>
             </ul>
           </li>
-
           <li class="nav-item">
             <a class="nav-link" href="#">Blogs</a>
           </li>
         </ul>
-
-        <!-- Desktop Social Icons -->
         <div class="d-none d-lg-flex align-items-center gap-3">
-          <a href="https://api.whatsapp.com/message/S6YUAO2AGXQRN1?autoload=1&app_absent=0" class="btn btn-success rounded-circle social-icon" target="_blank">
+          <a href="https://api.whatsapp.com/message/S6YUAO2AGXQRN1?autoload=1&app_absent=0"
+            class="btn btn-success rounded-circle social-icon" target="_blank">
             <i class="fab fa-whatsapp"></i>
           </a>
-          <a href="https://www.linkedin.com" class="btn btn-primary rounded-circle social-icon" target="_blank">
+          <a href="https://www.linkedin.com/company/eduveera/posts/?feedView=all"
+            class="btn btn-primary rounded-circle social-icon" target="_blank">
             <i class="fab fa-linkedin-in"></i>
           </a>
           <a href="https://www.instagram.com" class="btn rounded-circle social-icon insta-icon" target="_blank">
@@ -86,85 +100,229 @@
     </div>
   </nav>
 
-  <!-- Hero Section with Slider and Form -->
-  <div class="slider-container">
-    <div class="slider">
-      <img src="images/img2.jpg" class="slide active" alt="Slide 1">
-      <img src="images/img3.jpg" class="slide" alt="Slide 2">
-      <img src="images/img4.jpg" class="slide" alt="Slide 3">
+  <!-- Main Content Section -->
+  <main class="main-content">
+    <div class="slider-container">
+      <div class="slider">
+        <!-- Image placeholders are used here. You will need to replace them with your own images (e.g., in an 'images' folder) -->
+        <img src="images/img2.jpg" class="slide active" alt="Slide 1">
+        <img src="images/img3.jpg" class="slide" alt="Slide 2">
+        <img src="images/img4.jpg" class="slide" alt="Slide 3">
+      </div>
+      <!-- Registration Form Overlay -->
+      <div class="form-overlay">
+        <form class="form-box">
+          <h2 class="form-title text-center" style="color: black;">Register Now</h2>
+          <input type="text" placeholder="NAME" class="form-control mb-3">
+          <input type="email" placeholder="EMAIL" class="form-control mb-3">
+          <div class="form-group mb-3">
+            <label for="country-code" class="form-label">Phone Number</label>
+            <div class="input-group">
+              <div class="dropdown">
+                <button class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center" type="button"
+                  id="countryDropdown" data-bs-toggle="dropdown">
+                  <img src="https://flagcdn.com/w40/in.png" alt="IN" class="me-2" style="width: 20px;"> +91
+                </button>
+                <ul class="dropdown-menu" id="countryList">
+                  <li><a class="dropdown-item d-flex align-items-center" data-code="+91" data-flag="in"><img
+                        src="https://flagcdn.com/w40/in.png" style="width: 20px;" class="me-2">India (+91)</a></li>
+                </ul>
+              </div>
+              <input type="tel" class="form-control" placeholder="Phone Number">
+            </div>
+          </div>
+          <label for="dob" class="form-label">Date of Birth</label>
+          <input type="date" id="dob" name="dob" class="form-control mb-3">
+          <label for="university" class="form-label">Select University</label>
+          <select id="university" name="university" class="form-select mb-3">
+            <option value="" disabled selected>Select your university</option>
+            <option value="oxford">Amity University</option>
+            <option value="cambridge">Manipal University Jaipur</option>
+            <option value="harvard">Sikkim Manipal University</option>
+            <option value="stanford">MAHE</option>
+            <option value="mit">Lovely Professional University</option>
+            <option value="toronto">Jain University</option>
+            <option value="melbourne">Sharda University</option>
+            <option value="melbourne">Uttaranchal University</option>
+            <option value="melbourne">Kurushetra University</option>
+            <option value="melbourne">D.Y Patil University</option>
+            <option value="melbourne">Vivekanand Global University</option>
+            <option value="melbourne">UPES University</option>
+            <option value="melbourne">GLA University</option>
+            <option value="melbourne">Vignan University</option>
+            <option value="melbourne">NMIMS University</option>
+            <option value="melbourne">Chandigarh University</option>
+            <option value="melbourne">Amrita University</option>
+          </select>
+          <label for="course" class="form-label">Select Course</label>
+          <select id="course" name="course" class="form-select mb-3">
+            <option value="" disabled selected>Select your course</option>
+            <option value="frontend">MBA</option>
+            <option value="backend">MCA</option>
+            <option value="fullstack">M.COM</option>
+            <option value="data-science">MA</option>
+            <option value="ai">BBA</option>
+            <option value="cloud">BCA</option>
+            <option value="uiux">BCOM</option>
+            <option value="uiux">BA</option>
+          </select>
+          <button type="submit" class="btn btn-primary w-100">Submit</button>
+        </form>
+      </div>
     </div>
+  </main>
 
-    <div class="form-overlay">
-      <form class="form-box">
-        <h2 class="form-title text-center" style="color: black;">Register Now</h2>
-        <input type="text" placeholder="Name" class="form-control mb-3" required>
-        <input type="email" placeholder="Email" class="form-control mb-3" required>
+   <!-- "Why Choose Leverage Edu?" section -->
+    <div class="container my-5">
+        <h2 class="section-title">
+            <!-- Applying the color classes to the title text -->
+            <span class="dark-blue-text">Why Choose</span>
+            <span class="light-blue-text">Eduveera?</span>
+        </h2>
 
-        <div class="form-group mb-3">
-          <label for="country-code" class="form-label">Phone Number</label>
-          <div class="input-group">
-            <div class="dropdown">
-              <button class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center" type="button" id="countryDropdown" data-bs-toggle="dropdown">
-                <img src="https://flagcdn.com/w40/in.png" alt="IN" class="me-2" style="width: 20px;"> +91
-              </button>
-              <ul class="dropdown-menu" id="countryList">
-                <li><a class="dropdown-item d-flex align-items-center" data-code="+91" data-flag="in"><img src="https://flagcdn.com/w40/in.png" style="width: 20px;" class="me-2">India (+91)</a></li>
-                <li><a class="dropdown-item d-flex align-items-center" data-code="+1" data-flag="us"><img src="https://flagcdn.com/w40/us.png" style="width: 20px;" class="me-2">USA (+1)</a></li>
-                <li><a class="dropdown-item d-flex align-items-center" data-code="+44" data-flag="gb"><img src="https://flagcdn.com/w40/gb.png" style="width: 20px;" class="me-2">UK (+44)</a></li>
-                <li><a class="dropdown-item d-flex align-items-center" data-code="+971" data-flag="ae"><img src="https://flagcdn.com/w40/ae.png" style="width: 20px;" class="me-2">UAE (+971)</a></li>
-              </ul>
+        <div class="row text-center justify-content-center mt-4">
+            <div class="col-lg-3 col-md-6 mb-4">
+                <div class="feature-item p-4">
+                    <div class="icon-circle mx-auto mb-3">
+                        <!-- Replaced icon with image -->
+                        <img src="./images/chooseus-img1.png" alt="University Partners icon">
+                    </div>
+                    <h4>850+ University Partners</h4>
+                </div>
+            </div>
+            <div class="col-lg-3 col-md-6 mb-4">
+                <div class="feature-item p-4">
+                    <div class="icon-circle mx-auto mb-3">
+                        <!-- Replaced icon with image -->
+                        <img src="./images/chooseus-img2.png" alt="Success Stories icon">
+                    </div>
+                    <h4>45,000+ Success Stories</h4>
+                </div>
+            </div>
+            <div class="col-lg-3 col-md-6 mb-4">
+                <div class="feature-item p-4">
+                    <div class="icon-circle mx-auto mb-3">
+                        <!-- Replaced icon with image -->
+                        <img src="./images/chooseus-img3.png" alt="Scholarship icon">
+                    </div>
+                    <h4>Scholarship up to 50%*</h4>
+                </div>
+            </div>
+            <div class="col-lg-3 col-md-6 mb-4">
+                <div class="feature-item p-4">
+                    <div class="icon-circle mx-auto mb-3">
+                        <!-- Replaced icon with image -->
+                        <img src="./images/chooseus-img4.png" alt="Courses icon">
+                    </div>
+                    <h4>Courses starting at ₹8 Lakhs*</h4>
+                </div>
             </div>
-            <input type="tel" class="form-control" placeholder="Phone Number" required>
-          </div>
         </div>
+    </div>
 
-        <label for="dob" class="form-label">Date of Birth</label>
-        <input type="date" id="dob" name="dob" class="form-control mb-3" required>
-
-        <label for="university" class="form-label">Select University</label>
-        <select id="university" name="university" class="form-select mb-3" required>
-          <option value="" disabled selected>Select your university</option>
-          <option value="oxford">Amity University</option>
-          <option value="cambridge">Manipal University Jaipur</option>
-          <option value="harvard">Sikkim Manipal University</option>
-          <option value="stanford">MAHE</option>
-          <option value="mit">Lovely Professional University</option>
-          <option value="toronto">Jain University</option>
-          <option value="melbourne">Sharda University</option>
-          <option value="melbourne">Uttaranchal University</option>
-          <option value="melbourne">Kurushetra University</option>
-          <option value="melbourne">D.Y Patil University</option>
-          <option value="melbourne">Vivekanand Global University</option>
-          <option value="melbourne">UPES University</option>
-          <option value="melbourne">GLA University</option>
-          <option value="melbourne">Vignan University</option>
-          <option value="melbourne">NMIMS University</option>
-          <option value="melbourne">Chandigarh University</option>
-          <option value="melbourne">Amrita University</option>
-        </select>
-
-        <label for="course" class="form-label">Select Course</label>
-        <select id="course" name="course" class="form-select mb-3" required>
-          <option value="" disabled selected>Select your course</option>
-          <option value="frontend">MBA</option>
-          <option value="backend">MCA</option>
-          <option value="fullstack">M.COM</option>
-          <option value="data-science">MA</option>
-          <option value="ai">BBA</option>
-          <option value="cloud">BCA</option>
-          <option value="uiux">BCOM</option>
-          <option value="uiux">BA</option>
-        </select>
+    <!-- "Leverage Edu Advantage" section -->
+    <div class="container my-5">
+        <h2 class="section-title">
+            <!-- Applying the color classes to the title text -->
+            <span class="dark-blue-text">EduVeera</span>
+            <span class="light-blue-text">Advantage</span>
+        </h2>
 
-        <button type="submit" class="btn btn-primary w-100">Submit</button>
-      </form>
+        <div class="row mt-4">
+            <div class="col-lg-4 col-md-6 mb-4">
+                <div class="advantage-card p-3 d-flex align-items-center gap-3">
+                    <!-- Replaced icon with image -->
+                    <img src="./images/advantage-img1.png" alt="Program Finder icon" class="advantage-image">
+                    <p class="m-0">Finding the Program That’s Right for You</p>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 mb-4">
+                <div class="advantage-card p-3 d-flex align-items-center gap-3">
+                    <!-- Replaced icon with image -->
+                    <img src="./images/advantage-img2.png" alt="Expert Assistance icon" class="advantage-image">
+                    <p class="m-0">Curated Expert-led Application Assistance</p>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 mb-4">
+                <div class="advantage-card p-3 d-flex align-items-center gap-3">
+                    <!-- Replaced icon with image -->
+                    <img src="./images/advantage-img3.png" class="advantage-image">
+                    <p class="m-0">English Assessment Test Prep On-the-go</p>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 mb-4">
+                <div class="advantage-card p-3 d-flex align-items-center gap-3">
+                    <!-- Replaced icon with image -->
+                    <img src="./images/advantage-img4.png" class="advantage-image">
+                    <p class="m-0">Hacking thy Interviews & the All-important VISA</p>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 mb-4">
+                <div class="advantage-card p-3 d-flex align-items-center gap-3">
+                    <!-- Replaced icon with image -->
+                    <img src="./images/advantage-img5.png" alt="Financial Aid icon" class="advantage-image">
+                    <p class="m-0">Solving for Money Money Money!</p>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 mb-4">
+                <div class="advantage-card p-3 d-flex align-items-center gap-3">
+                    <!-- Replaced icon with image -->
+                    <img src="./images/advantage-img6.png" alt="Stay Well icon" class="advantage-image">
+                    <p class="m-0">Making Sure You Stay Right, And Stay Well</p>
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
+  <!-- Footer -->
+  <footer class="footer-dark text-white pt-5 pb-4">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-4 col-md-6 mb-4">
+          <h5 class="footer-heading">Quick Links</h5>
+          <ul class="list-unstyled">
+            <li><a href="#" class="footer-link">Home</a></li>
+            <li><a href="#" class="footer-link">About Us</a></li>
+            <li><a href="#" class="footer-link">Contact</a></li>
+            <li><a href="#" class="footer-link">Blogs</a></li>
+          </ul>
+        </div>
+        <div class="col-lg-4 col-md-6 mb-4">
+          <h5 class="footer-heading">Services</h5>
+          <ul class="list-unstyled">
+            <li><a href="#" class="footer-link">MBA</a></li>
+            <li><a href="#" class="footer-link">BBA</a></li>
+            <li><a href="#" class="footer-link">B.Com</a></li>
+            <li><a href="#" class="footer-link">Online Courses</a></li>
+          </ul>
+        </div>
+        <div class="col-lg-4 col-md-12 mb-4">
+          <h5 class="footer-heading">Contact Info</h5>
+          <ul class="list-unstyled footer-contact-info">
+            <li><i class="fa-solid fa-envelope me-2"></i>info@eduveera.com</li>
+            <li><i class="fa-solid fa-phone me-2"></i>+91 99999 99999</li>
+            <li><i class="fa-solid fa-location-dot me-2"></i>123 EduVeera Lane, Knowledge City, India</li>
+          </ul>
+          <div class="social-icons-footer mt-4">
+            <a href="https://www.linkedin.com/company/eduveera/" target="_blank" class="social-icon-btn"><i
+                class="fab fa-linkedin-in"></i></a>
+            <a href="https://api.whatsapp.com/message/" target="_blank" class="social-icon-btn"><i
+                class="fab fa-whatsapp"></i></a>
+            <a href="https://www.instagram.com/eduveera/" target="_blank" class="social-icon-btn"><i
+                class="fab fa-instagram"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr class="mt-0" />
+      <div class="row mt-3">
+        <div class="col-12 text-center">
+          <p class="mb-0">&copy; 2025 <strong>EduVeera</strong>. All Rights Reserved.</p>
+        </div>
+      </div>
+    </div>
+  </footer>
 
-  <!-- Bootstrap Bundle JS -->
+  <!-- Bootstrap and Custom Scripts -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-
-  <!-- Slider JS -->
   <script>
     let slides = document.querySelectorAll(".slide");
     let index = 0;
@@ -175,18 +333,42 @@ <h2 class="form-title text-center" style="color: black;">Register Now</h2>
     }
     setInterval(showNextSlide, 3000);
   </script>
-
-  <!-- Country Code Update -->
   <script>
     document.querySelectorAll('#countryList .dropdown-item').forEach(item => {
       item.addEventListener('click', function () {
         const code = this.getAttribute('data-code');
         const flag = this.getAttribute('data-flag');
-        document.getElementById('countryDropdown').innerHTML = `
-          <img src="https://flagcdn.com/w40/${flag}.png" style="width: 20px;" class="me-2"> ${code}
-        `;
+        document.getElementById('countryDropdown').innerHTML =
+          `<img src="https://flagcdn.com/w40/${flag}.png" style="width: 20px;" class="me-2"> ${code}`;
       });
     });
   </script>
+  <script>
+    document.querySelector('.form-box').addEventListener('submit', function (e) {
+      const form = this;
+      const fields = [
+        { selector: 'input[type="text"]', message: 'Name is required.' },
+        { selector: 'input[type="email"]', message: 'Email is required.' },
+        { selector: 'input[type="tel"]', message: 'Phone number is required.' },
+        { selector: 'input[type="date"]', message: 'Date of birth is required.' },
+        { selector: 'select[name="university"]', message: 'Please select your university.' },
+        { selector: 'select[name="course"]', message: 'Please select your course.' }
+      ];
+      form.querySelectorAll('.error-message').forEach(el => el.remove());
+      let isValid = true;
+      fields.forEach(field => {
+        const input = form.querySelector(field.selector);
+        if (!input.value.trim()) {
+          isValid = false;
+          const error = document.createElement('div');
+          error.classList.add('error-message');
+          error.textContent = field.message;
+          input.parentNode.insertBefore(error, input.nextSibling);
+        }
+      });
+      if (!isValid) e.preventDefault();
+    });
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file