v1.1

assets/css/custom.css

@@ -148,3 +148,42 @@ body {
 .footer a:hover {
     color: var(--golden-yellow);
 }
+
+
+/* Responsive Adjustments */
+@media (max-width: 991.98px) {
+    .navbar.bg-transparent {
+        background-color: var(--navy-blue-darker) !important;
+    }
+    .navbar-collapse {
+        padding: 1rem 0;
+    }
+    .navbar-nav .btn {
+        width: 100%;
+        text-align: center;
+    }
+}
+
+@media (max-width: 767.98px) {
+    .hero {
+        padding: 6rem 0;
+    }
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+    .hero p {
+        font-size: 1.1rem;
+    }
+}
+
+@media (max-width: 575.98px) {
+    .hero h1 {
+        font-size: 2.2rem;
+    }
+    .join-us-section {
+        padding: 3rem 0;
+    }
+    .role-card {
+        margin-bottom: 1rem;
+    }
+}

index.php

@@ -34,9 +34,12 @@
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav ms-auto">
+                <ul class="navbar-nav ms-auto align-items-center">
+                    <li class="nav-item mb-2 mb-lg-0 me-lg-2">
+                        <a class="btn btn-outline-golden px-3" href="#">Login</a>
+                    </li>
                     <li class="nav-item">
-                        <a class="nav-link btn btn-outline-golden px-3" href="#">Login</a>
+                        <a class="btn btn-golden px-3" href="#">Register</a>
                     </li>
                 </ul>
             </div>