asm.css

body{
    background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    width:100%;
overflow-x:hidden;

}
nav{
    background-color:#ffff;

  
    border-bottom: 0.1vh solid rgb(93, 88, 88);
    width: 1500px;
    padding:20px ;
    position: fixed;
    z-index: 1100;
  

}
nav a {
text-decoration: none;
padding:3px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
float: right;
margin-right: 30px;
color:rgb(104, 100, 100);
font-size:15px;
font-weight:bold;
padding-top: 20px;
}

.logo{
size: 30px;
}
.lottie{
float: right;
position: relative;
background: transparent;
border: transparent;
margin-right: 90px;
margin-top: ;
bottom:-100px ;

}
.container{
position: relative;
padding: ;
bottom: -140px;
}
/*add animation to text*/
h1 {
color: #333;
font-family: tahoma;
font-size: 3rem;
font-weight: 100;
line-height: 1.5;
text-transform: uppercase;
white-space: nowrap;
overflow:hidden;
position: relative;
width: 550px;
}

h1 span {
font-size: 40px;
margin-left: 40px;

}

.message {
background-color: rgb(228, 233, 126);
color: #333;
display: block;
font-weight: 900;
overflow: hidden;
position: absolute;
padding-left: 0.5rem;
top: 0.2rem;
left: 270px;
animation: openclose 5s ease-in-out infinite;

}

.word1, .word2, .word3 {
font-family: tahoma;
}

@keyframes openclose {
0% {
top: 0.2rem;
width: 0;
}
5% {
width: 0;
}
15% {
width: 230px;
}
30% {
top: 0.2rem;
width: 230px;
}
33% {
top: 0.2rem;
width: 0;
}
35% {
top: 0.2rem;
width: 0;
}
38% {
top: -4.5rem;

}
48% {
top: -4.5rem;
width: 190px;
}
62% {
top: -4.5rem;
width: 190px;
}
66% {
top: -4.5rem;
width: 0;
text-indent: 0;
}
71% {
top: -9rem;
width: 0;
text-indent: 5px;
}
86% {
top: -9rem;
width: 285px;
}
95% {
top: -9rem;
width: 285px;
}
98% {
top: -9rem;
width: 0;
text-indent: 5px;
}
100% {
top: 0;
width: 0;
text-indent: 0;
}
}

/*Signup/login btn*/
.signup{
border: 2px solid rgb(109, 105, 105);
padding: 10px;
background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);

}
.login{
border: 2px solid rgb(109, 105, 105);
padding: 10px;
}
.login:hover{
color: #333;
}
.signup:hover{
background: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);

}
a:hover{
color:#333;
/*text-shadow: 0 0 3px #646262;*/

}
/*Content css*/
.text1{
font-family: tahoma;
font-size:80px;
font-weight: bolder;
position: relative;
bottom: -170px;
padding: 40px

}
.text2{
font-family: tahoma;
font-size:80px;
font-weight: bolder;
position: relative;
bottom: -190px;
padding: 40px

}
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}



.content {
font-size: 25px;
position: relative;
margin-left: 450px;
bottom: -180px;

}

.content h2 {
color: #fff;
font-size: 5em;
position: absolute;
transform: translate(-50%, -50%);
}

.content h2:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px #03a9f4;
}

.content h2:nth-child(2) {
color: #03a9f4;
animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
0%,
100% {
clip-path: polygon(
    0% 45%,
    16% 44%,
    33% 50%,
    54% 60%,
    70% 61%,
    84% 59%,
    100% 52%,
    100% 100%,
    0% 100%
);
}

50% {
clip-path: polygon(
    0% 60%,
    15% 65%,
    34% 66%,
    51% 62%,
    67% 50%,
    84% 45%,
    100% 46%,
    100% 100%,
    0% 100%
);
}
}
/**/
@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');

.word {
font-family: 'Anton', sans-serif;
perspective: 1000px; 
}

.word span {
cursor: pointer;
display: inline-block;
font-size: 100px;
user-select: none;
line-height: .8;
}

.word span:nth-child(1).active {
animation: balance 1.5s ease-out;
transform-origin: bottom left;
}

@keyframes balance {
0%, 100% {
transform: rotate(0deg);
}

30%, 60% {
transform: rotate(-45deg);
}
}

.word span:nth-child(2).active {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}

@keyframes shrinkjump {
10%, 35% {
transform: scale(2, .2) translate(0, 0);
}

45%, 50% {
transform: scale(1) translate(0, -150px);
}

80% {
transform: scale(1) translate(0, 0);
}
}

.word span:nth-child(3).active {
animation: falling 2s ease-out;
transform-origin: bottom center;
}

@keyframes falling {
12% {
transform: rotateX(240deg);
}

24% {
transform: rotateX(150deg);
}

36% {
transform: rotateX(200deg);
}

48% {
transform: rotateX(175deg);
}

60%, 85% {
transform: rotateX(180deg);
}

100% {
transform: rotateX(0deg);
}
}

.word span:nth-child(4).active {
animation: rotate 1s ease-out;
}

@keyframes rotate {
20%, 80% {
transform: rotateY(180deg);
}

100% {
transform: rotateY(360deg);
}
}

.word span:nth-child(5).active {
animation: toplong 1.5s linear;
}

@keyframes toplong {
10%, 40% {
transform: translateY(-48vh) scaleY(1);
}

90% {
transform: translateY(-48vh) scaleY(4);
}
}

/* Other styles */


/*Features*/
h4{ 
text-align: center;
font-size: 30px;
font-family: tahoma;
font-weight: bold;
padding: 25px;
color: #f1ebeb;
opacity: 90%;
}
h3{ 
float: right;
position: relative;
font-size: 30px;
font-family: tahoma;
font-weight: bold;
padding: 25px;
color: #f1ebeb;
opacity: 90%;
margin-left: 800px;

}

/*Scroll Animation*/

.feature.active{
transform: translateY(0);
opacity: 1;
}
/*Arranging features*/
.feature{
position: relative;
bottom: -200px;
font-weight: bolder;
font-size: 30px;
font-family: tahoma;
text-align: center;
padding: 20px;
transform: translateY(150px);
opacity: 0;
transition: 1s all ease;
}
.feature2{
height: 300px;
transform: translateY(150px);
opacity: 0;
transition: 1s all ease;
}
.feature2.active{
transform: translateY(0);
opacity: 1;
}
/*services which mentione by class imgchild*/
.imgchild{
float: right;
border: transparent;
background: none;
position: relative;
top:-100px;
}
.imgchild2{
float: left;
border: transparent;
background: none;
position: relative;
top: -100px;
}
.imgchild3{
float: right;
border: transparent;
background: none;
position: relative;
bottom: -100px;
}
.imgchild4{
float: left;
border: transparent;
background: none;
position: relative;
bottom: -100px;
}
.imgchild5{
float: left;
border: transparent;
background: none;
position: relative;
bottom: -100px;
}
/*Lines css*/
#line{
position: relative;
width: 700px;
bottom: 600px;
font-size:50px;
font-weight: lighter;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 50px;
float: left;
}
#line1{
position: relative;
width: 700px;
font-size:50px;
font-weight: lighter;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 50px;
float: right;
top: -300px;
}
#line2{
position: relative;
width: 700px;
font-size:50px;
font-weight: lighter;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 50px;
float: right;
top: -80px;

}
#line3{
position: relative;
width: 700px;
font-size:50px;
font-weight: lighter;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 50px;
float: right;
top: 130px;
}
#line4{
position: relative;
width: 700px;
font-size:50px;
font-weight: lighter;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 50px;
float: right;
top: 130px;
}

/*headings*/
#heading{
position: relative;
bottom: -750px;
font-family: tahoma;
font-size: 30px;
}

#heading1{
position: relative;
bottom: 50px;
font-family: tahoma;
font-size: 30px;
}
#heading2{

position: relative;
bottom: -1500px;
font-family: tahoma;
font-size: 30px;
}
/*Using f id components*/
#f2{
width: max-content;
position: relative;
top: -300px;

}
#f3{
position: relative;
bottom: -20px;
}
/*footer*/
footer{
background-color: #333;
color: white;
height: 300px;
position:relative;
bottom: -1780px;
font-weight:lighter;
}
#fr{
position: relative;
font-size: 10px;
padding: 20px;
font-family: tahoma;
font-weight: bolder;
bottom: -200px;
left: 7px;

}
#social{
display:flex;
grid-gap: 10px;
position: relative;
left: -90px;
bottom: -190px;
padding-left: 50px;
}


.copyright{
margin-top: 10px;
font-size: 10px;
display: flex;
color: white;
position: relative;
bottom: -300px;
width: 100%;
right: -675px;
background-color:f333;
}
.flogo{
    position: relative;
    float: left;
    left: 80px;
    top: -1200px;
}
@media screen and (max-width: 480px) {
    body{ width: 346px;}
    nav{position:fixed; width: 1090px;}
    nav a {  padding: auto; overflow: hidden;}
    .lottie{ position: relative; left: 770px; width: 600px; bottom: -150px;}
    .content {font-size:small; left: -250px; bottom: -130px; top: -250px;}
    .text1{position: relative; bottom: -100px; left: -10px; top: -300px;}
    .text2{position: relative; bottom:-150px; left: -10px; top: -200px;}
    .container{position: relative;left: -10px; top: -220px;}
    #f1{position: relative; left: 550px; top: -290px;} #line{position: relative;bottom:490px; left: 120px;}
    #f2{position: relative; left: 130px;} #line1{position: relative; left:530px; top: -500px;}
    #f3{position: relative; left: 500px;} #line2{position: relative; left: 500px; top:5px}
    footer{position: relative; width: 1040px; top: 3000px;}.copyright{bottom: -420px; left: 450px;}.flogo{position: relative; top: -2850px; left: 450px;}#heading{position: relative; top: 1100px; left: 350px; width: 400px;}
    #f4{position: relative; left: 200px;}#line3{position: relative; left: 550px;}#heading1{position: relative;}
    #fr{position: relative; bottom:2700px; margin-left: 470px;}
    #social{position: relative; top: -2670px; margin-left: 500px;}
  }