Update styles/globals.css

styles/globals.css

@@ -3,28 +3,35 @@
 @tailwind utilities;
 
 body {
-  /* 1. The Water Drop Image stays fixed in the back */
-  background-image: url('/assets/bg.jpg');
+  /* CHANGED: Now looking for 'bg.png' */
+  background-image: url('/assets/bg.png');
+  
+  /* Keeps the background fixed while you scroll (Parallax feel) */
+  background-attachment: fixed;
   background-size: cover;
   background-position: center;
-  background-attachment: fixed; /* Parallax effect */
+  background-repeat: no-repeat;
+  
+  /* Fallback color if image fails to load */
+  background-color: #FAFAFA;
   
-  /* 2. Fixes for Mobile Feel */
+  /* Mobile smoothness */
   overscroll-behavior-y: none;
   -webkit-tap-highlight-color: transparent;
 }
 
-/* 3. The "Frost" Layer that sits on top of the water drops */
+/* The "Frost" Overlay - Keeps the text readable over the drops */
 body::before {
   content: "";
   position: fixed;
   inset: 0;
-  background: rgba(255, 255, 255, 0.3); /* Slight white tint */
-  backdrop-filter: blur(8px); /* The Frost Effect */
+  background: rgba(255, 255, 255, 0.4); /* Slightly stronger frost for PNGs */
+  backdrop-filter: blur(10px);
   z-index: -1;
   pointer-events: none;
 }
 
+/* Hide Scrollbars */
 .no-scrollbar::-webkit-scrollbar {
   display: none;
 }
@@ -32,3 +39,11 @@ body::before {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
+/* Safe Area for notch phones */
+.pt-safe-top {
+  padding-top: env(safe-area-inset-top);
+}
+.mb-safe {
+  padding-bottom: env(safe-area-inset-bottom);
+}