@media screen and (min-width: 1200px) {
    .container {
       /* max-width: 1160px;*/
        padding-inline: 25px;
    }
}

/*
====================================
Medium Screen - Others
====================================
*/

@media screen and (min-width: 992px) and (max-width: 1200px) {
    /* header  */
    .site-logo a {
        max-width: 270px;
    }
    /* hero area  */
    .container-card {
        padding-left: calc((100% - 940px) / 2);
    }

    .hero-left {
        max-width: 570px;
        padding-right: 0;
    }

    .hero-logo img {
        max-width: 300px;
    }
    /* hero area  */
    .featuers-block {
        gap: 50px;
    }

    .fetaures-wrappper {
        gap: 80px;
    }

    .single-pricing-card h2 {
        font-size: 50px;
    }

    .pricing-grid {
        gap: 30px;
    }

        .pricing-grid > * {
            min-height: 300px;
        }

    .faq-content.show {
        padding: 15px 20px 25px 20px;
    }
}

/*
====================================
Small Screen - Tablate
====================================
*/

@media screen and (min-width: 768px) and (max-width: 991px) {
    /* header  */
    .site-logo a {
        max-width: 250px;
    }

    .header-top-wrapper {
        justify-content: center;
    }
    /* hero area  */
    .container-card {
        padding-left: calc((100% - 700px) / 2);
    }

    .hero-left {
        max-width: 450px;
        padding-right: 0;
        gap: 15px;
    }

    .hero-logo img {
        max-width: 220px;
    }

    .hero-image {
        padding-left: 20px;
    }

    .hero-right-content h4 {
        font-size: 30px;
    }

    .hero-wrapper {
        padding: 70.5px 0;
    }
    /* hero area  */
    .fetures-area {
        padding-top: 80px;
        padding-bottom: 100px;
    }

    .featuers-block {
        gap: 40px;
    }

    .fetaures-wrappper {
        gap: 70px;
    }

    .features-image {
        max-width: 250px;
    }

    .fatures-content h4 {
        font-size: 26px;
    }

    .gap-40 {
        row-gap: 40px;
    }

    .how-it-woks-wrap {
        padding-block: 75px;
    }

    .ht-left iframe {
        min-height: 300px;
    }

    .single-pricing-card h2 {
        font-size: 47px;
    }

    .pricing-grid {
        gap: 30px;
        flex-direction: column;
    }

        .pricing-grid > * {
            min-height: auto;
        }
}

/*
====================================
Small Screen - Mobile
====================================
*/

@media screen and (max-width: 767px) {
    /* header  */
    .site-logo a {
        max-width: 200px;
    }

    .header-top-wrapper {
        justify-content: center;
    }
    /* hero area  */
    .container-card {
        padding-left: calc((100% - 500px) / 2);
    }

    .hero-left {
        max-width: 100%;
        padding-right: 0;
        gap: 15px;
        padding-right: 20px;
    }

    .hero-logo img {
        max-width: 220px;
    }

    .hero-image {
        padding-left: 20px;
    }

    .hero-right-content h4 {
        font-size: 36px;
    }

    .hero-wrapper {
        padding: 70.5px 0;
        flex-direction: column;
        gap: 30px;
    }
    /* hero area  */
    .fetures-area {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .featuers-block {
        gap: 50px;
        flex-direction: column;
    }

    .fetaures-wrappper {
        gap: 70px;
    }

    .features-image {
        max-width: 100%;
        order: 1;
    }

    .fatures-content h4 {
        font-size: 24px;
    }

    .fatures-content {
        order: 2;
    }

    .gap-40 {
        row-gap: 40px;
    }

    .how-it-woks-wrap {
        padding-block: 50px;
    }

    .ht-left iframe {
        min-height: 210px;
    }

    .single-pricing-card h2 {
        font-size: 42px;
    }

    .section-padding {
        padding-block: 50px;
    }

    .single-pricing-card h4 {
        font-size: 28px;
    }

    .single-pricing-card p {
        font-size: 20px;
    }

    .pricing-buttons ul {
        flex-direction: column;
        gap: 18px;
    }

    .single-pricing-card {
        padding: 18.631px 20px 31.708px 20px;
    }

    .pricing-buttons ul li a {
        padding: 16px 50px;
        font-size: 16px;
        ;
    }

    .faq-area .section-heading {
        font-size: 24px;
        padding-bottom: 40px;
    }

    .accordion-header {
        font-size: 17px;
    }

    .pricing-grid {
        gap: 30px;
        flex-direction: column;
    }

        .pricing-grid > * {
            min-height: auto;
        }
}

/*
====================================
Xtra Small Screen - Small Mobile
====================================
*/

@media screen and (max-width: 576px) {
    .container {
        padding-inline: 25px;
    }
    /* header  */
    .site-logo a {
        max-width: 159px;
    }

    .sales-number span {
        font-size: 16px;
    }

    .header-wrapper {
        padding-block: 18px;
    }
    /* hero area  */
    .hero-left {
        padding-inline: 25px;
        gap: 25px;
    }

    .hero-logo img {
        max-width: 100%;
    }

    .hero-wrapper {
        padding-block: 50px;
    }
}