Update globals.css

app/globals.css

@@ -1,44 +1,84 @@
-
+/* Your custom variables */
 :root {
   --dark-bg: #000;
   --light-bg: #f6f7fbad;
-  --primary-color: 	#ecb34a;
-  --secondary-color: 	#3c3c3c;
-  --third-color: black;
-  --fourth-color: #fee590;
+  --primary-color: #ecb34a;
+  --secondary-color: #3c3c3c;
   --text-color: rgba(255, 255, 255, 0.847);
-  --text-secondary: #554b92;
-  --text-color-dark: black;
-  --text-color-light: #fcf3d4;
-  --title-color: white;
-  --border-color: #6a55f8;
-  --border-color-dark: #27263a;
-  --border-color-light: #6a55f8;
-  --shadow: 10px 12px 48px rgba(181, 187, 203, 0.500);
+  --text-color-dark: #333;
 }
 
-html {
+/* Basic reset */
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
   box-sizing: border-box;
+  background-color: var(--primary-color);
+  color: var(--text-color-dark);
+  overflow: hidden; /* Prevent body from scrolling */
+}
+
+/* Main containers */
+.app {
+  height: 100vh;
+  overflow: hidden;
 }
 
-body {
-  color: var(--text-color);
-  margin: 0 !important;
-  max-width: 100%;
-  overflow-x: hidden;
-  padding: 0 !important;
-  touch-action: pan-y, pan-x;
-  transition: all 0.4s cubic-bezier(0.57, 0.25, 0.33, 1) 0s;
+.scroll-container {
+  height: 100%;
+  width: 100%;
+  overflow-y: scroll;
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
 }
 
-.container{
-  width:100%;
-  margin:auto;
-  overflow:hidden;
+/* Base style for ALL scroll sections */
+.scroll-section {
+  height: 100vh;
+  width: 100%;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
-@media (min-width: 1000px){
-  .container{
-    max-width: 1220px;
-  }
-}
+/* Using CSS Grid for a more robust layout in the first section */
+.first-section {
+  display: grid;
+  grid-template-rows: auto 1fr; /* Navbar gets its natural height, hero-wrapper gets the rest */
+  padding: 0; /* Remove padding to allow components to align to edges */
+}
+
+/* This wrapper fills the remaining space (from the grid) and also centers the Hero component within that space (using flexbox). */
+.hero-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  overflow: hidden; /* Prevents hero content from spilling out */
+}
+
+/* Default for standard, centered content */
+.middle-section {
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
+
+/* Special class for TALL content like Testimonials */
+.tall-content-section {
+  justify-content: flex-start;
+  overflow-y: auto;
+  padding: 4rem 2rem;
+}
+
+/* Section for the Footer */
+.last-section {
+  justify-content: flex-end;
+  background-color: var(--primary-color);
+  padding: 0;
+}