see overlap

components/navbar.js

@@ -6,8 +6,9 @@ class CustomNavbar extends HTMLElement {
                 nav {
                     transition: background-color 0.3s ease;
                     background-color: rgba(15, 23, 42, 0.95);
+                    height: 80px;
                 }
-                .scrolled {
+.scrolled {
                     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                 }
                 a {

index.html

@@ -29,10 +29,9 @@
             <i data-feather="menu"></i>
         </button>
     </nav>
-
     <!-- Hero Section -->
-    <section class="hero-image h-screen flex items-center justify-center text-center px-4">
-        <div class="max-w-4xl mx-auto">
+    <section class="hero-image flex items-center justify-center text-center px-4">
+<div class="max-w-4xl mx-auto">
             <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">San Diego Real Estate Investments</h1>
             <p class="text-xl text-white mb-12">Building wealth through strategic property investments</p>
             

style.css

@@ -2,12 +2,18 @@
 /* Custom styles */
 body {
     overflow-x: hidden;
-    padding-top: 80px; /* Add padding to account for fixed navbar */
+}
+
+/* Ensure hero section starts below navbar */
+.hero-image {
+    margin-top: 80px;
+    height: calc(100vh - 80px);
 }
 
 @media (min-width: 768px) {
-    body {
-        padding-top: 0;
+    .hero-image {
+        margin-top: 0;
+        height: 100vh;
     }
 }
 /* Smooth scrolling */