style.css

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");

body {
  font-family: "Open Sans", sans-serif;
  color: #828eac;
}
nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

nav img.logonav {
  width: 50px;
  margin: 10px;
}

nav ul.menu li {
  display: inline;
  list-style-type: none;
  margin: 0 20px;
  color: #828eac;
  font-size: 15px;
}

nav ul.log li {
  display: inline;
  list-style-type: none;
  font-size: 15px;
  color: #127af1;
}
nav ul.log li.signup {
  padding: 10px 16px;
  margin: 0 20px;
  border-radius: 8px;
  border: 1px;
  border-color: #127af1;
  border-style: solid;
}

h2 {
  font-weight: 600;
  color: #2d3a58;
  font-size: 50px;
  margin: 0;
}

p {
  margin: 0;
}

highlight {
  color: #127af1;
}

section.hero {
  padding: 0 200px;
  display: flex;
  flex-direction: row;
  margin-top: 50px;
  flex-wrap: nowrap;
}

section.hero img.hero-img {
  width: 400px;
  height: 100%;
}

section.hero .hero-content {
  display: flex;
  flex-direction: column;
  padding-right: 50px;
  opacity: 0;
}
section.hero .hero-content img.hero-face-1 {
  justify-items: self-end;
  width: 75px;
}

section.hero .hero-content span.hero-google {
  margin-top: 15px;
}

section.hero .hero-content h2.hero-title {
  margin-top: 15px;
}

section.hero .hero-content p {
  margin-top: 15px;
}

section.hero .hero-content .hero-buttons {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
}

button.full-blue {
  all: unset;
  background-color: #127af1;
  color: white;
  padding: 10px 16px;
  margin: 0 20px;
  border-radius: 8px;
  transition: 0.3s;
}
button.full-blue:hover {
  all: unset;
  background-color: white;
  color: #127af1;
  padding: 10px 16px;
  margin: 0 20px;
  border-radius: 8px;
  border-color: #127af1;
  border: solid 1px;
  transition: 0.3s;
}

button.empty-blue {
  all: unset;
  color: #127af1;
  margin: 0 20px;
  text-decoration: underline;
}

section.hero .hero-partners {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
}

section.hero .hero-partners img {
  width: 100px;
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0px 42px 80px rgba(0, 0, 0, 0.03),
    0px 27.2222px 46.8519px rgba(0, 0, 0, 0.0227778),
    0px 16.1778px 25.4815px rgba(0, 0, 0, 0.0182222),
    0px 8.4px 13px rgba(0, 0, 0, 0.015),
    0px 3.42222px 6.51852px rgba(0, 0, 0, 0.0117778),
    0px 0.777778px 3.14815px rgba(0, 0, 0, 0.00722222);
}


.slide-in{
    animation: slide-in linear 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: slide-in linear 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
    -moz-animation: slide-in linear 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: slide-in linear 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: slide-in linear 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/
  }
  
  @keyframes slide-in{
    0% {
      opacity:0;
      transform:  translate(0px,58px)  ;
    }
    100% {
      opacity:1;
      transform:  translate(0px,0px)  ;
    }
  }
  
  @-moz-keyframes slide-in{
    0% {
      opacity:0;
      -moz-transform:  translate(0px,58px)  ;
    }
    100% {
      opacity:1;
      -moz-transform:  translate(0px,0px)  ;
    }
  }
  
  @-webkit-keyframes slide-in {
    0% {
      opacity:0;
      -webkit-transform:  translate(0px,58px)  ;
    }
    100% {
      opacity:1;
      -webkit-transform:  translate(0px,0px)  ;
    }
  }
  
  @-o-keyframes slide-in {
    0% {
      opacity:0;
      -o-transform:  translate(0px,58px)  ;
    }
    100% {
      opacity:1;
      -o-transform:  translate(0px,0px)  ;
    }
  }
  
  @-ms-keyframes slide-in {
    0% {
      opacity:0;
      -ms-transform:  translate(0px,58px)  ;
    }
    100% {
      opacity:1;
      -ms-transform:  translate(0px,0px)  ;
    }
  }