diff --git a/about us.html b/about us.html
index e0f11053..ed0d5d2a 100644
--- a/about us.html
+++ b/about us.html
@@ -29,12 +29,15 @@
top: 0;
left: 0;
right: 0;
- background: rgba(0, 0, 0, 0.95);
- backdrop-filter: blur(15px);
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
z-index: 1000;
padding: 1.2rem 0;
transform: translateY(-100%);
animation: slideDown 0.8s ease-out 0.3s forwards;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
@@ -68,7 +71,7 @@
}
.nav-links a {
- color: white;
+ color: rgb(16, 15, 15);
text-decoration: none;
font-weight: 500;
padding: 0.5rem 0;
diff --git a/home.css b/home.css
index 71e029e6..d599f099 100644
--- a/home.css
+++ b/home.css
@@ -19,13 +19,17 @@ body {
/* Navigation Styles */
.navbar {
- background: black;
+ background: rgba(149, 149, 149, 0.298);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ position: fixed;
}
.nav-container {
@@ -77,23 +81,28 @@ body {
.btn-login {
background: transparent;
- color: #ffd700;
- border: 2px solid #ffd700;
+ color: #db596f;
+ border: 2px solid #db596f;
+ transition: 0.3s ease-in-out;
}
.btn-login:hover {
- background: #ffd700;
- color: black;
+ background: #db596f;
+ color: white;
+ transform: scale(1.1);
}
.btn-signup {
background: #ff9933;
color: white;
+ border: 2px solid #ff9933;
+ transition: 0.3s ease-in-out;
}
.btn-signup:hover {
- background: #ffae42;
- transform: translateY(-2px);
+ background: white;
+ color: #ff9933;
+ transform: scale(1.06);
}
/* Navbar effect on scroll */
@@ -103,7 +112,7 @@ body {
.navbar.scrolled {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
- background-color: rgba(0, 0, 0, 0.85);
+ background-color: rgba(93, 93, 93, 0.377);
backdrop-filter: blur(10px);
}