/* sonali 19-02-2026 */
.dashboard_login {
    padding: 84px 0;
    position: relative;
}

.dashboard_login_box {
    background: #F6F6F6;
    border-radius: 22px;
    padding: 50px 50px 90px;
    text-align: center;
}

.dashboard_login_box h1 {
    font-family: var(--fontFace);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.5;
    margin-top: 15px;
    margin-bottom: 45px;
    color: #252525;
}

.dashboard_form .input_box {
    text-align: left;
    margin-bottom: 30px;
}

.dashboard_form {
    font-family: var(--fontFace);
}

.dashboard_form .input_box label {
    color: #000000;
    font-weight: 600;
    font-size: 20px;
    line-height: 35px;
}

.dashboard_form .input_box input {
    border: none;
    background: transparent;
    border-radius: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: #919191;
    padding-left: 0;
    border-bottom: 1px solid #C3C3C3;
}

.dashboard_form .input_box input:focus,
.dashboard_form .input_box input:focus-visible {
    box-shadow: none;
}

.forgot_pass {
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.forgot_pass a {
    color: #0055B8;
    font-size: 19px;
    line-height: 1;
    font-weight: 800;
}

.dashboard_form .input_box .custom_btn {
    padding: 12.25px 68px;
}

.dashboard_form .input_box .custom_btn.btn-red {
    color: #fff;
}

.dashboard_form .input_box .custom_btn:hover {
    border-color: #BD2329;
    color: #BD2329;
}

.google_login {
    text-align: left;
    margin-top: 20px;
}

.no_account {
    color: #000000;
    font-family: var(--fontPoppins);
}

.no_account a {
    color: #0055B8;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    margin-left: 3px;
}

.continue_log {
    color: #292929;
    font-family: var(--fontPoppins);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    margin-top: 35px;
}

.continue_log span {
    color: #000000;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    margin-right: 25px;
}

.continue_log img {
    margin-right: 10px;
}

/* register Modal */
#registerModal .modal-content,
#cntractorregisterModal .modal-content {
    border: 1px solid #D9D9D9;
    border-radius: 13px;
    background: #FFFFFF;
    text-align: center;
}

#registerModal .modal-content .modal-body,
#cntractorregisterModal .modal-content .modal-body {
    padding: 50px 70px 65px;
}

#registerModal .modal-content .modal-body .custom_btn,
#cntractorregisterModal .modal-content .modal-body .custom_btn {
    max-width: 200px;
    border: 1px solid #BD2329;
    min-width: 200px;
    padding: 15px 45px;
}

#registerModal .modal-content .modal-body .custom_btn.btn-red:hover,
#cntractorregisterModal .modal-content .modal-body .custom_btn:hover {
    color: #BD2329;
}

#registerModal .modal-content .modal-body .custom_btn.btn2,
#cntractorregisterModal .modal-content .modal-body .custom_btn.btn2 {
    color: #BD2329;
}

#registerModal .modal-content .modal-body .custom_btn.btn2:hover,
#cntractorregisterModal .modal-content .modal-body .custom_btn.btn2:hover {
    color: #fff;
}

#registerModal .modal-content .modal-body .modal_btn_wrap,
#cntractorregisterModal .modal-content .modal-body .modal_btn_wrap {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 32px;
}

#registerModal .modal-content .modal-body h2,
#cntractorregisterModal .modal-content .modal-body h2 {
    color: #000000;
    font-size: 26px;
    line-height: 35px;
    font-weight: 800;
}

@media (min-width: 991.99px) {
    #registerModal .modal-dialog {
        max-width: 570px;
        margin: 1.75rem auto;
    }
}

/* otp verify */

.otp_verify input[type="number"] {
    -moz-appearance: textfield;
}

.otp_verify input[type="number"]::-webkit-inner-spin-button,
.otp_verify input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp_verify input {
    outline: none;
    background-color: transparent;
    border: 1px solid rgb(194, 194, 194);
    border-radius: 50px;
    height: 36px;
    width: 46px;
    padding: 0;
    font-size: 12px;
    margin-bottom: 15px;
    text-align: center;
}

.otp_veryfy_title {
    margin-bottom: 37px;
}

.otp_veryfy_title h1 {
    margin-bottom: 5px;
}

.otp_veryfy_title p {
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #626262;
    font-size: 21px;
    line-height: 25px;
    font-weight: 400;
}

.otp_veryfy_title p span {
    font-weight: 700;
}

.custom_select {
    position: relative;
}

.custom_select select {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 8px 30px 8px 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 14px;
    color: #333;
    outline: none;
}

/* Custom arrow */
.custom_select::after {
    content: "\F282";
    font-family: "bootstrap-icons";
    position: absolute;
    right: 0;
    bottom: 10px;
    font-size: 16px;
    pointer-events: none;
    color: #333;
}

.custom_select label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: #000;
}


/* dashboard css start from here */

.dashboard-wrapper {
    min-height: 100vh;

    .login_box_logo {
        margin-bottom: 21px;
        margin-top: 15px;
    }

    .col-lg-9.col-xl-10.main-content.p-4 {
        padding-right: 72px !important;
    }
}

.sidebar {
    min-height: 100vh;
    border-radius: 20px 0 0 20px;
}

.bg-one {
    background-color: #F5D78B;
}

.bg-two {
    background-color: #A3A7FC;
}

.bg-three {
    background-color: #C7CFBE;
}

.bg-four {
    background-color: #E8CDFF;
}

.dashboard-nav .nav-link {
    color: #5A5A60;
    font-size: 17px;
    line-height: 1;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 30px;
    transition: 0.3s;
    width: 100%;
    max-width: 250px;
    height: 50px;
    display: flex;
    align-items: center;

    .ico {
        width: 16px;
        flex: 0 0 16px;
        font-size: 10px;
        height: 16px;
        border: 1px solid;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto;
    }

}

.dashboard-nav .nav-link img {
    margin-right: 22px;
}

.dashboard-nav .nav-link:hover {
    background: #e3e8ff;
}

.dashboard-nav .nav-link.active {
    background: linear-gradient(271.9deg, #2B63E7 27%, #765CB7 83.94%);
    color: #fff;
}

.stat-card {
    padding: 20px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-card i {
    font-size: 30px;
    opacity: 0.5;
}

.empty_state {
    border-radius: 20px;
}

.side_img {
    height: 55px;
    width: 55px;
    border-radius: 9px;
    padding: 10px;
}

.bg-one .side_img {
    background-color: #CCAB5A;
}

.bg-two .side_img {
    background-color: #7075E6;
}

.bg-three .side_img {
    background-color: #95A97E;
}

.bg-four .side_img {
    background-color: #B794D7;
}

.heading-wrap {
    h3 {
        font-weight: 700;
        font-size: 30px;
        line-height: 26px;
        color: #000000;
        margin-bottom: 14px;
    }

    p {
        color: #626262;
        width: 100%;
        max-width: 645px;
        margin-inline: auto;
        font-size: 17px;
        line-height: 25px;
        font-weight: 400;
        margin-bottom: 30px;
        margin-top: 5px;
    }
}

.empty_state {
    margin-top: 55px;

    img {
        margin-bottom: 55px;
    }

    h3 {
        font-weight: 400;
        font-size: 30px;
        line-height: 51px;

        span {
            font-weight: 700;
        }
    }

    p {
        color: #626262;
        width: 100%;
        max-width: 645px;
        margin-inline: auto;
        font-size: 17px;
        line-height: 25px;
        font-weight: 400;
        margin-bottom: 30px;
        margin-top: 5px;
    }

    .custom_btn {
        border: 1px solid #BD2329;
        color: #BD2329;
    }

    .custom_btn:hover {
        color: #fff;
    }
}

.bottom_portion {
    background-color: #F6F6F6;
    border-radius: 22px;
    padding-top: 35px;
    padding-inline: 25px;
    padding-bottom: 30px;
    min-height: 100vh;
}

.create_project .empty_state {
    margin-top: 0;
    padding-top: 30px !important;
    padding-inline: 25px !important;

    p {
        font-size: 21px;
    }

    label {
        font-size: 16px;
    }

    img {
        margin-bottom: unset;
    }

    .btn_wrap {
        margin-top: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;

        .btn-red {
            color: #fff;

            &:hover {
                color: #BD2329;
            }
        }
    }
}

.date-section {
    background: #f8f9fa;
    border-radius: 12px;
}

.custom-date .form-control {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    padding-right: 30px;
    background: transparent;
}

.custom-date .form-control:focus {
    box-shadow: none;
    border-bottom: 2px solid #0d6efd;
}



.room_card_box {
    margin-top: 25px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
}

.selecte_dropBox h6 {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    line-height: 9px;
}

.selecte_dropBox .custom_btn {
    width: 225px;
    height: 40px;
    padding: 0;
    font-size: 15px;

    i {
        margin-right: 11px;
    }
}

.room-card {
    position: relative;
    border: 1px solid #CAB9B9;
    border-radius: 14px;
    padding: 25px 10px;
    text-align: center;
    background: #EBEAE8;
    cursor: pointer;
    transition: .2s;
    min-height: 191px;

    p {
        color: #000000;
        font-size: 16px;
        font-weight: 400;
        line-height: 9px;
    }
}

.room-card img {
    /* height: 60px; */
    width: 100%;
    max-width: 135px;
    margin-bottom: 10px;
}

.room-card p {
    margin: 0;
    font-weight: 500;
}

.room-check {
    position: absolute;
    top: 10px;
    right: 10px;
}

.room-card.selected {
    border: 2px solid #dc3545;
}


/* UPLOAD BOX */
.upload-box {
    background: white;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid #ddd;
}

.upload-area {
    border: 2px dashed #ddd;
    border-radius: 12px;
    padding: 20px;
}

.upload-placeholder {
    text-align: center;
    color: #888;
    margin-bottom: 15px;
}

/* PREVIEW */
.preview-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.preview {
    position: relative;
}

.preview img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
}

.preview .remove {
    position: absolute;
    top: -6px;
    right: -6px;
    background: black;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.upload-wrapper {
    background: #EBEAE8;
    border-radius: 14px;
    padding: 23px;
    border: 1px solid #CAB9B9;
}

/* DROP AREA */
.upload-drop {
    display: block;
    border: 2px dashed #e2cfcf;
    border-radius: 14px;
    padding: 35px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}

.upload-drop:hover {
    background: #fafafa;
}

.upload-drop.dragover {
    background: #fff5f5;
    border-color: #dc3545;
}

/* TEXT */
.upload-icon {
    font-size: 24px;
    color: #0d6efd;
    margin-bottom: 6px;
}

.upload-title {
    font-weight: 500;
    font-size: 16px;
}

.upload-sub {
    color: #666;
}

.upload-sub span {
    color: #0d6efd;
    text-decoration: underline;
}

/* PREVIEW */
.preview-container {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.preview-item {
    position: relative;
}

.preview-item img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 12px;
}

.remove-img {
    position: absolute;
    top: -6px;
    right: -6px;
    background: black;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.dashboard_project_list {
    .list_title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        h5 {
            color: #000000;
            font-size: 20px;
            line-height: 26px;
            font-weight: 700;
        }

        .custom_btn.btn-red {
            width: 200px;
            line-height: 45px;
            text-align: center;
            height: 45px;
            padding: 0;

            &:hover {
                border: 1px solid #BD2329;
                color: #BD2329;
            }
        }
    }

    .project_listing {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 50px;
        margin-block: 35px;

        li {
            background-color: #FFFFFF;
            border: 1px solid #D9D9D9;
            padding: 23px 79px 26px 29px;
            border-radius: 13px;
        }

        h4 {
            font-size: 20px;
            line-height: 35px;
            font-weight: 800;
            color: #000000;
            margin-bottom: 8px;
        }

        h5 {
            margin-bottom: 22px;
        }

        h5,
        h6 {
            font-size: 18px;
            line-height: 9px;
            font-weight: 700;
            color: #000000;

        }

        h6 {
            margin-bottom: 15px;
        }

        p {
            color: #919191;
            font-size: 16px;
            font-weight: 500;
            line-height: 19px;
            margin-bottom: 22px;
        }

        .custom_btn {
            border: 0.71px solid #BD2329;
            color: #BD2329;
            font-size: 13px;

            &:hover {
                color: #fff;
            }
        }
    }
}

.table-card {
    background: #FFFFFF;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #D9D9D9;
    margin-block: 35px;
}


.custom-table {
    width: 100%;
    border-collapse: collapse;
}

.custom-table thead th {
    font-weight: 800;
    color: #000000;
    font-size: 18px;
    line-height: 1;
    padding: 12px 10px;
    text-align: left;
}

.custom-table tbody td {
    padding: 18px 10px;
    color: #717171;
    font-size: 15px;
    line-height: 19px;
    font-weight: 500;
}


.custom-table tbody tr:not(:last-child) td {
    border-bottom: 1px dashed #cfcfcf;
}


.eye {
    cursor: pointer;
    font-size: 16px;
}

.dashboard_project_list {
    .nav-tabs {
        border-bottom: 1px solid #BFBFBF;

        .nav-item:focus-visible {
            outline: none;
        }

        .nav-link {
            font-weight: 700;
            font-size: 20px;
            line-height: 26px;
            color: #000000;

            &:hover {
                border: none;
            }

            &:focus {
                border: none;
            }

            &.active {
                border: none;
                background: transparent;
                border-bottom: 4px solid #2B63E7;
            }
        }
    }

    #myTabContent {
        .custom_btn {
            width: 115px;
            padding: 0;
            height: 37px;
            line-height: 37px;
            text-align: center;
        }

        .btn_wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                height: 33px;
                width: 33px;
                display: flex;
                flex: 0 0 33px;
                border-radius: 50%;
                justify-content: center;
                align-items: center;
                background-color: #BD2329;
            }
        }

        #profile-tab-pane {
            .btn_wrap {
                justify-content: end;
                gap: 11px;

                span {
                    &:first-child {
                        background-color: #FBA004;
                    }
                }
            }
        }
    }
}

.subscription_paln_page .empty_state p {
    max-width: 100%;
}

.plan_box {
    padding: 19px 12px 24px;
    border-radius: 18px;
    /* height: 100%; */

    .title {
        font-size: 20px;
        line-height: 29px;
        font-weight: 400;
        text-align: center;
        color: #FFFFFF;
    }

    .plan_box_inner {
        padding: 30px;
        background: #FFFFFF;
        border-radius: 18px;
        height: 100%;
        min-height: 455px;
        margin-top: 15px;

        h2 {
            font-size: 48px;
            line-height: 56px;
            font-weight: 700;
            text-align: center;
        }

        .plan_sub {
            font-size: 14px;
            line-height: 19px;
            font-weight: 400;
            text-align: center;
            color: #5C5C61;
        }

        ul {
            li {
                font-size: 18px;
                line-height: 1;
                font-weight: 800;
                letter-spacing: 0.51px;
                display: flex;
                gap: 14px;
                align-items: center;
                margin-bottom: 18px;
                text-align: left;

                &:last-child {
                    margin-bottom: 0;
                }

                .ico {
                    height: 20px;
                    width: 20px;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: 0 0 20px;
                    background: #FF7077;
                }
            }
        }

        .btn_pan {
            margin-top: 40px;
            margin-bottom: 20px;
        }
    }
}

.bg-green {
    background: #2ECC6A;
}

.bg_blue,
.plan_box.bg_blue {
    background: #2B63E7;
}

.bg_yellow,
.plan_box.bg_yellow {
    background: #FBA004;
}

.plan_box_inner ul li .ico.bg-green {
    background: #2ECC6A;
}

.btn_pan {
    border: 0.93px solid #BD2329;
    color: #BD2329;
    padding: 12px 60px;
    border-radius: 30px;

    &:hover {
        background-color: #BD2329;
        color: #FFF;
    }
}


.bottom_portion.contractor_page {
    .project_listing {
        li {
            padding-right: 30px;

            .ico_para {
                display: flex;
                gap: 13px;

            }

            .btn_wrap {
                gap: 14px;
                display: flex;

                .custom_btn {
                    padding: 9px 37px;
                }
            }
        }
    }
}

.filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    max-width: 930px;
    width: 100%;
    margin-inline: auto;

    .dropdown-menu {
        display: none;
    }

    .dropdown-menu.show {
        display: block;
    }

    .left {
        width: 100%;
        max-width: 686px;
        border: 1px solid #C0C0C0;
        background: #fff;
        padding: 19px 35px 15px;
        border-radius: 60px;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
        gap: 105px;

        .divider {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: 31px;
            width: 2px;
            background: #D0D0D0;
            z-index: -1;
            content: '';
        }

        .filter-item {
            width: 50%;
            position: relative;

            .select-box {
                font-size: 13px;
                line-height: 18px;
                font-weight: 400;
                cursor: pointer;
                padding-right: 10px;
                color: #6C6C6C;

                .drop_icon {
                    position: absolute;
                    top: 50%;
                    left: 60%;
                    transform: translate(-50%, -40%);
                    color: #292929;
                    font-size: 18px;
                    font-weight: bolder;
                }
            }

            label {
                color: #000000;
                font-size: 16px;
                font-weight: 700;
                line-height: 9px;
                margin-bottom: 10px;
            }
        }
    }

    .search-btn {
        background: #BD2329;
        border: 1px solid #BD2329;
        color: white;
        padding: 26px 31.5px 26px;
        border-radius: 75px;
        font-size: 15px;
        line-height: 1;
        font-weight: 500;
        cursor: pointer;

        &:hover {
            background: #fff;
            color: #BD2329;
        }
    }
}

.search_contractor {
    .filter-bar {
        & .left {
            & .filter-item {
                & .select-box {
                    .drop_icon {
                        left: 80%;
                        transform: translate(-20%, -50%);
                    }
                }
            }
        }
    }
}

/* MULTI SELECT */
.multi-select {
    position: relative;
}

.multi-select .dropdown-menu {
    position: absolute;
    top: 55px;
    left: 0;
    width: 210px;
    background: white;
    border-radius: 14px;
    padding: 10px 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    display: none;
    z-index: 20;
    border: 1px solid #e5e5e5;
}

.multi-select.open .dropdown-menu {
    display: block;
}

/* OPTION ROW */
.multi-select .option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
}

.multi-select .option:hover {
    background: #f6f6f6;
}

/* CHECKBOX STYLE */
.multi-select input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #bcbcbc;
    cursor: pointer;
}

.select {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.arrow {
    margin-left: 6px;
}

.divider {
    width: 1px;
    height: 40px;
    background: #e3e3e3;
}


.actions {
    display: flex;
    gap: 10px;
}

.btn-outline {
    border: 1px solid #d32f2f;
    color: #d32f2f;
    background: white;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
}


.dropdown {
    position: relative;
}

.select-box {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding-right: 10px;
}

.dropdown-menu {
    position: absolute;
    top: 55px;
    left: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    min-width: 180px;
    display: none;
    z-index: 10;
}

.dropdown-menu.show {
    display: block;
}

.option {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
}

.option:hover {
    background: #f4f4f4;
}

.zip-menu {
    padding: 14px 16px;
    border-radius: 14px;
    width: 220px;
}

.zip-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

.renovation-select label {
    font-size: 20px;
    margin-bottom: 12px;
}

.renovation-btn {
    height: 54px;
    border-radius: 0;
    border: none;
    padding-left: 0;
    border-bottom: 1px solid #C3C3C3;
    background: white;
    margin-top: 0 !important;
}

.placeholder-text {
    color: #9c9c9c;
}

.renovation-menu {
    margin-top: 10px;
    border-radius: 16px;
    padding: 18px 0;
    border: 1px solid #cfcfcf;
    box-shadow: none;
}

.renovation-menu .dropdown-item {
    padding: 14px 20px;
    font-size: 16px;
    color: #6c6c6c;
}

.renovation-menu .dropdown-item:hover {
    background: #f5f5f5;
}

.dropdown-toggle.renovation-btn::after {
    display: none;
}

.profile_portfolio {
    h2 {
        color: #000000;
        font-size: 30px;
        line-height: 26px;
        font-weight: 700;
        margin-block: 50px;
    }

    .btn_wrap {
        margin-top: 60px !important;

        .custom_btn {
            min-width: 197px;
            height: 52px;
            line-height: 1.7;
            border-radius: 40px;
            font-size: 15px;

        }
    }
}

#searchInquiryModal,
#saveInquiryModal {
    .modal-content {
        border-radius: 13px;
    }

    .modal-body {
        padding: 45px 70px 60px;
    }

    #searchInquiryModalLabel,
    #saveInquiryModalLabel {
        text-align: center;
        font-size: 26px;
        line-height: 35px;
        font-weight: 800;
    }

    .dashboard_form {
        margin-top: 35px;

        label {
            font-size: 18px;
            line-height: 29px;
            font-weight: 700;
        }

        textarea {
            min-height: 150px;
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #C3C3C3;
        }

        .renovation-select {
            label {
                width: 100%;
                margin-bottom: 0;
            }
        }

        button {
            margin-top: 20px;
        }
    }
}

#registrationModal {
    .modal-content {
        border-radius: 13px;
    }

    .modal-body {
        padding: 45px 46px 60px;
    }

    #registrationModalLabel {
        text-align: center;
        font-size: 26px;
        line-height: 35px;
        font-weight: 800;
        margin-top: 40px;
    }

    .modal_btn_wrap {
        text-align: center;
        margin-top: 55px;

        .custom_btn {
            border: 1px solid #BD2329;
            color: #fff;

            &:hover {
                color: #BD2329;
            }
        }
    }

    .check_icon {
        text-align: center;
    }
}

#selectModal {
    .modal-content {
        border-radius: 13px;
    }

    .modal-body {
        padding: 45px 70px 60px;
    }

    #selectModalLabel {
        text-align: center;
        font-size: 26px;
        line-height: 35px;
        font-weight: 800;
    }

    .dashboard_form {
        margin-top: 35px;

        label {
            font-size: 18px;
            line-height: 29px;
            font-weight: 700;
        }

        textarea {
            min-height: 150px;
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #C3C3C3;
        }

        .renovation-select {
            label {
                width: 100%;
                margin-bottom: 0;
            }
        }

        button {
            margin-top: 20px;
        }
    }
}

#receiveInquiryModal {
    .modal-body {
        padding: 45px 70px 60px;
    }

    #receiveInquiryModalLabel {
        text-align: center;
        font-size: 26px;
        line-height: 35px;
        font-weight: 800;
        margin-bottom: 35px;
    }

    .sent_inquiry_box {
        p {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

}

#homedesignModal {
    .modal-body {
        padding: 45px 70px 60px;
    }

    #homedesignModalLabel {
        text-align: center;
        font-size: 26px;
        line-height: 35px;
        font-weight: 800;
        margin-bottom: 35px;
    }

    .sent_inquiry_box {
        text-align: center;

        p {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .custom_btn.btn-red {
            border: 1px solid #BD2329;

            &:hover {
                color: #BD2329;
            }
        }
    }

}

#addspaceModal {
    .modal-body {
        padding: 45px 70px 60px;

        #addspaceModalLabel {
            text-align: center;
            font-size: 26px;
            line-height: 35px;
            font-weight: 800;
            margin-bottom: 35px;
        }
    }
}

#sentInquiryModal {
    .modal-body {
        padding: 45px 70px 60px;
    }

    #sentInquiryModalLabel {
        text-align: center;
        font-size: 26px;
        line-height: 35px;
        font-weight: 800;
        margin-bottom: 35px;
    }

    .sent_inquiry_box {
        display: flex;
        flex-direction: column;
        gap: 30px;

        div {


            &:last-child {
                p {
                    margin-bottom: 20px;

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }

            h4 {
                font-size: 18px;
                line-height: 29px;
            }

            p {
                font-size: 17px;
                line-height: 20px;
                color: #919191;
            }
        }


    }
}

.gallery_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 17px 24px;

    li {
        width: 153px;
        height: 125px;
        border-radius: 7px;

        img {
            width: 100%;
            height: 100%;
            border-radius: 7px;
        }
    }
}

.create_project_gallery {
    h6 {
        font-size: 18px;
        line-height: 9px;
        font-weight: 700;
        color: #000000;
        margin-bottom: 35px;
    }

    #additional-notes {
        background-color: transparent;
        color: #919191;
        font-size: 16px;
        line-height: 23px;
        font-weight: 500;
        border: none;
        border-bottom: 1px solid #C3C3C3;
        min-height: 120px;
        resize: none;
        border-radius: 0;
    }

    .basic_details_box {
        background: #EBEAE8;
        border: 1px solid #CAB9B9;
        border-radius: 14px;
        padding: 30px;

        ul {
            display: flex;
            flex-wrap: wrap;
            gap: 34px 0px;

            li {
                width: 50%;

                h6 {
                    margin-bottom: 14px;
                }

                p {
                    color: #919191;
                    font-size: 16px;
                    line-height: 19px;
                    font-weight: 500;
                }
            }
        }
    }

    .btn_wrap {
        margin-top: 40px;

        .custom_btn {
            border: 1px solid #BD2329;
            color: #BD2329;

            &:hover {
                color: #fff;
                background: #BD2329;
            }

            &.btn-red {
                color: #FFF;

                &:hover {
                    background: transparent;
                    color: #BD2329;
                }
            }
        }
    }
}

.dashboard_form.contract_user_profile {
    input {
        &:read-only {
            border: none;
        }
    }

}

.user_profile_portfolio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 20px;

    li {
        width: 300px;
        height: 235px;

        img {
            width: 100%;
            height: 100%;
            border-radius: 7px;
        }
    }
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.outline_btn {
    border: 1px solid #BD2329;
    color: #BD2329;
    background: #fff;
}

.addition_text p {
    color: #919191;
    font-size: 16px;
    line-height: 23px;
    font-weight: 500;
}

.form-step {
    .heading-wrap {
        margin-bottom: 60px;

        .custom_btn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}






.bottom_portion.chat_dashboard {
    padding-inline: 39px;

    .empty_state {
        padding: 0 !important;


        .chat_sidebar {
            padding-right: 15px;

            .input-group {
                position: relative;
                z-index: 1;
                padding-block: 24px;

                i {
                    position: absolute;
                    z-index: 1;
                    content: '';
                    left: 22px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #929292;
                }

                input {
                    border: 1px solid #B1B1B1;
                    padding: 11.5px 10px 11.5px 48px;
                    border-radius: 30px !important;
                    background: transparent;
                    color: #929292;
                    font-size: 14px;
                }
            }

            .edit_search {
                height: 42px;
                width: 42px;
                background: #2B63E7;
                border-radius: 50% !important;
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 0 0 42px;
                padding: 0;
            }
        }

        .chat-user {
            background-image: repeating-linear-gradient(to right,
                    #D3D3D3 0 8px,
                    transparent 8px 16px);
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            padding: 24px 0px;

            &:last-child {
                background-image: none;
            }

            div {
                text-align: left;
            }

            img {
                height: 55px;
                width: 55px;
                border-radius: 50%;
            }

            h6 {
                color: #000000;
                font-weight: 600;
                font-size: 15px;
                line-height: 1;
                /* margin-bottom: 7px; */
            }

            small {
                color: #6F6E6E;
                font-weight: 400;
                font-size: 13px;
                line-height: 1;
            }

            .right_side_timing {
                display: flex;
                gap: 10px;
                justify-content: end;
                flex-direction: column;
                text-align: end;
                align-items: end;

                .chat-time {
                    color: #6F6E6E;
                    font-size: 11px;
                    font-weight: 400;
                    line-height: 0.8;
                }

                .dot {
                    width: 12px;
                    height: 12px;
                    background: #FD4F38;
                    border-radius: 50%;
                }
            }
        }

        .chat-content {
            padding: 35px 24px 27px;
            border-radius: 17px;
            overflow: hidden;
            border: 0.93px solid #BBB6B7;

            .chat-header {
                i {
                    color: #292929;
                    font-size: 18px;
                }

                img {
                    height: 57px;
                    width: 57px;
                    border-radius: 50%;
                }

                div {
                    text-align: left;

                    h6 {
                        color: #2D2926;
                        font-size: 17px;
                        line-height: 1.7;
                        font-weight: 600;
                    }

                    small {
                        color: #6F6E6E;
                        font-size: 13px;
                        font-weight: 400;
                        line-height: 0.8;
                    }
                }
            }

            .chat-body {
                overflow-y: auto;
                margin-top: 45px;

                .message {
                    .user_img {
                        height: 45px;
                        width: 45px;
                        border-radius: 50%;
                    }

                    .user_info {
                        display: flex;
                        gap: 10px;
                        align-items: start;
                        margin-bottom: 18px;

                        h6 {
                            color: #000000;
                            font-size: 14px;
                            line-height: 0.8;
                            font-weight: 600;
                        }

                        small {
                            color: #808080;
                            font-size: 13px;
                            line-height: 0.8;
                            font-weight: 400;
                        }
                    }

                    .message_content {
                        text-align: left;

                        .media-preview {
                            margin-top: 23px;
                            display: flex;
                            flex-wrap: wrap;
                            gap: 11px;

                            img {
                                width: 100%;
                                height: 100%;
                                border-radius: 9px;
                            }

                            .chat-img {
                                width: 170px;
                                height: 170px;
                                border-radius: 9px;
                            }

                            .chat_video {
                                position: relative;
                                z-index: 1;
                                width: 170px;
                                height: 170px;
                                border-radius: 9px;

                                span {
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    background-color: #161616;
                                    opacity: 0.6;
                                    height: 100%;
                                    width: 100%;
                                    border-radius: 9px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;

                                    &::after {
                                        position: absolute;
                                        background: #FFFFFF78;
                                        content: '';
                                        z-index: 1;
                                        left: 50%;
                                        top: 50%;
                                        transform: translate(-50%, -50%);
                                        height: 40px;
                                        width: 40px;
                                        border-radius: 50%;
                                    }

                                    i {
                                        position: relative;
                                        z-index: 7;
                                        color: #ffffff;
                                    }
                                }
                            }
                        }
                    }

                    &.left {
                        .bubble {
                            background: #E3E5F7;
                            border-radius: 0 15px 15px;
                            padding: 15px 30px 13px 15px;
                            color: #000000;
                            font-size: 14px;
                            line-height: 1.15;
                            font-weight: 400;
                            margin-bottom: 10px;

                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }

                    &.right {
                        flex-direction: row-reverse;

                        .user_info {
                            justify-content: end;
                        }

                        .bubble {
                            background: #FBA004;
                            border-radius: 0 15px 15px;
                            padding: 15px 30px 13px 15px;
                            color: #000000;
                            font-size: 14px;
                            line-height: 1.15;
                            font-weight: 400;
                            margin-bottom: 10px;

                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }
                }


            }
        }

        .chat-input {
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;

            input {
                border-radius: 50px;
                background: #FFFFFF;
                border: 0.93px solid #B1B1B1;
                height: 53px;
                font-size: 15px;
                line-height: 0.8;
                font-weight: 400;
                color: #929292;
                padding-left: 24px;
                padding-right: 70px;
            }

            .btn_groups {
                position: absolute;
                right: 18px;

                button {
                    border: none;
                    background: none;
                }
            }
        }


    }
}


.search-input {
    border-radius: 25px;
    background: #f1f3f6;
    border: none;
}

/* Chat user */
.chat-user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
}


.message {
    display: flex;
    margin-bottom: 20px;
    gap: 10px;
}

.mb-72 {
    margin-bottom: 72px;
}

.all-content-wrapper.create_project_gallery {
    .dashboard_project_list {
        margin-top: 50px;
    }
}

.user_profile {
    position: relative;
    cursor: pointer;
}

.profile-tooltip {
    position: absolute;
    bottom: -58px;
    left: 21%;
    transform: translateX(-79%);
    background: #fff;
    padding: 11px 30px;
    border-radius: 9px;
    font-size: 17px;
    text-decoration: none;
    color: #505050;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    white-space: nowrap;
    font-weight: 700;
    line-height: 24px;
    border: 1px solid #D9D9D9;
}

.profile-tooltip.show {
    display: block;
}

.portfolio-upload {
    position: relative;
    padding: 30px 28px;
    border-radius: 5px;
    margin-top: 30px;
    background: transparent;
}

.portfolio-upload::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    pointer-events: none;
    background: url('../images/portfolio-border.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 295px;
}

#previewContainer {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 15px;
}

.upload-box {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 30px 10px;
    background: white;
    text-align: center;
    height: 140px;
    width: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
        width: 100%;
        height: 100%;
    }
}

.upload-box img {
    width: 40px;
    opacity: .6;
}

.upload-box p {
    margin-top: 10px;
    font-size: 14px;
    color: #777;
}

.upload-btn {
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 10px 25px;
    border-radius: 30px;
}

.upload-btn:hover {
    background: #dc3545;
    color: white;
}

#uploadImgModal {
    .modal-dialog {
        max-width: 561px;
    }

    .modal-body {
        padding: 57px 49px 65px;
        border-radius: 16px;

        .modal_btn_wrap {
            text-align: center;
        }

        #added_img {
            width: 463px;
            height: 328px;
            border-radius: 7px;
            margin-bottom: 45px;
            border: 0.81px solid #C9C9C9;

            img {
                width: 100%;
                height: 100%;
                border-radius: 7px;
            }
        }

        .upload-btn {
            color: #fff;
            border: 1px solid #BD2329;
            padding-inline: 48.75px;

            &:hover {
                color: #BD2329;
            }
        }
    }
}

#contractorRegisterModal {
    .modal-dialog {
        max-width: 561px;
    }

    .modal-body {
        padding: 57px 49px 65px;
        border-radius: 16px;

        .modal_btn_wrap {
            text-align: center;
        }

        #added_img {
            width: 463px;
            height: 328px;
            border-radius: 7px;
            margin-bottom: 45px;
            border: 0.81px solid #C9C9C9;

            img {
                width: 100%;
                height: 100%;
                border-radius: 7px;
            }
        }

        .upload-btn {
            color: #fff;
            border: 1px solid #BD2329;
            padding-inline: 48.75px;

            &:hover {
                color: #BD2329;
            }
        }
    }
}

@media screen and (max-width: 1450px) {
    .dashboard_project_list {
        .project_listing {
            gap: 30px;

            li {
                padding: 25px;
            }
        }
    }

    .gallery_wrap {
        margin-bottom: 50px;

        li {
            width: 115px;
            height: 105px;
            border-radius: 7px;
        }
    }

    .user_profile_portfolio {
        li {
            width: 235px;
            height: 200px;
        }
    }

    .dashboard-nav .nav-link {
        font-size: 15px;
        margin-bottom: 15px;

        img {
            margin-right: 5px;
            width: 100%;
            max-width: 25px;
            height: auto;
        }
    }

    .dashboard_project_list {
        & .project_listing {
            h5 {
                font-size: 16px;
                line-height: 1;
                margin-bottom: 10px;
            }

            h6 {
                font-size: 14px;
            }
        }
    }

    .room-card {
        img {
            max-width: 115px;
            margin-bottom: 25px !important;
        }

        p {
            font-size: 18px !important;
        }
    }

    .custom_btn {
        padding: 10px 55px;
    }

    .create_project_gallery {
        & .basic_details_box {
            & ul {
                & li {
                    p {
                        color: #919191;
                        font-size: 14px;
                    }
                }
            }
        }
    }

    #selectModal {
        .modal-body {
            padding: 45px 45px 60px;
        }
    }

    #searchInquiryModal {
        .modal-body {
            padding: 45px 45px 60px;
        }
    }

    .bottom_portion.contractor_page {
        & .project_listing {
            & li {
                & .btn_wrap {
                    .custom_btn {
                        padding: 9px 25px;
                    }
                }
            }
        }
    }

    .renovation-menu .dropdown-item {
        padding: 10px 15px;
        font-size: 15px;
        color: #6c6c6c;
    }

    .upload-box {
        height: 120px;
        width: 140px;
    }
}

@media screen and (max-width: 1200px) {
    .create_project .empty_state {
        p {
            font-size: 16px;
        }
    }

    .dashboard-wrapper {
        .col-lg-9.col-xl-10.main-content.p-4 {
            padding-right: 1.5rem !important;
        }

    }

    .filter-bar {
        flex-direction: column;

        .left {
            padding: 15px 25px 15px;
            gap: 80px;
        }
    }

    .plan_box {
        .plan_box_inner {
            padding: 30px 20px;
            min-height: 430px;

            .btn_pan {
                margin-top: 30px;
                margin-bottom: 5px;
            }

            h2 {
                font-size: 36px;
            }

            ul {
                li {
                    font-size: 14px;
                }
            }
        }
    }

    .dashboard_project_list .project_listing {
        gap: 15px;

        h5 {
            font-size: 15px;
        }

        h4 {
            font-size: 16px;
        }

        p {
            font-size: 13px;
        }

        li {
            padding: 20px;

            .btn_wrap {
                .custom_btn {
                    width: 110px;
                }

                span {
                    height: 30px;
                    width: 30px;
                    flex: 0 0 30px;
                }
            }

        }
    }

    #step3 {
        .create_project_gallery {
            .heading-wrap {
                h3 {
                    font-weight: 700;
                    font-size: 30px;
                    line-height: 51px;
                }

                p {
                    color: #626262;
                    width: 100%;
                    max-width: 645px;
                    margin-inline: auto;
                    font-size: 17px;
                    line-height: 25px;
                    font-weight: 400;
                    margin-bottom: 30px;
                    margin-top: 5px;
                }

                .custom_btn.back-button.next {
                    padding: 10px 16px;
                }
            }

            .basic_details_box {
                padding: 30px 20px;

                ul {
                    gap: 20px 0px;

                    li {
                        width: 100%;
                    }
                }
            }

            .gallery_wrap {
                li {
                    width: 149px;
                    height: 135px;
                }
            }

            .btn_wrap {
                display: flex;
                gap: 20px;
            }
        }
    }

    #step4 {
        .create_project_gallery {
            .heading-wrap {
                h3 {
                    font-weight: 700;
                    font-size: 30px;
                    line-height: 51px;
                }

                p {
                    color: #626262;
                    width: 100%;
                    max-width: 645px;
                    margin-inline: auto;
                    font-size: 17px;
                    line-height: 25px;
                    font-weight: 400;
                    margin-bottom: 30px;
                    margin-top: 5px;
                }

                .custom_btn.back-button.next {
                    padding: 10px 16px;
                }
            }

            .basic_details_box {
                padding: 30px 20px;

                ul {
                    gap: 20px 0px;

                    li {
                        width: 100%;
                    }
                }
            }

            .gallery_wrap {
                li {
                    width: 149px;
                    height: 135px;
                }
            }
        }
    }

    .contractor_page {
        .project_listing {
            grid-template-columns: auto auto;
            gap: 15px;
        }
    }

    .bottom_portion.chat_dashboard {
        padding-inline: 16px;

        .empty_state {
            .chat_sidebar {
                padding-right: 0;
            }

        }

    }
}

@media screen and (max-width: 991.99px) {
    .mobile_header {
        display: flex;
        align-items: center;
        gap: 22px;
        height: 74px;
        padding-inline: 1.5rem;

        .mobile_user_welcome {
            width: 100%;
            margin-bottom: 0 !important;
        }

        .btn_menu {
            border: none;
            background: transparent;
        }
    }

    .bottom_portion {
        border-radius: 0;
    }

    .dashboard_project_list .project_listing {
        gap: 15px;
    }


    .dashboard-wrapper {
        .col-lg-9.col-xl-10.main-content.p-4 {
            padding: 0 !important;
        }
    }

    .dashboard_project_list .project_listing {
        & li {
            & .btn_wrap {
                .custom_btn {
                    width: 100px;
                }
            }
        }
    }

    .contractor_page {
        .project_listing {
            gap: 20px !important;
            grid-template-columns: auto auto;

            li {
                padding: 20px !important;
            }
        }
    }

    .filter-bar {
        .left {
            gap: 60px;

            .filter-item {
                .select-box {
                    .drop_icon {
                        left: auto;
                        right: 0;
                    }
                }
            }
        }
    }

    #step3 {
        .create_project_gallery {
            .heading-wrap {
                p {
                    max-width: unset;
                    font-size: 16px;
                }
            }
        }

    }

    #step4 {
        .create_project_gallery {
            .heading-wrap {
                p {
                    max-width: unset;
                    font-size: 16px;
                }
            }
        }

    }

    .chat-content-col {
        display: none;
    }

    .chat-content-col.show-chat {
        display: block;
    }

    .chat-list-col.hide-list {
        display: none;
    }

    .chat-back-btn {
        border: none;
        background: none;
        font-size: 18px;
        margin-right: 5px;
    }
}

@media screen and (max-width: 767px) {
    .dashboard_form .input_box .custom_btn {
        padding: 12.25px 55px;
    }


    .bottom_portion .empty_state {
        h3 {
            font-size: 28px;
        }

        p {
            font-size: 16px;
        }
    }

    .bottom_portion.subscription_paln_page {
        padding-inline: 16px !important;

        .empty_state {
            h3 {
                font-size: 24px;
            }
        }
    }

    .table-card {
        padding: 10px;
    }

    .custom-table tbody td {
        padding: 15px 3px;
        font-size: 13px;
    }

    .custom-table thead th {
        font-size: 14px;
        padding: 8px 5px;
    }

    span.eye img {
        width: 100%;
        max-width: 18px;
    }

    .basic_details_box {
        margin-bottom: 35px;
    }

    .create_project_gallery {
        h6 {
            margin-bottom: 15px;
        }
    }

    .dashboard_project_list .project_listing {
        grid-template-columns: auto auto;
    }

    .subscription_paln_page {
        .empty_state {
            padding: 0 !important;
            font-weight: 400;
            font-size: 28px;
            line-height: 1.3;

            .btn_pan {
                margin-top: 30px;
                margin-bottom: 0;
                font-size: 14px;
                padding: 9px 35px;
            }
        }
    }

    .plan_box.bg_blue {
        background: #2B63E7;
        margin-bottom: 25px;
    }

    #registerModal .modal-content .modal-body .modal_btn_wrap {
        flex-direction: column;
        align-items: center;
    }

    #registerModal .modal-dialog,
    #addspaceModal .modal-dialog {
        transform: translate(0, -50%);
        top: 50%;
    }

    #registerModal .modal-content .modal-body .custom_btn {
        max-width: 196px;
        border: 1px solid #BD2329;
        min-width: 196px;
        padding: 12.3px 45px;
    }

    .dashboard_login_box h1 {
        font-size: 25px;
    }

    .logo-img {
        max-width: 146px;
    }

    .dashboard_form .input_box label {
        font-size: 16px;
    }

    .dashboard_form .input_box {
        flex-direction: column-reverse;
    }

    .forgot_pass a {
        font-size: 14px;
        margin-bottom: 30px;
    }

    .no_account a,
    .no_account {
        font-size: 15px;
        text-align: center;
    }

    .continue_log {
        text-align: center;
    }

    .continue_log span {
        display: block;
    }

    .create_project {
        .bottom_portion {
            padding-inline: 0;

            #step1 {
                padding-inline: 35px;

                p {
                    width: 100%;
                    max-width: 60%;
                    margin-inline: auto;
                }
            }

            #step2 {
                p {
                    width: 100%;
                    max-width: 60%;
                    margin-inline: auto;
                }

                .empty_state {
                    padding-inline: 16px !important;

                    .selecte_dropBox {
                        .custom_btn {
                            margin-left: auto;
                            margin-right: 0;
                        }
                    }
                }
            }

        }
    }

    #addspaceModal {
        .modal-body {
            padding: 45px 33px 60px;

            #addspaceModalLabel {
                font-size: 25px;

            }

            .custom_btn.btn-red {
                margin-inline: auto;
            }
        }
    }

    .bottom_portion.chat_dashboard {
        padding-inline: 16px !important;
    }

    .create_project {
        .create_project_gallery {
            padding-inline: 16px;

            .heading-wrap {
                text-align: center !important;

                .custom_btn.back-button.next {
                    position: static;
                    margin-inline: auto;
                    margin-top: 20px;
                }

                .custom_btn.back-button.prev {
                    position: static;
                    margin-inline: auto;
                    margin-top: 20px;
                }
            }

            .gallery_wrap {
                li {
                    width: 29.3% !important;
                    height: 135px;
                }
            }
        }
    }

    .plan_box {
        .plan_box_inner {
            padding: 30px 20px;
            min-height: auto;
        }
    }
}

@media screen and (max-width: 575.99px) {
    .dashboard_project_list .project_listing {
        grid-template-columns: auto;
    }

    .filter-bar {
        flex-direction: column;

        .left {
            gap: 30px;
            padding: 14px 20px 15px;

            .filter-item {
                label {
                    font-size: 14px;
                }

                .select-box {
                    font-size: 12px;
                }
            }
        }

        .search-btn {
            padding: 13px 15px;
            font-size: 14px;
        }
    }

    .dashboard_project_list {
        .nav-tabs {
            .nav-link {
                font-size: 16px;
            }
        }
    }

    #sentInquiryModal {
        .modal-body {
            padding: 45px 40px 60px;
        }
    }

    .bottom_portion.subscription_paln_page {
        padding-inline: 16px !important;

        .empty_state {
            h3 {
                font-size: 22px;
            }

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


@media screen and (max-width: 380px) {
    .mobile_header {
        gap: 10px;
        padding-inline: 1rem;

        h5 {
            font-size: 14px;
        }

        .user_profile {
            img {
                width: 100%;
                max-width: 30px;
            }
        }
    }

    .dashboard_home {
        .bottom_portion {
            padding-inline: 15px;

            .empty_state {
                padding: 0 !important;

                h3 {
                    font-size: 22px;
                }

                p {
                    font-size: 14px;
                }

                .custom_btn {
                    padding: 8px;
                    font-size: 14px;
                }
            }
        }
    }

    .create_project {
        .bottom_portion {

            #step1 {
                p {
                    max-width: 100%;
                }
            }

            .gallery_wrap {
                display: grid;
                grid-template-columns: auto auto;

                li {
                    width: 100% !important;
                    height: auto !important;
                }
            }

        }
    }

    .dashboard_project_list {
        .nav-tabs {
            .nav-link {
                font-size: 14px;
            }
        }
    }
}