@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
:root {
  --pink:hsl(322, 100%, 66%);
  --veryDarkCyan:hsl(192, 100%, 9%);
  --veryPaleBlue:hsl(207, 100%, 98%) ; }

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

body {
  font-family: 'Open Sans', sans-serif;
  max-width: 100vw; }

.heading {
  color: var(--veryDarkCyan);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.3rem; }

.container {
  width: 90%;
  margin: 0 auto; }

button {
  border-radius: 25px;
  outline: none;
  border: none;
  background: var(--pink);
  height: 50px;
  width: 60%;
  color: white;
  font-weight: 600;
  box-shadow: 0px 2px 10px grey;
  cursor: pointer; }

@media screen and (min-width: 375px) {
  header {
    width: 90%;
    margin: 0 auto;
    padding: 25px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    header .logo img {
      width: 70%; }
    header button {
      border-radius: 25px;
      outline: none;
      border: none;
      background: var(--pink);
      height: 50px;
      width: 60%;
      color: white;
      font-weight: 600;
      box-shadow: 0px 2px 10px grey;
      cursor: pointer;
      width: 20%;
      height: 35px;
      background: white;
      border: 2px solid var(--pink);
      color: var(--pink);
      text-transform: capitalize; }
  .community {
    text-align: center;
    padding: 100px 50px; }
    .community p {
      padding: 30px 15px;
      font-size: 1.2rem;
      color: var(--veryDarkCyan);
      font-weight: 600; }
    .community button {
      margin: 45px 0px; }
  .mockup {
    width: 90%;
    margin: 0 auto; }
    .mockup img {
      transform: scale(0.9);
      width: 100%; }
  .stats {
    text-align: center;
    height: 70vh;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    align-items: center;
    padding: 100px 0px;
    grid-gap: 5vh; }
    .stats img {
      transform: scale(0.8); }
    .stats > div {
      width: 40%;
      margin: 0 auto;
      text-align: left; }
    .stats .num {
      font-size: 5rem;
      font-weight: 700;
      color: var(--veryDarkCyan); }
    .stats p {
      text-align: center;
      color: grey;
      font-weight: 600;
      font-size: large; }
  .huddle {
    text-align: center;
    max-width: 100%; }
    .huddle img {
      width: 100%;
      transform: scale(0.8); }
    .huddle > div {
      width: 100vw;
      margin-bottom: 15vh; }
      .huddle > div p {
        color: var(--veryDarkCyan);
        padding: 30px;
        font-size: 1.5rem; }
    .huddle > div:nth-child(odd) {
      flex-direction: row-reverse;
      background-color: var(--veryPaleBlue);
      position: relative; }
    .huddle > div:nth-child(1)::before {
      content: '';
      background: url("../images/bg-section-top-mobile-1.svg");
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
      top: -150px; }
    .huddle > div:nth-child(1)::after {
      content: '';
      background: url("../images/bg-section-bottom-mobile-1.svg");
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
      bottom: -680px;
      left: 0px; }
    .huddle > div:nth-child(3)::before {
      content: '';
      background: url("../images/bg-section-top-mobile-2.svg");
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
      top: -130px; }
    .huddle > div:nth-child(3)::after {
      content: '';
      background: url("../images/bg-section-bottom-mobile-2.svg");
      position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
      bottom: -650px;
      left: 0px; }
  .ready {
    height: 75vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px; }
    .ready button {
      margin: 40px 0px; }
  footer {
    height: 100vh;
    background: var(--veryDarkCyan);
    position: relative;
    width: 100vw; }
  footer::before {
    content: '';
    height: 100%;
    background: url("../images/bg-footer-top-mobile.svg");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -60px;
    width: 100%; }
  .newsletter {
    height: 50vh;
    color: white;
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around; }
    .newsletter .head {
      text-transform: uppercase;
      font-size: 1.2rem;
      font-weight: 700; }
    .newsletter input {
      width: 100%;
      height: 50px;
      border-radius: 11px;
      outline: none;
      border: none; }
    .newsletter .btn {
      margin-top: 10px;
      text-align: right; }
      .newsletter .btn button {
        width: 40%;
        box-shadow: none;
        border-radius: 11px;
        font-size: 1.2rem; } }

.mainFooter {
  color: white;
  padding: 20px 30px;
  height: 50vh;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  .mainFooter .logo img {
    width: 80%; }
  .mainFooter p {
    font-size: 1.3rem; }
  .mainFooter .contact {
    font-size: 1.2rem; }
    .mainFooter .contact img {
      transform: scale(1.5);
      margin-right: 20px; }
    .mainFooter .contact > div {
      margin: 20px 0px; }
  .mainFooter .social i {
    margin: 0px 20px 0px 0px; }

@media screen and (min-width: 1440px) {
  header {
    width: 90%;
    margin: 0 auto;
    padding: 100px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20vh; }
    header .logo img {
      width: 100%; }
    header button {
      border-radius: 25px;
      outline: none;
      border: none;
      background: var(--pink);
      height: 50px;
      width: 60%;
      color: white;
      font-weight: 600;
      box-shadow: 0px 2px 10px grey;
      cursor: pointer;
      width: 10%;
      height: 50px;
      background: white;
      border: 2px solid var(--pink);
      color: var(--pink);
      text-transform: capitalize; }
  .community {
    height: 80vh;
    text-align: center;
    padding: 0px;
    padding-top: 20vh; }
    .community .heading {
      font-size: 3.5rem; }
    .community p {
      width: 45%;
      margin: 0 auto;
      padding: 30px;
      font-size: 1.2rem;
      color: var(--veryDarkCyan);
      font-weight: 600; }
    .community button {
      width: 20%;
      margin: 45px 0px;
      height: 60px; }
  .mockup {
    width: 100%; }
    .mockup img {
      transform: scale(0.75);
      width: 100%; }
  .stats {
    text-align: center;
    height: 40vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    padding: 0px; }
    .stats img {
      transform: scale(1.2); }
    .stats > div {
      width: 50%;
      margin: 0 auto;
      text-align: left; }
    .stats .num {
      font-size: 6rem;
      font-weight: 700;
      color: var(--veryDarkCyan); }
    .stats p {
      text-align: unset;
      color: grey;
      font-weight: 600;
      font-size: large; }
  .huddle {
    text-align: left;
    width: 100%; }
    .huddle > div {
      padding: 0px 100px;
      margin: 150px 0px;
      display: flex;
      align-items: center; }
      .huddle > div img {
        width: 50%;
        transform: scale(0.75); }
      .huddle > div p {
        color: var(--veryDarkCyan);
        padding: 30px 0px;
        font-size: 1.5rem; }
    .huddle > div:nth-child(odd) {
      flex-direction: row-reverse;
      width: 100vw;
      position: relative; }
    .huddle > div:nth-child(1)::before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      top: -150px;
      left: 0px;
      background: url("../images/bg-section-top-desktop-1.svg");
      background-size: contain;
      background-repeat: no-repeat; }
    .huddle > div:nth-child(1)::after {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      bottom: -540px;
      background: url("../images/bg-section-bottom-desktop-1.svg");
      background-size: contain;
      background-repeat: no-repeat; }
    .huddle > div:nth-child(3)::before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      top: -150px;
      left: 0px;
      background: url("../images/bg-section-top-desktop-2.svg");
      background-size: contain;
      background-repeat: no-repeat; }
    .huddle > div:nth-child(3)::after {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      bottom: -500px;
      background: url("../images/bg-section-bottom-desktop-2.svg");
      background-size: contain;
      background-repeat: no-repeat; }
  .ready {
    height: 75vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 150px; }
    .ready .heading {
      font-size: 4rem; }
    .ready button {
      margin: 40px 0px;
      height: 70px;
      font-size: 1.2rem; }
  footer {
    height: 65vh;
    display: flex;
    flex-direction: row-reverse;
    background-color: var(--veryDarkCyan);
    position: relative; }
  footer::before {
    content: "";
    height: 100%;
    background: url("../images/bg-footer-top-desktop.svg") no-repeat contain;
    position: absolute;
    top: -160px;
    width: 100%; }
  .newsletter {
    height: 100%;
    color: white;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-around; }
    .newsletter .head {
      text-transform: uppercase;
      font-size: 3rem;
      font-weight: 700; }
    .newsletter p {
      width: 60%;
      font-size: 1.3rem; }
    .newsletter input {
      width: 70%;
      height: 50px;
      border-radius: 11px;
      outline: none;
      border: none; }
    .newsletter .btn {
      text-align: left; }
      .newsletter .btn button {
        box-shadow: none;
        border-radius: 11px;
        font-size: 1.2rem;
        width: 40%; }
  .mainFooter {
    color: white;
    padding: 100px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; }
    .mainFooter .logo img {
      width: 80%; }
    .mainFooter p {
      font-size: 1.3rem;
      width: 50%; }
    .mainFooter .contact {
      font-size: 1.2rem; }
      .mainFooter .contact img {
        transform: scale(1.5);
        margin-right: 20px; }
      .mainFooter .contact > div {
        margin: 30px 0px; }
    .mainFooter .social i {
      margin: 0px 20px 0px 0px;
      cursor: pointer; } }