*{
    margin: 0px;
}
.hover:hover {
    cursor: pointer;
}

.active:active {
    cursor: pointer;
    opacity: 0.6;
}

body {
    font-family:("https://fonts.google.com/specimen/Open+Sans");
    font-size: 20px;
    text-align: center;
}

@media (max-width:768px) {
    .section-1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px auto;
        width: 90%;
    }

    .left {
        display: flex;
    }

    h1 {
        margin-left: 8px;
        margin-bottom: 20px;
    }

    .right {
        border: 1px solid hsl(321, 100%, 78%);
        color: hsl(322, 100%, 66%);
        height: 44px;
        width: 100px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 22px;
        text-align: center;
    }

    /*section-2 styles */

    .section-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 60px auto;
        width: 90%;
    }

    #start-btn {
        border: none;
        background-color: hsl(322, 100%, 66%);
        color: white;
        height: 44px;
        border-radius: 22px;
        margin-top: 25px;
        padding-left: 35px;
        padding-right: 35px;
    }

    /* section-3*/
    .section-3 {
        margin: 60px auto;
        width: 90%;
    }
    #screen-mockups {
        width: 100%;
        height: 100%;
    }

    /*section-4 styles*/

    .section-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 60px auto;
        width: 90%;
    }

    .left1 {
        margin-bottom: 60px;
    }

    /*section-5 tyles*/

    .section-5 {
        display: flex;
        flex-direction: column-reverse;
        margin: 60px auto;
        width: 90%;
    }

    #grow-together {
        margin-top: 50px;
    }

    #grow {
        width: 100%;
    }

    /*section-6*/

    .section-6 {
        display: flex;
        flex-direction: column;
        margin: 60px auto;
        width: 90%;
    }
    .foll-conv {
        flex: 0.5;
    }

    #flow-img {
        width: 100%;
    }

    .foll-text {
        flex: 0.5;
        margin-top: 50px;
    }

    /*section-7*/

    .section-7 {
        display: flex;
        flex-direction: column-reverse;
        margin: 60px auto;
        width: 90%;
    }

    #user-img {
        width: 100%;
    }

    .user-img {
        margin-bottom: 50px;
    }

    /*section-8 styles*/

    .section-8 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 60px auto;
        width: 90%;
    }

    #get-started {
        margin-top: 30px;
        margin-bottom: 50px;
        border: none;
        background-color: hsl(322, 100%, 66%);
        color: white;
        height: 44px;
        border-radius: 22px;
        padding-left: 40px;
        padding-right: 40px;
    }

    /*section-9 styles*/

    .section-9 {
        margin: 50px auto;
        width: 90%;
        background-color: hsl(192, 100%, 9%);
        color: white;
        display: flex;
        flex-direction: column-reverse;
        text-align: start;
    }

    .news-letter {
        margin-bottom: 50px;
    }

    .sub {
        display: flex;
        flex-direction: column;
        align-items:flex-end;
        margin-right: 30px;
    }

    #input {
        border: none;
        height: 35px;
        margin-bottom: 20px;
        margin-top: 20px;
        padding-left: 50px;
        border-radius: 8px;
    }

    #sub-btn {
        border: none;
        height: 35px;
        padding-left: 35px;
        padding-right: 25px;
        background-color: hsl(322, 100%, 66%);
        color: white;
        border-radius: 8px;
    }

    .huddle {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20px;
    }

    #t-1 {
        display: flex;
        align-items: center;
    }

    #phone {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    #phone > img {
        margin-right: 10px;
    }

    #email {
        margin-bottom: 30px;
    }

    #email > img {
        margin-right: 10px;
    }

    .social-media {
        margin-bottom: 20px;
    }

    #insta {
        margin-left: 15px;
        margin-right: 15px;
    }
}

@media (min-width:768.1px) {
    body {
        margin:15px  auto;
        width: 90%;
    }
    .section-1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .left {
        display: flex;
    }

    h1 {
        margin-left: 8px;
        margin-bottom: 20px;
    }

    .right {
        border: 1px solid hsl(321, 100%, 78%) ;
        color: hsl(322, 100%, 66%);
        height: 30px;
        width: 90px;
        padding: auto;
        border-radius: 15px;
    }

    /*section-2 styles */

    .section-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }

    #start-btn {
        border: none;
        background-color: hsl(322, 100%, 66%);
        color: white;
        height: 44px;
        border-radius: 22px;
        padding-left: 35px;
        padding-right: 35px;
        margin-top: 30px;
    }

    /*section-3 styles*/

    .section-3 {
        margin-top: 50px;
    }

    #screen-mockups {
        width: 100%;
        height: 100%;
    }

    /*section-4*/

    .section-4 {
        display: flex;
        margin-top: 50px;
    }

    .left1 {
        flex: 0.5;
    }

    .right1 {
        flex: 0.5;
    }

    /*section-5*/

    .section-5 {
        display: flex;
        align-items: center;
        margin-top: 50px;
    }

    #grow-together {
        flex: 0.5;
    }

    .img {
        flex: 0.5;
    }

    #grow {
        width: 100%;
    }

    /*section-6 styles*/

    .section-6 {
        display: flex;
        align-items: center;
        margin-top: 50px;
    }

    .foll-conv {
        flex: 0.5;
    }

    #flow-img {
        width: 100%;
    }

    .foll-text {
        flex: 0.5;
    }

    /*section-7 styles*/

    .section-7 {
        display: flex;
        align-items: center;
        margin-top: 50px;
    }

    .user-text {
        flex: 0.5;
    }

    .user-img {
        flex: 0.5;
    }

    #user-img {
        width: 100%;
    }

    /*section-8 styles*/
    .section-8 {
        margin-top: 30px;
    }

    #get-started {
        margin-top: 50px;
        margin-bottom: 50px;
        border: none;
        background-color: hsl(322, 100%, 66%);
        color: white;
        height: 44px;
        border-radius: 22px;
        padding-left: 40px;
        padding-right: 40px;
    }

    /*section-9 styles*/

    .section-9 {
        display: flex;
        align-items: center;
        text-align: start;
        background-color: hsl(192, 100%, 9%);
        color: white;
        margin-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .huddle {
        flex: 0.5;
        margin-right: 30px;
        padding: 30px;
        display: flex;
        flex-direction: column;
    }

    #phone {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    #phone > img {
        margin-right: 10px;
    }

    #email {
        margin-bottom: 20px;
    }

    #email > img {
        margin-right: 10px;
    }

    .social-media {
        margin-bottom: 20px;
    }

    #insta {
        margin-left: 20px;
        margin-right: 20px;
    }

    .news-letter {
        flex: 0.5;
        margin-left: 30px;
        padding: 30px;
    }

    #input {
        border: none;
        height: 40px;
        margin-bottom: 20px;
        margin-top: 20px;
        padding-left: 35px;
        padding-right: 35px;
        border-radius: 8px;
    }

    #sub-btn {
        border: none;
        height: 40px;
        margin-left: 20px;
        padding-left: 35px;
        padding-right: 35px;
        background-color: hsl(322, 100%, 66%);
        color: white;
        border-radius: 7px;
    }
}