* {
 padding: 0;
 margin:0;
 box-sizing: border-box;
}
body {
 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 width: 100%;
 background: black;
}
.container {
 width: 70%;
 margin: 0 auto;
 background: hsl(219, 30%, 18%);
 font-size: 1rem;
 overflow: hidden;
 position: relative;
 /* min-height: 100vh; */
}
.nav-bar {
 display: flex;
 width: 70%;
 justify-content: space-between;
 width: 90%;
 margin: 0 auto;
 align-items: center;
 padding: 1em .7em;
}
.flyo-logo {
 width: 50%;
}
ul {
 list-style: none;
 display: flex;
}
ul li {
 margin-left: 2em;
}
ul li a{
 text-decoration: none;
 color: white;
 font-size: .8rem;
}
ul li a:hover {
 font-weight: bold;
 text-decoration: underline;
}

.top {
 position: relative;
}
.home-page {
 position: relative;
 z-index: 99;
 color: white;
 text-align: center;
 width: 50%;
 margin: 0 auto;
}
.curvy-mobile {
 display: none;
}
.curvy-desktop {
 position: absolute;
 top: 486px;
 left: -347px;
 z-index: -1;
 width: 230%;
}
.home-img {
 margin: 2em 0;
 width: 100%;
 z-index: 100;
}
.home-heading {
 font-weight: 700;
 font-size: 1.7rem;
 line-height: 1.3em;
 margin-bottom: .8em;
}
.home-wordings {
 line-height: 1.4em;
 font-size: .95rem;
 font-weight: 500;
}
.get-started {
 background-color: hsl(176, 68%, 64%);
 outline: none;
 border: none;
 padding: .8em 3.5em;
 color: white;
 margin: 1em 0;
 border-radius: 80px;
}
.get-started-free {
 background-color: hsl(176, 68%, 64%);
 outline: none;
 border: none;
 padding: .6em .8em;
 color: white;
 margin: 1em 0;
 border-radius: 80px;
}
.get-started:hover {
 box-shadow: 0px 2px 3px hsl(176, 68%, 64%);
}

@media (max-width: 375px) {
 .container {
  width: 100%;
 }
 .nav-bar{
  width: 100%;
 }
 .flyo-logo {
  width: 50%;
 }
 ul li {
  margin-left: 1em;
 }
 .curvy-mobile {
  display: grid;
  position: absolute;
  top: 300px;
  left: -100px;
  width: 550px;
  z-index: -1;
 }
 .curvy-desktop {
  display: none;
 }
 .home-page {
  width: 100%;
 }
 .home-img {
  width: 100%;
 }
 .home-text {
  padding: 2em;
  background: hsl(218, 28%, 13%);
  position: relative;
  top: 70px;
 }
 .home-heading {
  font-size: 1.5rem;
  line-height: 1.5em;
 }
 .home-wordings {
  font-size: .9rem;
 }
 .get-started {
 padding: .9em 4.5em;
 }
}
.section-one {
 position: relative;
 top: 0px;
 margin-top: 8em;
 background-color: hsl(218, 28%, 13%);
 /* padding: 0; */
}
.features-section {
 position: relative;
 z-index: 99;
 margin: 0 auto;
 width: 70%;
 color: white;
}
.features-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1em;
}
.feature {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 align-self: baseline;
}
.feature-image {
 width: 50px;
 margin: 1em 0;
}
.feature-heading {
 font-size: 1.05rem;
}
.feature-texting {
 margin-top: 1em;
 line-height: 1.5em;
 font-size: .8rem;
}
.productive-section{
 padding-top: 8em;
 color: white;
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 95%;
 margin: 0 auto;
}
@media (max-width: 375px) {
 .section-one {
  margin-top: 4em;
 }
 .features-grid {
  display: flex;
  flex-direction: column;
 }
 .feature {
  margin-top: 2em;
 }
}
.section-two {
 background-color: hsl(218, 28%, 13%);
}
.productive-img {
 width: 48%;
}
.productive-image {
 width: 100%;
}
.productive-text {
 width: 45%;
}
.productive-heading {
 font-size: 1.8rem;
 font-weight: 500;
}
.productive-wordings {
 font-size: .9rem;
 margin-top: 1em;
}
.pro-link {
 display: inline-block;
 padding-bottom: .2em;
 border-bottom: 1.65px solid hsl(176, 68%, 64%);
}
.pro-link:hover {
 color: white;
 border-bottom: 1.65px solid white;
}
.productive-link {
 text-decoration: none;
 color: hsl(176, 68%, 64%);
 font-size: .9rem;
}
.productive-link:hover {
 color: white
}

.arr-icon {
position: relative;
top: 2px;
}
@media (max-width: 375px) {
 .section-two{
  padding-top: 6em;
 }
 .productive-section {
  flex-direction: column;
  padding: 1em;
 }
 .productive-image {
  width: 100%;
 }
 .productive-img {
  width: 100%;
 }
 .productive-text {
  width: 100%;
  margin-top: 2em;
 }
 .productive-heading {
  font-size: 1.2rem;
 }
 .pro-link {
  margin-top: 1em;
 }
}
.section-three {
 background: hsl(218, 28%, 13%);
 position: relative;
}
.comment-section {
 color: white;
 width: 90%;
 margin: 0 auto;
 display: flex;
 padding-top: 8em;
 padding-bottom: 12em;
 background: hsl(218, 28%, 13%);
}
.comments {
 background:hsl(219, 30%, 18%);
 margin-right: 1.2em;
 padding: 1em;
 box-shadow: 0px 8px 20px hsl(219, 30%, 18%);
 border-radius: 5px;
 z-index: 100;
}
.comment-text {
 font-size: .7rem;
 line-height: 1.5em;
 margin-bottom: 2em;
}
.commentator {
 display: flex;
}
.com-name {
 font-size: .8rem;
 font-weight: 600;
}
.com-work {
 font-size: .7rem;
}
.profile {
 width: 30px;
 border-radius: 100px;
 margin-right: 8px;
}
.bg-quotes {
 width: 40px;
 height: 30px;
 position: relative;
 top: -25px;
 left: 40px;
}
@media (max-width: 375px) {
 .comment-section {
  width: 100%;
  flex-direction: column;
  padding: 2em 2em 6em 2em;
 }
 .comments {
  margin-bottom: 2em;
 }
 .bg-quotes {
  width: 40px;
 }
}
.access {
 color: white;
 width: 70%;
 margin: 0 auto;
 background:hsl(218, 28%, 13%);
 padding: 2em 2em;
 text-align: center;
 box-shadow: 0px 1px 10px black;
 border-radius: 4px;
 position: relative;
 left: 0;
 top: -100px;
 z-index: 100;
}
.access-heading {
 font-size: 1.4rem;
}
.access-text {
 font-size: .8rem;
 margin: 1em 0;
 line-height: 1.7em;
}
.footer-section {
 width: 90%;
 margin: 0 auto;
 color: white;
 margin-top: -2em;
}
.footer-logo {
 width: 100px;
}
.footer-box {
 display: flex;
 justify-content: space-between;
}
.loogo {
 margin-right: 15px;
}
.footer-info {
 display: flex;
 width: 35%;
}
.footer-text {
 font-size: .9rem;
}
.contact-info {
 display: flex;
 margin-bottom: 1em;
}
.services {
 display: grid;
 grid-template-columns: 1fr 1fr;
}
.services a{
 text-decoration: none;
 color: white;
 margin-bottom: .5em;
}
.email-field {
 width: 70%;
 border-radius: 80px;
 outline: none;
 border: none;
 padding: .8em;
}
@media (max-width: 375px) {
 .access {
  width: 90%;
  /* margin: 1em; */
  padding: 1em;
 }
 .access-text {
  font-size: .9rem;
 }
 .email-field {
  width: 100%;
 }
 .get-started-free {
  width: 100%;
  padding: 1em .8em;
 }
 .footer-section {
  width: 100%;
  padding: 1em;
 }
 .footer-box {
  flex-direction: column;
  text-align: left;
 }
 .footer-info {
  width: 100%;
  margin-bottom: 1em;
 }
 .services {
  display: flex;
  flex-direction: column;
 }
 .footer-logo {
  width: 180px;
  margin-bottom: 2em;
 }
 .contact-info {
  text-align: center;
 }
 .services a {
  margin-bottom: 1em;
 }
}