@media (max-width: 1440px) {}

@media (max-width: 1024px) {
    .navbar .right-bar {
        gap: 10px;
    }

    .nav-links {
        gap: 5px;
    }

    .main-title {
        font-size: 45px;
        line-height: 55px;
    }

    /* Adjust header search for tablet */
    .location-search input,
    .service-search input {
        width: 120px;
    }

    .header-search-wrapper {
        padding: 3px;
        gap: 10px;
    }

    .search-btn {
        padding: 8px 20px;
        font-size: 13px;
    }

    .hero p {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .logo {
        max-width: 90px;
        object-fit: cover;
    }

    .login-btn {
        font-size: 14px;
        padding: 10px 20px;
        margin-left: 0px;
    }

    .nav-links li a {
        font-size: 14px;
    }

    .post_task {
        font-size: 14px !important;
        padding: 7px 13px;
        /* font-size: 10px; */
    }

    .navbar .right-bar>.nav-links {
        flex: 1 1 auto;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
    }

    .hero-container {
        padding: 40px;
    }

    .hero-right {
        position: absolute;
        right: -25px;
        z-index: 0;
    }

    .hero-section .btn-primary {
        width: 100%;
    }

    .testimonials {
        padding-top: 0px;
    }

    .service_header h3 {
        width: 450px;
    }

    .service_grid .service_card .card-desc p {
        font-size: 14px;
    }

    .md-nones {
        display: none !important;
    }

    .md-blocks {
        display: block !important;
    }

    .service_grid .service_card .service_card-flex {
        width: 87%;
    }

    .service_card_titles .card-desc {
        margin-top: 10px;
    }

    .main-container .right-container {
        width: 100%;
    }

    .contact_form .contact_info {
        padding: 30px;
    }

    .jobs-categories {
        grid-template-columns: repeat(3, 1fr);
    }

    .jobs-categories .categories_item a img {
        height: 260px;
    }

    .blog_form {
        margin: auto 0px auto auto;
        width: 100%;
    }

    .article-item .article-content h3 {
        font-size: 25px;
    }

    .hero-banner-btn {
        display: grid;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

    .profile-sidebar {
        display: unset;
        gap: 20px;
    }

    .profile-content {
        display: unset;
        gap: 20px;
    }

    .portfolio-images {
        flex-wrap: wrap;
    }

    .profile-userpic {
        margin-bottom: 20px;
    }

    .portfolio-header .btn.btn-primary {
        font-size: 14px;
        padding: 10px 25px;
    }

    .profile-sidebar .stats-bar {
        padding: 10px;
        gap: 0px;
    }

    .tab-content .accountant-card_list {
        grid-template-columns: repeat(3, 1fr);
    }

    .container-custom {
        padding: 40px;
    }

    .container-custom h2 {
        font-size: 45px;
        line-height: 56px;
    }

    .service_card .service_list .qty-row {
        min-width: 180px;
    }

    .location-search,
    .service-search {
        padding: 10px 10px;
        font-size: 14px;
    }

    .categories-card-header h3 {
        font-size: 50px;
        line-height: 60px;
    }

    .account .user_menu {
        padding: 10px 10px !important;
    }

    .nav-links li a.provider_link {
        padding: 13px 10px;
        border-radius: 10px;
    }

    .service_card {
        padding: 20px;
    }

    .service_card h1 {
        font-size: 20px;
        margin-bottom: 10px;
        font-weight: 700;
        padding-bottom: 10px;
    }

    .service_card .service_list {
        gap: 15px;
        flex-wrap: wrap;
    }

    .service_card .service_list .qty-row {
        min-width: 100%;
        justify-content: left;
        margin-bottom: 0;
    }

    .service_card .coupon-input {
        width: 80%;
        padding: 10px 13px;
    }

    .service_card .coupon-btn {
        font-size: 14px;
        padding: 0 24px;
    }

    .checkout_section {
        max-width: 640px;
        padding: 40px 44px;
        margin: 40px auto;
        box-shadow: 0 16px 45px rgba(16, 45, 102, 0.1);
    }

    .payment-summary-card {
        padding: 20px;
    }

    .payment-card {
        padding: 18px 20px;
        gap: 18px;
    }
}

@media (max-width: 900px) {
    header.fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #ffffff;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100vh;
        background: #ffffff;
        flex-direction: column;
        gap: 20px;
        padding: 0px 0px 20px;
        box-shadow: 3px 0 16px rgba(0, 0, 0, 0.08);
        transition: left 0.3s cubic-bezier(0.82, 0.01, 0.35, 1);
        z-index: 100;
        overflow-y: auto;
    }

    .nav-links.active {
        left: 0;
    }

    body.menu-open {
        overflow: hidden;
    }

    .nav-overlay {
        display: block;
    }

    .nav-overlay.active {
        z-index: 95;
    }

    .nav-links li {
        width: 90%;
        /* background: #f6f6f6db; */
        padding: 5px 0px;
        border-radius: 8px;
        margin: 0px 20px;
    }

    .nav-links li:last-child {
        width: 100%;
        background: none;
        padding: 0px;
        border-radius: 0px;
        margin: 0;
        width: 100%;
    }

    /* .nav-links li .login-btn {
        background: var(--blue);
        color: var(--white);
        border: none;
        font-weight: 500;
        font-size: 18px;
        padding: 10px 40px;
        cursor: pointer;
        border-radius: 30px;
        margin-left: 10px;
        width: 90%;
    } */
    .hamburger {
        display: block;
    }

    header.fixed .hamburger {
        position: relative;
    }

    /* header {
        z-index: unset;
    } */

    .mobile-menu-display {
        display: block;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .nav-right .login-btn {
        display: block;
        margin: 0;
    }

    .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        background: var(--cream);
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

    .mobile-nav-header {
        display: block;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f9f3ef;
        width: 55%;
        padding: 20px;
        position: fixed;
        margin: auto;
        /* padding: 20px; */
        margin-top: 0px;
        z-index: 999;
    }

    .mobile-nav-header a img {
        max-width: 120px;
    }

    .nav-links .mega-column a {
        color: #000000;
        font-size: 15px;
    }

    .nav-links li a {
        color: #110a56;
        text-decoration: none;
        font-size: 18px;
        font-weight: 500;
        transition: all 0.3s;
        position: relative;
    }

    .hamburger {
        display: flex;
    }

    .close-btn {
        display: block;
        position: relative;
        top: 0px;
        background: #f6f5f4;
        /* width: 30px; */
        /* height: 30px; */
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        border-radius: 100px;
        /* box-shadow: 0px 0px 5px #110a56ba; */
        color: #365afa;
        font-size: 30px;
        line-height: 20px;
    }

    .nav-links li:nth-child(7) {
        width: 100%;
        background: none;
        padding: 0px;
        border-radius: 0px;
        margin: 0;
        width: 100%;
    }

    .post_task {
        text-align: center;
        width: 90%;
        margin: auto;
        font-size: 18px !important;
        border-radius: 10px;
        padding: 14px 30px;
        font-weight: 500 !important;
    }

    .checkout_section {
        padding: 32px 24px;
        margin: 120px auto 30px;
    }

    .checkout_section .c_head {
        margin-bottom: 24px;
    }

    .checkout_section .c_head .c_title {
        font-size: 26px;
    }

    .payment-summary-card {
        padding: 18px;
        gap: 10px;
    }

    .payment-summary-card__info .value {
        font-size: 24px;
    }

    .payment-card {
        padding: 16px;
        gap: 14px;
    }

    .payment-card__content {
        gap: 4px;
    }

    .payment-card__title {
        font-size: 16px;
    }

    .payment-card__meta,
    .payment-card__note {
        font-size: 12px;
    }

    .payment-card__chips {
        gap: 6px;
    }

    .payment-chip {
        font-size: 11px;
        padding: 5px 10px;
    }

    .nav-links li .login-btn {
        background: var(--button-color);
        color: var(--blue);
        text-align: center !important;
        width: 90%;
        margin: auto;
        font-size: 18px !important;
        border-radius: 10px;
        padding: 14px 30px;
        font-weight: 500 !important;
        display: flex;
        margin: auto;
        justify-content: center;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: -500px;
        width: 500px;
        height: 100%;
        background: #fff;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
        transition: left 0.3s ease-in-out;
        z-index: 1000;
    }

    .nav-links.active {
        left: 0;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .mega-column {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0px;
    }

    .mega-menu {
        display: none;
        /* hide by default */
        width: 100%;
        position: static;
        grid-template-columns: 1fr;
        box-shadow: none;
        padding: 10px;
    }

    .has-mega-menu.active .mega-menu {
        display: block;
    }

    .nav-links.active li.post_job {
        margin-top: 90px;
    }

    .nav-links li:hover .mega-menu,
    .mega-menu.active {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        margin-top: 11px;
    }

    .account {
        padding: 0px !important;
    }

    .account.mobile-menu-user {
        display: none !important;
    }

    .mobile_post {
        padding: 0 !important;
        /* margin: 0 !important; */
        background: unset !important;
    }

    .mobile_post .post_task {
        width: 91% !important;
    }

    .nav-links li .standards {
        font-size: 17px;
        padding: 12px 25px;
        border-radius: 10px;
        margin-left: 0px;
        width: 91%;
        display: block;
        margin: auto;
        text-align: center;
    }

    .header-search-container.desktop_search {
        display: none;
    }

    .mobile_search {
        display: block;
    }

    .mobile_search .header-search-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile_search .location-search {
        width: 100%;
    }

    .mobile_search .service-search {
        width: 100%;
    }

    .mobile_search .header-search-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile_search .location-search {
        width: 100%;
    }

    .mobile_search .service-search {
        width: 100%;
    }

    .mobile_search .header-search-wrapper {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 0px;
        margin-top: 10px;
    }

    .mobile_search .location-search {
        width: 100%;
    }

    .location-search input,
    .service-search input {
        width: 100%;
    }

    .nav-links li a.provider_link {
        padding: 15px 24px;
        font-size: 16px;
        border-radius: 10px;
        width: 100%;
        display: block;
        text-align: center;
    }

    li.mobile_post {
        display: block;
    }
}

@media (max-width: 991px) {
    .empty-provider-card {
        padding: 40px 32px;
        border-radius: 22px;
    }
}

@media (max-width: 768px) {
    .logo img {
        max-width: 150px;
    }

    /* Hide header search on mobile */
    .header-search-container {
        display: none !important;
    }

    .hero .z-3 {
        display: none;
    }

    .hero-right {
        display: none;
    }

    .posttask_section {
        padding: 50px 0px;
    }

    .hero-container {
        padding: 35px 40px 20px 40px;
    }

    .testimonial-card .testimonial-img {
        display: none;
    }

    .testimonial-header img {
        display: block;
    }

    .testimonial-header {
        margin-bottom: 20px;
    }

    .testimonial-header h5 {
        margin-bottom: 0;
    }

    .mobile-nav-header {
        width: 65%;
        z-index: 999;
    }

    .post_task {
        text-align: center;
        width: 90%;
        margin: auto;
        font-size: 18px !important;
        border-radius: 10px;
        padding: 14px 30px;
        font-weight: 500 !important;
    }

    .nav-links li:nth-child(7) {
        width: 100%;
        background: none;
        padding: 0px;
        border-radius: 0px;
        margin: 0;
        width: 100%;
    }

    .customorder_section {
        padding: 40px 0px;
    }

    .service_list .contact_img {
        display: none;
    }

    .service_grid .service_card .service_card-flex {
        width: 85%;
    }

    .postjob_section {
        padding: 50px 0px;
    }

    .profile-list {
        margin-bottom: 0px !important;
    }

    .bids_list .bids_card p {
        font-size: 15px;
        line-height: 20px;
    }

    .order_details_section {
        padding: 50px 0px;
    }

    .contact_form {
        padding: 50px 10px;
    }

    .hero-container.contact .contact_img {
        display: none;
    }


    .hero.download-app .hero-container {
        padding: 30px;
    }

    .hero.download-app .hero-container img {
        display: none;
    }

    .faq-section {
        padding: 50px 0;
    }

    .faq-items {
        display: grid;
        gap: 15px;
        margin-top: 0px;
    }

    #article-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .post_task-grid .post_task-item {
        gap: 10px;
    }

    .posttask_section .post_task-grid .post_task-item img {
        width: 73px;
        height: 73px;
        object-fit: cover;
        border-radius: 8px;
    }

    .hero-banner-btn {
        display: flex;
    }

    .hero .btn.btn-primary,
    .hero .btn.btn-white {
        width: 100%;
    }

    .service_list_section .error_content {
        margin: 0px auto;
    }


    .swiper.portfolioswiper .swiper-slide img {
        min-height: 300px;
        max-height: 300px;
    }

    .hero-container.categorie .cards {
        max-width: 100%;
        width: 100%;
        margin: auto;
        margin-bottom: 30px;
    }

    .tab-content .accountant-card_list {
        grid-template-columns: repeat(2, 1fr);
    }

    .recent_reviews h3 {
        font-size: 40px;
        line-height: 50px;
    }

    .recent_reviews_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .nav-tabs-custom .nav-link {
        padding: 10px 18px;
    }

    .post_section .post-card img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .categories-card-header h3 {
        font-size: 35px;
        line-height: 40px;
    }

    .categories-card-header p {
        font-size: 17px;
        line-height: 24px;
    }

    .categories-details-item img {
        height: 150px;
    }

    .hero {
        margin-top: 150px;
    }

    .mobile_navigation {
        display: flex;
    }

    .mobile_navigation .logo {
        max-width: 25px;
        object-fit: cover;
    }

    .header-tow {
        margin-top: 150px;
        padding-top: 20px;
    }

    .service_card .service_list {
        gap: 15px;
        flex-wrap: nowrap;
        width: 100%;
    }

    .service_card .service_list .qty-row {
        min-width: 165px;
        justify-content: end;
        margin-bottom: 0;
    }

    .left_wraper {
        border-radius: 0px;
        border: none;
        position: fixed;
        bottom: 0px;
        width: 100%;
        background-color: #fff;
        left: 0px;
        z-index: 8;
        border-top: 1px solid var(--button-color);
    }

    .card_r .title {
        display: none;
    }

    .modal .modal-body .slot_lists .slot-wrapper .date-btn {
        font-size: 14px;
        padding: 15px 28px;
    }

    .slot_lists .slot-wrapper {
        padding: 0px;
    }

    .modal .modal-body .slot_lists .slot-wrapper .time-btn {
        font-size: 15px;
        padding: 15px 20px;
        width: 31%;
        text-align: center;
    }

    .address_card .step-card .edit_btn {
        border: none;
        padding: 0px;
        font-size: 13px;
        color: var(--blue);
        width: fit-content;
    }

    .service_list_section {
        background-color: var(--cream);
        padding: 50px 0px 50px 0px;
    }

    .service_list {
        padding: 0px 0px 30px;
    }

    .service_list h1 {
        margin-bottom: 20px;
    }

    .service_list p {
        font-size: 15px;
        line-height: 25px;
        margin-bottom: 0px;
    }
}

@media (max-width: 575px) {
    .empty-provider-state {
        padding: 45px 0;
    }

    .empty-provider-card {
        padding: 36px 24px;
        text-align: center;
    }

    .empty-provider-card h3 {
        font-size: 24px;
    }

    .empty-provider-card p {
        font-size: 15px;
    }

    .empty-provider-actions {
        flex-direction: column;
        gap: 12px;
    }

    .empty-provider-primary {
        width: 100%;
    }

    .empty-provider-tips {
        text-align: left;
    }

    .checkout_section {
        padding: 28px 20px;
        margin: 110px auto 26px;
    }

    .checkout_section .c_head .c_title {
        font-size: 24px;
    }

    .payment-summary-card {
        padding: 16px;
        gap: 10px;
    }

    .payment-summary-card__icon {
        width: 44px;
        height: 44px;
    }

    .payment-summary-card__info .value {
        font-size: 22px;
    }

    .payment-card {
        padding: 14px;
        gap: 12px;
    }

    .payment-card__wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .payment-card__control {
        width: 22px;
        height: 22px;
    }

    .payment-card__aside {
        width: 100%;
        align-items: flex-start;
    }

    .payment-card__amount {
        font-size: 15px;
    }

    .payment-card__chips {
        gap: 6px;
    }

    .payment-chip {
        font-size: 10px;
        padding: 4px 9px;
    }
}



@media (max-width: 555px) {
    .mobile-nav-header {
        width: 90%;
        z-index: 999;
        top: 0;
    }

    .service_list {
        padding: 50px 0px 50px 0px;
    }

    .service_list .main-title {
        font-size: 45px;
        line-height: 55px;
        margin-bottom: 20px;
    }

    .service_header h4 {
        display: none;
    }

    .service_list p {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
        margin-bottom: 0px;
    }

    .add_lists p {
        font-size: 16px;
    }

    .main-container .right-container .chat-container {
        padding: 25px;
    }

    .hero {
        margin-top: 200px;
    }

    .category-toggle {
        display: flex;
        font-size: 16px;
        color: var(--navy);
        border-radius: 8px;
        padding: 14px 16px;
        background: #fff;
        font-weight: 600;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        color: var(--navy);
    }

    .category-list-wrapper .category-list {
        display: none;
        border: 1px solid #ddd;
        border-top: none;
        max-height: 320px;
        overflow-y: auto;
    }

    .category-list-wrapper .category-list.open {
        display: block;
    }

    .header-tow {
        margin-top: 145px;
        padding-top: 20px;
    }

    .address_card .booking_details h5 {
        font-size: 16px;
    }

    .address_card .booking_details {
        padding: 15px;
    }

    .address_card .step-card {
        padding: 15px;
    }

    .address_card .booking_details .user_icon {
        background: #f5f5f5;
        width: 30px;
        height: 30px;
    }

    .address_card .booking_details .user_icon svg {
        width: 16px;
        height: 16px;
    }

    .address_card .booking_details {
        gap: 10px;
    }

    .address_card .step-card .row_details .icon {
        width: 30px;
        height: 30px;
    }

    .address_card .step-card .row_details .icon svg {
        width: 16px;
        height: 16px;
    }

    .address_card .step-card .row_details .card_r {
        padding-left: 10px;
        padding-right: 10px;
    }

    .address_card .step-card .row_details .card_r .card_data {
        font-size: 12px;
        line-height: 16px;
    }

    .address_card .step-card .row_details .card_r .title {
        font-size: 14px;
        line-height: 18px;
    }

    .address_card .step-card .amount_value {
        font-size: 16px;
        line-height: 20px;
    }
}

@media (max-width: 480px) {
    .logo img {
        max-width: 120px;
    }

    .hero-container {
        padding: 30px 30px 10px 30px;
        border-radius: 15px;
    }

    .main-title {
        font-size: 35px;
        line-height: 45px;
    }

    .nav-links {
        width: 90%;
    }

    .hero-banner-btn {
        display: grid;
    }

    .hero-section {
        padding: 30px 15px;
        border-radius: 0;
    }

    .testimonials {
        padding: 30px 15px;
        border-radius: 0;
    }

    .articles_section {
        padding: 50px 0px;
        margin: 50px 0px 0px 0px;
    }

    .articles_section .articles-heading {
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .articles-heading .main-title {
        margin-bottom: 15px;
    }

    .articles-heading .btn {
        margin: auto 0px auto auto;
    }

    .account .user_menu {
        padding: 13px 10px;
        font-size: 14px;
    }

    .account .dropdown-menu {
        left: auto;
        right: 0;
    }

    .filter_section .filter_flex {
        display: grid;
        gap: 20px;
    }

    .service_details .booking_profile {
        display: grid;
        gap: 10px;
    }

    .service_list_section .error_content {
        padding: 30px;
    }

    .service_list_section .error_content img {
        max-width: 150px;
    }

    .service_list_section .error_content h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .service_list_section .error_content p {
        font-size: 16px;
        line-height: 22px;
    }

    .service_grid .service_card {
        padding: 20px;
        align-items: unset;
    }

    .service_grid .service_card .card-img img {
        border: 0px !important;
        height: 100px;
        object-fit: cover;
        /* width: 100%; */
    }

    .new_address-header {
        flex-wrap: wrap;
    }

    .new_address-header .text-center {
        width: 100%;
        justify-content: end;
        display: flex;
    }

    .no_bookings {
        margin-top: 10px;
    }

    .postjob_section .content {
        padding: 20px;
    }

    .postjob_section .content .step-content h2 {
        font-size: 24px;
    }

    .booking_portfolio .portfolio_images {
        gap: 10px;
        flex-wrap: wrap;
    }

    .bids_list .bids_card .bids_flex .bids_img img {
        width: 60px;
        height: 60px;
    }

    .bids_list .bids_card .bids_flex .bids_info h4 {
        font-size: 16px;
    }

    .service_list_section {
        padding: 50px 0px 40px 0px;
    }

    .service_grid .service_card .card-title {
        font-size: 20px;
    }

    .service_grid .service_card .service_card-flex {
        width: 80%;
    }

    .add_qty_btn,
    .qty_btnwrap {
        bottom: 0;
        top: 76px;
    }

    .service_grid .service_card .quantity-container {
        padding: 7px 12px;
    }

    .service_grid .service_card .quantity-btn {
        padding: 0px;
        width: 21px;
        height: 21px;
    }

    .service_grid .service_card .quantity-display {
        /* padding: 8px 16px; */
        font-size: 14px;
        min-width: 35px;
    }

    .address_card .add-address h4 {
        font-size: 20px;
    }

    .slot_lists .slot-wrapper .time-btn {
        padding: 12px 25px;
    }

    .address_card .add_list .booking_text h5 {
        font-size: 18px;
        font-weight: 500;
    }

    .service_card .service_list {
        display: grid;
        gap: 20px;
    }

    .service_card .service_list .qty-row {
        justify-content: left;
    }

    .booking_listitems .booking_title {
        font-size: 25px;
    }

    .booking_listitems .booking-statuslist .status_subheading {

        font-size: 15px;
    }

    .booking-details .booking_titles {
        font-size: 20px;
        margin-top: 0px;
    }

    .booking_listitems .booking-details {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .main-container .right-container .chat-container .message-box .box {
        max-width: 80%;
        padding: 10px;
    }

    .contact_form .contact_info h2 {
        font-size: 36px;
    }

    .contact_form .contact_item .contact_text a {
        font-size: 15px;
        line-height: 21px;
        display: block;
        font-weight: 400;
    }

    section.posttask_section.pt-4 {
        padding-top: 0px !important;
    }

    .jobs-categories {
        grid-template-columns: repeat(2, 1fr);
    }

    .jobs-categories .categories_item a h4 {
        font-size: 20px;
    }

    .posttask_section.earn_section .container {
        padding: 30px 15px;
    }

    .posttask_section.earn_section .terms {
        font-size: 13px;
        line-height: 17px;
    }

    .posttask_section.earn_section .container {
        border-radius: 0px;
    }

    .hero.download-app {
        background-color: var(--cream);
        padding: 50px 0px;
    }

    .posttask_section.earn_section .hero-banner-btn {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .faq-question {
        font-size: 20px;
        font-weight: 500;
    }

    .faq-answer {
        font-size: 14px;
    }

    .faq-section.faq_bg {
        background-color: var(--cream);
        margin-top: 40px;
    }

    .blog_items .view-toggle {
        flex-wrap: wrap;
    }

    .grid-view.list-view .article-item {
        display: grid;
        gap: 10px;
        margin-bottom: 15px;
    }

    #article-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .article-item img,
    .grid-view.list-view .article-item img {
        max-width: 100%;
        height: 300px;
        border-radius: 0;
        width: 100%;
        object-fit: cover;
    }

    .profile-sidebar .prifile-userpic-inner h3 {
        font-size: 25px;
    }

    .profile-sidebar .prifile-userpic-inner .rounded-circle {
        width: 60px;
        height: 60px;
        object-fit: cover;
    }

    .profile-userpic {
        background-color: var(--white);
        padding: 20px;
    }

    .profile-sidebar .location {
        font-size: 15px;
        line-height: 21px;
    }

    .profile-sidebar .stat-label {
        color: var(--navy);
        font-size: 15px;
    }

    .tab-content .accountant-card_list {
        grid-template-columns: repeat(1, 1fr);
    }

    .recent_reviews_list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .hero-container .tab-pane h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .accountants_cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .accountants_cards .posttask_contents h5 {
        font-size: 18px;
        line-height: 25px;
    }

    .accountants_cards .posttask_contents {
        display: grid;
        gap: 4px;
    }

    .accountants_cards .posttask_contents p {
        font-size: 13px;
        line-height: 18px;
    }

    .accountants_section.layout_bg {
        background: #f3f7ff;
        padding: 50px 0px;
    }

    .accountants_section.layout_bg h2 {
        margin-bottom: 0;
    }

    .accountants_section.layout_bg h2 br {
        display: none;
    }

    .faq-section .hero-container {
        padding: 30px;
    }

    .earnmoney_section {
        padding: 50px 0;
    }

    .container-custom h2 {
        font-size: 35px;
        line-height: 45px;
    }

    .container-custom {
        padding: 30px;
    }

    .checkout_section {
        padding: 30px;
    }

    .checkout_section .c_head .c_title {
        font-size: 24px;
    }

    .checkout_section .paymentMethod .checkout_amount {
        margin-bottom: 10px;
    }

    .checkout_section .paymentMethod .checkout_amount .cart_amount {
        font-size: 16px;
    }

    .checkout_section .paymentMethod .checkout_amount input[type="checkbox"] {
        width: 17px;
        height: 17px;
    }

    .checkout_section .pay_name {
        font-size: 18px;
        font-weight: 400;
    }

    .checkout_section .pay_desc_item {
        display: flex;
        gap: 10px;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .checkout_section .pay_desc_item button {
        cursor: pointer;
        border-radius: 10px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
    }

    .mobile_search .header-search-wrapper {
        gap: 10px;
        display: grid;
    }

    .mobile_search .location-search input,
    .mobile_search .service-search input {
        width: 100%;
    }

    .postlist-bg {
        padding: 20px;
    }

    .post_task-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .categories-details-item .subcat-card ul li a {
        font-size: 14px;
        line-height: 20px;
    }

    .fixed-service {
        padding-top: 20px !important;
    }

    .header-tow {
        margin-top: 200px;
        padding-top: 20px;
    }

    .modal .modal-body .slot_lists .slot-wrapper .time-btn {
        width: 30%;
    }

    .earnmoney_box h5 {
        min-height: auto;
    }

    .accountants_cards .posttask_lists {
        padding: 15px;
    }

    .service_grid .service_card .add-btn {
        padding: 7px 35px;
        font-size: 14px;
    }
}

@media (max-width: 425px) {

    .testimonial-card .review-stars {
        gap: 20px;
        display: grid;
    }

    .testimonial-card .tags {
        flex-wrap: wrap;
    }

    .main-title {
        font-size: 30px;
        line-height: 40px;
    }

    /* .social-icons {
        margin-top: 20px;
    } */
    .footer-bottoms p {
        text-align: center;
    }

    .service_list_section .error_content img {
        max-width: 126px;
        margin-bottom: 20px;
    }

    .service_list_section .error_content h3 {
        font-size: 18px;
        line-height: 23px;
    }

    .service_list_section .error_content .default_btn.sm_btn {
        width: 100%;
    }

    .tab_card.booking_card h3 {
        font-size: 22px;
    }

    .tab_card.booking_card .booking_status .status {
        font-size: 18px;
    }

    .tab_card.booking_card .booking_status .time {
        font-size: 14px;
        margin-bottom: 0px;
    }

    .edi_profile .btn.btn-primary {
        width: 100%;
    }

    .booking_portfolio .portfolio_images img {
        width: 80px;
        height: 80px;
    }

    .booking_buttons {
        flex-wrap: wrap;
    }

    .booking_buttons .btn.btn_primary,
    .booking_buttons .btn.btn_outline {
        width: 100%;
        text-align: center;
        display: block;
    }

    .booking_portfolio p {
        font-size: 15px;
        line-height: 21px;
    }

    .service_lists ul li .service_text {
        font-size: 15px;
        font-weight: 400;
    }

    .btn.proposer {
        padding: 11px 40px;
        font-size: 17px;
        font-weight: 400;
        margin: 0px 0px auto auto;
    }

    .bids_list .bids_card .bids_flexbox {
        flex-wrap: wrap;
    }

    .bids_list .bids_card .bids_flexbox .bids_price {
        justify-content: space-between;
        width: 100%;
        align-items: center;
        display: flex;
        border-bottom: 1px dashed var(--button-color);
        padding-bottom: 20px;
    }

    .bids_list .bids_card .bids_flexbox .bids_price .assign_btn {
        margin: 0px 0px auto auto;
        font-size: 15px;
        font-weight: 400;
        padding: 7px 20px;
    }

    .service_list {
        padding: 20px 0px 50px 0px;
    }

    .service_list .main-title {
        font-size: 35px;
        line-height: 46px;
        margin-bottom: 10px;
    }

    .service_grid .service_card {
        flex-wrap: wrap;
    }

    .service_grid .service_card .service_card-flex {
        width: 100%;
    }

    .service_grid .service_card {
        padding: 20px 20px 30px 20px;
        align-items: unset;
    }

    .service_list .main-title {
        font-size: 36px;
        line-height: 40px;
        margin-bottom: 20px;
    }

    .address_card .add-address {
        padding: 20px;
        display: grid;
    }

    .address_card .add_list .booking_text p {
        font-size: 13px;
    }

    .add_list svg {
        width: 16px;
        height: 16px;
    }

    .slot_lists .slot-wrapper .time-btn {
        padding: 12px 16px;
    }

    .address_card .add_list .booking_text h5 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 0px;
    }

    .btn.btn-primary.address_button {
        font-size: 14px;
        padding: 11px 35px;
    }

    .service_card h1 {
        font-size: 21px;
    }

    .service_card .service_list .service-subtitle {
        font-size: 15px;
    }

    .service_card .service_list .service-desc {
        color: #545454;
        font-size: 12px;
    }

    .service_card .coupon-row {
        flex-wrap: wrap;
    }

    .service_card .coupon-btn {
        font-size: 15px;
        padding: 10px 30px;
        width: 100%;
    }

    .order_details_section {
        padding: 30px 0px;
    }

    .slot_lists .slot-wrapper .date-row {
        flex-wrap: wrap;
    }

    .service_card .summary-section .label {
        font-size: 15px;
    }

    .service_card .summary-table tr .value {
        font-size: 15px;
    }

    .service_card .coupon-label {
        font-size: 20px;
    }

    .booking_listitems .booking-statuslist .booking-status {
        font-size: 18px;
        margin-bottom: 0px;
    }

    .booking_listitems .booking-statuslist {
        gap: 6px;
    }

    .booking_listitems .booking-statuslist .small-text {
        font-size: 14px;
    }

    .booking_listitems .booking-statuslist .subheading {
        font-size: 14px;
    }

    .booking-details .booking_titles {
        font-size: 18px;
        margin-top: 0px;
    }

    .booking_listitems .service_details .booking_buttons a {
        text-align: center;
        display: block;
    }

    .otp_card {
        display: grid;
        gap: 10px;
    }

    .otp_card h4 {
        font-size: 16px;
    }

    .otp_card .otp_code {
        width: fit-content;
    }

    .booking_listitems .service_details .booking_profile .booking_icon a {
        width: 40px;
        height: 40px;

    }

    .booking_listitems .service_details .booking_profile .booking_icon a svg {
        width: 19px;
        height: 19px;
        fill: var(--navy);
    }

    .booking_listitems .service_details .booking_profile .booking_info h5 {
        font-size: 18px;
        color: var(--navy);
        font-weight: 600;
        margin-bottom: 5px;
    }

    .main-container .right-container .chat-container .message-box .box {
        max-width: 100%;
    }

    .contact_form .contact_info h2 {
        font-size: 30px;
    }

    .contact_form .contact_item .concerns img {
        max-width: 40px;
        max-height: 40px;
    }

    .contact_form .contact_item .contact_text h3 {
        font-size: 17px;
    }

    .contact_form .contact_item {
        padding: 15px;
    }

    .posttask_section.earn_section .hero-banner-btn {
        display: grid;
        align-items: center;
        gap: 10px;
    }

    .posttask_section.earn_section .hero-banner-btn a {
        text-align: center;
        width: 100%;
        justify-content: center;
    }

    .posttask_section.earn_section .hero-banner-btn .btn.btn-white {
        margin-top: 0px;
    }

    .blog_form .input-group input {
        padding: 13px;
        border-radius: 26px 0px 0px 26px;
    }

    .customorder_section .postjob_card .nav-pills .nav-link .nav-text h5 {
        font-size: 16px;
    }

    .customorder_section .postjob_card .nav-pills .nav-link .tab-icon svg {
        width: 22px;
        height: 22px;
    }

    .customorder_section .postjob_card .nav-pills .nav-link {
        font-size: 14px;
    }

    .address-item .select-address .booking_text p {
        font-size: 13px;
        line-height: 19px;
    }

    .address-item .select-address .booking_text h5 {
        font-size: 18px;
    }

    .filter_dropdown .form-select {
        font-size: 16px;
        font-weight: 500;
        color: var(--navy);
    }

    .hero-container.categorie .cards {
        padding: 20px;
    }

    .hero-container.categorie h1 {
        margin-bottom: 10px;
    }

    .hero-container.categorie h6 {
        margin-bottom: 10px;
        font-size: 17px;
        font-weight: 400;
    }

    .hero-container.categorie p {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 300;
        line-height: 20px;
    }

    .container-custom h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .recent_reviews h3 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 10px;
    }

    .tab_section {
        padding: 0px 0px 50px 0px;
    }

    .afterpay_banner .afterpay_container {
        padding: 30px 20px;
    }

    .afterpay_banner .pay-card ul {
        display: grid;
    }

    .afterpay_banner .pay-card ul li {
        width: 100%;
    }

    .faq-item {
        padding: 15px;
    }

    .faq-items {
        margin-top: 20px;
    }

    .hero .hero-container.categorie .btn.btn-primary {
        background-color: var(--blue);
        white-space: normal;
    }

    .container-custom {
        padding: 30px 15px;
    }

    .nav-tabs-custom .nav-link {
        padding: 8px 10px;
        font-size: 13px;
        line-height: 19px;
    }

    .post_section .post-card img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .btn.btn-primary {
        padding: 13px 30px;
    }

    .afterpay_banner {
        padding: 50px 0px;
    }

    .dutibook_section {
        padding-bottom: 50px;
    }

    .accountants_section .accountants_card p {
        font-size: 14px;
        color: #535353;
        line-height: 23px;
        margin-bottom: 0px;
    }

    .accountants_card {
        margin-bottom: 20px;
    }

    .accountants_section .main-title {
        margin-bottom: 10px;
    }

    .accountants_section {
        padding-bottom: 50px;
    }

    .faq-section .hero-container {
        padding: 30px 20px;
    }

    .faq-question {
        font-size: 17px;
        line-height: 23px;
    }

    .service_list_section .app-btns svg {
        width: 148px;
        height: 44px;
    }

    .address_card .step-card .address_card_row {
        /* display: grid; */
        gap: 10px;
    }

    .checkout_section .paymentMethod .pay_icon {
        padding: 7px 20px;
        font-size: 16px;
    }

    .payment-modern-ui .paymentMethod {
        padding: 20px;
        gap: 10px;
    }

    .payment-modern-ui .paymentMethod .pay_desc button {
        width: 48%;
        justify-content: center;
    }

    .payment-modern-ui .pay_details {
        text-align: center;
    }

    .payment-modern-ui .paymentMethod .pay_desc {
        margin-top: 20px;
    }

    .posttask_section .post_task-grid .post_task-item img {
        width: 60px;
        height: 60px;
        margin: 0;
    }

    .post_task-item .post-content h6 {
        font-size: 16px;
        font-weight: 500;
    }

    .post_task-item .post-content p {
        font-size: 12px;
        font-weight: 400;
    }

    .address-modal__search .search_box input {
        font-size: 14px;
    }

    .address-modal__search {
        padding: 20px 15px 0;
    }

    .address-modal .modal-body {
        padding: 15px 15px 15px;
    }

    .address-modal .form-control {
        font-size: 14px;
    }

    .address-modal .form-label {
        font-size: 16px;
    }

    .no_bookings p {
        font-size: 15px;
        line-height: 23px;
    }

    .no_bookings p br {
        display: none;
    }

    .no_bookings svg {
        width: 76px;
        height: 76px;
    }

    .footer-bottoms .app-links {
        gap: 5px;
        justify-content: space-between;
    }

    .social-icons svg {
        max-width: 120px;
    }

    .track-location-card .chat-header .header-title {
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 0px;
    }

    .track-location-card .card-header {
        padding: 15px 10px;
    }

    .track-location-card .chat-header .chat-back-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}

@media (max-width: 375px) {
    .logo img {
        max-width: 120px;
    }

    .main-title {
        font-size: 28px;
        line-height: 40px;
        margin-bottom: 15px;
    }

    .hero-banner-btn {
        margin-top: 0px;
    }

    .hero-container {
        padding: 30px 20px 0px;
        border-radius: 15px;
    }

    .nav-right {
        gap: 10px;
    }

    .nav-right .login-btn {
        font-size: 16px;
        padding: 10px 30px;
        border-radius: 10px;
    }

    .main-title {
        font-size: 30px;
        line-height: 40px;
    }

    footer h5 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    footer {
        background: var(--navy);
        padding: 50px 0 30px;
    }

    footer ul li {
        margin-bottom: 0px;
    }

    .footer-logo {
        max-width: 90px;
    }

    .footer-bottoms {
        margin-top: 0px !important;
    }

    .tab_card.booking_card h3 {
        font-size: 20px;
        padding-top: 14px;
    }

    .tab_card.booking_card .offers {
        font-size: 13px;
        font-weight: 300;
    }

    .tab_card.booking_card .booking_status .status {
        font-size: 18px;
    }

    .tab_card.booking_card .booking_status .service_name {
        font-size: 16px;
    }

    .tab_card.booking_card .booking_status .time {
        font-size: 14px;
    }

    .tab_card {
        padding: 15px;
    }

    .balance-card {
        padding: 15px;
    }

    .balance-card h2 {
        font-size: 25px;
    }

    .balance-card p {
        font-size: 13px;
    }

    .balance-card .btn.btn-primary {
        padding: 6px 21px;
        font-size: 13px;
    }

    .balance-card .top-row h3 {
        font-size: 14px;
    }

    .balance-card .wallet_icon svg {
        width: 20px;
        height: 20px;
    }

    .transaction-card {
        padding: 13px;
    }

    .transaction-left h4 {
        font-size: 18px;
        margin-bottom: 0px;
        padding-bottom: 10px;
    }

    .transaction-right {
        gap: 8px;
    }

    .status-completed {
        font-size: 14px;
    }

    .transaction-right h4 {
        font-size: 17px;
    }

    .new_address-header .btn.add-address-btn {
        padding: 8px 20px;
        font-size: 14px;
    }

    .no_bookings svg {
        width: 75px;
        height: 75px;
    }

    .no_bookings {
        background: #fad7d7ba;
        padding: 30px 15px;
    }

    .no_bookings h3 {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .buttons {
        margin-top: 20px;
        flex-wrap: wrap;
        gap: 20px;
    }

    .buttons button#backBtn {
        width: 100%;
        text-align: center;
    }

    .buttons .btn.btn-primary {
        width: 100%;
        text-align: center;
    }

    .location-container .input-wrapper input[type="text"] {
        padding: 13px 14px 13px 40px;
        font-size: 14px;
    }

    .slot_lists .slot-wrapper .date-btn {
        font-size: 14px;
        padding: 7px 17px;
    }

    .slot_lists .slot-wrapper .time-btn {
        padding: 10px 10px;
        font-size: 14px;
    }

    .service_card {
        padding: 15px;
    }

    .service_card .service_list .service-subtitle {
        font-size: 19px;
    }

    .main-container .right-container .chat-container {
        padding: 15px;
    }

    .contact_form .contact_info {
        padding: 30px 20px;
    }

    .posttask_section p {
        font-size: 15px;
        line-height: 23px;
    }

    .jobs-categories {
        grid-template-columns: repeat(1, 1fr);
    }

    .faq-item {

        padding: 15px;
    }

    .faq-question {
        font-size: 18px;
    }

    .blog_items .view-toggle h4 {
        font-size: 24px;
    }

    .article-item img,
    .grid-view.list-view .article-item img {
        max-width: 100%;
        height: 200px;
        border-radius: 0;
        width: 100%;
        object-fit: cover;
    }

    .hero .hero-container h6 {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }

    .hero p {
        font-size: 15px;
        margin-bottom: 10px;
        margin-top: 0px;
        font-weight: 300;
        line-height: 24px;
    }

    .posttask_list li {
        font-size: 16px;
        line-height: 26px;
    }

    .hero-section p {
        font-size: 15px;
        line-height: 24px;
        font-weight: 300;
    }

    .hero-section ul li {
        font-size: 15px;
        font-weight: 400;
    }

    .main-title br {
        display: none;
    }

    .testimonials p {
        font-size: 15px;
        line-height: 24px;
        font-weight: 300;
        margin-bottom: 0px;
    }

    .testimonials .swiper.mySwiper {
        margin-top: 20px;
    }

    .testimonial-card .review-stars {
        gap: 10px;
        display: grid;
    }

    .testimonial-card .specialities p {
        font-size: 14px;
        font-weight: 400;
        color: #384179;
        line-height: 23px;
    }

    .testimonial-card .tags {
        flex-wrap: wrap;
        margin-top: 10px;
        gap: 10px;
    }

    .testimonial-card .review p {
        font-size: 14px;
        font-weight: 400;
        color: #384179;
        line-height: 23px;
        margin-bottom: 0px;
    }

    .testimonial-card .tags .tag {
        gap: 5px;
    }

    .account_card h3 {
        font-size: 26px;
    }

    .profile-sidebar .prifile-userpic-inner h3 {
        font-size: 22px;
    }

    .profile-sidebar .stat-detail a {
        color: inherit;
        text-decoration: none;
        font-size: 16px;
    }

    .portfolio-images img {
        width: 95px;
        height: 95px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
    }

    .accountants_cards {
        grid-template-columns: repeat(1, 1fr);
    }

    .articles-heading .btn {
        margin: auto 0px auto auto;
        width: 100%;
    }

    .faq-section.faq_bg {
        background-color: var(--cream);
        margin-top: 40px;
        padding-top: 30px !important;
    }

    .main-title {
        font-size: 28px;
        line-height: 35px;
    }

    .categories-card-header h3 {
        font-size: 30px;
        line-height: 40px;
    }

    .categories-details-item .subcat-card ul li {
        width: 100%;
        margin-bottom: 0px;
    }

    .service_list_section .app-btns svg {
        width: 120px;
        height: 35px;
    }

    .checkout_section {
        padding: 30px 20px;
    }

    .payment-modern-ui .paymentMethod .pay_desc button {
        width: 100%;
        justify-content: center;
        font-size: 17px;
    }

    .modal .modal-body .slot_lists .slot-wrapper .date-row {
        gap: 10px;
    }

    .modal .modal-body .slot_lists .slot-wrapper .date-btn {
        font-size: 14px;
        padding: 10px 20px;
    }

    .modal .modal-body .slot_lists .slot-wrapper .time-btn {
        width: 47%;
        margin-bottom: 0px;
    }

    .modal .modal-body .slot_lists .slot-wrapper .time-row {
        margin-bottom: 10px;
    }

    .address_card .add-address {
        padding: 10px;
    }

    .address_card .add-address {
        padding: 10px;
        margin-bottom: 0 !important;
    }

    .address_card .add-address h4 {
        font-size: 17px;
    }

    .address_card .add-address a {
        font-size: 14px;
    }
    .track-location-card .chat-header {
        gap: 4px;
    }
    .track-location-card .card-header span {
        font-weight: 400;
        padding: 5px;
        border-radius: 3px;
    }
}


@media (max-width: 320px) {
    .logo img {
        max-width: 90px;
    }

    .account .user_menu {
        padding: 10px 10px !important;
    }

    .mobile-nav-header a img {
        max-width: 100px;
        height: auto;
    }
}