/*Stying for small screens*/
@media screen and (max-width: 1400px) {
    section.banner .banner-right .img-4 {
        top: 20%;
        right: -80px;
    }

    section.banner .banner-right .img-2 {
        bottom: 0;
        right: -50px;
    }
}

@media screen and (min-device-width: 992px) and (max-device-width: 1200px) {
    .nav-links li a {
        margin: 20px 30px 0px 0px;
    }

    .login-button, .signup-button {
        margin-left: 0;
    }

    .img-wrapper.position-relative {
        width: 93%;
    }

    section.banner .shape {
        width: 58%;
    }

    section.banner .banner-left .brand-logo img {
        margin-right: 20px;
        width: 87px;
    }

    .zero-bounch .service-box {
        height: 350px;
    }

    .client .counter-wrapper {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .client {
        margin-top: 50px;
        padding: 50px 0px;
    }

    section.verify .verify-text h2 {
        font-size: 30px;
    }
}


@media screen and (max-width: 992px) {
    header {
        background: var(--bg-color);
        box-shadow: 0px 0px 20px var(--text-color)29;
        height: 85px;
    }

    .nav-links {
        position: absolute;
        height: auto;
        width: 100%;
    }

    .nav-links li .m-icon {
        display: inline-block;
        width: 10px;
    }

    .nav-links .login-button {
        display: block;
        color: var(--text-color);
        width: 100%;
    }

    button.signup-button {
        width: 100% !important;
    }

    nav {
        position: absolute;
        z-index: 3;
    }

    .hamburger {
        display: block;
        position: absolute;
        cursor: pointer;
        right: 30px;
        top: 50%;
        -webkit-transform: translate(-5%, -50%);
        transform: translate(-5%, -50%);
        z-index: 2;
        -webkit-transition: all 0.7s ease;
        transition: all 0.7s ease;
    }

    .nav-links {
        top: 75px;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
        position: absolute;
        background: var(--bg-color);
        padding: 30px;
        width: 95%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        clip-path: circle(50px at 90% -20%);
        -webkit-clip-path: circle(0px at 90% -10%);
        -webkit-transition: all 1s ease-out;
        transition: all .3s ease-out;
        pointer-events: none;
    }

    .nav-links .login-button, .nav-links .signup-button {
        margin-left: 0;
    }

    .nav-links li .dropdown {
        left: 100%;
    }

    .nav-links li .dropdown::before {
        left: 50px;
    }

    .nav-links.open {
        clip-path: circle(1000px at 80% -10%);
        -webkit-clip-path: circle(1000px at 80% -10%);
        pointer-events: all;
        width: 95%;
        box-shadow: 0px 40px 25px 1px #c0c0c0e0;
        border-radius: 5px;
    }

    .nav-links li {
        opacity: 0;
    }

    .nav-links li:nth-child(1) {
        -webkit-transition: all 0.3s ease 0.1s;
        transition: all 0.3s ease 0.1s;
    }

    .nav-links li:nth-child(2) {
        -webkit-transition: all 0.3s ease 0.2s;
        transition: all 0.3s ease 0.2s;
    }

    .nav-links li:nth-child(3) {
        -webkit-transition: all 0.3s ease 0.2s;
        transition: all 0.3s ease 0.2s;
    }

    .nav-links li:nth-child(4) {
        -webkit-transition: all 0.3s ease 0.4s;
        transition: all 0.3s ease 0.4s;
    }

    .nav-links li:nth-child(5) {
        -webkit-transition: all 0.3s ease 0.5s;
        transition: all 0.3s ease 0.5s;
    }

    .nav-links li:nth-child(6) {
        -webkit-transition: all 0.3s ease 0.5s;
        transition: all 0.3s ease 0.5s;
    }

    .nav-links li:nth-child(6) {
        -webkit-transition: all 0.3s ease 0.5s;
        transition: all 0.3s ease 0.5s;
    }

    /*  .nav-links li:nth-child(6) {
        margin: 0;
        width: 100%;
        text-align: center;
      }
      .nav-links li:nth-child(7) {
        margin: 0;
        width: 100%;
      }*/
    .nav-links .login-button {
        background: #ebebeb93;
        margin: 25px 0px 15px 0px;
        border-radius: 10px;
    }

    li.fade {
        opacity: 1;
    }

    section.banner {
        padding-top: 20px;
    }

    section.banner .banner-left h1 {
        font-size: 42px;
    }

    section.banner .button {
        width: 100%;
    }

    .brand-logo {
        text-align: center;
    }

    section.banner .banner-left .brand-logo img {
        margin: 0px 20px;
    }

    section.banner .shape svg {
        width: 50%;
        color: var(--alternative-bg-color);
    }

    section.banner .shape {
        width: 90%;
        position: absolute;
        right: -580px !important;
        top: 400px !important;
        z-index: -1;
    }

    section.client .counter-box::after {
        -webkit-transform: rotate(
                -70deg);
        transform: rotate(
                -70deg);
        width: 70% !important;
        height: 100% !important;
        right: -130px;
        top: 25px;
    }

    .client .counter-wrapper {
        margin: 0;
        margin-top: 80px;
    }

    section.banner .banner-right {
        text-align: right;
        margin-top: 110px;
        padding-bottom: 100px;
    }

    .client {
        margin-top: 50px;
    }

    .test-service .email-box {
        width: 100%;
        padding: 20px;
    }

    .test-service .email-box input {
        width: 100%;
        margin-bottom: 10px;
    }

    .test-service .email-box .button {
        width: 100%;
        margin-left: 0;
    }

    nav.tab-nav {
        display: block;
        margin-bottom: 50px !important;
        position: unset;
        text-align: center;
    }

    section.tab nav .nav-tabs {
        justify-content: center;
    }

    section.tab nav .nav-tabs .nav-link {

        font-size: 14px;
        padding: 10px 0px;
        margin: 0px 10px;
    }

    section.tab .single-tab .button {
        width: 100%;
        margin-top: 20px;
    }

    section.pricing {
        padding: 0px 0px;
    }

    section.pricing .price-wrapper .product .button {
        width: 100%;
    }

    .zero-bounch {
        margin: 75px 0px 30px 0px;
    }

    .zero-bounch .service-box {
        margin-bottom: 20px;
    }

    .zero-bounch .button {
        margin: 20px auto auto auto;
        width: 95%;
    }

    section.faq .circle svg {
        width: 50%;
        top: 130px;
    }

    .verify .verify-text {
        text-align: center;
    }

    .verify .br-verify {
        display: none;
    }

    section.verify .verify-text h2 {
        color: var(--bg-color);
        font-weight: 700;
        font-size: 22px;
    }

    section.verify .verify-text .button {
        width: 100%;
    }

    section.verify .img-wrapper .img-man {
        margin-top: 40px;
        position: relative;
        text-align: center;
    }

    section.verify .img-wrapper .callout__image-shaped-icon {
        left: 21%;
    }

    section.verify .img-wrapper .img-man::after {
        right: 65px !important;
    }

    footer .footer-pc {
        display: none;
    }

    footer .mobile-footer {
        display: unset;
    }

}

/*Animating Hamburger Icon on Click*/
.toggle .line1 {
    -webkit-transform: rotate(-45deg) translate(-5px, 6px);
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    width: 0;
}

.toggle .line3 {
    -webkit-transform: rotate(45deg) translate(-5px, -6px);
    transform: rotate(45deg) translate(-5px, -6px);
}

@media screen and (max-width: 992px) {
    header {
        box-shadow: none;
    }

    .img-wrapper {
        text-align: center;
    }

    section.banner .banner-right {
        padding-top: 0;
        margin-top: 0;
        padding-bottom: 0;
    }

    .intro__image-decoration {
        display: none;
    }

    .client {
        padding-top: 0;
        margin-top: 0;
    }
}

@media screen and (max-width: 768px) {
    header.sticky {
        box-shadow: none;
    }

    header {
        box-shadow: none;
    }

    .client .counter-content i {
        top: 20px;
    }

    section.banner .banner-left h1 {
        text-align: start;
        font-size: 36px;
        margin-top: 50px;
    }

    section.banner {
        padding-top: 20px;
    }

    section.banner .banner-left p {
        font-size: 20px;
    }

    section.banner .banner-left .sub-title {
        margin: 20px 0px;
    }

    section.banner .banner-left .brand-logo img {
        margin: 0px 10px;
    }

    section.banner .shape {
        right: -425px !important;
    }

    .client .counter-wrapper {
        margin-top: 0;
    }

    .client .counter-box {
        margin-top: 80px;
    }

    .section-title h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    section.tab nav {
        display: none;
    }

    .container.mobile-tab {
        padding: 0;
    }

    section.tab .single-tab p {
        color: var(--text-color);
        line-height: 1.4;
        font-size: 17px;
        font-weight: 400;
    }

    section.tab .mobile-tab {
        display: block !important;
    }

    section.tab .single-tab {
        margin-top: 40px;
    }


}


@media screen and (max-width: 480px) {

    .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .nav-links {
        width: 87%;
    }

    .nav-links.open {
        width: 87%;
    }

    .hamburger {
        right: 45px;
        top: 35%;
    }

    section.banner .banner-left h1 {
        text-align: start;
        font-size: 30px;
    }

    section.banner .banner-left h1 {
        font-size: 23px;
        margin-top: 20px;
    }

    section.banner .banner-left .sub-title {
        font-size: 16px;
    }

    section.banner .banner-left p strong {
        font-size: 18px;
    }

    section.banner .banner-left .brand-logo img {
        margin: 10px 15px;
    }

    .banner-right .img-wrapper img {
        text-align: center;
        width: 35%;
    }

    section.banner .shape {
        width: 600px;
        right: -394px !important;
        top: 525px !important;
    }

    .img-wrapper.position-relative {
        text-align: center;
    }

    section.banner .banner-right .intro-img {
        width: 220px;

    }

    section.banner .banner-right .img-1 {
        bottom: -10px;
        left: 40px;
        width: 50px;
    }

    section.banner .banner-right .img-2 {
        right: 15px;
    }

    section.banner .banner-right .img-3 {
        bottom: -20px;
        z-index: 99;
        left: 115px;
    }

    section.banner .banner-right .img-4 {
        width: 90px;
        top: 20%;
        right: -11px;
    }

    section.banner .banner-right .img-5 {
        top: -44px;
        right: 70px;
    }

    section.banner .banner-right .img-6 {
        bottom: -55px;
        left: 55px;
    }


    .section-title span {
        font-size: 14px;
    }

    .client {
        padding: 60px 0px;
    }

    .client .counter-box h2 {
        font-size: 34px;
    }

    .test-service {
        margin: 50px 0px;
    }

    .zero-bounch .service-box h3 {
        font-size: 20px;
    }

    .section.tab nav .nav-tabs .nav-link {
        padding: 3px 10px;
    }

    section.pricing .toggle-container {
        padding: 20px 0px;
    }

    section.pricing .price-wrapper {
        padding: 40px 10px;
    }

    section.pricing .toggle-container .month, .year {
        font-size: 13px;
    }

    section.pricing .toggle-container .year {
        font-size: 14px;
    }

    section.pricing .toggle-container .discount {
        display: none;
    }

    section.pricing .price-wrapper .product #pageviews {
        width: 100%;
        margin-bottom: 10px;
    }

    section.pricing .price-wrapper .right .price {
        font-size: 36px;
    }

    section.faq .accordion-container .article-title {
        font-size: 16px;
    }

    section.faq .accordion-container .content-entry i {
        top: 10px;
    }

    section.verify .img-wrapper .img-man img {
        width: 100%;
    }

    section.verify .img-wrapper .img-man::after {
        right: 0px !important;
    }

    section.verify .img-wrapper .callout__image-shaped-icon {
        left: -1%;
    }

    footer .mobile-footer .social-link {
        margin: 5px 20px;
    }

    footer {
        padding: 50px 0px 1px 0px;
    }

    footer .mobile-footer .social-link a {
        font-size: 20px;
    }

    footer .mobile-footer .copyright-text {
        padding: 10px 0px;
    }

    section.verify .verify-text h2 {
        font-size: 18px;
    }

    section.banner {
        padding-top: 20px;
    }


}