analy

src/components/animationComponent/animationComponent.css

@@ -1,14 +1,13 @@
 .animation-container {
-  position: relative;
   overflow: hidden;
-  height: 90vh;
+  height: 100vh;
 
 }
 
 .test {
   z-index: -1;
-  top: 2%;
-  right: 0%;
+  top: -118.2%;
+  left: 22%;
   width: 100%;
   position: absolute;
 
@@ -24,6 +23,7 @@
 }
 
 .title__container {
+  padding-left: 80px;
   z-index: 99;
   display: flex;
   flex-direction: column;
@@ -32,6 +32,7 @@
 }
 
 .title__main {
+  position: relative;
   font-style: normal;
   font-weight: 300;
   font-size: 96px;
@@ -53,6 +54,7 @@
   margin: 0;
   background-repeat: repeat;
   background-color: transparent;
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   -moz-background-clip: text;
@@ -107,37 +109,79 @@
   margin: 0;
 }
 
+.animation__pos {
+  position: relative;
+}
+
 @media screen and (min-width: 1600px) {
+
+
   .title {
-    font-size: 6vw;
+    font-size: 115.2px;
+  }
+
+  .test {
+    top: -87.2%;
+    left: 17%;
   }
 
 
 
   .title__gardient {
-    font-size: 6vw;
+    font-size: 115.2px;
 
   }
 
 
   .title__caption {
-    font-size: 0.8vw;
+    font-size: 17px;
+    width: 424px;
   }
 
 
 }
 
+@media screen and (max-width: 1599px) {
+  .title__caption {
+    width: 354px;
+  }
+
+}
+
+@media screen and (max-width: 1279px) {
+  .title__container {
+    padding-left: 56px;
+  }
+  .title__caption {
+    width: 354px;
+  }
+
+  .test {
+    top: -65.2%;
+    left: 19%;
+
+  }
+
+}
+
 
 @media screen and (max-width: 1024px) {
   .title__container {
     padding-top: 170px;
     margin-left: 20px;
+    padding-left: 0;
   }
 
   .animation-container {
     box-sizing: border-box;
 
   }
+
+  .test {
+    top: 3%;
+    left: 8%;
+
+  }
 }
 
 
@@ -150,6 +194,10 @@
     padding-top: 70px;
   }
 
+  .title__caption {
+    width: 100%;
+  }
+
   .test {
     visibility: hidden;
     opacity: 0;
@@ -159,9 +207,8 @@
     background-image: url(./Map.svg);
     background-repeat: no-repeat;
     padding: 10px;
-    background-position: 19%;
-
-
+    background-position-x: 29%;
+    background-position-y: -56%;
   }
 
   .title {
@@ -179,4 +226,5 @@
   .title__container {
     margin-left: 0;
   }
+
 }