@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --tiny: 20rem /*320px*/;
  --mobile: 23.43.275rem /*375px*/;
  --transit: 46.875rem /*750px*/;
  --tablet: 64rem /*1024px*/;
  --desktop: 90rem /*1440px*/;
  /* Primary */
  --navy-900: hsl(217, 28%, 15%);
  --navy-900: hsl(218, 28%, 13%);
  --navy-950: hsl(216, 53%, 9%);
  --navy-800: hsl(219, 30%, 18%);
  /* Accent */
  --teal-200: hsl(176, 68%, 64%);
  --cyan-500: hsl(198, 60%, 50%);
  --red-500: hsl(0, 100%, 63%);
  /* Neutral */
  --white: hsl(0, 0%, 100%);
  /* Gradient */
  --gradient-bg: #63e1d9;
  --gradient: linear-gradient(90deg, rgba(99, 225, 217, 1) 0%, rgba(52, 160, 205, 1) 100%);
  /* font-weight */
  --fw-normal: 400;
  --fw-bold: 700;
  /* font family */
  /* Headings, Call-to-actions, Header Navigation */
  --raleway: "Raleway", sans-serif;
  --osans: "Open Sans", sans-serif;
}

/* BOILERPLATE */
html {
  box-sizing: border-box;
  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}
.hidden {
  display: none;
}
i {
  cursor: pointer;
}

a {
  text-decoration: none;
}

ul,
li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

input:focus {
  outline: none;
}

@media only screen and (min-width: 320px) {
  /* Header */
  header {
    width: 100vw;
    background-color: var(--navy-800);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  nav {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    width: 300px;
    padding: 24px 16px 48px 16px;
  }
  img.logo-one {
    width: 60px;
  }
  .links {
    display: inherit;
    gap: 20px;
  }
  a.linked {
    font-family: var(--raleway);
    font-size: 12px;
    color: var(--white);
    line-height: 1.2;
    font-weight: var(--fw-normal);
    cursor: pointer;
  }
  a.linked:hover {
    font-weight: var(--fw-bold);
    text-decoration: underline;
  }

  /* HERO */
  #hero {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, var(--navy-800) 47.5%, var(--navy-900) 47.5%);
  }
  .hero-container {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(images/bg-curvy-mobile.svg);
    background-repeat: no-repeat;
    background-position: 50% 37.5%;
    background-size: contain;
  }
  .hero-image {
    width: 100vw;
    padding: 0px 16px 72px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }
  img.illustration {
    width: 300px;
  }
  .hero-text {
    width: 300px;
    padding: 0px 16px 140px 16px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #hero h1 {
    text-align: center;
    font-size: 18px;
    font-weight: var(--fw-bold);
    font-family: var(--raleway);
    line-height: 1.2;
    margin: 0;
  }
  .p-one {
    padding: 0 12px 24px 12px;
    font-family: var(--osans);
    font-size: 12px;
    line-height: 1.5;
    font-weight: var(--fw-normal);
    text-align: center;
  }
  .btn-one {
    width: 240px;
    height: 40px;
    background: var(--gradient);
    border: none;
    border-radius: 60px;
    cursor: pointer;
    font-size: 14px;
    font-weight: var(--fw-bold);
    font-family: var(--raleway);
    line-height: 1.2;
    color: var(--white);
  }
  .btn-one:hover {
    background: var(--teal-200);
  }

  /* FUNCTIONS */
  #functions {
    width: 100vw;
    background-color: var(--navy-900);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .functions-con {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 0 20px;
  }
  .function-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    padding-bottom: 80px;
  }
  .img-container {
    width: 79.78px;
    height: 79.78px;
    margin-bottom: 24px;
  }
  #functions h2 {
    text-align: center;
    font-size: 18px;
    font-weight: var(--fw-bold);
    font-family: var(--raleway);
    line-height: 1.2;
    margin: 0;
  }
  .p-three {
    font-family: var(--osans);
    font-size: 12px;
    line-height: 1.5;
    font-weight: var(--fw-normal);
    text-align: center;
  }

  /* HERO TWO */
  #hero-two {
    width: 100vw;
    background-color: var(--navy-900);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .hero-two-con {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 80px 20px;
  }
  .hero-two-img {
    padding-bottom: 48px;
  }
  .illustration {
    width: 300px;
    height: auto;
  }
  .hero-two-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .hero-two-text h1 {
    text-align: left;
    font-size: 14px;
    font-weight: var(--fw-bold);
    font-family: var(--raleway);
    line-height: 1.2;
    margin: 0;
  }
  .hero-two-text p {
    text-align: left;
    font-size: 12px;
    font-weight: var(--fw-normal);
    font-family: var(--osans);
    line-height: 1.5;
    margin: 0;
  }
  .btn-two {
    border: none;
    background-color: transparent;
    height: 21px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--teal-200);
    cursor: pointer;
  }
  .btn-two a {
    color: var(--teal-200);
    font-size: 12px;
    font-weight: var(--fw-normal);
    font-family: var(--osans);
    line-height: 1.5;
    margin: 0;
  }
  img.arrow {
    width: 12px;
    height: 12px;
  }
  .fa-regular.fa-circle-right {
    color: var(--white);
    display: none;
  }
  .btn-two:hover {
    border-bottom: 1px solid var(--white);
  }
  .btn-two:hover a {
    color: var(--white);
  }
  .btn-two:hover .fa-regular.fa-circle-right {
    display: flex;
  }
  .btn-two:hover img.arrow {
    display: none;
  }

  /* TESTIMONIALS */
  #testimonials {
    width: 100vw;
    background-color: var(--navy-900);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .testi-con {
    width: 300px;
    padding: 0 30px 160px 30px;
  }
  .card {
    width: 240px;
    background-color: var(--navy-800);
    padding: 24px;
    color: var(--white);
    margin-bottom: 24px;
    border-radius: 4px;
  }
  .card .p-three {
    font-size: 10px;
    font-weight: var(--fw-normal);
    font-family: var(--osans);
    line-height: 1.5;
    text-align: left;
    margin-top: 0;
    margin-bottom: 16px;
  }
  .card-profile {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
  .profile {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  .name {
    font-size: 10px;
    font-weight: var(--fw-bold);
    font-family: var(--osans);
    line-height: 1.5;
  }
  .title {
    font-size: 7px;
    font-weight: var(--fw-normal);
    font-family: var(--osans);
    line-height: 1.5;
  }
  img.img-quote {
    width: auto;
    height: 18px;
    position: relative;
    bottom: -4px;
  }

  /* ACCESS */
  #access {
    width: 100vw;
    background: linear-gradient(180deg, var(--navy-900) 50%, var(--navy-950) 50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .access-con {
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .access-card {
    width: 300px;
    height: 353px;
    padding: 36px 20px 36px 20px;
    background-color: var(--navy-800);
    border-radius: 9px;
  }
  #access h1 {
    font-size: 18px;
    font-weight: var(--fw-bold);
    font-family: var(--raleway);
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }
  #access p {
    font-family: var(--osans);
    font-size: 12px;
    line-height: 1.5;
    font-weight: var(--fw-normal);
    text-align: center;
    margin-bottom: 32px;
  }
  .input-container,
  .email-container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .email-container {
    gap: 24px;
  }
  #email {
    width: 260px;
    height: 40px;
    border-radius: 24px;
    color: gray;
    background-color: var(--white);
    border: none;
    padding: 0 32px 0 32px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: var(--fw-normal);
    text-align: left;
    font-family: var(--osans);
  }
  #error {
    font-size: 12px;
    line-height: 1.5;
    font-weight: var(--fw-normal);
    text-align: left;
    font-family: var(--osans);
    color: var(--red-500);
    padding-left: 32px;
    padding-top: 2px;
  }
  .btn-three {
    width: 260px;
    height: 40px;
    border-radius: 24px;
    background: var(--gradient);
    border: none;
    color: var(--white);
    font-size: 14px;
    line-height: 1.2;
    font-weight: var(--fw-bold);
    text-align: center;
    font-family: var(--raleway);
    cursor: pointer;
  }
  .btn-three:hover {
    background: var(--teal-200);
  }

  /* FOOTER */
  footer {
    background-color: var(--navy-950);
    width: 100vw;
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .footer-con {
    width: 300px;
    padding: 80px 24px 48px 24px;
  }
  footer img.logo-two {
    height: 31px;
    width: auto;
    margin-bottom: 40px;
  }
  .footer-icon-con {
    height: 24px;
    width: 24px;
    margin-right: 16px;
    display: flex;
    align-items: center;
  }
  .icon-location {
    height: 18px;
    width: auto;
  }
  .icon-phone {
    height: 13px;
    width: auto;
  }
  .icon-email {
    height: 16px;
    width: auto;
  }
  .footer-cards-one,
  .contact {
    display: flex;
    flex-direction: row;
    margin-bottom: 16px;
  }
  .contact {
    align-items: center;
  }
  footer .p-three {
    margin: 0;
    text-align: left;
    font-family: var(--osans);
    font-size: 14px;
    line-height: 1.5;
    font-weight: var(--fw-normal);
  }
  footer .p-four {
    margin: 0;
    text-align: left;
    font-family: var(--osans);
    font-size: 14px;
    line-height: 1.5;
    font-weight: var(--fw-normal);
  }
  .footer-cards-two {
    margin-bottom: 56px;
  }
  .footer-cards-three {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .footer-cards-three li {
    text-align: left;
    font-family: var(--osans);
    font-size: 14px;
    line-height: 1.5;
    font-weight: var(--fw-normal);
  }
  .fc-one ul,
  .fc-two ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .footer-cards-four {
    width: 100%;
    margin-top: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
  }
  .brands-container {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fa-brands {
    height: auto;
    width: auto;
    margin: 0;
  }
  .brands-container:hover {
    border: 1px solid var(--teal-200);
  }
  .brands-container:hover .fa-brands {
    color: var(--teal-200);
  }
}
@media only screen and (min-width: 375px) {
  /* Header */
  nav {
    width: 375px;
    padding: 24px 20px 48px 20px;
  }
  img.logo-one {
    width: 80px;
  }
  .links {
    gap: 24px;
  }

  /* HERO */
  #hero {
    background: linear-gradient(to bottom, var(--navy-800) 50%, var(--navy-900) 50%);
  }
  .hero-image {
    padding: 0px 20px 72px 20px;
  }
  img.illustration {
    width: 304px;
  }
  .hero-text {
    width: 375px;
    padding: 0px 20px 140px 20px;
  }
  #hero h1 {
    font-size: 20px;
  }
  .p-one {
    padding: 0 15px 24px 15px;
    font-size: 14px;
  }

  /* FUNCTIONS */
  .functions-con {
    width: 375px;
    padding: 0 24.5px 0 24.5px;
  }
  .function-cards {
    width: 326px;
    padding-bottom: 80px;
  }
  #functions h2 {
    font-size: 20px;
  }
  .p-three {
    font-size: 14px;
  }

  /* HERO TWO */
  .hero-two-con {
    width: 375px;
    padding: 0 24.5px 80px 24.5px;
  }
  .illustration {
    width: 326px;
  }

  .hero-two-text h1 {
    font-size: 16px;
  }
  .hero-two-text p {
    font-size: 14px;
  }
  .btn-two a {
    font-size: 14px;
  }

  /* TESTIMONIALS */
  .testi-con {
    width: 375px;
    padding: 0 47.5px 160px 47.5px;
  }
  .card {
    width: 280px;
    height: 160px;
  }
  /* ACCESS */
  .access-con {
    width: 375px;
  }
  .access-card {
    width: 336px;
    height: 353px;
    padding: 40px 24px 40px 24px;
  }
  #access h1 {
    font-size: 20px;
  }
  #access p {
    font-size: 14px;
  }
  #email {
    width: 280px;
    height: 48px;
    border-radius: 24px;
  }
  #error {
    font-size: 14px;
  }
  .btn-three {
    width: 280px;
    height: 48px;
  }

  /* FOOTER */
  .footer-con {
    width: 375px;
    padding: 80px 24px 48px 24px;
  }
  footer .p-three {
    font-size: 16px;
  }
  .footer-cards-three li {
    font-size: 16px;
  }

  @media only screen and (min-width: 768px) {
    /* Header */
    nav {
      width: 768px;
      padding: 80px 54px 140px 54px;
    }
    img.logo-one {
      height: 40px;
      width: auto;
    }
    .links {
      display: inherit;
      gap: 48px;
    }
    a.linked {
      font-size: 16px;
    }

    /* HERO */
    #hero {
      background: var(--navy-800);
      border: none;
    }
    .hero-container {
      margin-top: 0;
      background-image: url(images/bg-curvy-desktop.svg);
      background-position: 50% 124%;
      background-size: 225%;
    }
    .hero-image {
      width: 660px;
      flex-direction: column;
    }
    img.illustration {
      width: 660px;
    }
    .hero-text {
      width: 660px;
      padding: 64px 0px 140px 0px;
      gap: 48px;
    }
    #hero h1 {
      font-size: 40px;
    }
    .p-one {
      font-size: 20px;
      width: 660px;
      padding: 0px 35px 0px 35px;
      margin: 0;
    }
    .btn-one {
      width: 280px;
      height: 56px;
      font-size: 16px;
    }

    /* FUNCTIONS */
    .functions-con {
      width: 660px;
      display: grid;
      grid-template-columns: auto auto;
      column-gap: 80px;
      row-gap: 72px;
      padding-bottom: 80px;
    }
    .function-cards {
      width: 290px;
      padding-bottom: 0;
    }

    /* HERO TWO */
    .hero-two-con {
      width: 660px;
      padding: 0 0 72px 0;
    }
    .hero-two-img {
      padding-bottom: 72px;
    }
    .illustration {
      width: 614.76px;
      height: 463.63px;
    }
    .hero-two-text {
      gap: 24px;
    }
    .hero-two-text h1 {
      font-size: 40px;
    }
    .hero-two-text p {
      font-size: 16px;
    }
    .btn-two {
      height: 24px;
    }
    .btn-two a {
      font-size: 16px;
    }

    /* TESTIMONIALS */
    #testimonials {
      justify-content: center;
      position: relative;
    }
    .testi-con {
      width: 660px;
      padding: 60px 64px 80px 64px;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* .card-con {
      position: absolute;
      z-index: 2;
    } */
    .card {
      width: 480px;
      height: 200px;
      padding: 40px;
    }
    .card-one,
    .card-two {
      margin-bottom: 40px;
    }
    .card .p-three {
      font-size: 14px;
    }
    img.img-quote {
      height: 60px;
      position: absolute;
      z-index: -1;
      top: 10px;
      left: 90px;
    }

    /* ACCESS */
    .access-con {
      width: 660px;
    }
    .access-card {
      width: 480px;
      height: 353px;
      padding: 48px 40px 48px 40px;
    }
    .email-container {
      gap: 16px;
    }
    #email,
    .btn-three {
      width: 400px;
      height: 48px;
    }

    /* FOOTER */
    .footer-con {
      width: 768px;
      padding: 80.5px 56px 64px 56px;
    }
    footer img.logo-two {
      margin-bottom: 56px;
    }
    .footer-container {
      display: grid;
      grid-template-columns: 2fr 1fr;
      row-gap: 0px;
    }
    .footer-cards-one,
    .contact {
      margin-bottom: 0px;
    }
    footer .p-three {
      width: 339px;
    }
    .footer-cards-two {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .footer-cards-three {
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 80px;
    }
    .fc-one ul,
    .fc-two ul {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .footer-cards-four {
      margin-top: 0px;
      align-items: flex-start;
      justify-content: flex-start;
    }
    .fa-brands {
      height: auto;
      width: auto;
      margin: 0;
    }
  }

  @media only screen and (min-width: 1440px) {
    /* Header */
    nav {
      width: 1440px;
      padding: 80.72px 79px 64.45px 79px;
    }
    img.logo-one {
      height: 51.05px;
      width: auto;
    }
    .links {
      display: inherit;
      gap: 56px;
    }
    /* HERO */
    .hero-container {
      background-position: center bottom;
      background-size: contain;
    }
    .hero-image {
      width: 720px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 56px;
      padding: 0;
    }
    img.illustration {
      width: 660px;
    }
    .hero-text {
      width: 734px;
      padding: 0px 0px 140px 0px;
      gap: 32px;
    }
    .p-one {
      width: 589px;
    }
    /* FUNCTIONS */
    .functions-con {
      width: 907px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      row-gap: 80.29px;
      padding: 0;
      margin-bottom: 80px;
    }
    .function-cards {
      width: 363px;
      padding: 0;
    }
    .function-cards.one {
      grid-column: 1/2;
      grid-row: 1/2;
    }
    .function-cards.two {
      grid-column: 3/4;
      grid-row: 1/2;
    }
    .function-cards.three {
      grid-column: 1/2;
      grid-row: 3/4;
    }
    .function-cards.four {
      grid-column: 3/4;
      grid-row: 3/4;
    }
    .img-container {
      width: 103.71px;
      height: 103.71px;
      margin-bottom: 24px;
    }
    /* HERO TWO */
    .hero-two-con {
      width: 1186.76px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 56px;
      padding: 0;
    }
    .hero-two-img {
      padding-bottom: 0;
    }
    .illustration {
      width: 614.76px;
      height: 463.63px;
    }
    .hero-two-text {
      gap: 24px;
      width: 516px;
    }

    /* TESTIMONIALS */
    #testimonials {
      display: flex;
      flex-direction: row;
      position: static;
      padding-top: 80px;
      padding-bottom: 220px;
    }
    .testi-con {
      width: 1180px;
      height: 340px;
      padding: 0;
      align-items: center;
      flex-direction: row;
      position: relative;
    }
    .card-con {
      position: absolute;
      z-index: 2;
      width: 1180px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .card {
      width: 360px;
      height: 200px;
      padding: 32px 24px;
      color: var(--white);
    }
    .card-one,
    .card-two {
      margin-bottom: 0px;
    }
    .card .p-three {
      font-size: 14px;
    }
    .card-profile {
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }
    img.img-quote {
      height: 60px;
      position: absolute;
      z-index: 1;
      bottom: 0px;
      left: 0;
    }

    /* ACCESS */
    .access-con {
      width: 863px;
    }
    .access-card {
      width: 863px;
      height: 275px;
      padding: 48px 80px 48px 80px;
    }
    .email-container {
      gap: 16px;
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .input-container {
      width: 480px;
    }
    #email {
      width: 480px;
      height: 48px;
    }
    .btn-three {
      width: 200px;
      height: 48px;
    }
    #access h1 {
      font-size: 40px;
    }
    /* FOOTER */
    .footer-con {
      width: 1440px;
      padding: 80.5px 80px 56px 80px;
    }
    footer img.logo-two {
      margin-bottom: 48px;
    }
    .footer-cards-one {
      width: 379px;
    }
    .footer-cards-two {
      width: 173px;
    }
    .footer-cards-three {
      width: 230px;
      gap: 80px;
    }
    .footer-cards-four {
      width: 125.67;
      gap: 16px;
    }
    .footer-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
    }
  }
}