@media screen and (max-width: 1500px) {
    .client-say-sec {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 1150px) {
    .single_details .row_single.dy-flex .col_service-detail {
        width: 100%;
    }

    .single_details .row_single.dy-flex .col_service_info {
        width: 100%;
    }

    .title-work-ex {
        flex-wrap: wrap;
    }

    .row--ftr.dy-flex {
        gap: 2.8%;
    }

    .col--q-links {
        width: 18.16%;
    }

    .col-who-about,
    .blog_left_col,
    .blog_right_col {
        width: 100%;
    }

    .mind-project-sec .col-img-mind {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .row-contact .col-contact-form,
    .row-contact .col-info-contact {
        width: 100%;
    }

    .mind-project-sec .col-text-mind {
        width: 100%;
        padding-top: 0px;
        text-align: center;
    }

    .mind-project-sec .mind-box .col-btn-mind {
        width: 100%;
        justify-content: center;
        padding-bottom: 0px;
    }

    .mind-project-sec .mind-box {
        border-radius: 20px;
        padding: 30px 20px;
    }

    .col-user .inner {
        padding: 25px 20px;
    }
}

@media screen and (max-width: 991px) {
    section.client-say-sec {
        padding-left: 20px;
        padding-right: 20px;
    }

    .faq_service .accordion-container .accordions {
        font-size: 16px;
    }

    .faq_service .accordion-container .box_ffq {
        padding: 15px 20px;
    }

    .faq_service .accordion-container .accordions::after {
        width: 26px;
        height: 26px;
        top: -2px;
    }

    .col_work-a,
    .col_work-acc {
        width: 100%;
    }

    .col_work-acc .accordions {
        font-size: 17px;
    }

    .single_details .row_single.dy-flex .col_service-detail .s_style p {
        font-size: 20px;
    }

    .title_em p {
        font-size: 17px;
    }

    .e_service_row.dy-flex .col_e_service {
        width: 48.5%;
    }

    .col_service_info h2 {
        font-size: 26px;
        padding-bottom: 20px;
    }

    .row--ftr.dy-flex {
        gap: 2%;
        row-gap: 30px;
    }

    .text_blog h2 {
        font-size: 22px;
    }

    .title_s p,
    .blog_bor h3 {
        font-size: 20px;
    }

    .inner_blg .col-blog .title-blog p {
        font-size: 18px;
    }

    .col-user {
        width: 49%;
    }

    .mind-project-sec {
        padding: 60px 0px;
    }

    .col--logo--ftr,
    .col-banner-content,
    .col-banner-img {
        width: 100%;
    }

    .col--logo--ftr p {
        max-width: 100%;
    }

    .col--q-links {
        width: 32%;
    }

    .content-img-banner {
        padding: 0px;
    }

    .logo-carusel {
        padding-bottom: 60px;
    }

    .featured-projects-sec {
        padding: 60px 0px;
    }

    .featured-projects-sec .f-p-head {
        padding-bottom: 28px;
    }

    .col-content-featured,
    .col-featured-img {
        width: 100%;
    }

    .fet-img {
        margin-right: 0px !important;
        padding-top: 30px !important;
        margin-left: 0px !important;
    }

    .box-featured {
        padding: 30px 20px !important;
        border-radius: 15px !important;
    }

    .col-content-featured h3 {
        font-size: 25px;
    }

    .style-btn-one a {
        font-size: 15px;
        padding: 10px 24px;
    }

    .about-me-sec {
        padding: 60px 0px;
    }

    .about-me-sec .row-about.dy-flex .col--about--content,
    .about-me-sec .row-about.dy-flex .col-box-about,
    .row-contact .col-contact-form .inner form .row-fields .col-fields {
        width: 100%;
    }

    .row-contact .col-contact-form .inner form .row-fields {
        flex-wrap: wrap;
    }

    .services--boxies.dy-flex .services--box,
    .row-blog .col-blog {
        width: 48.75%;
    }

    .client-say-sec {
        padding: 60px 20px;
    }

    .p-tb {
        padding: 60px 0px;
    }

    .scroll-to-top {
        bottom: 14px;
        right: 21px;
        padding: 9px 15px;
    }

    .client-say-sec.step-sec {
        padding-left: 0px;
        padding-right: 0px;
    }

    .about-who-box .col-box-abouts {
        width: 49%;
    }

    .row--time--line {
        flex-wrap: wrap;
    }

    .row--time--line {
        flex-direction: row-reverse !important;
        justify-content: flex-end;
        gap: 26px;
    }

    .col-time-img .inner {
        margin-left: 0;
    }

    .row--time--line .col-timeline-text {
        width: 100%;
        padding-left: 35px;
    }

    .col-timeline-text .inner {
        padding: 20px 18px;
    }

    .timeline {
        gap: 51px;
    }

    .col-time-img {
        padding-left: 35px;
    }

    .col-time-img .inner {
        width: 110px;
        height: 110px;

    }

    .col-time-circle {
        display: none;
    }

    .col-time-img .inner img {
        width: 53px;
    }

    .row--time--line::after {
        top: 50px;
        left: 6px;
        right: auto;
    }

    .row--time--line::before {
        content: "01";
       font-family: "inter-bold", sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 50.4px;
        color: var(--primary-color);
        width: 32px;
        height: 32px;
        position: absolute;
        top: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 100px;
        border: 3px solid #E4ECEE;
        left: -12px;
    }

    .row--time--line::before {
        counter-increment: list-counter;
        content: counter(list-counter, decimal-leading-zero);
    }

    .timeline {
        counter-reset: list-counter;
    }

    .step-sec .f-p-head span,
    .step-sec .f-p-head h2,
    .step-sec .f-p-head p {
        text-align: left;
    }

    .col-why-pp {
        width: 14.7%;
    }

    .col-why-p {
        width: 80.641%;
    }

    .why_img {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }

    .why_img img {
        width: 25px;
    }

    .box-why--me .inner {
        padding: 25px 20px;
    }

    .box-why--me h3 {
        font-size: 19px;
        padding-bottom: 2px;
    }

    .box-why--me {
        padding-left: 50px;
    }

    .row_single.dy-flex .col_shahid-detail {
        width: 100%;
        padding-bottom: 41px;
    }

    .row_single.dy-flex .col_prot_info {
        width: 100%;
    }

    .col_prot_info h2 {
        font-size: 21px;
        padding: 22px 0px 15px;
    }

    .recent-p {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media screen and (max-width: 767px) {
    .col_prot_info .col-box-abouts {
        width: 100%;
    }

    .e_service_row.dy-flex .col_e_service {
        width: 100%;
    }

    .inner-banner-content {
        padding: 60px 0px 60px;
    }

    .row_two_img {
        flex-wrap: wrap;
    }

    .row_two_img img {
        width: 100%;
    }

    .bread_crumbs {
        display: none;
    }

    .col-timeline-text h3 {
        font-size: 26px;
    }

    .col_work-a p {
        padding-bottom: 14px;
    }

    .col_service_info h2 {
        font-size: 22px;
    }

    .box-why--me:after {
        font-size: 10px;
        width: 21px;
        height: 21px;
        line-height: 109%;
    }

    .box-why--me:before {
        left: 11px;
    }

    .box-why--me {
        padding-left: 30px;
    }

    .box-why--me .inner {
        padding: 17px 13px;
    }

    .box-why--me h3 {
        font-size: 15px;
    }

    .box-why--me p {
        font-size: 14px;
    }

    .inner-b-box .banner-btns {
        align-items: center;
    }

    .row-contact .col-contact-form .inner {
        padding: 30px 20px;
    }

    .row-contact .col-contact-form,
    .row-contact .col-info-contact {
        border-radius: 15px;
    }

    .row-contact .col-contact-form .inner h3 {
        padding-bottom: 10px;
    }

    form input[type=text],
    form input[type=password],
    form input[type=tel],
    form input[type=email],
    form input[type=url],
    form input[type=search],
    form textarea,
    form input[type=date],
    form select {
        height: 41px !important;
        margin-bottom: 12px !important;
    }

    .video-popup iframe {
        height: 40vh;
    }

    .inner-banner h1 {
        padding-bottom: 44px !important;
    }

    .mind-project-sec .col-text-mind h2 {
        font-size: 27px;
    }

    .client-say-sec .f-p-head {
        padding-bottom: 28px;
    }

    form textarea {
        height: 108px !important;
        margin-bottom: 14px !important;
    }

    .header-item.item-right .resume-btn,
    .header-item.item-right .theme-btn {
        display: none;
    }

    .header-item.item-right {
        gap: 0px;
    }

    .banner-btns {
        align-items: flex-start;
        flex-direction: column;
    }

    .banner-img-b img {
        height: auto;
    }

    .banner-img-b {
        padding: 30px 10px;
    }

    .last-up,
    .word-p-box {
        padding: 5px 12px;
    }

    .services--boxies.dy-flex .services--box,
    .row-blog .col-blog {
        width: 100%;
    }

    .services--boxies.dy-flex .services--box a .img-srv {
        margin-bottom: 12px;
    }

    .services--boxies.dy-flex .services--box a p {
        padding-bottom: 15px;
    }

    .services--boxies.dy-flex .services--box a {
        padding: 20px 20px 86px;
    }

    .services--boxies.dy-flex .services--box a span.btn-av {
        bottom: 20px;
    }

    .social--links ul li a {
        width: 32px;
        height: 32px;
    }

    .social--links ul li a img {
        width: 18px;
    }

    .list-info-detail {
        gap: 19px;
    }

    .row-blog .col-blog a h3 {
        font-size: 20px;
    }

    .btn-services {
        padding-top: 30px;
    }

    .client-say-sec .owl-dots {
        margin-top: 26px !important;
    }

    .main-footer {
        padding-top: 50px;
    }

    .title-blog p {
        font-size: 19px;
    }

    .inner-banner {
        padding: 50px 0px 50px;
    }

    .about-who-box .col-box-abouts {
        width: 100%;
    }

    .shahid-experience .col-left-work {
        width: 100%;
    }

    .shahid-experience .col-right-work {
        width: 100%;
    }

    .shahid-experience .work-shahid:before {
        top: 5px;
    }

    .shahid-experience .work-shahid {
        padding-left: 36px;
    }

    .shahid-experience .box-work-ex:before {
        left: -34px;
        top: 4;
    }

    .shahid-experience .box-work-ex:after {
        left: -27px;
        top: 11px;
    }

    .shahid-experience .work-shahid:after {
        height: 268px;
        bottom: -87px;
    }

    .shahid-experience .f-p-head {
        padding-bottom: 30px;
    }

    .work-different .f-p-head {
        padding-bottom: 36px;
    }

    .p-t {
        padding-top: 60px;
    }

    .p-b {
        padding-bottom: 60px;
    }
}

@media screen and (max-width: 630px) {
    .row-blog .col-blog .img-fet img {
        height: 227px;
    }

    .shahid-experience .title-work-ex p {
        font-size: 20px;
    }

    .shahid-experience .text--f span {
        font-size: 13px;
    }

    .shahid-experience .location-shahid p {
        font-size: 12px;
    }

    .col-right-work p {
        font-size: 14px;
    }

    .shahid-experience .box-work-ex {
        padding: 30px 20px;
    }

    .shahid-experience .work-shahid:after {
        height: 200px;
        bottom: -38px;
    }

    .tab.list--row ul {
        flex-wrap: wrap;
        flex-wrap: wrap;
        border-radius: 12px;
        row-gap: 5px;
    }

    .col-user {
        width: 100%;
    }

    .tab.list--row ul li {
        width: 100%;
        border-radius: 7px;
    }

    .tab.list--row {
        padding-bottom: 20px;
    }

    .col-content-featured ul li,
    .col-box-abouts {
        width: 100%;
    }

    .col-box-abouts:nth-child(even) {
        transform: translate(0px, 0px);
    }

    .client-say-sec .item {
        padding: 32px 20px;
    }

    .btns-info-detail .btn--one {
        width: 100%;
        margin-bottom: 10px;
    }

    .btns-info-detail .btn--two {
        width: 100%;
    }

    .row--rsp {
        align-items: center;
    }

    .col--q-links {
        width: 100%;
    }

    .box-persona {
        flex-wrap: wrap;
        gap: 10px;
    }

    .box-persona .c-porc {
        width: 100%;
    }

    .experience-box img.resbn {
        right: 10px;
        top: 13px;
        width: 68px;
    }

    .experience-box .bh-p {
        padding-right: 73px;
    }

    .experience-box h3,
    .c-porc h3 {
        font-size: 26px;
    }

}

@media screen and (max-width: 550px) {
    .row--time--line.animated::after {
        height: 453px;
    }
}

@media screen and (max-width: 430px) {
    .shahid-experience .work-shahid:after {
        bottom: -15px;
    }
}