:root {
   /* Primary */
   /* CTA Text */
   --light-red: hsl(356, 100%, 66%);
   /* CTA hover background */
   --very-light-red: hsl(355, 100%, 74%);
   /* Heading */
   --very-dark-blue: hsl(208, 49%, 24%);

   /* Neutral */
   /* Text */
   --white-text: hsl(0, 0%, 100%);
   /* footer text */
   --grayish-blue: hsl(240, 2%, 79%);
   /* footer background */
   --very-dark-black-blue: hsl(240, 10%, 16%);

   /* Gradient */
   /* Background gradient - Intro/CTA mobile nav */
   --very-light-red-grad: hsl(13, 100%, 72%);
   --light-red: hsl(353, 100%, 62%);
   /* Background-gradient - body */
   --very-dark-gray-blue: hsl(237, 17%, 21%);
   --very-dark-desaturated-blue: hsl(237, 23%, 32%);
}

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

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

h1 {
   font-size: 3rem;
   animation: fadeIn 2s;
}

h2 {
   font-size: 2.2rem;
}

h3 {
   font-size: 1.5rem;
}

h4 {
   font-size: 1.6rem;
}

.container {
   padding: 0 10%;
}

/* Navbar */
.nav-bar {
   padding-top: 40px;
   justify-content: space-between;
}

.logo {
   width: fit-content;
}

.nav-flex {
   display: flex;
   justify-content: space-between;
}

.mobile-nav {
   display: none;
}

.left-items {
   justify-self: flex-start;
   align-self: center;
}

.left-items > ul {
   list-style: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
   font-weight: 300;
}

.left-items > ul > li:hover {
   cursor: pointer;
   text-decoration: underline;
}

.left-items > ul > li > img {
   margin-left: 5px;
}

.left-items > ul > li:nth-child(2) {
   margin: 0 60px;
}

.cta, .hero-text > p, .feature-1-heading > h2 {
   animation: fadeIn 2s;
}

.btn-mobile {
   display: none;
}

.drop-down {
   text-decoration: none;
   margin: 16px auto 0;
   display: none;
   position: absolute;
   box-shadow: 1px 1px 10px 1px var(--very-dark-black-blue);
}

.drop-down > ul {
   display: block;
   background: var(--white-text);
   padding: 16px 20px;
   color: var(--very-dark-desaturated-blue);
   border-radius: 5px;
   font-weight: 600;
   list-style: none;
}

.drop-down > ul > li {
   margin-bottom: 14px;
   text-decoration: none;
}

.drop-down > ul > li:hover {
   color: var(--very-dark-black-blue);
   text-decoration: none;
}

.show-dropdown {
   display: block;
}

/* Hero Section */
.hero-section {
   background: linear-gradient(hsla(356, 100%, 66%, 0.8), hsla(356, 100%, 66%, 0.8)), url(/images/bg-pattern-intro.svg);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   background-origin: content-box;
   border-radius: 0 0 0 70px;
   color: var(--white-text);
}

.hero-text {
   text-align: center;
   padding: 100px 0 170px 0;
}

.hero-text p {
   font-size: 15px;
   font-weight: 300;
   margin-top: 18px;
   margin-bottom: 24px;
}

/* Buttons */
.btn-transparent, .btn-light {
   padding: 10px 16px;
   border-radius: 20px;
   font-family: "Ubuntu", sans-serif;
   font-weight: 600;
}

.btn-transparent {
   color: var(--white-text);
   background-color: hsla(353, 100%, 62%, 0);
   border: 1px solid var(--white-text);
}

.btn-light {
   color: var(--light-red);
   background-color: var(--white-text);
   border: 1px solid var(--white-text);
}

.btn-light:hover {
   color: var(--white-text);
   background-color: hsla(353, 100%, 62%, 0);
}

.btn-transparent:hover {
   color: var(--light-red);
   background-color: var(--white-text);
}

.right-items > .btn-light {
   margin-left: 16px;
}

.cta > .btn-light {
   margin-right: 16px;
}

/* Feature One & Feature 3*/
.feature-1 .container {
   padding-right: 0;
}
.feature-1, .feature-3 {
   color: var(--very-dark-blue);
   padding: 8rem 0 0 0;
   overflow: hidden;
}

.feature-1-heading {
   width: 100%;
   text-align: center;
   margin-bottom: 5rem;
}

.flex-container {
   display: flex;
   justify-content: space-between;
}

.inner-flex {
   width: 100%;
}

.feature-1-image {
   width: 100%;
}

.feature-1-image > img {
   width: 700px;
   height: auto;
   position: relative;
   bottom: 180px;
   left: 185px;
}

.feature-1-text:first-of-type, .feature-3-text:first-of-type {
   margin-bottom: 60px;
}

.feature-1-text > h3, .feature-3-text > h3 {
   font-weight: 600;
   margin-bottom: 16px;
}

.feature-1-text > p, .feature-3-text > p {
   font-size: 15px;
   line-height: 1.7;
}

/* Feature 2 */
.feature-2 {
   background: linear-gradient(hsla(237, 17%, 21%, 0.9), hsla(237, 17%, 21%, 0.9)), url(/images/bg-pattern-circles.svg);
   background-position: top right;
   background-size: contain;
   background-repeat: no-repeat;
   overflow: auto;
   border-radius: 0 80px;
   padding-top: 30px;
} 

.feature-2-text {
   margin-left: 30px;
   align-self: center;
   color: var(--grayish-blue);
}

.feature-2-text h2 {
   margin-bottom: 18px;
}

.feature-2-text p {
   line-height: 1.7;
}

/* Feature 3 */
.feature-3-image > img {
   width: 700px;
   height: auto;
   position: relative;
   bottom: 100px;
   right: 331px;
}

.footer {
   background: var(--very-dark-black-blue);
   color: var(--grayish-blue);
   padding: 5rem 0;
}

.footer-logo {
   width: 90px;
}

.footer-logo > img {
   width: 100%;
}

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

.footer-item > h4 {
   font-weight: 600;
   font-size: 1rem;
   margin-bottom: 16px;
}

.footer-item > ul {
   list-style: none;
   font-size: 13px;
}

.footer-item > ul > li {
   margin-top: 10px;
}

.footer-item > ul > li > a {
   color: var(--grayish-blue);
   text-decoration: none;
}

.footer-item > ul > li:hover {
   text-decoration: underline;
}

@keyframes fadeIn {
   from {opacity: 0;}
   to {opacity: 1;}
}

@media (max-width: 768px) {
   .container {
      padding: 0 5%;
      text-align: center;
   }

   .nav-bar {
      padding-top: 70px;
   }

   .drop-down {
      /* display: block; */
      position: static;
      margin-bottom: 10px;
   }

   .drop-down > ul > li {
      margin-bottom: 0;
   }

   .left-items > ul {
      background: var(--very-dark-blue);
      border-radius: 5px;
      text-align: center;
      padding: 16px 18px;
      color: var(--grayish-blue);
      display: none;
      width: 90%;
      height: auto;
      font-size: 20px;
      font-weight: 600;
      position: absolute;
      top: 130px;
      left: 5%;
      animation: listFadeIn 1s;
   }

   @keyframes listFadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
   }

   .left-items ul > li {
      line-height: 2;
   }

   .left-items > ul > li:nth-child(2) {
      margin: 0;
   }

   .btn-mobile {
      margin: 16px auto;
      padding: 16px 0;
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--grayish-blue);
   }

   .btn-mobile > button {
      font-family: "Overpass", sans-serif;
      font-size: 18px;
   }

   .btn-mobile > .btn-transparent {
      margin-top: 16px;
   }

   .btn-mobile > .btn-light {
      background: var(--light-red);
      color: var(--white-text);
      margin-top: 16px;
   }

   .btn-mobile > .btn-light:hover {
      background: var(--white-text);
      color: var(--light-red);
   }

   .right-items > button {
      display: none;
   }

   .mobile-nav {
      display: block;
      align-self: center;
      cursor: pointer;
      padding: 8px 5px 5px 5px;
      border-radius: 4px;
   }

   .mobile-nav:hover {
      background: var(--grayish-blue);
   }

   /* Feature */
   .feature-1, .feature-3 {
      padding-bottom: 3rem;
   }

   .feature-2 {
      padding: 3.5rem 0;
   }

   .feature-1 .container {
      padding-right: 5%;
   }

   .flex-container {
      flex-direction: column-reverse;
   }

   .feature-2-image img {
      width: 100%;
      height: auto;
   }

   .feature-2 > .container > .flex-container, .feature-3 > .container > .flex-container {
      flex-direction: column;
   }

   .feature-1-image > img, .feature-3-image > img {
      width: 100%;
      height: auto;
      position: static;
      margin: 0 auto;
   }

   .feature-1-text, .feature-3-text {
      margin-top: 40px;
   }

   /* Footer */
   .footer {
      border-radius: 0 70px 0 0;
   }

   .flex-footer {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   .footer-item {
      margin-top: 35px;
   }

   .footer-item > h4 {
      font-weight: 600;
      font-size: 1.5rem;
      margin-bottom: 16px;
   }

   .footer-item > ul {
      font-size: 16px;
   }

   .footer-logo {
      margin-bottom: 50px;
   }
}

@media (max-width: 575px) {
   .hero-text h1 {
      font-size: 2.5rem;
   }
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }