diff --git a/index.html b/index.html
index aa1af94..4f9e2f2 100644
--- a/index.html
+++ b/index.html
@@ -8,99 +8,164 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
         :root {
-            --primary-dark: #0a0e17;
+            --primary-dark: #1a1f2c;
             --primary-light: #ffffff;
-            --accent-gray: #3a3a3a;
-            --accent-silver: #e0e0e0;
+            --accent-color: #2c3e50;
+            --accent-hover: #34495e;
+            --text-light: #f8f9fa;
+            --text-dark: #2c3e50;
+            --gradient-start: #2c3e50;
+            --gradient-end: #3498db;
         }
         
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: var(--primary-light);
-            color: var(--primary-dark);
+            background-color: #f8f9fa;
+            color: var(--text-dark);
             line-height: 1.6;
         }
         
         .header {
-            background-color: var(--primary-dark);
-            color: var(--primary-light);
-            padding: 2rem 0;
+            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+            color: var(--text-light);
+            padding: 4rem 0;
             text-align: center;
-            margin-bottom: 3rem;
+            margin-bottom: 4rem;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg') center/cover;
+            opacity: 0.1;
+            z-index: 0;
+        }
+        
+        .header .container {
+            position: relative;
+            z-index: 1;
         }
         
         .header h1 {
             font-weight: 800;
-            letter-spacing: 5px;
+            letter-spacing: 8px;
             margin-bottom: 0;
+            font-size: 3.5rem;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
         }
         
         .header h2 {
-            font-size: 1.2rem;
-            letter-spacing: 3px;
+            font-size: 1.4rem;
+            letter-spacing: 4px;
             font-weight: 400;
-            margin-bottom: 1rem;
+            margin-bottom: 1.5rem;
+            text-transform: uppercase;
         }
         
         .version-card {
-            border: 1px solid #e9e9e9;
-            border-radius: 5px;
+            background: var(--primary-light);
+            border: none;
+            border-radius: 15px;
             overflow: hidden;
-            transition: all 0.3s ease;
+            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
             height: 100%;
             margin-bottom: 2rem;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
         }
         
         .version-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
         }
         
         .version-img {
-            height: 200px;
+            height: 250px;
             background-size: cover;
-            background-position: top center;
-            border-bottom: 1px solid #e9e9e9;
+            background-position: center;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .version-img::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 50%;
+            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
         }
         
         .version-content {
-            padding: 1.5rem;
+            padding: 2rem;
+            position: relative;
         }
         
         .version-content h3 {
-            margin-bottom: 1rem;
+            margin-bottom: 1.5rem;
             font-weight: 700;
+            color: var(--accent-color);
+            font-size: 1.8rem;
+        }
+        
+        .version-content p {
+            color: #666;
+            margin-bottom: 1.5rem;
         }
         
         .btn-view {
-            background-color: var(--primary-dark);
-            color: var(--primary-light);
+            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+            color: var(--text-light);
             border: none;
-            padding: 10px 20px;
-            border-radius: 0;
+            padding: 12px 25px;
+            border-radius: 30px;
             text-transform: uppercase;
             font-weight: 600;
             letter-spacing: 1px;
             transition: all 0.3s ease;
             display: inline-block;
             margin-top: 1rem;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .btn-view::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: 0.5s;
         }
         
         .btn-view:hover {
-            background-color: var(--accent-gray);
-            color: var(--primary-light);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        }
+        
+        .btn-view:hover::before {
+            left: 100%;
         }
         
         .footer {
-            background-color: var(--primary-dark);
-            color: var(--primary-light);
-            padding: 2rem 0;
+            background: var(--primary-dark);
+            color: var(--text-light);
+            padding: 3rem 0;
             text-align: center;
-            margin-top: 3rem;
+            margin-top: 4rem;
         }
         
         .footer p {
             margin-bottom: 0;
+            opacity: 0.8;
         }
         
         .version-1-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
@@ -108,6 +173,20 @@
         .version-3-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
         .version-4-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
         .version-5-img { background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg'); }
+
+        @media (max-width: 768px) {
+            .header {
+                padding: 3rem 0;
+            }
+            
+            .header h1 {
+                font-size: 2.5rem;
+            }
+            
+            .version-card {
+                margin-bottom: 1.5rem;
+            }
+        }
     </style>
 </head>
 <body>
diff --git a/index6.html b/index6.html
index 0809eb9..2e4214c 100644
--- a/index6.html
+++ b/index6.html
@@ -6,7 +6,7 @@
     <title>JPM Security & Services</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style6.css">
 </head>
 <body>
     <!-- Navigation -->
diff --git a/style2.css b/style2.css
index ab73587..4781d52 100644
--- a/style2.css
+++ b/style2.css
@@ -4,13 +4,15 @@
 */
 
 :root {
-    --primary-dark: #0a0e17; /* Dark navy/black from the card */
-    --primary-light: #ffffff; /* White/silver from the card */
-    --accent-gray: #3a3a3a; /* Gray from the card borders */
-    --accent-silver: #e0e0e0; /* Lighter silver for accents */
-    --text-dark: #333333;
+    --primary-dark: #1a1f2c;
+    --primary-light: #ffffff;
+    --accent-color: #3498db;
+    --accent-hover: #2980b9;
+    --text-dark: #2c3e50;
     --text-light: #f8f9fa;
     --side-nav-width: 280px;
+    --gradient-start: #2c3e50;
+    --gradient-end: #3498db;
 }
 
 /* General Styles */
@@ -48,7 +50,7 @@ section {
 }
 
 .btn-primary {
-    background-color: var(--primary-dark);
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     border: none;
     color: var(--primary-light);
     padding: 12px 30px;
@@ -56,13 +58,29 @@ section {
     letter-spacing: 1px;
     text-transform: uppercase;
     transition: all 0.3s ease;
-    border-radius: 0;
+    border-radius: 30px;
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-primary::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: 0.5s;
 }
 
 .btn-primary:hover {
-    background-color: var(--accent-gray);
     transform: translateY(-3px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.btn-primary:hover::before {
+    left: 100%;
 }
 
 /* Side Navigation */
@@ -72,33 +90,41 @@ section {
     left: 0;
     width: var(--side-nav-width);
     height: 100vh;
-    background-color: var(--primary-dark);
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     color: var(--primary-light);
     padding: 40px 30px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     z-index: 1000;
+    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
 }
 
 .logo-container {
     margin-bottom: 60px;
+    position: relative;
+    overflow: hidden;
 }
 
 .logo-text {
     font-size: 2.5rem;
     font-weight: 800;
     letter-spacing: 5px;
+    position: relative;
+    z-index: 1;
 }
 
 .logo-subtext {
     font-size: 0.8rem;
     letter-spacing: 2px;
     opacity: 0.8;
+    position: relative;
+    z-index: 1;
 }
 
 .side-nav nav ul li {
     margin-bottom: 20px;
+    position: relative;
 }
 
 .side-nav nav ul li a {
@@ -108,11 +134,13 @@ section {
     padding: 8px 0;
     position: relative;
     opacity: 0.7;
+    transition: all 0.3s ease;
 }
 
 .side-nav nav ul li a:hover,
 .side-nav nav ul li a.active {
     opacity: 1;
+    transform: translateX(10px);
 }
 
 .side-nav nav ul li a::after {
@@ -150,11 +178,29 @@ section {
     border-radius: 50%;
     margin-right: 10px;
     transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.social-icon::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: 0.5s;
 }
 
 .social-icon:hover {
     background-color: var(--primary-light);
     color: var(--primary-dark);
+    transform: translateY(-3px);
+}
+
+.social-icon:hover::before {
+    left: 100%;
 }
 
 .nav-footer p {
@@ -170,8 +216,9 @@ section {
     left: 0;
     width: 100%;
     z-index: 1000;
-    background-color: var(--primary-dark);
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     color: var(--primary-light);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .mobile-nav-header {
@@ -188,6 +235,7 @@ section {
     height: 20px;
     position: relative;
     cursor: pointer;
+    transition: all 0.3s ease;
 }
 
 .menu-toggle span {
@@ -230,15 +278,26 @@ section {
 .mobile-menu {
     display: none;
     padding: 20px 0;
-    background-color: var(--primary-dark);
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    transform: translateY(-100%);
+    transition: transform 0.3s ease;
 }
 
 .mobile-menu.active {
     display: block;
+    transform: translateY(0);
 }
 
 .mobile-menu nav ul li {
     margin-bottom: 15px;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.3s ease;
+}
+
+.mobile-menu.active nav ul li {
+    opacity: 1;
+    transform: translateY(0);
 }
 
 .mobile-menu nav ul li a {
@@ -246,6 +305,11 @@ section {
     padding: 10px 0;
     font-size: 1.1rem;
     font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.mobile-menu nav ul li a:hover {
+    transform: translateX(10px);
 }
 
 .mobile-social-links {
diff --git a/style3.css b/style3.css
index f042bc9..92596e2 100644
--- a/style3.css
+++ b/style3.css
@@ -1,15 +1,17 @@
 /* 
 * JPM Security & Services - Style 3
-* A modern, full-screen design with parallax effects
+* A modern design with parallax effects and animations
 */
 
 :root {
-    --primary-dark: #0a0e17; /* Dark navy/black from the card */
-    --primary-light: #ffffff; /* White/silver from the card */
-    --accent-gray: #3a3a3a; /* Gray from the card borders */
-    --accent-silver: #e0e0e0; /* Lighter silver for accents */
-    --text-dark: #333333;
+    --primary-dark: #1a1f2c;
+    --primary-light: #ffffff;
+    --accent-color: #3498db;
+    --accent-hover: #2980b9;
+    --text-dark: #2c3e50;
     --text-light: #f8f9fa;
+    --gradient-start: #2c3e50;
+    --gradient-end: #3498db;
 }
 
 /* General Styles */
@@ -95,7 +97,7 @@ section {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--primary-dark);
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     display: flex;
     justify-content: center;
     align-items: center;
@@ -108,107 +110,114 @@ section {
     visibility: hidden;
 }
 
-.preloader .logo-container {
-    animation: pulse 1.5s infinite;
+.logo-container {
+    position: relative;
+    width: 150px;
+    height: 150px;
+    animation: pulse 2s infinite;
 }
 
-.preloader .logo-text {
-    font-size: 4rem;
+.logo-text {
+    font-size: 3rem;
     font-weight: 800;
-    letter-spacing: 8px;
     color: var(--primary-light);
+    text-align: center;
+    position: relative;
+    z-index: 1;
+}
+
+.logo-container::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    animation: ripple 2s infinite;
 }
 
 @keyframes pulse {
     0% {
         transform: scale(1);
-        opacity: 1;
     }
     50% {
         transform: scale(1.1);
-        opacity: 0.8;
     }
     100% {
         transform: scale(1);
-        opacity: 1;
+    }
+}
+
+@keyframes ripple {
+    0% {
+        width: 0;
+        height: 0;
+        opacity: 0.5;
+    }
+    100% {
+        width: 200%;
+        height: 200%;
+        opacity: 0;
     }
 }
 
 /* Navigation */
 .navbar {
-    padding: 20px 0;
-    transition: all 0.4s ease;
-    background-color: transparent;
+    background: rgba(26, 31, 44, 0.95);
+    backdrop-filter: blur(10px);
+    padding: 1rem 0;
+    transition: all 0.3s ease;
 }
 
 .navbar.scrolled {
-    background-color: var(--primary-dark);
-    padding: 15px 0;
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+    padding: 0.5rem 0;
+    background: rgba(26, 31, 44, 0.98);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .navbar-brand {
-    font-weight: 800;
     font-size: 1.8rem;
-}
-
-.brand-text {
+    font-weight: 800;
     color: var(--primary-light);
-    letter-spacing: 3px;
+    letter-spacing: 2px;
 }
 
-.navbar-toggler {
-    border: none;
-    padding: 0;
-}
-
-.navbar-toggler:focus {
-    box-shadow: none;
-}
-
-.navbar-toggler-icon {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-
-.navbar-nav .nav-link {
-    color: var(--primary-light);
+.nav-link {
+    color: var(--primary-light) !important;
     font-weight: 500;
-    padding: 10px 15px;
+    padding: 0.5rem 1rem !important;
     position: relative;
+    transition: all 0.3s ease;
 }
 
-/* Fix for active navigation link */
-.navbar-nav .nav-link.active {
-    color: var(--primary-light);
-    background-color: rgba(10, 14, 23, 0.7);
-}
-
-.navbar-nav .nav-link::after {
+.nav-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     width: 0;
     height: 2px;
-    background-color: var(--primary-light);
+    background: var(--accent-color);
     transition: all 0.3s ease;
     transform: translateX(-50%);
 }
 
-.navbar-nav .nav-link:hover::after,
-.navbar-nav .nav-link.active::after {
+.nav-link:hover::after,
+.nav-link.active::after {
     width: 30px;
 }
 
 /* Hero Section */
 .hero-section {
     height: 100vh;
-    background-color: var(--primary-dark);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     position: relative;
     overflow: hidden;
+    display: flex;
+    align-items: center;
 }
 
 .hero-section::before {
@@ -218,14 +227,12 @@ section {
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
-    background-size: cover;
-    background-position: center;
+    background: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg') center/cover;
     opacity: 0.2;
-    animation: scale 20s infinite alternate;
+    animation: zoom 20s infinite alternate;
 }
 
-@keyframes scale {
+@keyframes zoom {
     0% {
         transform: scale(1);
     }
@@ -237,50 +244,35 @@ section {
 .hero-content {
     position: relative;
     z-index: 1;
-    text-align: center;
-    color: var(--primary-light);
-}
-
-.hero-logo {
-    width: 120px;
-    height: 120px;
-    margin: 0 auto 30px;
-    background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    filter: brightness(0) invert(1);
 }
 
 .hero-title {
-    font-size: 5rem;
+    font-size: 4rem;
     font-weight: 800;
-    letter-spacing: 10px;
-    margin-bottom: 0;
+    color: var(--primary-light);
+    margin-bottom: 1rem;
     opacity: 0;
     transform: translateY(30px);
-    animation: fadeInUp 1s forwards 0.5s;
+    animation: fadeInUp 1s ease forwards;
 }
 
 .hero-subtitle {
     font-size: 1.5rem;
-    letter-spacing: 5px;
-    margin-bottom: 30px;
-    font-weight: 400;
+    color: var(--primary-light);
+    opacity: 0.8;
+    margin-bottom: 2rem;
     opacity: 0;
     transform: translateY(30px);
-    animation: fadeInUp 1s forwards 0.7s;
+    animation: fadeInUp 1s ease 0.2s forwards;
 }
 
 .hero-text {
     font-size: 1.2rem;
-    margin-bottom: 40px;
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
+    color: var(--primary-light);
+    margin-bottom: 2rem;
     opacity: 0;
     transform: translateY(30px);
-    animation: fadeInUp 1s forwards 0.9s;
+    animation: fadeInUp 1s ease 0.4s forwards;
 }
 
 @keyframes fadeInUp {
@@ -290,59 +282,66 @@ section {
     }
 }
 
+/* Scroll Down Animation */
 .scroll-down {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 2;
+    animation: bounce 2s infinite;
 }
 
 .scroll-down a {
-    display: inline-block;
+    display: block;
     width: 30px;
     height: 50px;
+    border: 2px solid var(--primary-light);
+    border-radius: 15px;
     position: relative;
 }
 
-.scroll-down span {
+.scroll-down a span {
     position: absolute;
-    top: 0;
+    top: 8px;
     left: 50%;
-    width: 24px;
-    height: 24px;
-    margin-left: -12px;
-    border-left: 2px solid var(--primary-light);
-    border-bottom: 2px solid var(--primary-light);
-    transform: rotate(-45deg);
+    width: 6px;
+    height: 6px;
+    margin-left: -3px;
+    background-color: var(--primary-light);
+    border-radius: 50%;
     animation: scrollDown 2s infinite;
-    opacity: 0;
-    box-sizing: border-box;
 }
 
-.scroll-down span:nth-of-type(1) {
-    animation-delay: 0s;
+.scroll-down a span:nth-child(2) {
+    top: 20px;
+    animation-delay: 0.2s;
 }
 
-.scroll-down span:nth-of-type(2) {
-    top: 16px;
-    animation-delay: 0.15s;
-}
-
-.scroll-down span:nth-of-type(3) {
+.scroll-down a span:nth-child(3) {
     top: 32px;
-    animation-delay: 0.3s;
+    animation-delay: 0.4s;
 }
 
 @keyframes scrollDown {
     0% {
-        opacity: 0;
-    }
-    50% {
         opacity: 1;
+        transform: translateY(0);
     }
     100% {
         opacity: 0;
+        transform: translateY(10px);
+    }
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-20px);
+    }
+    60% {
+        transform: translateY(-10px);
     }
 }
 
@@ -411,23 +410,18 @@ section {
 
 /* Services Section */
 .services-section {
+    padding: 100px 0;
     background-color: var(--primary-light);
-    padding: 120px 0;
-}
-
-.services-container {
-    margin-top: 50px;
 }
 
 .service-box {
-    background-color: #f8f9fa;
-    padding: 40px 30px;
-    border-radius: 5px;
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
+    background: var(--primary-light);
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     height: 100%;
     position: relative;
-    z-index: 1;
     overflow: hidden;
 }
 
@@ -437,80 +431,80 @@ section {
     top: 0;
     left: 0;
     width: 100%;
-    height: 0;
-    background-color: var(--primary-dark);
-    transition: all 0.5s ease;
-    z-index: -1;
-}
-
-.service-box:hover::before {
     height: 100%;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    opacity: 0;
+    transition: all 0.3s ease;
+    z-index: 0;
 }
 
 .service-box:hover {
     transform: translateY(-10px);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }
 
-.service-box:hover h3,
-.service-box:hover p,
-.service-box:hover .service-link {
-    color: var(--primary-light);
-}
-
-.service-box:hover .service-icon {
-    background-color: var(--primary-light);
-    color: var(--primary-dark);
+.service-box:hover::before {
+    opacity: 0.05;
 }
 
 .service-icon {
     width: 70px;
     height: 70px;
-    background-color: rgba(10, 14, 23, 0.05);
-    color: var(--primary-dark);
-    font-size: 1.8rem;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
-    margin-bottom: 25px;
-    transition: all 0.3s ease;
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
+}
+
+.service-icon i {
+    font-size: 30px;
+    color: var(--primary-light);
 }
 
 .service-box h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
-    transition: all 0.3s ease;
+    position: relative;
+    z-index: 1;
 }
 
 .service-box p {
+    color: var(--text-dark);
     margin-bottom: 20px;
-    transition: all 0.3s ease;
+    position: relative;
+    z-index: 1;
 }
 
 .service-link {
+    color: var(--accent-color);
     font-weight: 600;
     display: inline-flex;
     align-items: center;
+    position: relative;
+    z-index: 1;
     transition: all 0.3s ease;
 }
 
 .service-link i {
     margin-left: 5px;
-    transition: all 0.3s ease;
+    transition: transform 0.3s ease;
+}
+
+.service-link:hover {
+    color: var(--accent-hover);
 }
 
 .service-link:hover i {
     transform: translateX(5px);
 }
 
-/* About Section */
-.about-section {
-    position: relative;
-    padding: 120px 0;
-    color: var(--primary-light);
-}
-
+/* Parallax Section */
 .parallax-section {
+    position: relative;
     overflow: hidden;
 }
 
@@ -520,20 +514,16 @@ section {
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
+    background: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg') center/cover fixed;
+    opacity: 0.1;
+    transform: translateZ(0);
 }
 
-.parallax-bg::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(10, 14, 23, 0.85);
+/* About Section */
+.about-section {
+    position: relative;
+    padding: 120px 0;
+    color: var(--primary-light);
 }
 
 .about-content {
@@ -619,52 +609,64 @@ section {
 
 /* Contact Section */
 .contact-section {
-    padding: 120px 0;
-    background-color: #f8f9fa;
+    background-color: var(--primary-light);
+    position: relative;
 }
 
 .contact-info-box {
-    background-color: var(--primary-dark);
-    color: var(--primary-light);
-    padding: 50px 40px;
-    height: 100%;
-    border-radius: 5px;
+    background: var(--primary-light);
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
 }
 
 .contact-info-header {
-    margin-bottom: 30px;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    color: var(--primary-light);
+    padding: 20px;
+    text-align: center;
 }
 
-.contact-info-header h3 {
-    position: relative;
-    padding-bottom: 15px;
-    display: inline-block;
-}
-
-.contact-info-header h3::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 50px;
-    height: 2px;
-    background-color: var(--primary-light);
+.contact-info-content {
+    padding: 30px;
 }
 
 .contact-info-item {
     display: flex;
+    align-items: flex-start;
     margin-bottom: 30px;
 }
 
+.contact-info-item:last-child {
+    margin-bottom: 0;
+}
+
 .contact-info-item .icon {
-    font-size: 1.5rem;
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     margin-right: 20px;
-    min-width: 30px;
+    flex-shrink: 0;
+}
+
+.contact-info-item .icon i {
+    font-size: 20px;
+    color: var(--primary-light);
 }
 
 .contact-info-item .text h4 {
-    font-size: 1.2rem;
     margin-bottom: 5px;
+    color: var(--text-dark);
+}
+
+.contact-info-item .text p {
+    color: var(--text-dark);
+    opacity: 0.8;
+    margin: 0;
 }
 
 .contact-social {
@@ -907,7 +909,7 @@ textarea.form-control {
     }
     
     .hero-title {
-        font-size: 3.5rem;
+        font-size: 3rem;
     }
     
     .hero-subtitle {
@@ -934,13 +936,11 @@ textarea.form-control {
     }
     
     .hero-title {
-        font-size: 3rem;
-        letter-spacing: 5px;
+        font-size: 2.5rem;
     }
     
     .hero-subtitle {
-        font-size: 1rem;
-        letter-spacing: 3px;
+        font-size: 1.2rem;
     }
     
     .section-title h2 {
@@ -970,7 +970,11 @@ textarea.form-control {
 
 @media (max-width: 575.98px) {
     .hero-title {
-        font-size: 2.5rem;
+        font-size: 2rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1rem;
     }
     
     .preloader .logo-text {
diff --git a/style4.css b/style4.css
index 04399c4..93680ff 100644
--- a/style4.css
+++ b/style4.css
@@ -1,15 +1,17 @@
 /* 
 * JPM Security & Services - Style 4
-* A corporate and professional design with clean lines
+* A modern corporate design with dynamic elements
 */
 
 :root {
-    --primary-dark: #0a0e17; /* Dark navy/black from the card */
-    --primary-light: #ffffff; /* White/silver from the card */
-    --accent-gray: #3a3a3a; /* Gray from the card borders */
-    --accent-silver: #e0e0e0; /* Lighter silver for accents */
-    --text-dark: #333333;
+    --primary-dark: #1a1f2c;
+    --primary-light: #ffffff;
+    --accent-color: #3498db;
+    --accent-hover: #2980b9;
+    --text-dark: #2c3e50;
     --text-light: #f8f9fa;
+    --gradient-start: #2c3e50;
+    --gradient-end: #3498db;
     --border-color: #e9e9e9;
     --bg-light: #f8f9fa;
     --transition: all 0.3s ease;
@@ -51,98 +53,67 @@ ul {
 }
 
 section {
-    padding: 80px 0;
+    padding: 100px 0;
     position: relative;
 }
 
 .btn {
     display: inline-block;
-    padding: 12px 30px;
+    padding: 15px 35px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
-    border-radius: 0;
+    border-radius: 30px;
     transition: var(--transition);
     cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: 0.5s;
+    z-index: -1;
+}
+
+.btn:hover::before {
+    left: 100%;
 }
 
 .btn-primary {
-    background-color: var(--primary-dark);
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     color: var(--primary-light);
-    border: 2px solid var(--primary-dark);
+    border: none;
 }
 
 .btn-primary:hover {
-    background-color: transparent;
-    color: var(--primary-dark);
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }
 
 .btn-outline {
-    background-color: transparent;
+    background: transparent;
     color: var(--primary-dark);
     border: 2px solid var(--primary-dark);
 }
 
 .btn-outline:hover {
-    background-color: var(--primary-dark);
+    background: var(--primary-dark);
     color: var(--primary-light);
-}
-
-.btn-light {
-    background-color: var(--primary-light);
-    color: var(--primary-dark);
-    border: 2px solid var(--primary-light);
-}
-
-.btn-light:hover {
-    background-color: transparent;
-    color: var(--primary-light);
-}
-
-.section-subtitle {
-    display: inline-block;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--accent-gray);
-    margin-bottom: 15px;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    position: relative;
-    padding-left: 50px;
-}
-
-.section-subtitle::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 40px;
-    height: 2px;
-    background-color: var(--primary-dark);
-    transform: translateY(-50%);
-}
-
-.section-title {
-    font-size: 2.5rem;
-    margin-bottom: 20px;
-    position: relative;
-}
-
-.section-description {
-    font-size: 1.1rem;
-    color: var(--accent-gray);
-    max-width: 700px;
-    margin: 0 auto 50px;
-}
-
-.section-header {
-    text-align: center;
-    margin-bottom: 60px;
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 /* Top Bar */
 .top-bar {
-    background-color: var(--primary-dark);
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     color: var(--primary-light);
     padding: 10px 0;
     font-size: 0.9rem;
@@ -150,10 +121,13 @@ section {
 
 .top-contact span {
     margin-right: 20px;
+    display: inline-flex;
+    align-items: center;
 }
 
 .top-contact i {
-    margin-right: 5px;
+    margin-right: 8px;
+    font-size: 1rem;
 }
 
 .top-social {
@@ -164,20 +138,29 @@ section {
     color: var(--primary-light);
     margin-left: 15px;
     opacity: 0.8;
+    transition: var(--transition);
 }
 
 .top-social a:hover {
     opacity: 1;
+    transform: translateY(-2px);
 }
 
 /* Header */
 .header {
-    background-color: var(--primary-light);
+    background-color: rgba(255, 255, 255, 0.95);
     padding: 20px 0;
     position: sticky;
     top: 0;
     z-index: 100;
+    backdrop-filter: blur(10px);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    transition: var(--transition);
+}
+
+.header.scrolled {
+    padding: 15px 0;
+    background-color: rgba(255, 255, 255, 0.98);
 }
 
 .logo {
@@ -197,8 +180,13 @@ section {
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
-    margin-right: 10px;
+    margin-right: 15px;
     filter: brightness(0);
+    transition: var(--transition);
+}
+
+.logo:hover .logo-img {
+    transform: scale(1.1);
 }
 
 .logo-text {
@@ -217,7 +205,7 @@ section {
 .logo-sub {
     font-size: 0.7rem;
     letter-spacing: 1.5px;
-    color: var(--accent-gray);
+    color: var(--accent-color);
 }
 
 .main-nav {
@@ -250,7 +238,7 @@ section {
     left: 0;
     width: 0;
     height: 2px;
-    background-color: var(--primary-dark);
+    background: var(--accent-color);
     transition: var(--transition);
 }
 
@@ -260,603 +248,293 @@ section {
 }
 
 .nav-btn {
-    background-color: var(--primary-dark);
-    color: var(--primary-light) !important;
-    padding: 10px 20px !important;
-    border-radius: 0;
-}
-
-.nav-btn:hover {
-    background-color: var(--accent-gray);
-}
-
-.nav-btn::after {
-    display: none;
-}
-
-.mobile-menu-toggle {
-    display: none;
-    width: 30px;
-    height: 20px;
-    position: relative;
-    cursor: pointer;
-}
-
-.mobile-menu-toggle span {
-    display: block;
-    width: 100%;
-    height: 2px;
-    background-color: var(--primary-dark);
-    position: absolute;
-    left: 0;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    color: var(--primary-light);
+    padding: 10px 25px;
+    border-radius: 30px;
     transition: var(--transition);
 }
 
-.mobile-menu-toggle span:nth-child(1) {
-    top: 0;
-}
-
-.mobile-menu-toggle span:nth-child(2) {
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.mobile-menu-toggle span:nth-child(3) {
-    bottom: 0;
-}
-
-.mobile-menu-toggle.active span:nth-child(1) {
-    top: 50%;
-    transform: translateY(-50%) rotate(45deg);
-}
-
-.mobile-menu-toggle.active span:nth-child(2) {
-    opacity: 0;
-}
-
-.mobile-menu-toggle.active span:nth-child(3) {
-    bottom: 50%;
-    transform: translateY(50%) rotate(-45deg);
-}
-
-.mobile-menu {
-    display: none;
-    position: fixed;
-    top: 90px;
-    left: 0;
-    width: 100%;
-    background-color: var(--primary-light);
-    padding: 20px 0;
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-    z-index: 99;
-}
-
-.mobile-menu.active {
-    display: block;
-}
-
-.mobile-menu ul li {
-    margin-bottom: 15px;
-}
-
-.mobile-menu ul li a {
-    display: block;
-    padding: 8px 0;
-    font-weight: 500;
-}
-
-.mobile-menu ul li a.nav-btn {
-    display: inline-block;
-    margin-top: 10px;
+.nav-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }
 
 /* Hero Section */
 .hero-section {
-    padding: 100px 0;
-    background-color: var(--bg-light);
+    padding: 120px 0;
+    position: relative;
     overflow: hidden;
+    background-color: var(--bg-light);
 }
 
 .hero-content {
-    padding-right: 30px;
-}
-
-.hero-content h1 {
-    font-size: 3rem;
-    margin-bottom: 20px;
-    line-height: 1.2;
-}
-
-.hero-content p {
-    font-size: 1.1rem;
-    margin-bottom: 30px;
-    color: var(--accent-gray);
-}
-
-.hero-btns .btn {
-    margin-right: 15px;
-    margin-bottom: 10px;
-}
-
-.hero-image {
-    position: relative;
-}
-
-.hero-img-container {
     position: relative;
     z-index: 1;
 }
 
+.hero-content h1 {
+    font-size: 3.5rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    line-height: 1.2;
+    opacity: 0;
+    transform: translateY(30px);
+    animation: fadeInUp 1s ease forwards;
+}
+
+.hero-content p {
+    font-size: 1.2rem;
+    color: var(--text-dark);
+    margin-bottom: 2rem;
+    opacity: 0;
+    transform: translateY(30px);
+    animation: fadeInUp 1s ease 0.2s forwards;
+}
+
+.hero-btns {
+    opacity: 0;
+    transform: translateY(30px);
+    animation: fadeInUp 1s ease 0.4s forwards;
+}
+
+.hero-btns .btn {
+    margin-right: 15px;
+}
+
+.hero-image {
+    position: relative;
+    z-index: 1;
+}
+
+.hero-img-container {
+    position: relative;
+    padding-bottom: 100%;
+    overflow: hidden;
+    border-radius: 20px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
 .hero-img {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: 400px;
+    height: 100%;
     background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
     background-size: cover;
     background-position: center;
-    border: 10px solid var(--primary-light);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    transition: var(--transition);
+}
+
+.hero-img-container:hover .hero-img {
+    transform: scale(1.1);
 }
 
 .hero-shape {
     position: absolute;
-    top: -30px;
-    right: -30px;
-    width: 80%;
-    height: 80%;
-    border: 5px solid var(--primary-dark);
-    z-index: 0;
+    top: 50%;
+    right: -100px;
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    border-radius: 50%;
+    opacity: 0.1;
+    transform: translateY(-50%);
+    z-index: -1;
 }
 
 /* Features Section */
 .features-section {
-    padding: 60px 0;
+    padding: 80px 0;
     background-color: var(--primary-light);
-    margin-top: -30px;
-    position: relative;
-    z-index: 2;
 }
 
 .feature-box {
     text-align: center;
     padding: 40px 30px;
-    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
-    background-color: var(--primary-light);
+    background: var(--primary-light);
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: var(--transition);
     height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.feature-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    opacity: 0;
+    transition: var(--transition);
+    z-index: 0;
 }
 
 .feature-box:hover {
     transform: translateY(-10px);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+}
+
+.feature-box:hover::before {
+    opacity: 0.05;
 }
 
 .feature-icon {
     width: 80px;
     height: 80px;
-    background-color: rgba(10, 14, 23, 0.05);
-    color: var(--primary-dark);
-    font-size: 2rem;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
     margin: 0 auto 25px;
+    position: relative;
+    z-index: 1;
     transition: var(--transition);
 }
 
-.feature-box:hover .feature-icon {
-    background-color: var(--primary-dark);
+.feature-icon i {
+    font-size: 35px;
     color: var(--primary-light);
 }
 
 .feature-box h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
+    position: relative;
+    z-index: 1;
 }
 
 .feature-box p {
-    color: var(--accent-gray);
+    color: var(--text-dark);
+    margin-bottom: 0;
+    position: relative;
+    z-index: 1;
 }
 
 /* Services Section */
 .services-section {
-    background-color: var(--bg-light);
     padding: 100px 0;
+    background-color: var(--bg-light);
 }
 
 .service-card {
-    background-color: var(--primary-light);
-    padding: 30px;
-    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
+    background: var(--primary-light);
+    padding: 40px 30px;
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: var(--transition);
     height: 100%;
-    border-bottom: 3px solid transparent;
+    position: relative;
+    overflow: hidden;
+}
+
+.service-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    opacity: 0;
+    transition: var(--transition);
+    z-index: 0;
 }
 
 .service-card:hover {
     transform: translateY(-10px);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    border-bottom-color: var(--primary-dark);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+}
+
+.service-card:hover::before {
+    opacity: 0.05;
 }
 
 .service-icon {
     width: 70px;
     height: 70px;
-    background-color: rgba(10, 14, 23, 0.05);
-    color: var(--primary-dark);
-    font-size: 1.8rem;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
     margin-bottom: 25px;
-    transition: var(--transition);
+    position: relative;
+    z-index: 1;
 }
 
-.service-card:hover .service-icon {
-    background-color: var(--primary-dark);
+.service-icon i {
+    font-size: 30px;
     color: var(--primary-light);
 }
 
 .service-content h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
+    position: relative;
+    z-index: 1;
 }
 
 .service-content p {
-    color: var(--accent-gray);
+    color: var(--text-dark);
     margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
 }
 
 .read-more {
+    color: var(--accent-color);
     font-weight: 600;
-    color: var(--primary-dark);
     display: inline-flex;
     align-items: center;
+    position: relative;
+    z-index: 1;
+    transition: var(--transition);
 }
 
 .read-more i {
     margin-left: 5px;
-    transition: var(--transition);
+    transition: transform 0.3s ease;
+}
+
+.read-more:hover {
+    color: var(--accent-hover);
 }
 
 .read-more:hover i {
     transform: translateX(5px);
 }
 
-/* About Section */
-.about-section {
-    padding: 100px 0;
-    background-color: var(--primary-light);
+/* Animations */
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.about-image {
-    position: relative;
-    margin-bottom: 30px;
-}
-
-.about-img {
-    width: 100%;
-    height: 450px;
-    background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
-    background-size: cover;
-    background-position: center;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-}
-
-.about-experience {
-    position: absolute;
-    bottom: -20px;
-    right: 30px;
-    background-color: var(--primary-dark);
-    color: var(--primary-light);
-    padding: 20px 30px;
-    text-align: center;
-}
-
-.about-experience .years {
-    font-size: 2.5rem;
-    font-weight: 700;
-    line-height: 1;
-    display: block;
-}
-
-.about-experience .text {
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-
-.about-content {
-    padding-left: 30px;
-}
-
-.about-content p {
-    margin-bottom: 20px;
-    color: var(--accent-gray);
-}
-
-.about-features {
-    margin: 30px 0;
-}
-
-.about-feature-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-}
-
-.about-feature-item .icon {
-    width: 30px;
-    height: 30px;
-    background-color: rgba(10, 14, 23, 0.05);
-    color: var(--primary-dark);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    margin-right: 15px;
-}
-
-.about-feature-item .text {
-    font-weight: 600;
-}
-
-/* CTA Section */
-.cta-section {
-    background-color: var(--primary-dark);
-    color: var(--primary-light);
-    padding: 60px 0;
-}
-
-.cta-content h2 {
-    color: var(--primary-light);
-    font-size: 2rem;
-    margin-bottom: 10px;
-}
-
-.cta-content p {
-    opacity: 0.8;
-}
-
-/* Contact Section */
-.contact-section {
-    padding: 100px 0;
-    background-color: var(--bg-light);
-}
-
-.contact-info {
-    margin-bottom: 30px;
-}
-
-.contact-info-item {
-    display: flex;
-    margin-bottom: 30px;
-    background-color: var(--primary-light);
-    padding: 25px;
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
-    transition: var(--transition);
-}
-
-.contact-info-item:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-}
-
-.contact-info-item .icon {
-    width: 60px;
-    height: 60px;
-    background-color: rgba(10, 14, 23, 0.05);
-    color: var(--primary-dark);
-    font-size: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    margin-right: 20px;
-}
-
-.contact-info-item .content h4 {
-    font-size: 1.2rem;
-    margin-bottom: 5px;
-}
-
-.contact-form-wrapper {
-    background-color: var(--primary-light);
-    padding: 40px;
-    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
-}
-
-.form-group {
-    margin-bottom: 25px;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: 500;
-}
-
-.form-control {
-    width: 100%;
-    height: 50px;
-    padding: 0 15px;
-    border: 1px solid var(--border-color);
-    transition: var(--transition);
-}
-
-.form-control:focus {
-    border-color: var(--primary-dark);
-    outline: none;
-    box-shadow: none;
-}
-
-textarea.form-control {
-    height: auto;
-    padding: 15px;
-}
-
-/* Footer */
-.footer {
-    background-color: var(--primary-dark);
-    color: var(--primary-light);
-}
-
-.footer-top {
-    padding: 80px 0 50px;
-}
-
-.footer-widget {
-    margin-bottom: 30px;
-}
-
-.footer-logo {
-    margin-bottom: 20px;
-}
-
-.footer-logo .logo-text {
-    display: flex;
-    flex-direction: column;
-}
-
-.footer-logo .logo-main {
-    font-size: 2rem;
-    font-weight: 800;
-    letter-spacing: 3px;
-    color: var(--primary-light);
-    line-height: 1;
-}
-
-.footer-logo .logo-sub {
-    font-size: 0.7rem;
-    letter-spacing: 1.5px;
-    color: var(--accent-silver);
-}
-
-.about-widget p {
-    opacity: 0.7;
-    margin-bottom: 20px;
-}
-
-.footer-social {
-    display: flex;
-}
-
-.footer-social a {
-    width: 36px;
-    height: 36px;
-    background-color: rgba(255, 255, 255, 0.1);
-    color: var(--primary-light);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    margin-right: 10px;
-    transition: var(--transition);
-}
-
-.footer-social a:hover {
-    background-color: var(--primary-light);
-    color: var(--primary-dark);
-}
-
-.footer-widget-title {
-    font-size: 1.3rem;
-    color: var(--primary-light);
-    margin-bottom: 25px;
-    position: relative;
-    padding-bottom: 15px;
-}
-
-.footer-widget-title::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 40px;
-    height: 2px;
-    background-color: var(--primary-light);
-}
-
-.footer-links li {
-    margin-bottom: 10px;
-}
-
-.footer-links li a {
-    opacity: 0.7;
-    transition: var(--transition);
-}
-
-.footer-links li a:hover {
-    opacity: 1;
-    padding-left: 5px;
-}
-
-.footer-contact-info li {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 15px;
-    opacity: 0.7;
-}
-
-.footer-contact-info li i {
-    margin-right: 10px;
-    margin-top: 5px;
-}
-
-.footer-bottom {
-    padding: 20px 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.copyright {
-    margin-bottom: 0;
-    opacity: 0.7;
-}
-
-.footer-bottom-links a {
-    margin-left: 20px;
-    opacity: 0.7;
-    transition: var(--transition);
-}
-
-.footer-bottom-links a:hover {
-    opacity: 1;
-}
-
-/* Back to Top */
-.back-to-top {
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    width: 50px;
-    height: 50px;
-    background-color: var(--primary-dark);
-    color: var(--primary-light);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 99;
-    opacity: 0;
-    visibility: hidden;
-    transition: var(--transition);
-}
-
-.back-to-top.active {
-    opacity: 1;
-    visibility: visible;
-}
-
-.back-to-top:hover {
-    background-color: var(--accent-gray);
-    color: var(--primary-light);
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    100% {
+        transform: scale(1);
+    }
 }
 
 /* Responsive Styles */
 @media (max-width: 1199.98px) {
     .hero-content h1 {
-        font-size: 2.5rem;
+        font-size: 3rem;
     }
     
     .section-title {
@@ -871,13 +549,11 @@ textarea.form-control {
     
     .mobile-menu-toggle {
         display: block;
-        float: right;
     }
     
     .hero-content {
-        padding-right: 0;
-        margin-bottom: 50px;
         text-align: center;
+        margin-bottom: 50px;
     }
     
     .hero-shape {
@@ -885,17 +561,7 @@ textarea.form-control {
     }
     
     .about-content {
-        padding-left: 0;
-        margin-top: 30px;
-    }
-    
-    .cta-content {
-        text-align: center;
-        margin-bottom: 30px;
-    }
-    
-    .cta-section .text-lg-end {
-        text-align: center !important;
+        margin-top: 50px;
     }
 }
 
@@ -904,82 +570,30 @@ textarea.form-control {
         padding: 60px 0;
     }
     
-    .top-bar {
-        display: none;
-    }
-    
-    .hero-section {
-        padding: 80px 0;
-    }
-    
     .hero-content h1 {
-        font-size: 2rem;
+        font-size: 2.5rem;
     }
     
     .section-title {
-        font-size: 1.8rem;
+        font-size: 2rem;
     }
     
     .feature-box,
     .service-card {
         margin-bottom: 30px;
     }
-    
-    .about-experience {
-        position: relative;
-        bottom: auto;
-        right: auto;
-        display: inline-block;
-        margin-top: -20px;
-    }
-    
-    .footer-widget {
-        text-align: center;
-    }
-    
-    .footer-widget-title::after {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    
-    .footer-social {
-        justify-content: center;
-    }
-    
-    .footer-contact-info li {
-        justify-content: center;
-    }
-    
-    .footer-bottom {
-        text-align: center;
-    }
-    
-    .footer-bottom-links {
-        margin-top: 15px;
-    }
-    
-    .footer-bottom-links a {
-        margin: 0 10px;
-    }
 }
 
 @media (max-width: 575.98px) {
     .hero-content h1 {
-        font-size: 1.8rem;
+        font-size: 2rem;
     }
     
     .section-subtitle {
-        padding-left: 30px;
+        font-size: 0.9rem;
     }
     
     .section-subtitle::before {
-        width: 20px;
-    }
-    
-    .back-to-top {
-        bottom: 20px;
-        right: 20px;
-        width: 40px;
-        height: 40px;
+        width: 30px;
     }
 }
\ No newline at end of file
diff --git a/style5.css b/style5.css
index de82670..09abf77 100644
--- a/style5.css
+++ b/style5.css
@@ -4,12 +4,16 @@
 */
 
 :root {
-    --primary-dark: #0a0e17; /* Dark navy/black from the card */
-    --primary-light: #ffffff; /* White/silver from the card */
-    --accent-gray: #3a3a3a; /* Gray from the card borders */
-    --accent-silver: #e0e0e0; /* Lighter silver for accents */
-    --text-dark: #333333;
+    --primary-dark: #1a1f2c;
+    --primary-light: #ffffff;
+    --accent-color: #3498db;
+    --accent-hover: #2980b9;
+    --text-dark: #2c3e50;
     --text-light: #f8f9fa;
+    --gradient-start: #2c3e50;
+    --gradient-end: #3498db;
+    --border-color: #e9e9e9;
+    --bg-light: #f8f9fa;
     --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
@@ -30,7 +34,7 @@ body {
     background-color: var(--primary-light);
     line-height: 1.6;
     overflow-x: hidden;
-    cursor: none; /* Hide default cursor for custom cursor */
+    cursor: none;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -43,7 +47,7 @@ a {
     text-decoration: none;
     color: inherit;
     transition: var(--transition);
-    cursor: none; /* Hide default cursor for custom cursor */
+    cursor: none;
 }
 
 ul {
@@ -61,12 +65,12 @@ section {
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
-    border-radius: 0;
+    border-radius: 30px;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     z-index: 1;
-    cursor: none; /* Hide default cursor for custom cursor */
+    cursor: none;
 }
 
 .btn::before {
@@ -76,68 +80,37 @@ section {
     left: -100%;
     width: 100%;
     height: 100%;
-    background-color: rgba(255, 255, 255, 0.1);
-    transition: var(--transition);
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: 0.5s;
     z-index: -1;
 }
 
 .btn:hover::before {
-    left: 0;
+    left: 100%;
 }
 
 .btn-primary {
-    background-color: var(--primary-dark);
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     color: var(--primary-light);
     border: none;
 }
 
 .btn-primary:hover {
-    background-color: var(--accent-gray);
-    color: var(--primary-light);
-    transform: translateY(-5px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }
 
 .btn-light {
-    background-color: var(--primary-light);
+    background: var(--primary-light);
     color: var(--primary-dark);
-    border: none;
+    border: 2px solid var(--primary-dark);
 }
 
 .btn-light:hover {
-    background-color: var(--accent-silver);
-    color: var(--primary-dark);
-    transform: translateY(-5px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-}
-
-.section-subtitle {
-    display: inline-block;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--accent-gray);
-    margin-bottom: 15px;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    position: relative;
-}
-
-.section-title {
-    font-size: 2.5rem;
-    margin-bottom: 20px;
-    position: relative;
-}
-
-.section-description {
-    font-size: 1.1rem;
-    color: var(--accent-gray);
-    max-width: 700px;
-    margin: 0 auto 50px;
-}
-
-.section-header {
-    text-align: center;
-    margin-bottom: 60px;
+    background: var(--primary-dark);
+    color: var(--primary-light);
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 /* Custom Cursor */
@@ -146,7 +119,7 @@ section {
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    background-color: var(--primary-dark);
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
@@ -157,7 +130,7 @@ section {
     position: fixed;
     width: 40px;
     height: 40px;
-    border: 1px solid var(--primary-dark);
+    border: 1px solid var(--accent-color);
     border-radius: 50%;
     pointer-events: none;
     z-index: 9998;
@@ -168,13 +141,14 @@ section {
 .cursor.active {
     width: 20px;
     height: 20px;
-    background-color: var(--primary-dark);
+    background: var(--accent-color);
 }
 
 .cursor-follower.active {
     width: 50px;
     height: 50px;
     border-width: 2px;
+    border-color: var(--accent-hover);
 }
 
 /* Preloader */
@@ -184,7 +158,7 @@ section {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--primary-dark);
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     display: flex;
     justify-content: center;
     align-items: center;
@@ -207,6 +181,7 @@ section {
     letter-spacing: 8px;
     color: var(--primary-light);
     animation: pulse 1.5s infinite;
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
 }
 
 @keyframes pulse {
@@ -236,67 +211,68 @@ section {
 }
 
 .header.scrolled {
-    background-color: var(--primary-light);
+    background-color: rgba(255, 255, 255, 0.95);
     padding: 15px 0;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
-}
-
-.header.scrolled .logo-text,
-.header.scrolled .logo-tagline,
-.header.scrolled .menu-toggle span {
-    color: var(--primary-dark);
-}
-
-.header.scrolled .hamburger span {
-    background-color: var(--primary-dark);
+    backdrop-filter: blur(10px);
 }
 
 .logo {
-    display: inline-block;
+    display: flex;
+    align-items: center;
 }
 
 .logo a {
     display: flex;
-    flex-direction: column;
+    align-items: center;
 }
 
 .logo-text {
-    font-size: 2rem;
+    font-size: 2.5rem;
     font-weight: 800;
-    letter-spacing: 5px;
+    letter-spacing: 3px;
     color: var(--primary-light);
     line-height: 1;
+    transition: var(--transition);
 }
 
 .logo-tagline {
-    font-size: 0.7rem;
+    font-size: 0.8rem;
     letter-spacing: 2px;
-    color: var(--primary-light);
-    opacity: 0.8;
+    color: var(--accent-color);
+    margin-left: 15px;
+    transition: var(--transition);
 }
 
+.header.scrolled .logo-text {
+    color: var(--primary-dark);
+    font-size: 2rem;
+}
+
+.header.scrolled .logo-tagline {
+    color: var(--accent-color);
+}
+
+/* Menu Toggle */
 .menu-toggle {
     display: flex;
     align-items: center;
-    cursor: pointer;
+    cursor: none;
 }
 
 .menu-toggle span {
     font-size: 1rem;
-    font-weight: 500;
+    font-weight: 600;
     color: var(--primary-light);
     margin-right: 15px;
-    text-transform: uppercase;
-    letter-spacing: 2px;
+    transition: var(--transition);
 }
 
 .hamburger {
     width: 30px;
     height: 20px;
     position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    cursor: none;
 }
 
 .hamburger span {
@@ -304,9 +280,25 @@ section {
     width: 100%;
     height: 2px;
     background-color: var(--primary-light);
+    position: absolute;
+    left: 0;
     transition: var(--transition);
 }
 
+.hamburger span:first-child {
+    top: 0;
+}
+
+.hamburger span:last-child {
+    bottom: 0;
+}
+
+.header.scrolled .menu-toggle span,
+.header.scrolled .hamburger span {
+    color: var(--primary-dark);
+    background-color: var(--primary-dark);
+}
+
 /* Fullscreen Menu */
 .fullscreen-menu {
     position: fixed;
@@ -314,11 +306,8 @@ section {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--primary-dark);
-    z-index: 999;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    z-index: 99;
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
@@ -332,24 +321,22 @@ section {
 .menu-close {
     position: absolute;
     top: 30px;
-    right: 50px;
+    right: 30px;
     display: flex;
     align-items: center;
-    cursor: pointer;
+    cursor: none;
 }
 
 .menu-close span {
     font-size: 1rem;
-    font-weight: 500;
+    font-weight: 600;
     color: var(--primary-light);
     margin-right: 15px;
-    text-transform: uppercase;
-    letter-spacing: 2px;
 }
 
 .close-btn {
     width: 30px;
-    height: 30px;
+    height: 20px;
     position: relative;
 }
 
@@ -359,41 +346,41 @@ section {
     height: 2px;
     background-color: var(--primary-light);
     position: absolute;
-    top: 50%;
     left: 0;
-    margin: 0;
+    transition: var(--transition);
 }
 
 .close-btn span:first-child {
+    top: 50%;
     transform: translateY(-50%) rotate(45deg);
 }
 
 .close-btn span:last-child {
+    top: 50%;
     transform: translateY(-50%) rotate(-45deg);
 }
 
 .menu-content {
-    width: 100%;
+    padding: 100px 0;
 }
 
 .menu-links ul li {
-    margin-bottom: 20px;
-    overflow: hidden;
+    margin-bottom: 30px;
 }
 
 .menu-link {
     font-size: 3rem;
     font-weight: 700;
     color: var(--primary-light);
-    display: inline-block;
     position: relative;
+    display: inline-block;
     transition: var(--transition);
 }
 
 .menu-link::after {
     content: '';
     position: absolute;
-    bottom: 0;
+    bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
@@ -402,7 +389,7 @@ section {
 }
 
 .menu-link:hover {
-    color: var(--accent-silver);
+    transform: translateX(20px);
 }
 
 .menu-link:hover::after {
@@ -410,100 +397,107 @@ section {
 }
 
 .menu-info {
-    color: var(--primary-light);
     margin-top: 50px;
 }
 
 .menu-info h3 {
     font-size: 1.5rem;
-    margin-bottom: 20px;
     color: var(--primary-light);
+    margin-bottom: 20px;
 }
 
 .menu-info p {
-    margin-bottom: 15px;
+    color: var(--primary-light);
     opacity: 0.8;
+    margin-bottom: 10px;
 }
 
 .menu-info p i {
     margin-right: 10px;
-    width: 20px;
 }
 
 .menu-social {
-    display: flex;
     margin-top: 30px;
 }
 
 .menu-social a {
-    width: 40px;
-    height: 40px;
-    background-color: rgba(255, 255, 255, 0.1);
-    color: var(--primary-light);
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: 1px solid var(--primary-light);
     border-radius: 50%;
-    margin-right: 15px;
+    color: var(--primary-light);
+    margin-right: 10px;
     transition: var(--transition);
 }
 
 .menu-social a:hover {
     background-color: var(--primary-light);
     color: var(--primary-dark);
-    transform: translateY(-5px);
+    transform: translateY(-3px);
 }
 
 /* Hero Section */
 .hero-section {
     height: 100vh;
-    padding: 0;
     display: flex;
     align-items: center;
     position: relative;
+    overflow: hidden;
+    background-color: var(--primary-dark);
 }
 
 .hero-content {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    position: relative;
+    z-index: 1;
     padding: 0 50px;
-    background-color: var(--primary-dark);
-    color: var(--primary-light);
 }
 
 .hero-title {
     font-size: 5rem;
     font-weight: 800;
-    letter-spacing: 10px;
     color: var(--primary-light);
-    margin-bottom: 0;
     line-height: 1;
+    margin-bottom: 20px;
+    opacity: 0;
+    transform: translateY(30px);
+    animation: fadeInUp 1s ease forwards;
 }
 
 .hero-subtitle {
     font-size: 1.5rem;
-    letter-spacing: 5px;
-    color: var(--primary-light);
+    color: var(--accent-color);
     margin-bottom: 30px;
-    font-weight: 400;
+    opacity: 0;
+    transform: translateY(30px);
+    animation: fadeInUp 1s ease 0.2s forwards;
 }
 
 .hero-text {
     font-size: 1.2rem;
+    color: var(--primary-light);
+    opacity: 0.8;
     margin-bottom: 40px;
-    max-width: 500px;
+    opacity: 0;
+    transform: translateY(30px);
+    animation: fadeInUp 1s ease 0.4s forwards;
 }
 
 .hero-btns .btn {
-    margin-right: 15px;
+    opacity: 0;
+    transform: translateY(30px);
+    animation: fadeInUp 1s ease 0.6s forwards;
 }
 
 .hero-image {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
     height: 100%;
-    position: relative;
-    overflow: hidden;
+    z-index: 0;
 }
 
 .hero-img-inner {
@@ -512,43 +506,41 @@ section {
     background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
     background-size: cover;
     background-position: center;
-    transition: transform 10s ease;
-}
-
-.hero-section:hover .hero-img-inner {
+    transition: var(--transition);
     transform: scale(1.1);
 }
 
+.hero-section:hover .hero-img-inner {
+    transform: scale(1);
+}
+
+/* Scroll Down */
 .scroll-down {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    z-index: 1;
 }
 
 .mouse {
     width: 30px;
     height: 50px;
     border: 2px solid var(--primary-light);
-    border-radius: 20px;
+    border-radius: 15px;
     position: relative;
-    margin-bottom: 10px;
 }
 
 .wheel {
     width: 4px;
     height: 8px;
     background-color: var(--primary-light);
-    border-radius: 2px;
     position: absolute;
-    top: 10px;
+    top: 8px;
     left: 50%;
     transform: translateX(-50%);
-    animation: scroll 2s infinite;
+    border-radius: 2px;
+    animation: scroll 1.5s infinite;
 }
 
 @keyframes scroll {
@@ -563,6 +555,7 @@ section {
 }
 
 .arrow {
+    margin-top: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -576,7 +569,7 @@ section {
     border-right: 2px solid var(--primary-light);
     transform: rotate(45deg);
     margin: -5px;
-    animation: arrow 2s infinite;
+    animation: arrow 1.5s infinite;
 }
 
 .arrow span:nth-child(2) {
@@ -590,32 +583,29 @@ section {
 @keyframes arrow {
     0% {
         opacity: 0;
-        transform: rotate(45deg) translate(-5px, -5px);
     }
     50% {
         opacity: 1;
     }
     100% {
         opacity: 0;
-        transform: rotate(45deg) translate(5px, 5px);
     }
 }
 
 /* Services Section */
 .services-section {
-    background-color: var(--primary-light);
-    padding: 120px 0;
+    background-color: var(--bg-light);
+    padding: 100px 0;
 }
 
 .service-card {
-    background-color: #f8f9fa;
+    background: var(--primary-light);
     padding: 40px 30px;
-    border-radius: 5px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: var(--transition);
     height: 100%;
     position: relative;
-    z-index: 1;
     overflow: hidden;
 }
 
@@ -625,477 +615,86 @@ section {
     top: 0;
     left: 0;
     width: 100%;
-    height: 0;
-    background-color: var(--primary-dark);
+    height: 100%;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    opacity: 0;
     transition: var(--transition);
-    z-index: -1;
+    z-index: 0;
 }
 
 .service-card:hover::before {
-    height: 100%;
+    opacity: 0.05;
 }
 
 .service-card:hover {
-    transform: translateY(-20px);
-}
-
-.service-card:hover h3,
-.service-card:hover p {
-    color: var(--primary-light);
+    transform: translateY(-10px);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }
 
 .service-icon {
-    width: 80px;
-    height: 80px;
-    background-color: rgba(10, 14, 23, 0.05);
-    color: var(--primary-dark);
-    font-size: 2rem;
+    width: 70px;
+    height: 70px;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
     margin-bottom: 25px;
-    transition: var(--transition);
+    position: relative;
+    z-index: 1;
 }
 
-.service-card:hover .service-icon {
-    background-color: var(--primary-light);
-    color: var(--primary-dark);
+.service-icon i {
+    font-size: 30px;
+    color: var(--primary-light);
 }
 
 .service-card h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
-    transition: var(--transition);
+    position: relative;
+    z-index: 1;
 }
 
 .service-card p {
-    margin-bottom: 25px;
-    transition: var(--transition);
+    color: var(--text-dark);
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
 }
 
 .service-link {
+    color: var(--accent-color);
+    font-weight: 600;
     display: inline-flex;
     align-items: center;
-    font-weight: 600;
-    color: var(--primary-dark);
+    position: relative;
+    z-index: 1;
     transition: var(--transition);
 }
 
 .service-link span {
-    margin-right: 10px;
+    margin-right: 5px;
 }
 
 .service-link i {
-    transition: var(--transition);
+    transition: transform 0.3s ease;
 }
 
 .service-card:hover .service-link {
-    color: var(--primary-light);
+    color: var(--accent-hover);
 }
 
 .service-link:hover i {
     transform: translateX(5px);
 }
 
-/* About Section */
-.about-section {
-    padding: 120px 0;
-    background-color: #f8f9fa;
-}
-
-.about-image {
-    position: relative;
-    margin-bottom: 30px;
-}
-
-.about-img-inner {
-    width: 100%;
-    height: 500px;
-    background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
-    background-size: cover;
-    background-position: center;
-    position: relative;
-    z-index: 1;
-}
-
-.about-pattern {
-    position: absolute;
-    top: 30px;
-    left: -30px;
-    width: 100%;
-    height: 100%;
-    border: 5px solid var(--primary-dark);
-    z-index: 0;
-}
-
-.about-content {
-    padding-left: 30px;
-}
-
-.about-content p {
-    margin-bottom: 20px;
-    color: var(--accent-gray);
-}
-
-.about-values {
-    margin-top: 40px;
-}
-
-.about-values h3 {
-    margin-bottom: 25px;
-    position: relative;
-    padding-bottom: 15px;
-    display: inline-block;
-}
-
-.about-values h3::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 50px;
-    height: 2px;
-    background-color: var(--primary-dark);
-}
-
-.values-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 30px;
-}
-
-.value-item {
-    display: flex;
-    align-items: flex-start;
-    background-color: var(--primary-light);
-    padding: 25px;
-    border-radius: 5px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-    transition: var(--transition);
-}
-
-.value-item:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-}
-
-.value-icon {
-    font-size: 2rem;
-    color: var(--primary-dark);
-    margin-right: 20px;
-    min-width: 40px;
-}
-
-.value-item h4 {
-    font-size: 1.2rem;
-    margin-bottom: 10px;
-}
-
-.value-item p {
-    margin-bottom: 0;
-    font-size: 0.9rem;
-}
-
-/* CTA Section */
-.cta-section {
-    padding: 80px 0;
-    background-color: var(--primary-light);
-}
-
-.cta-inner {
-    background-color: var(--primary-dark);
-    color: var(--primary-light);
-    padding: 60px;
-    border-radius: 5px;
-    position: relative;
-    overflow: hidden;
-}
-
-.cta-inner::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
-    background-size: cover;
-    background-position: center;
-    opacity: 0.1;
-    z-index: 0;
-}
-
-.cta-content {
-    position: relative;
-    z-index: 1;
-}
-
-.cta-content h2 {
-    color: var(--primary-light);
-    font-size: 2rem;
-    margin-bottom: 15px;
-}
-
-.cta-content p {
-    opacity: 0.8;
-    margin-bottom: 0;
-}
-
-/* Contact Section */
-.contact-section {
-    padding: 120px 0;
-    background-color: var(--primary-light);
-}
-
-.contact-info {
-    background-color: var(--primary-dark);
-    color: var(--primary-light);
-    padding: 50px;
-    height: 100%;
-    border-radius: 5px;
-}
-
-.contact-info-header {
-    margin-bottom: 30px;
-}
-
-.contact-info-header h3 {
-    color: var(--primary-light);
-    position: relative;
-    padding-bottom: 15px;
-    display: inline-block;
-}
-
-.contact-info-header h3::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 50px;
-    height: 2px;
-    background-color: var(--primary-light);
-}
-
-.contact-info-item {
-    display: flex;
-    margin-bottom: 30px;
-}
-
-.contact-info-item .icon {
-    font-size: 1.5rem;
-    margin-right: 20px;
-    min-width: 30px;
-}
-
-.contact-info-item .text h4 {
-    color: var(--primary-light);
-    font-size: 1.2rem;
-    margin-bottom: 5px;
-}
-
-.contact-info-item .text p {
-    opacity: 0.8;
-    margin-bottom: 0;
-}
-
-.contact-social {
-    margin-top: 40px;
-}
-
-.contact-social h4 {
-    color: var(--primary-light);
-    margin-bottom: 20px;
-}
-
-.social-icons {
-    display: flex;
-}
-
-.social-icon {
-    width: 40px;
-    height: 40px;
-    background-color: rgba(255, 255, 255, 0.1);
-    color: var(--primary-light);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    margin-right: 15px;
-    transition: var(--transition);
-}
-
-.social-icon:hover {
-    background-color: var(--primary-light);
-    color: var(--primary-dark);
-    transform: translateY(-5px);
-}
-
-.contact-form-box {
-    background-color: #f8f9fa;
-    padding: 50px;
-    border-radius: 5px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-    height: 100%;
-}
-
-.form-group {
-    margin-bottom: 25px;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 10px;
-    font-weight: 500;
-}
-
-.form-control {
-    width: 100%;
-    height: 55px;
-    padding: 0 20px;
-    border: 1px solid #e1e1e1;
-    border-radius: 0;
-    transition: var(--transition);
-    background-color: var(--primary-light);
-}
-
-.form-control:focus {
-    border-color: var(--primary-dark);
-    outline: none;
-    box-shadow: none;
-}
-
-textarea.form-control {
-    height: auto;
-    padding: 20px;
-}
-
-/* Footer */
-.footer {
-    background-color: var(--primary-dark);
-    color: var(--primary-light);
-    padding: 80px 0 0;
-}
-
-.footer-widget {
-    margin-bottom: 40px;
-}
-
-.footer-logo {
-    margin-bottom: 20px;
-}
-
-.footer-logo .logo-text {
-    font-size: 2rem;
-    font-weight: 800;
-    letter-spacing: 3px;
-}
-
-.footer-logo .logo-tagline {
-    font-size: 0.7rem;
-    letter-spacing: 2px;
-    opacity: 0.8;
-}
-
-.about-widget p {
-    opacity: 0.7;
-    margin-bottom: 0;
-}
-
-.footer h3 {
-    color: var(--primary-light);
-    font-size: 1.3rem;
-    margin-bottom: 25px;
-    position: relative;
-    padding-bottom: 15px;
-    display: inline-block;
-}
-
-.footer h3::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 40px;
-    height: 2px;
-    background-color: var(--primary-light);
-}
-
-.footer-links li {
-    margin-bottom: 15px;
-}
-
-.footer-links li a {
-    opacity: 0.7;
-    transition: var(--transition);
-}
-
-.footer-links li a:hover {
-    opacity: 1;
-    padding-left: 5px;
-}
-
-.footer-contact-info li {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 15px;
-    opacity: 0.7;
-}
-
-.footer-contact-info li i {
-    margin-right: 10px;
-    margin-top: 5px;
-}
-
-.footer-bottom {
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    padding: 20px 0;
-    margin-top: 40px;
-}
-
-.copyright {
-    margin-bottom: 0;
-    opacity: 0.7;
-}
-
-.footer-bottom-links a {
-    margin-left: 20px;
-    opacity: 0.7;
-    transition: var(--transition);
-}
-
-.footer-bottom-links a:hover {
-    opacity: 1;
-}
-
-/* Back to Top */
-.back-to-top {
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    width: 50px;
-    height: 50px;
-    background-color: var(--primary-dark);
-    color: var(--primary-light);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 99;
-    opacity: 0;
-    visibility: hidden;
-    transition: var(--transition);
-}
-
-.back-to-top.active {
-    opacity: 1;
-    visibility: visible;
-}
-
-.back-to-top:hover {
-    background-color: var(--accent-gray);
-    color: var(--primary-light);
-    transform: translateY(-5px);
+/* Animations */
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 /* Responsive Styles */
@@ -1115,11 +714,11 @@ textarea.form-control {
     }
     
     .hero-title {
-        font-size: 3rem;
+        font-size: 3.5rem;
     }
     
     .hero-subtitle {
-        font-size: 1.2rem;
+        font-size: 1.3rem;
     }
     
     .hero-content {
@@ -1127,34 +726,37 @@ textarea.form-control {
     }
     
     .about-content {
-        padding-left: 0;
         margin-top: 50px;
     }
     
     .values-grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(2, 1fr);
     }
     
     .contact-info {
-        margin-bottom: 30px;
+        margin-bottom: 50px;
     }
 }
 
 @media (max-width: 767.98px) {
     .hero-section {
         height: auto;
+        padding: 150px 0 100px;
     }
     
     .hero-content {
-        padding: 100px 20px;
+        text-align: center;
+        margin-bottom: 50px;
     }
     
     .hero-image {
-        height: 50vh;
+        position: relative;
+        width: 100%;
+        height: 300px;
     }
     
     .hero-title {
-        font-size: 2.5rem;
+        font-size: 3rem;
     }
     
     .menu-close {
@@ -1167,7 +769,7 @@ textarea.form-control {
     }
     
     .cta-inner {
-        padding: 40px 20px;
+        padding: 50px 30px;
     }
     
     .contact-form-box {
@@ -1175,19 +777,18 @@ textarea.form-control {
     }
     
     .footer h3::after {
-        left: 0;
+        left: 50%;
+        transform: translateX(-50%);
     }
 }
 
 @media (max-width: 575.98px) {
     .hero-title {
-        font-size: 2rem;
-        letter-spacing: 5px;
+        font-size: 2.5rem;
     }
     
     .hero-subtitle {
-        font-size: 1rem;
-        letter-spacing: 3px;
+        font-size: 1.1rem;
     }
     
     .section-title {
@@ -1195,7 +796,7 @@ textarea.form-control {
     }
     
     .menu-link {
-        font-size: 1.5rem;
+        font-size: 1.8rem;
     }
     
     .about-pattern {
diff --git a/style6.css b/style6.css
new file mode 100644
index 0000000..c5c2827
--- /dev/null
+++ b/style6.css
@@ -0,0 +1,590 @@
+/* 
+* JPM Security & Services - Style 6
+* A modern and sophisticated design with enhanced animations
+*/
+
+:root {
+    --primary-dark: #1a1f2c;
+    --primary-light: #ffffff;
+    --accent-color: #e63946;
+    --accent-hover: #c1121f;
+    --text-dark: #2b2d42;
+    --text-light: #f8f9fa;
+    --gradient-start: #1a1f2c;
+    --gradient-end: #2b2d42;
+    --border-color: #e9ecef;
+    --bg-light: #f8f9fa;
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* General Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: var(--text-dark);
+    background-color: var(--primary-light);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--primary-dark);
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+    transition: var(--transition);
+}
+
+ul {
+    list-style: none;
+}
+
+section {
+    padding: 100px 0;
+    position: relative;
+}
+
+/* Navigation */
+.navbar {
+    padding: 20px 0;
+    transition: var(--transition);
+    background: transparent;
+}
+
+.navbar.scrolled {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 15px 0;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.navbar-brand {
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--primary-light);
+    transition: var(--transition);
+}
+
+.navbar.scrolled .navbar-brand {
+    color: var(--primary-dark);
+}
+
+.nav-link {
+    color: var(--primary-light) !important;
+    font-weight: 600;
+    padding: 10px 20px !important;
+    position: relative;
+    transition: var(--transition);
+}
+
+.navbar.scrolled .nav-link {
+    color: var(--primary-dark) !important;
+}
+
+.nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background: var(--accent-color);
+    transition: var(--transition);
+    transform: translateX(-50%);
+}
+
+.nav-link:hover::after {
+    width: 100%;
+}
+
+/* Hero Section */
+.hero {
+    height: 100vh;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    position: relative;
+    overflow: hidden;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('cytonn-photography-n95VMLxqM2I-unsplash.jpg');
+    background-size: cover;
+    background-position: center;
+    opacity: 0.1;
+    animation: zoomIn 20s infinite alternate;
+}
+
+@keyframes zoomIn {
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(1.1);
+    }
+}
+
+.hero-content {
+    color: var(--primary-light);
+    opacity: 0;
+    transform: translateY(30px);
+    animation: fadeInUp 1s ease forwards;
+}
+
+.logo-container {
+    width: 100px;
+    height: 100px;
+    margin-bottom: 30px;
+    opacity: 0;
+    animation: fadeIn 1s ease 0.5s forwards;
+}
+
+.logo-image {
+    width: 100%;
+    height: 100%;
+    background: var(--accent-color);
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+}
+
+.logo-image::before {
+    content: 'JPM';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--primary-light);
+}
+
+.hero h1 {
+    font-size: 5rem;
+    font-weight: 800;
+    color: var(--primary-light);
+    margin-bottom: 0;
+    line-height: 1;
+}
+
+.hero h2 {
+    font-size: 2rem;
+    color: var(--accent-color);
+    margin-bottom: 20px;
+    font-weight: 600;
+}
+
+.hero .lead {
+    font-size: 1.2rem;
+    margin-bottom: 30px;
+    opacity: 0.9;
+}
+
+/* Buttons */
+.btn {
+    padding: 15px 35px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    border-radius: 30px;
+    transition: var(--transition);
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: 0.5s;
+    z-index: -1;
+}
+
+.btn:hover::before {
+    left: 100%;
+}
+
+.btn-primary {
+    background: var(--accent-color);
+    color: var(--primary-light);
+    border: none;
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover);
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3);
+}
+
+/* Services Section */
+.services {
+    background-color: var(--bg-light);
+}
+
+.section-header {
+    margin-bottom: 60px;
+}
+
+.section-header h2 {
+    font-size: 2.5rem;
+    position: relative;
+    display: inline-block;
+    margin-bottom: 20px;
+}
+
+.section-header h2::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    width: 50px;
+    height: 3px;
+    background: var(--accent-color);
+    transform: translateX(-50%);
+}
+
+.service-card {
+    background: var(--primary-light);
+    padding: 40px 30px;
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    transition: var(--transition);
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.service-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    opacity: 0;
+    transition: var(--transition);
+    z-index: 0;
+}
+
+.service-card:hover::before {
+    opacity: 0.05;
+}
+
+.service-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+}
+
+.service-icon {
+    width: 70px;
+    height: 70px;
+    background: var(--accent-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 25px;
+    position: relative;
+    z-index: 1;
+}
+
+.service-icon i {
+    font-size: 30px;
+    color: var(--primary-light);
+}
+
+.service-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 15px;
+    position: relative;
+    z-index: 1;
+}
+
+.service-card p {
+    color: var(--text-dark);
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
+}
+
+/* About Section */
+.about {
+    background-color: var(--primary-light);
+}
+
+.about-image {
+    height: 500px;
+    background-image: url('ben-rosett-WdJkXFQ4VHY-unsplash.jpg');
+    background-size: cover;
+    background-position: center;
+    border-radius: 15px;
+    position: relative;
+    overflow: hidden;
+}
+
+.about-image::before {
+    content: '';
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    bottom: 20px;
+    border: 3px solid var(--accent-color);
+    border-radius: 15px;
+    z-index: 1;
+}
+
+.values {
+    margin-top: 40px;
+}
+
+.values h3 {
+    margin-bottom: 20px;
+    position: relative;
+    display: inline-block;
+}
+
+.values h3::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 40px;
+    height: 3px;
+    background: var(--accent-color);
+}
+
+.values ul li {
+    margin-bottom: 15px;
+    padding-left: 25px;
+    position: relative;
+}
+
+.values ul li::before {
+    content: '→';
+    position: absolute;
+    left: 0;
+    color: var(--accent-color);
+}
+
+/* Contact Section */
+.contact {
+    background-color: var(--bg-light);
+}
+
+.contact-info {
+    background: var(--primary-light);
+    padding: 40px;
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+}
+
+.contact-info h3 {
+    margin-bottom: 25px;
+    position: relative;
+    display: inline-block;
+}
+
+.contact-info h3::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 40px;
+    height: 3px;
+    background: var(--accent-color);
+}
+
+.contact-info ul li {
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+}
+
+.contact-info ul li i {
+    width: 30px;
+    color: var(--accent-color);
+}
+
+.social-links {
+    display: flex;
+    gap: 15px;
+}
+
+.social-icon {
+    width: 40px;
+    height: 40px;
+    background: var(--accent-color);
+    color: var(--primary-light);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition);
+}
+
+.social-icon:hover {
+    background: var(--accent-hover);
+    transform: translateY(-3px);
+}
+
+.business-hours {
+    background: var(--primary-light);
+    padding: 40px;
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+    margin-top: 30px;
+}
+
+.business-hours h3 {
+    margin-bottom: 25px;
+    position: relative;
+    display: inline-block;
+}
+
+.business-hours h3::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 40px;
+    height: 3px;
+    background: var(--accent-color);
+}
+
+/* Footer */
+.footer {
+    background: var(--primary-dark);
+    color: var(--primary-light);
+}
+
+.footer-logo {
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--primary-light);
+}
+
+.footer-tagline {
+    font-size: 1rem;
+    color: var(--accent-color);
+    margin-top: 5px;
+}
+
+.footer a {
+    color: var(--primary-light);
+    opacity: 0.8;
+    transition: var(--transition);
+}
+
+.footer a:hover {
+    opacity: 1;
+    color: var(--accent-color);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+/* Responsive Styles */
+@media (max-width: 1199.98px) {
+    .hero h1 {
+        font-size: 4rem;
+    }
+}
+
+@media (max-width: 991.98px) {
+    section {
+        padding: 80px 0;
+    }
+    
+    .hero h1 {
+        font-size: 3.5rem;
+    }
+    
+    .hero h2 {
+        font-size: 1.8rem;
+    }
+    
+    .about-image {
+        margin-bottom: 40px;
+    }
+}
+
+@media (max-width: 767.98px) {
+    .hero {
+        height: auto;
+        padding: 150px 0 100px;
+    }
+    
+    .hero-content {
+        text-align: center;
+    }
+    
+    .hero h1 {
+        font-size: 3rem;
+    }
+    
+    .hero h2 {
+        font-size: 1.5rem;
+    }
+    
+    .section-header h2 {
+        font-size: 2rem;
+    }
+    
+    .contact-info,
+    .business-hours {
+        padding: 30px;
+    }
+}
+
+@media (max-width: 575.98px) {
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+    
+    .hero h2 {
+        font-size: 1.2rem;
+    }
+    
+    .section-header h2 {
+        font-size: 1.8rem;
+    }
+    
+    .btn {
+        padding: 12px 25px;
+    }
+} 
\ No newline at end of file