ajust overlap of sections

css/cover.css

@@ -1,41 +1,42 @@
 
 
 #hand {
-  background: url('/img/hand 1.png');
+  background: url('/img/hand 1.png') center;
   background-size: cover;
-
+  position: relative;
-  position: absolute;
   width: 100vw;
   height: 1300px;
   left: 1px;
   top: -2px;
-
+  z-index: 0
+}
+#main_title_container{
+  position:absolute;
+  z-index: 2;
+  top: 0;
+  backdrop-filter: blur(3px);
 }
-
 #cover {
-  background: url('/img/BG 1.png') no-repeat;
+  background: url('/img/BG 1.png') center no-repeat;
   background-size: cover;
 }
 
-
+#cover
+.title-container{
+  text-align:center;
+}
 #cover h2 {
-  position: absolute;
-  top: 10vh;
-  left: 42vw;
 
-  /* Subtitle/desktop_1 */
-  font-family: 'GT Walsheim Pro', Arial;
   font-style: normal;
   font-weight: 600;
   font-size: 40px;
   line-height: 120%;
-
-  /* or 48px */
   text-align: center;
   letter-spacing: -0.04em;
 
-  /* Secondary 100 */
   color: #FFFDFC;
+  z-index: 2;
+  position: relative;
 }
 
 #cover .button {
@@ -43,21 +44,17 @@
 
   position: relative;
   right: 0;
-  top: calc(1 / 3 * 100vh);
+  top: 33vh;
   bottom: 0;
   width: 150px;
   height: 150px;
   padding: 1rem;
   color: white;
-  font-family: 'GT Walsheim Pro', Arial;
   font-style: normal;
   font-weight: 400;
   font-size: 18px;
   line-height: 26px;
   background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%);
-  backdrop-filter: blur(2.96px);
+  backdrop-filter: blur(3px);
-
-  /* Note: backdrop-filter has minimal browser support */
   border-radius: 100%;
-  left: 3rem;
 }

css/welcome.css

@@ -1,12 +1,48 @@
 
-/************ section 2 ************/
 
+#welcome{
+  text-shadow: 0 0 1rem #333;
+  position: absolute;
+  background: #000;
+
+}
+#welcome img {
+  position: absolute;
+}
+#welcome h2 {
+  font-weight: 600;
+  font-size: 100px;
+  line-height: 90px;
+  text-align: center;
+  letter-spacing: -0.04em;
+  color: #F9F3F1;
+  z-index: 2;
+  position: relative;
+  width: 1060px;
+
+  margin-top:400px;
+
+}
+
+#welcome .color-emphasis,
+#content .color-emphasis {
+  color: #1E33DA;
+}
+
+#welcome .phone-container {
+  background: url('/img/section2_phone.png');
+  background-size: cover;
+}
+
+/************ phones ************/
 .phones-land{
   z-index:-1;
   position: static;
+  float:left;
 }
 
 #phone-watches-1 {
+  position: absolute;
   width: 345px;
   height: 690px;
   left: 137px;
@@ -36,30 +72,4 @@
   top: 1523px;
   filter: blur(6px);
 }
-#welcome img {
-  position: absolute;
-}
-#welcome h2 {
-  font-weight: 600;
-  font-size: 100px;
-  line-height: 90px;
-  text-align: center;
-  letter-spacing: -0.04em;
-  color: #F9F3F1;
-  z-index: 2;
-  position: relative;
-  width: 1060px;
 
-  margin-top:400px;
-
-}
-
-#welcome .color-emphasis,
-#content .color-emphasis {
-  color: #1E33DA;
-}
-
-#welcome .phone-container {
-  background: url('/img/section2_phone.png');
-  background-size: cover;
-}

js/main.js

@@ -5,15 +5,15 @@ let development_debug = true;
 gsap.fromTo("#main_title", {
   opacity: 0,
   top: 200
-},{
+}, {
-  opacity:1,
+  opacity: 1,
   top: 100,
   duration: 1.5,
   ease: "sine"
 })
 
 gsap.to("#hand", {
-  top: 400,
+  top: 300,
   duration: 1,
   scrollTrigger: {
     trigger: '#cover',
@@ -21,3 +21,21 @@ gsap.to("#hand", {
     markers: development_debug,
   }
 });
+
+gsap.fromTo("#phone-watches-1", {
+    top: 1531,
+    left: -100,
+  position:"relative",
+  },
+  {
+    left: 50,
+    top: (1531 - 200) ,
+    scale: 0.8,
+    duration: 1.5,
+    ease: "sine",
+    scrollTrigger: {
+      trigger: '#welcome',
+      scrub: 1,
+      markers: development_debug,
+    }
+  })