@media screen and (min-width: 601px) {
  .sub-header {
    color: #787878 !important;
  }
  .heading {
    margin-top: 100px;
  }
}

.bg-saas-shape {
  margin-top: 30px;
}

@media screen and (max-width: 600px) {
  .bg-saas-shape {
    margin-top: -20px;
    margin-right: 20px;
  }
}
.comp-img {
  position: relative;
  animation: mymove 2s 1;
}
.bg-saas-shape {
  position: relative;
  animation: mymove 2s 1;
}
.title-heading {
  position: relative;
  animation: mymove2 2s 1;
}

.trialform {
  background-size: 600px 600px;
  background-image: radial-gradient(
    ellipse at center,
    #252935 0%,
    #2d4477 47%,
    #4fe371 100%
  );
  background-position: left center;
  animation: pastel-background 5s ease-in-out infinite;
  width: 200px;
  display: block;
  border: 1px solid #fefefe40;
}

@keyframes pastel-background {
  0% {
    background-position: 0% 50%;
  }
  33% {
    background-position: 75% 100%;
  }
  66% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes mymove {
  from {
    left: -300px;
  }
  to {
    left: 0px;
  }
}
@keyframes mymove2 {
  from {
    right: -300px;
  }
  to {
    right: 0px;
  }
}
.re-edit .features {
  display: flex;
  align-items: baseline;
}

.hero {
  width: 100%;
}

.ocean {
  height: 5%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #015871;
}

.wave {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg)
    repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
    swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {
  0%,
  100% {
    transform: translate3d(0, -25px, 0);
  }
  50% {
    transform: translate3d(0, 5px, 0);
  }
}

.ocean {
  direction: ltr;
}

html {
  overflow-x: hidden;
}

.float {
    display: flex;
    justify-content: center;
    align-items: center;
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;

 
}
}
