﻿@media only screen and (max-width: 1366px) {
    .caption {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .caption2 {
        font-size: 15px;
        margin-top: 15px;
    }
    #Why-Choose .card-new {
        min-height: 330px;
    }
}
@media only screen and (max-width: 1170px) {
    .what-bg  h3{
        font-size:15px
    }
    .btn-silder .btn-one {
        top: 29%;
        left: 35%;
    }
    .main4 h2, .main5 h2 {
        font-weight: bold;
        font-size: 40px;
    }
    .main5 p {
        font-size: 20px;
    }
    .footer_cards p {
        font-size: 12px;
    }
    ul.right-top li {
        float: left;
        list-style: none;
        padding-right: 15px;
    }

    .navbar-brand img {
        width: 100px;
    }

    .navbar-dark .navbar-nav .nav-link {
        font-size: 12px;
        padding: 5px 10px;
    }

    body, p {
        font-size: 12px;
        margin: 0px;
    }

    .f-step-ss {
        width: 95%;
        border-radius: 10px;
        padding: 3px;
    }

    .contact {
        border-radius: 10px;
        padding: 15px;
        width: 100%;
    }

    .card_caption {
        max-height: unset;
    }

    #footer .footer_inner .container {
        max-width: 100%;
    }

    .footer_lower h3 {
        font-size: 20px;
    }

    section.pt-40 .container {
        max-width: 100%;
    }

    .banner-content h3, .banner-content p {
        font-size: 17px;
        text-shadow: 3px 5px 5px rgb(2 2 2 / 20%);
    }

    .banner-content p {
        font-size: 12px;
    }

    .banner-img.col-lg-5 img {
        margin-top: 0px;
    }

    .dev-hire .container, .hire-developers .container, .py-100 .container {
        max-width: 100%;
    }

    .dev-hire .hire-card img {
        margin: 15px 10px 62px 5px;
    }

    .section.pt-40 .col-md-6 img {
        width: 100%
    }
    #Why-Choose .card-new {
        min-height: 260px;
    }
}

@media only screen and (max-width: 1024px) {
    .hire-developers .card-new {
        height: 330px;
    }
    .bg-light.py-100 .container .mt-4 #owl-carouselone .owl-item .item.pt-5.px-2.pb-2 .card-new.position-relative {
        height: 280px;
    }
    .btn-silder .btn-one {
        top: 31%;
        left: 37%;
    }
    .main4 h2, .main5 h2 {
        font-size: 35px;
    }
    .caption {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .caption2 {
        font-size: 15px;
        margin-top: 15px;
    }

    .btn-one {
        padding: 9px 10px !important;
        border-radius: 6px;
    }

    #divWorkProcess .time:nth-child(6), #divWorkProcess .time:nth-child(4), #divWorkProcess .time:nth-child(5) {
        margin-bottom: 0px;
    }

    .icon-footers.card-new .body {
        padding: 1.5rem 10px;
    }

    #carouselExampleIndicators .carousel-caption {
        right: 15%;
        left: 15%;
        background: #08080861;
        border-radius: 15px;
        padding: 15px;
        backdrop-filter: grayscale(1);
    }

    .carousel-caption.d-none.d-md-block.text-black {
        color: #fff !important
    }
}

@media only screen and (max-width: 991px) {
    #whatweoffer .card{
        min-height:400px
    }
    .footer_cards .card-new {
        min-height: 190px
    }
    .col-lg-6.btn-silder img {
        display: none;
    }

    .btn-silder .btn-one {
        position: inherit;
        left: inherit;
        right: inherit;
        top: inherit;
    }

    .main .container .row {
        display: flex;
        flex-wrap: nowrap;
    }

    .container {
        max-width: 100%;
    }

    .about_content, .main4, .main5, .main6, .main7, .footer_inner, .dev-hire, .py-100, .landing-page-banner-with-form, .hire-own, .py-5.what-bg, #whatweoffer {
        padding: 30px 0px;
        margin-top: 0px
    }

        .about_content p {
            min-height: unset !important;
        }

    .main3 .about_content {
        padding-left: 40%;
    }

    .main3 {
        padding-bottom: 0px;
    }

    .main4 h2, .main5 h2, .main7 h2 {
        font-weight: bold;
        font-size: 30px;
        padding-bottom: 20px;
        margin-bottom: 0px;
    }

    #whatweoffer {
        padding: 30px 25px;
    }

    .card-text {
        min-height: unset;
    }

    .card-body hr {
        width: 75%;
        margin-top: 5%;
    }

    .owl-nav, .owl-dots {
        display: none;
    }

    .main5 p {
        font-size: 12px;
    }

    .f-step-ss p, .f_step p {
        height: unset;
        padding: 10px 5px;
    }

    .f_step {
        padding: 0px
    }

    .time {
        margin-bottom: 6%;
    }

    .f-step-ss {
        margin-top: 30%;
    }

    .f-step-ss {
        padding: 0px;
    }

    .contact {
        margin: 0px;
    }

    .right_contact {
        padding: 0;
        width: 100%;
        margin: 0px auto;
        margin-top: 10px;
    }

        .right_contact p {
            font-size: 15px;
            font-weight: normal;
            margin-top: 0px;
            margin-bottom: 0px;
        }

    .contact_footer {
        padding: 15px 15px;
    }

    .row.footer_upper {
        position: relative
    }

    .col-lg-2.footer_cards.text-center {
        position: absolute;
        top: 0;
        left: 0;
        text-align: left !important;
        width: auto;
    }

    .footer_bottom .row {
        display: flex;
        flex-wrap: nowrap;
    }

    .text-muted.pb-5.light-300 {
        padding-bottom: 0rem !important;
    }

    .w-125 {
        width: 50px;
    }

    form[action="/Home/HireDevelopers"] .modal-body {
        padding: 0px;
    }

    .dev-hire .hire-card img {
        margin: 15px 10px 11px 5px;
    }

    .icon-img-two {
        height: 70px;
        width: 70px;
        line-height: 70px;
    }

    .col-md-3.mt-5.pt-3 {
        margin-top: 0rem !important;
    }

    .How-Work .col-md-3:nth-child(2) {
        order: 1;
    }

    .How-Work .col-md-3:nth-child(3) {
        order: 2;
    }

    .How-Work .col-md-3:nth-child(4) {
        order: 3;
    }

    .How-Work .col-md-3:nth-child(5) {
        order: 4;
    }

    .How-Work .col-md-3:nth-child(6) {
        order: 7;
    }

    .How-Work .col-md-3:nth-child(7) {
        order: 6;
    }

    .How-Work .col-md-3:nth-child(8) {
        order: 5;
    }

    .How-Work .line-one:after {
        display: none
    }
}

@media only screen and (max-width: 768px) {
   
    .dev-hire .col-md-4 .card-new.hire-card{
        width:100%;
    }
    .d-none68 {
        display: none;
    }
    .col-lg-6.footer_bottom_content {
        margin-bottom: 0px;
    }

    .right-top, .left-top {
        margin: 0px;
        padding: 0px;
    }

    .main {
        line-height: 20px;
    }

    .navbar {
        padding: 0px;
    }

    .navbar-brand img {
        width: 70px;
    }

    .navbar-dark .navbar-nav .nav-link {
        padding: 5px 5px;
        font-size: 11px;
    }

    .btn-one {
        padding: 5px 10px !important;
    }

    .slider1 {
        text-align: center;
    }

    .main3 .about_content {
        padding-left: 0%;
    }

    .about_content h2, .main4 h2, .main5 h2, .main7 h2, .service-title, .contact h2, .landing-page-banner-with-form h1, .dev-hire h2, .hire-developers h2, .bg-light.py-100 h2, .py-100 h3,
    .py-5.bg-light .container h2, .color-banner h2 {
        font-size: 20px;
    }

    .about_content p, .landing-page-banner-with-form p, ul#bulletp-vemp li, .dev-hire .hire-card p, .exper-info p {
        font-size: 12px;
    }

    ul#bulletp-vemp li {
        line-height: 30px
    }

    .main5 p {
        color: #000;
    }

    .form-box {
        padding: 0px;
    }

    .input-group-addon {
        line-height: 26px;
    }

    .col-lg-2.footer_cards.text-center img {
        width: 80px;
    }

    .col-md-4.get-in-touch-now {
        margin-top: 10px;
    }

    .get-in-touch-now h3 {
        margin: 0px 0 10px;
    }

    .hire-developers .container .row.mt-5 .col-md-4:nth-child(3) {
        margin-top: 1.5rem !important;
    }
    .dev-hire .container .row.mt-5 .col-md-4 {
        min-width: 45%;
        float: left;
        margin-left: 25px;
        min-height: 155px
    }
        .dev-hire .container .row.mt-5 .col-md-4 .card-new.p-3.hire-card {
            margin-top:15px !important;
        }
        .hire-developers .container .row.mt-5 .col-md-4, .hire-developers .container .row.mt-5 .col-md-3 {
            min-width: 48%;
            float: left;
            margin-left: 25px;
        }
    .hire-developers .col-md-3 .card-new{
        height:160px
    }
    .hire-developers .card-new {
        height: 250px;
    }

        .dev-hire .container .row.mt-5 .col-md-4 .card-new.p-3.hire-card:nth-child(2n+1), .hire-developers .container .row.mt-5 .col-md-4:nth-child(2n+1), .hire-developers .container .row.mt-5 .col-md-3:nth-child(2n+1) {
            margin-left: 0px;
        }

         .hire-developers .container .row.mt-5 .col-md-4:nth-child(2) {
            margin-top: 0px !important
        }

        .hire-developers .container .row.mt-5 .col-md-3:nth-child(3), .hire-developers .container .row.mt-5 .col-md-3:nth-child(4) {
            margin-top: 1.5rem !important;
        }

        .dev-hire .container .row.mt-5 .col-md-4:after, .dev-hire .container .row.mt-5 .col-md-4 .card-new.p-3.hire-card:after {
            display: block;
            content: "";
            clear: both;
        }

    .py-100 .row .col-md-12 p {
        margin-bottom: 10px
    }

    .icon-img {
        height: 50px;
        width: 50px;
        line-height: 50px;
        top: -23px;
    }

    .bg-light.py-100 .container .mt-4 #owl-carouselone .owl-item .item .card-new .body h5.mt-5.pt-3 {
        margin-top: 0px !important;
    }

    .color-banner .col-12.py-5.text-center.text-white {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

        .color-banner .col-12.py-5.text-center.text-white .pt-5.w-50.m-auto {
            width: 100% !important;
            padding-top: 10px !important
        }

    .Toptal ul {
        height: 50px;
    }

    .Toptal {
        margin-top: -25px;
    }

    .Toptals header div, .Toptals section div {
        min-height: 15px;
        line-height: normal;
        padding: 10px 5px;
    }

    .QCCUETs {
        font-size: 12px;
        line-height: 20px;
        width: 20px;
        height: 20px;
    }

    .Toptals header, .Toptals section {
        font-weight: 500;
        font-size: 12px;
    }

    .w-25.line-dots, #myTabContent .tab-pane header.d-flex .w-25:first-child {
        width: 33% !important;
    }

    .container.my-5.py-5 {
        margin-top: 0px !important;
        margin-bottom: 0px !important
    }

    .bg-light.py-5 {
        padding-top: 20px !important;
        padding-bottom: 0px !important;
    }

    h5.mt-5.pt-3 {
        margin-top: 0px !important;
    }
}

@media only screen and (max-width: 767px) {
    #Why-Choose .card-new, #ViewOurWork .card-new, #Our-Proven + .bg-light .card-new {
        min-height: auto;
    }
    .Toptal {
        top: 42px;
    }
    .hire-developers .container .row.mt-5 .col-md-4:nth-child(2), .hire-developers .container .row.mt-5 .col-md-3 {
        margin-top: 1.5rem !important;
        margin-left: 0px;
    }
    .hire-developers .col-md-3 .card-new, .hire-developers .card-new {
        height: auto;
    }
    .hire-developers .container .row.mt-5 .col-md-4, .hire-developers .container .row.mt-5 .col-md-3{
        margin-left:0
    }
    .How-Work .line-left:after, .How-Work .line:before, .How-Work .line-one:before, .How-Work .line:after {
        display: none
    }

    div .container.my-5.py-5 .row .col-md-6.mt-5.pt-3.text-center .row .col-md-4 {
        width: 33% !important
    }

    .container.my-5.py-5 .row .col-md-4 {
        order: 2;
        margin-top: 15px;
    }

    .carousel-caption.d-none.d-md-block {
        display: block !important
    }

    ul.right-top li {
        width: 40%;
    }

    .navbar {
        padding: 0px 15px;
    }

    .navbar-dark .navbar-nav .nav-link {
        font-size: 12px !important;
        margin-bottom: 0px !important;
    }

    .nav-item.connect {
        padding: 0px
    }

    .time {
        padding: 0px 15px;
        margin-bottom: 9%;
    }

    .mt-ss-2 {
        margin-top: 10px
    }

    .col-lg-6.footer_bottom_content p {
        font-size: 12px;
    }

    .col-lg-6.footer_bottom_content {
        margin-bottom: 0px;
    }

    .footer_bottom {
        padding-bottom: 6px;
    }
}

@media only screen and (max-width: 575px) {
    .dev-hire .container .row.mt-5 .col-md-4 {
        width: 100%;
        float: left;
        margin-left: 0px;
        min-height: 155px;
    }
    .input-group-addon{
        width:85px !important;
    }
    .mobiless .iti.iti--allow-dropdown {
        width: 83%;
    }
    .slider1 .img-fluid {
        height: 250px
    }

    .nav.nav-tabs .nav-link {
        padding: 0.5rem 0.2rem;
    }

    .col-md-4.mt-5.pt-3 {
        padding-top: 0px !important
    }

    .development-offerings li {
        width: 33%;
    }

        .development-offerings li img {
            width: 50px;
            height: 50px;
        }

    .btn-one {
        margin-right: 10px;
    }

    .carousel-item, .carousel-item img {
        height: 355px;
    }

    #carouselExampleIndicators .carousel-caption {
        right: 1%;
        left: 1%;
        padding: 5px;
    }

    .main {
        display: none;
    }

    .caption, .about_content h2, .main4 h2, .main5 h2, .main7 h2, .service-title, .contact h2, .landing-page-banner-with-form h1, .dev-hire h2, .hire-developers h2, .bg-light.py-100 h2, .py-100 h3, .get-in-touch-now h3,
    .footer_cards h4, .py-5.bg-light .container h2, .row.mt-5.justify-content-md-center .col-lg-3.col-md-4 .card-new h3, .col-12.mb-4.text-center h3, .col-md-12 h3,
    .lvop.card-new.px-5.pb-5 h3, .content-heading.pt-5 h2, h2.text-center.mb-5, h4.form-pt.darkblue, .col-md-8 h3, .col-md-6 h3, h5.mt-5.pt-3 {
        font-size: 15px;
    }

    .row.mt-5.justify-content-md-center .col-lg-3.col-md-4 .card-new img {
        width: 50px !important
    }

    .row.mt-5.justify-content-md-center .col-lg-3.col-md-4:first-child {
        margin-bottom: 15px;
    }

    .lvop.card-new.px-5.pb-5 h3 {
        margin-bottom: 15px;
    }

    .container.py-5 {
        padding-top: 0px !important;
        padding-bottom: 0px !important
    }

    .caption2 {
        font-size: 12px;
    }

    .about_content, .main4, .main5, .main6, .main7, .footer_inner, .dev-hire, .py-100, .landing-page-banner-with-form, .hire-own, .py-5.what-bg, #whatweoffer, .py-5.bg-light,
    section.pt-40, .what-bg .row.py-5, .content-heading.pt-5, .Contact-Information.py-5 {
        padding: 15px 0px !important;
    }

    .container.my-5.py-5 {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    .career-card h4 {
        font-size: 0.8rem;
    }

    .career-card .card.card-body h1 {
        font-size: .7rem;
    }

    .development-offerings li:after {
        top: 25px;
    }

    .development-offerings li {
        font-size: 12px;
        margin-top: 10px;
    }

    .icon-steps {
        height: 50px;
        width: 50px;
    }

    .lvop.card-new.px-5.pb-5 {
        margin: 15px !important;
        padding: 15px !important;
        width: 95%
    }

    .col-12.mb-4.text-center {
        margin-bottom: 0px !important;
    }

    ul#bulletp-vemp {
        margin-top: 0px;
    }

    .col-12.mt-5 {
        margin-top: 0px !important;
    }

    .choices {
        margin-bottom: 0px !important;
        font-size: 12px !important;
    }

    .time {
        width: 49%;
        margin-bottom: 13%;
    }

    #divWorkProcess .time:nth-child(2), #divWorkProcess .time:nth-child(4) {
        margin-bottom: 15%;
    }

    .mt-xsm-2 {
        margin-top: 10px
    }

    .col-lg-12.footer_cards.link-footer.text-right.mb-5 {
        padding-left: 20%;
        text-align: left !important;
    }

    .footer_lower {
        width: 100%;
    }

    .banner-bg.bg-white.pt-4.pb-3 {
        padding-top: 0px !important;
    }

    section .container.my-4 {
        margin: 0px !important
    }

    .d-ss-none {
        display: none
    }

    .d-ss-mt {
        margin-top: 15px;
    }

    .objective.col-lg-6.mt-sm-0.mt-4 {
        margin-top: 0px !important
    }

    .banner-content h3, .banner-content p {
        font-size: 12px;
    }

    h3.pt-40, h3.pt-4 {
        font-size: 1rem;
    }

    .dev-hire .container .row.mt-5 .col-md-4 .card-new.p-3.hire-card, .hire-developers .container .row.mt-5 .col-md-4, .hire-developers .container .row.mt-5 .col-md-3 {
        width: 100%;
        margin-left: 0px;
        min-height: 100px;
    }

        .dev-hire .container .row.mt-5 .col-md-4 .card-new.p-3.hire-card:nth-child(2), .hire-developers .container .row.mt-5 .col-md-4:nth-child(2) {
            margin-top: 1.5rem !important;
        }

   

    .dev-hire .container .row.mt-5 .col-md-4 .card-new.p-3.hire-card:last-child {
        margin-bottom: 1.5rem !important;
    }

    .hire-developers .container .row.mt-5 .col-md-3:nth-child(2) {
        margin-top: 1.5rem !important;
    }

    #accordion .card-new h5 button {
        font-size: 13px;
        padding: 0px 0px;
    }

    #accordion .card-new .card-header {
        padding: 3px 10px;
    }

    .py-5.bg-light .container .row.mt-5 {
        margin-top: 0px !important
    }

    .Toptal ul li .nav-link {
        padding: 0rem 0.3rem !important;
    }

    .QCCUETs, .Toptals .line-dots:before {
        display: none;
    }

    .box-new {
        font-size: 12px;
        padding-top: 5px;
        padding-left: 0px;
    }

    .w-100.line-dots .ml-4.pl-3.mt-3.d-block {
        margin-left: 0.4rem !important;
        margin-top: 0.1rem !important;
        padding-left: 0px !important
    }

    .box-new p {
        font-size: 12px;
        margin-left: 20px;
        margin-top: 0px;
    }
    .Toptal .nav.nav-tabs .nav-link {
        font-size: 1rem;
        font-weight: bold;
    }
}

@media only screen and (max-width: 475px) {
    .navbar-dark .navbar-toggler {
        background: #70131305;
    }
    .mobiless .iti.iti--allow-dropdown {
        width: 79%;
    }
    .time {
        width: 100%;
    }

    .f_step {
        width: 95%;
    }

    .input-group-addon {
        padding: 5px 10px;
    }

    .middle_contact .row .col-lg-6:first-child {
        width: 70%;
    }

    .middle_contact .row .col-lg-6:last-child {
        width: 30%;
    }

    .col-lg-12.footer_cards.link-footer.text-right.mb-5 {
        padding-left: 35%;
    }

    .col-lg-6.footer_bottom_content p {
        font-size: 11px;
    }

    .objective.col-lg-6.mt-sm-0.mt-4 .pt-4 {
        padding-top: 0rem !important;
    }
}

@media only screen and (max-width: 425px) {

    .mobiless .iti.iti--allow-dropdown {
        width: 76%;
    }
}
@media only screen and (max-width: 375px) {

    .mobiless .iti.iti--allow-dropdown {
        width: 73%;
    }
}
@media only screen and (max-width: 320px) {
    .mobiless .iti.iti--allow-dropdown {
        width: 67%;
    }
    .cap {
        top: 0px;
    }

    .slider1 .img-fluid {
        height: 300px;
    }
}