/*1065px*/
@media only screen and (max-width: 66.5625em) {

    html {
        font-size: 55%;
    }

    .header-details {
        flex-basis: 60%;
        padding-right: 12rem;

    }

    .header-box {
        padding-bottom: 10rem;
    }
}



/*900px*/
@media only screen and (max-width: 56.25em) {


    section {
        padding-right: 4rem;
        padding-left: 4rem;
    }

    .header-details {
        flex-basis: 80%;
        padding-right: 8rem;

    }

    .header-box {
        padding-bottom: 6rem;
    }

    .header-text {
        line-height: 3rem;
    }

    .header-btn-box {
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .header-btn:not(:last-child) {
        margin-right: 0rem;
        margin-bottom: 2rem;
    }


    .about-details {
        flex-basis: 100%;
    }


    .feature-box:not(:last-child) {
        padding-right: 6rem;
    }

    .payment-heading {
        width: 50%;
    }

    .payment-details {
        padding-top: 0;
        width: 70%;
    }

    .work-details {
        padding-top: 4rem;
    }

    .grow-heading {
        margin-bottom: 6rem;
    }

    .grow-text {
        padding-top: 3rem;
        padding-right: 0rem;
        flex-basis: 50%;


    }
}


/*775px*/
@media only screen and (max-width: 48.4375em) {
    #menu-icon {
        display: block;
    }

    #menu-icon i.active:before {
        content: '\f00d';
        color: #fff;
    }

    .nav-list {
        position: fixed;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        top: 0;
        left: -100%;
        right: 0;
        background-color: #1F1755;
        transition: all 300ms ease;
        z-index: 1000;
    }

    .nav-list.active {
        left: 0;
    }

    .nav-list li:not(:last-child) {
        margin-bottom: 4rem;
    }


    .nav-box {
        padding: 3.5rem 4rem;
        align-items: flex-start;
    }

    .nav-btn-text {
        background-color: #e9e5ff;
        color: #5e44ff;
    }

    .nav-link {
        color: #fff;
    }

    .header {
        padding: 0 3rem;
    }

    .header-box {
        flex-direction: column;
        text-align: center;
    }

    .header-details {
        flex-basis: 100%;
        text-align: center;
        padding: 5rem 5rem;
    }

    .header-btn-box {
        display: inline-flex;
    }

    .header-image {
        width: 80%;
    }

    .about {
        padding: 0 4rem;
    }

    .about-box {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }



    .about-heading {
        text-align: center;
    }

    .about-btn {
        width: 60%;
    }

    .about-image {
        width: 90%;
    }

    .features {
        padding-left: 4rem;
        padding-right: 4rem;
        padding-top: 10rem;
        text-align: center;
    }

    .feature-details {
        flex-direction: column;
    }

    .feature-box:not(:last-child) {
        padding-right: 0;
        margin-bottom: 6rem;
    }

    .payment {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .payment-heading {
        width: 80%;
    }

    .payment-box {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .payment-details-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .payment-icon {
        margin-bottom: 2rem;
    }

    .payment-head {
        flex-direction: column;
    }

    .payment-image {
        width: 80%;
        margin-top: 6rem;

    }

    .work-box {
        padding-top: 4rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .work {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .work-image {
        width: 70%;
        margin-top: 6rem;
        align-self: center;
    }


    .grow-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .grow-img {
        margin-top: 6rem;
        width: 60%;
    }

    .footer {

        padding-left: 4rem;
        padding-right: 4rem;
    }

    .footer-box {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .menu-box {
        margin-top: 4rem;
        align-self: flex-start;
        text-align: left;
    }

    .copyright {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .copyright-icon-box {
        margin-top: 2rem;
    }
}