html {
  min-width: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: white;
  padding: 0;
  margin: 0; 
  font-family: "Raleway", sans-serif;
  z-index: 1;  /* z-index: ; */
}

/* Navigation bar */
.nav {
  display: flex; /* organize child into columns with flex */
  justify-content: center; /* Center items */
  height: 120px;
  min-width: 100%;
}

/* Navigation bar links */
.nav .nav-links {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 420px;
  padding: 0 0 0 30%; /* Padding */
  margin: -20px 0 0 0; /* Margin */
  list-style-type: none;
}

.nav .nav-links a,
a {
  color: white;
  text-decoration: none;
}

/* Navigation bar background */
.img-header {
  min-width: 100%;
  position: absolute; /* Absolute */
  background-image: url("../img/header.svg");
  height: 120px;
  z-index: -1;  /* z-index: ; */
}

/* Footer background */
.img-footer {
  min-width: 100%;
  position: absolute; /* Absolute */
  z-index: -1;  /* z-index: ; */
}

/* Navigation bar logo */
.logo {
  height: 70px;
}

.img-logo {
  margin: 8px 0 0 0;
  height: 50px;
  padding: 12px;
  z-index: 1;   /* z-index: ; */
  -webkit-animation: scale-down 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: scale-down 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/* Logo mouse over */
.img-logo:hover { /* Psuedo-class */
  -webkit-animation: scale-up 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: scale-up 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/* Logo clicked */
.img-logo:active {
  -webkit-animation: scale-up-clicked 0.05s cubic-bezier(0.39, 0.575, 0.565, 1)
    both;
  animation: scale-up-clicked 0.05s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/* Container */

/* Content div */
.container {
  min-height: 65vh;
  max-width: 100vw;
  color: #7d6f5c;
  padding: 60px 60px 0 60px;
}

button {
  padding: 16px 20px 16px 20px;
  background-color: #ede3b8;
  color: #7d6f5c;
  border-radius: 12px;
  border: none; /* Border */
  font-family: "Varela Round", sans-serif;
  font-weight: 600;
  transition: 0.1s;
}
button:hover {
  background-color: RGBA(236, 227, 184, 0.8);
  transition: 0.1s;
}
button:active,
button:focus {
  color: rgba(125, 111, 92, 0.8);
  background-color: rgba(236, 227, 184, 0.6);
  transition: 0.1s;
  outline: none;
}
button span {
  font-size: 16px;
  margin: 0;
}
.btn-learn-more {
  margin-top: 4%;
}

/* Right image */
.img-welcome {
  height: auto;
  max-width: 40%;
  padding: 0 0 0 0%;
  object-fit: scale-down;
}

.bottom {
  color: #6b5f4e;
  height: 120px;
  padding: 48px 0 0 0;
  display: flex;
  justify-content: center;
}

.bottom .airplane {
  position: relative; /* Relative */
  top: 3px;
  height: 20px;
  padding: 0 12px 0 12px;
}

/* footer */

.footer {
  display: flex;
  justify-content: center;
  font-family: "Raleway", sans-serif;
}

.img-footer {
  background-image: url("../img/footer.svg");
  height: 180px;
}

.footer-content {
  width: 700px;
  padding: 52px 10vw 0 10vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  color: white;
}

.footer-content .img-logo-footer {
  display: flex;
  flex-direction: column;
}

.footer-content .img-logo-footer img {
  position: relative; /* Relative */
  top: -4px;
  height: 48px;
}

.footer-content .img-logo-footer p {
  position: relative; 
  right: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  align-self: flex-end;
}
.footer-content p {
  color: #fbe63f;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.footer-content ul {
  margin: 0 -0 0 0;
}

.footer-content ul li {
  color: #fff;
  list-style-type: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 28px;
}

.footer-content .img-arrow {
  position: relative;
  top: 2px;
  right: 4px;
  height: 16px;
}

.footer-content a p {
  display: inline-block;
}

.facebook,
.instagram,
.twitter,
.github {
  margin: 8px 2px 0 2px;
}