:root {
  --primaryColor: #fff;
  --bgColor: #3a88a2;
  --secondaryColor: #b82132;
  --primaryFont: "Ubuntu", serif;
}

* {
  margin: 0;
  padding: 0;
}

ul {
  padding: 15px;
  overflow: hidden;
  background-color: #c56307;
  list-style-type: none;
}

ul li {
  float: right;
  padding: 18px 20px;
}

li a {
  text-decoration: none;
  color: var(--primaryColor);
  font-family: var(--primaryFont);
  font-weight: 400;
}

li a:hover {
  color: var(--secondaryColor);
  transition: all 0.4s ease-in-out;
}

.hero {
  height: 89vh;
  position: relative;
  background-image: url(./banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}
.content {
  width: 560px;
  position: absolute;
  left: 20%;
  top: 25%;
}
.content h1 {
  font: var(--primaryFont);
  font-size: 52px;
  font-weight: 800;
}

h1 span {
  color: var(--bgColor);
}
.content p {
  color: #898989;
  font-family: var(--primaryFont);
  margin-bottom: 30px;
}
.content button {
  height: 52px;
  width: 280px;
  border: 1px solid var(--bgColor);
  background: transparent;
  color: var(--primaryColor);
  font-family: var(--primaryFont);
  font-size: 20px;
  letter-spacing: 2px;
  border-radius: 5px;
  cursor: pointer;
}
.content button:hover {
  background-color: var(--bgColor);
  transition: all 0.4s ease-in-out;
}
.content button:active {
  background-color: var(--bgColor);
}