@import "normalize.css";
@import "skeleton.css";
@import "grid.css";

html {
  scroll-behavior: smooth;
}

.section {
  padding-top: 3em;
  padding-bottom: 3em;
}

.section-heading.center {
  text-align: center;
}

.button-white {
  background-color: #ffffff;
  color: #000000;
}

.header {
  position: relative;
}

.navbar {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
  transition: all ease-in 0.2s;
}

.navbar .menu {
  list-style: none;
  display: flex;
  margin: 0;
}

.menu li {
  margin: 0;
}

.menu a {
  display: block;
  text-decoration: none;
  padding: 1em;
  margin: 0;
  color: #ffffff;
}

.header .sticky.navbar {
  background: #ffffff;
  position: fixed;
}

.header .sticky.navbar .menu a {
  color: #000000;
}

#hero {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("https://i.picsum.photos/id/615/1280/720.jpg?blur=5");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 75vh;
  display: flex;
  align-items: center;
}

.white-text {
  color: #ffffff;
}

.form {
  min-height: 200px;
  background-color: #ffffff;
  border-radius: 4px;
  display: inline-flex;
  padding: 25px;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.about-image {
  border-radius: 4px;
  box-shadow: #252524 -5px 5px 20px 0px;
}

#call-to-action {
  background-color: #33c3f0;
  color: #ffffff;
}

#call-to-action .button {
  display: block;
  margin: auto;
}

#plans {
  background-color: #b4e4f3;
}

.card {
  padding: 0.5em;
}

.card-inner {
  padding: 1.5em;
  border-radius: 4px;
  cursor: pointer;
  background-color: #ffffff;
}

.card-inner:hover {
  box-shadow: #252524 0 0 20px 5px;
  transition: box-shadow ease-in 0.2s;
}

.card-inner button {
  display: block;
  margin: auto;
}

.carousel {
  margin: 30px auto;
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.carousel-track .item img {
  max-width: 200px;
}

@keyframes slideshow {
  100% {
    transform: translateX(calc(-250px * 4));
  }
}

.footer {
  padding: 3.5em;
  display: flex;
  justify-content: space-between;
}