h1, h2, h3, p, i {
    font-family: Heebo, sans-serif;
    letter-spacing: 1px;
    font-weight: bold;
}
@media screen and (min-width: 300px) and (max-width: 1200px) {
    h1, h2, h3, p, i, button {
        font-family: Heebo, sans-serif;
        letter-spacing: 1px;
        font-weight: bold;
    }
    
    .main {
        background-color: white;
    }

    .split {
        margin-top: -35px;
    }
    
    .banner {
        height: 450px;
        background-color: #041A31;
        background-image: url('../img/hand.png');
        background-repeat: no-repeat;
        background-size: 300px;
        background-position-x: 50%;
        background-position-y: 180px;
        border-bottom: 1px solid #ddd;
    }
    
    .text-container {
        text-align: center;
        background-color: #041A31;
    }
    
    .text-container .title {
        display: none;
    }
    
    .text-container img {
        display: none;
    }

    .text-container .phrase {
        padding-top: 50px;
        line-height: 50px;
        font-weight: bold;
        font-size: 24px;
        color: white;
    }
    
    .main {
        padding: 4% 0;
        background-color: white;
    }
    
    .section {
        margin-bottom: 60px;
    }
    
    .section .holding-form {
        width: 100%;
    }
    
    .section .title {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
        margin: 40px 0 40px 0 !important;
        line-height: 0;
    }
    
    .section .description {
        line-height: 32px;
        font-weight: normal;
        font-size: 17px;
    }

    .section .description img {
        display: block;
        margin: 0 auto;
    }
    
    .section .intro .description {
        padding: 6%;
    }
    
    .section .intro .description p {
        margin-top: 20px;
        font-weight: normal;
        line-height: 36px;
    }
    
    .section .description .images {
        margin-top: 25px;
    }
    
    .feature {
        padding-top: 40px;
        background-color: #F0F0FA;
    }

    .feature .description .image {
        margin-top: 25px;
    }

    #sub {
        margin-bottom: 40px;
    }
    
    .feature .circle {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin:  0 auto;
        margin-top: 20px;
        margin-bottom: 60px;
        height: 200px;
        width: 200px;
        border-radius: 50%;
    }
    
    .feature .circle span {
        line-height: 27px;
        font-weight: bold;
        color: white;
        font-size: 18px;
        text-shadow: 3px 0px 7px rgba(0,0,0,0.05), -3px 0px 7px rgba(0,0,0,0.05), 0px 4px 7px rgba(0,0,0,0.05);
    }

    .feature .dashboard-mobile {
        margin-top: 40px !important;
        padding: 0 6%;
        padding-bottom: 60px;
    }
    
    .feature .description p {
        font-weight: normal;
        margin-top: 40px;
        padding: 0 6%;
    }
    
    .feature .image-phone {
        width: 100%;
        padding-bottom: 60px;
    }
    
    .feature .image {
        width: 100%;
    }
    
    .feature .dashboard {
        display: none !important;
    }
    
    #dashboard-2 {
        width: 67%;
        margin-left: 40px;
    }
    
    .feature .magnify {
        width: 80%;
    }
    
    #patient-tab {
        height: 110px;
        margin-left: -15px;
        margin-top: 40px;
    }
    
    .shift {
        width: 400px !important;
        margin-top: 80px !important;
        margin-left: 450px !important;
        position: absolute;
    }
    
    .section .reviews {
        padding: 0 6%;
    }

    #specialty {
        padding: 15px;
    }
    
    .reviews .review {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px 40px 20px 40px;
        margin-top: 40px;
    }
    
    .review .dot {
        width: 12px;
        height: 12px;
        background-color: #F0F0FA;
        border-radius: 50%;
    }
    
    .left {
        float: left;
        margin-right: 10px;
    }
    
    .right {
        float: right;
        margin-left: 10px;
    }
    
    .review .sentence {
        display: inline-block;
        color: #041A31;
        font-weight: normal;
        font-size: 16px;
        line-height: 30px;
    }
    
    .form {
        padding: 40px 0;
        border-radius: 8px;
        background-color: #d4ebff;
    }
    
    .contact {
        display: flex;
        justify-content: center;
        padding: 40px 0 0 0;
    }
    
    .contact .title {
        font-weight: bold;
        color: #041A31;
        font-size: 17px;
    }
    
    .contact .title img {
        width: 17px;
        margin-right: 5px;
    }
    
    .contact li {
        line-height: 35px;
        color: #041A31;
        font-size: 14px;
    }
    
    .contact li a:hover {
        color: #041A31;
    }
    
    .feature .magnify-dashboard {
        position: absolute;
        margin-left: 650px;
        margin-top: -100px;
        height: 320px;
        width: 320px;
        border: 1px solid #ddd;
        border-radius: 50%;
        background-image: url(../img/dashboard-2.png);
        background-size: 1100px;
        background-position: -70px 460px;
    }
    #flow-direction, #appointment-pic {
        display: none;
    }
    #flow-direction-mobile {
        margin-top: 40px;
    }
    .white-step {
        padding-top: 40px;
        padding-bottom: 20px;
        background-color: #f0f0fa;
    }
    #mobile-pic {
        height: 25%;
        width: 25%;
        margin: 0 auto;
        display: block;
    }
    .shaded-step {
        background-color: white;
        padding-top: 40px;
        padding-bottom: 20px;
    }
    .flow-mobile-step {
        text-align: center;
        background-color: #7dc1ff;
        border-radius: 24px;
        margin-right: 100px;
        margin-left: 100px;
        padding-top: 20px;
        padding-bottom: 20px;
        color: white;
        text-shadow: 3px 0px 7px rgba(0,0,0,0.05), -3px 0px 7px rgba(0,0,0,0.05), 0px 4px 7px rgba(0,0,0,0.05);
        font-size: 18px;
    }
    .flow-description-mobile {
        margin: 40px 7% 20px 7%;
        font-size: 17px;
        line-height: 30px;
    }
    #corona-info {
        background-color: #FFCBA3;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    #corona-title {
        margin: 0px 20px 40px 20px;
        text-align: center;
        height: 100%;
    }
    #corona-details {
        margin: 0px 7% 0px 7%;
        font-size: 17px;
        line-height: 30px;
    }
    #registration-form p {
        margin-top: 40px;
        line-height: 30px;
    }
    .section .title {
        margin-top: 40px;
        margin-bottom: 40px;
        text-align: center;
    }
    #registration-form .description {
        margin-left: 7%;
        margin-right: 7%;
        font-weight: normal;
        font-size: 17px;
    }
    .form {
        background-color: #d4ebff;
    }
    .contact {
        margin-bottom: 40px
    }

}
@media screen and (min-width: 1201px) {
    h1, h2, h3, p, i, button {
        font-family: Heebo, sans-serif;
        letter-spacing: 1px;
        font-weight: bold;
    }
    
    .main {
        background-color: white;
    }
    
    .banner {
        display: grid;
        grid-template-rows: 1fr 1fr;
        height: 450px;
        background-color: #041A31;
        background-image: url('../img/hand.png');
        background-repeat: no-repeat;
        background-size: 400px;
        background-position-x: 100px;
        background-position-y: 30px;
        border-bottom: 1px solid #ddd;
    }
    
    .text-container {
        display: grid;
        grid-template-columns: 3fr 1fr;
        position: relative;
        margin: 0 auto;
        width: 900px;
        padding-left: 40px;
        background-color: transparent;
    }

    .text-container img {
        margin-top: 140px
    }

    .feature .dashboard-mobile {
        display: none;
    }
    
    .text-container .title {
        position: absolute;
        margin-left: 210px;
        width: 100%;
        bottom: 40px;
        font-size: 70px;
        color: white;
        padding-left: 40px;
    }
    
    .text-container .phrase {
        text-align: left;
        margin: 160px 0 0 210px;
        line-height: 50px;
        font-weight: bold;
        font-size: 36px;
        color: white;
    }
    
    .main {
        padding: 80px 0;
        background-color: white;
    }
    
    .section {
        margin-bottom: 60px;
    }
    
    .section .intro {
        display: grid;
        grid-template-columns: 3fr 2fr;
        column-gap: 60px;
    }
    
    .section .holding-form {
        width: 100%;
    }
    
    .section .title {
        font-weight: bold;
        font-size: 28px;
        margin-bottom: 25px;
        margin-left: 80px;
    }
    
    .section .description {
        line-height: 32px;
        font-weight: normal;
        font-size: 18px;
    }
    
    .section .intro .description {
        margin-left: 80px;
        margin-top: 40px;
        display:grid;
        grid-template-columns: 1fr 3fr;
        column-gap: 60px;
    }
    
    .section .intro .description p {
        margin-top: 20px;
        font-weight: normal;
        line-height: 36px;
    }
    
    .section .description .images {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 80px;
        margin-top: 25px;
    }
    
    .split {
        display: grid;
        grid-template-columns: 2fr 1fr;
        column-gap: 50px;
    }
    
    #almost-equal {
        display: grid;
        grid-template-columns: 2fr 3fr;
        column-gap: 50px;
    }
    
    .with-title {
        display: grid;
        grid-template-columns: 1fr 3fr;
        column-gap: 50px;
    }
    
    .feature {
        display: grid;
        grid-template-columns: 1fr 5fr;
        column-gap: 60px;
        padding: 80px 80px;
        background-color: #F0F0FA;
    }
    
    .feature .circle {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 200px;
        width: 200px;
        border-radius: 50%;
    }
    
    .feature .circle span {
        line-height: 27px;
        font-weight: bold;
        color: white;
        font-size: 18px;
        text-shadow: 3px 0px 7px rgba(0,0,0,0.05), -3px 0px 7px rgba(0,0,0,0.05), 0px 4px 7px rgba(0,0,0,0.05);
    }
    
    .feature .description p {
        font-weight: normal;
    }
    
    .feature .image-phone {
        width: 130%;
    }
    
    .feature .image {
        width: 100%;
    }
    
    .feature .dashboard {
        margin-top: 40px;
    }
    
    #dashboard-2 {
        width: 67%;
        margin-left: 40px;
    }
    
    .feature .magnify {
        width: 80%;
    }
    
    #patient-tab {
        height: 110px;
        margin-left: -15px;
        margin-top: 40px;
    }
    
    .shift {
        width: 400px !important;
        margin-top: 80px !important;
        margin-left: 450px !important;
        position: absolute;
    }
    
    .section .reviews {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        padding: 0 80px;
    }
    
    .reviews .review {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px 40px 20px 40px;
    }
    
    .review .dot {
        width: 12px;
        height: 12px;
        background-color: #F0F0FA;
        border-radius: 50%;
    }
    
    .left {
        float: left;
        margin-right: 10px;
    }
    
    .right {
        float: right;
        margin-left: 10px;
    }
    
    .review .sentence {
        display: inline-block;
        color: #041A31;
        font-weight: normal;
        font-size: 16px;
        line-height: 30px;
    }
    
    .form {
        padding: 40px 0;
        border-radius: 8px;
        background-color: #d4ebff;
    }
    
    .contact {
        display: flex;
        justify-content: center;
        padding: 40px 0 0 0;
    }
    
    .contact .title {
        font-weight: bold;
        color: #041A31;
        font-size: 17px;
    }
    
    .contact .title img {
        width: 17px;
        margin-right: 5px;
    }
    
    .contact li {
        line-height: 35px;
        color: #041A31;
        font-size: 14px;
    }
    
    .contact li a:hover {
        color: #041A31;
    }
    
    .feature .magnify-dashboard {
        position: absolute;
        margin-left: 650px;
        margin-top: -100px;
        height: 320px;
        width: 320px;
        border: 1px solid #ddd;
        border-radius: 50%;
        background-image: url(../img/dashboard-2.png);
        background-size: 1100px;
        background-position: -70px 460px;
    }
    #flow {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
    #flow-direction-mobile, #mobile-pic {
        display: none;
    }
    #flow-direction {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 40px;
        padding: 0px 80px;
    }
    #flow-steps {
        margin-bottom: 55px;
        font-weight: 550;
        display: grid;
        row-gap: 20px;
        height: 100%;
        text-align: center;
        text-shadow: 3px 0px 7px rgba(0,0,0,0.05), -3px 0px 7px rgba(0,0,0,0.05), 0px 4px 7px rgba(0,0,0,0.05);
    }
    
    .step-label {
        border: 1px solid;
        border-radius: 28px;
        padding: 20px;
        color: white;
    }
    #flow-details {
        margin-top: 15px;
        font-size: 16px;
        row-gap: 20px;
        height: 100%;
        margin-left: 20px;
        margin-bottom: 55px;
        line-height: 30px;
    }
    #appointment-pic {
        margin-top: 150px;
        width: 300px;
    }
    .section .holding-form {
        width: 100%;
    }
    .section .title {
        font-weight: bold;
        font-size: 28px;
        margin-bottom: 25px;
    }
    .section .description {
        line-height: 32px;
        font-weight: normal;
        font-size: 18px;
    }
    #corona-info {
        background-color: #FFCBA3;
        padding: 60px 80px;
        margin-top: 100px;
    }
    #corona-title {
        text-align: center;
        margin-bottom: 30px;
    }
    #corona-details {
        line-height: 30px;
        font-size: 17px;
    }
    #registration-form {
        margin-top: 20px;
        margin-bottom: 40px;
    }
    .form {
        padding: 40px 0;
        border-radius: 8px;
        background-color: #d4ebff;
    }
}

#description-contact {
    margin-left: 80px;
}