@font-face {
  font-family: "Uber Eats";
  src: url('../fonts/UberMoveMedium.otf');
}
header {
  min-height: 8vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 1.5rem 0rem;
  width: 100%;
  position: fixed;
  top: 0%;
  background: rgb(255, 255, 255);
}
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 96%;
  margin: auto;
}
header nav a {
  padding: 1rem 1.2rem;
  border-radius: 3rem;
}
header nav .signup {
  background-color: black;
  color: white;
  margin-left: 2rem;
}

footer {
  width: 65%;
  margin: auto;
}

.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  border-bottom: 1px solid rgb(228, 228, 228);
  padding-bottom: 2rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.copyright {
  flex: 1 1 30rem;
  margin-bottom: 6rem;
}
.copyright h3 {
  margin-bottom: 24rem;
}

.extras {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  flex: 3 1 40rem;
  flex-wrap: wrap;
}
.extras ul {
  flex: 1 1 20rem;
}
.extras ul li {
  margin-bottom: 2rem;
}
.extras ul:nth-child(2) li:nth-child(7) img {
  padding-right: 1rem;
}

.others {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-bottom: 5rem;
}

.social {
  flex: 1 1 40rem;
}
.social img {
  margin-right: 2rem;
}

.about {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 2 1 40rem;
}
.about a {
  margin-bottom: 2rem;
}

html {
  font-size: 62.5%;
}

* {
  box-sizing: border-box;
  padding: 0rem;
  margin: 0rem;
}

body {
  font-family: "Uber Eats", sans-serif;
}

a {
  text-decoration: none;
  color: black;
}

li {
  list-style: none;
}

button {
  cursor: pointer;
}

h1 {
  font-size: 2.5rem;
  letter-spacing: 0.1rem;
}

h2 {
  font-size: 5rem;
  letter-spacing: 0.25rem;
}

h3 {
  font-size: 3.5rem;
  letter-spacing: 0.2rem;
}

h4 {
  font-size: 2.5rem;
  letter-spacing: 0.2rem;
}

p, a, input, h5 {
  font-size: 1.5rem;
}

button {
  font-size: 1.7rem;
}

.hero {
  background: url('../images/hero-background.jpg');
  background-position: center;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

.hero-content {
  width: 96%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}
.hero-content p a {
  text-decoration: underline;
}

.order {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 4rem 0rem 3rem 0rem;
}
.order button {
  background-color: black;
  color: white;
  border: none;
  border-radius: 1rem;
  padding: 1.5rem;
  height: 5.4rem;
  font-weight: 550;
}

.location {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 50rem;
  background: white;
}
.location img {
  padding: 1.5rem;
}
.location input {
  border: none;
  padding-right: 1rem;
  height: 5.4rem;
  width: 100%;
}
.location input::-moz-placeholder {
  color: black;
}
.location input::placeholder {
  color: black;
}

.time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: white;
  width: 20rem;
  margin: 0rem 1rem;
  cursor: pointer;
}
.time img {
  padding: 1.5rem;
}

.benefits {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.cards {
  width: 96%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin: 8rem auto 15rem auto;
  flex-wrap: wrap;
}

.card {
  width: 3;
  flex: 1 1 40rem;
  margin: 2rem 0rem;
}
.card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.card h4 {
  margin: 1rem 0rem;
}
.card a {
  font-size: 1.6rem;
  text-decoration: underline;
}

.card:nth-child(2) {
  margin: 0rem 2rem;
}

.available {
  width: 96%;
  margin: auto;
}

.near-me .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-bottom: 3rem;
}
.near-me .head a {
  text-decoration: underline;
}

.map {
  margin-bottom: 2rem;
}
.map img {
  width: 100%;
}

.cities-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}
.cities-list ul {
  flex: 1 1 20rem;
}
.cities-list ul li {
  margin-bottom: 3rem;
}
.cities-list ul li a {
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
}

.countries .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-bottom: 3rem;
}
.countries .head a {
  text-decoration: underline;
}

.countries-list {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: row;
  padding-bottom: 6rem;
  border-bottom: 1px solid rgb(228, 228, 228);
  margin-bottom: 6rem;
  flex-wrap: wrap;
}
.countries-list ul {
  flex: 1 1 20rem;
  margin-right: auto;
}
.countries-list ul li {
  margin-bottom: 3rem;
}
.countries-list ul li a {
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
}

@media screen and (max-width: 1077px) {
  .copyright h3 {
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 900px) {
  .hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .hero-content .order {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .hero-content .order .time {
    margin: 2rem 0rem;
  }
}
@media screen and (max-width: 874px) {
  .card {
    margin: 2rem;
  }
  .card .extras {
    margin-right: 8rem;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 55%;
  }
}
@media screen and (max-width: 500px) {
  html {
    font-size: 45%;
  }
  .location {
    width: 90vw;
  }
}/*# sourceMappingURL=style.css.map */