@charset "UTF-8";
body {
  background: #ffffff;
  font-family: "Open Sans", sans-serif;
  color: #000000;
  margin: 0;
}

p {
  font-family: "Open Sans", sans-serif;
  color: #000000;
  line-height: 1.7rem;
}

h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #C09992;
}

h2, h3, h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  color: #C09992;
}

a {
  color: #8C7977;
  text-decoration: none;
  transition: color 0.5s;
}

a:hover, a:focus {
  color: #3C3C3C;
}

img {
  width: 60%;
}

ul {
  list-style-type: none;
  margin-left: -2.5rem;
}

li {
  margin-top: 0.5rem;
}

/* Header Styling */
header h1 {
  display: inline-block;
  font-size: 3rem;
}

header h2 {
  margin-top: -1rem;
  font-size: 1rem;
}

.sub-header {
  margin-bottom: 1.5rem;
  padding: 9rem 10% 5rem;
}

/* Navigation Styling */
.main-nav {
  background-color: #ffffff;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  margin-top: 0;
  z-index: 2;
  visibility: visible;
  opacity: 1;
  transition: visibility 0.2s, opacity 0.3s linear;
}

/* Navigation Link Styling */
.main-nav ul {
  margin-left: 10%;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #ffffff;
}

.main-nav li {
  margin-top: 0;
}

.main-nav .nav-link {
  display: inline-block;
  font-size: 1.2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid #ffffff;
  color: #C09992;
  transition: border-bottom 0.5s, color 0.5s;
}

.main-nav .nav-link:hover, .main-nav .nav-link:focus {
  color: #7B7B7B;
  border-bottom: 2px solid #7B7B7B;
}

/* Navigation Logo Styling */
.nav-logo {
  display: block;
  float: left;
  padding-left: 9.5%;
  margin-top: 1.3rem;
}

.nav-logo img {
  max-width: 35%;
}

/* Menu Styling */
.main-nav .nav-link-section {
  clear: both;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

/* Menu Icon Styling */
.main-nav .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  margin-top: 1.3rem;
  padding: 1.5rem 10%;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
}

.main-nav .menu-icon .navicon {
  background: #C09992;
  display: block;
  height: 0.2rem;
  width: 1.2rem;
  position: relative;
  transition: background 0.2s ease-out;
}

.main-nav .menu-icon .navicon:before,
.main-nav .menu-icon .navicon:after {
  background: #C09992;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
}

.main-nav .menu-icon .navicon:before {
  top: 0.4rem;
}

.main-nav .menu-icon .navicon:after {
  top: -0.35rem;
}

/* Navigation Menu Button Styling */
.main-nav .menu-btn {
  display: none;
}

.main-nav .menu-btn:checked ~ .nav-link-section {
  max-height: 9rem;
}

.main-nav .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.main-nav .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.main-nav .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.main-nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.main-nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* Content Container Styling */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 2.5rem 0;
  margin-right: 10%;
  margin-left: 10%;
}

/* Page Description Styling */
.page-description {
  flex: 2;
  order: 1;
  padding-right: 8%;
}

/* Button Styling */
.action-btn-container {
  margin-left: -1rem;
  margin-top: 3rem;
}

.action-btn {
  padding: 0.8rem 3rem;
  margin-right: 0.5rem;
  border: 2px solid #DDC7C4;
  background: #DDC7C4;
  color: #8C7977;
  font-family: "Open Sans", sans-serif;
  transition: 0.3s;
}

.action-btn:hover {
  border: 2px solid #C09992;
  background: #ffffff;
  color: #C09992;
}

.action-btn:focus {
  border: 2px solid #8C7977;
  background: #FCFCFC;
  color: #7B7B7B;
}

.arrow-right {
  margin: 1em 0;
}
.arrow-right::after {
  display: inline-block;
  padding-left: 0.25rem;
  content: "→";
  transition: transform 0.3s ease-out;
}
.arrow-right:hover::after {
  transform: translateX(0.5rem);
}

.arrow-left {
  margin: 1em 0;
}
.arrow-left::before {
  display: inline-block;
  padding-right: 0.25rem;
  content: "←";
  transition: transform 0.3s ease-out;
}
.arrow-left:hover::before {
  transform: translateX(-0.5rem);
}

/* Footer Styling */
footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: #7B7B7B;
  color: #F5F5F5;
  font-size: 0.8rem;
  padding: 1rem 10% 1rem 9%;
}

/* Footer Copyright Styling */
.footer-copyright {
  flex: 1;
  order: 1;
}

.footer-copyright p, .footer-links a:hover {
  color: #DDC7C4;
}

/* Footer Links */
.footer-links {
  flex: 2;
  order: 2;
  text-align: right;
}

.footer-links a {
  line-height: 3rem;
  margin-left: 4rem;
  color: #F2EDEC;
}

/* MEDIA QUERIES */
/* Screen size below 480px */
@media screen and (max-width: 30rem) {
  body {
    font-size: 0.75rem;
  }

  p {
    line-height: 1.4rem;
  }

  .sub-header {
    margin-bottom: 0;
    padding: 8rem 10% 3rem;
  }

  .sub-header h1 {
    font-size: 1.4rem;
  }

  .sub-header h2 {
    margin-top: -0.5rem;
    font-size: 0.8rem;
  }

  .confirmation-container {
    margin-left: 0;
    margin-right: 0;
    padding: 0.65rem;
  }

  footer {
    flex-direction: column;
    font-size: 0.75rem;
  }

  .footer-copyright {
    order: 2;
    margin-top: -0.5rem;
  }

  .footer-links {
    order: 1;
    text-align: left;
  }

  .footer-links a {
    margin-left: 0;
    margin-right: 1.5rem;
  }
}
/* Screen size of 480px - 768px */
@media screen and (min-width: 30rem) and (max-width: 48rem) {
  footer {
    flex-direction: column;
    text-align: center;
  }

  .footer-copyright {
    order: 2;
  }

  .footer-links {
    order: 1;
    text-align: center;
  }

  .footer-links a {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
/* Screen size of 480px - 800px */
@media screen and (min-width: 30rem) and (max-width: 50rem) {
  .sub-header {
    margin-bottom: 0.5rem;
    padding: 9rem 10% 4rem;
  }

  .sub-header h1 {
    font-size: 2.5rem;
  }

  .container {
    flex-direction: column;
  }
}
/* For Responsive Navigation */
/* Screen size greater than 768px */
@media (min-width: 48rem) {
  .nav-logo img {
    max-width: 45%;
    margin-top: -0.3rem;
  }

  .main-nav ul {
    margin: 1.5rem 10% 1.5rem;
  }

  .main-nav li {
    float: left;
  }

  .main-nav li a {
    padding: 0;
    margin-left: 3rem;
  }

  .main-nav .nav-link-section {
    clear: none;
    float: right;
    max-height: none;
  }

  .main-nav .menu-icon {
    display: none;
  }
}