mobile view improved

Author: CoreJavaPulse

css/style.css

@@ -16,7 +16,8 @@ body {
     background: #f8fafc;
 }
 
-section[id], header[id] {
+section[id],
+header[id] {
     scroll-margin-top: 70px;
 }
 
@@ -32,14 +33,15 @@ section[id], header[id] {
     border-bottom: 1px solid rgba(13, 202, 240, 0.2);
     transition: all 0.3s ease;
 }
+
 .navbar-wrapper.scrolled {
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
 }
 
 .navbar {
     max-width: 1450px;
     margin: 0 auto;
-    padding:0;
+    padding: 0;
     height: 58px;
     display: flex;
     align-items: center;
@@ -51,17 +53,21 @@ section[id], header[id] {
 .brand {
     display: flex;
     align-items: center;
-    gap: 12px; /* smaller gap */
+    gap: 12px;
+    /* smaller gap */
 }
 
 .lion-logo {
-    height: 52px;      /* Bigger premium */
+    height: 52px;
+    /* Bigger premium */
     width: 52px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
-    box-shadow: 0 8px 24px rgba(13, 202, 240, 0.3);  /* Cyan glow */
-    border: 2px solid rgba(252, 211, 77, 0.4);       /* Gold border */
+    box-shadow: 0 8px 24px rgba(13, 202, 240, 0.3);
+    /* Cyan glow */
+    border: 2px solid rgba(252, 211, 77, 0.4);
+    /* Gold border */
 }
 
 .brand-text {
@@ -96,15 +102,17 @@ section[id], header[id] {
     width: 14px;
     height: 14px;
 }
+
 /* NAVBAR LINKS - FIXED FOR 58px NAVBAR */
 .nav-links {
     display: flex;
-    gap: 24px; /* Reduced gap */
+    gap: 24px;
+    /* Reduced gap */
     list-style: none;
     margin: 0;
     padding: 4px 0;
     align-items: center;
-    justify-self:center;
+    justify-self: center;
 }
 
 .nav-links a {
@@ -115,12 +123,14 @@ section[id], header[id] {
     font-weight: 600;
     letter-spacing: 0.2px;
     position: relative;
-    padding: 6px 12px; /* Compact padding */
+    padding: 6px 12px;
+    /* Compact padding */
     border-radius: 20px;
     transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     overflow: hidden;
     align-items: center;
-    white-space: nowrap; /* Prevents text wrap */
+    white-space: nowrap;
+    /* Prevents text wrap */
 }
 
 .nav-links a::before {
@@ -129,7 +139,8 @@ section[id], header[id] {
     bottom: 2px;
     left: 50%;
     width: 0;
-    height: 5px; /* Thinner underline */
+    height: 5px;
+    /* Thinner underline */
     background: linear-gradient(90deg, #fcd34d, #0dcaf0);
     border-radius: 1px;
     transition: all 0.3s ease;
@@ -151,9 +162,10 @@ section[id], header[id] {
 
 .nav-links a:hover {
     color: #ffffff;
-    transform: translateY(-1px); /* Smaller lift */
+    transform: translateY(-1px);
+    /* Smaller lift */
     background: rgba(252, 211, 77, 0.1);
-    box-shadow: 
+    box-shadow:
         0 4px 16px rgba(252, 211, 77, 0.2),
         0 2px 8px rgba(13, 202, 240, 0.15);
 }
@@ -163,9 +175,11 @@ section[id], header[id] {
 }
 
 .nav-links a:hover::after {
-    width: 200px; /* Smaller ripple for compact links */
+    width: 200px;
+    /* Smaller ripple for compact links */
     height: 200px;
 }
+
 /* SCROLL ANIMATIONS */
 .navbar-wrapper.scrolled .lion-logo {
     height: 44px;
@@ -349,41 +363,6 @@ footer {
     color: #64748b;
 }
 
-/* RESPONSIVE */
-@media(max-width: 1024px) {
-    .services-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-@media(max-width: 768px) {
-    .navbar {
-        flex-direction: column;
-        align-items: flex-start;
-        height: auto;
-        padding: 18px 20px;
-    }
-
-    .nav-links {
-        gap: 20px;
-        margin-top: 12px;
-    }
-
-    .hero-heading {
-        font-size: 32px;
-    }
-
-    .hero-subtitle {
-        font-size: 20px;
-    }
-
-    .brand {
-        flex-direction: column;
-        align-items: flex-start;
-        text-align: left;
-    }
-}
-
 @media(max-width: 640px) {
     .services-grid {
         grid-template-columns: 1fr;
@@ -393,65 +372,42 @@ footer {
         padding: 15px;
     }
 }
-/* TABLET (iPad, large tablets) */
-@media (max-width: 1024px) {
-    .navbar {
-        padding: 0 20px;
-        height: 65px;
-    }
-    
-    .lion-logo {
-        height: 44px;
-        width: 44px;
-    }
-    
-    .brand-name { font-size: 18px; }
-    .nav-links { gap: 24px; }
+
+/* SCROLL EFFECTS */
+.navbar-wrapper.scrolled .lion-logo {
+    height: 44px;
+    width: 44px;
+}
+
+.navbar-wrapper.scrolled .brand-name {
+    font-size: 18px;
+}
+
+.navbar-wrapper.scrolled .navbar {
+    height: 65px;
 }
 
-/* MOBILE (iPhone, Android < 768px) */
 @media (max-width: 768px) {
-    .navbar-wrapper {
-        border-bottom: none;
-        background: rgba(15, 23, 42, 0.95);
-    }
-    
-    .navbar {
-        padding: 16px 20px;
-        height: auto;
-        position: relative;
-    }
-    
     .brand {
-        flex: 1;
+        flex-direction: row;        /* keep logo + text side-by-side */
+        align-items: center;
+        gap: 10px;
     }
-    
-    .nav-links {
-        display: none;  /* Hide on mobile */
+
+    .brand-text {
+        line-height: 1.05;
     }
-    
 
-/* SMALL MOBILE (iPhone SE, small Android) */
-@media (max-width: 480px) {
-    .navbar {
-        padding: 12px 16px;
+    .brand-name {
+        font-size: 15px;
+        font-weight: 700;
     }
-    
-    .lion-logo {
-        height: 40px;
-        width: 40px;
+
+    .brand-subtitle {
+        font-size: 10px;
     }
-    
-    .brand-name { font-size: 16px; }
-    .brand-subtitle { font-size: 10px; }
-    .brand-slogan { font-size: 8px; }
-}
 
-/* SCROLL EFFECTS */
-.navbar-wrapper.scrolled .lion-logo {
-    height: 44px;
-    width: 44px;
+    .brand-slogan {
+        font-size: 9px;
+    }
 }
-
-.navbar-wrapper.scrolled .brand-name { font-size: 18px; }
-.navbar-wrapper.scrolled .navbar { height: 65px; }