/* Utility Classes */

body {
  font-family: 'Ubuntu', sans-serif;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

picture {
  width: 40%;
}

/* Skip Link */

.skip-link {
  position: absolute;
  text-align: center;
  transform: translateY(-200%);
  transition: transform 0.3s;
  width: 100%;
}

.skip-link:focus-visible {
  background-color: #fff;
  color: #000;
  height: auto;
  outline: 2px solid #000;
  text-decoration: none;
  transform: translateY(10%);
  width: 20%;
  z-index: 1;
}


/* Do not show the outline on the skip link target. */
#main[tabindex="-1"]:focus {
  outline: 0;
}

.designed-heading,
.phone-illustration {
  position: absolute;
}

.designed-for-future,
.state-of-the-art {
  position: relative;
}

.designed-text-column,
.final-section-text {
  width: 50%;
}

.designed-heading,
.sub-heading {
  color: #1f3f5b;
}

.signup-button,
.start-button {
  color: #B3000C;
}

.call-to-action,
.footer,
.footer a, 
.login-button,
.nav-link,
.nav-link:focus-visible,
.state-of-the-art {
  color: #fff;
}

.footer a,
.purple-section-heading, 
.sub-heading,
.white-section-body-text {
  margin-bottom: 5%;
}

.white-section-body-text {
  color: #4b5862;
  font-weight: 300;
  width: 90%;
}

/* Hero Section */

.hero {
  background: url(images/bg-pattern-desktop.svg) center/cover no-repeat;
  border-radius: 0 0 0 100px;
}

/* Navbar */

.navbar {
  background-color: transparent;
  padding: 30px 50px;
  width: 100%;
}

.navbar-nav {
  margin-left: 40px;
}

.navbar-brand {
  padding: 15px;
}

.navbar-brand:focus-visible {
  outline: 2px solid #FFF;
}

.navbar-toggler {
  border: none;
}

.nav-link {
  margin-right: 10px;
}

.nav-link:focus-visible {
  outline: 3px solid #000;
  text-decoration: underline;
}

.dropdown-menu {
  padding: 20px;
}

.dropdown-item:focus-visible {
  outline: 2px solid #000;
}

.nav-buttons {
  width: 30%;
}

.nav-button {
  border-radius: 50px;
  width: auto;
}

.nav-button:focus-visible {
  background-color: #fff;
  border: 2px solid #000;
}

.signup-button {
  background-color: #fff;
  margin-left: 10px;
}

/* Call to Action */

.call-to-action {
  padding: 20% 15%;
  text-align: center;
}

.call-to-action-heading {
  font-family: 'Overpass', sans-serif;
  font-weight: 600;
  font-size: 64px;
  font-size: 4rem;
  margin-bottom: 1%;
}

.call-to-action-text {
  font-size: 20.8px;
  font-size: 1.3rem;
  margin-bottom: 3%;
}

.cta-button-div {
  width: 80%;
}

.call-to-action-buttons {
  border-radius: 20px;
  margin-left: 10px;
  width: 20%;
}

.call-to-action-buttons:focus-visible {
  outline: 3px solid #000;
}

/* Designed for the Future Section  */

.designed-for-future {
  padding: 5% 0;
  margin: 8% auto;
}

.designed-heading {
  bottom: 95%;
  font-size: 48px;
  font-size: 3rem;
}

.designed-text-column {
  margin: 0 auto 5%;
}

/* State of the Art Infastructure Section */

.state-of-the-art {
  background: url(images/bg-pattern-circles.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  border-radius: 0 100px 0 100px;
  padding: 10%;
}

.phone-illustration {
  transform: translate(-20%, -50%);
  width: 40%;
}

.purple-section-text-div {
  width: 50%;
}

.purple-section-heading {
  font-size: 40px;
  font-size: 2.5rem;
}

.purple-section-body-text {
  opacity: 0.5;
  width: 75%;
}

/* Final Section */

.final-section {
  padding: 20% 5%;
}

.final-section-text {
  margin-left: auto;
}

.final-section picture {
  position: absolute;
  right: 70%;
}

/* Footer */

.footer {
  background-color: #25252d;
  border-radius: 0 100px 0 0;
  padding: 5% 0;
}

.logo-column {
  margin-left: 5%;
}

.footer-text {
  text-decoration: none;
  opacity: 0.75;
}

.footer-text:focus-visible {
  outline: 2px solid #fff;
}

.footer-heading {
  font-size: 20.8px;
  font-size: 1.3rem;
  margin-bottom: 10%;
}

/* Media Queries */

/* Hover Styles */

@media (hover:hover) and (pointer:fine) {

  .navbar-brand:hover {
    border-radius: 20px;
    outline: 2px solid #fff;
  }

  .nav-link:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 0.15em;
  }

  .nav-button:hover {
    color: #000;
    border: 2px solid #FFF;
  }

  .dropdown-item:hover {
    text-decoration: underline;
    text-decoration-thickness: .15em;
  }

  .call-to-action-buttons:hover {
    background: transparent;
    outline: 2px solid #FFF;
  }

  .footer-text:hover {
    text-decoration: underline;
    text-decoration-color: #FFF;
  }

}

/* Tablets */

@media only screen and (max-width:1180px) {

  /* Utility Classes */

  picture {
    margin-bottom: 10%;
    width: 80%;
  }

  .designed-for-future,
  .final-section,
  .footer,
  .state-of-the-art {
    flex-direction: column;
  }

  .designed-for-future,
  .dropdown-menu,
  .final-section-text,
  .footer,
  .navbar-collapse,
  .state-of-the-art {
    text-align: center;
  }

  .sub-heading {
    font-size: 40px;
    font-size: 2.5rem;
  }

  .footer-text,
  .purple-section-body-text,
  .white-section-body-text {
    font-size: 25.6px;
    font-size: 1.6rem;
  }

  .designed-text-column,
  .purple-section-text-div,
  .purple-section-body-text,
  .nav-buttons {
    width: 100%;
  }

  .final-section-text,
  .footer-heading {
    margin: 5% auto;
  }

  /* Navbar */

  .navbar {
    padding: 30px;
  }

  .navbar-collapse {
    background: #fff;
    border-radius: 10px;
    padding: 5% 2%;
    transform: translateY(12%);
    z-index: 1;
  }

  .navbar-toggler {
    color: #fff;
  }

  .nav-link,
  .login-button {
    color: #1f3f5b;
  }

  .dropdown-item,
  .nav-link:hover,
  .nav-link:focus-visible {
    color: #4b5862;
  }

  /* Form containing 2 nav-buttons */
  .nav-buttons {
    background-color: #fff;
    justify-content: center !important;
  }

  .nav-button {
    width: 30%;
  }

  .dropdown-menu {
    background-color: #EFEFF1;
    border: none;
  }

  .dropdown-toggle::after {
    color: #ff525d;
  }

  .close-menu-icon {
    display: none;
  }

  .hero {
    background-image: url(images/bg-pattern-desktop.svg);
    border-radius: 0 0 0 100px;
  }

  /* Call to Action */

  .call-to-action-buttons {
    width: 30%;
  }

  .call-to-action-heading,
  .call-to-action-text,
  .cta-button-div {
    transform: translateY(-40%);
  }

  .call-to-action-heading {
    font-size: 48px;
    font-size: 3rem;
  }

  .call-to-action-text {
    margin: 0 auto 5%;
  }

  /* Designed for the Future Section */

  .designed-for-future {
    margin-bottom: 20%;
    padding: 15% 5%;
  }

  .designed-heading {
    font-size: 44px;
    font-size: 2.75rem;
    position: static;
    transform: translateY(-80%);
  }

  .designed-for-future picture {
    order: 1;
  }

  .designed-text-column {
    order: 2;
  }

  .white-section-body-text {
    margin: 0 auto 10%;
  }

  /* State of the Art Section */

  .state-of-the-art {
    padding: 30% 10%;
  }

  .phone-illustration {
    width: 65%;
    transform: translate(-15%, -95%);
  }

  .purple-section-body-text {
    margin: auto;
  }

  /* Final Section */

  .final-section {
    padding: 15% 5%;
  }

  .final-section picture {
    position: relative;
    right:0;
  }

  .final-section-text {
    width: 90%;
  }

  /* Footer */

  .footer {
    padding: 10% 0 0;
  }

  .footer-links {
    flex-direction: column;
  }

  .footer-column {
    margin: 0 auto 10%;
  }

  .logo-column {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
  }

  .footer-heading {
    font-size: 28.8px;
    font-size: 1.8rem;
  }

}

/* Phones */

@media only screen and (max-width:688px) {

  /* Utility Classes */

  picture img {
    max-width: 100%;
  }

  .call-to-action-buttons,
  .call-to-action-text,
  .dropdown-item,
  .footer a,
  .nav-link,
  .nav-button,
  .purple-section-body-text, 
  .white-section-body-text {
    font-size: 16px;
    font-size: 1rem;
  }

  .dropdown-item,
  .footer a {
    margin-bottom: 5%;
  }

  .final-section-text,
  .nav-link,
  .purple-section-body-text {
    margin: 0 auto;
  }

  .call-to-action-text,
  .nav-button,
  .white-section-body-text {
    margin: 0 auto 10%;
  }

  .call-to-action-heading,
  .call-to-action-text,
  .cta-button-div,
  .final-section-text,
  .nav-buttons,
  .phone-illustration,
  .white-section-body-text {
    width: 100%;
  }

  /* Navbar */

  .navbar {
    padding: 20px;
  }

  .navbar-nav {
    margin-left: 0;
  }

  .nav-logo {
    width: 60%;
  }

  .nav-link {
    text-decoration: none;
  }

  .nav-button {
    width: 40%;
  }

  hr {
    color: #c8c8cb;
    opacity: 1;
  }

  .signup-button {
    background-image: linear-gradient(to right, #ff8f70, #ff3d54);
    color: #fff;
  }

  /* Call to Action */

  .call-to-action {
    padding: 30% 5%;
  }

  .call-to-action-heading {
    font-size: 32px;
    font-size: 2rem;
  }

  .call-to-action-buttons {
    width: 40%;
  }

  /* Designed for the Future Section */

  .designed-for-future {
    margin: 10% auto 50%;
    padding: 5%;
  }

  .designed-heading {
    font-size: 25.6px;
    font-size: 1.6rem;
    margin: 10% auto;
  }

  .sub-heading {
    font-size: 24px;
    font-size: 1.5rem;
    margin: 5% auto;
    width: 80%;
  }

  /* State of the art Infastructure Section */

  .state-of-the-art {
    background-position: 2% -50%;
    justify-content: center;
  }

  .phone-illustration {
    width: 80%;
    transform: translate(-10%, -70%);
  }

  .purple-section-heading {
    font-size: 28.8px;
    font-size: 1.8rem;
    margin-top: 15%;
  }

  /* Final Section */

  .final-section {
    padding: 15% 7.5%;
  }

  /* Footer */

  .footer {
    padding: 20% 0 5%;
  }

  .logo {
    width: 70%;
  }

  .footer-heading {
    font-size: 24px;
    font-size: 1.5rem;
    margin-top: 8%;
  }

}