@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;1,400;1,500&display=swap");
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box; }

body {
  font-size: 18px; }

.ham, .close {
  display: none;
  cursor: pointer; }

:root {
  --SoftBlue: hsl(231, 69%, 60%);
  --SoftRed: hsl(0, 94%, 66%);
  --GrayishBlue: hsl(229, 8%, 60%);
  --VeryDarkBlue: hsl(229, 31%, 21%); }

.heading {
  color: var(--VeryDarkBlue);
  font-weight: 700; }

.subheading {
  color: var(--GrayishBlue); }

button {
  cursor: pointer;
  border-radius: 10px;
  outline: none;
  border: none;
  box-shadow: 0px 3px 5px 0px #babacf; }

a {
  text-decoration: none; }

a:hover {
  color: var(--SoftRed); }

@media (min-width: 375px) {
  .navlinks {
    display: none; }
  header {
    width: 90%;
    margin: 0 auto;
    height: 10vh; }
    header nav {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      header nav .ham {
        display: block; }
  .intro img {
    width: 100%;
    position: relative; }
  .intro > div:nth-child(1) {
    position: relative;
    overflow: hidden; }
  .intro > div:nth-child(1)::before {
    content: '';
    height: 80%;
    width: 120%;
    z-index: -1;
    background: var(--SoftBlue);
    position: absolute;
    bottom: 0px;
    right: -200px;
    border-radius: 90px; }
  .intro .text {
    text-align: center; }
    .intro .text .heading {
      font-size: 2.5rem;
      padding: 30px; }
    .intro .text .subheading {
      padding: 0px 30px; }
    .intro .text button {
      height: 40px;
      font-weight: 500;
      margin: 30px 10px; }
      .intro .text button:nth-child(1) {
        background: var(--SoftBlue);
        color: white;
        width: 35%; }
      .intro .text button:nth-child(2) {
        background: whitesmoke;
        color: var(--GrayishBlue);
        width: 35%; }
  .features {
    margin-top: 10vh;
    text-align: center; }
    .features .heading {
      font-size: 1.5rem; }
    .features .subheading {
      padding: 30px; }
    .features .tabslink div {
      cursor: pointer;
      width: 90%;
      margin: 0 auto;
      border-bottom: 1px solid #b3b3b8; }
      .features .tabslink div h5 {
        display: inline-block;
        padding: 15px;
        font-size: 1.2rem;
        transition: all 1s ease; }
        .features .tabslink div h5.active {
          border-bottom: 4px solid red; }
    .features .tabs {
      padding: 30px 0px; }
      .features .tabs .tab {
        display: none; }
        .features .tabs .tab.show {
          display: block; }
          .features .tabs .tab.show img {
            width: 80%;
            transform: scale(0.75); }
          .features .tabs .tab.show .heading {
            padding: 25px; }
          .features .tabs .tab.show button {
            width: 25%;
            height: 40px;
            background: var(--SoftRed);
            color: white; }
          .features .tabs .tab.show .image {
            position: relative; }
          .features .tabs .tab.show .image::before {
            content: '';
            background: var(--SoftBlue);
            height: 80%;
            width: 80%;
            z-index: -1;
            bottom: 0px;
            left: -100px;
            border-radius: 75px;
            position: absolute; }
  .extensions {
    text-align: center;
    width: 90%;
    margin: 0 auto; }
    .extensions .heading {
      font-size: 2rem; }
    .extensions .subheading {
      padding: 15px; }
    .extensions .apps {
      width: 100%; }
      .extensions .apps .app {
        width: 80%;
        margin: 30px auto;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        box-shadow: 0px 5px 10px #7e7979;
        padding: 20px 0px; }
        .extensions .apps .app button {
          background: var(--SoftBlue);
          height: 40px;
          width: 80%;
          color: white; }
        .extensions .apps .app .heading {
          font-size: 1.5rem; }
        .extensions .apps .app .subheading {
          padding: 10px; }
        .extensions .apps .app img:nth-child(1) {
          height: 50%; }
  .faq {
    text-align: center;
    padding: 100px 0px; }
    .faq .heading {
      font-size: 2rem; }
    .faq .subheading {
      padding: 20px; }
    .faq .questions {
      width: 90%;
      margin: 0 auto; }
      .faq .questions > div {
        margin: 15px 0px;
        border-bottom: 1px solid grey;
        padding: 15px 0px; }
        .faq .questions > div .question {
          display: flex;
          flex-direction: row;
          justify-content: space-between; }
        .faq .questions > div .answer {
          display: none;
          text-align: left; }
          .faq .questions > div .answer.show {
            display: flex;
            padding: 10px 0px; }
    .faq button {
      background: var(--SoftBlue);
      margin-top: 40px;
      display: inline-block;
      width: 25%;
      height: 50px;
      color: white; }
  .update {
    background: var(--SoftBlue);
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 50px 0px; }
    .update .head {
      font-size: 2rem; }
    .update .inputs {
      width: 90%;
      margin: 0 auto; }
      .update .inputs input, .update .inputs button {
        width: 100%;
        height: 45px;
        margin: 15px 0px; }
      .update .inputs input {
        padding: 0px 25px;
        border-radius: 10px;
        outline: none;
        border: none; }
      .update .inputs .input {
        position: relative; }
      .update .inputs button {
        background: var(--SoftRed);
        box-shadow: none;
        color: white; }
      .update .inputs .error {
        position: absolute;
        right: 10px;
        top: 30px;
        visibility: hidden; }
      .update .inputs .error_message {
        visibility: hidden; }
  footer {
    color: white;
    background: var(--VeryDarkBlue);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 20px 0px;
    text-align: center;
    min-height: 40vh; }
    footer .foot {
      display: flex;
      flex-direction: column; }
      footer .foot a {
        margin: 20px 0px;
        text-transform: uppercase;
        color: white; }
    footer i {
      margin: 20px; } }

@media (min-width: 1440px) {
  header {
    width: 80%;
    margin: 0 auto;
    height: 10vh; }
    header nav {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      header nav .navlinks {
        display: flex;
        align-items: center; }
        header nav .navlinks a {
          margin-left: 50px; }
      header nav .ham, header nav .close {
        display: none; }
      header nav button {
        width: 130px;
        color: white;
        height: 35px;
        background: var(--SoftRed); }
  .intro {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    height: 80vh;
    overflow: hidden; }
    .intro img {
      width: 100%; }
    .intro img::before {
      content: ''; }
    .intro .text {
      padding-left: 175px;
      width: 40%;
      text-align: left; }
      .intro .text .heading {
        font-size: 2.5rem;
        padding: 30px 0px; }
      .intro .text .subheading {
        padding: 0px; }
    .intro > div:nth-child(1) {
      position: relative;
      overflow: unset; }
    .intro > div:nth-child(1)::before {
      right: -250px; }
  .features {
    margin-top: 10vh;
    text-align: center; }
    .features .heading {
      font-size: 2.5rem; }
    .features .subheading {
      width: 40%;
      margin: 0 auto;
      padding: 30px; }
    .features .tabslink {
      display: flex;
      width: 50%;
      margin: 0 auto; }
      .features .tabslink div {
        border-bottom: 0px solid #b3b3b8; }
        .features .tabslink div h5 {
          display: inline-block;
          padding: 15px;
          font-size: 1.2rem;
          transition: all 1s ease;
          border-bottom: 4px solid grey; }
          .features .tabslink div h5.active {
            border-bottom: 4px solid red; }
    .features .tabs {
      padding: 50px 0px;
      width: 100%;
      height: 60vh; }
      .features .tabs .tab {
        display: none; }
        .features .tabs .tab.show {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-end; }
          .features .tabs .tab.show .image {
            width: 50%;
            text-align: right;
            position: relative; }
            .features .tabs .tab.show .image img {
              width: 60%;
              transform: scale(1); }
          .features .tabs .tab.show .image::before {
            content: '';
            background: var(--SoftBlue);
            height: 80%;
            width: 80%;
            z-index: -1;
            bottom: -50px;
            left: -100px;
            border-radius: 75px;
            position: absolute; }
          .features .tabs .tab.show .text {
            height: 100%;
            width: 50%;
            text-align: left;
            padding: 50px 200px 50px 100px; }
            .features .tabs .tab.show .text .heading {
              padding: 20px 0px; }
            .features .tabs .tab.show .text .subheading {
              width: 100%;
              padding: 0px; }
            .features .tabs .tab.show .text button {
              margin-top: 20px;
              width: 25%;
              height: 40px;
              background: var(--SoftBlue);
              color: white; }
  .extensions {
    text-align: center;
    width: 80%;
    margin: 0 auto; }
    .extensions .heading {
      font-size: 2.5rem; }
    .extensions .subheading {
      width: 50%;
      margin: 0 auto;
      padding: 15px; }
    .extensions .apps {
      height: auto;
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly; }
      .extensions .apps .app {
        margin-top: 25px;
        width: 30%;
        height: 350px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        box-shadow: 0px 5px 10px #7e7979;
        padding: 20px 0px; }
      .extensions .apps > .app:nth-child(2) {
        margin-top: 60px; }
      .extensions .apps > .app:nth-child(3) {
        margin-top: 100px; }
  .faq {
    text-align: center;
    padding: 100px 0px; }
    .faq .heading {
      font-size: 2.75rem; }
    .faq .subheading {
      width: 40%;
      margin: 0 auto;
      padding: 20px; }
    .faq .questions {
      width: 40%;
      margin: 0 auto; }
      .faq .questions > div {
        margin: 15px 0px;
        border-bottom: 1px solid grey;
        padding: 15px 0px; }
        .faq .questions > div .question {
          display: flex;
          flex-direction: row;
          justify-content: space-between; }
        .faq .questions > div .answer {
          display: none;
          text-align: left; }
          .faq .questions > div .answer.show {
            display: flex;
            padding: 10px 0px; }
    .faq button {
      background: var(--SoftBlue);
      margin-top: 40px;
      display: inline-block;
      width: 10%;
      height: 50px;
      color: white; }
  .update {
    background: var(--SoftBlue);
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 50px 0px;
    color: white; }
    .update .head {
      width: 40%;
      margin: 0 auto;
      font-size: 3rem; }
    .update .inputs {
      width: 40%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 70% 30%;
      padding: 0px 50px; }
      .update .inputs input, .update .inputs button {
        width: 100%;
        height: 45px;
        margin: 15px 0px; }
      .update .inputs input {
        width: 70%;
        padding: 0px;
        border-radius: 10px;
        outline: none;
        border: none; }
      .update .inputs .input {
        position: relative; }
      .update .inputs button {
        background: var(--SoftRed);
        box-shadow: none;
        color: white; }
      .update .inputs .error {
        position: absolute;
        right: 10px;
        top: 30px;
        visibility: hidden; }
      .update .inputs .error_message {
        visibility: hidden; }
  footer {
    color: white;
    background: var(--VeryDarkBlue);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 20px 0px;
    text-align: center;
    min-height: unset; }
    footer .foot {
      display: flex;
      text-align: center;
      flex-direction: row; }
      footer .foot a {
        margin: 0px 20px;
        text-transform: uppercase;
        color: white; }
    footer i {
      margin: 0px 20px; } }