@media screen and (max-width: 1050px) {
    .phone {
        width: 340px;
        left: 75%;
    }
  }

  @media screen and (max-width: 890px) {
    .phone {
        position: relative;
        margin: 0px auto;
        left: unset;
        bottom: -200px;
        margin-top: -160px;
    }
  }

  @media screen and (max-width: 750px) {
    .columngrid {
        grid-template-columns: 1fr;
        text-align: left;
        row-gap: 24px;
    }
    h2 {
        text-align: left;
    }
  }

  @media screen and (max-width: 620px) {
    h1 {
        font-size: 40px;
    }
    h2 {
        font-size: 32px;
    }
  }

  @media screen and (max-width: 470px) {
    .getstartedinput {
        flex-direction: column;
        border-radius: 24px;
        padding: 12px;
    }
    .getstartedinputtext {
        width: 100%;
        height: 64px;
    }
    .getstartedbtn {
        border-radius: 16px;
        margin-top: 8px;
    }
    .getstartedinputtext input {
        width: 100%;
        padding: 0px 8px;
    }
    .heromain {
        padding: 32px 0px 40px 0px;
    }
    .phone {
        width: 90%;
        bottom: -20px;
        margin-top: 40px;
    }
    .introsection {
        padding-top: 80px;
    }
    .logo {
        width: 120px;
    }
    header .wrapper {
        font-size: 14px;
    }
  }