@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poly:ital@0;1&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

ul li{
    list-style: none;
}
.tursid-carousel-item.carousel-item {
  position: relative;
}
.tursid-carousel-item.carousel-item:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: #02020273;
}
.slide_content h5 {
    color: #ffff;
    font-size: 50px;
}
.slide_content {
    width: 50%;
    margin: 0 auto;
}
.slide_content p {
    color: #ffff;
    font-size: 22px;
}
.slide_content button {
    background: #2695EE;
    border: 0;
    padding: 10px 27px;
    border-radius: 5px;
    color: #ffff;
    font-size: 18px;
    text-transform: uppercase;
}
.background_skyblue {
    background: #EFF6FC;
}

.App_store_image {
    margin-top: 35px;
}
.mobile_app img {
    width: 100%;
}
.tursid_astraSlide_items img {
    height: 500px;
    width: 100%;
    object-fit: cover;
}
/* Below 1600px the 500px service cards read too tall (client, 24 Sep 2026). Sits here, ahead of the
   tablet (<=991px) and phone (<=575px) height rules, so those still win at their widths. */
@media only screen and (max-width: 1600px) {
    .tursid_astraSlide_items img {
        height: 440px;
    }
}
/* At 1199px and below the cards drop again, to 400px (client, 24 Sep 2026). Tablet and phone widths
   inherit it, so no narrower screen ends up with a taller card than a wider one. */
@media only screen and (max-width: 1199px) {
    .tursid_astraSlide_items img {
        height: 400px;
    }
}
.download_app_card {
    align-items: center;
    padding-top: 50px;
}
.Download_app_card h4 {
    color: #0C0C0C;
    font-family: "Inter", Sans-serif;
    font-size: 35px;
    font-weight: 400;
}
.Download_app_card p {
    text-align: left;
    color: #000000;
    font-family: "Inter", Sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 26px;
    margin-top: 25px !important;
    margin-bottom: 30px !important;
}
.mobile_app {
    width: 500px;
}
.color_blue {
    color: #338CDE;
    font-family: "Inter", Sans-serif;
    font-size: 35px;
    font-weight: 700;
}
.email {
    border-radius: 10px;
    padding: 0px 17px;
    border: 0;
    min-width: 100%;
    min-height: 53px;
}
.App_store_image a img {
    width: 162px;
    margin-right: 20px;
}
.Download_app_card {
    margin-top: 0px;
}
.slider_content {
    position: absolute;
    bottom: 0;
    text-align: left;
    padding: 20px;
    color: #ffff;
}
.tursid_astraSlide_items {
    position: relative;
}
a.info_link {
    color: #fff;
    text-decoration: none;

}

.services {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    padding: 0 5px;
}
  .tursid_astraSlide_items.overlay {
    position: relative;
    width: calc((100% - 25px) / 6);
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 16px;
}
.tursid_astraSlide_items.overlay:hover {
    color: inherit;
    text-decoration: none;
}
.red_more_sm_btn {
    color: #fff;
}
.tursid_astraSlide_items.overlay:before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    Z-INDEX: 1;
    opacity: 1;
    transition: background-color .6s cubic-bezier(.33, 1, .68, 1);
    background-color: rgba(0,0,0,0.3);
}
/* Second layer: a bottom scrim so the copy stays readable without having to
   darken the whole photograph. Fades in behind the text on hover. */
.tursid_astraSlide_items.overlay:after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    height: 72%;
    z-index: 1;
    pointer-events: none;
    opacity: .55;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,0) 100%);
    transition: opacity .6s cubic-bezier(.33, 1, .68, 1);
}
.tursid_astraSlide_items.overlay:hover:after {
    opacity: 1;
}
.tursid_astraSlide_items {
  overflow: hidden;
}
.tursid_astraSlide_items.overlay:hover:before {
    background-color: rgba(0,0,0,0.5);
}
.tursid_astraSlide_items.overlay:hover > img {
    transform: scale(1.36) rotate(6deg);
}
.tursid_astraSlide_items > img {
    transform: scale(1) rotate(0deg);
    transition: transform .8s cubic-bezier(.33, 1, .68, 1);
    will-change: transform;
    backface-visibility: hidden;
}
.slider_content {
    position: relative;
    z-index: 1;
}
.tursid_astraSlide_items .slider_content {
    position: absolute;
    bottom: 0px;
    z-index: 2;
    transform: translateY(0);
    transition: transform .55s cubic-bezier(.33, 1, .68, 1);
}
.tursid_astraSlide_items.overlay:hover .slider_content {
    transform: translateY(-10px);
    transition-delay: .03s;
}
.tursid_astraSlide_items .slider_content .slider_title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
    position: relative;
}
.tursid_astraSlide_items .slider_content .slider_title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 38px;
    height: 2px;
    background: #2695ee;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.33, 1, .68, 1);
}
.tursid_astraSlide_items.overlay:hover .slider_title:after {
    transform: scaleX(1);
    transition-delay: .08s;
}

.tursid_astraSlide_items .slider_content .slider_discription {
    font-size: 16px;
    margin-bottom: 14px;
    text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
    max-height: 48px;
    opacity: .82;
    transition: max-height .55s cubic-bezier(.33, 1, .68, 1), opacity .45s ease;
  -webkit-box-orient: vertical;
  color: #fff;
}
.tursid_astraSlide_items.overlay:hover .slider_discription {
    max-height: 78px;
    opacity: 1;
}
.tursid_astraSlide_items .slider_content .info_link {
    font-size: 15px;
    display: flex;
    align-items: center;
}
.tursid_astraSlide_items .slider_content .info_link span {
    margin-left: 11px;
    position: relative;
    top: -1px;
}


.user_image img {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 100%;
    margin-right: 12px;
}
.header .header__actions>* {
    margin: 0 8px;
}

.header_social_icons li {
    padding: 10px 10px;
}
.header .header_social_icons {
    padding-left: 10px;
}

.header_social_icons {
    border-left: 2px solid #d9d9d942;
    padding-left: 8px;
}
.header .navigation__extra .sign_up_login_btns .login_btn:hover {
    color: var(--color-1st);
    background: var(--header-text-color);
}
.sign_up_login_btns li {
   margin-left: 18px;
}
.sign_up_login_btns li:first-child {
    margin-left: 5px;
 }
.header .navigation__extra .sign_up_login_btns .login_btn {
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    line-height: 24px;
    color: var(--color-1st);
    background: var(--header-text-color);
    border-radius: 6px;
    padding: 7px 10px !important;
    margin-top: 4px;
    margin-bottom: 4px;
    min-width: 80px;
}

.header .navigation__extra .sign_up_login_btns .register_btn {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--header-text-color);
    background: transparent;
    border-radius: 6px;
    padding: 7px 10px !important;
    border: 1px solid var(--header-text-color);
    margin-top: 4px;
    margin-bottom: 4px;
    min-width: 80px;
    text-align: center;
}

.navigation {
    background: url(../../../storage/images/menu_background.svg) no-repeat scroll center / cover;
    position: relative;
    z-index: 10;
}

.ps-logo img {
    width: 100%;
    min-width: 124px;
    height: 100% !important;
    max-width: 122px;
}
.header__center {
    border-radius: 10px;
    overflow: hidden;
}
.header__center.centerHeader {
    overflow: unset !important;
}
.widget {
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.footer_toppart {
    background: #081e30;
    padding-top: 10px;
    padding-bottom: 20px;
}
.footer_toppart p {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    max-width: 440px;
}
.footer_logo + p {
    text-align: justify;
}
.footer_logo {
    margin-bottom: 15px;
    margin-top: 0;
}
.footer_menu_widget h3 {
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.get_in_touch_menu li {
    display: flex;
    margin-top: 20px;
}
.get_in_touch_menu {
    margin-top: 28px;
}

.get_in_touch_menu li span img {
    min-width: 20px;
    margin-right: 12px;
    max-width: 20px;
}
.get_in_touch_menu {
    margin-top: 0;
    display: inline-block;
}
.get_in_touch_menu li a {
    color: #fff;
    font-size: 16px;
}
.card-header h3 {
    margin-bottom: 0;
}
.customer-page .customer-order-detail {
    margin-top: 20px;
}
.carousel-control-prev {
    background: url(../../../storage/images/left_arrow.svg) no-repeat scroll center / cover;
    border: none;
    height: 54px;
    width: 54px;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    opacity: 1;
}

.carousel-control-next {
    background: url(../../../storage/images/right_arrow.svg) no-repeat scroll center / cover;
    border: none;
    height: 54px;
    width: 54px;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
    opacity: 1;
}
.track_order_link {
    color: #2695ee;
    margin-bottom: 25px;
    display: inline-block;
    margin-top: 12px;
    text-decoration: underline;
}

.footer_bottom {
    background: #081e30;
    border-top: 1px solid #ffffff36;
}
.get_in_touch_menu li  a:hover {
    color: #2a95ee;
    transition: 0.3s all;
}
.menu_links li a:hover {
    color: #2a95ee;
    transition: 0.3s all;
    left: 4px;
    position: relative;
}


.privacy_policy_link li a, .privacy_policy_link li {
    color: #fff;
}
.privacy_policy_link li {
   margin-left:10px;
   list-style: none;
}

.new_login_ui {
    background: transparent;
}

.new_login_ui .ps-form--account .ps-form__content {
    background: #fff;
    border-radius: 12px;
}
.rating_wrap {
    margin-top: 10px;
}
  .form-group.submit {
    max-width: 378px;
    margin: 0 auto;
    margin-bottom: 2.5rem;
}
.widget_contact-us {
    flex-grow: 1;
}
.form-group .small_warning {
    font-size: 12px;
    padding-left: 30px;
    margin-top: -13px;
    color: #414141;
    margin-bottom: 40px;
}
.custom_radiobox input {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}

.custom_radiobox {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
}

.custom_radiobox span:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    border: 1px solid #333;
    content: "";
    border-radius: 100%;
}

.custom_radiobox input:checked ~ span:after {
    position: absolute;
    content: "";
    background: var(--color-1st);
    height: 10px;
    width: 10px;
    left: 5px;
    border-radius: 100%;
    top: 5px;
}

.custom_radiobox input:checked ~ span:before {
    border-color: var(--color-1st);
}

.get_geo_location {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 4;
    height: 48px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.iti__arrow {
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 2px solid #787878;
    border-bottom: 2px solid #787878;
    border-top: transparent;
    border-right: transparent;
    height: 9px;
    width: 9px;
    transform: rotate(-45deg);
    top: -2px;
    position: relative;
}

.iti.iti--allow-dropdown.iti--separate-dial-code {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.iti__flag-container {
    height: 50px;
    background: transparent;
}
.iti__selected-flag {
    background: #efefef !important;
    border-right: 1px solid #ddd;
    height: 48px;
    margin-top: 0px;
    margin-right: 15px;
    padding-right: 15px;
    border-left: none;
}

.mobile_code {
    padding-left: 14px !important;
    margin-left: 108px!important;
}

.carousel-item {
    height: calc(calc(100vh * .8) - 0px);
}
.tursid-carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.carousel-caption {
    padding-top: 170px;
}

.go_to_dashboard:before {
    position: absolute;
    content: "";
    right: -11px;
    height: 16px;
    top: 50%;
    width: 2px;
    background: #fff;
    transform: translateY(-50%);
}
.go_to_dashboard {
    margin-right: 20px;
    position: relative;
    transition: 0.2s all;
}

.menu--dropdown>li>a:hover img {
    filter: brightness(0) invert(1);
    transition: 0.2s all;
}

.custom_row_five {
    margin: 0 -15px;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
}

.custom_column_five {
    padding: 0 15px;
    width: 20%;
    margin-bottom: 24px;
}
.ps-tab .form-group.submit .ps-btn {
    background: #FFC72E;
    margin-left: 0;
    margin-right: auto;
    color: #424242;
    border-radius: 5px;
}

.ps-tab .form-group.submit {
    margin-left: 0;
}

.ps-table--shopping-cart .sold-by a {
    color: #FCB800 !important;
}


.ps-btn.btn-cart-button-action.continue_shopping_btn {
    background: transparent;
    border: 1px solid #c5c5c5;
    color: #555;
}

.ps-table--shopping-cart .form-group--number .form-control {
    height: 40px;
}

.tracking_model .modal-dialog {
    max-width: 730px;
    margin: 1.75rem auto;
}


.tracking_model .modal-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;
    color: #000000;
}

.tracking_model .modal-header {
    border-bottom: 1px solid #EDEDED;
    padding: 46px 25px 30px 25px;
}

.tracking_model .close {
    font-size: 55px;
    position: absolute;
    right: 25px;
    top: 10px;
    opacity: 0.7;
}
.tracking_model .arriving_date_display h4 {
    background: #FEF0BF;
    border: 1px solid #FEF0BF;
    border-radius: 4px;
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    line-height: 30px;
    color: #000000;
    padding: 10px 20px;
}

.tracking_model .modal-body {
    padding: 25px 28px;
}

.tracking_model .courier_journey_table {
    width: 100%;
}

.tracking_model .courier_journey_table {
    border: 1px solid #EEEEEE;
    margin-top: 16px;
    border-radius: 5px;
}

.tracking_model .courier_journey_table tr th, table.courier_journey_table tr td {
    border: 0.5px solid #eee;
    padding: 15px 18px;
    white-space: nowrap;
    border-right:none;
    border-left:none;
}
.tracking_model .courier_journey_table tr th {
 font-weight: 600;

 width: 50%;
}
.courier_journey_table_cover {
    overflow: auto;
    margin-bottom: 30px;
}
.tracking_model .modal-content {
    border-radius: 15px;
    border: none;
}


.line {
	stroke-width: 1;
	fill: none;
}
.line-glow {
	filter: url(#glow-filter);
}

.electric_wave .line {
   stroke: white !important;
   box-shadow: none;
   opacity: 0.2;
}

.electric_wave svg {
    position: absolute;
    top:10px;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0.7;
 }

 .vertical_height_div {
    min-height: calc(calc(100vh * 0.99) - 384px);
    padding-top: 150px;
}

 .navigation .ps-container {
    position: relative;
    z-index: 5;
 }

 .request_service_guide_box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #fcfcfc;
    border: 1px solid #E0E0E0;
    padding: 10px;
}

.request_service_guide_box .guide_description {
    width: 70%;
    padding: 15px;
}

.request_service_guide_box .featured_img {
    width: 30%;
    padding: 15px;
}

.guide_description h4 {
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
}


.checked_descorate_list li {
    font-size: 16px;
    font-weight: 600;
    margin: 8px 0;
    list-style: none;
    position: relative;
}
.checked_descorate_list {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 26px;
}

.checked_descorate_list li:before {
    position: absolute;
    content: "";
    background: url(../img/green_checked_icon.svg) no-repeat scroll center / contain;
    height: 16px;
    width: 16px;
    left: -22px;
    top: 4px;
}

.go_next_btn {
    background: #338CDE;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
    padding: 8px 30px;
    font-size: 16px;
    color: #fff;
}
.go_next_btn:hover {
    background: #338CDE;
    color: #fff;
}

.customer_service_request_form label {
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    color: #333333;
}

.customer_service_request_form .form_control {
    border: 1px solid #8495B1;
    border-radius: 5px;
    padding: 10px;
    height: 50px;
    width: 100%;
}
.customer_service_request_form .ui.calendar .form_control {
    border: 1px solid #8495B1;
    border-radius: 5px;
    padding: 10px;
    height: 50px;
    width: 100%;
    background: transparent !important;
    position: relative;
    z-index: 2;
}

.customer_service_request_form .ui.input.right.icon {
    width: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.customer_service_request_form .geo_location {
    position: relative;
}

.customer_service_request_form .geo_location > a {
    position: absolute;
    right: 10px;
    top: 12px;
}
.customer_service_request_form .ui .calender_icon {
    position: absolute;
    right: 14px;
    top: 14px;
    max-width: 18px;
    /* Above the input (which .ui.calendar .form_control raises to z-index 2),
       otherwise the field covers the icon and swallows the click. */
    z-index: 3;
}

/* The icon opens the date picker, so it should look clickable */
.calender_icon {
    cursor: pointer;
}
.customer_service_request_form .geo_location > a img {
    max-width: 20px;
}

/* Room for the location icon so a long address stops short of it instead of running underneath. The field's class is
   "form-control" (hyphen), so the underscore selector alone never applied (client, 1 Oct 2026). */
.customer_service_request_form .geo_location .form_control,
.customer_service_request_form .geo_location #google_place_autocomplete {
    padding-right: 40px;
}
/* Register page: the icon sits in a 50px white box at the right edge of the field */
.get_geo_location + #google_place_autocomplete {
    padding-right: 60px;
}

.ui.calendar .ui.table.day {
    font-size: 14px!important;
}
.customer_dashboard_leftsidebar ul li a img {
    width: 100%;
    max-width: 20px;
    transition: 0.5s all;
}
.customer_dashboard_leftsidebar ul li.active a img {
    filter: brightness(0) invert(1);
    transition: 0.5s all;
}
.customer_dashboard_leftsidebar ul li a:hover img {
    filter: brightness(0) invert(1);
    transition: 0.5s all;
}
.customer_dashboard_leftsidebar ul li a .icon {
    min-width: 27px;
    display: inline-block;
}


.my_requests_table {
    background: #FFFFFF;
 /* Gray 5 */
    border: 1px solid #E0E0E0;
}
.btn-info {
    background: #F2994A;
    border-color: #F2994A;
}
.customer_table_ui_default tr th {
    background: #F7F3F3;
    padding: 12px 25px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 13px;
    white-space: nowrap;
    border: none!important;
}
.customer_table_ui_default tr td:nth-child(2) {
    font-weight: 600;
}
.service_request_default_table_ui table.dataTable.no-footer {
    border-bottom:none;
}
body .service_request_default_table_ui .dataTables_wrapper a.paginate_button.current {
    background: #2695ee !important;
    border: none !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_info {
    padding-left: 16px;
    padding-bottom: 16px;
}
.customer_table_ui_default td {
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    padding: 10px 15px;
    white-space: nowrap;
    border: none!important;

}

.customer_table_ui_default tr:nth-child(even) td {
    background: #fafafa;
}

.customer_table_ui_default td:last-child, .customer_table_ui_default th:last-child {
    text-align: center;
}
.table_header {
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 12px;
}
input[type=search] {
    box-sizing: border-box!important;
}
.selectbox_reload_sortby ul li {
    padding-right: 30px;
}

.selectbox_reload_sortby li {
    padding-left: 15px;
    margin-bottom: 8px;
    margin-top: 8px;
}

.default_searchbar .form-group a {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    z-index: 9;
}

.table_responsive {
    overflow: auto;
}

.selectbox_container .nice-select {
    padding: 0px 30px 0 10px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 0;
    width: 100%;
    min-width: 200px;
    min-height: 35px;
}

.selectbox_container .nice-select:after {
    border-bottom: 1.8px solid #000;
    border-right: 1.8px solid #000;
    height: 10px;
    margin-top: -7px;
    right: 13px;
    width: 10px;
}

.selectbox_reload_sortby .reload_btn {
    background: #36C6D3;
    border: none;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    color: #FFFFFF;
    min-height: 39px;
    padding: 5px 9px;
    border-radius: 2px;
}

.selectbox_reload_sortby .reload_btn span {
    padding: 7px 5px;
}

.nice-select .list {
    width: 100%;
    border-radius: 0;
    margin-top: 0px;
}

.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: #F4FAFF;
}

.customer_table_ui_default .status {
    position: relative;
    margin-left: 15px;
}
.default_searchbar .form-control {
    height: 42px;
    width: 100%;
    max-width: 100%;
}
.customer_table_ui_default .status:before, .myrequest_header .status:before, .project_detail_title .status:before {
    position: absolute;
    content: "";
    height: 6px;
    width: 6px;
    left: -11px;
    top: 6px;
    border-radius: 100%;
    background: #444;
}

.customer_table_ui_default .status.open:before, .myrequest_header .status.open:before, .project_detail_title .status.open:before  {
    background: #0085FF;
}
.customer_table_ui_default .status.closed:before, .myrequest_header .status.closed:before, .project_detail_title .status.closed:before {
    background: #FCB800;
}
.customer_table_ui_default .status.awarded:before, .project_detail_title .status.awarded:before {
    background: #6A9C06;
}
.status {
    position: relative;
}

.myrequest_header {
    background: #2B4C69;
    display: flex;
    align-items: flex-end;
    position: relative;
    border-radius: 10px;
}

.myrequest_header .navtab_menus {
    flex-grow: 1;
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 230px;
}

.myrequest_header .navtab_menus .nav-tabs .nav-link:hover {
    background: #1f3f5c;
    border-color: #1f3f5c;
    color: #fff;
}
.myrequest_header .nav-tabs .nav-link.active {
    background: #0A263F;
    border-color: #0A263F;
    color: #fff;
}

.myrequest_header .navtab_menus .nav-tabs .nav-link {
    padding: 10px 25px;
    border-radius: 5px 5px 0 0;
    color: #fff;
    margin-bottom: 0;
}


.myrequest_header .nav-tabs {
    border-bottom: none;
}

.myrequest_header .status, .project_detail_title .status {
    color: #ffff;
    font-size: 14px;
    display: inline-block;
    line-height: 22px;
}

.myrequest_header .status:before, .project_detail_title .status:before {
    width: 12px;
    height: 12px;
    left: -18px;
    top: 5px;
    content: "";
    position: absolute;
}
.top_navigate_btns li {
    margin-right: 18px;
    margin-bottom: 0px;
}
.top_navigate_btns {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.top_navigate_btns .btn_project_closed {
    background: #DF4339;
    border-radius: 5px;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    padding: 7px 20px;
    white-space: nowrap;
}

.my_requests_table .page_number {
    width: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #828282;
    border-radius: 100%;
    color: #fff;
    margin: 0 6px;
}

.custom_radiobtn .check_radio {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #333333;
    position: relative;
    padding-left: 25px;
    display: inline-block;
}

.custom_radiobtn {
    position: relative;
}

.custom_radiobtn .custom_radio {
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}
.category_radio_selectboxs li {
    margin-right: 21px;
    margin-top: 10px;
}
.custom_radiobtn .check_radio:before {
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 0;
    height: 20px;
    width: 20px;
    content: "";
    background: #FFFFFF;
    border: 2px solid #CDCDCD;
    border-radius: 100%;
}
.custom_radiobtn .check_radio:after {
    position: absolute;
    left: 5px;
    top: 7px;
    bottom: 0;
    height: 10px;
    width: 10px;
    content: "";
    background: #0076DF;
    border-radius: 100%;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
}
.custom_radiobtn .custom_radio:checked ~ .check_radio:after  {
    opacity: 1;
    visibility: visible;
}
.custom_radiobtn .custom_radio:checked ~ .check_radio:before  {
    border: 2px solid #0076DF;
}


.customer_service_request_form .custom-file-upload, .register_doc_uploads .custom-file-upload {
    cursor: pointer;
    background: #F6F6F6;
    border: 1px dashed #8495B1;
    border-radius: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #828282;
    padding: 15px 20px;
    margin-bottom: 9px;
}

.customer_service_request_form .custom-file-upload span {
    margin-bottom: 10px;
}
.preview-image {
    position: relative;
    width: 15.2%;
    height: 74px;
    margin-top: 0px;
}
.preview-image img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

  .preview-image .remove-image, .remove-btn {
    cursor: pointer;
    background: url(../img/close_red_icon.svg) no-repeat scroll center / cover;
    width: 15px;
    height: 15px;
    font-size: 0px;
    position: absolute;
    top: 7px;
    right: 7px;
  }

  .drawing-pdf-preview,
  .latestbill-pdf-preview,
  .uploaddoc-pdf-preview,
  .requestform-pdf-preview,
  .uploadquotation-pdf-preview,
  .upload-register-pdf-previews,
  .auditor_certificate_file_previews,
  .dcrp_certificate_file_previews
{
    position: relative;
    width: 15.2%;
    background: #EDEDED;
    padding: 17px 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
}

#drawing-pdf-previews,
#location-preview-container,
#latestbill-pdf-previews,
#uploaddoc-pdf-previews,
#requestform-pdf-previews,
#uploadquotation-pdf-previews,
#upload-register-pdf-previews,
#dcrp_certificate_file_previews,
#auditor_certificate_file_previews,
.location_images_list,
.drawing_document_list {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}
.custom_uploader_photos {
    position: relative;
    top: 0;
}

.custom_uploader_photos input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 9;
}

.download_pdf_link {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-decoration: underline;
    margin-left: 10px;
    color:#2970B2;
}
.download_pdf_link .icon {
   margin-right: 5px;
}

.pdf-preview {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .pdf-preview img {
    height: 40px;
    margin-right: 10px;
  }

  .pdf-preview .remove-btn {
    cursor: pointer;
  }
  /* "Remove" on saved documents is a submit button now (POST, 6 Oct 2026); keep the plain red icon look */
  button.remove-btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    background-color: transparent;
  }


.customer_service_request_form .btn.submit_request_btn {
    background: #0076DF;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    padding: 14px 26px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.please_note_p {
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #818181;
    margin-top: 28px;
}


.thanks_giving_screen_ui {
    text-align: center;
}

.thanks_giving_screen_ui .featured_img img {
    width: 100%;
    max-width: 380px;
    margin-bottom: 10px;
}

.thanks_giving_screen_ui h1 {
    font-weight: 700;
    font-size: 40px;
    line-height: 61px;
    color: #338CDE;
    margin-bottom: 0;
}

.thanks_giving_screen_ui p {
    font-weight: 400;
    font-size: 17px;
    line-height: 29px;
    text-align: center;
    color: #000000;
}

.thanks_giving_screen_ui .start_shopping_btn {
    background: #338CDE;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    padding: 15px 54px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
}

.thanks_giving_screen_ui .start_shopping_btn img {
    margin-left: 6px;
}


.project_detail_title {
    font-weight: 700;
    font-size: 20px;
    line-height: 31px;
    color: #000000;
    margin-top: 20px;
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.project_title {
    font-weight: 400;
    font-size: 19px;
    line-height: 24px;
    color: #338CDE;
}

.small_info_list_bid {
    display: flex;
    margin: 0;
    padding-left: 0;
    margin-bottom: 10px;
}

.small_title {
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    color: #4F4F4F;
    width: 100%;
    display: inline-block;
    margin-top: 20px;
}

.info_list_box label {
    font-weight: 600;
    font-size: 15px;
    line-height: 17px;
    color: #000000;
    padding-top: 5px;
}

.location_images_list {
    margin: 0 -7px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.location_images_list li {
    width: 16.6%;
    padding: 10px 7px 0;
}

.location_images_list li .preview-location-image {
    position: relative;
    height: 74px;
    overflow: hidden;
}

.location_images_list li .preview-location-image img {
    position: absolute;
    top: 0;
    height: 100%;
    object-fit: cover;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.project_custom_row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.project_description_column {
    width: 42%;
    padding: 0 15px;
}

.project_geo_location_map {
    width: 58%;
    padding: 20px 15px 0 15px;
}

.project_footer_area {
    border-top: 1px solid #D9D9D9;
    margin-top: 20px;
}

.project_footer_area ul {
    margin: 0;
    padding: 0;
}

.project_id_label {
    margin-top: 10px;
}

.project_id_label .project_id {
    font-weight: 600;
}

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

.report_project_link {
    margin-top: 10px;
    display: inline-block;
}

.drawing_document_list {
    padding-left: 0;
    gap: 0;
    margin: 0 -7px;
}

.drawing_document_list li {
    width: 16.6%;
    padding: 10px 7px 0;
}
.drawing_document_list .drawing-pdf-preview {
    display: flex;
    width: 100%;
}
.drawing_document_list .drawing-pdf-preview img {
    width: 100%;
    display: inline-block;
    max-width: 28px;
    margin: 0 auto;
}


/******************* Gallary Css Start ****************/
.location_images_list li .item {
    width: 100%;
    overflow: hidden;
    background: #000;
  }

  .location_images_list li img {
    width: 100%;
    height: 100%;
    transform: scale(1.15);
    transition: transform 0.5s, opacity 0.5s;
  }

  .location_images_list li img:hover {
    opacity: 1;
    transform: scale(1.03);
  }

  .location_images_list li .preview-location-image a {
    display: inline-block;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

/******************* Gallary Css End ****************/


.before_hire_project_detail #nav-payments-tab,
.before_hire_project_detail #nav-reviews-tab,
.before_hire_project_detail .project_right_part_column {
    display: none;
}


.after_hire_project_detail .project_left_part_description {
    width: 63%;
    padding: 0 15px;
}


.service_provider_info_list li .icon {
    margin-right: 4px;
}
.after_hire_project_detail .project_hire_row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.after_hire_project_detail .location_images_list li,
.after_hire_project_detail .drawing_document_list li {
    width:33.33%;
}
.after_hire_project_detail iframe {
    height: 640px;
}

.working_service_provider_info_card {
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    margin-top: 30px;
    background: rgba(249, 249, 249, 0.64);
    margin-bottom: 20px;
}

.working_service_provider_info_card .tracking_card_title {
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #000000;
    padding: 15px 20px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 40px;
}


.service_provider_header .user_rating .rating {
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0;
}

.service_provider_header .user_rating {
    display: flex;
    align-items: center;
}

.service_provider_header .info_service_provider .seller_name {
    margin-bottom: 2px;
    font-size: 16px;
}

.service_provider_header .get_avtaar_img {
    padding-right: 10px;
}

.service_provider_header {
    padding-left: 20px;
}

.service_provider_header .total_review_count {
    font-weight: 600;
    font-size: 11.6122px;
    line-height: 14px;
    color: #4A4A4A;
    padding-left: 4px;
    padding-top: 0px;
    margin-top: -2px;
}

.service_provider_info_list {
    margin-left: 0;
    padding-left: 20px;
}

.service_provider_info_list li {
    padding-top: 14px;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    color: #474747;
    display: flex;
}

.service_provider_info_list .verified {
    color: #4E8E30;
}

.working_service_provider_info_card .send_message_btn_cover {
    padding: 20px;
}

.working_service_provider_info_card .send_message_btn_cover .btn {
    background: #338CDE;
    border: 2px solid #338CDE;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 10px 23px;
}


.before_hire_project_detail .cancel_contract_btn {
    display: none;
}


.main_box {
    background: #ffff;
    border: 1px solid #d7d7d7;
    padding: 20px;
    border-radius: 4px;
    position: relative;
}
.awarded_service_provider {
    background: #F6FFF4;
    border-color: #CFF3C7;
}
.main_box .profile img {
    min-width: 80px;
    max-width: 80px;
    margin-right: 30px;
}

.main_box .Proposal_detail {
    padding-top: 10px;
}

.main_box .btn_award {
    color: #27AE60;
    border: 2px solid #27AE60;
    padding: 5px 20px;
    border-radius: 5px;
    font-weight: 600;
    height: 40px;
    background: transparent;
    cursor: pointer;
}

.main_box .days_count {
    color: #787373;
}

.main_box .Payment {
    font-size: 20px;
    font-weight: 600;
    display: block;
}

.main_box .proposal_btns .btn_cancel {
    border: 2px solid #D74F4F;
    color: #E3271B;
    border-radius: 5px;
    font-weight: 600;
    height: 40px;
    background: transparent;
    cursor: pointer;
    padding: 5px 20px;
}
.main_box .proposal_btns li {
    margin-bottom: 10px;
    margin-left: 15px;
}

.main_box .proposal_btns .chat_link {
    border: 2px solid #338CDE;
    padding: 10px 16px;
    border-radius: 6px;
}

.main_box .proposal_btns .chat_link img {
    width: 100%;
    max-width: 18px;
}


.main_box .proposal_btns .total_review_count {
    font-size: 12px;
    margin-left: 6px;
    margin-top: 7px;
    font-weight: 600;
}
.main_box .proposal_title {
    font-size: 17px;
    margin-bottom: 0;
}
.main_box .total_review_count {
    font-size: 12px;
    margin-left: 6px;
    margin-top: -4px;
    font-weight: 600;
}

.main_box .proposal_title {
    font-size: 17px;
    margin-bottom: 0;
}

.main_box .awarded_tag {
    background: #37B870;
    padding: 7px 13px;
    color: #fff;
    position: absolute;
    top: -21px;
    left: 30px;
}

.main_box .awarded_tag:before {
    position: absolute;
    content: "";
    top: 0;
    height: 50%;
    width: 11px;
    background: #37B870;
    left: -5px;
    transform: skew(27deg, 0deg);
}
.main_box .awarded_tag:after {
    position: absolute;
    content: "";
    bottom: 0px;
    height: 50%;
    width: 11px;
    background: #37B870;
    left: -5px;
    transform: skew(-27deg, 0deg);
}


.payment_row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.payment_screen_tab_ui .payment_left_part_description {
    width: 70%;
    padding: 0 15px;
}
.payment_screen_tab_ui .project_right_part_column {
    width: 28%;
    padding: 0 15px;
}


h4.milestone_title {
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 25px;
    padding-top: 25px;
    border-top: 1px solid #D9D9D9;
    margin-top: 20px;
    padding-left: 20px;
    margin-bottom: 0;
}

.milestone_remaining_list {
    display: flex;
    flex-direction: column;
    padding-left: 0;
}

.milestone_remaining_list > li {
    border-bottom: 1px solid #D9D9D9;
    display: flex;
    flex-wrap: wrap;
    padding:15px 15px 15px 20px;
    align-items: center;
}

.milestone_remaining_list_ui .list_number {
    padding-right: 10px;
    width: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
}

.milestone_remaining_list_ui .milestone_add_view_buttons {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.milestone_remaining_list_ui .milestone_title_amount {
    width: 100%;
    max-width: 280px;
}

.milestone_remaining_list_ui .milestone_title {
    font-weight: 600;
    font-size: 17px;
    line-height: 19px;
}

.milestone_remaining_list_ui .milestone_payment {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #4F4F4F;
    margin-bottom: 0;
}

.milestone_remaining_list_ui .milestone_date {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #4F4F4F;
    justify-content: flex-end;
    display: flex;
    align-items: flex-end;
}

.milestone_remaining_list_ui .view_invoice_link {
    font-weight: 500;
    font-size: 13px;
    line-height: 11px;
    color: #338CDE;
    white-space: nowrap;
    border-bottom: 1px solid #338CDE;
    padding-bottom: 4px;
}

.milestone_remaining_list_ui .view_invoice_link img {
    width: 100%;
    max-width: 21px;
    margin-right: 5px;
}

.milestone_remaining_list_ui .milestone_add_view_buttons li {
    margin-right: 10px;
    margin-left: 10px;
    position: relative;
    top: -6px;
}

.add_milestone_form_ui {
    width: 100%;
}

.add_milestone_form_ui {
    background: #F5F5FF;
    margin-left: 30px;
    max-height: 0px;
    overflow-y: auto;
    margin-top: 0;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    border: transparent;
    transition: 0.2s all;
}
.open .add_milestone_form_ui {
    background: #F5F5FF;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
    margin-left: 30px;
    border: 1px solid #e8e8ff;
    max-height: 1000px;
    overflow-y: inherit;
    transition: 0.2s all;
}

 .multiple_field_component {
    position: relative;
}

 .multiple_field_component .amount_label {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 12px;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.multiple_field_component .dollar_sign {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 18px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

 .multiple_field_component .form-control {
    padding: 0 50px;
    background: #ffff;
    border-radius: 5px;
}
.add_milestone_form_ui .form-control {
    background: #ffff;
    border-radius: 5px;
}
.add_milestone_form_ui .add_milestone_form_ui label {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 7px;
}

.add_milestone_form_ui .custom_radiobtn .check_radio {
    font-size: 14px;
}
.add_milestone_form_ui .custom_radiobtn .check_radio:before {
    height: 17px;
    width: 17px;
}
.add_milestone_form_ui .custom_radiobtn .check_radio:after {
    left: 5px;
    top: 7px;
    height: 7px;
    width: 7px;
}
.add_milestone_form_ui .custom_radiobtn .check_radio {
    padding-left: 21px;
}

.add_milestone_form_ui .ui.input {
    width: 100%;
    height: 50px;

}

.add_milestone_form_ui .ui.input .form_control {
    background: transparent!important;
    position: relative;
    z-index: 2;
}

.add_milestone_form_ui .date_picker .calender_icon {
    position: absolute;
    right: 0;
    top: 13px;
    right: 13px;
    max-width: 18px;
    /* Same reason as above: the milestone input sits at z-index 2. */
    z-index: 3;
}
.payment_left_part_description .small_info_list_bid {
    padding: 0 20px;
}


.milestone_remaining_list_ui .accordion_btn {
    height: 20px;
    width: 20px;
    border: 2px solid #000;
    display: inline-block;
    border-radius: 100%;
    margin-top: 15px;
    position: relative;
    right: -17px;
}

.active_milestone {
    border: 0.5px solid #338CDE;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    margin-left: 9px;
    color: #338CDE;
}

.milestone_remaining_list_ui .accordion_btn:before {
    position: absolute;
    content: "";
    width: 10px;
    height: 2px;
    top: 50%;
    background: #000;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    left: 50%;
    transition: 0.2s all;
}
.milestone_remaining_list_ui .accordion_btn:after {
    position: absolute;
    content: "";
    width: 10px;
    height: 2px;
    top: 50%;
    background: #000;
    border-radius: 10px;
    transform: translate(-50%, -50%) rotate(90deg);
    left: 50%;
    transition: 0.2s all;
}

.milestone_remaining_list_ui .paid_invoice {
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    color: #27AE60;
}

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

.paymnt_status_with_money .payment_status {
    display: flex;
    align-items: center;
    flex-wrap:wrap;
}

.added_milestone_sucessfully {
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 5px;
}

.paymnt_status_with_money .payment_status li {
    padding: 8px 10px;
    white-space: nowrap;
}

.paymnt_status_with_money  .payment_status_label {
    background: #6A9C06;
    border-radius: 200px;
    padding: 7px 12px;
    font-weight: 400;
    font-size: 11px;
    line-height: 12px;
    color: #fff;
    display: inline-block;
    white-space: nowrap;
}

.paymnt_status_with_money .payment_status {
    padding-left: 0;

}

.payment_status label {
    margin: 0;
    font-weight: 600;
    font-size: 12px;
    line-height: 13px;
    text-transform: uppercase;
    color: #333333;
}

.paymnt_status_with_money .paid_amount {
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #4F4F4F;
    padding: 8px 10px;
}
.milestone_add_view_buttons .request_milestone_btn {
    background: #338CDE;
    border: 2px solid #338CDE;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 8px 10px;
    margin-right: -10px;
    display: inline-block;
    margin-top: 9px;
}

.btn.btn_mark_complete_project {
    background: #27AE60;
    border: 2px solid #27AE60;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 10px 23px;
}
.mark_as_complete_button_division {
    text-align: right;
    padding: 10px 10px;
}
.mark_as_complete_button_division {
    text-align: right;
}

.rating {
    display: inline-block;
  }

  .rating input {
    display: none;
  }

  .rating label {
    float: right;
    color: #ddd;
    cursor: pointer;
    margin-left: 0px;
}

  .rating label:before {
    content: '\2605';
    font-size: 24px;
  }

  .rating input:checked ~ label {
    color: #ffca08;
  }

  .rating_hover label:hover,
  .rating_hover label:hover ~ label {
    color: #ffca08;
  }

  .myrating label:hover,
  .myrating label:hover ~ label {
    cursor: default;
  }

  .review_deatils li {
    display: flex;
    justify-content: space-between;
    max-width: 320px;
    align-items: center;
}

.review_deatils li > label {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
}

.review_deatils {
    margin-left: 0;
    padding-left: 0;
}

.project_review_screen_ui .label {
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    text-align: justify;
    color: #000000;
}

.feedback_btn {
    background: #338CDE;
    border: 2px solid #338CDE;
    border-radius: 5px;
    font-weight: 600;
    font-size: 15px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 12px 30px;
    margin-top: 30px;
}

.feedback_btn:hover {
    color: #FFFFFF;
}


.section-header h3 {
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.selectbox_reload_sortby {
    margin-bottom: 0;
}
.noUi-value {
    color: #338CDE;
}
.noUi-marker {
    background: #338CDE;
}
.wrapper {
    background: #F1F1F1;
    padding: 40px 30px;
}

.OR_text {
    font-size: 16px;
    font-weight: 500;
    margin-right: 50px;
}
.style-3 {
    padding: 60px 18px;
}
.main_heading {
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 20px;
    margin: 0;
}
.bg_red p {
    font-size: 10px;
    color: #FF6969;
    margin: 0;
}
.border-grey {
    border-bottom: 1px solid #bdbdbd;
}
.select_box {
    padding: 10px;
    border: 1px solid #dddddd;
    font-size: 14px;
    font-weight: 300;
}
.calculator_btn {
    background: #338CDE;
    color: #fff;
    border: 1px solid #338CDE;
    border-radius: 5px;
    padding: 13px 40px;
    display: inline-block;
}
.calculator_btn:hover {
    background: #287ac7;
    color: #fff;
}
.hidden-lable {
    visibility: hidden;
}
.Card {
    background: #fff;
    padding: 0;
    border-radius: 15px;
}
.energy_calculator_cover .input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #97CDFF;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    min-width: 70px;
    text-align: center;
    justify-content: center;
}

.energy_calculator_cover .nice-select.select_box {
    padding-top: 0;
    padding-bottom: 0;
}

.energy_caculator_range_row, .solar_capacity_row {
    display: none;
}
.energy_caculator_range_row.active, .solar_capacity_row.active {
    display: flex;
}

.energy_calculator_cover .Card .column_1 b {
    margin-left: -18px;
    margin-top: 0px;
    display: inline-block;
}
.energy_calculator_cover td {
    padding: 12px 35px;
    border: 1px solid #dbdbdb;
}

.energy_calculator_cover tr td:last-child {
    background: #dbdbdb;
    width: 280px;
}


.service_provider_section_cover .after_hire_project_detail .project_right_part_column {
    width: 30%;
}

.service_provider_section_cover .after_hire_project_detail .project_left_part_description {
    width: 70%;
}

.accept_bid_button_div {
    margin-top: 20px;
    border-top: 1px solid #d9d9d9;
    padding-top: 18px;
}

a.accept_bid_button {
    background: #6A9C06;
    border: 2px solid #6A9C06;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 10px 23px;
    margin-top: 0px;
    display: inline-block;
}

.submit_bid_modal .modal-dialog {
    max-width: 638px;
    width: 96%;
    border-radius: 10px;
    border: none;
}
.submit_bid_modal .modal-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
    padding: 7px 20px;
}

.submit_bid_modal .close {
    font-size: 40px;
    padding-top: 6px;
    height: auto;
    opacity: 1;
    position: relative;
    padding-right: 20px !important;
}

.submit_bid_modal .modal-header {
    border-bottom: 5px solid #D9D9D9;
}

.submit_bid_modal .row {
    max-width: 440px;
    margin: 0 auto;
}
.submit_bid_modal .btn-primary {
    font-size: 16px;
    background: #338CDE;
    margin: 0 auto;
    display: block;
    padding: 9px 43px;
    margin-bottom: 30px;
}
.modal-backdrop.show {
    opacity: .7;
}

.submit_bid_modal label {
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    color: #333333;
}

.service_provider_section_cover .myrequest_header {
    background: #FFFFFF;
    border: 1px solid #C7C7C7;
}
.service_provider_section_cover .myrequest_header .navtab_menus .nav-tabs .nav-link {
    color: #333;
}
.service_provider_section_cover .myrequest_header .nav-tabs .nav-link.active {
    color: #fff;
}

.service_provider_section_cover .myrequest_header .navtab_menus .nav-tabs .nav-link:hover {
    background: #4c6883;
    border-color: #4c6883;
    color: #fff;
}

.service_provider_section_cover .btn_pending_approval {
    padding: 7px 13px;
    color: #fff;
    top: 0;
    background: #EBB115;
    border: none;
    left: 0;
    position: relative;
}

.service_provider_section_cover .btn_pending_approval:after {
    position: absolute;
    content: "";
    bottom: 0px;
    height: 50%;
    width: 11px;
    background: #EBB115;
    left: -5px;
    transform: skew(-27deg, 0deg);
}

.service_provider_section_cover .btn_pending_approval:before {
    position: absolute;
    content: "";
    top: 0;
    height: 50%;
    width: 11px;
    background: #EBB115;
    left: -5px;
    transform: skew(27deg, 0deg);
}

.payment_status_label.inprogress img {
    transform: rotate(180deg);
}
.payment_status_label.inprogress {
    background: #FCB800;
}
.mark-paid_btn_div {
    padding: 8px 10px;
    white-space: nowrap;
}
.mark-paid_btn_div .mark_paid_btn {
    border-radius: 200px;
    padding: 5px 12px;
    font-weight: 400;
    font-size: 11px;
    line-height: 12px;
    color: #fcb800;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid #fcb800;
}

.mark-paid_btn_div .mark_paid_btn.paid_amount {
    color: #6A9C06;
    border: 1px solid #6A9C06;
}
/* Mark as Paid form on an approved milestone (client, 6 Oct 2026) */
.milestone_remaining_list_ui .paid_invoice.payment_pending {
    color: #C98F00;
}
button.mark_paid_btn {
    background: transparent;
    cursor: pointer;
}
button.mark_paid_btn:hover {
    background: #6A9C06;
    color: #fff !important;
}
button.mark_paid_btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.mark_paid_form {
    border-top: 1px solid #E2E2E2;
    padding: 10px 0 4px;
}
.mark_paid_note {
    font-size: 12px;
    color: #555;
}
.mark_paid_form .mark_paid_note {
    margin: 0 10px 8px;
}
.mark_paid_form .mark_paid_fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}
.mark_paid_form .mark_paid_field {
    padding: 0 10px 8px;
    min-width: 170px;
}
.mark_paid_form .mark_paid_field span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}
.mark_paid_form .mark_paid_field .form-control {
    height: 36px;
    font-size: 13px;
    padding: 4px 10px;
}
.add_new_milestone_button_division {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #d9d9d9;
    margin-top: 12px;
    padding-top: 20px;
}

.btn.add_new_milestone {
    background: #338CDE;
    border: 2px solid #338CDE;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 10px 23px;
    display: inline-block;
}
.btn.add_new_milestone:hover {
    color: #FFFFFF;
}
.add_new_milestone_form ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
}

.add_new_milestone_form ul li {
    padding: 10px 8px;
    flex-grow: 1;
}

.add_new_milestone_form .form-group {
    margin-bottom: 0;
}

.add_new_milestone_form .form-control {
    height: 36px;
    border-radius: 5px;
    border-color: #8495B1!important;
    width: 100%;
    background: transparent!important;
}
.add_new_milestone_form .form-control:focus {
    background: transparent!important;
}
.add_new_milestone_form .ui.input img {
    position: absolute;
    right: 10px;
    bottom: 9px;
    max-width: 16px;
    z-index: -1;
}

.add_new_milestone_form ul li .dolar_sign {
    position: absolute;
    height: 100%;
    background: #8495B1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    font-size: 14px;
    color: #fff;
    border-radius: 5px 0px 0px 5px;
}

.btn.btn_add_milestone {
    background: #338CDE;
    border: 2px solid #338CDE;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 8px 23px;
    display: inline-block;
}
.btn.btn_add_milestone:hover {
    color: #FFFFFF;
}
.add_new_milestone_form ul li:first-child {
    width: 100%;
    max-width: 390px;
}

.add_new_milestone_form ul li:nth-child(2) {
    width: 100%;
    max-width: 260px;
}

.add_new_milestone_form .ui.input {
    width: 100%;
}
.add_new_milestone_form .multiple_form_group .form-control {
    padding-left: 35px;
    padding-right: 8px;
}


.solar_project_vector {
    position: relative;
}

.solar_project_img img {
    width: 100%;
}
.solar_project_img {
    background: #2695ee;
}
.solar_project_vector {
    position: relative;
    background: #0350A0;
}

.solar_project_vector .right_info {
    padding: 15px;
    width: 40%;
}

.services_modal_main, .how_it_works_popup {
    background: url(../img/service_popup_bg.png) no-repeat scroll center / cover;
}

.services_modal_main .modal-header, .how_it_works_popup .modal-header {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.services_modal_main .close, .how_it_works_popup .close {
    position: absolute;
    right: 10px;
    font-size: 40px;
}

.services_modal_main .modal-dialog {
    max-width: 820px;
    width: 95%;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.how_it_works_popup .modal-dialog {
    max-width: 1100px;
    width: 95%;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.services_modal_main .modal-title, .how_it_works_popup .modal-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 27px;
    color: #000000;
    padding: 8px 50px;
}

.services_modal_main .modal-content, .how_it_works_popup .modal-content {
    border-radius: 30px;
    border: none;
}

.services_modal_main .sevcies_popup_list_btns ul {
    display: flex;
    justify-content: center;
}

.services_modal_main .sevcies_popup_list_btns ul li {
    padding: 30px;
    width: 50%;
}

.services_modal_main .thumbanil_title {
    background: #484848;
    padding: 15px 10px;
    text-align: center;
    transition: 0.4s all;
}

.services_modal_main .active .thumbanil_title {
    background: #0085FF;
    transition: 0.4s all;
}

.services_modal_main .thumbanil_title h3 {
    font-size: 15px;
    color: #fff;
    display: inline-block;
    position: relative;
    padding-left: 24px;
}
.services_modal_main .thumbanil_title h3:before {
    position: absolute;
    content: "";
    left: 0px;
    height: 18px;
    width: 18px;
    border: 2px solid #fff;
    top: 1px;
    border-radius: 100%;
}
.service_thumbnail_box {
    border: 1px solid #484848;
    border-radius: 24px;
    overflow: hidden;
}
.active .service_thumbnail_box {
    border: 1px solid #0085FF;
    transition: 0.4s all;
}
.services_modal_main .active .thumbanil_title h3:after {
    position: absolute;
    content: "";
    left: 4px;
    height: 10px;
    width: 10px;
    background: #fff;
    top: 5px;
    border-radius: 100%;
}
.services_modal_main .featured_img {
    position: relative;
    padding: 50%;
    border-radius: 20px 20px 0px 0px;
    overflow: hidden;
}

.services_modal_main .featured_img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.services_modal_main .sevcies_popup_list_btns {
    max-width: 680px;
    margin: 0 auto;
}


.how_working_steps_box {
    text-align: center;
    max-width: 280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.how_works_modal_content {
    padding: 20px 30px;
}

.how_works_modal_content .step_text {
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    text-transform: uppercase;
    color: #084D9C;
    margin-top: 13px;
    display: inline-block;
    margin-bottom: 10px;
}

.how_works_modal_content h4 {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    text-align: center;
}

.how_works_modal_content p {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #6B6B6B;
}

.general_information_box {
    margin-top: 24px;
}

.divider_1px {
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #e4e4e4;
    margin-top: 32px;
}

.how_works_modal_content .register_btn {
    background: #338CDE;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    padding: 15px 43px;
    margin: 0 auto;
    display: block;
    margin-top: 30px;
    margin-bottom: 5px;
}

.how_working_steps_box .featured_img {
    display: inline-block;
    margin: 0 auto;
    border: 1px dashed #ababab;
    border-radius: 100%;
    padding: 4px;
}

.show-if-service-provider {
    max-height: 0px;
    overflow-y: auto;
    transition: 0.5s all;
    visibility: hidden;
}
.show-if-service-provider.open {
    max-height: 500px;
    transition: 0.5s all;
    overflow-y: inherit;
    visibility: visible;
}


.show-if-service-provider::-webkit-scrollbar {
    width: 0px;
  }


  .show-if-provider-vendor {
    max-height: 0px;
    overflow-y: auto;
    transition: 0.5s all;
    visibility: hidden;
}
.show-if-provider-vendor.open {
    max-height: 500px;
    transition: 0.5s all;
    overflow-y: inherit;
    visibility: visible;
}


.show-if-provider-vendor::-webkit-scrollbar {
    width: 0px;
  }


.register_doc_uploads .upload-register-pdf-previews {
    width: 15.2%;
}
.nice-select.custom-selectbox {
    width: 100%;
    border-radius: 3px;
    border-color: #dddddd;
    height: 50px;
    font-size: 14px;
    padding-top: 3px;
}
.nice-select.custom-selectbox:after {
    height: 11px;
    margin-top: -8px;
    right: 15px;
    width: 11px;
}
.custom-selectbox .list li {
    font-size: 13px;
}
.nice-select.open .list {
    box-shadow: 0px 7px 10px 0 rgba(0,0,0,0.2);
    border-radius: 0 0 8px 8px;
}

.ps-my-account,
.ps-section--account {
    min-height: 50vh;
}

.regular_title {
    margin-top: 35px !important;
    margin-bottom: 10px;
}

.static_display_box {
    display: flex;
    background: #A4ECF2;
    max-width: 260px;
    padding: 20px;
    border-radius: 14px;
}

.static_display_box .icon img {
    width: 100%;
    min-width: 63px;
    display: inline-block;
    margin-right: 20px;
    max-width: 63px;
}

.static_display_box .description h6 {
    font-size: 14px;
    font-weight: 400;
    color: #676767;
}

.service_request_default_table_ui {
    border: 1px solid #E0E0E0;
    margin-top: 30px;
}

label.error {
    color: red;
    margin-top: 4px;
}


.custom_services_requests_bx #ajax_datatable_filter {
    display: none;
}

ul.SubSideMenu.active {
    display: block !important;
}
/**** RANJEET RANA***/

.rating_star .selected {
    color: #FCB800;
  }

  .rating_star .fa-star {
    font-size: 18px;
  }

  .rating_star .select {
    color: #aaa7a7;
  }

  .rating_outof {
    font-weight: 700;
    font-size: 16px;
    color: #666;
  }

  .customer_count {
    font-size: 14px;
    color: #666;
  }

  .review_progrss {
    height: 10px;
    border-radius: 10px;
  }

  .review_progrss .progress-bar {
    background: #FCB800;
    border-radius: 10px;
  }

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

  .progress_lebel {
    font-size: 16px;
    font-weight: 500;
    text-align: right;
    width: 130px;
  }

  .progress_lebel_prec {
    width: auto;
    text-align: left;
  }

  .rating_box {
    display: inline-block;
    border-radius: 10px;
    background: #00000008;
  }

  .single_user_review {
    border-radius: 10px;
    background: #00000008;
    position: relative;
  }

  .user_bio img {
    width: 35px;
    height: 35px;
    border-radius: 99px;
  }

  .user_bio .user_bio_name {
    font-size: 16px;
    font-weight: 600;
  }

  .review_username_time {
    display: flex;
    margin-bottom: 5px;
}

  .review_username_time li {
    list-style: disc;
  }
  .rating_box.rating_box_hover {
    background: #ffffff;
    position: absolute;
    top: 40px;
    left: 12px;
    display: none;
    z-index: 1;
    box-shadow: 0px 0px 24px #00000033;
    transition: 0.2s all;
}

.overall_rating_point:hover .rating_box_hover {
    display: block;
    transition: 0.2s all;
}
.get_avtaar_img {
    width: 60px;
    height: 60px;
}
.status.closed {
    color: #000;
}
.status.closed:before {
    background: #FCB800;
}
.status.open:before {
    background: #0085FF;
}
.status.awarded {
    color:#000;
}
.status.awarded:before {
    background:#6A9C06;
}
.status.completed {
    color:#28a745;
}
.status.completed:before {
    background:#28a745;
}


.myrequest_header .status.awarded,
.myrequest_header .status.open,
.myrequest_header .status.closed,
.myrequest_header .status.completed {
    color: #FFF;
 }
 .service_provider_section_cover .status.open, .service_provider_section_cover .status.pending, .service_provider_section_cover .status.awarded, .service_provider_section_cover .status.closed, .service_provider_section_cover .status.completed {
    color: #000;
}


.small_info_list_bid li {
    width: 100%;
}
.small_info_list_bid li:nth-child(4) {
    width: 100%;
}
.payment_left_part_description .small_info_list_bid li {
   width: auto;
   flex-grow: 1;
}

a:hover{
    color: unset;
  }
  .rate {
    display: inline-block;
    border: 0;
}

.rate > input {
    display: none;
}

.rate > label {
    float: right;
    margin-bottom: 0;
}

.rate > label:before {
    display: inline-block;
    font-size: 16px;
    padding: 0.3rem 0.1rem;
    margin: 0;
    cursor: pointer;
    font-family: 'FontAwesome';
    content: "\f005 ";
}


.rate .half:before {
    content: "\f089 ";
    position: absolute;
    padding-right: 0;
}

.rate input:checked ~ label { color: #fcb800;  }


.user_rating a {
    display: flex;
    align-items: center;
}
.btn.remove-milestone {
    padding: 6.5px 10px;
    border-radius: 5px;
    font-size: 14px;
}

.has_applied {
    background: #a8ffac82;
    border-radius: 59px;
    padding: 3px 15px;
    color: #00a407;
    font-size: 12px;
    border: 1px solid #99f79d;
    margin-left: 7px;
}
.mile_approved {
    background: #a8ffac82;
    border-radius: 59px;
    padding: 3px 15px;
    color: #00a407;
    font-size: 12px;
    border: 1px solid #99f79d;
    margin-left: 7px;
}
.mile_pending {
    background: #fcb800;
    border-radius: 59px;
    padding: 3px 15px;
    color: #ffffff;
    font-size: 12px;
    border: 1px solid #ffba00;
    margin-left: 7px;
}
.quotation_bx p {
    margin: 0px;
}

.approvel_milestone {
    background: #8BC34A;
    border: 2px solid #8BC34A;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 6px 14px;
}
.approvel_milestone:hover {
    background: #75a83a;
    border: 2px solid #75a83a;
    color: #FFFFFF;
}

.edit_milestone_btn_box {
    flex-grow: 1;
    text-align: right;
}
.edit_milestone_bt {
    background: #338CDE;
    border: 2px solid #338CDE;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 8px 23px;
    display: inline-block;
}

.add_new_milestone_form.bg_gray {
    background: #f8f8f8;
    margin-top: 10px;
    border-radius: 5px;
    padding-bottom: 5px;
}
.edit_milestone_bx{
    display: none;
}

.milestone_remaining_list > .open .milestone_add_view_buttons .accordion_btn:after {
    transform: translate(-50%, -50%) rotate(0deg);
    transition: 0.2s all;
}

.rating_deal_page_link {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99;
    display: inline-block;
}


/* ============================================
   CHAT / MESSAGES UI
   ============================================ */

/* Main Container */
.chat_container {
    display: flex;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    overflow: hidden;
    height: 600px;
    background: #fff;
    font-family: 'Inter', var(--primary-font), sans-serif;
}

/* Left: Contacts Panel */
.chat_contacts {
    width: 320px;
    min-width: 320px;
    border-right: 1px solid #E0E0E0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.chat_contacts_header {
    padding: 21px 15px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-2nd);
    border-bottom: 1px solid #E0E0E0;
    background: #F7F3F3;
}

.chat_contacts_header i {
    color: #2695EE;
    margin-right: 6px;
}

.chat_contacts_list {
    overflow-y: auto;
    flex: 1;
}

/* Contact Item */
.chat_contact_item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
    gap: 12px;
}

.chat_contact_item:hover {
    background: #f7f9fc;
}

.chat_contact_item.active {
    background: rgba(38, 149, 238, 0.08);
    border-left: 3px solid #2695EE;
    padding-left: 13px;
}

.chat_contact_avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E0E0E0;
}

.chat_contact_item.active .chat_contact_avatar {
    border-color: #2695EE;
}

.chat_contact_info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat_contact_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.chat_contact_name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-2nd);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat_contact_time {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}

.chat_contact_project {
    font-size: 12px;
    color: #2695EE;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right: Main Chat Area */
.chat_main,
#pubnub_messages_bx {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    min-height: 0;
    border: none;
    width: auto;
    margin: 0;
}

/* Chat Header */
.chat_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #E0E0E0;
    background: #fff;
    min-height: 64px;
    flex-shrink: 0;
}

.chat_header_left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.chat_header_avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E0E0E0;
}

.chat_header_info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat_header_name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-2nd);
}

.chat_header_project {
    font-size: 12px;
    color: #2695EE;
    font-weight: 500;
    text-decoration: none;
}

.chat_header_project:hover {
    text-decoration: underline;
    color: #1a7ad4;
}

.chat_header_project i {
    margin-right: 3px;
    font-size: 11px;
}

.chat_hire_btn {
    background: #27AE60;
    color: #fff;
    padding: 7px 20px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.chat_hire_btn:hover {
    background: #219a52;
    color: #fff;
}

/* Chat Body */
.chat_body_wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Messages Area */
.chat_messages_area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat_messages_scroll {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    background: #fafafa;
    min-height: 0;
}

/* Message Bubbles */
.chat_bubble {
    max-width: 70%;
    margin-bottom: 10px;
    animation: chatFadeIn 0.2s ease;
}

.chat_bubble p {
    margin: 0;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.chat_bubble_sent {
    margin-left: auto;
}

.chat_bubble_sent p {
    background: #2695EE;
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}

.chat_bubble_received p {
    background: #fff;
    color: var(--color-2nd);
    border-radius: 14px 14px 14px 4px;
    border: 1px solid #E0E0E0;
}

@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Chat Input */
.chat_input_area {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid #E0E0E0;
    background: #fff;
    gap: 10px;
    flex-shrink: 0;
}

.chat_input {
    flex: 1;
    height: 44px;
    border: 1px solid #E0E0E0;
    border-radius: 22px;
    padding: 0 18px;
    font-size: 14px;
    font-family: 'Inter', var(--primary-font), sans-serif;
    outline: none;
    transition: border-color 0.2s ease;
}

.chat_input:focus {
    border-color: #2695EE;
}

#send_chat_bt {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    border: none;
    background: #2695EE;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    padding: 0;
}

#send_chat_bt:hover {
    background: #1a7ad4;
}

#send_chat_bt[disabled] {
    background: #ccc;
    border-color: #ccc;
    color: #fff;
    cursor: not-allowed;
}

/* Detail Panel (Right Sidebar) */
.chat_detail_panel {
    width: 260px;
    min-width: 260px;
    border-left: 1px solid #E0E0E0;
    background: #F7F3F3;
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat_detail_profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #E0E0E0;
}

.chat_detail_profile img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E0E0E0;
    margin-bottom: 10px;
}

.chat_detail_name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-2nd);
}

.chat_detail_section {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chat_detail_label {
    font-size: 12px;
    color: #999;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.chat_detail_label i {
    margin-right: 4px;
    width: 14px;
    text-align: center;
    color: #2695EE;
}

.chat_detail_value {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-2nd);
    word-break: break-word;
}

/* Empty State */
.chat_empty_state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #ccc;
    gap: 10px;
}

.chat_empty_state i {
    font-size: 48px;
}

.chat_empty_state p {
    font-size: 14px;
    color: #999;
}

/* No Messages State */
.chat_no_messages {
    text-align: center;
    padding: 80px 20px;
    background: #fcfcfc;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
}

.chat_no_messages i {
    font-size: 52px;
    color: #ddd;
    margin-bottom: 16px;
}

.chat_no_messages h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-2nd);
    margin-bottom: 8px;
}

.chat_no_messages p {
    font-size: 14px;
    color: #999;
    max-width: 400px;
    margin: 0 auto;
}

/* Loading Overlay */
.chat_loading_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.chat_loading_spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #E0E0E0;
    border-top-color: #2695EE;
    border-radius: 50%;
    animation: chat_spin 0.7s linear infinite;
}

@keyframes chat_spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 991px) {
    .chat_container {
        flex-direction: column;
        height: auto;
    }
    .chat_contacts {
        width: 100%;
        min-width: 100%;
        max-height: 250px;
        border-right: none;
        border-bottom: 1px solid #E0E0E0;
    }
    .chat_detail_panel {
        display: none;
    }
    .chat_container {
        height: auto;
        min-height: 500px;
    }
    .chat_main {
        min-height: 400px;
    }
}

@media (max-width: 1200px) {
    .chat_detail_panel {
        width: 220px;
        min-width: 220px;
    }
}

.ps-section--account .ps-section__header {
    margin-top: 10px;
    padding-bottom: 10px !important;
}
.coming_soon_tag {
    font-size: 9px;
    color: #ff8c00;
    font-weight: 600;
    font-style: italic;
    display: inline-block;
    margin-left: 3px;
    vertical-align: middle;
}
.back_to_requests_btn {
    display: inline-block;
    background: #2B4C69;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 5px;
    margin-bottom: 12px;
    text-decoration: none;
    transition: background 0.2s;
}
.back_to_requests_btn:hover {
    background: #0A263F;
    color: #fff;
    text-decoration: none;
}
.back_to_requests_btn i {
    margin-right: 6px;
}


/* ============================================
   NOTIFICATIONS UI
   ============================================ */

.notif_list_container {
    display: flex;
    flex-direction: column;
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background: #fff;
}

.notif_card {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    gap: 14px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: background 0.2s ease;
    position: relative;
    cursor: pointer;
}

.notif_card:last-child {
    border-bottom: none;
}

.notif_card:hover {
    background: #f7f9fc;
    text-decoration: none;
}

.notif_card_unread {
    background: rgba(38, 149, 238, 0.04);
    border-left: 3px solid #2695EE;
    padding-left: 15px;
}

.notif_card_unread:hover {
    background: rgba(38, 149, 238, 0.08);
}

.notif_unread_dot {
    position: absolute;
    top: 20px;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2695EE;
}

.notif_avatar {
    flex-shrink: 0;
}

.notif_avatar img {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E0E0E0;
}

.notif_card_unread .notif_avatar img {
    border-color: #2695EE;
}

.notif_content {
    flex: 1;
    min-width: 0;
}

.notif_top_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

.notif_sender {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-2nd);
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif_time {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
}

.notif_message {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif_card_unread .notif_sender {
    color: #2695EE;
}

.notif_card_unread .notif_message {
    color: var(--color-2nd);
    font-weight: 500;
}

.notif_arrow {
    flex-shrink: 0;
    color: #ccc;
    font-size: 12px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.notif_card:hover .notif_arrow {
    color: #2695EE;
    transform: translateX(2px);
}

.notif_unread_badge {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #2695EE;
    padding: 3px 10px;
    border-radius: 10px;
}

.notif_empty_state {
    text-align: center;
    padding: 80px 20px;
    background: #fcfcfc;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
}

.notif_empty_state i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 14px;
}

.notif_empty_state h4 {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-2nd);
    margin-bottom: 6px;
}

.notif_empty_state p {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 14px;
    color: #999;
    max-width: 400px;
    margin: 0 auto;
}

.notif_loader {
    width: 24px;
    height: 24px;
    border: 3px solid #E0E0E0;
    border-top-color: #2695EE;
    border-radius: 50%;
    animation: notif_spin 0.7s linear infinite;
    margin: 0 auto;
}

@keyframes notif_spin {
    to { transform: rotate(360deg); }
}

.no_milestones {
    padding: 80px 10px;
    text-align: center;
    margin-top: 30px;
    background: whitesmoke;
}

.chat_users_list .chat_username, .chat_users_list .project_title{
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 138px;
}

.no_milestones {
    padding: 80px 10px;
    text-align: center;
    margin-top: 30px;
    background: whitesmoke;
}

.notification_red_dot {
    margin-right: auto;
    background: red;
    color: white;
    padding: 2px 8px;
    border-radius: 200%;
    font-size: 11px;
    float: right;
}

.ui-datepicker {
    z-index: 999!important;
}


.menu>li.menu-item-has-children > a {
    padding-right: 20px !important;
}

.SubSideMenu li.active a {
    color: #fff !important;
}


.service_detail_img {
    position: sticky;
    top: 175px;
}
.service_detail_img .service_main_img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 16px;
}
.single_service_detail .btn-primary {
    font-size: 15px;
    padding: 7px 20px;
    background: #2695ee;
    border-color: #2695ee;
}
.red_more_sm_btn {
    background: #2695ee;
    padding: 4px 10px;
    border-radius: 3px;
    display: inline-block;
    transition: background-color .4s ease, transform .5s cubic-bezier(.33, 1, .68, 1), box-shadow .4s ease;
}
.tursid_astraSlide_items.overlay:hover .red_more_sm_btn {
    background: #1b83d6;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
    transition-delay: .06s;
}

.overlap_link {
    position: relative;
}

.overlap_link:before {
    position: absolute;
    content: "";
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.icon_inputText {
    position: relative;
}

.icon_inputText #showPass, .icon_inputText #showPass1 {
    position: absolute;
    right: 15px;
    top: 15px;
}
#alert-container .alert{
    text-transform: capitalize;
}
.invalid-feedback {
    text-transform: capitalize;
}
.header .navigation__extra .sign_up_login_btns .register_btn.active {
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    line-height: 24px;
    color: var(--color-1st);
    background: var(--header-text-color);
    border-radius: 6px;
    padding: 7px 10px !important;
    margin-top: 4px;
    margin-bottom: 4px;
    min-width: 100px;
}
.header .navigation__extra .sign_up_login_btns .login_btn.active {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--header-text-color);
    background: transparent;
    border-radius: 6px;
    padding: 7px 10px !important;
    border: 1px solid var(--header-text-color);
    margin-top: 4px;
    margin-bottom: 4px;
    min-width: 100px;
    text-align: center;
}
.parent_menu.active i {
    rotate: 180deg;
    transition: 0.2s ease-in;
}
.parent_menu i {
    transition: 0.2s ease-in;
}
.form-group.submit + .text-success {
    text-align: center;
}

.mySelectBox {
    background-color: transparent;
    border: 1px solid #8495B1;
    border-radius: 5px;
    box-shadow: 0 0 0 #000;
    font-size: 14px;
    height: 50px;
    outline: none;
    padding: 10px 20px;
    transition: all .4s ease;
    width: 100%;
}

#switchCountryCode{
    padding: 6px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
    letter-spacing: 1px;
    color: #444546;
}
#passwordStrength {
    font-weight: bold;
}

.progress {
    height: 7px;
    margin-top: 10px;
    background-color: #f0f0f0;
}

.progress-bar {
    text-align: center;
    line-height: 20px;
    color: #fff;
}

.very-weak {
    color: red;
    width: 20%;
    background-color: red;
}

.weak {
    color: orange;
    width: 40%;
    background-color: orange;
}

.moderate {
    color: yellow;
    width: 60%;
    background-color: yellow;
}

.strong {
    color: blue;
    width: 80%;
    background-color: blue;
}

.very-strong {

    background-color: green;
    width: 100%;
    color: green;
}
.passwordStrengthBx{
    display:none;
    margin-top: 13px;
}

.single_service_detail h2 {
    font-size: 26px;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 16px;
    display: inline-block;
    width: 100%;
}

.single_service_detail h3 {
    font-size: 22px;
    font-weight: 500 !important;
    margin-bottom: 4px;
}

.single_service_detail h3.pt-3 {
    margin-bottom: 12px;
    color: #0f1f33;
    font-size: 34px;
    font-weight: 700 !important;
    line-height: 1.2;
    letter-spacing: -0.4px;
}

@media (max-width: 767px) {
    .single_service_detail h3.pt-3 {
        font-size: 26px;
    }
}

.single_service_detail p {
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 400;
}


.services .slick-prev:before {
    position: absolute;
    height: 18px;
    width: 2px;
    background: #fff;
    content: "";
    top: 15px;
    transform: rotate(45deg);
    left: 15px;
    z-index: 99;
    opacity: 1;
}

.services .slick-prev:after {
    position: absolute;
    height: 18px;
    width: 2px;
    background: #fff;
    content: "";
    top: 27px;
    left: 15px;
    transform: rotate(-45deg);
    opacity: 1;
}

.services .slick-next:before {
    position: absolute;
    height: 18px;
    width: 2px;
    background: #fff;
    content: "";
    top: 15px;
    transform: rotate(-45deg);
    left: 18px;
    z-index: 99;
    opacity: 1;
}

.services .slick-next:after {
    position: absolute;
    height: 18px;
    width: 2px;
    background: #fff;
    content: "";
    top: 27px;
    left: 18px;
    transform: rotate(-135deg);
    opacity: 1;
}

.services .slick-next.slick-arrow {
    right: 0;
    z-index: 10;
    opacity: 1;
    height: 60px;
    width: 36px;
    background: rgba(0,0,0,0.8);
}

.services .slick-prev {
    left: 0;
    z-index: 10;
    opacity: 1;
    height: 60px;
    width: 36px;
    background: rgba(0,0,0,0.8);
}


.new_media_tile_sec .heading_title, .achivement_section .heading_title, .article_section .heading_title, .documents_section .heading_title, .journals_section .heading_title {
    font-size: 38px;
    color: #000;
    font-weight: 600;
}

.article_section {
    background: #FAFAFA;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-top: 40px;
}
.sub_hading {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
    color: #363636;
    margin-bottom: 40px;
}

.achivment_box .featured_img img {
    width: 100%;
}

.achivment_box {
    position: relative;
}

.achivment_box .overlay_box {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    padding: 20px;
    background: rgba(0, 0, 0, 0.64);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.3s all;
    opacity: 0;
}
.achivment_box:hover .overlay_box {
    top:0px;
    opacity: 1;
    transition: 0.3s all;
}
.achivment_box .overlay_box h5 {
    color: #fff;
    font-size: 18px;
}

.achivment_box .overlay_box p {
    color: rgba(255,255,255,0.9);
}

.article_content_box p {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 27px;
    color: #363636;
    margin-bottom: 20px;
}

.article_section .featured_img img {
   width: 100%;
}

.featured_img img {
    width: 100%;
}

.articles_list_box {
    border-radius: 10px;
    background: #FFF;
    padding: 10px;
    height: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.05);
}

.articles_list_box .featured_img {
    margin-bottom: 10px;
    position: relative;
}

.articles_list_box .description h5 {
    margin-top: 13px;
    font-size: 22px;
}

.articles_list_box .description p {
    font-size: 16px;
}

.articles_list_box .description {
    padding-bottom: 16px;
    padding-left: 10px;
    padding-right: 10px;
}

.documents_section  .document_box {
    border-radius: 10px;
    background: #FBF9F9;
    padding: 20px 10px;
}

.documents_section .document_box .icon {
    margin-right: 16px;
}

.documents_section .document_box .icon img {
    width: 100%;
    max-width: 48px;
    min-width: 50px;
}
.journals_section {
    background: #FAFAFA!important;
}

.btn_link {
    color: var(--color-1st);
    font-family: 'Poly', serif;
}

.comming_soon_with_timer_ui {
    padding: 0;
    margin-top: 20px;
    background-position: center;
}


.ms-dd .ms-list-option.option-selected, .ms-dd .ms-optgroup ul .ms-list-option.option-selected {
    background: transparent!important;
}
.ms-dd .ms-dd-arrow.ms-dd-pointer-down {
    border-top-color: #fff!important;
}
.ms-dd {
    background: transparent!important;
    border-radius: 10px;
    margin-top: 3px!important;
    width: 155px!important;
}
.ms-dd .ms-value-input {
    background: transparent;
    color: #fff;
    font-size: 0;
}
.ms-dd .ms-dd-header {
    border: 1px solid #fff!important;
    border-bottom: none;
    border-radius: 8px!important;
}

.ms-dd .ms-list-option, .ms-dd .ms-optgroup ul .ms-list-option {
    border: none!important;
}
.ms-dd .ms-dd-header .option-selected {
    color: #fff!important;
    font-weight: 500!important;
    font-size: 16px!important;
    padding: 7px 20px 7px 10px !important;
}


.service_background .service_detail_img {
    padding: 0;
    background: #fff;
}

@keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }


 .process_putt_box ul {
	list-style: none;
	counter-reset: item;
	padding-left: 32px;
}
.process_putt_box ul li {
    counter-increment: item;
    margin: 1em 0;
    padding-left: 14px;
    position: relative;
}
.process_putt_box ul li:before {
    content: counter(item);
    content: counters(item, ".") " ";
    width: 33px;
    position: absolute;
    left: -29px;
    top: -0.2em;
    font-size: 1em;
    line-height: 2.2em;
    text-align: center;
    color: white;
    background-image: url(../../../images/point_polygonal.svg);
    background-size: cover;
}

/* About page (CMS content, EN + AR). views/page.blade.php puts .tz-page--about-us on the content wrapper and drops
   the content's empty spacer paragraphs, so none of this depends on classes typed into the page (13 Oct 2026).
   The image column stays in view beside the text only from 768px: on phones the columns stack and a sticky image let
   the text scroll over it. Text is justified; headings get a smaller gap above (client: "spacing thodi kam"). */
.tz-page--about-us > .row > div:first-child {
    align-self: flex-start;
}
@media (min-width: 768px) {
    .tz-page--about-us > .row > div:first-child {
        position: sticky;
        top: 170px;
    }
}
.tz-page--about-us > .row > div:last-child p,
.tz-page--about-us > .row > div:last-child li {
    text-align: justify;
    text-justify: inter-word;
}
.tz-page--about-us > .row > div:last-child h4 {
    margin: 22px 0 8px;
}

/* CMS pages (views/page.blade.php adds tz-page--{slug}): plain lists keep their bullets; the theme resets every ul to
   none, so the points on Terms of Use / Refund Policy / Affiliate ran together (14 Oct 2026). Logical padding = RTL ok. */
.ck-content[class*="tz-page--"] ul:not([class]) {
    margin: 0 0 15px;
    padding-inline-start: 22px;
    list-style: disc;
}
.ck-content[class*="tz-page--"] ul:not([class]) li {
    margin-bottom: 6px;
    list-style: inherit;
}

.checklist_list_decorate_box {
    background: #2695ee0a;
    padding: 20px 15px 10px;
    margin: 20px 0 40px;
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
}

.checklist_list_decorate_box ul {
	list-style: none;
	counter-reset: item;
}
.checklist_list_decorate_box ul li {
    counter-increment: item;
    margin: 1em 0;
    padding-left: 14px;
    position: relative;
}
.checklist_list_decorate_box ul li:before {
    content: counter(item);
    content: "\f00c";
    font-family: 'FontAwesome';
    width: 31px;
    height: 31px;
    position: absolute;
    left: -32px;
    top: 4px;
    font-size: 1em;
    line-height: 2.2em;
    text-align: center;
    color: white;
    background: #2695ee;
    background-size: cover;
    border-radius: 100%;
    box-shadow: 0 0 0px 6px #2695ee1f;
    border: 0px solid;
}

.scrollable_menu_section {
    position: sticky;
    top: 148px;
    left: 0;
    right: 0;
    z-index: 990;
    background: #fff;
    box-shadow: 0px 7px 7px 0 rgba(0,0,0,0.1);
}
.scrollable_menu {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #cbe0f1;
    background: #fff;
    padding: 0;
}

.scrollable_menu li a {
    display: inline-block;
    padding: 10px 16px;
    font-size: 18px;
    margin: 0 15px;
    border-bottom: 2px solid transparent;
}
.scrollable_menu li .active {
    border-bottom: 2px solid #2695EE;
    color: #2695EE;
}

.post_posted_date i {
    color: #2695ee;
}
.post_posted_date {
    font-weight: 500;
}

.articles_list_box .post_posted_date {
    padding-top: 0px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
}

.document_box .post_posted_date{
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
    padding-bottom: 0px;
}


@media only screen and (max-width:1550px) {
.banner__slider {
    margin-top: 130px;
}
.vertical_height_div {
    padding-top: 140px;
}
.scrollable_menu_section {
    top: 139px;
}
.menu>li>a {
    padding: 15px 4px;
}
}

@media only screen and (max-width:1400px) {
    .custom_column_five {
        width: 33.33%;
    }

}

@media only screen and (max-width:1350px) {
    .solar_project_img {
        padding-top: 110px;
    }
}


@media only screen and (max-width: 1300px) {

.navigation .navigation__right {
    padding-left: 0;
}
}


@media only screen and (max-width:1310px) {
    .milestone_remaining_list_ui .milestone_title_amount {
        max-width: 100%;
    }
    .milestone_remaining_list_ui .list_number {
        background: #444;
        text-align: center;
        width: auto;
        color: #fff;
        padding: 4px 10px;
        border-radius: 5px;
        margin-bottom: 5px;
    }

 .add_milestone_form_ui, .open .add_milestone_form_ui {
        margin-left: 0px;
    }

}

@media only screen and (max-width:1199px) {

    .tursid_astraSlide_items .slider_content .slider_title {
        font-size: 18px;
    }

.header_social_icons li img {
    /* filter: brightness(0.4);    */
    margin-left: 0px;
}
.OR_text {
    margin-right: 30px;
}
.after_hire_project_detail iframe {
    height: 310px;
    width: 100%;
}
.after_hire_project_detail .project_right_part_column,
.after_hire_project_detail .project_left_part_description {
    width: 50%;
}

.after_hire_project_detail .project_description_column, .after_hire_project_detail .project_geo_location_map {
    width: 100%;
}
.payment_screen_tab_ui .payment_left_part_description {
    width: 100%;
}
.payment_screen_tab_ui .project_right_part_column {
    width: 100%;
}
.service_provider_section_cover .after_hire_project_detail .project_right_part_column {
    width: 100%;
}
.service_provider_section_cover .after_hire_project_detail .project_left_part_description {
    width: 100%;
}
.navigation .navigation__left, .navigation__right .menu {
  display: none;
}
.navigation__extra {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 4px 0 !important;
}
.ps-search--mobile {
    display: none;
}
.header .header__left {
    max-width: 170px;
}
.header .header__right {
    max-width: 270px;
}
.vertical_height_div {
    padding-top: 50px;
}
.banner__slider {
    margin-top: 0;
}
.custom_message_ui_pubnub .chat_users_list img, .chat_user_info .icon img {
    max-width: 40px;
    min-width: 40px;
}
.chat_users_list ul li .chat_username, .chat_user_info .chat_username {
    font-size: 15px;
}
.custom_message_ui_pubnub .chat_users_list,
.user_info_box {
    padding-top: 0px;
}

.user_info_box {
    padding-top: 67px;
}
.project_title {
    line-height: 17px;
}
.user_info_box .chat_username {
    font-size: 15px;
}
.user_pubnub_mgs {
    height: 420px;
}
.chat_users_list ul li {
    padding: 9px;
}
#back2top.active {
    bottom: 120px;
}
    .header .header__extra {
        margin-top: -6px !important;
    }
    .electric_wave svg {
        top: 16px;
        opacity: 1;
    }
    .scrollable_menu_section {
        top: 144px;
    }
}


@media only screen and (max-width:991px) {

    .new_media_tile_sec .heading_title, .achivement_section .heading_title, .article_section .heading_title, .documents_section .heading_title, .journals_section .heading_title {
        font-size: 36px;
    }

.request_service_guide_box .guide_description {
    width: 100%;
}

.request_service_guide_box .featured_img {
    width: 100%;
}
.request_service_guide_box {
    flex-direction: column-reverse;
}
.request_service_guide_box .featured_img img {
    max-width: 300px;
    width: 100%;
}
.OR_text {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 26px;
}
.solar_pannel_capacity {
    width: 100%;
}
.header__center {
    display: none;
}
.header .header__top .container, .header .header__top .ps-container {
    justify-content: space-between;
}
.ps-section__left {
    margin-bottom: 50px;
}
.ps-logo img {
    min-width: 100px;
    max-width: 100px;
}
.vertical_height_div {
    padding-top: 56px;
}
    .Download_app_card {
        margin-top: 30px;
        text-align: center;
    }

    .mobile_app {
        width: auto;
    }
    .App_store_image {
        margin-bottom: 50px;
        margin-top: 20px;
    }
    .slide_content h5 {
        font-size: 40px;
    }
    .slide_content p {
        font-size: 18px;
    }
    .electric_wave svg {
        top: 18px;
    }

    /* Tablet: roomier gaps than desktop's 5px (client, 24 Sep 2026). */
    .services {
        column-gap: 12px;
        row-gap: 12px;
        padding: 0 12px;
    }
    .tursid_astraSlide_items.overlay {
        width: calc((100% - 24px) / 3);
    }
    /* Tablet: same 400px as the <=1199px rule above (was 440px, which made tablets taller than laptops). */
    .tursid_astraSlide_items img {
        height: 400px;
    }

    .mobile_app img {
        max-width: 420px;
        margin: 0 auto;
        display: block;
    }
    .App_store_image a img {
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .solar_project_img {
        padding-top: 0;
    }
    .scrollable_menu_section {
        top: 131px;
    }
  }


@media only screen and (max-width:768px) {
.default_searchbar .form-group {
    width: 100%;
}
.header .navigation__extra .sign_up_login_btns .login_btn,
.header .navigation__extra .sign_up_login_btns .register_btn,
.header .navigation__extra .sign_up_login_btns .login_btn.active,
.header .navigation__extra .sign_up_login_btns .register_btn.active {
    font-size: 14px;
}
.ms-dd .ms-dd-header .option-selected {
    font-size: 14px!important;
}
.sign_up_login_btns li {
    margin-left: 7px;
}
.navigation__extra>li {
    margin-right: 5px;
    padding-right: 5px;
}
.navigation__extra {
    padding: 4px 16px !important;
}
.new_media_tile_sec .heading_title, .achivement_section .heading_title, .article_section .heading_title, .documents_section .heading_title, .journals_section .heading_title {
    font-size: 30px;
}
.articles_list_box .description h5 {
    font-size: 20px;
}
.selectbox_reload_sortby li {
    padding-left: 0;
}
.selectbox_reload_sortby {
    width: 100%;
    padding-left: 0px;
}
.selectbox_reload_sortby .reload_btn {
    min-height: 42px;
}
.selectbox_reload_sortby li:first-child {
    flex-grow: 1;
    padding-left: 0px;
}
.project_geo_location_map,
.project_description_column {
    width: 100%;
}
.top_navigate_btns {
    top: 28px;
}
.location_images_list li, .drawing_document_list li {
    width: 25%;
}
.after_hire_project_detail .project_right_part_column, .after_hire_project_detail .project_left_part_description {
    width: 100%;
}
.after_hire_project_detail .location_images_list li, .after_hire_project_detail .drawing_document_list li {
    width: 16.6%;
}
.myrequest_header .navtab_menus {
    padding-right: 15px;
}
.main_box .proposal_btns li {
    margin-left: 0;
    margin-right: 15px;
    margin-bottom: 0;
}
.service_provider_section_cover .after_hire_project_detail .project_right_part_column,
.service_provider_section_cover .after_hire_project_detail .project_left_part_description {
    width: 100%;
}
.register_doc_uploads .upload-register-pdf-previews {
    width: 23.2%;
}
.user_info_box {
    width: 100%;
}
.user_info_box {
    display: none;
}

.custom_message_ui_pubnub .chat_users_list img, .chat_user_info .icon img {
    max-width: 30px;
    min-width: 30px;
    margin-bottom: 5px;
}

.custom_message_ui_pubnub .chat_users_list {
    width: 40%;
}
.chat_user_info {
    left: 34.8%;
}
.chat_users_list ul li .chat_username, .chat_user_info .chat_username {
    font-size: 14px;
}
.chat_users_list ul li .project_title a {
    font-size: 12px;
    line-height: 14px;
    margin-top: 3px;
    display: inline-block;
}

    .Download_app_card {
        margin-top: 30px;
    }
    .slide_content h5 {
        font-size: 32px;
    }
    .carousel-control-prev,
    .carousel-control-next {
        top: auto;
    }
    .carousel-caption {
        right: 0;
        left: 0;
        width: 100%;
        padding-bottom: 80px;
        padding-left: 15px;
        padding-right: 15px;
    }
  }


@media only screen and (max-width:680px) {
    .add_new_milestone_form ul li:first-child {
        max-width: 100%;
    }
    .add_new_milestone_form ul {
        flex-wrap: wrap;
    }
    .add_new_milestone_form ul li:nth-child(2) {
        max-width: 100%;
    }
    .btn_add_milestone {
        width: 100%;
    }
    .progress_lebel {
        text-align: left;
        width: auto;
    }
    .review_progrss {
        width: 100% !important;
    }
    .rating_box {
        width: 100%;
    }
    .progress_lebel.progress_lebel_prec {
        position: absolute;
        right: 0;
        top: 0;
    }
    .chat_users_list .chat_username, .chat_users_list .project_title {
        max-width: 70px;
        display: block;
    }
    .chat_users_list ul li {
        padding: 11.5px;
    }
    .custom_column_five {
        width: 50%;
    }
    .solar_project_vector .right_info {
        width: 100%;
    }
    .scrollable_menu li a {
        padding: 10px 10px;
        font-size: 16px;
        margin: 0 5px;
    }
    body .navigation .ps-container {
    padding: 0 0;
}
    .navigation__extra {
        align-items: center;
    }
    .navigation__extra .go_to_dashboard a {
    padding: 0 0 !important;
}
}

@media only screen and (max-width:575px) {
    .myrequest_header .navtab_menus .nav-tabs .nav-link {
        padding: 10px 5px;
        flex-grow: 1;
        text-align: center;
    }
    .after_hire_project_detail .location_images_list li, .after_hire_project_detail .drawing_document_list li {
        width: 33.33%;
    }
.after_hire_project_detail .project_hire_row {
    margin: 0 -14px;
}

.wrapper {
    padding: 20px 18px 30px;
}
.main_heading {
    font-size: 18px;
}
.energy_calculator_cover tr td:last-child {
    width: 180px;
}
.services_modal_main .thumbanil_title h3 {
    font-size: 15px;
}
.services_modal_main .sevcies_popup_list_btns ul li {
    padding: 30px 5px;
}
.services_modal_main, .how_it_works_popup {
    padding: 5px;
}
.register_doc_uploads .upload-register-pdf-previews {
    width: 100%;
}

/* Notifications responsive */
.notif_card {
    padding: 14px 12px;
    gap: 10px;
}
.notif_card_unread {
    padding-left: 10px;
}
.navigation .ps-container {
    padding: 0 0;
}
.ps-search--mobile {
    padding: 10px 0px;
}
.ps-search--mobile, .ps-shopping .ps-shopping__view {
    display: none !important;
}
.Download_app_card h4 {
    font-size: 22px;
}
.color_blue {
    font-size: 22px;
}
.Download_app_card {
    margin-top: 30px;
}
.download_app_card {
    padding-top: 50px;
}
.services {
    column-gap: 12px;
    row-gap: 12px;
    padding: 0 12px;
}
.tursid_astraSlide_items.overlay {
    width: calc((100% - 12px) / 2);
}
/* Phones: shorter service cards, 500px was too tall (client, 24 Sep 2026). */
.tursid_astraSlide_items img {
    height: 400px;
}
.scrollable_menu li a {
    padding: 10px 5px;
    font-size: 15px;
    margin: 0 0px;
}
}


@media only screen and (max-width:480px) {
.services_modal_main .thumbanil_title h3 {
    font-size: 13px;
}
.services_modal_main .thumbanil_title h3:before {
    top: -1px;
}
.services_modal_main .active .thumbanil_title h3:after {
    top: 3px;
}
.services_modal_main .modal-title, .how_it_works_popup .modal-title {
    font-size: 20px;
    padding: 8px 40px;
}
.chat_users_list .chat_username {
    max-width: 68px;
}
.custom_message_ui_pubnub .chat_users_list {
    width: 50%;
}
.chat_user_info {
    left: 40%;
}
.ps-block--user-header .ps-block__right a:not(.login_btn):not(.register_btn) {
    font-size: 12px!important;
}
.user_image img {
    width: 26px;
    height: 26px;
    min-width: 26px;
    margin-right: 5px;
}
    .custom_column_five {
        width: 100%;
    }
    .small_info_list_bid li {
    width: 50%;
}
.services {
    row-gap: 14px;
    padding: 0 14px;
}
.tursid_astraSlide_items.overlay {
    width: 100%;
}
.ms-dd {
    margin-top: 1px !important;
}
.ps-my-account .ps-form--account {
    padding-top: 0px;
}
.ms-dd .ms-dd-header {
    min-height: 40px !important;
}
    .navigation__extra {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width:440px) {
    .header .header__left {
        max-width: 110px;
    }
    .header_social_icons li {
        padding: 10px 5px;
    }
}
.download_pro_doc {
    cursor: pointer;
    width: 15px;
    height: 15px;
    font-size: 14px;
    position: absolute;
    top: 7px;
    left: 7px;
}

/* ============================================
   MODERN SIDEBAR REDESIGN
   Uses existing design tokens:
   - Font: 'Inter', var(--primary-font)
   - Blue: #2695EE (primary action)
   - Gold: var(--color-1st) / #fcb800
   - Dark: var(--color-2nd) / #222222
   - Borders: #E0E0E0
   - Light BG: #F7F3F3, #fcfcfc
   - Radius: 5px-6px
   ============================================ */

/* Sidebar Container */
.ps-section--account .ps-section__left {
    margin-bottom: 30px;
}

.ps-widget--account-dashboard {
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    overflow: hidden;
}

/* Profile Header */
.ps-widget--account-dashboard .ps-widget__header {
    padding: 16px 20px 16px;
    background: var(--color-2nd);
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    border-bottom: 3px solid var(--color-1st);
    position: relative;
}

.ps-widget--account-dashboard .ps-widget__header img {
    border-radius: 50%;
    flex-basis: 46px;
    max-width: 46px;
    height: 46px;
    object-fit: cover;
    border: 2px solid var(--color-1st);
}

.ps-widget--account-dashboard .ps-widget__header figure {
    padding-left: 14px;
    flex-basis: 100%;
}

.ps-widget--account-dashboard .ps-widget__header figure figcaption {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-weight: 400;
}

.ps-widget--account-dashboard .ps-widget__header figure p {
    color: #ffffff;
    font-size: 16px;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-weight: 600;
    margin-bottom: 0;
}

/* Logout button in header */
.ps-widget--account-dashboard .ps-widget__header .sidebar-header-logout {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 5px;
    background: rgba(231, 76, 60, 0.85);
    color: #fff;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.25s ease;
    align-self: center;
    margin-left: auto;
    text-decoration: none;
    white-space: nowrap;
}

.ps-widget--account-dashboard .ps-widget__header .sidebar-header-logout:hover {
    background: rgba(231, 76, 60, 1);
    color: #fff;
}

/* Sidebar Menu List */
.ps-widget--account-dashboard .ps-widget__content.customer_dashboard_leftsidebar {
    padding: 6px 0;
}

.ps-widget--account-dashboard .ps-widget__content ul {
    border: none;
    padding: 0;
    margin: 0;
}

.ps-widget--account-dashboard .ps-widget__content ul li {
    border-bottom: none;
    margin: 1px 6px;
}

.ps-widget--account-dashboard .ps-widget__content ul li a {
    color: var(--color-2nd);
    display: flex;
    align-items: center;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 10px 14px;
    text-transform: capitalize;
    border-radius: 5px;
    border-bottom: none;
    transition: all 0.25s ease;
    position: relative;
    gap: 2px;
}

.ps-widget--account-dashboard .ps-widget__content ul li a:hover {
    background-color: rgba(38, 149, 238, 0.08);
    color: #2695EE;
    padding-left: 18px;
}

.ps-widget--account-dashboard .ps-widget__content ul li a:hover img {
    filter: brightness(0) saturate(100%) invert(46%) sepia(85%) saturate(1200%) hue-rotate(190deg) brightness(98%) contrast(92%);
    opacity: 1;
}

.ps-widget--account-dashboard .ps-widget__content ul li:last-child {
    border-bottom: none;
}

/* Active State */
.ps-widget--account-dashboard .ps-widget__content ul li.active {
    background-color: transparent;
}

.ps-widget--account-dashboard .ps-widget__content ul li.active > a {
    background: #2695EE;
    color: #fff;
    font-weight: 600;
}

.ps-widget--account-dashboard .ps-widget__content ul li.active > a img {
    filter: brightness(0) invert(1);
}

.ps-widget--account-dashboard .ps-widget__content ul li.active > a .notification_red_dot {
    background: #fff;
    color: #2695EE;
}

/* Active state for submenu parent when child is active */
.ps-widget--account-dashboard .ps-widget__content ul li.active ul li a {
    color: var(--color-2nd);
    background: transparent;
    font-weight: 400;
}

.ps-widget--account-dashboard .ps-widget__content ul li.active ul li a:hover {
    background: rgba(38, 149, 238, 0.08);
    color: #2695EE;
}

/* Icon Styling */
.customer_dashboard_leftsidebar ul li a .icon {
    min-width: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.customer_dashboard_leftsidebar ul li a img {
    width: 20px;
    max-width: 20px;
    opacity: 0.65;
    transition: all 0.3s ease;
}

.customer_dashboard_leftsidebar ul li.active > a img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.customer_dashboard_leftsidebar ul li a:hover img {
    filter: brightness(0) saturate(100%) invert(46%) sepia(85%) saturate(1200%) hue-rotate(190deg) brightness(98%) contrast(92%);
    opacity: 1;
}

/* Notification Badge */
.notification_red_dot {
    margin-left: auto;
    margin-right: 0;
    background: #e74c3c;
    color: white;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-weight: 600;
    float: none;
    line-height: 16px;
    min-width: 22px;
    text-align: center;
}

/* Parent Menu / Expandable */
.ps-widget--account-dashboard .ps-widget__content ul li.parent_menu {
    margin: 1px 6px;
}

.ps-widget--account-dashboard .ps-widget__content ul li.parent_menu > a {
    justify-content: space-between;
}

.ps-widget--account-dashboard .ps-widget__content ul li.parent_menu > a span {
    display: flex;
    align-items: center;
}

.parent_menu > a > i {
    font-size: 12px;
    color: #999;
    transition: all 0.2s ease-in;
}

.parent_menu.active > a > i {
    rotate: 180deg;
    color: #2695EE;
    transition: 0.2s ease-in;
}

.ps-widget--account-dashboard .ps-widget__content ul li.parent_menu.active > a.issubmenu {
    background: #2695EE;
    color: #fff;
    font-weight: 600;
}

.ps-widget--account-dashboard .ps-widget__content ul li.parent_menu.active > a.issubmenu img {
    filter: brightness(0) invert(1);
}

.ps-widget--account-dashboard .ps-widget__content ul li.parent_menu.active > a.issubmenu > i {
    color: #fff;
}

.ps-widget--account-dashboard .ps-widget__content ul li.active > a:hover {
    padding-left: 14px;
}

/* SubSideMenu - Submenu Items */
ul.SubSideMenu {
    display: none;
    padding: 2px 0 2px 0 !important;
    margin: 15px 0 15px 0 !important;
    border: none !important;
    background: #fcfcfc;
    border-radius: 0px;
    border-left: 2px solid #E0E0E0 !important;
    margin-left: 18px !important;
}

ul.SubSideMenu.active {
    display: block !important;
}

.SubSideMenu li {
    margin: 0 !important;
}

.SubSideMenu li a {
    font-family: 'Inter', var(--primary-font), sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #666 !important;
    padding: 8px 14px 8px 16px !important;
    border-radius: 0 5px 5px 0 !important;
    position: relative;
}

.SubSideMenu li a:hover {
    background: rgba(38, 149, 238, 0.08) !important;
    color: #2695EE !important;
    padding-left: 20px !important;
}

.SubSideMenu li.active a {
    color: #2695EE !important;
    background: rgba(38, 149, 238, 0.08) !important;
    font-weight: 600 !important;
    border-left: 2px solid #2695EE !important;
    margin-left: -2px;
}

/* Logout Item */
.ps-widget--account-dashboard .ps-widget__content ul > li:last-child {
    margin-top: 4px;
    border-top: 1px solid #E0E0E0;
}

.ps-widget--account-dashboard .ps-widget__content ul > li:last-child > a {
    color: #999;
    border-radius: 0;
}

.ps-widget--account-dashboard .ps-widget__content ul > li:last-child > a:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.06);
    padding-left: 18px;
}

.ps-widget--account-dashboard .ps-widget__content ul > li:last-child > a:hover img {
    filter: invert(37%) sepia(91%) saturate(2697%) hue-rotate(340deg) brightness(95%) contrast(94%);
}

/* Separator before My Requests */
.ps-widget--account-dashboard .ps-widget__content ul > li.my_requests {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #E0E0E0;
}

/* Responsive */
@media (max-width: 991px) {
    .ps-widget--account-dashboard {
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .ps-widget--account-dashboard .ps-widget__header {
        padding: 18px 15px;
    }

    .ps-widget--account-dashboard .ps-widget__content ul li a {
        padding: 9px 12px;
        font-size: 13px;
    }

    .SubSideMenu li a {
        padding: 7px 12px 7px 14px !important;
        font-size: 12px !important;
    }
}

/* Dashboard sidebar — responsive fixes (Sep 2026) */
.ps-widget--account-dashboard .ps-widget__header figure {
    min-width: 0;
}

.ps-widget--account-dashboard .ps-widget__header figure p {
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Keep "(Coming soon)" on the same line as the service name. */
.SubSideMenu li a {
    flex-wrap: nowrap;
    white-space: nowrap;
    column-gap: 6px !important;
}

.SubSideMenu .coming_soon_tag {
    margin-left: 0;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .ps-widget--account-dashboard .ps-widget__header .sidebar-header-logout__text {
        display: none;
    }
}

/* ============================================
   EV FORM ALERTS
   ============================================ */
.ev_form_alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-family: 'Inter', var(--primary-font), sans-serif;
}

.ev_form_alert_error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.ev_form_alert_icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ev_form_alert_error .ev_form_alert_icon {
    color: #dc2626;
}

.ev_form_alert_content {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
}

.ev_form_alert_content strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.ev_form_alert_content ul {
    margin: 0;
    padding-left: 18px;
}

.ev_form_alert_content ul li {
    list-style: disc;
    font-size: 13px;
    margin-bottom: 2px;
    color: #b91c1c;
}

/* ============================================
   EV FORM FIELD VALIDATION ERRORS
   ============================================ */
.ev_field_error {
    display: block;
    color: #dc2626;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
    padding-left: 2px;
}

.ev_input_error {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

.ev_input_error:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

/* ============================================
   SERVICE REQUEST DETAIL - RIGHT COLUMN CARDS
   ============================================ */

/* Summary Card */
.detail_summary_card {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 16px;
}

.detail_summary_card .tracking_card_title {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-2nd);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

/* Tips Card */
.detail_tips_card {
    background: rgba(38, 149, 238, 0.04);
    border: 1px solid rgba(38, 149, 238, 0.15);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 16px;
}

.detail_tips_card .tracking_card_title {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #2695EE;
    margin-bottom: 14px;
}

.detail_tips_card .tracking_card_title i {
    margin-right: 6px;
}

.detail_tips_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail_tips_list li {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    padding: 5px 0 5px 18px;
    position: relative;
}

.detail_tips_list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2695EE;
}

/* Make project_hire_row always flex */
.after_hire_project_detail .project_hire_row,
.myrequest_detail_page_ui .project_hire_row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.myrequest_detail_page_ui .project_left_part_description {
    width: 63%;
     padding: 10px 15px;
}

.myrequest_detail_page_ui .project_right_part_column {
    padding: 10px 15px;
}

@media (max-width: 991px) {
    .myrequest_detail_page_ui .project_left_part_description,
    .myrequest_detail_page_ui .project_right_part_column {
        width: 100%;
    }
}

/* Proposals Count Card */
.detail_proposals_count {
    text-align: center;
    padding: 16px 0;
}

.detail_proposals_number {
    display: block;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #2695EE;
    line-height: 1;
}

.detail_proposals_text {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 14px;
    color: #999;
    font-weight: 500;
    margin-top: 4px;
    display: block;
}

.detail_view_proposals_btn {
    display: block;
    text-align: center;
    padding: 10px;
    background: rgb(38 149 238 / 18%);
    border-radius: 5px;
    color: #2695EE;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 10px;
    transition: background 0.2s ease;
}

.detail_view_proposals_btn:hover {
    background: rgb(38 149 238 / 26%);
    color: #2695EE;
    text-decoration: none;
}

.detail_view_proposals_btn i {
    margin-left: 4px;
    font-size: 11px;
}

.detail_waiting_text {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 13px;
    color: #999;
    text-align: center;
    margin: 8px 0 0;
    line-height: 1.5;
}

/* Timeline */
.detail_timeline_list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.detail_timeline_list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 20px;
    position: relative;
    padding-left: 4px;
}

.detail_timeline_list li:last-child {
    padding-bottom: 0;
}

.detail_timeline_list li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: #E0E0E0;
}

.detail_timeline_list li:last-child::before {
    display: none;
}

.detail_timeline_done::before {
    background: #2695EE !important;
}

.detail_timeline_dot {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 2px solid #E0E0E0;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.detail_timeline_done .detail_timeline_dot {
    border-color: #2695EE;
    background: #2695EE;
}

.detail_timeline_done .detail_timeline_dot::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    font-size: 10px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.detail_timeline_pending .detail_timeline_dot {
    border-color: #E0E0E0;
    background: #f8f8f8;
}

.detail_timeline_title {
    display: block;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-2nd);
}

.detail_timeline_pending .detail_timeline_title {
    color: #bbb;
}

.detail_timeline_date {
    display: block;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.detail_timeline_pending .detail_timeline_date {
    color: #ccc;
}

/* Active timeline step (current step) */
.detail_timeline_active .detail_timeline_dot {
    background: #fff;
    border: 2px solid #F7941D;
    box-shadow: 0 0 0 4px rgba(247, 148, 29, 0.15);
}

.detail_timeline_active .detail_timeline_dot::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #F7941D;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: timeline_pulse 2s ease-in-out infinite;
}

@keyframes timeline_pulse {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.3); }
}

.detail_timeline_active .detail_timeline_title {
    color: #333;
    font-weight: 600;
}

.detail_timeline_active .detail_timeline_date {
    color: #F7941D;
    font-weight: 500;
}

.detail_timeline_active::before {
    border-left-color: #F7941D !important;
}

/* Milestone Progress Bar */
.detail_milestone_progress {
    margin-top: 12px;
}

.detail_milestone_bar_bg {
    width: 100%;
    height: 8px;
    background: #E8E8E8;
    border-radius: 4px;
    overflow: hidden;
}

.detail_milestone_bar_fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #34c759);
    border-radius: 4px;
    transition: width 0.5s ease;
    min-width: 0;
}

.detail_milestone_stats {
    margin-top: 8px;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 13px;
    color: #666;
}

.detail_milestone_bar_cancelled {
    background: linear-gradient(90deg, #999, #bbb) !important;
}

.detail_milestone_paid_info {
    margin-top: 10px;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 13px;
    color: #28a745;
    font-weight: 500;
}

.detail_milestone_paid_info i {
    margin-right: 4px;
}

/* Bid Status Card (Provider) */
.detail_bid_status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}

.detail_bid_status_icon {
    width: 40px;
    height: 40px;
    background: #FFF3E0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F7941D;
    font-size: 18px;
}

.detail_bid_status_text {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #F7941D;
}

/* Completed Card */
.detail_completed_card {
    border-color: #28a745;
    background: #f0faf3;
}

.detail_completed_card .tracking_card_title {
    color: #28a745;
}

.detail_completed_card .tracking_card_title i {
    margin-right: 6px;
}

.detail_completed_text {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 14px;
    color: #555;
    margin: 8px 0 0;
    line-height: 1.5;
}

/* Closed Card */
.detail_closed_card {
    border-color: #dc3545;
    background: #fef2f2;
}

.detail_closed_card .tracking_card_title {
    color: #dc3545;
}

.detail_closed_card .tracking_card_title i {
    margin-right: 6px;
}

/* Expired timeline step (deadline passed, no action possible) */
.detail_timeline_expired .detail_timeline_dot {
    background: #E0E0E0;
    border: 2px solid #bbb;
}

.detail_timeline_expired .detail_timeline_title {
    color: #999;
    text-decoration: line-through;
}

.detail_timeline_expired .detail_timeline_date {
    color: #bbb;
}

/* Cancelled timeline step */
.detail_timeline_cancelled .detail_timeline_dot {
    background: #fff;
    border: 2px solid #dc3545;
}

.detail_timeline_cancelled .detail_timeline_dot::after {
    content: '\d7';
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    color: #dc3545;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

.detail_timeline_cancelled .detail_timeline_title {
    color: #999;
    text-decoration: line-through;
}

.detail_timeline_cancelled .detail_timeline_date {
    color: #dc3545;
    font-weight: 500;
}

.detail_text_expired {
    color: #dc3545 !important;
    font-weight: 500;
}

/* Expired Card */
.detail_expired_card {
    border-color: #F7941D;
    background: #FFF8EE;
}

.detail_expired_card .tracking_card_title {
    color: #E67E00;
}

.detail_expired_card .tracking_card_title i {
    margin-right: 6px;
}

.detail_expired_text {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 14px;
    color: #555;
    margin: 8px 0 0;
    line-height: 1.5;
}

.detail_expired_hint {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 13px;
    color: #888;
    margin: 8px 0 0;
    line-height: 1.5;
}

/* Action Needed Card (deadline passed but has proposals) */
.detail_action_card {
    border-color: #007bff;
    background: #f0f6ff;
}

.detail_action_card .tracking_card_title {
    color: #0056b3;
}

.detail_action_card .tracking_card_title i {
    margin-right: 6px;
}

/* Conditional inputs revealed by a radio/select above them (origin country,
   "Other" property type). Uses px because the theme sets html { font-size: 10px },
   which makes Bootstrap's rem-based mt-* helpers far too tight here. */
.ev_conditional_field {
    margin-top: 16px;
}

/* ============================================
   EV CHARGER SPECIFICATIONS CARD
   ============================================ */
.ev_specs_card {
    background: #f9fafb;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 20px;
    margin-top: 24px;
    margin-bottom: 20px;
}

.ev_specs_title {
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-2nd);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E0E0E0;
}

.ev_specs_title i {
    color: #2695EE;
    margin-right: 8px;
}

.ev_specs_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.ev_spec_item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
}

.ev_spec_icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: rgba(38, 149, 238, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2695EE;
    font-size: 15px;
}

.ev_spec_label {
    display: block;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ev_spec_value {
    display: block;
    font-family: 'Inter', var(--primary-font), sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-2nd);
    margin-top: 2px;
}

@media (max-width: 576px) {
    .ev_specs_grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SERVICE REQUEST DETAIL - RESPONSIVE FIXES
   ============================================ */

/* Prevent horizontal overflow globally */
.myrequest_detail_page_ui {
    overflow-x: hidden;
}

.project_geo_location_map iframe {
    max-width: 100%;
}

/* 1199px - Tablet landscape */
@media only screen and (max-width: 1199px) {
    .myrequest_detail_page_ui .project_left_part_description,
    .myrequest_detail_page_ui .project_right_part_column {
        width: 50%;
    }
    .ev_specs_grid {
        grid-template-columns: 1fr;
    }
}

/* 991px - Tablet portrait */
@media only screen and (max-width: 991px) {
    .myrequest_detail_page_ui .project_left_part_description,
    .myrequest_detail_page_ui .project_right_part_column {
        width: 100%;
    }
    .myrequest_header {
        flex-wrap: wrap;
    }
    .myrequest_header .navtab_menus {
        padding-right: 15px;
        width: 100%;
    }
    .top_navigate_btns {
        position: relative;
        top: auto;
        transform: none;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .small_info_list_bid {
        flex-wrap: wrap;
    }
    .small_info_list_bid li {
        width: 50%;
    }
    .project_description_column,
    .project_geo_location_map {
        width: 100% !important;
    }
    .detail_timeline_list {
        padding-left: 0;
    }
}

/* 768px - Mobile landscape */
@media only screen and (max-width: 768px) {
    .myrequest_header .navtab_menus {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 40px;
    }
    .myrequest_header .navtab_menus .nav-tabs .nav-link {
        padding: 8px 14px;
        font-size: 13px;
    }
    .ev_specs_grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ev_spec_item {
        padding: 10px;
    }
    .ev_spec_icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 13px;
    }
    .ev_spec_value {
        font-size: 13px;
    }
    .location_images_list li {
        width: 25% !important;
    }
    .drawing_document_list li {
        width: 25% !important;
    }
    .detail_proposals_number {
        font-size: 28px;
    }
}

/* 575px - Mobile portrait */
@media only screen and (max-width: 575px) {
    .myrequest_header .navtab_menus {
        padding-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .myrequest_header .navtab_menus .nav-tabs {
        flex-wrap: nowrap;
    }
    .myrequest_header .navtab_menus .nav-tabs .nav-link {
        padding: 8px 8px;
        font-size: 12px;
        flex-grow: 1;
        text-align: center;
        white-space: nowrap;
    }
    .top_navigate_btns {
        flex-wrap: wrap;
        gap: 8px;
    }
    .top_navigate_btns li {
        margin-right: 8px;
    }
    .small_info_list_bid li {
        width: 100%;
    }
    .ev_specs_card {
        padding: 14px;
    }
    .ev_specs_grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ev_specs_title {
        font-size: 14px;
    }
    .location_images_list li {
        width: 33.33% !important;
    }
    .drawing_document_list li {
        width: 33.33% !important;
    }
    .project_geo_location_map iframe {
        height: 250px !important;
    }
    .detail_summary_card {
        padding: 14px;
    }
    .detail_tips_card {
        padding: 14px;
    }
    .project_detail_title {
        font-size: 17px;
    }
}

/* 480px - Small mobile */
@media only screen and (max-width: 480px) {
    .location_images_list li {
        width: 50% !important;
    }
    .drawing_document_list li {
        width: 50% !important;
    }
    .myrequest_header .navtab_menus .nav-tabs .nav-link {
        padding: 7px 5px;
        font-size: 11px;
    }
}


/* ============================================
   CONTACT PAGE (client feedback 21 Sep 2026)
   ============================================ */
.turshid-contact {
    --tc-blue: #2695EE;
    --tc-blue-deep: #0B5FB8;
    --tc-navy: #0B1F3A;
    --tc-navy-2: #10294d;
    --tc-sun: #FCB800;
    --tc-ink: #0f1f33;
    --tc-muted: #5b6b7f;
    --tc-line: #dfe6ef;
    padding: 0 0 20px;
    font-family: 'Inter', var(--primary-font), sans-serif;
}

/* ---------- Hero ---------- */
.tc-hero {
    position: relative;
    overflow: hidden;
    padding: 34px 32px 98px;
    color: #fff;
    background:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(125deg, var(--tc-blue) 0%, var(--tc-blue-deep) 55%, var(--tc-navy) 100%);
    border-radius: 24px;
}
.tc-hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.tc-hero__glow--one {
    top: -120px;
    right: -60px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(252, 184, 0, 0.45) 0%, rgba(252, 184, 0, 0) 70%);
}
.tc-hero__glow--two {
    bottom: -160px;
    left: 30%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(38, 149, 238, 0.55) 0%, rgba(38, 149, 238, 0) 70%);
}
.tc-hero__rays {
    position: absolute;
    top: 34px;
    right: 64px;
    width: 190px;
    height: 190px;
    fill: none;
    stroke: rgba(252, 184, 0, 0.85);
    stroke-width: 3;
    stroke-linecap: round;
    animation: tc-spin 40s linear infinite;
}
.tc-hero__rays circle {
    fill: rgba(252, 184, 0, 0.18);
}
@keyframes tc-spin {
    to { transform: rotate(360deg); }
}
.tc-hero__content {
    position: relative;
    max-width: 1000px;
}
.tc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.tc-hero__eyebrow i {
    color: var(--tc-sun);
}
.tc-hero__title {
    margin: 18px 0 14px;
    color: #fff;
    font-size: clamp(34px, 5vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1px;
}
.tc-hero__title span {
    position: relative;
    color: var(--tc-sun);
}
.tc-hero__title span:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 8px;
    background: rgba(252, 184, 0, 0.3);
    border-radius: 4px;
    z-index: -1;
}
.tc-hero__lead {
    max-width: 100%;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
    line-height: 1.65;
}

/* ---------- Body: info panel + form ---------- */
.tc-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 490px) 1fr;
    gap: 28px;
    align-items: start;
    margin: -76px 28px 0;
}

/* Info panel */
.tc-info {
    position: sticky;
    top: 170px;
    overflow: hidden;
    padding: 32px 28px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(38, 149, 238, 0.35) 0, rgba(38, 149, 238, 0) 55%),
        linear-gradient(160deg, var(--tc-navy-2) 0%, var(--tc-navy) 100%);
    border-radius: 20px;
}
.tc-info__head h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}
.tc-info__head p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.6;
}
.tc-info__channels {
    display: grid;
    gap: 12px;
    margin: 24px 0;
}
.tc-channel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    transition: background .25s, border-color .25s, transform .25s;
}
.tc-channel:hover {
    color: #fff;
    background: rgba(38, 149, 238, 0.22);
    border-color: rgba(38, 149, 238, 0.6);
    transform: translateY(-2px);
}
.tc-channel__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 18px;
    background: linear-gradient(135deg, var(--tc-blue), var(--tc-blue-deep));
    border-radius: 12px;
    box-shadow: 0 10px 20px -10px rgba(38, 149, 238, 0.9);
}
.tc-channel__text {
    min-width: 0;
    flex: 1;
}
.tc-channel__text small {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.tc-channel__text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.tc-channel__go {
    color: rgba(255, 255, 255, 0.4);
    transition: transform .25s, color .25s;
}
.tc-channel:hover .tc-channel__go {
    color: var(--tc-sun);
    transform: translateX(3px);
}
.tc-info__label {
    display: block;
    margin-bottom: 14px;
    color: var(--tc-sun);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.tc-info__steps ol {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tc-info__steps ol:before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 14px;
    width: 1px;
    background: linear-gradient(rgba(252, 184, 0, 0.7), rgba(38, 149, 238, 0.4));
}
.tc-info__steps li {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 16px;
}
.tc-info__steps li:last-child {
    padding-bottom: 0;
}
.tc-info__steps li > span {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    color: var(--tc-navy);
    font-size: 13px;
    font-weight: 700;
    background: var(--tc-sun);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--tc-navy);
}
.tc-info__steps li div {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.5;
}
.tc-info__steps li strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.tc-info__tagline {
    margin: 26px 0 0;
    padding-top: 18px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-style: italic;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
}

/* Form card */
.tc-form {
    padding: 36px;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 20px;
    box-shadow: 0 30px 70px -35px rgba(15, 31, 51, 0.35);
}
.tc-form__head {
    margin-bottom: 26px;
}
.tc-form__head h3 {
    margin: 0 0 6px;
    color: var(--tc-ink);
    font-size: 26px;
    font-weight: 700;
}
.tc-form__head p {
    margin: 0;
    color: var(--tc-muted);
    font-size: 15px;
}
.tc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
}
.tc-field {
    min-width: 0;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}
.tc-field--full {
    grid-column: 1 / -1;
}
.tc-field > label,
.tc-field > legend {
    display: block;
    width: auto;
    margin-bottom: 8px;
    padding: 0;
    color: #1b2559;
    font-size: 15px;
    font-weight: 700;
    border: 0;
}
.tc-field .req {
    color: #e5484d;
}
.tc-control {
    position: relative;
    display: flex;
    align-items: center;
    background: #fafcff;
    border: 1px solid #cdcdcd;
    border-radius: 8px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.tc-control:hover {
    border-color: #aebcd0;
}
.tc-control:focus-within {
    background: #fff;
    border-color: var(--tc-blue);
    box-shadow: 0 0 0 3px rgba(38, 149, 238, 0.14);
}
.tc-control input,
.tc-control select,
.tc-control textarea {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    color: #1b2559;
    font-size: 16px;
    font-family: inherit;
    background: transparent;
    border: 0;
    border-radius: 8px;
    outline: none;
    box-shadow: none;
}
.tc-control textarea {
    height: auto;
    min-height: 130px;
    padding-top: 13px;
    padding-bottom: 13px;
    line-height: 1.55;
    resize: vertical;
}
.tc-control select {
    padding-right: 44px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.tc-control select:invalid {
    color: #8a94a6;
}
.tc-control select option {
    color: #1b2559;
}
/* Solid caret, like a native select */
.tc-control--select:after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    margin-top: -3px;
    border-top: 6px solid #5b6478;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    pointer-events: none;
}
.tc-control input::placeholder,
.tc-control textarea::placeholder {
    color: #8a94a6;
}

/* Errors + alerts */
.tc-field.is-invalid .tc-control {
    background: #fff;
    border-color: #e5484d;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.1);
}
.tc-error {
    display: block;
    margin-top: 6px;
    color: #e5484d;
    font-size: 13px;
}
.tc-error:empty {
    display: none;
}
.tc-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 18px;
    padding: 13px 16px;
    font-size: 14px;
    border-radius: 12px;
}
.tc-alert i {
    font-size: 18px;
}
.tc-alert.is-success {
    color: #0b6b3a;
    background: #e8f7ee;
    border: 1px solid #b7e4c7;
}
.tc-alert.is-error {
    color: #a1262b;
    background: #fdeeee;
    border: 1px solid #f5c2c4;
}

/* Footer of the form */
.tc-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--tc-line);
}
.tc-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    background: #0076DF;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
    transition: background .2s;
}
.tc-submit:hover {
    background: #0063bd;
}
.tc-submit i {
    font-size: 15px;
    transition: transform .3s;
}
.tc-submit:hover i {
    transform: translate(3px, -2px);
}
.tc-submit.is-loading {
    opacity: .75;
    cursor: wait;
}
.tc-submit.is-loading i {
    animation: tc-fly .8s ease-in-out infinite alternate;
}
@keyframes tc-fly {
    to { transform: translate(6px, -5px); }
}
.tc-safe {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 320px;
    margin: 0;
    color: var(--tc-muted);
    font-size: 13px;
    line-height: 1.5;
}
.tc-safe i {
    color: var(--tc-blue);
    font-size: 24px;
}
.tc-safe strong {
    color: var(--tc-ink);
    font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .tc-body {
        grid-template-columns: 1fr;
        margin: -76px 16px 0;
    }
    .tc-info {
        position: relative;
        top: 0;
        order: 2;
    }
    .tc-info__channels {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}
@media (max-width: 767px) {
    .tc-hero {
        padding: 34px 22px 100px;
        border-radius: 18px;
    }
    .tc-hero__rays {
        top: 18px;
        right: -40px;
        width: 140px;
        height: 140px;
        opacity: .5;
    }
    .tc-hero__lead {
        font-size: 15px;
    }
    .tc-body {
        gap: 20px;
        margin: -70px 0 0;
    }
    .tc-form {
        padding: 24px 18px;
        border-radius: 18px;
    }
    .tc-form__head h3 {
        font-size: 22px;
    }
    .tc-grid {
        grid-template-columns: 1fr;
    }
    .tc-form__foot {
        flex-direction: column;
        align-items: stretch;
    }
    .tc-submit {
        width: 100%;
        min-width: 0;
    }
    .tc-safe {
        max-width: none;
    }
    .tc-info {
        padding: 26px 20px;
        border-radius: 18px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tc-hero__rays,
    .tc-submit.is-loading i {
        animation: none;
    }
}

/* Footer "Get in Touch" card (links to the Contact page) */
.footer_contact_cta {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 380px;
    margin-top: 20px;
    padding: 11px 12px 11px 14px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    isolation: isolate;
    transition: transform .3s;
}
/* Rotating light that shows through as a 1.5px border */
.footer_contact_cta:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -2;
    width: 160%;
    aspect-ratio: 1;
    background: conic-gradient(from 0deg, transparent 0deg, #2695EE 70deg, #FCB800 120deg, transparent 180deg, transparent 360deg);
    transform: translate(-50%, -50%);
    animation: footer-cta-spin 6s linear infinite;
}
/* Card surface: navy, grid lines and a blue glow */
.footer_contact_cta:after {
    content: "";
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    background:
        radial-gradient(circle at 0% 100%, rgba(38, 149, 238, 0.35) 0, rgba(38, 149, 238, 0) 55%),
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(150deg, #10294d 0%, #0B1F3A 100%);
    border-radius: 10.5px;
    border: 1px solid #ffffff2e;
}
.footer_contact_cta:hover {
    color: #fff;
    transform: translateY(-3px);
}
.footer_contact_cta__sun {
    position: absolute;
    top: -30px;
    right: -30px;
    z-index: 0;
    width: 64px;
    height: 64px;
    fill: rgba(252, 184, 0, 0.12);
    stroke: rgba(252, 184, 0, 0.45);
    stroke-width: 2.5;
    stroke-linecap: round;
    animation: footer-cta-sun 30s linear infinite;
}
.footer_contact_cta__body,
.footer_contact_cta__go {
    position: relative;
    z-index: 1;
}
.footer_contact_cta__body {
    flex: 1;
    min-width: 0;
}
.footer_contact_cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #FCB800;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.footer_contact_cta__dot {
    position: relative;
    width: 7px;
    height: 7px;
    background: #FCB800;
    border-radius: 50%;
}
.footer_contact_cta__dot:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #FCB800;
    border-radius: 50%;
    animation: footer-cta-ping 1.8s ease-out infinite;
}
.footer_contact_cta__title {
    display: block;
    margin: 3px 0 2px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
}
.footer_contact_cta__title em {
    color: #2695EE;
    font-style: normal;
}
.footer_contact_cta__lead {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.footer_contact_cta__go {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
    font-size: 13px;
    background: #0076DF;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 118, 223, 0.18);
    transition: background .3s, color .3s, box-shadow .3s, transform .3s;
}
.footer_contact_cta:hover .footer_contact_cta__go {
    color: #0B1F3A;
    background: #FCB800;
    box-shadow: 0 0 0 5px rgba(252, 184, 0, 0.2);
    transform: rotate(-45deg);
}
@keyframes footer-cta-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes footer-cta-sun {
    to { transform: rotate(360deg); }
}
@keyframes footer-cta-ping {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(3); opacity: 0; }
}
@media (max-width: 400px) {
    .footer_contact_cta {
        gap: 10px;
        padding: 10px 11px 10px 13px;
    }
    .footer_contact_cta__title {
        font-size: 15px;
    }
    .footer_contact_cta__go {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .footer_contact_cta:before,
    .footer_contact_cta__sun,
    .footer_contact_cta__dot:after {
        animation: none;
    }
}

/* About us: keep the left image in view while the text scrolls (content comes from the CMS, so target the column holding the about-us image). */
@media (min-width: 768px) {
    .ck-content > .row > [class*="col-md-5"]:has(img[src*="/about-us/"]) {
        align-self: flex-start;
        position: sticky;
        top: 170px;
    }
}

/* ============================================
   404 PAGE
   ============================================ */
.tnf {
    padding: 40px 0 60px;
    font-family: 'Inter', var(--primary-font), sans-serif;
}
.tnf__card {
    position: relative;
    padding: 64px 56px 56px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 28px;
    box-shadow: 0 30px 70px -40px rgba(15, 31, 51, 0.35);
}
.tnf__ghost {
    position: absolute;
    top: -40px;
    right: -20px;
    z-index: 0;
    color: #f1f5fb;
    font-size: 360px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -20px;
    pointer-events: none;
    user-select: none;
}
.tnf__inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
}
.tnf__crumb {
    color: #0076DF;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
}
.tnf__crumb span {
    display: inline-block;
    margin-right: 8px;
    padding: 3px 9px;
    color: #fff;
    background: #0076DF;
    border-radius: 6px;
}
.tnf__title {
    margin: 18px 0 12px;
    color: #0f1f33;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}
.tnf__title em {
    color: #0076DF;
    font-style: normal;
}
.tnf__title,
.tnf__title em {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
}
.tnf__lead {
    margin: 0;
    color: #5b6b7f;
    font-size: 17px;
    line-height: 1.65;
}
.tnf__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}
.tnf__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    line-height: 19px;
    text-decoration: none;
    border-radius: 6px;
    transition: background .2s, color .2s, border-color .2s;
}
.tnf__btn--primary {
    color: #fff;
    background: #0076DF;
    border: 1px solid #0076DF;
}
.tnf__btn--primary:hover {
    color: #fff;
    background: #0063bd;
}
.tnf__btn--line {
    color: #0f1f33;
    background: #fff;
    border: 1px solid #cfd8e5;
}
.tnf__btn--line:hover {
    color: #0076DF;
    border-color: #0076DF;
}
.tnf__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 44px;
}
.tnf__tile {
    display: block;
    padding: 20px;
    color: #0f1f33;
    text-decoration: none;
    background: #f7f9fc;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.tnf__tile:hover {
    color: #0f1f33;
    background: #fff;
    border-color: #0076DF;
    box-shadow: 0 18px 30px -20px rgba(0, 118, 223, 0.6);
    transform: translateY(-4px);
}
.tnf__tile-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #0076DF;
    font-size: 18px;
    background: #e8f3fe;
    border-radius: 12px;
}
.tnf__tile strong {
    display: block;
    margin: 16px 0 4px;
    font-size: 16px;
    font-weight: 700;
}
.tnf__tile small {
    display: block;
    color: #5b6b7f;
    font-size: 13px;
    line-height: 1.5;
}
.tnf__tile-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: #0076DF;
    font-size: 13px;
    font-weight: 600;
}
.tnf__tile-go i {
    transition: transform .2s;
}
.tnf__tile:hover .tnf__tile-go i {
    transform: translateX(3px);
}
@media (max-width: 1199px) {
    .tnf__ghost {
        font-size: 280px;
    }
    .tnf__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .tnf {
        padding: 20px 0 40px;
    }
    .tnf__card {
        padding: 40px 20px 28px;
        border-radius: 20px;
    }
    .tnf__ghost {
        top: -20px;
        right: -10px;
        font-size: 170px;
        letter-spacing: -10px;
    }
    .tnf__title {
        font-size: 32px;
    }
    .tnf__lead {
        font-size: 15px;
    }
    .tnf__btn {
        justify-content: center;
        width: 100%;
    }
    .tnf__grid {
        gap: 12px;
        margin-top: 30px;
    }
}
@media (max-width: 480px) {
    .tnf__grid {
        grid-template-columns: 1fr;
    }
}

/* Service cards: honour the OS "reduce motion" setting (client, 23 Sep 2026). */
@media (prefers-reduced-motion: reduce) {
    .tursid_astraSlide_items.overlay:hover > img,
    .tursid_astraSlide_items.overlay:hover .slider_content,
    .tursid_astraSlide_items.overlay:hover .red_more_sm_btn {
        transform: none;
    }
    .tursid_astraSlide_items.overlay:hover .slider_title:after {
        transform: scaleX(1);
    }
}

/* "Our Services" heading on home + /all-services: larger (client, 24 Sep 2026).
   Own class so the other pages that reuse .heading_title are untouched. */
.services_section_title {
    font-size: 34px;
    line-height: 1.2;
}
@media (max-width: 767px) {
    .services_section_title {
        font-size: 26px;
    }
}

@media only screen and (max-width: 480px) {
    .navigation__extra {
        padding: 4px 4px !important;
    }
}

@media only screen and (max-width: 575px) {
    .navigation--list {
        padding: 5px 20px;
    }
}

@media only screen and (max-width: 1129px) {
    .footer_toppart p {
        max-width: 100%;
    }
}

@media only screen and (max-width: 575px) {
    .header .navigation__extra .sign_up_login_btns .login_btn {
        min-width: 60px;
    }
}

@media only screen and (max-width: 480px) {
    .navigation__extra>li:after {
        right: -1px;
    }
}

/* Footer columns: one row from 1130px up (client, 24 Sep 2026). Same 4/2/2/4 split the xl breakpoint used, but
   starting at 1130px instead of 1200px. Below 1130px the .col-* classes in footer.blade.php stack them. */
@media only screen and (min-width: 1130px) {
    .footer_toppart .footer_col_about,
    .footer_toppart .footer_col_reach {
        flex: 0 0 33.333333%;
        width: 33.333333%;
        max-width: 33.333333%;
    }
    .footer_toppart .footer_col_company,
    .footer_toppart .footer_col_quick {
        flex: 0 0 16.666667%;
        width: 16.666667%;
        max-width: 16.666667%;
    }
}

/* Process flow: hexagon timeline used in place of the process picture on service pages (client, 24 Sep 2026). */
.process_flow {
    --hex-w: 68px;
    --hex-h: 59px;
    --stem: 22px;
    --node: 14px;
    --line: #5f6672;
    position: relative;
    display: flex;
    margin: 26px 0 32px;
    padding: 0;
}
/* The dotted line runs through the middle of the nodes, from the first column's centre to the last one's. */
.process_flow::before {
    content: "";
    position: absolute;
    left: calc(100% / 18);
    right: calc(100% / 18);
    top: calc(var(--hex-h) + var(--stem) + var(--node) / 2 - 1px);
    border-top: 2px dashed #b4bcc8;
}
.process_flow__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.process_flow__hex {
    position: relative;
    display: block;
    width: var(--hex-w);
    height: var(--hex-h);
    transition: transform .35s cubic-bezier(.33, 1, .68, 1), filter .35s ease;
}
.process_flow__hex svg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.process_flow__hex_fill {
    fill: var(--c);
    stroke: var(--c);
    stroke-width: 6;
    stroke-linejoin: round;
}
.process_flow__hex_line {
    fill: none;
    stroke: #fff;
    stroke-width: 1.4;
    stroke-linejoin: round;
    opacity: .85;
}
.process_flow__hex i {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}
.process_flow__step:hover .process_flow__hex {
    transform: translateY(-4px);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .18));
}
.process_flow__stem {
    display: block;
    width: 2px;
    height: var(--stem);
    background: var(--line);
}
.process_flow__stem--lower {
    height: 30px;
}
.process_flow__node {
    box-sizing: border-box;
    display: block;
    width: var(--node);
    height: var(--node);
    border: 2px solid var(--line);
    border-radius: 50%;
    background: #fff;
}
.process_flow__dot {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line);
}
.process_flow__label {
    display: block;
    margin-top: 10px;
    padding: 0 3px;
    color: #222;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
@media (max-width: 991px) {
    .process_flow {
        --hex-w: 58px;
        --hex-h: 50px;
    }
    .process_flow__hex i {
        font-size: 19px;
    }
    .process_flow__label {
        font-size: 12px;
    }
}
/* Phones: nine columns cannot hold readable labels, so the steps stack with the line running down the side. */
@media (max-width: 767px) {
    .process_flow {
        --hex-w: 56px;
        --hex-h: 49px;
        flex-direction: column;
        margin: 18px 0 24px;
    }
    .process_flow::before {
        top: calc(var(--hex-h) / 2);
        bottom: calc(var(--hex-h) / 2);
        right: auto;
        left: calc(var(--hex-w) / 2 - 1px);
        border-top: 0;
        border-left: 2px dashed #b4bcc8;
    }
    .process_flow__step {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        padding: 7px 0;
        text-align: left;
    }
    .process_flow__stem,
    .process_flow__node,
    .process_flow__dot {
        display: none;
    }
    .process_flow__label {
        margin: 0 0 0 16px;
        font-size: 15px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .process_flow__step:hover .process_flow__hex {
        transform: none;
    }
}

/* Scroll jump fix (client, 24 Sep 2026). At 50px of scroll main.js adds header--sticky, which used to turn this bar
   position:fixed. Leaving the flow collapsed its 75-88px, so the whole page jumped up at 50px of scroll and back down
   again below it: the flicker seen on phones and tablets. The bar sits underneath the fixed header and shows nothing,
   so in the sticky state it now keeps the exact look and place it has at the top of the page. */
@media (max-width: 1199px) {
    .header--mobile.header--sticky .navigation--mobile {
        position: static;
        background-color: transparent;
        box-shadow: none;
        z-index: auto;
    }
}

/* Service page hero image: 480px is too tall on phones (client, 24 Sep 2026). Scoped to the service pages, the
   article / journal / achievement pages share the class and keep their own sizes. */
@media (max-width: 767px) {
    .service_background .service_detail_img .service_main_img {
        height: 320px;
    }
}
@media (max-width: 480px) {
    .service_background .service_detail_img .service_main_img {
        height: 240px;
    }
}

/* Phones: headings and body text one step smaller, service detail pages most of all (client, 24 Sep 2026). */
@media (max-width: 767px) {
    /* Service detail pages (the Coming Soon block, .tcs-*, keeps its own sizes) */
    .service_background .service_spacing_ui h2:not([class*="tcs-"]) {
        font-size: 21px;
        line-height: 1.3;
    }
    .service_background .service_spacing_ui h3:not([class*="tcs-"]) {
        font-size: 18px;
        line-height: 1.3;
    }
    .service_background .service_spacing_ui p:not(.service_request_cta_text):not([class*="tcs-"]) {
        font-size: 15px;
        line-height: 1.6;
    }
    .service_background .single_service_detail h3.pt-3 {
        font-size: 26px;
    }
    .service_background .service_detail_aside .service_request_cta_card--side .service_request_cta_title {
        font-size: 20px;
    }

    /* Contact */
    .tc-hero__title {
        font-size: 28px;
    }
    .tc-info__head h3,
    .tc-form__head h3 {
        font-size: 19px;
    }

    /* News & Media */
    .new_media_tile_sec .heading_title,
    .achivement_section .heading_title,
    .article_section .heading_title,
    .documents_section .heading_title,
    .journals_section .heading_title {
        font-size: 26px;
    }
    .documents_section h3 {
        font-size: 21px;
    }

    /* Footer and home "how it works" steps */
    .footer_menu_widget h3 {
        font-size: 19px;
    }
    .how_working_steps_box h4,
    .how_works_modal_content h4 {
        font-size: 18px;
    }
}

@media only screen and (max-width: 575px) {
    .header .header__top {
        padding: 4px 0;
    }
}

@media only screen and (max-width: 575px) {
    .vertical_height_div {
        padding-top: 42px;
    }
}

/* Side panels (Menu / Categories / Cart) at 1199px and below (client, 24 Sep 2026). */
@media (max-width: 1199px) {
    /* Close button: the theme's own white cross, with a finger-sized tap area, and the title kept clear of it. */
    .ps-panel--sidebar .ps-panel__header .ps-panel__close {
        width: 40px;
        height: 40px;
        right: 8px;
    }
    .ps-panel--sidebar .ps-panel__header .ps-panel__close:before,
    .ps-panel--sidebar .ps-panel__header .ps-panel__close:after {
        height: 45%;
    }
    .ps-panel--sidebar .ps-panel__header h3 {
        padding: 0 48px;
    }

    /* The page you are on stays lit in the mobile menu, like the underline does in the desktop menu. */
    .menu--mobile > li.current-menu-item > a {
        position: relative;
        color: var(--color-1st, #2695ee);
        font-weight: 600;
        background: rgba(38, 149, 238, 0.08);
    }
    .menu--mobile > li.current-menu-item > a:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        background: var(--color-1st, #2695ee);
    }
    .menu--mobile > li.current-menu-item > a:hover {
        padding-left: 20px;
        color: var(--color-1st, #2695ee);
    }
}

/* Social icons row at the bottom of the mobile menu: white icons on brand-blue round chips so they show on the
   white drawer (client, 24 Sep 2026). */
@media (max-width: 1199px) {
    .menu--mobile-extra .header_social_icons {
        gap: 12px;
        padding: 14px 20px;
        margin: 0;
    }
    .menu--mobile-extra .header_social_icons li {
        margin: 0;
    }
    .menu--mobile-extra .header_social_icons li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--color-1st, #2695ee);
    }
    .menu--mobile-extra .header_social_icons li img {
        max-width: 20px;
        max-height: 20px;
    }
}

/* Mobile menu items no longer slide left on hover / tap / focus (the theme cut their left padding from 20px to 5px, and on
   touch screens :hover stays on after a tap). They get a soft blue highlight instead (client, 24 Sep 2026). */
@media (max-width: 1199px) {
    .menu--mobile > li > a:hover,
    .menu--mobile > li > a:focus,
    .menu--mobile > li > a:active {
        padding-left: 20px;
        color: var(--color-1st, #2695ee);
        background: rgba(38, 149, 238, 0.06);
        outline: 0;
    }
}

/* Footer bottom bar below 768px: copyright on one row, Privacy Policy | Terms & Conditions on the next, both centred
   (client, 24 Sep 2026). */
@media only screen and (max-width: 767px) {
    .ps-footer__copyright {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .ps-footer__copyright p {
        width: 100%;
        text-align: center;
    }
    .ps-footer__copyright .privacy_policy_link {
        justify-content: center;
        gap: 10px;
        padding-left: 0; /* the browser's 40px list indent pushed the row off centre */
    }
    .ps-footer__copyright .privacy_policy_link li {
        margin-left: 0;
    }
}

/* Cookie banner: same thin top line as the footer's bottom bar, so it reads as part of the footer (client, 24 Sep 2026).
   Its colour comes from the plugin view (see platform/plugins/cookie-consent/resources/views/index.blade.php). */
.cookie-consent {
    border-top: 1px solid #ffffff36;
}

@media (max-width: 1199px) {
    body footer.ps-footer {
        padding-bottom: 72px;
        background: #081e30;
    }
}

@media only screen and (max-width: 575px) {
    .scrollable_menu_section {
        top: 119px;
    }
}

/* Home banner, designed slides (client, 26 Sep 2026). Each picture carries its own logo, heading and icons, so it is shown
   whole: no fixed 80vh box (that cropped the logo or the icon row), no crop, and no dark wash on top. The rules for the
   old text-overlay slides above are left untouched for a quick revert. */
.banner__slider .tursid-carousel-item--designed.carousel-item {
    height: auto;
}
.banner__slider .tursid-carousel-item--designed.carousel-item:before {
    display: none;
}
.banner__slider .tursid-carousel-item--designed img {
    height: auto;
    aspect-ratio: 2.4; /* client, 28 Sep 2026 */
    object-fit: cover;
    object-position: left center; /* keeps the logo/headline (always left-anchored) safe if the box ever crops the sides */
}
/* Tablets and phones: homepage.blade.php swaps in the 3:2 versions of the slides here, so the box matches them exactly and
   the whole slide shows, uncropped. Cropping the wide slides to 16:9 / 4:3 cut off the right-hand photography - client
   asked for the full images back, 29 Sep 2026. */
@media only screen and (max-width: 991px) {
    .banner__slider .tursid-carousel-item--designed img {
        aspect-ratio: 3 / 2;
    }
}
/* The fixed header used to cover the top of the banner (9px at 1200-1550px, 57px up to 1199px, 45px on phones). The old
   cropped photos hid that; the new slides have the logo right at the top, so the banner now starts below the header.
   :has() keeps this tied to the designed slides, so swapping the old markup back also brings back the old offsets. */
@media only screen and (min-width: 1200px) and (max-width: 1550px) {
    .banner__slider:has(.tursid-carousel-item--designed) {
        margin-top: 139px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner__slider:has(.tursid-carousel-item--designed) {
        margin-top: 57px;
    }
}
@media only screen and (max-width: 575px) {
    .banner__slider:has(.tursid-carousel-item--designed) {
        margin-top: 45px;
    }
}
@media only screen and (max-width: 324px) {
    /* Below ~325px the header wraps onto a second row (161px tall instead of 120px) - client, 28 Sep 2026 sweep
       across every screen size. */
    .banner__slider:has(.tursid-carousel-item--designed) {
        margin-top: 86px;
    }
}
/* Slide arrows centred top-to-bottom on the slide (client, 28 Sep 2026). Up to 768px the theme pushed them to the
   bottom edge, right on top of the icon row. */
.banner__slider:has(.tursid-carousel-item--designed) .carousel-control-prev,
.banner__slider:has(.tursid-carousel-item--designed) .carousel-control-next {
    top: 50%;
    transform: translateY(-50%);
}
/* Tablets and phones (the 3:2 slides): centred arrows sat on the headline's subtitle, so both move side by side into
   the bottom-right corner - the logo, text and icon row are all on the left of every slide (client, 29 Sep 2026). */
@media only screen and (max-width: 991px) {
    .banner__slider:has(.tursid-carousel-item--designed) .carousel-control-prev,
    .banner__slider:has(.tursid-carousel-item--designed) .carousel-control-next {
        top: auto;
        bottom: 16px;
        transform: none;
    }
    .banner__slider:has(.tursid-carousel-item--designed) .carousel-control-next {
        right: 16px;
    }
    .banner__slider:has(.tursid-carousel-item--designed) .carousel-control-prev {
        left: auto;
        right: 80px; /* 16px inset + 54px arrow + 10px gap */
    }
}
@media only screen and (max-width: 575px) {
    .banner__slider:has(.tursid-carousel-item--designed) .carousel-control-prev,
    .banner__slider:has(.tursid-carousel-item--designed) .carousel-control-next {
        width: 34px;
        height: 34px;
        bottom: 10px;
    }
    .banner__slider:has(.tursid-carousel-item--designed) .carousel-control-next {
        right: 10px;
    }
    .banner__slider:has(.tursid-carousel-item--designed) .carousel-control-prev {
        right: 52px; /* 10px inset + 34px arrow + 8px gap */
    }
}

/* Footer "Privacy Policy" jumps to /terms-conditions#privacy-policy. The header is fixed, so without an offset the
   heading lands underneath it. Header height measured: 132-149px on desktop/tablet, 120px on phones, 161px below
   ~325px where it wraps - client, 29 Sep 2026. */
#privacy-policy {
    scroll-margin-top: 175px;
    font-size: 30px;
}
@media only screen and (max-width: 575px) {
    #privacy-policy {
        scroll-margin-top: 145px;
    }
}
@media only screen and (max-width: 324px) {
    #privacy-policy {
        scroll-margin-top: 185px;
    }
}

/* Geo Location suggestions (footer.blade.php): results from Places API (New), shown in the site's own list in place of
   Google's old dropdown - client, 1 Oct 2026. The list is appended to <body> and positioned under the field. */
.turshid-place-suggestions {
    position: absolute;
    z-index: 1000;
    margin: 0;
    padding: 4px 0 0;
    list-style: none;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(8, 30, 48, 0.14);
    max-height: 360px; /* Google returns at most 5 suggestions; this fits all 5 plus the attribution row */
    overflow-y: auto;
    text-align: left;
}
.turshid-place-suggestions[hidden] {
    display: none;
}
.turshid-place-suggestions__item {
    padding: 9px 14px;
    font-size: 14px;
    line-height: 1.35;
    color: #081e30;
    cursor: pointer;
}
.turshid-place-suggestions__item.is-active {
    background: #eaf4fe;
}
.turshid-place-suggestions__main {
    font-weight: 600;
}
.turshid-place-suggestions__secondary {
    display: block;
    font-size: 12.5px;
    color: #6b7785;
}
.turshid-place-suggestions__attribution {
    padding: 6px 14px 8px;
    border-top: 1px solid #eef0f2;
    font-family: Roboto, Arial, sans-serif;
    font-size: 11px;
    color: #5e5e5e;
    text-align: right;
}

/* Location icon (footer.blade.php): while the browser finds the position, radar rings spread from the icon and a loader
   covers the field ("Detecting your location" + bouncing dots + a running bar), so it is obvious something is happening.
   Problems open the notice below (client, 1 Oct 2026). */
#getLocationBtn.is-locating {
    cursor: progress;
}
#getLocationBtn.is-locating::before,
#getLocationBtn.is-locating::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 2px solid var(--color-1st, #2695ee);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: geo-radar 1.6s ease-out infinite;
}
#getLocationBtn.is-locating::after {
    animation-delay: 0.8s;
}
#getLocationBtn.is-locating img {
    animation: geo-bob 1.6s ease-in-out infinite;
}
@keyframes geo-radar {
    0% { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}
@keyframes geo-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.geo_detecting {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    overflow: hidden;
    background: #f2f8ff;
    font-size: 14px;
    font-weight: 500;
    color: #1f6fb5;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}
.geo_detecting.is-visible {
    opacity: 1;
    visibility: visible;
}
.geo_detecting.is-compact {
    gap: 8px;
    padding: 0 10px;
    font-size: 13px;
}
.geo_detecting.is-compact .geo_detecting__dots {
    display: none;
}
.geo_detecting__radar {
    position: relative;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-1st, #2695ee);
}
.geo_detecting__radar::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    border-radius: 50%;
    background: rgba(38, 149, 238, 0.35);
    animation: geo-ping 1.2s ease-out infinite;
}
.geo_detecting__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.geo_detecting__dots {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 3px;
    margin-left: -6px;
}
.geo_detecting__dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: geo-dot 1s ease-in-out infinite;
}
.geo_detecting__dots i:nth-child(2) {
    animation-delay: 0.15s;
}
.geo_detecting__dots i:nth-child(3) {
    animation-delay: 0.3s;
}
.geo_detecting__bar {
    position: absolute;
    bottom: 0;
    left: -35%;
    width: 35%;
    height: 3px;
    background: linear-gradient(90deg, rgba(38, 149, 238, 0), var(--color-1st, #2695ee), rgba(38, 149, 238, 0));
    animation: geo-bar 1.3s ease-in-out infinite;
}
@keyframes geo-ping {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}
@keyframes geo-dot {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-3px); opacity: 1; }
}
@keyframes geo-bar {
    0% { left: -35%; }
    100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    #getLocationBtn.is-locating::before,
    #getLocationBtn.is-locating::after,
    #getLocationBtn.is-locating img,
    .geo_detecting__radar::after,
    .geo_detecting__dots i,
    .geo_detecting__bar {
        animation: none;
    }
}
/* The loader says it visually; this line only carries it to screen readers */
.geo_location_status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Location notice (footer.blade.php): shown only when the location icon can't work - location blocked for the site, or no
   position found. When it can work, the click goes straight to the browser's own permission prompt (client, 1 Oct 2026). */
body.geo_modal_open {
    overflow: hidden;
}
.geo_modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.geo_modal[hidden] {
    display: none;
}
.geo_modal__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(8, 30, 48, 0.55);
    animation: geo-modal-fade 0.2s ease-out;
}
.geo_modal__dialog {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 32px 28px 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(8, 30, 48, 0.25);
    text-align: center;
    animation: geo-modal-pop 0.22s ease-out;
}
.geo_modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #6b7785;
    cursor: pointer;
}
.geo_modal__close:hover {
    background: #f1f4f7;
    color: #081e30;
}
.geo_modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fff4e5;
    color: #e8710a;
}
.geo_modal__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #081e30;
}
.geo_modal__body {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.55;
    color: #4a5866;
}
.geo_modal__body p {
    margin: 0 0 12px;
}
.geo_modal__body p:last-child {
    margin-bottom: 0;
}
/* A small picture of the browser's address bar, with its "location blocked" icon ringed - that icon is where the
   visitor has to click, and it is the one place a blocked permission can be changed back. */
.geo_modal__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 6px 8px 6px 16px;
    border: 1px solid #dadce0;
    border-radius: 999px;
    background: #f1f3f4;
    font-size: 13px;
    color: #3c4043;
    text-align: left;
}
.geo_modal__bar-url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.geo_modal__bar-pin {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: #5f6368;
}
.geo_modal__bar-pin::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border: 2px solid #e8710a;
    border-radius: 50%;
    animation: geo-modal-ring 1.6s ease-out infinite;
}
@keyframes geo-modal-ring {
    0% { transform: scale(0.85); opacity: 1; }
    100% { transform: scale(1.35); opacity: 0; }
}
.geo_modal__btn {
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--color-1st, #2695ee);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter 0.2s;
}
.geo_modal__btn:hover {
    filter: brightness(0.93);
}
.geo_modal__btn:focus-visible,
.geo_modal__close:focus-visible {
    outline: 3px solid rgba(38, 149, 238, 0.4);
    outline-offset: 2px;
}
@keyframes geo-modal-fade {
    from { opacity: 0; }
}
@keyframes geo-modal-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
    .geo_modal__backdrop,
    .geo_modal__dialog,
    .geo_modal__bar-pin::after {
        animation: none;
    }
}
@media only screen and (max-width: 575px) {
    .geo_modal__dialog {
        padding: 28px 20px 20px;
    }
    .geo_modal__title {
        font-size: 18px;
    }
}

/* Provider request page, provider in a country Turshid doesn't serve yet (client, 5 Oct 2026): note instead of the
   "Accept Bid Request" button. */
.bid_not_in_country_note {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #ffd8a8;
    border-radius: 10px;
    background: #fff7ed;
    font-size: 14px;
    line-height: 1.5;
    color: #8a4b0f;
}

/* Pin map under Geo Location on the request forms (client, 6 Oct 2026) */
.geo_pin_map_wrap {
    margin-top: 12px;
}
.geo_pin_map {
    width: 100%;
    height: 280px;
    border: 1px solid #d5dbe5;
    border-radius: 8px;
    overflow: hidden;
    background: #e5e3df;
}
.geo_pin_hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #667085;
}
@media (max-width: 767px) {
    .geo_pin_map {
        height: 230px;
    }
}
.project_geo_location_link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0076DF;
}

/* Chat: Hire Now is a button that awards the bid; a note when there's no bid; chat service notices (6 Oct 2026) */
button.chat_hire_btn {
    border: 0;
    cursor: pointer;
}
.chat_hire_note {
    font-size: 13px;
    color: #667085;
}
.chat_notice {
    margin: 8px auto;
    max-width: 90%;
    padding: 8px 12px;
    border-radius: 6px;
    background: #FFF4E5;
    color: #8A5300;
    font-size: 13px;
    text-align: center;
}
.no_milestones strong {
    display: block;
    margin-bottom: 4px;
}

/* Chat messages from our server: time under each bubble, empty-chat hint (6 Oct 2026) */
.chat_bubble .chat_bubble_time {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.7;
}
.chat_empty_hint {
    margin: 24px auto;
    color: #667085;
    font-size: 13px;
    text-align: center;
}

/* Why there's no "Mark as Complete Project" yet (6 Oct 2026) */
.mark_complete_note {
    margin: 16px 0 0;
    font-size: 13px;
    color: #667085;
    text-align: right;
}

/* Unread chat counts: sidebar badge + per conversation (6 Oct 2026) */
.chat_unread_badge[hidden],
.chat_unread_count[hidden] {
    display: none !important;
}
.chat_contact_info {
    position: relative;
}
.chat_unread_count {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #27AE60;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Milestones never approved before the job ended (6 Oct 2026) */
.mile_cancelled {
    background: #FDECEC;
    border-radius: 59px;
    padding: 3px 15px;
    color: #C0392B;
    font-size: 12px;
    border: 1px solid #F5C2C0;
}
.milestone_remaining_list_ui .paid_invoice.milestone_cancelled_label {
    color: #C0392B;
}

/* Review form: what's missing, under each row (6 Oct 2026) */
.review_deatils li:has(.review_field_error) {
    flex-wrap: wrap;
}
.review_deatils li .review_field_error {
    display: block;
    flex-basis: 100%;
    width: 100%;
    margin-top: 2px;
}
.review_comment_error {
    margin: 4px 0 10px;
}

/* Header language button (client, 7 Oct 2026): one tap switches English <-> Arabic. Desktop pill matches the
   white-outlined country dropdown next to it; compact = mobile header bar; row = mobile menu drawer. */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s, color .2s, border-color .2s;
}
.lang-toggle__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}
.lang-toggle__label[lang="ar"] {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 1.08em;
}
.lang-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
/* Desktop + mobile: top bar, left of the social icons (white outline like the country dropdown, 40px). */
.header .header__actions > .lang-toggle--pill {
    box-sizing: border-box;
    height: 40px;
    padding: 0 14px;
    gap: 8px;
    border: 1px solid #fff;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.header .header__actions > .lang-toggle--pill:hover,
.header .header__actions > .lang-toggle--pill:focus {
    background: #fff;
    color: var(--color-1st);
}
.header .header__actions > .lang-toggle--pill .lang-toggle__label[lang="ar"] {
    font-size: 17px;
}
.lang-toggle__label--short {
    display: none;
}
/* Small phones: globe + "ع" / "EN", so the logo, button and social icons stay on one line. */
@media (max-width: 420px) {
    .header .header__actions > .lang-toggle--pill {
        height: 36px;
        padding: 0 10px;
        gap: 6px;
    }
    .header .header__actions > .lang-toggle--pill .lang-toggle__label--full {
        display: none;
    }
    .header .header__actions > .lang-toggle--pill .lang-toggle__label--short {
        display: inline;
    }
}
.lang-toggle--compact {
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    gap: 4px;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
.header--mobile .header__actions .lang-toggle--compact {
    color: #fff;
}
.lang-toggle--compact .lang-toggle__icon {
    width: 16px;
    height: 16px;
}
.lang-toggle--row {
    width: calc(100% - 40px);
    margin: 14px 20px 4px;
    padding: 11px 14px;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    color: #222;
    font-size: 15px;
    font-weight: 500;
}
.lang-toggle--row .lang-toggle__icon {
    color: var(--color-1st);
}
.lang-toggle--row:hover,
.lang-toggle--row:focus {
    border-color: var(--color-1st);
    color: var(--color-1st);
}
.menu--mobile-extra > li.menu--mobile-lang {
    border-bottom: none;
}

/* Live services: "Explore More" in green (client, 8 Oct 2026; colour #3ea91e chosen by the client). */
.red_more_sm_btn.red_more_sm_btn--explore {
    background: #3ea91e;
}
.tursid_astraSlide_items.overlay:hover .red_more_sm_btn.red_more_sm_btn--explore,
a:hover > .red_more_sm_btn.red_more_sm_btn--explore,
a:focus > .red_more_sm_btn.red_more_sm_btn--explore {
    background: #348f19;
}

/* Our Vision / Our Values as real text (client, 8 Oct 2026: localize images that contain English). Since 13 Oct 2026
   (client: "proper container, left/right spacing uneven") the text sits in the site's .ps-container, so both edges
   line up with the header logo and the footer; two equal columns, sizes follow the screen within limits. Below 992px
   the columns stack. Logical properties, so Arabic needs no mirror. */
.vision_values {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 36.46vw;
    padding: clamp(48px, 5.5vw, 110px) 0;
    background-color: #2695ee;
    background-image: url(../../../images/vision-values-bg.jpg);
    background-image: image-set(url(../../../images/vision-values-bg.webp) type("image/webp"), url(../../../images/vision-values-bg.jpg) type("image/jpeg"));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    font-family: 'Inter', var(--primary-font), sans-serif;
}
.vision_values__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(40px, 6vw, 120px);
    width: 100%;
}
.vision_values__title {
    display: block;
    margin: 0 0 clamp(14px, 1.25vw, 24px);
    padding-bottom: clamp(10px, 0.75vw, 14px);
    border-bottom: 3px solid #fff;
    color: #fff;
    font-size: clamp(28px, 2.6vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.vision_values__text {
    margin: 0;
    color: #fff;
    font-size: clamp(16px, 1.55vw, 29px);
    font-weight: 400;
    line-height: 1.4;
    text-align: justify;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}
.vision_values__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.vision_values__list li {
    position: relative;
    margin: 0 0 clamp(10px, 1vw, 20px);
    padding-inline-start: 1.15em;
    color: #fff;
    font-size: clamp(16px, 1.5vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}
.vision_values__list li:last-child {
    margin-bottom: 0;
}
.vision_values__list li:before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.5em;
    width: 0.32em;
    height: 0.32em;
    background: #fff;
    transform: rotate(45deg);
}
@media (max-width: 991px) {
    .vision_values {
        min-height: 0;
    }
    .vision_values__inner {
        grid-template-columns: 1fr;
        row-gap: 36px;
    }
    .vision_values__text {
        line-height: 1.6;
        text-align: start;
    }
}

/* Terms modal (client, 8 Oct 2026): Accept or Back only — partials/terms-gate.blade.php */
html.terms-gate-open,
html.terms-gate-open body {
    overflow: hidden;
}
.terms-gate {
    position: fixed;
    inset: 0;
    z-index: 2147483000; /* above the cookie bar and chat widgets */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(9, 30, 52, .62);
}
.terms-gate[hidden] {
    display: none;
}
.terms-gate__dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    text-align: left;
    outline: none;
}
.terms-gate__dialog--nudge {
    animation: termsGateNudge .35s ease;
}
@keyframes termsGateNudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.terms-gate__head {
    padding: 20px 24px 14px;
    border-bottom: 1px solid #e8edf2;
}
.terms-gate__eyebrow {
    margin: 0 0 4px;
    color: #2695ee;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}
.terms-gate__title {
    margin: 0;
    color: #0b2c4a;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}
.terms-gate__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 24px;
    color: #4a5866;
    font-size: 15px;
    line-height: 1.65;
    -webkit-overflow-scrolling: touch;
}
.terms-gate__body h4 {
    margin: 18px 0 6px;
    color: #0b2c4a;
    font-size: 16px;
    font-weight: 700;
}
.terms-gate__body p,
.terms-gate__body ul {
    margin: 0 0 10px;
}
.terms-gate__body ul {
    padding-left: 20px;
    list-style: disc;
}
.terms-gate__body li {
    margin-bottom: 4px;
    list-style: disc;
}
.terms-gate__body a {
    color: #2695ee;
    text-decoration: underline;
}
.terms-gate__foot {
    padding: 14px 24px 18px;
    border-top: 1px solid #e8edf2;
    background: #f8fafc;
}
.terms-gate__note {
    margin: 0 0 12px;
    color: #5b6b7f;
    font-size: 13px;
}
/* Until the terms are scrolled to the end: a hint instead of the note, and "Accept & Continue" locked (14 Oct 2026) */
.terms-gate__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #0b5cad;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.terms-gate__hint svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: termsHintNudge 1.4s ease-in-out infinite;
}
@keyframes termsHintNudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .terms-gate__hint svg {
        animation: none;
    }
}
.terms-gate__hint[hidden],
.terms-gate__note[hidden] {
    display: none;
}
/* locked = not scrolled to the end yet: grey, can't be clicked (the :disabled rule below is for "Please wait…") */
.terms-gate__btn.terms-gate__btn--accept.is-locked,
.terms-gate__btn.terms-gate__btn--accept.is-locked:hover {
    border-color: #c5ced8;
    background: #c5ced8;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
}
.terms-gate__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.terms-gate__btn {
    min-width: 130px;
    height: 46px;
    padding: 0 22px;
    border: 1px solid #2695ee;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.terms-gate__btn--back {
    background: #fff;
    color: #2695ee;
}
.terms-gate__btn--back:hover,
.terms-gate__btn--back:focus-visible {
    background: #eef6fe;
}
.terms-gate__btn--accept {
    border-color: #16874A;
    background: #16874A;
    color: #fff;
}
.terms-gate__btn--accept:hover,
.terms-gate__btn--accept:focus-visible {
    border-color: #12703D;
    background: #12703D;
}
.terms-gate__btn:disabled {
    opacity: .7;
    cursor: wait;
}
.terms-gate__btn:focus-visible {
    outline: 3px solid rgba(38, 149, 238, .35);
    outline-offset: 2px;
}
@media (max-width: 575px) {
    .terms-gate {
        align-items: flex-end;
        padding: 0;
    }
    .terms-gate__dialog {
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 14px 14px 0 0;
    }
    .terms-gate__head,
    .terms-gate__body,
    .terms-gate__foot {
        padding-left: 16px;
        padding-right: 16px;
    }
    .terms-gate__title {
        font-size: 19px;
    }
    .terms-gate__actions {
        flex-direction: column-reverse;
    }
    .terms-gate__btn {
        width: 100%;
    }
}

/* =====================================================================================================================
   Modern tables (client, 8 Oct 2026): All Service Requests, Bid Requests, My Requests, Provider Dashboard "My Bids".
   One card (.tz-table-card) around toolbar + table + pager. Cell markup comes from the Ajax controllers (status
   spans, "Applied" badge, eye button), so everything here is CSS. RTL counterparts: turshid-rtl.css.
   Colours are the site's own: blue #2695EE (header), navy #081E30 (footer), yellow #FCB800. Text is kept dark
   enough to read easily (client: "clean to read the text").
   ===================================================================================================================== */
.tz-table-card {
    clear: both; /* below floated page headers (Address books: title left, button right) */
    margin-top: 20px;
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 14px;
    overflow: hidden; /* no shadow — client, 9 Oct 2026 */
}

/* toolbar: search + status filter + reload */
.tz-table-card .table_header {
    padding: 16px 20px;
    border-bottom: 1px solid #e6ecf2;
    background: #fff;
}
.tz-table-card .default_searchbar {
    gap: 12px;
}
.tz-table-card .default_searchbar .form-group {
    flex: 1 1 260px;
    max-width: 380px;
}
.tz-table-card .default_searchbar .form-control {
    height: 42px;
    padding: 0 14px 0 40px;
    border: 1px solid #cfd9e3;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat left 14px center;
    font-size: 14px;
    color: #081E30;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tz-table-card .default_searchbar .form-control::placeholder {
    color: #6b7a8a;
}
.tz-table-card .default_searchbar .form-control:focus,
.tz-table-card .selectbox_container select:focus {
    outline: none;
    border-color: #2695EE;
    box-shadow: 0 0 0 3px rgba(38, 149, 238, 0.18);
}
.tz-table-card .selectbox_reload_sortby {
    gap: 10px;
    margin: 0;
    padding: 0;
}
.tz-table-card .selectbox_reload_sortby li {
    margin: 0;
    padding: 0;
}
.tz-table-card .selectbox_container select {
    height: 42px;
    min-width: 180px;
    padding: 0 38px 0 14px;
    border: 1px solid #cfd9e3;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23081E30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none;
    appearance: none;
    font-size: 14px;
    color: #081E30;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tz-table-card .selectbox_reload_sortby .reload_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #2695EE;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}
.tz-table-card .selectbox_reload_sortby .reload_btn:hover {
    background: #0076DF;
    color: #fff;
}
.tz-table-card .selectbox_reload_sortby .reload_btn span {
    padding: 0;
}
.tz-table-card .reload_btn .caret_icon,
.tz-table-card .reload_btn .icon img {
    display: none;
}
.tz-table-card .reload_btn .icon::before {
    content: "\f021";
    font-family: 'FontAwesome';
    font-size: 14px;
    display: inline-block;
    transition: transform 0.4s ease;
}
.tz-table-card .reload_btn:hover .icon::before {
    transform: rotate(180deg);
}

/* table */
.tz-table-card .table_responsive {
    overflow-x: auto;
}
.tz-table-card .dataTables_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.tz-table-card .dataTables_wrapper > table {
    flex: 0 0 100%;
}
/* DataTables' clearfix ::after became a 3rd flex item and pulled the pager to the middle (client, 9 Oct 2026) */
.tz-table-card .dataTables_wrapper::after {
    display: none;
}
.tz-table-card .dataTables_wrapper .dataTables_paginate {
    margin-left: auto;
}
.tz-table-card table.customer_table_ui_default,
.tz-table-card table.dataTable.customer_table_ui_default {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}
.tz-table-card table.dataTable.no-footer {
    border-bottom: 1px solid #e6ecf2 !important;
}
/* header row in the footer's navy */
.tz-table-card .customer_table_ui_default thead tr th {
    padding: 14px 20px !important;
    background: #081E30;
    border: 0 !important;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.tz-table-card .customer_table_ui_default thead tr th:last-child {
    text-align: center;
}
.tz-table-card table.dataTable thead > tr > th.sorting,
.tz-table-card table.dataTable thead > tr > th.sorting_asc,
.tz-table-card table.dataTable thead > tr > th.sorting_desc {
    padding-right: 34px !important;
}
.tz-table-card table.dataTable thead > tr > th.sorting:before,
.tz-table-card table.dataTable thead > tr > th.sorting:after,
.tz-table-card table.dataTable thead > tr > th.sorting_asc:before,
.tz-table-card table.dataTable thead > tr > th.sorting_asc:after,
.tz-table-card table.dataTable thead > tr > th.sorting_desc:before,
.tz-table-card table.dataTable thead > tr > th.sorting_desc:after {
    right: 16px;
    font-size: 8px;
    color: #fff;
    opacity: 0.35;
}
.tz-table-card table.dataTable thead > tr > th.sorting_asc:before,
.tz-table-card table.dataTable thead > tr > th.sorting_desc:after {
    color: #FCB800;
    opacity: 1;
}
.tz-table-card .customer_table_ui_default tbody td {
    padding: 15px 20px;
    background: #fff;
    border: 0 !important;
    border-bottom: 1px solid #e9eef3 !important;
    color: #2d3b4a;
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease;
}
.tz-table-card .customer_table_ui_default tr:nth-child(even) td {
    background: #f7f9fb;
}
.tz-table-card .customer_table_ui_default tbody tr:last-child td {
    border-bottom: 0 !important;
}
.tz-table-card .customer_table_ui_default tbody tr:hover td {
    background: #eef6fe;
}
.tz-table-card .customer_table_ui_default tbody td:first-child:not(.dataTables_empty) {
    color: #0076DF;
    font-weight: 700;
}
.tz-table-card .customer_table_ui_default tbody td:first-child:not(.dataTables_empty)::before {
    content: "#";
}
.tz-table-card .customer_table_ui_default tbody td:nth-child(2) {
    color: #081E30;
    font-weight: 600;
    white-space: normal;
    min-width: 220px;
}
.tz-table-card .customer_table_ui_default tbody td:last-child {
    text-align: center;
}

/* status pills */
.tz-table-card .customer_table_ui_default .status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 5px 12px 5px 10px;
    border-radius: 6px;
    background: #eceff3;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.tz-table-card .customer_table_ui_default .status:before {
    position: static;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #667085;
}
.tz-table-card .customer_table_ui_default .status.open { background: #e1effd; color: #0b5cad; }
.tz-table-card .customer_table_ui_default .status.open:before { background: #2695EE; }
.tz-table-card .customer_table_ui_default .status.awarded { background: #fff3d1; color: #7a4f00; }
.tz-table-card .customer_table_ui_default .status.awarded:before { background: #FCB800; }
.tz-table-card .customer_table_ui_default .status.completed { background: #ddf3e4; color: #146c3a; }
.tz-table-card .customer_table_ui_default .status.completed:before { background: #22a45d; }
.tz-table-card .customer_table_ui_default .status.closed { background: #eceff3; color: #475467; }
.tz-table-card .customer_table_ui_default .status.closed:before { background: #8794a6; }

/* "Applied" badge next to the title */
.tz-table-card .has_applied {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 9px;
    border: 0;
    border-radius: 6px;
    background: #ddf3e4;
    color: #146c3a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}
.tz-table-card .has_applied::before {
    content: "\f00c";
    font-family: 'FontAwesome';
    font-size: 10px;
}

/* view (eye) button */
.tz-table-card .customer_table_ui_default td a {
    display: inline-flex;
}
.tz-table-card .customer_table_ui_default td .btn-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #2695EE;
    color: #fff;
    font-size: 15px;
    box-shadow: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.tz-table-card .customer_table_ui_default td .btn-info:hover,
.tz-table-card .customer_table_ui_default td .btn-info:focus {
    background: #0076DF;
    color: #fff;
    transform: translateY(-1px);
}

/* empty / loading */
.tz-table-card .customer_table_ui_default td.dataTables_empty {
    padding: 48px 20px !important;
    background: #fff !important;
    color: #5b6b7b;
    font-size: 14px;
    text-align: center;
    white-space: normal;
}
.tz-table-card .customer_table_ui_default td.dataTables_empty::before {
    content: "\f0f6";
    display: block;
    margin-bottom: 10px;
    font-family: 'FontAwesome';
    font-size: 30px;
    color: #b7c3cf;
}
.tz-table-card .dataTables_wrapper .dataTables_processing {
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid #dfe6ee;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(8, 30, 48, 0.12);
    color: #081E30;
    font-size: 13px;
    font-weight: 600;
    transform: translate(-50%, -50%);
}

/* footer: "Showing x to y" + pager */
.tz-table-card .dataTables_wrapper .dataTables_info {
    float: none;
    padding: 16px 20px !important;
    color: #475467;
    font-size: 13.5px;
}
.tz-table-card .dataTables_wrapper .dataTables_paginate {
    float: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 20px !important;
}
.tz-table-card .dataTables_wrapper .dataTables_paginate > span {
    display: inline-flex;
    gap: 4px;
}
body .tz-table-card .dataTables_wrapper .dataTables_paginate .paginate_button,
body .tz-table-card .dataTables_wrapper a.paginate_button.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid #dfe6ee !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #081E30 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body .tz-table-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #eef6fe !important;
    border-color: #2695EE !important;
    color: #0076DF !important;
}
body .tz-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .tz-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #2695EE !important;
    border-color: #2695EE !important;
    color: #fff !important;
}
body .tz-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
body .tz-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    padding: 0 14px !important;
}
body .tz-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .tz-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #f7f9fb !important;
    border-color: #e6ecf2 !important;
    color: #98a2b3 !important;
    cursor: default;
}
body .tz-table-card .dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 0 4px;
    color: #475467;
}

@media (max-width: 767px) {
    .tz-table-card {
        border-radius: 12px;
    }
    .tz-table-card .table_header {
        padding: 14px;
    }
    .tz-table-card .default_searchbar .form-group {
        flex-basis: 100%;
        max-width: none;
    }
    .tz-table-card .selectbox_reload_sortby {
        width: 100%;
    }
    .tz-table-card .selectbox_reload_sortby li:first-child {
        flex: 1 1 auto;
    }
    .tz-table-card .selectbox_container select {
        width: 100%;
        min-width: 0;
    }
    /* only the table scrolls sideways; the pager below stays in view */
    .tz-table-card .table_responsive {
        overflow: visible;
    }
    .tz-table-card .dataTables_wrapper > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tz-table-card .customer_table_ui_default thead tr th,
    .tz-table-card .customer_table_ui_default tbody td {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .tz-table-card .dataTables_wrapper .dataTables_info,
    .tz-table-card .dataTables_wrapper .dataTables_paginate {
        flex: 0 0 100%;
        justify-content: center;
        text-align: center;
        padding: 10px 14px !important;
    }
}

/* =====================================================================================================================
   Modern chat screen (client, 8 Oct 2026): conversation search, day separators, grouped bubbles, request card.
   Overrides the 2023 chat block above. Plain, clean backgrounds and dark text so messages are easy to read; site
   colours only (blue #2695EE / #0076DF, navy #081E30). RTL counterparts: turshid-rtl.css.
   ===================================================================================================================== */
.chat_container {
    height: calc(100vh - 210px); /* client, 9 Oct 2026: no 720px cap, no shadow */
    min-height: 540px;
    border: 1px solid #dfe6ee;
    border-radius: 14px;
}

/* conversations */
.chat_contacts {
    width: 330px;
    min-width: 330px;
    border-right: 1px solid #e6ecf2;
    background: #fff;
}
.chat_contacts_header {
    padding: 16px 16px 14px;
    border-bottom: 1px solid #e6ecf2;
    background: #fff;
    color: #081E30;
}
.chat_contacts_title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
}
.chat_contacts_header .chat_contacts_title i {
    margin: 0;
    color: #2695EE;
}
.chat_contacts_total {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: #2695EE;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
.chat_contacts_search {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    border: 1px solid #cfd9e3;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat left 13px center;
    font-size: 14px;
    color: #081E30;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.chat_contacts_search::placeholder {
    color: #6b7a8a;
}
.chat_contacts_search:focus {
    border-color: #2695EE;
    box-shadow: 0 0 0 3px rgba(38, 149, 238, 0.18);
}
.chat_contacts_list {
    padding: 0;
}
.chat_contacts_none {
    margin: 24px 12px;
    color: #5b6b7b;
    font-size: 13.5px;
    text-align: center;
}
.chat_contact_item,
.chat_contact_item.active {
    padding: 13px 16px;
    border: 0;
    border-bottom: 1px solid #eef2f6;
    border-radius: 0;
    transition: background 0.15s ease;
}
.chat_contact_item:hover {
    background: #f5f8fb;
}
.chat_contact_item.active {
    background: #e8f3fe;
    box-shadow: inset 3px 0 0 #2695EE;
}
.chat_contact_avatar,
.chat_contact_item.active .chat_contact_avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border: 0;
}
.chat_contact_name {
    color: #081E30;
    font-size: 14.5px;
}
.chat_contact_time {
    color: #5b6b7b;
    font-size: 12px;
}
.chat_contact_project {
    padding-right: 28px;
    color: #475467;
    font-size: 13px;
    font-weight: 500;
}
.chat_contact_item.active .chat_contact_project {
    color: #0b5cad;
}
.chat_unread_count {
    background: #2695EE;
}

/* header */
.chat_header {
    min-height: 72px;
    padding: 14px 20px;
    border-bottom: 1px solid #e6ecf2;
    background: #fff;
    gap: 12px;
}
.chat_header_avatar img {
    width: 44px;
    height: 44px;
    border: 0;
}
.chat_header_name {
    color: #081E30;
    font-size: 16px;
    font-weight: 700;
}
.chat_header_project,
.chat_header_project:hover {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 3px;
    color: #0076DF;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: flex-start;
}
.chat_header_project:hover {
    color: #081E30;
    text-decoration: underline;
}
.chat_header_project i {
    margin: 0;
}
button.chat_hire_btn,
.chat_hire_btn {
    padding: 10px 18px;
    border-radius: 8px;
    background: #16874A;
    font-size: 14px;
    transition: background 0.2s ease;
}
button.chat_hire_btn:hover,
.chat_hire_btn:hover {
    background: #11703c;
}
.chat_hire_note {
    color: #475467;
    font-size: 13px;
}

/* messages: plain light background, white / blue bubbles */
.chat_messages_scroll {
    padding: 20px 24px 12px;
    background: #f2f5f8;
}
.chat_messages_scroll::-webkit-scrollbar,
.chat_contacts_list::-webkit-scrollbar,
.chat_detail_panel::-webkit-scrollbar {
    width: 6px;
}
.chat_messages_scroll::-webkit-scrollbar-thumb,
.chat_contacts_list::-webkit-scrollbar-thumb,
.chat_detail_panel::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #c5d0db;
}
.chat_day_sep {
    display: flex;
    justify-content: center;
    margin: 14px 0 12px;
}
.chat_day_sep span {
    padding: 4px 12px;
    border-radius: 6px;
    background: #dfe6ee;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
}
.chat_bubble {
    display: flex;
    flex-direction: column;
    max-width: 68%;
    margin-bottom: 12px;
}
.chat_bubble--cont {
    margin-top: -8px;
}
.chat_bubble_sent {
    align-items: flex-end;
}
.chat_bubble_received {
    align-items: flex-start;
}
.chat_bubble p {
    padding: 10px 14px;
    font-size: 14.5px;
    line-height: 1.55;
    unicode-bidi: plaintext; /* an English message on the Arabic page (and the other way round) reads the right way */
    text-align: start;
}
.chat_bubble_sent p {
    background: #0076DF;
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}
.chat_bubble_received p {
    background: #fff;
    color: #1d2939;
    border: 1px solid #dfe6ee;
    border-radius: 14px 14px 14px 4px;
}
.chat_bubble_sent.chat_bubble--cont p {
    border-top-right-radius: 4px;
}
.chat_bubble_received.chat_bubble--cont p {
    border-top-left-radius: 4px;
}
.chat_bubble .chat_bubble_time {
    margin-top: 4px;
    padding: 0 2px;
    color: #5b6b7b;
    font-size: 11.5px;
    opacity: 1;
}
.chat_bubble_sent .chat_bubble_time::after {
    content: "\f00c";
    margin-left: 4px;
    font-family: 'FontAwesome';
    font-size: 10px;
    color: #0076DF;
}
.chat_empty_hint {
    display: table;
    margin: 40px auto;
    padding: 10px 16px;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    background: #fff;
    color: #475467;
}

/* composer */
.chat_input_area {
    padding: 14px 16px;
    border-top: 1px solid #e6ecf2;
    background: #fff;
    gap: 10px;
}
.chat_input {
    height: 46px;
    padding: 0 18px;
    border: 1px solid #cfd9e3;
    border-radius: 23px;
    background: #fff;
    font-size: 14.5px;
    color: #081E30;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.chat_input::placeholder {
    color: #6b7a8a;
}
.chat_input:focus {
    border-color: #2695EE;
    box-shadow: 0 0 0 3px rgba(38, 149, 238, 0.18);
}
#send_chat_bt {
    width: 46px;
    height: 46px;
    min-width: 46px;
    background: #2695EE;
    font-size: 16px;
}
#send_chat_bt:hover {
    background: #0076DF;
}
#send_chat_bt[disabled],
#send_chat_bt[disabled]:hover {
    background: #dfe6ee;
    color: #8794a6;
}

/* request details */
.chat_detail_panel {
    width: 280px;
    min-width: 280px;
    padding: 0;
    gap: 0;
    border-left: 1px solid #e6ecf2;
    background: #fff;
}
.chat_detail_profile {
    margin: 0;
    padding: 24px 16px 18px;
    border-bottom: 1px solid #e6ecf2;
    background: #f7f9fb;
}
.chat_detail_profile img {
    width: 72px;
    height: 72px;
    margin-bottom: 10px;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(8, 30, 48, 0.12);
}
.chat_detail_name {
    color: #081E30;
    font-size: 16px;
    font-weight: 700;
}
.chat_detail_role {
    margin-top: 2px;
    color: #475467;
    font-size: 13px;
    font-weight: 500;
}
.chat_detail_section {
    gap: 3px;
    padding: 13px 18px;
    border-bottom: 1px solid #eef2f6;
}
.chat_detail_label {
    color: #5b6b7b;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.chat_detail_label i {
    color: #2695EE;
}
.chat_detail_value {
    color: #081E30;
    font-size: 14px;
}
.chat_detail_status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin-top: 6px;
    padding: 4px 11px 4px 9px;
    border-radius: 6px;
    background: #eceff3;
    color: #344054;
    font-size: 12.5px;
    font-weight: 600;
}
.chat_detail_status:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #667085;
}
.chat_detail_status.open { background: #e1effd; color: #0b5cad; }
.chat_detail_status.open:before { background: #2695EE; }
.chat_detail_status.awarded { background: #fff3d1; color: #7a4f00; }
.chat_detail_status.awarded:before { background: #FCB800; }
.chat_detail_status.completed { background: #ddf3e4; color: #146c3a; }
.chat_detail_status.completed:before { background: #22a45d; }
.chat_detail_status.closed { color: #475467; }
.chat_detail_status.closed:before { background: #8794a6; }
.chat_detail_link {
    /* stays in view at the bottom of the panel while the details scroll (client, 9 Oct 2026: it was cut off) */
    position: sticky;
    bottom: 14px;
    z-index: 2;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: auto 18px 14px;
    padding: 11px 14px;
    box-shadow: 0 0 0 14px #fff, 0 -14px 14px 6px #fff; /* white strip behind it, so text doesn't show through */
    border-radius: 8px;
    background: #2695EE;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease;
}
.chat_detail_link:hover {
    background: #0076DF;
    color: #fff;
}

/* empty states */
.chat_empty_state i,
.chat_no_messages i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #e8f3fe;
    color: #2695EE;
    font-size: 36px;
}
.chat_empty_state p {
    color: #475467;
}
.chat_no_messages {
    border: 1px solid #dfe6ee;
    border-radius: 14px;
    background: #fff;
}
.chat_no_messages h4 {
    color: #081E30;
}
.chat_no_messages p {
    color: #475467;
}

@media (max-width: 1200px) {
    .chat_detail_panel {
        width: 240px;
        min-width: 240px;
    }
}
@media (max-width: 991px) {
    .chat_container {
        height: auto;
        min-height: 0;
    }
    .chat_contacts {
        width: 100%;
        min-width: 100%;
        max-height: 300px;
        border-right: 0;
        border-bottom: 1px solid #e6ecf2;
    }
    .chat_main,
    #pubnub_messages_bx {
        height: 72vh;
        min-height: 460px;
    }
    .chat_bubble {
        max-width: 85%;
    }
}
@media (max-width: 575px) {
    .chat_container {
        border-radius: 12px;
    }
    .chat_header {
        flex-wrap: wrap;
        padding: 12px 14px;
    }
    .chat_hire_btn,
    button.chat_hire_btn {
        width: 100%;
    }
    .chat_messages_scroll {
        padding: 16px 12px 8px;
    }
    .chat_input_area {
        padding: 10px 12px;
    }
}

/* =====================================================================================================================
   Same modern look for the server-rendered tables (client, 9 Oct 2026: "yaha old kyu"): Orders, Order Return
   Requests, Address Books, Order detail items. Wrapper: .tz-table-card.tz-table-card--plain, table: .tz-plain-table
   (+ --id when the first column is an ID). Status = Botble's .status-label.label-*. RTL: turshid-rtl.css.
   ===================================================================================================================== */
.tz-table-card--plain .table-responsive {
    margin: 0;
    border: 0;
}
.tz-table-card--plain .tz-plain-table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.tz-table-card--plain .tz-plain-table thead,
.tz-table-card--plain .tz-plain-table thead tr,
.tz-table-card .customer_table_ui_default thead,
.tz-table-card .customer_table_ui_default thead tr {
    background: #081E30; /* no white hairline between the header cells */
}
.tz-table-card--plain .tz-plain-table thead th {
    padding: 14px 20px;
    background: #081E30;
    border: 0;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
.tz-table-card--plain .tz-plain-table tbody td,
.tz-table-card--plain .tz-plain-table tbody th {
    padding: 15px 20px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e9eef3;
    color: #2d3b4a;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease;
}
.tz-table-card--plain .tz-plain-table tbody tr:nth-child(even) td,
.tz-table-card--plain .tz-plain-table tbody tr:nth-child(even) th {
    background: #f7f9fb;
}
.tz-table-card--plain .tz-plain-table tbody tr:hover td,
.tz-table-card--plain .tz-plain-table tbody tr:hover th {
    background: #eef6fe;
}
.tz-table-card--plain .tz-plain-table tbody tr:last-child td,
.tz-table-card--plain .tz-plain-table tbody tr:last-child th {
    border-bottom: 0;
}
.tz-table-card--plain .tz-plain-table tbody td p {
    margin: 0;
    color: #2d3b4a;
}
.tz-table-card--plain .tz-plain-table--id tbody tr > :first-child:not(.tz-table-empty) {
    color: #0076DF;
    font-weight: 700;
}
.tz-table-card--plain .tz-plain-table tbody a:not(.ps-btn) {
    color: #0076DF;
    font-weight: 600;
}
.tz-table-card--plain .tz-plain-table td.tz-table-empty {
    padding: 44px 20px;
    background: #fff !important;
    color: #5b6b7b;
    font-size: 14px;
}
.tz-table-card--plain .tz-plain-table td.tz-table-empty::before {
    content: "\f0f6";
    display: block;
    margin-bottom: 10px;
    font-family: 'FontAwesome';
    font-size: 30px;
    color: #b7c3cf;
}
.tz-table-card--plain .tz-plain-table img {
    border-radius: 8px;
    border: 1px solid #e6ecf2;
}

/* status pills (same colours as the request tables) */
.tz-table-card--plain .status-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 6px;
    background: #eceff3;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.tz-table-card--plain .status-label::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8794a6;
}
.tz-table-card--plain .status-label.label-success { background: #ddf3e4; color: #146c3a; }
.tz-table-card--plain .status-label.label-success::before { background: #22a45d; }
.tz-table-card--plain .status-label.label-info,
.tz-table-card--plain .status-label.label-primary { background: #e1effd; color: #0b5cad; }
.tz-table-card--plain .status-label.label-info::before,
.tz-table-card--plain .status-label.label-primary::before { background: #2695EE; }
.tz-table-card--plain .status-label.label-warning { background: #fff3d1; color: #7a4f00; }
.tz-table-card--plain .status-label.label-warning::before { background: #FCB800; }
.tz-table-card--plain .status-label.label-danger { background: #fde7e7; color: #a12424; }
.tz-table-card--plain .status-label.label-danger::before { background: #e5484d; }

/* buttons in the rows */
.tz-table-card--plain .tz-plain-table .ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    margin: 2px 0;
    padding: 0 14px;
    border: 1px solid #2695EE;
    border-radius: 8px;
    background: #2695EE;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tz-table-card--plain .tz-plain-table .ps-btn:hover {
    background: #0076DF;
    border-color: #0076DF;
    color: #fff;
}
.tz-table-card--plain .tz-plain-table td:has(> .ps-btn + .ps-btn) {
    white-space: nowrap;
}
.tz-table-card--plain .tz-plain-table .ps-btn + .ps-btn {
    margin-left: 6px;
}
.tz-table-card--plain .tz-plain-table .ps-btn.tz-btn-danger {
    background: #fff;
    border-color: #f1b5b5;
    color: #c62828;
}
.tz-table-card--plain .tz-plain-table .ps-btn.tz-btn-danger:hover {
    background: #c62828;
    border-color: #c62828;
    color: #fff;
}

/* pager inside the card */
.tz-table-card--plain .tz-table-pager {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 14px 20px;
    border-top: 1px solid #e6ecf2;
}
.tz-table-card--plain .tz-table-pager:not(:has(li)) {
    display: none;
}
.tz-table-card--plain .tz-table-pager .pagination,
.tz-table-card--plain .tz-table-pager ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.tz-table-card--plain .tz-table-pager li {
    display: inline-flex;
    margin: 0;
    list-style: none;
}
.tz-table-card--plain .tz-table-pager li a,
.tz-table-card--plain .tz-table-pager li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    background: #fff;
    color: #081E30;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
.tz-table-card--plain .tz-table-pager li a:hover {
    background: #eef6fe;
    border-color: #2695EE;
    color: #0076DF;
}
.tz-table-card--plain .tz-table-pager li.active a,
.tz-table-card--plain .tz-table-pager li.active span {
    background: #2695EE;
    border-color: #2695EE;
    color: #fff;
}
.tz-table-card--plain .tz-table-pager li.disabled span,
.tz-table-card--plain .tz-table-pager li.disabled a {
    background: #f7f9fb;
    border-color: #e6ecf2;
    color: #98a2b3;
}

@media (max-width: 767px) {
    .tz-table-card--plain table.tz-plain-table thead tr th,
    .tz-table-card--plain table.tz-plain-table tbody tr td,
    .tz-table-card--plain table.tz-plain-table tbody tr th {
        min-width: 0; /* the theme's .ps-table--wishlist forces 200-300px columns on phones (1200px table) */
        padding-left: 14px;
        padding-right: 14px;
        white-space: nowrap;
    }
    .tz-table-card--plain table.tz-plain-table tbody tr td[style*="white-space"] {
        min-width: 220px;
        white-space: normal;
    }
    .tz-table-card--plain .tz-table-pager {
        justify-content: center;
        padding: 12px 14px;
    }
}

/* =====================================================================================================================
   Energy Calculator — modern layout (client, 9 Oct 2026: "made more modern"). Markup: customers/energy-calculator.
   Same card / colours as the tables (border #dfe6ee, blue #2695EE, navy #081E30). RTL: turshid-rtl.css.
   ===================================================================================================================== */
.ec-card {
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 14px;
    overflow: hidden;
}
.ec-step {
    padding: 26px 28px;
    border-bottom: 1px solid #e6ecf2;
}
.ec-step__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.ec-step__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2695EE;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.ec-step__title {
    margin: 0;
    color: #081E30;
    font-size: 18px;
    font-weight: 700;
}

/* step 1: two choice cards */
.ec-options {
    display: flex;
    align-items: stretch;
    gap: 14px;
}
.ec-option {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 18px 50px 18px 18px;
    border: 1.5px solid #dfe6ee;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.ec-option:hover {
    border-color: #9ccbf7;
    background: #f7fbff;
}
.ec-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.ec-option__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eef6fe;
    color: #2695EE;
    font-size: 20px;
    transition: background 0.2s ease, color 0.2s ease;
}
.ec-option__text {
    color: #081E30;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}
.ec-option__check {
    position: absolute;
    top: 50%;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid #c5d0db;
    border-radius: 50%;
    color: transparent;
    font-size: 11px;
    transform: translateY(-50%);
    transition: all 0.2s ease;
}
.ec-option:has(.ec-option__input:checked) {
    border-color: #2695EE;
    background: #eef6fe;
    box-shadow: 0 0 0 3px rgba(38, 149, 238, 0.12);
}
.ec-option:has(.ec-option__input:checked) .ec-option__icon {
    background: #2695EE;
    color: #fff;
}
.ec-option:has(.ec-option__input:checked) .ec-option__check {
    background: #2695EE;
    border-color: #2695EE;
    color: #fff;
}
.ec-option:has(.ec-option__input:focus-visible) {
    outline: 2px solid #2695EE;
    outline-offset: 2px;
}
.ec-options__or {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f5f8;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
}

/* the value row that opens under the chosen card */
.ec-field-row {
    margin-top: 20px;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}
.ec-input {
    display: flex;
    align-items: stretch;
    width: 260px;
    max-width: 100%;
    height: 48px;
    border: 1px solid #cfd9e3;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ec-input:focus-within {
    border-color: #2695EE;
    box-shadow: 0 0 0 3px rgba(38, 149, 238, 0.18);
}
.ec-input input {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #081E30;
    font-size: 15px;
}
.ec-input__unit {
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-left: 1px solid #e6ecf2;
    background: #f2f5f8;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}
.ec-slider.style-3 {
    flex: 1 1 320px;
    padding: 30px 14px 30px;
}
.ec-card .noUi-target {
    border: 0;
    background: #e6ecf2;
    box-shadow: none;
}
.ec-card .noUi-connect {
    background: #2695EE;
}
.ec-card .noUi-horizontal .noUi-handle {
    top: -6px;
    width: 20px;
    height: 20px;
    border: 3px solid #2695EE;
    background: #fff;
    box-shadow: 0 2px 6px rgba(8, 30, 48, 0.2);
}
.ec-card .noUi-value {
    color: #475467;
    font-size: 12px;
}
.ec-card .noUi-marker {
    background: #c5d0db;
}
.ec-card .noUi-value.noUi-value-horizontal:nth-child(2),
.ec-card .noUi-value.noUi-value-horizontal:last-child {
    text-shadow: none;
    box-shadow: none;
}

/* step 2: two labelled selects */
.ec-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ec-select {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}
.ec-select__label {
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}
.ec-select select {
    width: 100%;
    height: 48px;
    padding: 0 40px 0 14px;
    border: 1px solid #cfd9e3;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23081E30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none;
    appearance: none;
    color: #081E30;
    font-size: 14.5px;
    font-weight: 400;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ec-select select:focus {
    outline: none;
    border-color: #2695EE;
    box-shadow: 0 0 0 3px rgba(38, 149, 238, 0.18);
}

/* action */
.ec-actions {
    display: flex;
    justify-content: center;
    padding: 22px 28px;
    background: #f7f9fb;
}
.ec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 220px;
    height: 50px;
    padding: 0 32px;
    border-radius: 10px;
    background: #2695EE;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.2s ease;
}
.ec-btn:hover,
.ec-btn:focus {
    background: #0076DF;
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .ec-step {
        padding: 20px 16px;
    }
    .ec-step__title {
        font-size: 16px;
    }
    .ec-options {
        flex-direction: column;
        gap: 10px;
    }
    .ec-input {
        width: 100%;
    }
    .ec-slider.style-3 {
        flex-basis: 100%;
    }
    .ec-selects {
        grid-template-columns: 1fr;
    }
    .ec-actions {
        padding: 18px 16px;
    }
    .ec-btn {
        width: 100%;
    }
}

/* =====================================================================================================================
   Request Service intro (Solar + EV "Next" pages), modern UI (client, 9 Oct 2026). CSS only — markup, copy and the
   .go_next_btn the terms modal listens to are unchanged. RTL: turshid-rtl.css.
   ===================================================================================================================== */
.request_service_guide_box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: stretch;
    padding: 0;
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 14px;
    overflow: hidden;
}
.request_service_guide_box .guide_description {
    width: auto;
    padding: 36px 40px;
}
.request_service_guide_box .guide_description h3 {
    margin: 0 0 14px;
    color: #081E30;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}
.request_service_guide_box .guide_description p {
    margin: 0 0 14px;
    color: #475467;
    font-size: 15px;
    line-height: 1.75;
    text-align: justify; /* client, 9 Oct 2026 */
    text-justify: inter-word;
}
.request_service_guide_box .checked_descorate_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
    padding: 0;
}
.request_service_guide_box .checked_descorate_list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e6ecf2;
    border-radius: 10px;
    background: #f7f9fb;
    color: #081E30;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
}
.request_service_guide_box .checked_descorate_list li:before {
    position: static;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #22a45d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 12px;
}
.request_service_guide_box .go_next {
    margin-top: 24px;
}
.request_service_guide_box .go_next_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    margin: 0;
    padding: 0 28px;
    border-radius: 10px;
    background: #2695EE;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.2s ease;
}
.request_service_guide_box .go_next_btn::after {
    content: "\f061";
    font-family: 'FontAwesome';
    font-size: 14px;
    transition: transform 0.2s ease;
}
.request_service_guide_box .go_next_btn:hover,
.request_service_guide_box .go_next_btn:focus {
    background: #0076DF;
    color: #fff;
}
.request_service_guide_box .go_next_btn:hover::after {
    transform: translateX(3px);
}
.request_service_guide_box .featured_img {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    border-left: 1px solid #e6ecf2;
    background: linear-gradient(160deg, #eef6fe 0%, #dcecfd 100%);
}
.request_service_guide_box .featured_img img {
    width: 100%;
    max-width: 320px;
    height: auto;
}

@media (max-width: 1199px) {
    .request_service_guide_box {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
    .request_service_guide_box .checked_descorate_list {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 991px) {
    .request_service_guide_box {
        grid-template-columns: 1fr;
    }
    .request_service_guide_box .featured_img {
        order: -1;
        padding: 24px;
        border-left: 0;
        border-bottom: 1px solid #e6ecf2;
    }
    .request_service_guide_box .featured_img img {
        max-width: 240px;
    }
    .request_service_guide_box .guide_description {
        padding: 24px 20px;
    }
    .request_service_guide_box .guide_description h3 {
        font-size: 22px;
    }
    .request_service_guide_box .go_next_btn {
        width: 100%;
        justify-content: center;
    }
}

/* Header language menu (client, 9-10 Oct 2026: "selectbox", then "submenu modern premium"). Button = same white
   outline + 40px as before; the list is our own card, not the browser's native <select> list. partials/language-toggle */
.lang-menu {
    position: relative;
    display: inline-flex;
}
.header .header__actions .lang-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 40px;
    margin: 0;
    padding: 0 12px 0 13px;
    border: 1px solid #fff;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.header .header__actions .lang-menu__btn:hover,
.header .header__actions .lang-menu.is-open .lang-menu__btn {
    background: #fff;
    color: var(--color-1st);
}
.header .header__actions .lang-menu__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
.lang-menu__globe,
.lang-menu__chevron,
.lang-menu__tick {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lang-menu__globe {
    width: 18px;
    height: 18px;
    stroke-width: 1.6;
}
.lang-menu__chevron {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
    transition: transform 0.2s ease;
}
.lang-menu.is-open .lang-menu__chevron {
    transform: rotate(180deg);
}
.lang-menu__current[lang="ar"],
.lang-menu__short[lang="ar"],
.lang-menu__item[lang="ar"] .lang-menu__name,
.lang-menu__badge {
    font-family: 'Tajawal', 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;
}

.lang-menu__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1060;
    min-width: 210px;
    padding: 6px;
    border: 1px solid #e6ecf2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(8, 30, 48, 0.18), 0 2px 6px rgba(8, 30, 48, 0.08);
    transform-origin: top right;
    animation: langMenuIn 0.16s ease-out;
}
.lang-menu__panel[hidden] {
    display: none;
}
/* the little arrow pointing at the button */
.lang-menu__panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 22px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #e6ecf2;
    border-left: 1px solid #e6ecf2;
    background: #fff;
    transform: rotate(45deg);
}
@keyframes langMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.lang-menu__title {
    margin: 6px 10px 6px;
    color: #6b7a8a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lang-menu__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #081E30;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.lang-menu__item:hover,
.lang-menu__item:focus {
    outline: none;
    background: #f2f7fd;
    color: #081E30;
}
.lang-menu__item:focus-visible {
    box-shadow: inset 0 0 0 2px #2695EE;
}
.lang-menu__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f2f5f8;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}
.lang-menu__name {
    flex: 1;
}
.lang-menu__item[lang="ar"] .lang-menu__name {
    font-size: 16px;
}
.lang-menu__tick {
    width: 18px;
    height: 18px;
    stroke-width: 2.6;
    color: #2695EE;
    opacity: 0;
}
.lang-menu__item.is-current {
    background: #eef6fe;
    font-weight: 600;
}
.lang-menu__item.is-current .lang-menu__badge {
    background: #2695EE;
    color: #fff;
}
.lang-menu__item.is-current .lang-menu__tick {
    opacity: 1;
}
.lang-menu__short {
    display: none;
}
/* Phones: the button says "EN" / "ع" (client, 13 Oct 2026); the full name stays for screen readers */
@media (max-width: 767px) {
    .lang-menu__btn .lang-menu__current {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .lang-menu__short {
        display: inline;
        font-weight: 600;
        letter-spacing: 0.02em;
    }
}
@media (max-width: 420px) {
    .header .header__actions .lang-menu__btn {
        height: 36px;
        padding: 0 5px 0 5px;
        gap: 6px;
        font-size: 14px;
    }
    .lang-menu__globe {
        width: 16px;
        height: 16px;
    }
    .lang-menu__panel {
        min-width: 190px;
    }
}

/* Location icon reading that isn't exact (laptops: Wi-Fi / IP): note under the pin map (9 Oct 2026) */
.geo_pin_accuracy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0;
    padding: 9px 12px;
    border: 1px solid #fde3a7;
    border-radius: 8px;
    background: #fff8e6;
    color: #7a4f00;
    font-size: 13px;
    line-height: 1.45;
}
.geo_pin_accuracy[hidden] {
    display: none;
}
.geo_pin_accuracy::before {
    content: "\f05a";
    font-family: 'FontAwesome';
    font-size: 14px;
    line-height: 1.3;
}

/* Profile card contact lines that aren't confirmed (9 Oct 2026) */
.service_provider_info_list .not_verified {
    color: #667085;
}
.service_provider_info_list .not_verified img {
    opacity: 0.6;
}

/* One line under a dashboard page title (My Projects, 13 Oct 2026) */
.ps-form__header .tz-page-intro {
    margin: 6px 0 0;
    color: #475467;
    font-size: 14px;
    line-height: 1.5;
}

/* Account information page (client, 13 Oct 2026: "redesign", then "less scroll, mind the colours"). One compact
   card (profile + email/phone/date of birth), provider + seller details side by side, documents as small chips.
   Site colours only: blue #2695EE / #0076DF, navy #081E30, yellow for the star + "awaiting approval".
   views/ecommerce/customers/overview + partials/account-files. Gaps + logical properties, so RTL needs no mirror. */
.ac-overview {
    margin-top: 20px;
    color: #2d3b4a;
}
.ac-panel,
.ac-card {
    border: 1px solid #e3e9f0;
    border-radius: 12px;
    background: #fff;
}
.ac-panel {
    padding: 20px 22px;
}
.ac-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf1f5;
}
.ac-profile__avatar {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
.ac-profile__main {
    flex: 1;
    min-width: 0;
}
.ac-profile__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.ac-overview .ac-profile__name {
    margin: 0;
    color: #081E30;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}
.ac-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e8f3fd;
    color: #0b5cad;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.ac-badge--pending {
    background: #fff3d1;
    color: #7a4f00;
}
.ac-profile__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    margin-top: 4px;
    color: #4a5a6a;
    font-size: 14px;
}
.ac-overview .ac-profile__meta a {
    color: #4a5a6a;
    text-decoration: none;
}
.ac-overview .ac-profile__meta a:hover {
    color: #0076DF;
}
.ac-profile__meta strong {
    color: #081E30;
}
.ac-profile__meta .fa-star {
    color: #FCB800;
}
.ac-overview .ac-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 8px;
    background: #2695EE;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.ac-overview .ac-btn:hover,
.ac-overview .ac-btn:focus-visible {
    background: #0076DF;
    color: #fff;
}

.ac-overview .ac-info {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    margin: 0;
    padding-top: 16px;
}
.ac-info__item {
    min-width: 0;
    padding-inline: 16px;
    border-inline-start: 1px solid #edf1f5;
}
.ac-info__item:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}
.ac-overview .ac-info dt,
.ac-overview .ac-row dt {
    margin: 0 0 3px;
    color: #5b6b7b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
.ac-overview .ac-info dd {
    margin: 0;
    color: #081E30;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}
.ac-verified {
    margin-inline-start: 4px;
    color: #2695EE;
}
.ac-overview .ac-empty {
    color: #3d4b59;
    font-weight: 600;
}
.ac-overview .ac-link {
    margin-inline-start: 6px;
    color: #0076DF;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.ac-overview .ac-link:hover {
    color: #081E30;
    text-decoration: underline;
}

.ac-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.ac-card {
    padding: 16px 20px 6px;
}
.ac-overview .ac-card__title {
    margin: 0 0 6px;
    padding-inline-start: 10px;
    border-inline-start: 3px solid #2695EE;
    color: #081E30;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
.ac-overview .ac-rows {
    margin: 0;
}
.ac-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid #edf1f5;
}
.ac-row:first-child {
    border-top: 0;
}
.ac-overview .ac-row dt {
    flex: none;
    margin: 0;
    font-size: 14px;
}
.ac-overview .ac-row dd {
    min-width: 0;
    margin: 0;
    color: #081E30;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: end;
    word-break: break-word;
}
.ac-flag {
    width: 20px;
    height: auto;
    margin-inline-end: 4px;
    border-radius: 2px;
    vertical-align: -2px;
    box-shadow: 0 0 0 1px rgba(8, 30, 48, 0.1);
}
.ac-docs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.ac-overview .ac-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 140px;
    padding: 4px 9px;
    border: 1px solid #d6e7f8;
    border-radius: 6px;
    background: #f3f8fe;
    color: #0b5cad;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ac-overview .ac-doc:hover,
.ac-overview .ac-doc:focus-visible {
    border-color: #2695EE;
    background: #2695EE;
    color: #fff;
}
.ac-doc__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .ac-panel {
        padding: 16px;
    }
    .ac-profile {
        flex-wrap: wrap;
    }
    .ac-overview .ac-btn {
        width: 100%;
        justify-content: center;
    }
    .ac-overview .ac-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .ac-info__item {
        padding-inline: 0;
        border-inline-start: 0;
    }
    .ac-roles {
        grid-template-columns: 1fr;
    }
    .ac-card {
        padding: 14px 16px 4px;
    }
    /* files go under their label, two per line */
    .ac-row:has(.ac-docs) {
        flex-direction: column;
        gap: 8px;
    }
    .ac-overview .ac-row:has(.ac-docs) dd {
        width: 100%;
    }
    .ac-row .ac-docs {
        display: flex;
        justify-content: flex-start;
    }
    .ac-overview .ac-doc {
        width: calc(50% - 3px);
    }
}

/* ===== Client round 16 Oct 2026 (mobile) ===== */

/* Toast messages: shown as written ("The bid deadline cannot be in the past.") — capitalize made Every Word Capital.
   On phones they sit above the bottom menu bar, full width, instead of piling up over the header. */
#alert-container .alert {
    text-transform: none;
}
@media (max-width: 767px) {
    #alert-container {
        top: auto;
        bottom: 72px;
        left: 12px;
        right: 12px;
    }
    #alert-container .alert {
        max-width: none !important;
        font-size: 14px;
        line-height: 20px;
        padding: 12px 40px 12px 46px;
    }
}

/* Request form dates are picked from the calendar only (readonly), so they still look and act like a field */
#deadline_of_bid[readonly],
#completion_date[readonly] {
    background-color: #fff;
    cursor: pointer;
}

/* "Thank For Submitting" page: the illustration filled the whole phone screen */
@media (max-width: 991px) {
    .thanks_giving_screen_ui .featured_img img {
        max-width: 240px;
    }
}
@media (max-width: 575px) {
    .thanks_giving_screen_ui .featured_img img {
        max-width: 180px;
    }
    .thanks_giving_screen_ui h1 {
        font-size: 28px;
        line-height: 38px;
    }
    .thanks_giving_screen_ui p {
        font-size: 15px;
        line-height: 24px;
    }
}

/* Logged-in header on phones (client, 16 Oct 2026: "header view needs some enhancement"). It wrapped into
   "Customer Dashboard | (M) name / Logout |" with the country box dropping to a third, centred line and stray "|"
   separators. Now two tidy lines: avatar + name / Logout on the left, country on the right; the dashboard link(s)
   below as full-width buttons. The wrappers in header.blade.php are flattened with display: contents (no markup
   change), so the desktop header and the logged-out phone header are untouched. */
@media (max-width: 767px) {
    .header .navigation__extra:has(.customer-name) {
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        padding: 8px 14px 10px !important;
    }
    .header .navigation__extra:has(.customer-name) > li,
    .header .navigation__extra:has(.customer-name) .ps-block--user-header,
    .header .navigation__extra:has(.customer-name) .ps-block__right,
    .header .navigation__extra:has(.customer-name) .ps-block__right > .d-flex {
        display: contents !important;
    }
    .header .navigation__extra:has(.customer-name) > li::after,
    .header .navigation__extra:has(.customer-name) > li::before,
    .header .navigation__extra:has(.customer-name) .go_to_dashboard::before {
        content: none;
        display: none;
    }

    /* avatar + name / Logout */
    .header .navigation__extra .ps-block__right > .d-flex > .d-flex {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
    .header .navigation__extra:has(.customer-name) .user_image img {
        width: 34px;
        height: 34px;
        min-width: 34px;
        margin-inline-end: 8px;
        border: 2px solid rgba(255, 255, 255, 0.85);
    }
    .header .navigation__extra:has(.customer-name) .description {
        min-width: 0;
        line-height: 1.25;
    }
    .header .navigation__extra:has(.customer-name) .ps-block__right .customer-name {
        font-size: 14px !important;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }
    .header .navigation__extra:has(.customer-name) .ps-block__right .customer-name + a {
        font-size: 12px !important;
        color: #fff;
        opacity: 0.9;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* country box */
    .header .navigation__extra:has(.customer-name) .ms-dd {
        order: 2;
        flex: 0 0 auto;
        width: auto !important;
        min-width: 120px;
        margin-top: 0 !important;
    }

    /* dashboard link(s): one full-width line of buttons */
    .header .navigation__extra:has(.customer-name) .ps-block__right > .d-flex > ul {
        order: 3;
        flex: 1 1 100%;
        display: flex !important;
        gap: 8px;
        margin: 0;
        padding: 0;
    }
    .header .navigation__extra:has(.customer-name) .ps-block__right > .d-flex > ul > li {
        flex: 1 1 0;
        margin: 0;
        padding: 0;
    }
    .header .navigation__extra:has(.customer-name) .ps-block__right > .d-flex > ul > li::after {
        content: none;
    }
    .header .navigation__extra:has(.customer-name) .ps-block__right > .d-flex > ul a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        margin: 0;
        padding: 6px 10px !important;
        border-radius: 8px;
        background: #fff;
        color: #0076DF !important;
        font-size: 13px !important;
        font-weight: 600;
        text-align: center;
        line-height: 1.2;
    }
}

/* ==========================================================================
   News & Media empty state (client, 19 Oct 2026 - option C "ghost cards"): faded placeholder cards in the
   section's own grid shape + a "Coming Soon" card on top. partials/news-empty.blade.php.
   Logical properties only; the shimmer direction is flipped in turshid-rtl.css.
   ========================================================================== */
.news-empty {
    position: relative;
    max-width: 1100px;
    min-height: 230px;
    margin: 10px auto 0;
}
.news-empty__ghosts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.news-empty--achievements .news-empty__ghosts { grid-template-columns: repeat(4, 1fr); }
.news-empty--documents .news-empty__ghosts { grid-template-columns: repeat(2, 1fr); }
.news-empty__ghost {
    overflow: hidden;
    border: 1px solid #e6edf4;
    border-radius: 18px;
    background: #fff;
}
.news-empty__img { height: 170px; }
.news-empty--achievements .news-empty__img { height: 200px; }
.news-empty__lines { padding: 16px 18px 22px; }
.news-empty__line { height: 12px; margin-block-start: 12px; border-radius: 6px; }
.news-empty__line:first-child { margin-block-start: 0; }
.news-empty__line--short { width: 40%; }
.news-empty__line--last { width: 70%; }
/* documents = icon + text rows like .document_box */
.news-empty--documents .news-empty__ghost { display: flex; align-items: center; gap: 16px; padding: 20px; }
.news-empty--documents .news-empty__img { flex: 0 0 50px; height: 50px; border-radius: 50%; }
.news-empty--documents .news-empty__lines { flex: 1 1 auto; padding: 0; }
.news-empty__img,
.news-empty__line {
    background: linear-gradient(90deg, #eef3f8 0%, #f8fbfe 50%, #eef3f8 100%);
    background-size: 200% 100%;
    animation: newsEmptyShimmer 1.6s linear infinite;
}
.news-empty__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(180deg, rgba(250, 250, 250, .2), rgba(250, 250, 250, .85) 60%);
}
.news-empty__card {
    max-width: 460px;
    padding: 22px 34px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(8, 30, 48, .14);
    text-align: center;
}
.news-empty__badge {
    display: inline-block;
    margin-block-end: 8px;
    padding: 4px 14px;
    border-radius: 999px;
    background: #FCB800;
    color: #081E30;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.news-empty__title {
    margin: 0 0 4px;
    color: #081E30;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
}
.news-empty__note {
    margin: 0;
    color: #2d3b4a;
    font-size: 14px;
    line-height: 1.6;
}
@keyframes newsEmptyShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
@media (max-width: 991px) {
    .news-empty--achievements .news-empty__ghosts { grid-template-columns: repeat(2, 1fr); }
    .news-empty--achievements .news-empty__ghost:nth-child(n+3) { display: none; }
}
@media (max-width: 767px) {
    .news-empty__ghosts,
    .news-empty--achievements .news-empty__ghosts,
    .news-empty--documents .news-empty__ghosts { grid-template-columns: 1fr; }
    .news-empty__ghost:nth-child(n+2) { display: none; }
    .news-empty--documents .news-empty__ghost:nth-child(-n+3) { display: flex; }
    .news-empty__card { padding: 18px 20px; }
    .news-empty__title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .news-empty__img,
    .news-empty__line { animation: none; }
}

/* =====================================================================================================================
   Phones (client, 19 Oct 2026): date fields, uploaders and the chat screen.
   ===================================================================================================================== */

/* Mobile date picker: the jQuery UI calendar opened under the field, half off the screen once the keyboard came up
   (the keyboard is now kept away — see footer.blade.php). On phones it is a centred card over a dimmed page, with
   finger-sized days. .tz-dp-backdrop catches a tap outside the card so it never lands on the field underneath. */
.tz-dp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(8, 30, 48, 0.45);
}
@media (max-width: 767px) {
    .hasDatepicker {
        font-size: 16px !important; /* iOS zooms the whole page into any field with smaller text */
    }
    .ui-datepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: min(340px, calc(100vw - 32px)) !important;
        padding: 14px !important;
        border: 0 !important;
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(8, 30, 48, 0.3);
        z-index: 10050 !important;
        font-size: 15px;
    }
    #ui-datepicker-div .ui-datepicker-header {
        padding: 6px 0;
        border: 0;
        border-radius: 10px;
        background: #EAF4FD;
        color: #081E30;
    }
    #ui-datepicker-div .ui-datepicker-title {
        font-size: 16px;
        line-height: 2.2em;
    }
    #ui-datepicker-div .ui-datepicker-prev,
    #ui-datepicker-div .ui-datepicker-next {
        top: 50%;
        width: 36px;
        height: 36px;
        margin-top: -18px;
        border: 0;
        background: transparent;
    }
    #ui-datepicker-div table {
        margin: 8px 0 0;
        font-size: 15px;
    }
    #ui-datepicker-div th {
        padding: 6px 0;
        color: #2d3b4a;
    }
    #ui-datepicker-div td {
        padding: 2px;
    }
    #ui-datepicker-div td a,
    #ui-datepicker-div td span {
        height: 40px;
        padding: 0 !important;
        border-radius: 8px;
        line-height: 38px;
        text-align: center !important;
    }
}

/* Uploaders took two taps on phones. The real file input (laid over the box, opacity 0) was visibility: hidden, so a
   tap only reached the <label for> — and iOS Safari does not reliably open the picker from a label for a hidden file
   input. Now the tap lands on the input itself, which always opens the picker first time (and the field can be
   reached with Tab). Previews / remove buttons / errors inside the same box stay on top of it, so they still work. */
.custom_uploader_photos input[type="file"] {
    visibility: visible;
    cursor: pointer;
    font-size: 0; /* no native "Choose files" text peeking through */
    touch-action: manipulation;
}
.custom_uploader_photos > :not(label):not(input) {
    position: relative;
    z-index: 10;
}
.custom-file-upload {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Chat on phones/tablets: the conversation list and the open conversation used to sit one under the other, so the
   other person's name showed twice (list row + chat header). Now it works like a phone messenger: the list on its
   own, tap a conversation to open it full width, back arrow in its header to return. Class .chat_open is set in
   user-chat.blade.php. */
.chat_back_btn {
    display: none;
}
@media (max-width: 991px) {
    .chat_container:not(.chat_open) #pubnub_messages_bx {
        display: none;
    }
    .chat_container.chat_open .chat_contacts {
        display: none;
    }
    .chat_container .chat_contacts {
        max-height: none;
        border-bottom: 0;
    }
    .chat_back_btn {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #EAF4FD;
        color: #0076DF;
        font-size: 16px;
        touch-action: manipulation;
    }
    .chat_back_btn:hover,
    .chat_back_btn:focus-visible {
        background: #2695EE;
        color: #fff;
    }
}

/* Tables as cards on phones (client, 19 Oct 2026: "mobile mai scroller hi nahi chalta, bhot confusion"). Every
   .tz-table-card table (My Requests, All Service Requests, Bid Requests, My Projects, My Bids, Orders, Order Returns,
   Address Books, order items) was wider than the phone and only scrolled sideways, without a visible scrollbar. Below
   768px each row is a card: one "LABEL  value" line per column. The labels (.tz-cell-label) come from the column
   headers via the script at the end of customers/master.blade.php; table.tz-card-rows marks a labelled table. Logical
   properties, so Arabic mirrors itself. */
.tz-cell-label {
    display: none;
}
@media (max-width: 767px) {
    .tz-table-card .table_responsive,
    .tz-table-card .table-responsive {
        overflow: visible;
    }
    .tz-table-card table.tz-card-rows,
    .tz-table-card .dataTables_wrapper > table.tz-card-rows {
        display: block;
        width: 100% !important;
        min-width: 0;
        overflow: visible;
    }
    .tz-table-card table.tz-card-rows thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0); /* hidden on screen, still read as headers by screen readers */
    }
    .tz-table-card table.tz-card-rows tbody {
        display: block;
    }
    .tz-table-card table.tz-card-rows tbody tr {
        display: block;
        padding: 6px 16px;
        border-bottom: 1px solid #dfe6ee;
        background: #fff;
    }
    .tz-table-card table.tz-card-rows tbody tr:last-child {
        border-bottom: 0;
    }
    .tz-table-card table.tz-card-rows tbody td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        column-gap: 8px;
        row-gap: 4px;
        width: auto;
        min-width: 0 !important;
        max-width: none !important;
        padding: 9px 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: end !important;
        white-space: normal !important;
    }
    .tz-table-card table.tz-card-rows tbody td + td {
        border-top: 1px dashed #e6ecf2 !important;
    }
    .tz-table-card table.tz-card-rows tbody td:first-child {
        column-gap: 0; /* the "#" before the ID sits right against the number */
    }
    .tz-table-card table.tz-card-rows tbody td > .tz-cell-label {
        display: block;
        order: -1; /* before the ID cell's "#" too */
        margin-inline-end: auto;
        padding-inline-end: 12px;
        color: #475467;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-align: start;
        text-transform: uppercase;
    }
    /* "No data" rows span every column: one centred line, no label */
    .tz-table-card table.tz-card-rows tbody td.dataTables_empty,
    .tz-table-card table.tz-card-rows tbody td.tz-table-empty {
        display: block;
        text-align: center !important;
    }
}

/* Page scroll on phones (client, 19 Oct 2026: "Customer Dashboard ke kisi bhi page par scroll sahi nahi chalta",
   same on local, staging and live). Semantic UI's CSS (header.blade.php) sets html, body { height: 100% } and
   body { overflow-x: hidden }. On phones that pins the page to one screen height and turns <body> into its own
   scroll box — the known iOS Safari / mobile cause of a page that sticks, stops short or fights the fixed header and
   bottom bar. Phones only: let the page grow to its content, and stop sideways overflow with clip (no scroll box).
   The modal scroll locks (body.geo_modal_open, html.terms-gate-open body) are more specific and still win. */
@media (max-width: 991px) {
    html,
    body {
        height: auto;
    }
    body {
        overflow-x: hidden; /* old browsers without clip */
        overflow-x: clip;
        overflow-y: visible;
    }
}

/* ---------------------------------------------------------------------------------------------
   Install the web app banner (PWA, 20 Oct 2026) — partials/pwa-install.blade.php.
   Logical properties (inset-inline / margin-inline), so Arabic mirrors itself without turshid-rtl.css.
   Below 1200px it sits above the mobile bottom bar (.navigation--list), like the error toasts.
--------------------------------------------------------------------------------------------- */
.tz-pwa-link[hidden],
.tz-pwa[hidden],
.tz-pwa [hidden] {
    display: none !important;
}
.tz-pwa {
    position: fixed;
    z-index: 990;
    inset-inline-start: 24px;
    bottom: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 44px 16px 16px;
    padding-inline: 16px 44px;
    background: #fff;
    border: 1px solid #e3edf6;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(8, 30, 48, 0.18);
    color: #081E30;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.tz-pwa.is-visible {
    opacity: 1;
    transform: none;
}
.tz-pwa__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    box-shadow: 0 0 0 1px #e3edf6;
}
.tz-pwa__body {
    flex: 1 1 auto;
    min-width: 0;
}
.tz-pwa__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: #081E30;
}
.tz-pwa__text {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: #2d3b4a;
}
.tz-pwa__share {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    color: #0076DF;
}
.tz-pwa__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.tz-pwa__install,
.tz-pwa__later {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    cursor: pointer;
}
.tz-pwa__install {
    border: 1px solid #2695EE;
    background: #2695EE;
    color: #fff;
}
.tz-pwa__install:hover,
.tz-pwa__install:focus-visible {
    background: #0076DF;
    border-color: #0076DF;
}
.tz-pwa__later {
    border: 1px solid #c9d8e6;
    background: #fff;
    color: #081E30;
}
.tz-pwa__later:hover,
.tz-pwa__later:focus-visible {
    border-color: #2695EE;
    color: #0076DF;
}
.tz-pwa__close {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #2d3b4a;
    font-size: 24px;
    line-height: 32px;
    cursor: pointer;
}
.tz-pwa__close:hover,
.tz-pwa__close:focus-visible {
    background: #f0f5fa;
}
@media (max-width: 1199px) {
    .tz-pwa {
        bottom: 72px;
    }
}
@media (max-width: 767px) {
    .tz-pwa {
        inset-inline: 12px;
        width: auto;
        max-width: none;
    }
}