.form {
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

h1 {
  color: #1b6086;
}
.contactus {
  position: absolute;
  width: 50%;
  height: 60%;
  left: 26%;
  top: 15%;
  font-size: 80%;
  line-height: 250%;
  text-align: center;
  color: #000000;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.rights {
    position: absolute;
    width: 50%;
    height: 2%;
    left: 44%;
    top: 98%;
    font-family: serif;
    font-style: normal;
    font-size: 70%;
    line-height: 7%;
    color: #777777;
  }


#thanks {
  position: absolute;
  left: 25.5%;
  top: 24%;
  color: #1a628b;
  font-family: Abhaya Libre;
  font-size: 17px;
}
.form {
  position: absolute;
  width: 50%;
  height: 60%;
  left: 27%;
  top: 33%;
  font-size: 13px;
}
.tex {
  font-family: Alegreya Sans;
  font-style: italic;
  padding: 0.5% 1%;
  border-color: #afdad7;
  background-color: #afdad7;
}
.spph {
  float: right;
  margin-right: 40.9%;
  padding: 0;
}
.submit-btn {
  background-color: #0d6581;
  border: none;
  padding: 1.2% 3.2%;
  color: #fbf7f7;
  font-size: 13px;
  font-weight: bold;
  font-family: sans-serif;
  border-style: inset;
  position: absolute;
  left: 41%;
  top: 62%;
}
.submit-btn:hover {
  background-color: rgb(72, 140, 172);
}

#name {
  width: 93%;
}
#email,
#phno {
  width: 45%;
}
#labph {
  left: 45%;
}
#msg {
  padding: 0.8% 1.4%;
  width: 93%;
  column-span: 30%;
}
#cont {
  position: absolute;
  height: 23%;
  left: 32%;
  top: 77%;
}
#supp {
  position: absolute;
  height: 23%;
  left: 59%;
  top: 77%;
}

.star {
  color: #c81414;
  display: inline-block;
}


@media (max-width: 768px){
  .form{
    position: relative;
    width: 70%;
    height: 50%;
    left: 15%;
    top: 90px;
    font-size: 65%;
  }
  .contactus {
    position: relative;
    left: 23%;
    top:60px;
  }
  #thanks {
    left: 15%;
    display: none;
  
  }

  .submit-btn {
    left: 35%;
    top: 30px;
    position: relative;
  }
  #cont {
    position: relative;
    left: 6%;
    top: 170px;
    font-size: small;
  }
  #supp {
    position: relative;
    left: 59%;
    top: 70px;
    font-size: small;
  }

  .rights {
    position: relative;
    width: 30%;
    height: 2%;
    left: 40%;
    top: 130px;
    font-size: 30%;
  }
  #brand1{
    position: absolute;
    left: 50px;
    top: 7px;
  }
  #login{
    position: absolute;
    left: -170px;
  }
  #signup{
    position:relative;
    left:120px;
    top: 3px;
  }

}
@media (max-width: 400px){
  .form{
    position: relative;
    width: 70%;
    height: 50%;
    left: 15%;
    top: 20px;
    font-size: 65%;
  }
  .contactus {
    position: relative;
    left: 23%;
    top: 20px;
  }
  #thanks {
    left: 15%;
    display: none;
  }

  .submit-btn {
    position: relative;
    left: 35%;
    top: 67%;
  }
  #cont {
    position: relative;
    left: 3%;
    top: 50px;
    font-size: small;
  }
  #supp {
    position: relative;
    left: 59%;
    top: -45px;
    font-size: small;
  }

  .rights {
    position: absolute;
    width: 30%;
    height: 2%;
    left: 40%;
    top: 97%;
    font-size: 30%;
  }
  #brand1{
    position: absolute;
    left: 50px;
    top: 7px;
  }
  #login{
    position: absolute;
    left: -170px;
  }
  #signup{
    position:relative;
    left:120px;
    top: 3px;
  }

}