improve transactional content part

css/1-2-main_title.css

@@ -26,5 +26,5 @@
 }
 
 #main_title_container h2 {
-  margin-top: 33vh;
+  margin-top: 5vh;
 }

css/4-content.css

@@ -78,13 +78,20 @@
   line-height: 95%;
   margin-bottom: 40px;
   margin-top: 20vh;
-  opacity: 0;
+  opacity: 0.4;
   order: 0;
   text-align: center;
   text-transform: uppercase;
+	width: 50%;
+	left: 5vw;
+	font-size: 3rem;
+	max-width: 100vw;
+	width: 100%;
 }
 
 #content_second {
+	width: 50%;
+	right: -20vw;
   backdrop-filter: blur(5px);
   color: rgba(255, 255, 255, 0.35);
   flex: none;
@@ -96,9 +103,11 @@
   height: 170px;
   line-height: 65px;
   margin-bottom: 100px;
-  opacity: 0;
+  opacity: 0.25;
   order: 1;
   text-align: center;
+	max-width: 100vw;
+	width: 100%;
 }
 
 .flip-handle {

js/main.js

@@ -111,28 +111,35 @@ if (enable_animations) {
 			}
 		})
 
-	gsap.to('#content_first',
+	gsap.fromTo('#content_first',
+		{
+			scale: 0.5,
+			opacity: 0.5,
+		},
 		{
-			left: -20,
-			top: -50,
 			opacity: 1,
-			duration: 3,
+			scale: 0.6,
-			scale: 1.15,
 			ease: 'easeInOut',
 			scrollTrigger: {
 				trigger: '#content',
-				scrub: 0.5,
+				scrub: 1,
 				markers: development_debug,
 			}
 		})
 
-	gsap.to('#content_second',
+	gsap.fromTo('#content_second',
+		{
+			scale: 0.8,
+			left: -50,
+			opacity: 0.5,
+			top: -20,
+		},
 		{
 			left: -40,
 			top: -50,
 			opacity: 1,
 			duration: 2,
-			scale: 1.15,
+			scale: 0.9,
 			ease: 'spline',
 			scrollTrigger: {
 				trigger: '#content',
@@ -148,8 +155,8 @@ if (enable_animations) {
 			left: -50
 		},
 		{
-			scale: 1.2,
+			scale: 1,
-			// left: 50,
+			left: 0,
 			ease: 'linear',
 			scrollTrigger: {
 				trigger: '#content_all .columns',