/* Responsive  */

@media(max-width:1450px){
    .animi-chat{zoom: .8;}
    .animi-chat::after{bottom: -4px;}
    .language-selector a.nav-link.select-lang > div {
        display: none;
    }

    header .navbar-expand-lg .navbar-nav .nav-item:not(:last-child) .nav-link {
        margin-right: 20px;
    }
}

@media(max-width:1366px){
    header .navbar-expand-lg .navbar-nav:not(:last-child) .nav-link {margin-right: 14px !important;}
    header nav .nav-item a,
    .button-gropup .nav-btn{font-size: var(--font-regular);}
    .button-gropup.loginuser-nav {
        gap: 10px;
        padding-left: 10px !important;
        align-items: center;
    }
    .filter-card {
        padding: 10px 15px;
    }
    .filter-card .filter-title {
        font-size: var(--font-regular);
    }
    
    .navbar-brand img {
        max-width: 110px;
    }

    header ul.navbar-nav {
        margin-left: 10px;
    }

    .button-gropup {
        gap: 15px;
    }
}

@media (min-width: 1200px) {
    .chat-frame-wrap .content {
        width: calc(100% - 435px);
    }
}

@media(max-width:1200px){
    /* global */
    .pt-80 { padding-top: 60px;}
    .pt-120 { padding-top: 70px;}
    .py-120 { padding: 70px 0;}
    .py-100 { padding: 50px 0;}
    .pb-50 { padding-bottom: 40px;}
    .py-60 { padding: 30px 0; }
    h2 { font-size: var(--font-28); line-height: 40px;}
    h3 { font-size: var(--font-25); line-height: 35px;}
    h5 { font-size: var(--font-regular); line-height: 24px;}
    p { font-size: var(--font-small); line-height: 22px;}
    .custom-btn.btn-lg { font-size: var(--font-regular); padding: 10px 30px;}
    .heading-box { margin-bottom: 24px;}
     .button-gropup { gap: 20px; }

    /* header */
    .notification-wrap .dropdown-toggle {
        width: 30px;
        height: 30px;
        padding: 1px !important;
    }

    .select-lang{
        padding-right: 0;
        gap: 5px;
    }

    .userlogin-dropdown .select-lang::after{display: none;}
    .userlogin-dropdown .select-lang img{
        margin-right: 0 !important;
    }
    .language-dropdown > a.nav-link.select-lang{padding-right: 0 !important;}
    .navbar-expand-lg .navbar-toggler { display: block;}    
    button.navbar-toggler { border: none; box-shadow: none; outline: none; padding: 0;}
    button.navbar-toggler:focus{ box-shadow: none;}
    header ul.navbar-nav { margin-left: 0; margin-bottom: 15px !important;}
    .navbar-brand img { max-width: 80px;}
    .collapse:not(.show) { display: none !important;}
    .navbar-expand-lg .navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none;}
    header nav { padding: 10px 0 !important;}
    div#navbarSupportedContent { position: absolute; left: 0; top: 58px; z-index: 9; background-color: #fdf8f7; width: 100%; padding: 20px 15px 25px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;flex-direction: column;}
    header .navbar-expand-lg .navbar-nav .nav-item:not(:last-child) .nav-link {margin-right: 0;margin-bottom: 12px;}
    /* banner */
    .hero-image { max-width: 300px;}
    .hero-wrapper .hero-content .button-group{gap: 20px;}
    .hero-wrapper h1 { font-size: var(--font-40); line-height: 50px;}
    .hero-wrapper .hero-content p { font-size: var(--font-regular); max-width: 540px;}
    .animi-chat02.animi-chat { left: 32px; top: auto; bottom: 16px;}
    .animi-chat03.animi-chat { bottom: 97%; left: 46px;}
    .icon-3 { right: -50px;}
    .icon-2 { left: -40px; top: 30%;}
    /* hiring */
    .hiring-inner .content { width: 100%; max-width: 490px;}
    /* project-step */
    .project-step-wrapper .head-content { margin-bottom: 0;}
    .post-project-btn { margin-top: 40px;}
    .step-item::before { left: 15px; font-size: 24px;}
    .project-step { gap: 24px;}
    .project-step .step-item { padding: 40px 15px 20px; width: calc(25% - 18px);}
    .project-step .step-item .step-img { height: 142px; margin: 0 0 20px;}
    .step-item .step-content h4 { font-size: var(--font-regular); line-height: 24px; margin-bottom: 7px;}
    .project-step .step-item:nth-child(2n) { margin-top: 48px;}
    /* feedback */    
    .feedback-icon { width: 75px; min-width: 75px; height: 75px; border-radius: 8px;}
    .feedback-icon img { max-width: 35px; max-height: 35px;}
    .feedback-content { padding-left: 15px;}
    .feedback-item h3 { font-size: var(--font-25); margin-bottom: 5px;}
    /* benift */
    .benift-list ul li .list-item { padding: 15px; margin-bottom: 15px;}
    .benift-list ul li .list-item .icon-box { width: 57px;min-width: 57px; height: 63px;}
    /* cta */
    .cta-center { padding: 50px 15px;}
    
    /* testimonial */
    .testimonial-sec{ background-size: contain;}
    .testimonial-card { padding: 20px 15px;}
    /*  */
    
    .inner-hero-wrapper .hero-content{
        padding: 40px 0;
    }
    .inner-hero-wrapper .hero-content h1 {
        font-size: var(--font-28);
        line-height: 38px;
    }
    /*  */
    .back-button {
        padding: 10px 0 10px;
        margin-bottom: 10px;
    }
    .page-title {
        margin: 0 0 30px;
    }
    .footer-link ul li a {
        margin-top: 10px;
        line-height: normal;
    }
    .filter-head {
        grid-template-columns: 1fr 1fr 1fr ;
    }
    
    .mb-20 {
        margin-bottom: 0px;
    }

    .login-form .signup-form-wrap .mb-20 {
        margin-bottom: 0 !important;
    }

    .form-group {
        margin-bottom: 20px;
    }
    .upload-outer.mb-20{
        margin-bottom: 20px;
    }
    .customer-menu> ul> li>a {
        padding: 10px 15px;
        font-size:  var(--font-regular);
    }
    .customer-menu ul li .submenus li > a {
        padding: 10px 15px;
        font-size: var(--font-small);
    }
    div#navbarSupportedContent > .button-gropup {
        flex-wrap: wrap;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .userlogin-dropdown .select-lang img{
        max-width: 30px !important;
        height: 30px !important;
    }

    .chat-frame-wrap .content{
        width: 57%;
    }

    .freelancer-profile-view{
        padding-top: 0 ;
    }

    .desktop-only{
        display: none;
    }

    .mobile-only{
        display: block;
    }

    .mobile-only .primary-outline {
        padding: 2px 10px;
    }

    .notification-badge {
        width: 15px;
        height: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        line-height: inherit;
    }
    
    .project-card-outer{
        grid-template-columns: 1fr;
    }
}

@media(max-width:1024px){
    .custom-btn{
        font-size: var(--font-small);
    }
    h2 {
        font-size: var(--font-24);
        line-height: 34px;
    }   
    h3 {
        font-size: var(--font-22);
        line-height: 32px;
    }
    .heading-box .h-link a{font-size: var(--font-small);}
    .heading-box .h-link a svg {
        width: 20px;
        height: 20px;
    }
    .post-project-btn {
        margin-top: 30px;
    }

    /*  */
    .hero-wrapper h1 {
        font-size: var(--font-32);
        line-height: 42px;
    }
    .container{
        max-width: 100%;
    }
    /*  */

    .hero-image-outer {
        padding-top: 22px;
    }
    .hero-image-outer .animi-card,
    .hero-image-outer .animi-icon{display: none;}
    .animi-chat {
        zoom: .7;
    }
    /*  */
    .project-step-wrapper{
        background-size: contain;
    }
    /*  */
    .hiring-inner .content p{
        font-size: var(--font-small);
    }
    /* footer */
    .footer-head {
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    .footer-link ul li a {
        margin-top: 10px;
    }

    .freelancer-project-detail-wrap{
        padding-top: 10px !important;
    }

    .project-detail-wrapper  .page-title h2{
        margin-bottom: 30px;
    }

    .freelancer-project-detail-wrap .review-content{
        margin-top: 0;
    }

    .pd-price{
        font-size: 20px;
    }

    .project-info .project-title{
        font-size: 16px;
    }

    .pu-profile .pu-content h5{
        font-size: 15px;
    }

    .d-flex.deal-price-outer.gap-3.mt-3 {
        flex-wrap: wrap;
        row-gap: 10px !important;
    }

    .freelancers-wrapper .search-wrapper{
        max-width: 100%;
        width: 100%;
    }
}

@media(max-width:991px){

    .project-section{
        padding-top: 30px;
    }

    .clinet-project-detail-sidebar{
        margin-bottom: 20px;
        overflow: hidden;
    }

    .clinet-project-detail-sidebar .pu-profile{
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .clinet-project-detail-sidebar .pu-profile .pu-img{
        width: 70px;
        height: 70px;
    }

    .pd-head{
        margin-bottom: 10px;
    }

    .feedback-item {
        flex-direction: column;
        text-align: center;
    }
    .feedback-content {
        padding-left: 0;
        padding-top: 15px;
    }
    .feedback-item h3 {
        justify-content: center;
    }
    /*  */
    .post-content .arror-img {
        bottom: 0;
    }
    .post-content {
        padding: 40px 0;
    }
    .work-outer {
        flex-wrap: wrap;
    }
    .review-content {
        margin-top: 30px;
    }
    .pd-tag,
    .pd-head {
        flex-wrap: wrap;
    }
    .welcome-img {
        display: none;
    }
    .welcome-head {
        padding: 0 20px;
        margin-top: 30px;
    }
    .form-wrap {
        padding: 15px 20px;
        border-radius: 8px;
    }
    .doc-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .customer-profile{
        padding-top: 44px;
    }

    .chat-frame-wrap .content{
        width: 57%;
    }

    .navbar-brand img{
        max-width: 70px;
    }

    div#navbarSupportedContent{
        top: 53px;
    }

    .client-my-profile-img,
    .freelancer-profile-img{
        width: 90px;
        height: 90px;
        top: -44px;
    }

    .client-my-profile-update-img ,
    .freelancer-profile-update-img{
        border-radius: 50%;
        max-width: 80px;
        height: 80px;
    }

    .find-project-detail-wrap .review-content{
        margin-top: 0;
    }

    .inner-hero-wrapper .hero-content {
        padding: 25px 0 0;
    }

    .inner-hero-wrapper .hero-content .breadcrumb{
        margin-top: 10px;
    }

    .inner-hero-wrapper .hero-content h1{
        font-size: 22px;
        line-height: 28px;
    }

    .pt-120 {
        padding-top: 50px;
    }
}

@media(max-width:767px){

    .project-bid-oter .project-bid{
        align-items: center;
    }

    .project-bid-oter .project-bid>div {
        width: 50%;
    }

    .project-user{
        flex-direction: inherit !important;
        flex-wrap: wrap;
    }

    .project-detail-wrapper .page-title, 
    .project-detail-wrapper .page-title h2{
        margin-bottom: 20px; 
        font-size: 18px;
    }

    .modal-content{
        width: calc(100% - 20px);
        margin: auto;
    }

    .freelancer-project-detail-wrap .review-content,
    .find-project-detail-wrap .review-content{
        margin-top: 20px;
    }

    .custom-btn.secondary-btn,
    .custom-btn{
        padding: 6px 16px;
    }

    .pd-price {
        font-size: 20px;
    }

    .pd-discription{
        padding-top: 10px;
    }

    .pd-discription h3{
        font-size: 17px;
    }

    .review-content {
        padding: 20px 15px;
    }
    .button-group{flex-wrap: wrap;}
    .hiring-inner {
        padding: 30px 20px;
        background: linear-gradient(268.27deg, #001818 0.72%, #064848 99.41%);
        background-size:cover;
        background-position: center;
    }

    .hero-image {
        max-width: 270px;
    }
    /* project-step */
    .project-step .step-item {
        padding: 40px 15px 20px;
        width: calc(50% - 12px);
    }
    .project-step .step-item:nth-child(2n) {
        margin-top: 0;
    }
    .project-step{
        align-items: initial;
    }
    /*  */
    .cta-center {
        padding: 40px 15px;
    }
    
    /*  */
    .post-project-wrapper {
        margin-top: 40px;
    }
    .post-content .arror-img{
        display: none;
    }
    .post-project-wrapper .img-wrap {
        max-width: 320px;
        margin: 0 auto;
    }
    .post-content {
        text-align: center;
    }
    .post-content .d-flex.justify-content-start.mt-4 {
        justify-content: center !important;
    }
    .feedback-item{
        margin-bottom: 30px;
    }
    /*  */
    
    .footer-head {
        flex-direction: column;
        gap: 15px;
    }
    .footer-copy-right {
        margin-top: 50px;
    }
    .footer-land {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    .footer-wrapper .language-selector .dropdown ul {
        right: auto;
    }
     .footer-wrapper .language-selector .dropdown ul::before {
        left: 18px;
        right: auto;
    }
    
    .filter-head {
        margin-top: 30px;
        grid-template-columns: 1fr 1fr ;
    }
    .project-bid-oter {
        flex-wrap: wrap;
    }
    .project-bid-oter .deal-price-outer.col {
        width: 100%;
        flex: auto;
    }
    .form-group {
        flex-wrap: wrap;
    }
    .welcome-head .welcome-content h6 {
        font-size: var(--font-regular);
        line-height: 24px;
    }
    .welcome-head .welcome-content p {
        font-size: var(--font-small);
        line-height: 22px;
    }
    
    .navbar-brand img {
        max-width: 90px;
    }

    .language-selector .select-lang {
        padding: 0;
    }

    .userlogin-dropdown .select-lang div{
        display: -webkit-box; 
        -webkit-line-clamp: 1; 
        -webkit-box-orient: vertical; 
        overflow: hidden; 
        text-overflow: ellipsis;
        max-width: 90px;
        display: none;
    }

    .language-selector .select-lang{
        gap: 4px;
    }

    .chat-wrapper .page-title {
        margin-bottom: 15px;
    }

    .chat-wrapper .page-title h2 {
        margin-bottom: 15px;
    }

    .chat-frame-wrap #sidepanel{
        min-width: 100%;
        margin-bottom: 20px;
    }

    .chat-frame-wrap .content{
        width: 100%;
    }

    .language-selector .dropdown ul::before{
        right: 8px;
    }

    .form-group{
        margin-bottom: 15px !important;
        gap: 15px !important;
    }

    .form-wrap button.w-100.custom-btn.secondary-btn {
        margin-top: 25px;
    }

    .freelancers-content .heading-box{
        align-items: center !important;
    }
}

@media(max-width:580px){

    .button-gropup.loginuser-nav {
        gap: 10px;
        padding-left: 0 !important;
    }

    .navbar-brand img {
        max-width: 75px;
    }

    .project-step .step-item {
        width: 100%;
    }

    .notification-wrap .dropdown-menu{
        right: auto;
        left: -70px;
        transform: translate(-50%, 6px);
    }

    .notification-panel{
        width: 350px !important;
        right: auto !important;
        left: -20px;
        transform: translate(-50%, 6px);
    }

    .dropdown-menu.show::before,
    .notification-panel::before{
        right: auto;
        left: 60%;
        transform: translate(-50%, 0px);
    }

    .dropdown-menu.show::before{
        left: 75%;
    }

    .notification-wrap .dropdown-toggle img {
        max-width: 20px;
    }

    div#navbarSupportedContent{
        top: 56px;
    }
}

@media(max-width:480px){
    .customer-profile .profile-edit-block .profile-img{
        width: 102px;
        height: 102px;
        top: -64px;
    }
    .customer-profile .profile-edit-block .profile-img .profile-update-img {
        border-radius: 50%;
        max-width: 80px;
        height: 80px;
    }
    .customer-profile .profile-edit-block{
        padding: 50px 20px 10px;
    }

    .project-detail-wrapper .page-title, 
    .project-detail-wrapper .page-title h2{
        margin-bottom: 20px; 
        font-size: 16px;
    }
}

@media(max-width:370px){
    .navbar-brand img {
        max-width: 65px;
    }
    .button-gropup.loginuser-nav{
        gap: 5px;
    }
    .notification-wrap .dropdown-toggle img {
        max-width: 18px;
    }

    .notification-panel{
        width: 290px !important;
    }

    .notification-wrap .dropdown-menu{
        left: -60px;
        min-width: 18rem;
    }

    div#navbarSupportedContent{
        top: 51px;
    }

    .filter-head{
        grid-template-columns: 1fr;
    }
}