/* ! *********************************** */
/*! Below 1200px  */
/* !1200px/16 = 75em */
/* ! *********************************** */

@media (max-width: 75em) {
    /* !=============================== */
    /* !home ========================== */
    /* !=============================== */

    /* !header */

    .header {
        padding: 3.5rem 7rem;
    }

    .header .links ul {
        gap: 4rem;
    }

    .header .button {
        margin-left: 4rem;
    }

    /*! banner =================== */

    .h-banner {
        padding: 0rem 2rem 6rem 7rem;
    }
    .h-banner .c1 h1 {
        font-size: 5.1rem;
        line-height: 5.7rem;
    }

    /*! simple =================== */
    .h-simple {
        padding: 13rem 7rem 13rem 7rem;
    }
    /* !customize===================== */

    .h-customize {
        padding: 13.6rem 7rem 13.6rem 7rem;
    }

    /* !reach===================== */

    .h-reach {
        padding: 7rem 7rem 8rem 7rem;
    }

    .h-reach .c1 h1 {
        font-size: 4.3rem;
        line-height: 5.1rem;
    }
    /* !whyNeed===================== */
    .h-whyNeed {
        padding: 13.6rem 7rem 13.8rem 7rem;
    }
    .h-whyNeed .item h1 {
        font-size: 5.8rem;
        line-height: 5.9rem;
    }
    .h-whyNeed .item p {
        font-size: 1.8rem;
        line-height: 2.8rem;
    }
    /* !features==================== */
    .h-features {
        padding: 8rem 7rem 15rem 7rem;
    }
    .h-features .item {
        padding: 4rem 3rem;
        gap: 2rem;
    }

    /* !how Integrate==================== */

    .h-howIntegrate {
        padding: 6rem 7rem 13.6rem 7rem;
    }

    .h-howIntegrate .content {
        padding: 11rem 6rem;
    }

    /* !Integrate Seamless =================== */

    .h-integrateSeamless {
        padding: 6rem 7rem 13.6rem 7rem;
    }

    .h-integrateSeamless .content {
        padding: 11rem 6rem;
    }

    /* !testimony =================== */

    .h-testimony {
        padding: 13.6rem 7rem 13.6rem 7rem;
    }

    /* !brands =================== */
    .h-brands {
        padding: 13rem 7rem 13rem 7rem;
    }

    /* !h- FAQ ============================== */

    .h-FAQ {
        padding: 16rem 10rem 10rem 10rem;
    }

    /* !footer================================  */

    .footer {
        padding: 5rem 7rem;
    }

    .copyright {
        padding: 2.4rem 5rem 9.6rem 7rem;
    }

    /* !=================================== */
    /* !Support Page======================= */
    /* !=================================== */

    .support-list {
        padding: 10.5rem 7rem 10rem 7rem;
    }

    .support-contact {
        padding: 14rem 7rem 18rem 7rem;
    }

    /* !=================================== */
    /* !BLog Page========================== */
    /* !=================================== */

    .blog-list {
        position: relative;
        padding: 10.5rem 7rem 10rem 7rem;
    }

    /* !=================================== */
    /* !Single post Page=================== */
    /* !=================================== */

    .b-title {
        padding: 7.6rem 7rem 8rem 7rem;
    }
    .b-title h2 {
        font-size: 3.8rem;
        line-height: 4.6rem;
    }

    /*!============== Pricing ================ */
    .pricing .c1 {
        padding: 0 4.5rem 2rem 4.5rem;
    }

    .pricing .content h1 {
        font-size: 3rem;
        line-height: 4rem;
    }
    .pricingAcc .label h1 {
        /* max-width: 30rem; */
        font-size: 1.4rem;
        line-height: 2rem;
    }
    .pricing .c1 {
        padding: 0 3rem;
    }
    .p-Card .title h1 {
        font-size: 1.6rem;
        line-height: 3.1rem;
    }
    .p-Card .title p {
        font-size: 1.2rem;
        line-height: 1.7rem;
    }
    .p-Card .price p {
        font-size: 1.6rem;
        line-height: 3.1rem;
    }
    .p-Card .title {
        margin-right: 4rem;
    }
    /*! contact page ============================  */

    .contact {
        position: relative;
        padding: 8.2rem 7rem 35rem 7rem;
    }
}

/* ! *********************************** */
/*! Below 1024px  */
/* ! 1024px/16 = 64em */
/* ! *********************************** */

@media (max-width: 64em) {
    /* !=============================== */
    /* !home ========================== */
    /* !=============================== */

    /* !header */

    .header {
        padding: 3.5rem 4rem;
    }

    .header .links ul {
        gap: 2rem;
    }
    .header .links ul a {
        font-size: 1.2rem;
        line-height: 2.2rem;
    }

    .header .button {
        margin-left: 2rem;
    }
    /*! banner =================== */

    .h-banner {
        padding: 0rem 2rem 6rem 5rem;
    }

    .h-banner .c1 h1 {
        font-size: 4.1rem;
        line-height: 4.7rem;
    }

    .h-banner .c1 h2 {
        font-size: 2rem;
        line-height: 2.8rem;
    }
    /*! simple =================== */
    .h-simple {
        padding: 13rem 5rem 13rem 5rem;
    }

    .h-simple .c1 h1 {
        font-size: 3.8rem;
        line-height: 4.6rem;
    }
    /* !customize===================== */

    .h-customize {
        padding: 13.6rem 5rem 13.6rem 5rem;
    }

    .h-customize .item h1 {
        font-size: 1.6rem;
        line-height: 1.6rem;
        margin-bottom: 0.5rem;
    }
    /* !reach===================== */
    .h-reach {
        padding: 7rem 5rem 8rem 5rem;
    }
    .h-reach .c1 h1 {
        font-size: 3rem;
        line-height: 3.8rem;
    }
    /* !whyNeed===================== */
    .h-whyNeed {
        padding: 13.6rem 5rem 13.8rem 5rem;
    }
    .h-whyNeed .item h1 {
        font-size: 4.8rem;
        line-height: 4.9rem;
    }
    .h-whyNeed .item p {
        font-size: 1.6rem;
        line-height: 2.6rem;
    }
    /* !features==================== */
    .h-features {
        padding: 8rem 5rem 15rem 5rem;
    }

    .h-features .item {
        padding: 2rem 2rem;
        gap: 1.2rem;
    }
    .h-features .item > h1 {
        font-size: 1.4rem;
        line-height: 2.3rem;
    }
    .h-features .content {
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
    }
    .h-features > h1 {
        font-size: 3.8rem;
        line-height: 4.6rem;
    }
    /* !how Integrate==================== */

    .h-howIntegrate {
        padding: 6rem 5rem 13.6rem 5rem;
    }
    .h-howIntegrate .content {
        padding: 11rem 5rem;
    }
    .h-howIntegrate .c1 > h1 {
        font-size: 2.6rem;
        line-height: 3.4rem;
    }
    .h-howIntegrate .c1 .button img {
        max-width: 4.4rem;
        max-height: 4.4rem;
    }
    .h-howIntegrate .c1 .button a {
        font-size: 1rem;
        line-height: 2rem;
    }

    /* !Integrate Seamless =================== */

    .h-integrateSeamless {
        padding: 6rem 5rem 13.6rem 5rem;
    }

    .h-integrateSeamless .content {
        padding: 11rem 5rem;
    }
    .h-integrateSeamless .c1 > h1 {
        font-size: 2.6rem;
        line-height: 3.4rem;
    }
    .h-integrateSeamless .c1 .button img {
        max-width: 4.4rem;
        max-height: 4.4rem;
    }
    .h-integrateSeamless .c1 .button a {
        font-size: 1rem;
        line-height: 2rem;
    }
    .h-integrateSeamless .c2 img {
        border-radius: 50%;
        border: 3rem solid #fefefc;
    }

    /* !testimony =================== */

    .h-testimony {
        padding: 13.6rem 5rem 13.6rem 5rem;
    }
    .h-testimony .item {
        padding: 4.8rem 2.5rem 3rem;
    }

    /* !brands =================== */
    .h-brands {
        padding: 13rem 5rem 13rem 5rem;
    }

    /* !h- FAQ ============================== */

    .h-FAQ {
        padding: 16rem 7rem 10rem 7rem;
    }
    /* !ready=======================  */
    .h-ready .content h1 {
        font-size: 5.2rem;
        line-height: 5.5rem;
    }

    .h-ready .content p {
        font-size: 2rem;
        line-height: 2.8rem;
    }

    /* !footer================================  */

    .footer {
        padding: 5rem 5rem;
        gap: 7rem;
    }

    .copyright {
        padding: 2.4rem 5rem 9.6rem 5rem;
    }

    /* !=================================== */
    /* !Support Page======================= */
    /* !=================================== */

    .support-list {
        padding: 10.5rem 5rem 10rem 5rem;
    }

    .support-contact {
        padding: 14rem 5rem 18rem 5rem;
    }

    /* !=================================== */
    /* !BLog Page========================== */
    /* !=================================== */

    .blog-list {
        position: relative;
        padding: 10.5rem 5rem 10rem 5rem;
    }

    /* !=================================== */
    /* !Single post Page=================== */
    /* !=================================== */

    .b-title {
        padding: 7.6rem 5rem 8rem 5rem;
    }

    /* ! b-ready=======================  */
    .b-ready .content h1 {
        font-size: 5.2rem;
        line-height: 5.5rem;
    }

    .b-ready .content p {
        font-size: 2rem;
        line-height: 2.8rem;
    }

    /*! pricing page  */
    .pricingList {
        width: 65%;
    }

    /*! contact page ============================  */

    .contact {
        position: relative;
        padding: 8.2rem 5rem 35rem 5rem;
    }
}

/* ! *********************************** */
/*! Below 850px  */
/* ! 850px/16 = 53.125em */
/* ! *********************************** */

@media (max-width: 53.125em) {
    /* !home ========================== */
    .header .logo {
        max-width: 15rem;
    }
    .h-banner .c1 h1 {
        font-size: 3.8rem;
        line-height: 4.4rem;
    }

    /* !how Integrate==================== */
    .h-howIntegrate .content {
        padding: 11rem 3rem;
    }

    /* !Integrate Seamless =================== */

    .h-integrateSeamless .content {
        padding: 11rem 3rem;
    }

    /* !h- FAQ ============================== */

    .h-FAQ {
        padding: 16rem 5rem 10rem 5rem;
    }

    /*! pricing page  */
    .pricingList {
        width: 70%;
    }
}