/* Custom font-face declarations - loaded first */
@font-face {
    font-family: "SFProDisplayBold";
    src: url("../../va_assets/fonts/SFProDisplayBold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SFProDisplayMedium";
    src: url("../../va_assets/fonts/SFProDisplayMedium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SFProDisplayRegular";
    src: url("../../va_assets/fonts/SFProDisplayRegular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Eudoxus Sans';
    src: url("../../va_assets/fonts/EudoxusSansMedium.woff2") format("opentype");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url("../../va_assets/fonts/HelveticaNeueMedium.otf") format("opentype");
    font-weight: 500;
    font-display: swap;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root {
    --blue: #7D5CA4;
    --blue-light: #7CC0D4;
    --text-color: #191221;
    --SFProBold: "SFProDisplayBold", "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --SFProMedium: "SFProDisplayMedium", "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --SFProRegular: "SFProDisplayRegular", "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

body {
    color: var(--text-color);
    /* background-color: #F7FAFC !important; */
    overflow-x: hidden !important;
    width: 100vw;
    /* Add fallback fonts for immediate rendering */
    font-family: var(--SFProRegular), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #7D5CA4;
}


.container {
    max-width: 1440px !important;
    margin: auto;

}

.custom-navbar {
    /* height: 100px; */
    /* background: radial-gradient(ellipse 100vw 100vw at 20% 50%, rgba(224, 197, 255, 0.4) -30%, transparent 50%), radial-gradient(ellipse 100vw 100vw at 70% 50%, rgba(176, 237, 255, 0.4) -30%, transparent 50%), #FFFFFF; */
    /* backdrop-filter: blur(24px); */
    position: sticky;
    top: 0px;
    z-index: 999;
    padding: 20px 0px;
    transition: all 0.3s ease;
}

/* Services Navbar Styles */
.services-navbar {
    /* background: rgba(255, 255, 255, 1); */
    /* border: 1px solid rgba(229, 229, 229, 1); */
    padding: 0;
    position: relative;
    margin-left: 40px;
}

.services-navbar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1440px;
    margin: 0;
    /* padding: 0 15px; */
    position: relative;
}

.services-navbar .nav-arrow {
    width: 24px;
    height: 24px;
    border: none !important;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    visibility: visible;
}

.services-navbar .nav-arrow-left {
    left: -10px;
}

.services-navbar .nav-arrow-right {
    right: -10px;
}

.services-navbar .services-carousel-wrapper {
    flex: 1;
    overflow: hidden;
    /* This catches the items at the edges of the horizontal strip */
    position: relative;
    padding: 0 5px;
}

/* Blur Effect on the right side */
.services-navbar .services-carousel-wrapper::after {
    content: '';
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Blur Effect on the left side (initially hidden) */
.services-navbar .services-carousel-wrapper::before {
    content: '';
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.services-navbar .services-carousel-wrapper.show-left-blur::before {
    opacity: 1;
}

.services-navbar .services-carousel-wrapper.hide-right-blur::after {
    opacity: 0;
}

.services-navbar .services-carousel.owl-carousel .owl-stage-outer {
    overflow: visible !important;
    /* Critical for stagePadding to work on the right side */
}

.services-navbar .services-carousel.owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
    transition: transform 0.4s ease;
}

.services-navbar .services-carousel.owl-carousel .owl-item {
    width: auto !important;
}

.services-navbar .navbar-link {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(101, 101, 101, 1);
    cursor: pointer;
    padding: 8px 0px 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    position: relative;
    transition: all 0.3s ease;
}

.services-navbar .navbar-link::after {
    content: '';
    background-image: url('../../va_assets/images/down-arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
    width: 10px;
    height: 10px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.services-navbar .nav-item {
    position: relative;
    padding: 4px 0;
}

.services-navbar .nav-item.active .navbar-link {
    color: var(--blue);
}

.services-navbar .nav-item.active .navbar-link::after {
    transform: rotate(180deg);
    filter: invert(41%) sepia(34%) saturate(760%) hue-rotate(224deg) brightness(91%) contrast(89%);
    /* Approx purple */
}

/* Active underline effect */
.services-navbar .nav-item.active::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -3px;
    width: 90%;
    height: 6px;
    border-radius: 8px 8px 0 0;
    background-color: var(--blue);
    z-index: 1001;
}

.services-navbar .nav-item:focus {
    outline: none;
}
.landing-header .inner {
    justify-content: flex-start !important;
}
.landing-header .inner .header-inner-right {
  flex: 1;
  margin-left: 16px;
}
.landing-header .inner .header-home-right {
  margin-left: auto;
}
.landing-header .inner .logo {
    width: 180px !important;
}
.landing-header-container {
    max-width: 1920px !important;
    margin: 0 auto;
    padding: 14px clamp(20px, 5vw, 136px);
}
.landing-header{
    padding: 0 !important;
}
/* New Navbar Wrapper */
.nav-menu-wrapper {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 24px;
}


/* Mega Menu Styles */
.mega-menu-container {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 1440px;
    max-width: 100vw;
    background: rgba(255, 255, 255, 1);

    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: rgba(229, 229, 229, 1);

    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;

    z-index: 1000;
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 12px 0px #0000001F;
}


.landing-header .mega-menu-container .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}
.mega-menu-container.show {
    display: block;
    opacity: 1;
    transform: translateX(-31%) translateY(18px);
}

.mega-menu-pane {
    display: none;
}

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

/* New Sidebar Tab Layout */
.mega-menu-tabs-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

/* Left Sidebar Tabs */
.mega-menu-sidebar {
    width: 325px;
    flex-shrink: 0;
    background-color: #F7F7F7;
    border-right: 1px solid #E5E5E5;
    border-bottom-left-radius: 16px;
}

.mega-menu-tab {
    padding: 16px 24px;
    padding-right: 0px;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(78, 78, 78, 1);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    line-height: 1;
}
.mega-menu-tab:last-child {
    border-bottom: none;
}

.mega-menu-tab:hover {
    background-color: rgb(125 92 164 / 12%);
    color: rgba(125, 92, 164, 1);
}
.mega-menu-tab.active {
    background-color: rgba(169, 145, 230, 0.1);
    color: rgba(125, 92, 164, 1);
    /* border-left-color: rgba(125, 92, 164, 1); */
}

/* Center Content Area */
.mega-menu-tab-content {
    flex: 1;
    /* padding: 40px 40px; */
    padding-bottom: 0;
    padding-right: 0;
    min-height: 300px;
}
.mega-tab-pane {
    display: none;
}

.mega-tab-pane.active {
    display: flex;
    justify-content: space-between;
}

.mega-menu-services-grid {
    display: flex;
    flex-direction: column;
    /* padding-bottom: 36px; */
    /* border-bottom: 1px solid rgba(229, 229, 229, 1); */
    margin: 40px 0 0 40px;
}

.mega-services-column {
    display: flex;
    flex-direction: column;
}

.mega-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 1;
    column-gap: clamp(150px, 4%, 48px);
    column-fill: balance;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

/* 9+ items → 2 columns */
.mega-menu-list:has(li:nth-child(n+9)) {
    column-count: 2;
}

/* 17+ items → 3 columns */
.mega-menu-list:has(li:nth-child(n+17)) {
    column-count: 3;
}

/* 25+ items → 4 columns (optional future safe) */
.mega-menu-list:has(li:nth-child(n+25)) {
    column-count: 4;
}

.mega-menu-list li {
    /* margin-bottom: 16px; */
    break-inside: avoid;
    padding-bottom: 16px;
    width: 250px;
}

.mega-menu-list li a {
    text-decoration: none;
    color: rgba(25, 18, 33, 1);
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
}

.mega-menu-list li a:hover {
    color: var(--blue);
}

/* Right Image Container */
.mega-menu-sidebar-image {
    max-width: 380px;
    flex-shrink: 0;
    /* display: flex; */
    /* align-items: center; */
    justify-content: center;
    margin: 32px 34px 0 0;
    /* padding: 24px; */
    width: 100%;
    min-height: 306px;
    max-height: 306px;
}

.mega-menu-sidebar-image img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    object-fit: contain;
}

/* Simple Mega Menu Layout (Industries & Locations) */
.mega-menu-simple-layout {
    display: flex;
    /* gap: 40px; */
    justify-content: space-between;
    padding: 32px 34px 27px;
}

.mega-menu-simple-content {
    flex: 1;
}

.mega-simple-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
#locations-menu .mega-simple-grid {
    grid-template-columns: repeat(3, 1fr);
}
.mega-simple-grid .mega-menu-list li a{
    display: flex;
    gap: 8px;
    align-items: center;
}
.mega-simple-grid .mega-menu-list li a img{
    width: 20px;
    height: 15px
}
.mega-simple-grid .mega-menu-list{
    border-bottom: none;
    padding-bottom: 0 !important;
    column-gap: clamp(100px, 4%, 48px) !important;
}
#industries-menu .mega-simple-grid .mega-menu-list{
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    max-width: 665px;
}
@media (min-width: 1200px) {
    #industries-menu .mega-menu-link{
        margin-top: 21px;
    }
}
#locations-menu .location-title {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(160, 160, 160, 0.8);
    margin-bottom: 16px;
    display: block;

}
#locations-menu .location-view-all {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(90, 146, 162, 1);

}
.mega-simple-column {
    /* Column styling */
}

.mega-menu-simple-image {
    max-width: 650px;
    /* flex-shrink: 0; */
}

.mega-menu-simple-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}


.mega-menu-container .container {
    align-items: flex-start;
    max-width: none !important;
    width: 100% !important;
}

.mega-menu-content {
    width: 100%;
}

.mega-menu-link {
    /* margin-top: auto; */
    color: rgba(90, 146, 162, 1);
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    text-decoration: underline;
    display: inline-block;
    margin: auto 0 20px 0;
}
#industries-menu .mega-menu-link {
    margin: 21px 0 0 0;
}

.mega-menu-link:hover {
    color: rgb(76, 123, 136);
}


/* Owl Carousel overrides for services navbar */
.services-navbar .owl-carousel .owl-nav {
    display: none;
}

.services-navbar .owl-carousel .owl-dots {
    display: none;
}

.header-section .content .title span {
    color: rgba(125, 92, 164, 1);
}

.custom-navbar .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.custom-navbar .inner .logo {
    height: auto;
    object-fit: contain;
    width: 140px;
}

.custom-navbar .inner .right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.custom-navbar .inner .right .user {
    height: 56px;
    width: 56px;
    border-radius: 50%;
    cursor: pointer;
    background-color: #7CC0D4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-navbar .inner .right .user:hover {
    background-color: #69A7B9;
}

.custom-navbar .inner .right .user img {
    width: 24px;
    height: auto;
}

.btn-blue {
    background-color: #6b3fa0;
    padding: 10px 24px;
    border-radius: 16px;
    font-size: 20px;
    max-height: 56px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: white;
    border: 1px solid #6b3fa0;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.btn-green {
    background-color: #7cc1d4;
    padding: 10px 24px;
    border-radius: 16px;
    font-size: 20px;
    max-height: 56px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: white;
    border: 1px solid #7cc1d4;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.btn-green:hover {
    background-color: #6ca8b9;
    border: 1px solid #6ca8b9;
    cursor: pointer;
}

.btn-green:focus {
    background-color: #6aa0af;
    border: 1px solid #6aa0af;
}

.btn-header {
    padding: 16px 24px;
}

.btn-blue:disabled {
    opacity: 50%;
    cursor: not-allowed;
}

.btn-blue:hover {
    background-color: #5a3387;
    border: 1px solid #5a3387;
    cursor: pointer;
}

.btn-blue:disabled:hover {
    opacity: 50%;
    cursor: not-allowed;
    border: 1px solid #6b3fa0;
    background-color: #6b3fa0;
}

.btn-blue:focus {
    background-color: #4d2c76;
    border: 1px solid #4d2c76;

}

.btn-white:disabled {
    opacity: 50%;
    cursor: not-allowed;
    border: 1px solid #E5E5E5;

}

.btn-white:hover {

    border: 1px solid #61477F;
    color: #61477F;
}

.btn-white:hover svg path {
    fill: #61477F;
}

.btn-white:disabled:hover {
    color: var(--text-color);
    border: 1px solid #E5E5E5;
}

.btn-white:focus {
    border: 1px solid #533B6F;
    color: #533B6F;

}

.btn-white {
    background-color: #FFFFFF;
    padding: 16px 24px;
    max-height: 56px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    border: 1px solid #E5E5E5;
    white-space: nowrap;

}



.header-section {
    background: radial-gradient(ellipse 1000px 1000px at 30% 50%, rgba(224, 197, 255, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse 1000px 1000px at 70% 50%, rgba(176, 237, 255, 0.4) 0%, transparent 50%),
        #FFFFFF;

    /* background-color: #EFF6FA; */
    position: relative;
    padding: 80px 0px;
    /* background-image: url('../../va_assets/images/bg1.svg'); */
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 2;
    position: relative;
    padding-bottom: 200px;
}

.header-section .content {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: auto;
    /* overflow: hidden; */

}

.header-section .right-circle {
    position: absolute;
    width: 50%;
    height: 100%;
    top: -50%;
    right: 0%;
    z-index: 1;
    opacity: 0.2;


}

.header-section .right-circle img {
    width: 100%;
    height: 100%;
}

.header-section .left-circle {
    position: absolute;
    width: 50%;
    height: 100%;
    top: -50%;
    left: 0%;
    z-index: 1;
    opacity: 0.2;


}

.header-section .left-circle img {
    width: 100%;
    height: 100%;
}

.header-section .content .title {
    font-size: 80px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    line-height: 1.2;
    text-align: center;

}

.header-section .content .text {
    font-size: 24px;
    max-width: 780px;
    margin: auto;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    color: var(--text-color);
    line-height: 1.5;

    text-align: center;
}

.header-section .content .filter-box {
    padding: 32px;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF33;
    border-radius: 24px;
    margin-top: 64px;
    box-shadow: 0px 4px 12px 0px #0000001F;
    position: relative;
    display: flex;
    flex-direction: column;
}

.header-section .content .filter-box .search-box {

    background-color: white;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 12px;
    backdrop-filter: blur(24px);
    justify-content: space-between;
    /* flex-wrap: wrap; */

    position: relative;
    z-index: 1;
    margin-bottom: 0px;

}

.filter-box .filters-results {
    background-color: white;
    position: relative;
    border-radius: 0 0 24px 24px;
    /* margin: 0 -33px -32px -33px; */
    width: 100%;
    /* padding: 26px; */
    /* backdrop-filter: blur(24px); */
    /* box-shadow: 0px 16px 12px 0px #0000001F; */
    z-index: 9999;
    display: none;
    padding-top: 0px;
    margin-top: 21px;
}

.filter-box .filters-results.show {
    display: block !important;
}

.hero-section .filter-box .filters-results .title {
    font-size: 16px !important;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: #A0A0A0CC;
    text-align: left;
    margin-bottom: 16px;
}

.filter-box .filters-results .items {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-box .filters-results .items .item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: var(--text-color);
    max-width: 19%;
    flex: 1 1 19%;
    cursor: pointer;
    width: 100%;
}

.filter-box .filters-results .items .item .image {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: rgba(90, 146, 162, 1);
    font-family: var(--SFProBold);
    background-color: rgba(110, 193, 228, 0.2);
    flex-shrink: 0;
}

.filter-box .filters-results .items .item .industry-img {
    background-color: rgba(169, 145, 230, 0.2);
    color: #7D5CA4;
}

.filter-box .filters-results .items .item span {
    display: block;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.matching-text {
    font-weight: 700 !important;
    display: inline !important;
}
.filter-box .filters-results .queries-items .item {
    max-width: 100% !important;
}
.filter-box .filters-results .queries-items {
    flex-direction: column;
}
.filter-box .filters-results .queries-items .item span {
    display: block;
    max-width: 100%;
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: normal !important;
}
.filter-box .filters-results .search-services-items .item {
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7CC0D41A;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #5A92A2;
    gap: 8px;
    max-width: max-content !important;
}
.filter-box .filters-results .search-services-items .item.rel {
    border: 1px solid #5801B5;
    background: linear-gradient(319.48deg, #0F0035 -111.8%, #5801B5 95.12%);
    -webkit-background-clip: text;
    color: #7D5CA4;
}
.filter-box .filters-results .search-services-items .item.rel:hover {
    background: linear-gradient(0deg, #F0F8FA, #F0F8FA),
        linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03));
    color: #5801B5;
}

.filter-box .filters-results .items .item:hover {
    color: #5A92A2;
}

.filter-box .filters-results .items .industries-items:hover {
    color: #7D5CA4;
}

.filter-box .filters-results .items .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.filter-box .filters-results .company-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.filter-box .filters-results .company-container .company {
    flex: 1 1 47%;
    max-width: 47%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.filter-box .filters-results .company-container .company .item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;


}

.filter-box .filters-results .company-container .company .item .image {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #7D5CA4;
    font-family: var(--SFProBold);
    background-color: #6EC1E433;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.filter-box .filters-results .company-container .company .item .company-img {
    background-color: rgba(110, 193, 228, 0.1);
}
.filter-box .filters-results .company-container .company .item .pro-browse-company-image {
    border: 1px solid rgba(88, 1, 181, 1);
    padding: 1.5px !important;
}
.filter-box .filters-results .company-container .company .item .image .pro-browse-dot {
    width: 16px !important;
    height: 16px !important;
    top: -2px !important;
    right: -1px !important;
}
.filter-box .filters-results .company-container .company .item .pro-browse-comp-name:hover{
    text-decoration: underline;
}
.filter-box .filters-results .company-container .company .item:hover {
    color: #5A92A2;
}

item.filter-box .filters-results .company-container .company .item .image {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
}

.filter-box .filters-results .company-container .company .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.filter-box .filters-results .company-container .company .item .image span {
    display: block;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.filter-box .filters-results .company-container .line {
    width: 1px;
    height: 50px;
    flex-shrink: 0;
    background-color: #E5E5E5;
}

.filter-box .filters-results .company-container .company .review {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-family: var(--SFProRegular);
    font-weight: 400;
    color: var(--text-color);
}

.filter-box .filters-results .company-container .company .review img {
    width: 18px;
    height: auto;
}

.filter-box .filters-results .see-all {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #5A92A2;
    text-decoration: none;
    gap: 8px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.filter-box .filters-results .see-all:hover {
    text-decoration: underline;
}

.filter-box .filters-results .see-all img {
    width: 14px;
}

.header-section .content .filter-box .search-box .left {
    flex: 0 0 90%;
    position: relative;
    height: 48px;
}

.header-section .content .filter-box .search-box .left .icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    object-fit: contain;
    /* opacity: 0.25; */
}

.header-section .content .filter-box .search-box .left input {
    height: 48px;
    border: none;
    width: 100%;
    padding-left: 40px;
    background: transparent;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.header-section .content .filter-box .search-box .left input:focus {
    border: none;
    outline: none;
}

::placeholder {
    color: #A0AEC0;
}

.header-section .content .filter-box .search-box .right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 10%;
    justify-content: flex-end;
}

.header-section .content .filter-box .search-box .right .label {
    color: var(--text-color) !important;
}

.header-section .content .filter-box .search-box .right select {
    height: 48px;
    border: 1px solid #E5E5E5;
    width: 180px;
    border-radius: 67px;
    color: #717376;
    font-weight: 500;
    font-family: var(--SFProMedium);
    padding: 9px 16px;
    font-size: 20px;

}

.va-count-badge {
    color: #7D5CA4 !important;
}

select {
    background-image: url('../../va_assets/images/down-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Select2 arrow styling */


.header-section .content .filter-box .search-box .right .search-btn {
    height: 48px;
    width: 48px;
    border: 1px solid var(--blue);
    background-color: var(--blue);
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
}

.header-section .content .filter-box .search-box .right .search-btn:hover {
    background-color: #61477F;
    border: 1px solid #61477F;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

.header-section .content .filter-box .search-box .right select:focus {
    outline: none;
    border: 1px solid #E5E5E5;
}

.header-section .content .filter-box .label {
    text-align: center;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    /*text-transform: uppercase;*/
    margin-bottom: 21px;
    font-size: 16px;
}

.header-section .content .filter-box .label.light {
    color: #A0A0A0CC !important;
}

.header-section .content .filter-box .searches {
    display: flex;
    justify-content: center;
    align-items: center;
    row-gap: 12px;
    column-gap: 21px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.header-section .content .filter-box .searches .search-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    border-radius: 8px;
    background-color: #7CC0D41A;
    font-size: 18px;
    font-family: var(--SFProMedium);
    color: #1f5f73;
    gap: 8px;
}

.header-section .content .filter-box .searches .search-item:hover {
    background-color: rgba(124, 192, 212, 0.2);
}

.header-section .content .filter-box .searches .search-item img {
    width: 14px;
    height: auto;
}

.popular-section {
    padding: 36px 0px;
    position: relative;
    z-index: 1;
}

.popular-section .title,
.custom-section .title {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 19px;
}

.flex-item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin-bottom: 17px;
    cursor: pointer;
}

.flex-item:hover {
    color: #5A92A2;

}

.industries .flex-item:hover {
    color: #7D5CA4;
}

.industries .flex-item:hover svg path {
    fill: #7D5CA4;
}

.industries .flex-item .icon {
    background-color: #A991E633;
}

.services .flex-item:hover {
    color: #5A92A2;
}

.services .flex-item:hover svg path {
    fill: #5A92A2;
}

.services .flex-item .icon {
    background-color: #6EC1E433;
    color: #5A92A2;
}

.flex-item .img {
    width: 14px;
    height: auto;
    flex-shrink: 0;
}

.flex-item .icon {
    height: 56px;
    flex-shrink: 0;
    width: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #6EC1E433;
    font-size: 16px;
    font-weight: 700;
    color: #7D5CA4;
    font-family: var(--SFProSemibold);

}

.flex-item .icon img {
    width: 24px;
    height: auto;
}

.popular-section .view-all {
    font-size: 20px;
    color: #7D5CA4;
    font-weight: 500;
    font-family: var(--SFProMedium);
    text-decoration: none;
    background-color: #A991E61A;
    border-radius: 8px;
    padding: 16px;
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popular-section.dark {
    /* background-color: #fff; */
    color: #FFFFFF;
    overflow: hidden;
    padding: 48px 0px;

}

.popular-section .container {
    position: relative;
    z-index: 2;
}

.popular-section .el-left {
    position: absolute;
    left: -50%;

    height: 100%;
    width: auto;
    z-index: 1;
    border-radius: 50%;
    backdrop-filter: blur(500px);
    display: none;
}

.popular-section .el-left img {
    width: 100%;
    backdrop-filter: blur(500px);
    height: auto;
    opacity: 0.25;

}

.popular-section .text {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    line-height: 1.5;
}

.custom-section .text {
    font-size: 20px;
    font-weight: 500;
    font-family: "Nunito Sans", sans-serif;
    color: #6D6D6D;
    line-height: 1.5;
    transition: all 0.3s ease-in-out;
    margin-bottom: 1rem;
}

.dynamic-text {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-family: "Nunito Sans", sans-serif;
    color: #595959;
    line-height: 1.5;
    transition: all 0.3s ease-in-out;
    position: relative;
    word-break: break-word;
}

.dynamic-text p {
    display: inline;
}

.dynamic-text p + p {
    display: block;
}

.dynamic-text ul, .dynamic-text ol {
    margin: 10px 0 10px 20px;
    display: block;
}

.dynamic-text ul {
    list-style-type: disc;
}

.dynamic-text ol {
    list-style-type: decimal;
}

.dynamic-text li {
    display: list-item;
    margin-bottom: 5px;
}

.dynamic-text a {
    position: relative;
    white-space: nowrap;
}

.dynamic-text a.has-gradient::after {
    content: '';
    right: 100%;
    left: auto;
    position: absolute;
    bottom: 0;
    width: 134px;
    height: 29px;
    background: linear-gradient(90deg, rgba(252, 254, 254, 0) 0%, #FCFEFE 96.39%);
    pointer-events: none;
    z-index: 1;
}
.dynamic-text a.header-read-more::after {
    background: linear-gradient(
        to right,
        rgba(252, 254, 254, 0) 0%,
        rgba(252, 254, 254, 0) 0%,
        rgba(252, 254, 254, 0.7) 100%
    );
}



.dynamic-text a {
    color: #5A92A2;
    transition: all 0.3s ease-in-out;
    text-decoration: underline;
}

.popular-section .location-box {
    padding: 48px 24px;
    background: #FFFFFF33;
    border: 1px solid #FFFFFF33;
    border-radius: 16px;
    width: 100%;
    box-shadow: 0px 4px 12px 0px #0000001F;

}

.popular-section .location-box:hover {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
        linear-gradient(0deg, rgba(125, 92, 164, 0.1), rgba(125, 92, 164, 0.1));

}

.popular-section .location-box:hover .label {
    color: #7D5CA4;
}

.popular-section .location-box img {
    height: 100px;
    width: auto;
    display: block;
    margin: auto;
    margin-bottom: 40px;
    max-width: 100%;
}

.popular-section .location-box .label {
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin-bottom: 0px;

    padding: 0px;
}

.popular-section .location-box .label .img {
    width: 14px;
    height: auto;
    margin: 0px;
}

.popular-section .locations-container {
    margin: 64px 0px;
}

.popular-section .view-locations {
    font-size: 20px;
    color: #7D5CA4;
    font-weight: 500;
    font-family: var(--SFProMedium);
    text-decoration: none;
    background-color: #A991E61A;
    border-radius: 8px;
    padding: 16px;
    width: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popular-section .view-locations:disabled,
.popular-section .view-all:disabled {
    opacity: 40%;
    cursor: not-allowed;
    background-color: #7CC0D41A;
}

.popular-section .view-locations:hover,
.popular-section .view-all:hover {
    /* background-color: #7CC0D433;

    color: #5A92A2; */
}

/* .popular-section .view-locations:focus , .popular-section .view-all:focus {
    background-color: #7CC0D44D;

    color: #5A92A2;
} */
.clients-section {
    padding: 98px 0px;
    background-color: #EFF6FA;

}

.clients-section.padding-0 {
    padding: 0px;
}

.clients-section .box {
    background: #FFFFFFCC;
    border-radius: 24px;
    position: relative;
    padding: 0px 25px;
    overflow: hidden;
    box-shadow: 0px 4px 12px 0px #0000001F;

}

.clients-section .box .row {
    z-index: 2;
    position: relative;
}


.clients-section .box .abs-img {
    height: 394px;
    width: 50%;
    position: absolute;
    z-index: 1;
    top: 0%;
    left: 0%;
    opacity: 0.25;
    backdrop-filter: blur(500px);

}

.clients-section .box .abs-img img {
    width: 100%;
    height: auto;
    backdrop-filter: blur(500px);

}

.clients-section .box .data {
    padding: 40px 55px;
    padding-left: 30px;
}

.clients-section .box .data .title {
    font-size: 40px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin-bottom: 16px;
    word-break: break-word;
}

.clients-section .box .data .text {
    font-size: 20px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: #191221CC;
    margin-bottom: 29px;
    line-height: 1.5;
}
.client-left{
    align-self: center;
}
.clients-section .box .data .text strong {
    font-family: var(--SFProBold);
    font-weight: 700;
}

.clients-section .box .right {
    padding-top: 25px;
    position: relative;
    height: 100%;
}

.clients-section .box .right .abs-right {
    z-index: 1;
    position: absolute;
    right: -50%;

    height: 100%;
    width: auto;
    z-index: 1;
    border-radius: 50%;
    backdrop-filter: blur(500px);
    opacity: 0.25;
}

.clients-section .box .right .abs-right img {
    width: 100%;
    backdrop-filter: blur(500px);

    height: auto;


}

.clients-section .box .right .imgg {
    position: relative;
    z-index: 2;
}

.clients-section .box .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer {
    padding: 68px 0px;
    padding-bottom: 0px;
}

.footer .logo {
    height: auto;
    display: block;
    width: 200px;
    margin-bottom: 38px;
}

.footer .title {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--text-color);
    font-weight: 700;
    font-family: var(--SFProBold);

}

.footer .title.mb-13 {
    margin-bottom: 13px;
}

.footer .text {
    font-size: 16px;
    text-decoration: none;
    line-height: 1.5;
    color: var(--text-color);
    display: block;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
}

.footer p.text:hover,
.footer div.text:hover {
    color: var(--text-color);
}

.footer .text:hover {
    color: #7D5CA4;
}

.footer .text.view {
    text-decoration: underline;
}

.footer .copy {
    padding: 28px 0px;
    border-top: 1px solid #E5E5E5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer .copy .links {
    display: flex;
    align-items: center;
    gap: 46px;
}

.mb4 {
    margin-bottom: 4px;

}

.mb-8 {
    margin-bottom: 8px;

}

.mb-16 {
    margin-bottom: 16px;

}

.mb-48 {
    margin-bottom: 48px !important;
}

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

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

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

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

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

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

.modal-lgg {
    max-width: 1200px !important;
    /*margin: auto;*/
}

.modal-content.custom-modal {
    max-width: 1200px;
    width: 100%;
    position: relative;
    padding: 32px;

    /*margin: auto;*/
}

.modal-content.custom-modal .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.modal-content.custom-modal .top .title {
    font-size: 40px;
    font-weight: 700;
    color: var(--text-color);
}

.modal-content.custom-modal .top .icon img {
    cursor: pointer;
    height: 48px;
    width: 48px;
}

.modal-content.custom-modal .search-wrapper {
    margin-bottom: 24px;
    max-width: 560px;
    width: 100%;
    position: relative;
    height: 56px;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    overflow: hidden;
}

.modal-content.custom-modal .search-wrapper input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 16px;
    padding-left: 40px;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.modal-content.custom-modal .search-wrapper .search {
    position: absolute;
    left: 16px;
    width: 18px;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
}

.modal-content.custom-modal .body-section {
    max-height: 68vh;
    overflow-y: auto;
}

.modal-content.custom-modal .body-section .flex-items {
    display: flex;
    align-items: center;
    gap: 8px;

    flex-wrap: wrap;
}

.modal-content.custom-modal .body-section .flex-items .flex-item {
    /*flex: 1 1 32%;*/
    min-width: 32%;

    flex-shrink: 0;
}

.custom-section {
    padding: 0px 0px;
    position: relative;
    overflow: hidden;
}

.custom-section .container {
    z-index: 2;
    position: relative;
}

.custom-section .abs-left {
    position: absolute;
    z-index: 1;
    left: -50%;

    height: 100%;
    width: auto;
    z-index: 1;
    border-radius: 50%;
    backdrop-filter: blur(500px);
    opacity: 0.25;
}

.custom-section .abs-left img {
    width: 100%;
    backdrop-filter: blur(500px);

    height: auto;


}

.custom-section .abs-right {
    z-index: 1;
    position: absolute;
    right: -50%;

    height: 100%;
    width: auto;
    z-index: 1;
    border-radius: 50%;
    backdrop-filter: blur(500px);
    opacity: 0.25;
}

.custom-section .abs-right img {
    width: 100%;
    backdrop-filter: blur(500px);

    height: auto;


}
.global-search{
    flex: 1;
}
.global-search .search-wrapper{
    width: 100%;
    position: relative;
    height: 56px;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    overflow: hidden;

}
.global-search .search-wrapper .header-search-icon{
    position: absolute;
    right: 8px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(125, 92, 164, 1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.global-search .search-wrapper .header-search-icon img{
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.global-search .search-wrapper input {
    width: 90%;
    height: 100%;
    border: none;
    outline: none;
    padding: 16px;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.global-search .search-wrapper input::placeholder {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.global-search .search-wrapper input:focus::placeholder {
    color: transparent;
}

/* Header Search Dropdown */
.header-search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    padding: 24px;
    /* max-height: 480px; */
    overflow-y: auto;
    margin-top: 10px;
}
.header-search-dropdown.show {
    display: block;
}
.header-search-dropdown .hsd-title {
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: #A0A0A0CC;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.header-search-dropdown .hsd-queries {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.header-search-dropdown .hsd-query-item {
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s;
    flex: 0 0 100%;
}
.header-search-dropdown .hsd-query-item:hover {
    color: #5A92A2;
}
.header-search-dropdown .hsd-section-divider {
    height: 1px;
    background-color: #E5E5E5;
    margin: 16px 0 24px 0;
}
.header-search-dropdown .hsd-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.header-search-dropdown .hsd-items .hsd-service-tag {
    display: block;
    align-items: center;
    padding: 6px 16px;
    border-radius: 8px;
    background-color: #7CC0D41A;
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: #5A92A2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
    white-space: nowrap;
}
.header-search-dropdown .hsd-items .hsd-service-tag:hover {
    background-color: rgba(124, 192, 212, 0.25);
}
.header-search-dropdown .hsd-items .hsd-industry-item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    text-decoration: none;
    flex: 0 0 19%;
    width: 19%;
    transition: color 0.2s;
}
.header-search-dropdown .hsd-items .hsd-industry-item:hover {
    color: #7D5CA4;
}
.header-search-dropdown .hsd-items .hsd-industry-item .hsd-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--SFProBold);
    background-color: rgba(169, 145, 230, 0.2);
    color: #7D5CA4;
    flex-shrink: 0;
}
.header-search-dropdown .hsd-items .hsd-industry-item .hsd-icon img {
    width: 60%;
    height: 60%;
    object-fit: cover;
    /* border-radius: 50%; */
}
.header-search-dropdown .hsd-companies-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 24px;
    position: relative;
}
/* Vertical divider between columns */
.header-search-dropdown .hsd-companies-grid::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: #E5E5E5;
    transform: translateX(-50%);
}
.header-search-dropdown .hsd-company-row {
    display: flex;
    align-items: center;
    gap: 16px;
    /* padding: 12px 0; */
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
    min-width: 0; /* Important for ellipsis */
}
.header-search-dropdown .hsd-company-row:hover .hsd-company-name{
    color: #5A92A2 !important;
}
.header-search-dropdown .hsd-company-row .hsd-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    background-color: rgba(110, 193, 228, 0.2);
    color: rgba(90, 146, 162, 1);
    flex-shrink: 0;
    overflow: visible;
    position: relative;
}
.header-search-dropdown .hsd-company-row .hsd-avatar.pro-avatar {
    border: 1px solid rgba(88, 1, 181, 1);
    background-color: transparent;
    color: rgba(88, 1, 181, 1);
    padding: 1.5px;
}
.pro-browse-comp-name {
    color: rgba(73, 2, 148, 1) !important;
}
.header-search-dropdown .hsd-company-row .hsd-avatar .hsd-pro-crown {
    position: absolute;
    width: 16px;
    height: 16px;
    top: -2px;
    right: 0px;
    z-index: 2;
}
.header-search-dropdown .hsd-company-row .hsd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.header-search-dropdown .hsd-company-row .hsd-company-info {
    flex: 1;
    min-width: 0;
}
.header-search-dropdown .hsd-company-row .hsd-company-info .hsd-company-name {
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-search-dropdown .hsd-company-row .hsd-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-family: var(--SFProRegular);
    color: var(--text-color);
    flex-shrink: 0;
}
.header-search-dropdown .hsd-company-row .hsd-rating img {
    width: 18px;
    height: 18px;
}
.header-search-dropdown .hsd-see-all {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding-top: 12px;
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: #5A92A2;
    text-decoration: none;
    cursor: pointer;
}
.header-search-dropdown .hsd-see-all:hover {
    text-decoration: underline;
}

.section-top-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.section-top-title .back {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    text-decoration: none;
}

.section-top-title .date {
    font-size: 16px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    color: #848484;
    margin-top: 1px;
}

.section-top-title .date span {
    font-weight: 700;
}
.breadcrumbs-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.breadcrumbs-right a{
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(132, 132, 132, 1);
    text-decoration: none
}
.breadcrumbs-right span{
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(51, 51, 51, 1);
    text-decoration: none
}
.browse-companies-bread {
    padding: 4px 8px;
    border-radius: 8px;
    background-color: rgba(125, 92, 164, 0.1);
    color: rgba(125, 92, 164, 1) !important;
    text-decoration: underline !important;
}
.breadcrumbs-right a:hover{
    text-decoration: underline;
}
.breadcrumbs-right a:last-child{
    color: rgba(51, 51, 51, 1);
}
.breadcrumbs-left {
    font-size: 16px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    color: #848484;
    margin-top: 1px;
    display: flex;

}
.bread-reviews-count {
    border-left: 1px solid rgba(143, 143, 143, 1);
    padding-left: 18px;
    margin-left: 18px;
}
.custom-bread-crumbs-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 44px 0px;
}

.custom-bread-crumbs-container .right {
    display: flex;
    align-items: center;
    margin: 0px;
    gap: 16px;
}
.custom-bread-crumbs-container .right .btn-white{

}

.custom-bread-crumbs {
    display: flex;
    align-items: center;

    gap: 20px;
}

.custom-bread-crumbs a {
    text-decoration: none;
    color: #4A4A4A;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.custom-bread-crumbs .home-icon {
    width: 32px;
    height: auto;
}

.custom-bread-crumbs .dir-icon {
    width: 14px;
    height: 14px;
}

.filter-wrapper {
    margin-bottom: 48px;
}

.filter-wrapper .search-wrapper {


    width: 100%;
    position: relative;
    height: 56px;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    overflow: hidden;
}

.filter-wrapper .search-wrapper input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 16px;
    padding-left: 40px;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.filter-wrapper .search-wrapper .search {
    position: absolute;
    left: 16px;
    width: 18px;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
}

.filter-wrapper .right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.filter-wrapper .right .child {
    flex: 1;
    position: relative;
}
.filter-wrapper .right .location-child {
    flex: 1.5;
}

/* .location-search-wrapper {
    position: relative;
    width: 100%;
} */

.location-input-container {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    height: 48px;
}

.location-pin-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    pointer-events: none;
    flex-shrink: 0;
}

#location-search-input {
    width: 100%;
    height: 100%;
    color: #717376;
    border: none;
    outline: none;
    font-family: var(--SFProMedium);
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;
    padding: 8px 16px 8px 40px;
    border-radius: 56px;
}
#location-search-input::placeholder {
    color: #717376;
}

#location-search-input:focus {
    outline: none;
    border-color: var(--blue);
}

.location-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1;
    width: 310px;
}

.location-results-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-results-dropdown ul li {
    padding: 12px 16px;
    cursor: pointer;
    font-family: var(--SFProMedium);
    font-size: 16px;
    color: #191221;
    border-bottom: 1px solid #f8f9fa;
}

.location-results-dropdown ul li:last-child {
    border-bottom: none;
}

.location-results-dropdown ul li:hover {
    background-color: #f8f9fa;
    color: var(--blue);
}
.filter-wrapper .right .child .select2-container{
    width: 100% !important;
}

.filter-wrapper .right .child .select2-container--default .select2-selection--single {
    max-width: 100%;
}

.filter-wrapper .right select {
    height: 56px;
    width: 100%;
    border-radius: 56px;
    padding: 8px 16px;
    border: 1px solid #E5E5E5;
    color: #717376;
    font-family: var(--SFProMedium);
    font-size: 20px;
}

.filter-wrapper .right select:focus {
    outline: none;
    border: 1px solid #E5E5E5;
}

.filter-wrapper .right .filter-btn {
    height: 56px;
    font-size: 20px;
    font-weight: 500;
    color: white;
    font-family: var(--SFProMedium);
    width: 187px;
    border: 1px solid var(--blue);
    background-color: var(--blue);
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
}

.filter-wrapper .right .filter-btn:hover {
    background-color: rgba(97, 71, 127, 1);
}

.filter-wrapper .right .filter-btn img {
    width: 20px;
    height: auto;
}

.service-card {
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0px 4px 12px 0px #0000001F;
    background-color: white;
    margin-bottom: 32px;
}

/* Fixed height for grid view cards when not expanded */
.service-card.grid-fixed-height {
    /* min-height: 850px; */
    display: flex;
    flex-direction: column;
}

.service-card.grid-fixed-height .right {
    margin-top: auto;
}
.service-card.grid-fixed-height .about-section {
    overflow: visible;
    flex-shrink: 0;
}

.service-card.grid-fixed-height .services {
    overflow: hidden;
    flex-shrink: 0;
}

.service-card.grid-fixed-height .footer {
    margin-top: auto;
}

/* In grid view, ensure read-more links are visible */
.service-card.grid-fixed-height .dynamic-text .read-more-link {
    display: inline !important;
    visibility: visible;
    position: relative;
    white-space: nowrap !important;
    text-wrap: wrap !important;
}
.service-card.grid-fixed-height .dynamic-text .read-more-link::after {
    display: none;
}

.service-card .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 32px;
    /* margin-bottom: 16px; */
    gap: 16px;
    border-bottom: 1px solid #E5E5E5;
}
.service-card .about-section {
    margin-top: 16px;
}
.service-card .header .left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.service-card .header .left .top-sec {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.service-card .header .profile {
    display: flex;
    /* align-items: center; */
    gap: 20px;
}

.related-companies .service-card .header .profile {
    align-items: center;
}

.service-card .header .profile .image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: transparent;
    font-size: 22px;
    font-weight: 700;
    color: #7D5CA4;
    font-family: var(--SFProSemibold);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
}

.related-companies .service-card .header .profile .image {
    margin-top: 0px;
}

.service-card .header .profile .image img {
    /* width: 32px;
    height: auto;
    object-fit: contain; */
}

/* When company has no logo, remove background and add a purple border */
.service-card .header .profile .image.no-logo {
    background-color: transparent !important;
    border: 1px solid #7D5CA4;
}

.modal-content.small-modal .content .profile .image.no-logo {
    background-color: transparent !important;
    border: 1px solid #7D5CA4;
}

.service-card .header .profile img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* object-fit: cover; */
}

.service-card .header .profile .data .name,
.service-card .header .left .top-sec .name {
    font-size: 32px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 0px;
    word-break: break-word;
}

.service-card .header .left .bottom-sec {
    display: flex;
    margin-top: 6px;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.related-companies .service-card .header .left .bottom-sec {
    margin-top: 0px;
}

.service-card .header .left .bottom-sec .date {
    font-size: 16px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    color: #5f5f5f;
    margin-top: 1px;
}

.service-card .header .left .bottom-sec .date span {
    font-weight: 700;
}

.service-card .header .profile .data .reviews-wrapper,
.service-card .header .left .bottom-sec .reviews-wrapper {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    gap: 8px;
}
/* .service-card .header .left .bottom-sec .reviews-wrapper .d-flex{
    flex-wrap: wrap;
    gap: 8px;
} */
.service-card .header .profile .data .reviews-wrapper .reviews,
.service-card .header .left .bottom-sec .reviews-wrapper .reviews {
    display: flex;
    align-items: center;
    gap: 4px;
}

.service-card .header .profile .data .reviews-wrapper .reviews img,
.service-card .header .left .bottom-sec .reviews-wrapper .reviews img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.service-card .header .verified {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 24px;
    border-radius: 67px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #09B285;
    background-color: #0CC6B91A;
}
.service-card .header .comp-locations {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}
.service-card .header .comp-locations img{
    width: 20px;
    height: 20px;
    object-fit: cover;
}
.service-card .header .comp-locations span{
    font-size: 16px;
    font-weight: 500;
    font-family: 'Nunito Sans', sans-serif;
    color: rgba(51, 51, 51, 1);
}

.service-card .header .verified img {
    width: 22px;
    height: auto;
}

.service-card .header .tag {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 24px;
    border-radius: 67px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    border: 1px solid #EAEAEA;
    color: #838383;
    background-color: white;
}

.service-card .header .right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.service-card .title {
    font-size: 20px !important;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    font-weight: 500;
}

.service-card .services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
}

.service-card .services .service {
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7CC0D41A;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #1f5f73;
    gap: 8px;
}

.service-card .services .service img {
    width: 18px;
    height: auto;
    vertical-align: baseline !important;
}

.service-card .services .service .rel {
    position: relative;
    line-height: 1;
}

.service-card .services .service .rel .custom-tooltip {

    width: max-content;

    background-color: #191221E5;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%);

    transition: opacity 0.3s;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--SFProBold);
    line-height: 1.2;
    display: none;
    transition: all 0.3s ease-in-out;
}

.service-card .services .service .rel:hover .custom-tooltip {
    display: block;
}

.service-card .services .service .rel .custom-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent #191221E5 transparent;
}

.service.bordered:hover .custom-tooltip {
    opacity: 1;
    visibility: visible;
    z-index: 10 !important;
}

.service-card .services .service.active.bordered,
.pro-comp-portfolio-card .service.active.bordered {
    border: 1px solid #5801B5;
    background: linear-gradient(319.48deg, #0F0035 -111.8%, #5801B5 95.12%);
    -webkit-background-clip: text;

}

.service-card .services .service.active.bordered:hover,
.pro-comp-portfolio-card .service.active.bordered:hover {
    background: linear-gradient(0deg, #F0F8FA, #F0F8FA),
        linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03));

    color: #5801B5;
}

.service-card .services .service.active {
    background-color: #A991E61A;

    color: #7D5CA4;

}

.service-card .services .more {
    font-size: 20px;
    font-family: var(--SFProMedium);
    color: #1f5f73;
    text-decoration: underline;
    font-weight: 500;
    background: none;
    border: none;
}

.service-card .footer {
    padding: 32px 0px;
    padding-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: underline;
    font-size: 20px;
    color: #5A92A2;
    font-weight: 500;
    font-family: var(--SFProMedium);
    border-top: 1px solid #E5E5E5;
    cursor: pointer;
}

.service-card .service-reviews {
    display: flex;

    gap: 40px;

    margin-bottom: 42px;

}





.service-card .service-reviews .item {
    flex-shrink: 0;
    min-width: 150px;
}

.service-card .service-reviews .item .label {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    height: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
}

.service-card .service-reviews .item .label .large-img {
    width: 63px;
    height: auto;
    object-fit: contain;
}

.service-card .service-reviews .item .label .large-img.lg {
    width: 80px;
}

.service-card .service-reviews .item .label .small-img {
    height: 14px;
    width: auto;
    object-fit: contain;
}

.service-card .service-reviews .item .ratings {
    display: flex;
    align-items: center;
    gap: 0px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.service-card .service-reviews .item .ratings .reviews {
    display: flex;
    align-items: center;
    gap: 3px;
}

.service-card .service-reviews .item .ratings .reviews img {
    width: 18px;
    object-fit: contain;
    height: auto;
}

.service-card .service-reviews .item .text {
    font-size: 16px;
    font-weight: 500;
    font-family: "Nunito Sans", sans-serif;
    color: var(--text-color) !important;
}

.service-card .service-reviews .item .date {
    font-size: 16px;
    font-weight: 500;
    font-family: "Nunito Sans", sans-serif;
    color: #848484 !important;

}

.service-card .service-reviews .item .ratings.large {
    font-size: 20px;
}

.service-card .service-reviews .item .ratings.large img {
    width: 26px;
    height: auto;
}

.service-card .service-reviews .line {
    height: 74px;
    width: 1px;
    background-color: #E5E5E5;
    align-self: center;
    flex-shrink: 0;
}

.service-card .info-text {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 500;
    color: #A1A1A1;
    font-style: italic;
    line-height: 1.5;
    font-family: var(--SFProMedium);
}

.service-card .flex-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.custom-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.custom-navigation .left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.custom-navigation .left .line {
    height: 34px;
    width: 1px;
    background-color: #E7E7E9;
}
.custom-navigation .left .per-page-wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
}
.custom-navigation .left .per-page-wrapper .per-page-wrapper-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.custom-navigation .left .text {
    font-size: 16px;
    color: #636363;
    font-weight: 400;
    font-family: var(--SFProRegular);

}

.custom-navigation .left .text strong {
    font-weight: 700;
    font-family: var(--SFProBold);
}

.custom-navigation .select-page {
    height: 56px;
    width: 84px;
    border-radius: 16px;
    border: 1px solid #E7E7E9;
    padding: 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--SFProRegular);

}

.custom-navigation .input {
    height: 56px;
    max-width: 67px;
    border-radius: 16px;
    border: 1px solid #E7E7E9;
    padding: 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--SFProRegular);

}

.custom-navigation .select-page:focus,
.custom-navigation .input:focus {
    outline: none;
}

.custom-navigation .right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.custom-navigation .right .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    border: 1px solid #E7E7E9;
    background-color: #f5f5f5;
    border-radius: 16px;
}

.custom-navigation .right .pagination .page {
    height: 54px;
    width: 54px;
    text-decoration: none;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: #191221;

}

.custom-navigation .right .pagination .page.active {
    background-color: #7D5CA4;
    color: white;
}

.custom-section .top-filtes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    margin-bottom: 32px;
}

.custom-section .top-filtes .text {
    font-size: 24px;
    color: var(--text-color);

    font-weight: 700;
    font-family: var(--SFProBold);
    margin: 0px;
}

.custom-section .top-filtes .right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.custom-section .top-filtes .right .label {
    font-size: 16px;
    font-weight: 500;
    flex-shrink: 0;
    font-family: var(--SFProMedium);
    color: #848484;
    margin: 0px;
}

.custom-section .top-filtes .right select {
    height: 56px;
    border: 1px solid #E5E5E5;

    flex-shrink: 0;
    border-radius: 67px;
    color: #717376;
    font-weight: 500;
    font-family: var(--SFProMedium);
    padding: 9px 16px;
    font-size: 20px;
    max-width: 290px;
    width: 100%;
}

.custom-section .top-filtes .right select:focus {
    outline: none;
}

.custom-switch {
    height: 56px;
    border-radius: 67px;
    width: 112px;
    border: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    background-color: white;
}

.custom-switch input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
}

.custom-switch .icon {
    height: 52px;
    flex-direction: column;
    gap: 4px;
    width: 52px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-switch input[type="checkbox"]+.icon {
    background-color: #364CCA;
}

.custom-switch input[type="checkbox"]+.icon svg,
.custom-switch input[type="checkbox"]+.icon svg * {
    fill: white !important;
}

.custom-switch input[type="checkbox"]:checked+.icon {
    background-color: white;
}

.custom-switch input[type="checkbox"]:checked+.icon svg,
.custom-switch input[type="checkbox"]:checked+.icon svg * {
    fill: var(--text-color) !important;
    stroke: var(--text-color) !important;
}

.custom-switch input[type="checkbox"]:checked+.icon+.icon {
    background-color: #364CCA;
}

.custom-switch input[type="checkbox"]:checked+.icon+.icon svg,
.custom-switch input[type="checkbox"]:checked+.icon+.icon svg * {
    fill: white !important;
    stroke: white !important;
    color: white !important;
}

.custom-switch .icon svg {

    width: 24px;
    height: auto;
}

/* View Toggle Styles */
#grid-view {
    display: none;
}

.view-toggle-grid #list-view {
    display: none;
}

.view-toggle-grid #grid-view {
    display: block;
}

/* Right Modal Styles */
.modal .modal-dialog .right-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    height: 100vh !important;
    width: 500px !important;
    max-width: 500px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease-in-out !important;
    z-index: 1055 !important;
}

.modal.fade .modal-dialog .right-modal {
    transform: translateX(100%) !important;
}

.modal.show .modal-dialog .right-modal {
    transform: translateX(0) !important;
}

/* Override Bootstrap modal positioning for right-modal */
.modal .modal-dialog:has(.right-modal) {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 500px !important;
    height: 100vh !important;
    margin: 0 !important;
    transform: none !important;
}

.right-modal.modal-content {
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 24px;
    position: relative !important;
}

.right-modal .filter-top {

    height: 116px;

    padding-bottom: 24px;
    padding-top: 0px;

}

.right-modal .filter-top .title-wrapper {
    justify-content: space-between;
    align-items: center;
    display: flex;
    margin-bottom: 16px;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 16px;
}

.right-modal .filter-top .title-wrapper .text {
    font-size: 32px;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin: 0px;
}

.right-modal .filter-top .title-wrapper .icon {
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.right-modal .filter-top .filter-selection {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin: 0px;
}

.right-modal .filter-top .filter-selection .clear {
    text-decoration: underline;
    cursor: pointer;
    color: #7D5CA4;
}

.right-modal .filter-body {
    height: calc(100vh - 196px);
    overflow-y: auto;
    padding: 24px 0px;
    padding-right: 8px;
    ;
}

.right-modal .filter-body .search-box {

    background-color: white;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    position: relative;
    height: 48px;
    overflow: hidden;
    margin-bottom: 21px;

}

.right-modal .filter-body .search-box .icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    object-fit: contain;

}

.right-modal .filter-body .search-box .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.right-modal .filter-body .search-box input {
    height: 48px;
    border: none;
    width: 100%;
    padding-left: 40px;
    background: transparent;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.right-modal .filter-body .search-box input:focus {
    border: none;
    outline: none;
}

.right-modal .footer {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid #E5E5E5;
}

.right-modal .footer .btn-white {
    width: 98px;
}

.right-modal .footer .btn-blue {
    flex: 1 1 auto;

}

.right-modal .filter-body .verified-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    justify-content: space-between;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    padding: 8px 16px;
}

.right-modal .filter-body .verified-filter .left {
    display: flex;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    align-items: center;
    gap: 12px;
}

.right-modal .filter-body .verified-filter .left img {
    width: 48px;
    height: 48px;
}

.right-modal .filter-body .verified-filter .switch {
    height: 32px;
    width: 59px;
    background-color: var(--blue-light);
    position: relative;
    overflow: hidden;
    border-radius: 67px;
}

.right-modal .filter-body .verified-filter .switch .track {
    background-color: #bdbdbd;
    position: relative;
    width: 100%;
    border-radius: 67px;
    z-index: 1;

    height: 100%;
    top: 0px;
    left: 0px;

}

.right-modal .filter-body .verified-filter .switch .track .circle {
    position: absolute;
    top: 2px;
    left: 2px;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

.right-modal .filter-body .verified-filter .switch input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
}

.right-modal .filter-body .verified-filter .switch input[type="checkbox"]:checked+.track .circle {
    left: 29px;
    background-color: white;
}

.right-modal .filter-body .verified-filter .switch input[type="checkbox"]:checked+.track {
    background-color: #7D5CA4;
}

#filterAccordion .accordion-item {

    border: 1px solid #E5E5E5;
    border-radius: 16px;
    background-color: transparent !important;
    margin-bottom: 16px;

}

#filterAccordion .accordion-item .price-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 32px;
    margin-bottom: 16px;
}

#filterAccordion .accordion-item .price-wrapper .price-input {
    height: 40px;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 80px;
    border-radius: 4px;
    border: 1px solid #E5E5E5;
    background-color: transparent;
    overflow: hidden;
}

#filterAccordion .accordion-item .price-wrapper .price-input .icon {
    height: 39px;
    width: 39px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #E5E5E5;
}

#filterAccordion .accordion-item .price-wrapper .price-input .icon img {
    width: 10px;
    height: auto;
}

#filterAccordion .accordion-item .price-wrapper .price-input input {
    height: 100%;
    border: none;
    outline: none;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    background-color: transparent;
    width: 100%;
    -moz-appearance: textfield;
    appearance: textfield;
}

#filterAccordion .accordion-item .price-wrapper .price-input input::-webkit-outer-spin-button,
#filterAccordion .accordion-item .price-wrapper .price-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

#filterAccordion .accordion-item .price-wrapper .text {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #A0AEC0;
    margin: 0px;
    margin-left: -8px;

}

#filterAccordion .accordion-item .price-wrapper .line {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #A0AEC0;
    margin: 0px;


}

input:focus {
    outline: none;
}

#filterAccordion .accordion-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: none;
    background-color: transparent !important;
    padding: 8px 16px;


}

#filterAccordion .accordion-button.collapsed {
    box-shadow: none !important;
    border-bottom: none !important;
}

#filterAccordion .accordion-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

#filterAccordion .accordion-button::after {
    display: none !important;
}

#filterAccordion .accordion-button .icon img {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

#filterAccordion .accordion-button.collapsed .icon img {
    transform: rotate(0deg);
}

#filterAccordion .accordion-button:not(.collapsed) .icon img {
    transform: rotate(180deg);
}

/* #filterAccordion .accordion-button .icon img{
transform: rotate(0deg);
} */
#filterAccordion .accordion-button .left {
    display: flex;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    font-family: var(--SFProBold);
    align-items: center;
    gap: 12px;
}

#filterAccordion .accordion-button .left img {
    width: 48px;
    height: 48px;
}

#filterAccordion .accordion-button .left .count {
    border-radius: 50%;
    flex-shrink: 0;
    /* padding: 6px 4px; */
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--SFProBold);
    background-color: #6EC1E433;
}

#filterAccordion .accordion-button .right {
    display: flex;
    align-items: center;
    gap: 16px;
}

#filterAccordion .accordion-button .right a {
    font-size: 16px;
    font-family: var(--SFProMedium);
    color: #7D5CA4;
    text-decoration: underline;
}

#filterAccordion .accordion-item .accordion-body {
    border-top: 1px solid #E5E5E5;
    padding: 24px 16px;
    max-height: 530px;
    overflow-y: visible;
    max-height: none;
}

.accordion-button:not(.collapsed) {
    box-shadow: none !important;

}

#filterAccordion .accordion-item .accordion-body .filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin-bottom: 16px;

    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}


#filterAccordion .accordion-item .accordion-body .box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: white;
}

#filterAccordion .accordion-item .accordion-body .box img {
    display: none;
    position: absolute;
    width: 12px;
    height: auto;
    z-index: 10;
}

#filterAccordion .accordion-item .accordion-body .box input[type="checkbox"]+.check {
    height: 20px;
    width: 20px;
    border-radius: 2px;
    border: 1px solid #c5c5c5;
}

#filterAccordion .accordion-item .accordion-body .box input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 9;
    cursor: pointer;
}

#filterAccordion .accordion-item .accordion-body .box input[type="checkbox"]:checked+.check {
    background-color: var(--blue);
    border-color: var(--blue);
}

#filterAccordion .accordion-item .accordion-body .box input[type="checkbox"]:checked~img {
    display: block;
    pointer-events: none;
    cursor: pointer;
}

#filterAccordion .accordion-item .accordion-body .filter-item label {
    cursor: pointer;
    margin: 0;
    position: relative;
}

#filterAccordion .accordion-item .accordion-body .filter-item label.flex-label {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #A0AEC0;
    gap: 6px;
}

#filterAccordion .accordion-item .accordion-body .filter-item label.flex-label .reviews {
    display: flex;
    align-items: center;
    gap: 4px;
}

#filterAccordion .accordion-item .accordion-body .filter-item label.flex-label .reviews img {
    width: 18px;
    height: auto;
    object-fit: contain;
}

#filterAccordion .accordion-item .accordion-body .box input[type="radio"]+.check {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #c5c5c5;
}

#filterAccordion .accordion-item .accordion-body .box input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 9;
}

#filterAccordion .accordion-item .accordion-body .box input[type="radio"]:checked+.check {
    border: 6px solid var(--blue);
}

/* Hierarchical Filter Styles */
.filter-hierarchy {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.filter-parent {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    cursor: pointer;
}

.filter-parent .parent-toggle {
    width: 24px;
    height: 24px;
    background-color: #7D5CA4;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.filter-parent .parent-toggle span {
    margin-top: -2px;
}

.filter-parent .title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
    font-family: var(--SFProMedium);
}

.filter-child-list {
    padding-left: 36px;
    display: flex;
    flex-direction: column;
}

.filter-child {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.filter-child .box {
    margin-top: 2px;
}

.filter-child .box input[type="checkbox"]:checked+.check {
    background-color: #7D5CA4 !important;
    border-color: #7D5CA4 !important;
}

.filter-child label {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
}

.custom-section .selected-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.custom-section .selected-filters .item {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    gap: 16px;
    padding: 8px 24px;
    background-color: white;
    border: 1px solid #EAEAEA;
    border-radius: 67px;
}

.custom-section .selected-filters .item img {
    width: 16px;
    height: auto;
    cursor: pointer;
}

.custom-section .applied-titles {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #A0A0A0CC;
    margin-bottom: 24px;
}

.custom-section .applied-titles .link {
    text-decoration: underline;
    cursor: pointer;
    color: #7D5CA4;
    background: none;
    border: none;
}

.custom-section .applied-titles .link:disabled,
.service-card .footer:disabled {
    pointer-events: none;
    opacity: 50%;

    cursor: default;
}

.custom-section .applied-titles .link:hover,
.service-card .footer:hover {
    color: #477582;
}

.custom-section .applied-titles .link:focus,
.service-card .footer:focus {
    color: #3F6671;
}

.company-card {
    padding: 32px;
    background-color: white;
    border-radius: 24px;
    border: 1px solid #FFFFFF33;
    backdrop-filter: blur(24px);

    box-shadow: 0px 4px 12px 0px #0000001F;
    margin-bottom: 32px;

}

.company-card .header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 36px;
    margin-bottom: 36px;
    border-bottom: 1px solid #E5E5E5;
}

.company-card .header .left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.company-card .header .left .image {
    height: 176px;
    width: 176px;
    border-radius: 50%;
}

.company-card .header .left .image img {
    width: 110px;
    height: auto;
}

.company-card .header .data .verified {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    padding: 8px 24px;
    border-radius: 67px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #09B285;
    background-color: #0CC6B91A;
}

.company-card .header .data .verified img {
    width: 22px;
    height: auto;
}

.company-card .header .data .name {
    font-size: 40px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin-bottom: 8px;
    word-break: break-word;
}

.company-card .header .data .date-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
}

.company-card .header .data .date-wrapper .date {
    color: #848484;
}

.company-card .header .data .reviews-wrapper {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    color: var(--text-color);
    gap: 8px;
}

.company-card .header .data .reviews-wrapper .reviews {
    display: flex;
    align-items: center;
    gap: 4px;
}

.company-card .header .data .reviews-wrapper .reviews img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.company-card .header .right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.company-card .header .right .share {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #7D5CA4;
    text-decoration: none;
}

.company-card .header .right .share.copied {
    color: #09B285;
}

.company-card .header .right .share img {
    width: 24px;
    height: auto;
}

.share-mobile-icon {
    display: none;
}

.company-card .title {
    /* margin: 0; */
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    /* margin-bottom: 16px; */
    line-height: 1.5;
}

.company-card .text {
    font-size: 20px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    margin-bottom: 24px;
    line-height: 1.5;
    color: #6D6D6D;
}
.primary-badge {
    width: max-content;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(9, 178, 133, 1);
    padding: 4px 12px;
    background: rgba(12, 198, 185, 0.1);
}
.editor-p {
    display: none;
}

.company-card p span {
    font-size: 20px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    margin-bottom: 16px;
    line-height: 1.5;
    color: #6D6D6D;
}

.company-card .company-name-about p {
    font-size: 20px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    margin-bottom: 16px;
    line-height: 1.5;
    color: #6D6D6D;
    margin-top: 16px;
}
.company-name-about *{
    width: 100%;
}
.company-name-about blockquote{
    font-size: 20px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    margin-bottom: 16px;
    line-height: 1.5;
    color: #6D6D6D;
    margin-top: 16px;
}
.company-card .flex_items {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.company-card .flex_items .item {
    padding: 8px 24px;
    border-radius: 8px;
    background-color: #A991E61A;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #7D5CA4;
}

.company-card .flex_items .item.toggle-industries {
    display: none;
    cursor: pointer;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .company-card .flex_items .item.extra-item {
        display: none;
    }
    .company-card .flex_items.expanded .item.extra-item {
        display: block;
    }
    .company-card .flex_items .item.toggle-industries {
        display: block;
        border: none;
        background: none;
        text-decoration: underline;
        padding: 0;
    }
}

.company-card .custom-service {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #5801B5;
    margin-bottom: 16px;
    cursor: pointer;
}

.company-card .custom-service span {
    background: linear-gradient(319.48deg, #0F0035 -111.8%, #5801B5 95.12%);
    -webkit-background-clip: text;
}

/*.company-card .custom-service:hover {*/
/*    color: #477582;*/
/*}*/
.company-card .custom-service .image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #5801B5;
    font-family: var(--SFProBold);
    background-color: #F0F8FA;
    flex-shrink: 0;
    border: 1px solid #5801B5;
}

.company-card .custom-service img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.company-card .other-service {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    cursor: pointer;
    margin-bottom: 16px;
}

.company-card .other-service.no-hover {
    cursor: text;
}

.company-card .other-service .image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: rgba(90, 146, 162, 1);
    font-family: var(--SFProBold);
    background-color: rgba(110, 193, 228, 0.2);
    flex-shrink: 0;
}

.company-card .other-service:hover {
    color: #477582;
}

.company-card .other-service.no-hover:hover {
    color: var(--text-color);
}

.company-card .other-service img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.company-card .hr {
    margin: 16px auto;
    background-color: #E5E5E5;
    height: 1px;
    width: 100%;
}

.company-card .more {
    text-decoration: underline;
    font-size: 20px;
    font-family: var(--SFProMedium);
    color: #5A92A2;
    width: max-content;
    text-decoration: underline;
}

.service-cards-wrapper {
    position: relative;
    padding: 0 10px;
}

.service-cards-wrapper::after {
    content: '';
    position: absolute;
    z-index: 9;
    bottom: 0px;
    right: 0px;
    width: 125px;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 29.99%, #FFFFFF 67.32%);
    pointer-events: none;
}

.service-cards.owl-carousel {
    position: relative;
    overflow: hidden;
}

.service-cards .item {
    min-height: 340px;
    /* height: auto; */
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px 5px;
    transition: all 0.3s ease;
}

.service-cards .service-details-item {
    border: 0;
    padding: 0;
    background: transparent;
    min-height: auto;
}



.custom-nav {
    position: absolute;
    top: 46%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.custom-nav button {
    background: transparent;
    /* border: 1px solid #E5E5E5; */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* box-shadow: 0px 2px 6px rgba(0,0,0,0.1); */
    transition: all 0.3s ease;
    pointer-events: auto;
}

.custom-nav button:hover {
    /* background: #f8f8f8; */
    transform: scale(1.1);
}

.custom-nav button:focus {
    outline: none;
}

.custom-nav .owl-prev {
    margin-left: -40px;
}

.custom-nav .owl-next {
    margin-right: -20px;
}

.custom-nav img {
    width: 18px;
    height: 18px;
}

/* Override owl-carousel default styles */
.service-cards .owl-dots {
    margin-top: 20px;
}

.service-cards .owl-dots .owl-dot span {
    background-color: #ddd;
}

.service-cards .owl-dots .owl-dot.active span {
    background-color: #7D5CA4;
}

.service-cards .item .label {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin-bottom: 9px;
}

.service-cards .item .text {
    font-size: 20px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    margin-bottom: 9px;
    color: #6D6D6D;
    line-height: 1.5;
    word-break: break-word;
}

.service-cards .item .price .small {
    font-size: 16px;
    color: #A0A0A0CC;
    font-weight: 500;
    font-family: var(--SFProMedium);
    margin-left: 4px;
}

.service-cards .item .price .value {
    font-size: 26px;
    line-height: 1.2;
    color: #7D5CA4;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin-left: 0px;


}

.service-cards .item .price .value sub {
    font-size: 20px;
    font-weight: 500;
    top: 12px;
    position: relative;
    display: block;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.service-cards .item .price .sub {
    font-size: 20px;
    font-weight: 500;
    margin-top: 6px;
    position: relative;
    display: block;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.custom-navigation .btn-white {
    height: 56px;
    max-height: 56px;
}

.company-reviews {
    padding: 24px;
    border-radius: 24px;
    background-color: white;
    backdrop-filter: blur(24px);
    margin-bottom: 24px;

    box-shadow: 0px 4px 12px 0px #0000001F;

}

.company-reviews .title {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin-bottom: 16px;
}

.company-reviews .reviews-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;
    margin-bottom: 48px;
}

.company-reviews .reviews-container .line {
    height: 89px;
    width: 1px;
    background-color: #E5E5E5;
    flex-shrink: 0;
}

.company-reviews .reviews-container .item {
    flex-shrink: 0;

}

.company-reviews .reviews-container .item .label {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    margin-bottom: 13px;

}

.company-reviews .reviews-container .item .text-lg {
    font-size: 40px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    margin-bottom: 13px;

}

.company-reviews .reviews-container .item .text {
    font-size: 16px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    color: #848484;
    margin-bottom: 6px;

}

.company-reviews .reviews {
    display: flex;
    align-items: center;
    gap: 3px;
}

.company-reviews .item .review-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 40px;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.company-reviews .reviews img {
    width: 26px;
    object-fit: contain;
    height: 26px;
}

.company-reviews .over-all-reviews {
    flex-shrink: 0;
}

.company-reviews .over-all-reviews .item {
    display: flex;
    gap: 18px;
    margin-bottom: 12p;
    align-items: center;
}

.company-reviews .over-all-reviews .item .text {
    font-size: 16px;
    width: 24px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #7D5CA4;
    margin: 0px;
}

.company-reviews .over-all-reviews .item .reviews img {
    width: 16px;
    object-fit: contain;
    height: auto;
}

.company-reviews .over-all-reviews .item .progress {
    flex: 1 1 auto;
    width: 100%;
    height: 8px;
    border-radius: 20px;
    min-width: 400px;
    background-color: #D9D9D9;
}

.progress-bar {
    background-color: var(--blue) !important;
}

.company-reviews .review-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 32px;
}

.company-reviews .review-filters .left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 50%;
}

.company-reviews .review-filters .left .button {
    height: 40px;
    padding: 8px 24px;
    border-radius: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border: 1px solid #EAEAEA;
    background-color: transparent;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.company-reviews .review-filters .left .button img {
    height: 20px;
    width: 58px;
    object-fit: contain;
}

.company-reviews .review-filters .left .button img.lg {
    width: 80px;
}

.company-reviews .review-filters .left .button.active {
    background-color: #7D5CA41A;
    border: 2px solid #7D5CA4;
}

.company-reviews .review-filters .right {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 16px;
}

.company-reviews .review-filters .right label {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #848484;
    margin: 0px;
    flex-shrink: 0;
}

.company-reviews .review-filters .right select {
    height: 56px;
    border: 1px solid #E5E5E5;
    border-radius: 67px;
    color: #717376;
    font-weight: 500;
    font-family: var(--SFProMedium);
    padding: 9px 16px;
    font-size: 16px;
    flex-shrink: 0;
    max-width: 280px;
    width: 100%;
}

select:focus {
    outline: none;
}

.company-reviews .customer-review {
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    margin-bottom: 16px;
}

.company-reviews .customer-review .header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E5E5E5;
    justify-content: space-between;
}

.company-reviews .customer-review .header .left {
    display: flex;
    align-items: center;
    gap: 16px;

}

.company-reviews .customer-review .header .left .image {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
}

.company-reviews .customer-review .header .left .image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.company-reviews .customer-review .header .left .data .name {
    font-size: 16px !important;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin-bottom: 0px;
    color: var(--text-color);
    line-height: 1.5;
}

.company-reviews .customer-review .header .left .data .date {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    margin-bottom: 0px;
    color: #848484;
    line-height: 1.2;
}

.company-reviews .customer-review .header .left .badge {
    height: 40px;
    padding: 8px 24px;
    border-radius: 67px;
    border: 1px solid #EAEAEA;
    background-color: #fff;

    display: flex;
    align-items: center;


}

.company-reviews .customer-review .header .left .badge img {
    width: 60px;
    height: auto;

}

.company-reviews .customer-review .header .left .badge img.lg {
    width: 80px;
}

.company-reviews .customer-review .header .right {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    align-items: center;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #000000;
    justify-content: center;
}

.company-reviews .customer-review .header .righ .reviews {
    display: flex;
    align-items: center;
    gap: 4px;
}

.company-reviews .customer-review .header .righ .reviews img {
    width: 26px;
    object-fit: contain;
    height: 26px;
}

.company-reviews .customer-review .header .righ .img {
    width: 100px;
    height: auto;
    cursor: pointer;
}

.company-reviews .customer-review .body .title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin-bottom: 16px;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 24px;
}

.company-reviews .customer-review .body .text {
    font-size: 20px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    margin-bottom: 0px;
    color: #000000;
    line-height: 1.5;
    margin-bottom: 14px;

}

.company-reviews .customer-review .body .actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.company-reviews .customer-review .body .actions .action {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #7D5CA4;
    text-decoration: none;
}
.company-reviews .customer-review .body .review-gallery {
    display: flex;
    gap: 16px;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 24px;
}
.review-image{
    cursor: pointer;
}
.company-reviews .customer-review .body .review-gallery img{
    width: 104px;
    height: 104px;
    border-radius: 8px;
    object-fit: cover;
}
.company-reviews .customer-review .body .actions .action img {
    width: 20px;
    height: auto;
}

.back-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    box-shadow: 0px 4px 12px 0px #0000001F;
    border: 1px solid #E5E5E5;
    color: var(--text-color);
    margin-bottom: 24px;
    border-radius: 16px;
    height: 56px;
    background-color: white;
}

.back-box img {
    width: 12px;
    height: auto;
}

.back-box a {
    text-decoration: none;
    color: var(--text-color);
}

.related-companies {
    background-color: white;
    padding: 32px;
    border-radius: 24px;
    margin-bottom: 16px;
    backdrop-filter: blur(24px);

    box-shadow: 0px 4px 12px 0px #0000001F;

}

.related-companies .service-card {
    background-color: transparent;
    padding: 32px;
    box-shadow: none;
    border: 1px solid #E5E5E5;
}
.related-companies .service-card.grid-fixed-height {
    overflow: hidden;
}

.related-companies .service-card .header {
    flex-wrap: wrap;
}

.related-companies .service-card .header .left {
    justify-content: initial;
}

.related-companies .service-card .header .right .btn-white,
.related-companies .service-card .header .right .btn-blue {
    width: 100%;
}

.related-companies .service-card .header .left,
.related-companies .service-card .header .right {
    flex: 1 1 100%;
}

.related-companies .service-card .header .left .top-sec .name {
    flex: 1 1 100%;
    order: 2;
}

.related-companies .service-card .header .verified,
.related-companies .service-card .header .tag {
    font-size: 14px;
    padding: 8px 18px;
}

.related-companies .title-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.related-companies .title-header .title {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin: 0px;
    color: var(--text-color);
}

.related-companies .title-header .buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.related-companies .title-header .buttons .button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    width: 56px;
    border-radius: 16px;
    background-color: transparent;
    border: 1px solid #E5E5E5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.related-companies .title-header .buttons .button img {
    width: 12px;
    height: 12px;
}

/* .owl-carousel .owl-item img {
    width: initial !important;
} */
.service-card .service-reviews .slider-wrapper-container {
    display: flex;
    width: 100%;
    overflow: hidden;
    gap: 40px;
    position: relative;
}

.service-card .service-reviews .slider-wrapper-container .buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.service-card .service-reviews .slider-wrapper-container .buttons .button {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-card .service-reviews .slider-wrapper-container .buttons .button:hover {
    transform: scale(1.1);
}

.service-card .service-reviews .slider-wrapper-container .buttons .button:focus {
    outline: none;
}

.service-card .service-reviews .slider-wrapper-container .buttons .button img {
    width: 12px;
    height: 12px;
}

.service-card .service-reviews .slider-wrapper-container.is-grid-mode-slide {
    overflow: visible;
    padding: 0 5px;
    width: 60% !important;
}

.service-card .service-reviews .slider-wrapper-container.is-grid-mode-slide::before {
    display: none;
}

.service-card .service-reviews .slider-wrapper-container.is-grid-mode-slide .buttons {
    width: calc(100% + 50px);
    left: -25px;
}

.service-card .service-reviews .slider-wrapper-container::after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 195px;
    z-index: 2;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 29.99%, #FFFFFF 67.32%);

    pointer-events: none;
}

.service-card .service-reviews .slider-wrapper-container::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 2;
    width: 125px;
    height: 100%;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 29.99%, #FFFFFF 67.32%);

    pointer-events: none;
}

.related-companies .service-card .service-reviews .slider-wrapper-container::before,
.related-companies .service-card .service-reviews .slider-wrapper-container::after {
    width: 30px;
}

.service-card .service-reviews .slider-wrapper .item {
    position: relative;
    padding-right: 40px;
    flex-shrink: 0;
}

.service-card .service-reviews .slider-wrapper .item::after {
    content: '';
    position: absolute;
    right: -0px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 74px;
    border-radius: 50%;
    background-color: #D9D9D9;
}

.modal-content.small-modal {
    max-width: 716px;
    width: 100%;

    margin: auto;

    position: relative;
    overflow: hidden;
}

.modal-content.small-modal.max-948 {
    max-width: 948px;

}

.modal-content.small-modal .abs-left {
    position: absolute;
    z-index: 1;
    left: -50%;
    top: -50%;
    height: 100%;
    width: auto;
    z-index: -1;
    border-radius: 50%;
    backdrop-filter: blur(500px);
    opacity: 0.15;
}

.modal-content.small-modal .abs-left img {
    width: 100%;
    backdrop-filter: blur(500px);

    height: auto;


}

.modal-content.small-modal .abs-right {
    position: absolute;

    right: -50%;
    top: -50%;
    height: 100%;
    width: auto;
    z-index: -1;
    border-radius: 50%;
    backdrop-filter: blur(500px);
    opacity: 0.15;
}

.modal-content.small-modal .abs-right img {
    width: 100%;
    backdrop-filter: blur(500px);

    height: auto;


}

.modal-content.small-modal .content {
    position: relative;
    z-index: 2;
    height: 100%;
    max-height: 93vh;
    padding: 24px 40px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nunito-sans {
    font-family: 'Nunito Sans', sans-serif !important;
}

.modal-content.small-modal .content .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    height: 60px;
}

.modal-content.small-modal .content .footer {
    padding: 0px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modal-content.small-modal .content.no-footer {
    padding-bottom: 24px;
}

.modal-content.small-modal .content.no-footer .body {
    max-height: calc(93vh - 70px);
    /* padding-bottom: 40px; */
}

.buttons-flex {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.buttons-flex button {
    width: 48%;

}

.modal-content.small-modal .content .body {
    max-height: calc(93vh - 232px);
    padding-right: 12px;
    /* padding-bottom: 20px; */
    overflow-y: auto;
}

.modal-content.small-modal .content .header .title {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0px;
}

.modal-content.small-modal .content .header .close {
    width: 48px;
    height: 48px;
    border-radius: 50%;


}

.modal-content.small-modal .content .header .close img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 50%;
    cursor: pointer;
}

.modal-content.small-modal .content .text {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #6D6D6D;
    margin-bottom: 18px;
    line-height: 1.5;
}

.modal-content.small-modal .content .hr {
    height: 1px;
    width: 100%;
    background-color: #E5E5E5;

}

.modal-content.small-modal .content .profile {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.modal-content.small-modal .content .profile .text {
    font-size: 32px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0px;
}

.modal-content.small-modal .content .profile .image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6EC1E433;
    font-size: 22px;
    font-weight: 700;
    color: #7D5CA4;
    font-family: var(--SFProSemibold);
}

.modal-content.small-modal .content .profile .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.modal-content.small-modal .content .input-wrapper label {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #717376;
    margin-bottom: 16px;
}

.modal-content.small-modal .content .input-wrapper .company-name-input {
    height: 56px;
    border: 1px solid #E5E5E5;
    background-color: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    position: relative;
    gap: 16px;
    padding-left: 16px;
    display: flex;
    align-items: center;
}

.modal-content.small-modal .content .input-wrapper .company-name-input input {
    flex: 1 1 auto;
    padding-right: 40px;
    border: none;
    background-color: transparent;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    flex: 1 1 auto;
}

.modal-content.small-modal .content .input-wrapper .company-name-input img.filter-img {
    width: 24px;
    height: auto;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .claim-button {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #5A92A2;
    z-index: 99;
    text-decoration: underline;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    right: 16px;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .claim-button.hide {
    display: none;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .selected-company {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px;
    border-radius: 8px;
    margin: -8px;
}

/* .modal-content.small-modal .content .input-wrapper .company-name-input .selected-company:hover {
    background-color: #f5f5f5;
} */

.modal-content.small-modal .content .input-wrapper .company-name-input .selected-company.show {
    display: flex;
    width: 100%;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .selected-company img {
    width: 32px;
    height: auto;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .companies-result {
    position: absolute;
    width: calc(100% + 2px);
    top: calc(100% - 10px);
    left: -1px;
    background-color: white;
    z-index: 99;
    max-height: 340px;
    overflow-y: auto;
    padding: 12px 0px;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top: none;
    display: none;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .companies-result.show {
    display: block;
}

.modal-content.small-modal .content .input-wrapper .company-name-input:has(.companies-result.show) {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .companies-result .title {
    font-size: 16px;
    padding: 0px 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #A0A0A0CC;
    margin-bottom: 10px;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .companies-result .item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    border-bottom: 1px solid #E5E5E5;
    cursor: pointer;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .companies-result .item .image,
.selected-company-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    background-color: #6EC1E433;
    color: #7D5CA4;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .companies-result .item img,
.selected-company-placeholder img {
    width: 20px;
    height: auto;
}

.modal-content.small-modal .content .input-wrapper .company-name-input .companies-result .item:last-child {
    border-bottom: none;
}

.modal-content.small-modal .content .input-wrapper .input {
    height: 56px;
    border: 1px solid #E5E5E5;
    background-color: transparent;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    overflow: hidden;
    gap: 0px;
}

.modal-content.small-modal .content .input-wrapper .input.lg {
    height: 248px;
    align-items: flex-start;
    padding-top: 20px;

}

.modal-content.small-modal .content .input-wrapper .input input {
    border: none;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 9px 16px;
    padding-left: 10px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    flex: 1 1 auto;
}

.modal-content.small-modal .content .input-wrapper .input textarea {
    border: none;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 0px 16px;
    padding-left: 10px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    resize: none;

}

.modal-content.small-modal .content .input-wrapper .input.lg img {
    margin-top: 4px;
}

.modal-content.small-modal .content .input-wrapper .small-text {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #A1A1A1;
    margin-bottom: 16px;
}

.modal-content.small-modal .content .support {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    text-align: center;

}

.modal-content.small-modal .content .support a {
    color: #5A92A2;

    text-decoration: underline;
    cursor: pointer;
}

.modal-content.small-modal .content .support a.large {
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    gap: 8px;

}

.modal-content.small-modal .content .support a.large img {
    width: 10px;
    height: auto;
}

.loading {
    padding-left: 15px;
    color: #A0A0A0CC;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;

}

.custom-checkbox .box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: white;
}

.custom-checkbox .box input[type="checkbox"]+.check {
    height: 20px;
    width: 20px;
    border-radius: 2px;
    border: 1px solid #c5c5c5;
}

.custom-checkbox .box .img {
    display: none;
    position: absolute;
    width: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    z-index: 10;
    pointer-events: none;
}

.custom-checkbox .box input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 9;
}

.custom-checkbox .label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    margin: 0px !important;
    font-size: 20px !important;
    font-weight: 500;
    font-family: var(--SFProMedium) !important;
    color: var(--text-color) !important;
}

.custom-checkbox .label .img {
    max-height: 28px;
    width: auto;
}

.custom-checkbox .label img {
    width: 18px;
    height: auto;
}

.custom-checkbox .box input[type="checkbox"]:checked+.check {
    background-color: var(--blue);
    border-color: var(--blue);
}

.custom-checkbox .box input[type="checkbox"]:checked~.img {
    display: block;
}

.modal-content.small-modal .content .input-wrapper .label-slider {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #717376;
    margin-bottom: 20px;
}

.modal-content.small-modal .content .input-wrapper .label-slider .line {
    height: 1px;
    width: 100%;
    background-color: #E5E5E5;
}

.modal-content.small-modal .content .input-wrapper .label-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #717376;
    margin-bottom: 16px;
}

.modal-content.small-modal .content .input-wrapper .label-flex .right {
    display: flex;
    align-items: center;
    gap: 17px;
}

.modal-content.small-modal .content .input-wrapper .label-flex .right .item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #717376;
}

.modal-content.small-modal .content .input-wrapper .label-flex .right .item img {
    width: 20px;
    height: auto;
}

.modal-content.small-modal .content .input-wrapper .label-flex .right .item.ai {
    color: #6E00FF;
}

.modal-content.small-modal .content .companies .company-wrapper {
    position: relative;
    margin-bottom: 16px;


}

.modal-content.small-modal .content .companies .company-wrapper .label {
    position: relative;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    width: 100%;
    cursor: pointer;

}

.modal-content.small-modal .content .similar-companies-list .company-wrapper .label {
    border: 2px solid #ccc;
}

.modal-content.small-modal .content .companies .company-wrapper .label .header {
    display: flex;
    padding-left: 50px;
    justify-content: inherit;
    align-items: flex-start;
    height: auto !important;
    padding-bottom: 18px;

    margin-bottom: 18px;
    border-bottom: 1px solid #E5E5E5;
    gap: 20px;
}

.modal-content.small-modal .content .companies .company-wrapper .label .header .image {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;

}

.modal-content.small-modal .content .companies .company-wrapper .label .header .image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.modal-content.small-modal .content .companies .company-wrapper .label .header .data .top {
    display: flex;
    align-items: center;
    justify-content: inherit;
    gap: 4px;
    margin-bottom: 0px;
}

.modal-content.small-modal .content .companies .company-wrapper .label .header .data .top .name {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin: 0px;
    color: var(--text-color);
    margin: 0px !important;
}

.modal-content.small-modal .content .companies .company-wrapper .label .header .data .top .tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-content.small-modal .content .companies .company-wrapper .label .header .data .top .tags .verified {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 24px;
    border-radius: 67px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #09B285;
    background-color: #0CC6B91A;
}

.modal-content.small-modal .content .companies .company-wrapper .label .header .data .top .tags .verified img {
    width: 22px;
    height: auto;
}

.modal-content.small-modal .content .companies .company-wrapper .label .header .data .top .tags .tag {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 24px;
    border-radius: 67px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    border: 1px solid #EAEAEA;
    color: #838383;
    background-color: white;
}

.content .companies .company-wrapper .label .header .data .reviews-wrapper {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    gap: 8px;
}
.content .companies .company-wrapper .label .header .data .reviews-wrapper .d-flex{
    flex-wrap: wrap;
}

.content .companies .company-wrapper .label .header .data .reviews {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.content .companies .company-wrapper .label .header .data .reviews img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.modal-content.small-modal .content .companies .company-wrapper .custom-checkbox {
    position: absolute;
    top: 32px;
    left: 16px;
}

.modal-content.small-modal .content .companies .company-wrapper .custom-checkbox .box {
    display: initial;
}

.modal-content.small-modal .content .companies .company-wrapper:has(.custom-checkbox .box input[type="checkbox"]:checked) .label {
    border: 2px solid #8666AD;
}

.modal-content.small-modal .content .companies .company-wrapper .sub-title {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    margin-bottom: 16px;
    color: var(--text-color);
}

.modal-content.small-modal .content .companies .company-wrapper .services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
}

.modal-content.small-modal .content .companies .company-wrapper .services .service {
    padding: 6px 24px;
    border-radius: 8px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: 500;
    font-family: var(--SFProMedium);
    background-color: #A991E61A;
    border: 1px solid #6E00FF;
    color: #6E00FF;
    gap: 8px;
}

.modal-content.small-modal .content .companies .company-wrapper .services .service img {
    width: 18px;
    height: auto;
}

.modal-content.small-modal .content .image-large {
    width: 310px;
    margin: 16px auto;
    margin-bottom: 36px;
}

.modal-content.small-modal .content .image-large img {
    width: 100%;
    height: auto;
    max-height: 200px;


}

.modal-content.small-modal .content .text-med {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0px;
    margin-bottom: 16px;
}

.modal-content.small-modal .content .buttons-small {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.btn-red {
    background-color: #F2003C;
    padding: 16px 24px;
    max-height: 56px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: white;
    border: 1px solid #F2003C;
}

.btn-red.lg,
.btn-blue.lg,
.btn-white.lg {
    padding: 16px 20px;
    width: 180px;
}

#billingUpgradeSuccessModal .btn-white.lg {
    width: 360px;
}

.close-btn {
    width: 360px !important;
    background-color: rgba(125, 92, 164, 1) !important;
    color: rgba(255, 255, 255, 1) !important;
}

.close-btn:hover {
    background-color: rgba(97, 71, 127, 1) !important;
}

.btn-red:hover {
    background-color: #D80035;
    border-color: #D80035;
    cursor: pointer;
}

.btn-red:disabled {
    opacity: 50%;
    cursor: not-allowed;
}

.modal-content.small-modal .content .title-med a {
    color: #7D5CA4;
    text-decoration: none;
}

.login-section {
    background-color: #EFF6FA;
    position: relative;
    padding: 40px 0px;
    /* background-image: url('../../va_assets/images/bg1.svg'); */
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

.login-r {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
}

.login-l {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 2;
}

.login-section .logo {
    width: 180px;
    display: block;
    margin: auto;
    margin-bottom: 40px;
}
.login-section.forget-passsword-section .logo {
    width: 180px !important;
    display: block;
    margin: auto;
    margin-bottom: 40px;
}

.login-section .logo.mb-90 {
    margin-bottom: 90px;
}

.login-section .title {
    font-size: 40px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    text-align: center;
    margin-bottom: 32px;
}
.login-section.forget-passsword-section .title {
    font-size: 40px !important;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    text-align: center;
    margin-bottom: 32px;
}
.login-section.forget-passsword-section .other-title {
    font-size: 20px !important;
    font-weight: 700;
    text-align: left;
    margin-bottom: 8px !important;
}

.login-section .content {
    max-width: 640px;
    width: 100%;
    z-index: 3;
}

.login-section .boxx {
    position: relative;
    overflow: hidden;
    max-width: 610px;
    margin: auto;
    padding: 32px;
    padding-bottom: 0px;
    border-radius: 24px;
    background-color: white;
    border: 1px solid #FFFFFF33;
    backdrop-filter: blur(24px);

    box-shadow: 0px 4px 12px 0px #0000001F;

}

.login-section .boxx.pt-50 {
    padding-top: 50px;
}

.login-section .boxx .image-small {
    width: 180px;
    height: auto;
    margin: auto;
    margin-bottom: 60px;

}

.login-section .boxx .image-small img {
    width: 100%;
    height: auto;
    object-fit: contain;

}

.login-section .boxx .title_small {
    font-size: 24px;
    text-align: center;
    margin-bottom: 7px;
    line-height: 1.5;
    color: rgba(25, 18, 33, 1);
    font-weight: 700;
    font-family: var(--SFProBold);
}

.login-section .boxx .text_small {
    font-size: 16px;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.5;
    color: rgba(108, 117, 125, 1);
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.login-section .boxx .right-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -50%;
    right: -50%;
    opacity: 0.1;
    z-index: 1;


}

.login-section .boxx .right-circle img {
    width: 100%;
    height: 100%;
}

.login-section .boxx .left-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -50%;
    opacity: 0.1;
    left: -50%;
    z-index: 1;


}

.login-section .boxx .left-circle img {
    width: 100%;
    height: 100%;
}

.login-section .boxx .form {
    z-index: 2;
    position: relative;
}

.login-section .boxx .input-wrapper {
    margin-bottom: 32px;
}

.login-section .boxx .input-wrapper label {
    display: block;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #717376;
    margin-bottom: 16px;
}

.login-section .boxx .input-wrapper .input {
    height: 56px;
    border: 1px solid #E5E5E5;
    background-color: transparent;
    border-radius: 16px;
    display: flex;
    position: relative;
    align-items: center;
    padding-left: 16px;
    overflow: hidden;
    gap: 0px;
}

.login-section .boxx .input-wrapper .input input {
    border: none;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 7px 16px;
    padding-right: 50px;
    padding-left: 10px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    flex: 1 1 auto;

}

.login-section .boxx .input-wrapper .input input[type="password"]::placeholder {
    font-size: 8px !important;
    letter-spacing: 3px;
}

.login-section .boxx .input-wrapper .input input[type="password"].password::placeholder {
    font-size: 16px !important;
    letter-spacing: 0px;
}

.login-section .boxx .input-wrapper .input input[type="password"] {
    padding-bottom: 10px !important;
}

.login-section .boxx .input-wrapper .input .icon {
    width: 24px;
    height: auto;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.login-section .boxx .input-wrapper .input .icon img {
    width: 24px;
    height: auto;
}

.login-section .remember-me {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.login-section .remember-me .left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.login-section .remember-me .left label {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #717376;
    margin: 0px;
    cursor: pointer;
}

.login-section .remember-me .forgot {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #7D5CA4;
    text-decoration: underline;
    cursor: pointer;
}

.dont-have-account {
    font-size: 16px;
    font-weight: 500;
    font-family: "Nunito Sans", sans-serif;
    color: #191221;
    text-align: center;
    margin-bottom: 16px;
    text-decoration: none;
}

.login-section .text {
    font-size: 16px;
    font-weight: 500;
    font-family: "Nunito Sans", sans-serif;
    color: #6D6D6D;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 16px;
}

.login-section .text .submit {
    color: #7D5CA4;
    text-decoration: underline;
}

.login-section .buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.login-section .buttons button {
    max-width: 48%;
    width: 100%;
}

/* .select2-container {
    width: 100% !important;
} */
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-radius: 67px !important;
}

.select2-container--default .select2-selection--single {
    background-color: #ffffff;
    border: 1px solid #E5E5E5;
    border-radius: 67px;
    height: 48px;
    padding: 9px 16px;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #717376;
    font-weight: 500;
    font-family: var(--SFProMedium);
    box-shadow: none;
    outline: none;
    max-width: 180px;
    width: 100%;
}

.select2-container--default .select2-selection--multiple {
    background-color: #ffffff;
    border: 1px solid #E5E5E5;
    border-radius: 67px;
    min-height: 48px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #717376;
    font-weight: 500;
    font-family: var(--SFProMedium);
    box-shadow: none;
    outline: none;
    max-width: 180px;
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #7D5CA4;
    border: none;
    border-radius: 15px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    margin: 2px 4px 2px 0;
    max-width: 120px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff;
    font-weight: bold;
    margin-right: 4px;
    cursor: pointer;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffcccc;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {

    transform: translateY(-50%);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    overflow-x: auto;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    padding: 0;
    font-size: 16px;
    color: #7D5CA4 !important;
    margin: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    flex-shrink: 0;
}

.select2-container .select2-search--inline .select2-search__field {
    height: 26px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 67px !important;
    border: 1px solid #7D5CA4 !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #E5E5E5;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    border: none;
    outline: none;
    font-size: 16px;
    font-family: var(--SFProMedium);
    color: #717376;
    background: transparent;
    /* min-width: 60px; */
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #E5E5E5;
    box-shadow: none;
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #717376;
    line-height: 28px;
    padding: 0;
    padding-right: 16px;
    margin: 0;
    font-weight: 500;
    font-family: var(--SFProMedium);
    font-size: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #717376;
    font-weight: 500;
    font-family: var(--SFProMedium);
    font-size: 16px;
}

/* Select2 Default Arrow Styling */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 11px;
    right: 11px;
    width: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

/* Select2 arrow icon using SVG for up/down states */
.select2-selection__arrow {
    width: 24px;
    height: 24px;
    background-image: url('../../va_assets/images/down-arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    border: none;
}

.select2-container--open .select2-selection__arrow {
    transform: rotate(180deg);
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    display: none;
}

/* Multiple selection arrow */
.select2-container--default .select2-selection--multiple .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}

.select2-container--default .select2-selection--multiple .select2-selection__arrow b {
    display: none;
}

.select2-container--default.select2-container--open .select2-selection--multiple .select2-selection__arrow b {
    display: none;
}

.select2-dropdown {
    border: none !important;

    border: 1px solid #E5E5E5;
    border-radius: 8px;
    max-height: 300px !important;
    margin-top: 4px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px #0000001F;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
}
.review-count-dropdown,.review-source-dropdown{
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
}

.select2-container--default .select2-results__option {
    padding: 0px !important;
    font-size: 16px;
    color: #333;
    background-color: #ffffff;
    font-family: var(--SFProMedium);
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.select2-container--default .select2-results__option:not(:has(label)) {
    padding: 8px 16px !important;
}

.select2-container--default .select2-results__option label {
    padding: 8px 16px;
    width: 100%;
}

/* Custom Select2 checkbox styling for actual input */
.select2-results__option input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #E5E5E5;
    border-radius: 3px;
    margin-right: 12px;
    background-color: #fff;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    z-index: 11;
}

.select2-results__option input[type="checkbox"]:checked {
    background-color: #7D5CA4;
    border-color: #7D5CA4;
}

.select2-results__option input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    position: absolute;
    left: 4px;
    top: 2px;
    width: 7px;
    height: 10px;
    background-image: url('../../va_assets/images/check.svg');
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f8f9fa;
    color: #333;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ffffff;
    color: #333;
    font-weight: 500;
}

.select2-results__options,
.select2-container--default .select2-results > .select2-results__options {
    max-height: min(250px, 25vh) !important;
    overflow-y: auto;
    border-radius: 8px !important;
}

.select2-container--open .select2-dropdown {
    border-radius: 8px !important;
}

/* Deselect All Header */
.select2-results__option.deselect-all {
    background-color: #f8f9fa;
    border-bottom: 1px solid #E5E5E5;
    font-weight: 600;
    color: #7D5CA4;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 12px 16px;
}

.select2-results__option.deselect-all:before {
    display: none;
}

.select2-results__option.deselect-all:hover {
    background-color: #e9ecef;
}

.select2-search--dropdown {
    position: relative;
    padding: 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    padding: 8px 12px 8px 35px;
    height: 42px;
    font-size: 16px;
    width: 100%;
    font-family: var(--SFProMedium);
    background-image: url('../../va_assets/images/search.svg');
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 18px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border: 1px solid #E5E5E5;

    outline: none;
}

/* Custom styling for the filter box selects */
.filter-box .right .select2-container {

    min-width: 180px;
    max-width: 180px;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {

    border: 1px solid #7D5CA4 !important;
}

.filter-box .right .select2-container:last-child {
    margin-right: 0;
}

/* Prevent horizontal scroll when dropdown opens */
body.select2-dropdown-open {
    overflow-x: hidden !important;
}

.select2-container--open .select2-dropdown {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 998 !important;
}


.user-dashboard {
    background-color: #F7FAFC;
    display: flex;
    min-height: 100vh;
}

.user-dashboard .left-container {
    width: 20%;
    border-right: 1px solid #D7D7D7;
    position: fixed;
    overflow: hidden;
    margin: 0;
    background: linear-gradient(180deg,
            rgba(255, 250, 255, 1) 0%,
            /* soft white-pink top */
            rgba(250, 245, 255, 0.9) 30%,
            /* subtle lavender */
            rgba(240, 250, 255, 1) 70%,
            /* very light cyan */
            rgba(225, 245, 255, 1) 100%
            /* light blue bottom */
        );
    height: 100vh;
    top: 0;
    left: 0;
    overflow-y: auto;
}

.user-dashboard .left-container .abs-bottom {
    z-index: 1;
    position: absolute;
    bottom: -50%;
    right: -50%;
    height: 100%;
    width: auto;
    z-index: 1;
    border-radius: 50%;
    backdrop-filter: blur(500px);
    opacity: 0.25;
}

.user-dashboard .left-container .abs-bottom img {
    width: 100%;
    backdrop-filter: blur(500px);

    height: auto;

}

.user-dashboard .left-container .abs-top {
    z-index: 1;
    position: absolute;
    top: -50%;
    left: -50%;
    height: 100%;

    width: auto;
    z-index: 1;
    border-radius: 50%;
    backdrop-filter: blur(500px);
    opacity: 0.25;
}

.user-dashboard .left-container .abs-top img {
    width: 100%;
    backdrop-filter: blur(500px);

    height: auto;

}

.user-dashboard .left-container .inner {
    position: relative;
    padding: 48px 24px;

    z-index: 2;
    height: 100vh;
}

.user-dashboard .left-container .inner .logo {
    display: flex;
    justify-self: center;
    margin-bottom: 60px;
}

.user-dashboard .left-container .inner .logo img {
    width: 180px;
    height: auto;
}

.user-dashboard .left-container .inner .link-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background-color: transparent;
    margin-bottom: 8px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #191221;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border-radius: 16px;
    text-decoration: none;
}

.user-dashboard .left-container .inner .link-item .icon img {
    width: 24px;
    height: auto;
}

.user-dashboard .left-container .inner .link-item.active,
.user-dashboard .left-container .inner .link-item:hover {
    background-color: #A991E61A;

    color: #7D5CA4;
}

.user-dashboard .right-container {
    flex: 1;
    padding: 32px;
    margin-left: 20%;


}

.user-dashboard .right-container .top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.user-dashboard .right-container .top-bar .left {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 32px;
}

.user-dashboard .right-container .top-bar .left .warning {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 790px;
    gap: 16px;
    padding: 20px 24px;
    background-color: #FF391E14;

    font-size: 16px;
    border-radius: 12px;

}

.user-dashboard .right-container .top-bar .left .warning.light {
    background-color: #FFAE0014;
}

.user-dashboard .right-container .top-bar .left .warning img {
    width: 22px;
    height: auto;
    flex-shrink: 0;
}

.user-dashboard .right-container .top-bar .left .warning .info {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #2A2A2A;

}

.user-dashboard .right-container .top-bar .left .warning .info span,
.user-dashboard .right-container .top-bar .left .warning .info a {
    color: #7D5CA4;
    text-decoration: underline;
}

.user-dashboard .right-container .top-bar .profile {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    position: relative;
}

.user-dashboard .right-container .top-bar .profile .profile-wrapper {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px #0000001F;
    border: 1px solid #E5E5E5;
    background-color: white;
    top: calc(100% + 18px);
    right: 0px;
    z-index: 9999;
    display: none;
}

.user-dashboard .right-container .top-bar .profile .profile-wrapper.show {
    display: block;
}

.user-dashboard .right-container .top-bar .profile .profile-wrapper .item {
    display: flex;
    text-decoration: none;
    gap: 12px;
    padding: 16px;
    border: none;
    width: 220px;
    font-size: 16px;
    color: #191221;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.user-dashboard .right-container .top-bar .profile .profile-wrapper .item img {
    width: 24px;
    height: auto;
}

.user-dashboard .right-container .top-bar .profile .profile-wrapper .item.borderb {
    border-bottom: 1px solid #E5E5E5;

}

.user-dashboard .right-container .top-bar .profile .text {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin: 0px;
    cursor: pointer;
}

.user-dashboard .right-container .top-bar .profile .image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #E5E5E5;
    cursor: pointer;
}

.user-dashboard .right-container .top-bar .profile .image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-dashboard .right-container .top-bar .title {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0px;
}

.user-dashboard .right-container .content {
    background-color: #FFFFFFCC;
    border-radius: 16px;

    backdrop-filter: blur(24px);

    box-shadow: 0px 2px 16px 0px #00000014;

    border: 1px solid #FFFFFF33;
}

.user-dashboard .right-container .content .top {
    padding: 32px;
    padding-bottom: 0px;
    min-height: 70vh;

}

.user-dashboard .right-container .content .form-item {
    padding: 24px 0px;
    border-bottom: 1px solid #E5E5E5;

}

.user-dashboard .right-container .content .form-item:last-child {
    border-bottom: none;
}

.user-dashboard .right-container .content .footer {
    height: 88px;
    display: flex;
    align-items: center;
    padding: 12px 32px;
    justify-content: space-between;
    border-top: 1px solid #E5E5E5;
}

.user-dashboard .right-container .content .form-item .label-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;
}

.user-dashboard .right-container .content .form-item .label-wrapper label {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin: 0px;
    flex-shrink: 0;
}
.user-dashboard .right-container .content .form-item .admin-work-details .label-wrapper label {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(113, 115, 118, 1);
    margin: 0px;
    flex-shrink: 0;
}
.admin-work-details-item .text{
    max-width: 412px;
}
/* Styles for Select2 single selection using custom container class */

.admin-work-details-container{
    display: flex !important;
    align-items: center !important;
    border: 1px solid #E5E5E5 !important;
}
.admin-work-details-container .select2-selection__rendered {
    display: inline-flex !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    font-size: 20px !important;
}
.select2-container--default .admin-work-details-container .select2-selection__arrow {
    right: 11px !important;
}
.admin-work-details-dropdown {
    min-width: 450px !important;
    max-width: 450px !important;
}
.select2-container--default .admin-work-details-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--blue);
    color: white;
}
.user-dashboard .right-container .content .form-item .label-wrapper .info {
    font-size: 14px;
    color: #6C757D;
    font-family: var(--SFProRegular);
    font-weight: 400;
    font-style: italic;
}

.user-dashboard .right-container .content .form-item .text {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #828282;
    line-height: 1.5;
    text-align: left;

}

.user-dashboard .form-item .upload-box {
    display: flex;
    align-items: center;
    gap: 80px;
}

.user-dashboard .form-item .upload-box .icon {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6EC1E433;
    font-size: 24px;
    font-weight: 700;
    color: #7D5CA4;
    font-family: var(--SFProSemibold);
}

.user-dashboard .form-item .upload-box .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-dashboard .form-item .upload-box .upload-input {
    display: flex;
    position: relative;
    align-items: center;
    gap: 12px;
    height: 56px;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    width: 300px;
    font-size: 20px;
    justify-content: center;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.upload-input:hover {
    border: 1px solid #E5E5E5;
    cursor: pointer;
    background-color: #dee2e663;
}

.user-dashboard .form-item .error {
    color: #F2003C;
    font-size: 16px;
    font-weight: 400;
    font-family: Nunito Sans, sans-serif;
    margin-top: 8px;

}

.login-section .boxx .input-wrapper .error {
    color: #F2003C;
    font-size: 16px;
    font-weight: 400;
    font-family: Nunito Sans, sans-serif;
    margin-top: 8px;

}

.user-dashboard .form-item .info-text {
    color: #6C757D;
    font-size: 16px;
    font-weight: 400;
    font-family: Nunito Sans, sans-serif;
    margin-top: 8px;
}

.user-dashboard .form-item .upload-box .upload-input input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 99;
    cursor: pointer;
}

.user-dashboard .form-item .upload-box .upload-input img {
    width: 24px;
    height: auto;

}

.user-dashboard .form-item .input-parent {
    height: 56px;
    position: relative;
    max-width: 460px;
    width: 100%;

}

.user-dashboard .form-item .input-parent .icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 99;

}

.user-dashboard .form-item .input-parent .input.padding-large {
    padding-right: 100px;
}

.user-dashboard .form-item .input-parent .fixed-info {
    position: absolute;
    right: 1px;
    top: 1px;
    font-size: 18px;
    color: rgba(25, 18, 33, 0.4);
    background-color: rgba(237, 237, 237, 1);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    pointer-events: none;
    z-index: 99999;
    height: calc(100% - 2px);
}

.user-dashboard .form-item .input {
    max-width: 460px;
    width: 100%;
    height: 56px;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    padding: 9px 16px;
    padding-right: 48px;
    background-color: white;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.user-dashboard .form-item .input.password::placeholder {
    font-size: 8px !important;
}

.user-dashboard .form-item .input.invalid {
    border: 1px solid #F2003C;
}

.user-dashboard .form-item .input:disabled {
    opacity: 40%;
    user-select: none;
}

.user-dashboard .form-item .input.large {
    max-width: 100%;
}

.user-dashboard .form-item .input-container {
    max-width: 460px;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 16px;

}

.user-dashboard .form-item .input-container .input.small {
    max-width: 140px;
    width: 100%;
}

.user-dashboard .form-item .input-container .input {
    max-width: 300px;
    width: 100%;
}

.user-dashboard .form-item .right-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.user-dashboard .form-item .left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-shrink: 0;
    gap: 32px;
}

.user-dashboard .form-item .left .input-flex {
    display: flex;
    align-items: center;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    height: 56px;
    width: 230px;
    overflow: hidden;

}

.user-dashboard .form-item .left .input-flex.invalid {
    border: 1px solid #F2003C;
}

.user-dashboard .form-item .left .input-flex.lg {
    max-width: 460px;
    width: 100%;
}

.user-dashboard .form-item .left .input-flex .input {
    border: none;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 9px 16px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    flex: 1 1 auto;

}

.user-dashboard .form-item .left .input-flex .icon {
    border-right: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
    height: 56px;
    flex-shrink: 0;
    width: 56px;
    justify-content: center;
}

.user-dashboard .form-item .left .input-flex .icon img {
    height: 24px;
    width: 24px;
}

.user-dashboard .form-item .left .custom-checkbox {
    flex-shrink: 0;
}

.user-dashboard .form-item .left .custom-checkbox .label {

    color: #717376;
    margin-bottom: 0px;
}

.user-dashboard .form-item .remove-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    text-decoration: none;
    color: #F2003CF7;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.user-dashboard .form-item .remove-btn img {
    width: 20px;
    height: auto;
}

.user-dashboard .form-item .input {
    position: relative;
}

.user-dashboard .form-item .select2-container--default .select2-selection--single {
    max-width: 460px;
    height: 56px;
    border-radius: 16px;
}

.select2-container--default .select2-selection--multiple::after {
    content: "";
    background-image: url('../../va_assets/images/down-arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    display: none;
    transform: translateY(-50%);
}

.user-dashboard .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.user-dashboard .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 16px !important;

}

.user-dashboard .form-item select {
    border-radius: 16px;
}

.user-dashboard .form-item .select2-container {
    max-width: 460px;
}

.user-dashboard .form-item .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 16px;
}

.user-dashboard .form-item .select2-dropdown {
    max-width: 460px !important;
    min-width: 320px !important;
    width: 300px !important;
}

.user-dashboard .form-item .small-item .select2-dropdown {
    max-width: 160 !important;
    min-width: 160px !important;
    width: 160px !important;
}

.user-dashboard .form-item .right-section .box-container {
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #E7E7E9;
    position: relative;
}

.user-dashboard .form-item .right-section .label {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #717376;
    display: block;
    margin: 0px;
    margin-bottom: 12px;
}

.user-dashboard .form-item .right-section .label.small {
    font-size: 18px !important;
}

.user-dashboard .form-item .right-section .remove-abs {
    position: absolute;
    top: 20px;
    right: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    color: #F2003CF7;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.user-dashboard .form-item textarea {

    width: 100%;
    height: 117px;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    padding: 9px 16px;
    background-color: white;
    font-size: 20px;
    margin-bottom: 0px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.user-dashboard .form-item .btn-white {
    height: 56px;
    max-height: 56px;
}

.custom-tages-container .tagify {
    min-height: 56px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    background-color: white;
    border: 1px solid #E5E5E5;
    padding: 8px 16px;
    flex-wrap: wrap;
    align-items: center;
}

.custom-tages-container .tagify .tagify__tag {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #7D5CA40D;
    border: 1px solid #7D5CA4;
    border-radius: 67px;
    padding: 8px 20px;
    font-size: 14px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: var(--text-color);
}

.custom-tages-container .tagify .tagify__tag>div::before {
    content: none;
}

.tagify__tag__removeBtn {
    font-size: 20px;
    color: #838383 !important;
    padding: 10px;
}

.tagify__tag__removeBtn:hover {
    color: #fff !important;
    background: #f97474;
}

.tagify__tag__removeBtn::after {
    width: 13px !important;
}

.user-dashboard .form-item .left .info {
    font-size: 16px;
    color: #6C757D;
    font-family: var(--SFProRegular);
    font-weight: 400;
    font-style: italic;
}

.toggle-buttons {
    display: flex;
    align-items: center;
    gap: 0px;
    width: 300px;
    height: 56px;
    border-radius: 67px;
    border: 1px solid #E5E5E5;
}

.warning-box {
    background-color: #FF391E1A;

    border-radius: 16px;
    padding: 21px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 12px;
}

.warning-box img {
    width: 32px;
    height: auto;
    flex-shrink: 0;
}

.warning-box .text {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #2A2A2A !important;
}

.warning-box .text strong {
    font-weight: 700;
    font-family: var(--SFProBold);
}

.toggle-buttons .button {
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #191221;
    background-color: transparent;
    border: none;
    border-radius: 67px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.toggle-buttons .button.active {
    background-color: #7D5CA4;
    color: #fff;
}

.toggle-buttons .button.active:hover {
    color: white;
    background-color: #533B6F;
}

.toggle-buttons .button:hover {
    color: #61477F;
}

.user-dashboard .right-container .content .footer .delete {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    text-decoration: none;
    color: #F2003C;
}

.user-dashboard .right-container .content .footer .delete:hover {
    color: #C70000;
}

.user-dashboard .right-container .content .footer .delete img {
    width: 24px;
    height: auto;
}

.user-dashboard .right-container .content .footer .right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-dashboard .right-container .content .footer .preview {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    text-decoration: none;
    color: #7D5CA4;
}

.user-dashboard .right-container .content .footer .preview:hover {
    color: #533B6F;
}

.user-dashboard .right-container .content .footer .preview img {
    width: 24px;
    height: auto;
}

.ql-toolbar.ql-snow {
    border-top: 1px solid #E5E5E5;
    border-radius: 16px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 0px !important;

}

.ql-toolbar.ql-snow .ql-formats {
    display: flex;
    align-items: center;
    padding: 0px;
}

.user-dashboard .ql-toolbar.ql-snow .ql-formats button {
    height: 52px;
    width: 52px;
    display: flex;
    justify-content: center;
    align-items: center;


    border-right: 1px solid #E5E5E5;
}

.user-dashboard .ql-toolbar.ql-snow .ql-formats button:first-child {
    border-top-left-radius: 9px;
}

.user-dashboard .ql-toolbar.ql-snow .ql-formats button svg {
    stroke: #444 !important;
}

.user-dashboard .ql-toolbar.ql-snow .ql-formats button:hover,
.user-dashboard .ql-toolbar.ql-snow .ql-formats button:focus {
    color: #444 !important;

}

.user-dashboard .ql-toolbar.ql-snow .ql-formats button:hover svg *,
.user-dashboard .ql-toolbar.ql-snow .ql-formats button:focus svg * {
    stroke: #444 !important;

}

.user-dashboard .ql-toolbar.ql-snow .ql-formats button:hover svg path,
.user-dashboard .ql-toolbar.ql-snow .ql-formats button:focus svg path {
    stroke: #444 !important;

}

.user-dashboard .ql-toolbar.ql-snow .ql-formats button svg {
    height: 24px;
    width: auto;
    stroke: #444 !important;
    box-shadow: none !important;
}

.user-dashboard .ql-toolbar.ql-snow .ql-formats button:hover {
    background-color: #00000033;
}

.ql-container.ql-snow {
    height: 251px;
    border-radius: 16px;
    border-top: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border: 1px solid #E5E5E5;
    background-color: white;
}

.detail-box {
    padding: 24px;
    background-color: white;
    border: 1px solid rgba(229, 229, 229, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 96px;
}

.detail-box .data .title {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProSemibold);
    color: var(--text-color);
    margin: 0px;
    margin-bottom: 8px;
}

.detail-box .data .text {
    font-size: 24px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(109, 109, 109, 1);
    margin-bottom: 0px;
    line-height: 1.5;
}

.detail-box .btn-blue {
    flex-shrink: 0;
}

.no-filtered-data .image {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.no-filtered-data .image img {
    width: 236px;
    height: auto;
    object-fit: cover;
}

.no-filtered-data .title-small {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0px;
    margin-bottom: 8px;
    text-align: center;
}

.no-filtered-data .text {
    font-size: 16px !important;
    font-weight: 500;
    font-family: Nunito, sans-serif;
    color: #A1A1A1 !important;
    margin: 0px;
    margin-bottom: 21px !important;
    text-align: center;
}

.info_section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background-color: #4294FF1A;
    border-radius: 12px;
}

.info_section img {
    width: 20px;
    height: auto;
}

.info_section .info {
    font-size: 14px;
    font-family: var(--SFProMedium);
    color: #2A2A2A;
    line-height: 1.4;
}

.ql-editor {
    word-break: break-word !important;
}

.clutch-review {
    padding: 24px;
    border-radius: 12px;
    background-color: #4294FF1A;
    margin-bottom: 24px;
}

.clutch-review .content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.clutch-review .content-wrapper .icon {
    flex-shrink: 0;
}

.clutch-review .content-wrapper .icon img {
    width: 24px;
    height: 24px;
}

.clutch-review .content-wrapper .content .text-top {
    font-size: 14px;
    color: var(--text-color);
    margin-top: 4px;
    font-weight: 500;
    margin-bottom: 12px;
}

.clutch-review .content-wrapper .content .rating-text {
    font-size: 16px;
    color: #848484;
    font-weight: 500;
    margin-bottom: 6px;
}

.clutch-review .content-wrapper .content .review-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #191221;
    font-weight: 500;
    font-family: var(--SFProMedium);
    margin-bottom: 8px;
}

.clutch-review .content-wrapper .content .review-wrapper .stars {
    display: flex;
    align-items: center;
    gap: 3px;
}

.clutch-review .content-wrapper .content .review-wrapper .stars img {
    width: 18px;
    height: auto;
}

.clutch-review .content-wrapper .content .text-lg {
    font-size: 16px;
    color: var(--text-color);

    font-weight: 500;
    margin-bottom: 0px;
}

#success-modal-claim-dynamic .modal-dialog .modal-content .content .body .profile-success-title{
    font-weight: 700 !important;
}

@media(max-width: 1680px) {

    .modal-content.small-modal .content .header .close,
    .modal-content.custom-modal .top .icon img {
        width: 32px;
        height: 32px;
    }
    .user-dashboard .right-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .user-dashboard .right-container .top-bar .left .warning {
        padding: 16px 16px;
        gap: 12px;
    }

    .user-dashboard .right-container .top-bar .left .warning .info {
        font-size: 14px;
    }

    .section-top-title .back {
        font-size: 16px;
    }

    .service-card .header .left .top-sec {
        flex-wrap: wrap;
    }

    .service-card .header .left .bottom-sec .date {
        font-size: 14px;
    }

    /* .user-dashboard .right-container .content .form-item .label-wrapper label {
        font-size: 16px;
    } */

    .user-dashboard .right-container .content .form-item .label-wrapper .info {
        font-size: 13px;
    }

    .detail-box .data .title {
        font-size: 24px;
    }

    .detail-box .data .text {
        font-size: 16px;
    }

    .user-dashboard .right-container .content .footer .delete,
    .user-dashboard .right-container .content .footer .preview {
        font-size: 16px;
    }

    .user-dashboard .form-item .btn-white {
        height: 56px;
        max-height: 56px;
    }

    .user-dashboard .form-item .left .input-flex .input {
        font-size: 16px;
    }

    .user-dashboard .form-item .right-section .remove-abs {
        font-size: 16px;
    }

    .user-dashboard .form-item .right-section .label {
        font-size: 16px !important;
    }

    .user-dashboard .form-item .right-section .label.small {
        font-size: 14px !important;
    }

    .user-dashboard .form-item .input,
    .user-dashboard .form-item .input-conatiner,
    .user-dashboard .form-item .input-parent {
        max-width: 100%;
    }

    .remove-btn {
        font-size: 16px;
    }

    .user-dashboard .form-item .left .custom-checkbox .label {
        font-size: 16px;

    }

    .user-dashboard .form-item .upload-box .upload-input {
        font-size: 16px;
        width: 235px;

    }

    .user-dashboard .form-item .input {
        font-size: 16px;
    }

    .user-dashboard .right-container .top-bar .title {
        font-size: 36px;
    }

    .user-dashboard .right-container .top-bar .profile .text {
        font-size: 16px;
    }

    .login-section .remember-me .left label,
    .login-section .remember-me .forgot {
        font-size: 16px;
    }

    .modal-content.small-modal .content .input-wrapper .company-name-input .claim-button {
        font-size: 16px;
    }
    .modal-content.small-modal{
        max-width: 600px !important;
    }
    .custom-checkbox .label {
        font-size: 16px !important;
    }

    .modal-content.small-modal .content .profile .text {
        font-size: 20px;
    }

    .modal-content.small-modal .content .profile {
        gap: 12px;
    }

    .modal-content.small-modal .content .input-wrapper label,
    .modal-content.small-modal .content .input-wrapper .input input, .modal-content.small-modal .content .input-wrapper .company-name-input input {
        font-size: 16px;
    }

    .modal-content.small-modal .content .profile .image {
        width: 50px;
        height: 50px;
    }

    .modal-content.small-modal .content .header .title {
        font-size: 24px;
    }

    .modal-content.small-modal .content .companies .company-wrapper .label .header .data .top .name {
        font-size: 18px;
    }

    .modal-content.small-modal .content .companies .company-wrapper .label .header .data .top .tags .verified,
    .modal-content.small-modal .content .companies .company-wrapper .label .header .data .top .tags .tag {
        font-size: 14px;
        padding: 8px 20px;
    }

    .modal-content.small-modal .content .companies .company-wrapper .services .service {
        font-size: 14px;
        padding: 6px 16px;
    }

    .modal-content.small-modal .content .text {
        font-size: 16px;
        margin-bottom: 24px !important;
    }
    .modal-content.small-modal.submit-company-modal .content .text {
        font-size: 16px;
        margin-bottom: 0px !important;
    }

    .modal-content.small-modal .content {
        padding: 32px;
        /* padding-bottom: 10px; */
    }
    .confirmation-modal-header{
        position: absolute;
        top: 10px;
        right: 30px;
    }
    .related-companies .service-card {
        padding: 24px;
    }

    .company-reviews .customer-review .header .right {
        font-size: 16px;
    }

    .company-reviews .customer-review .header .right .reviews img {
        width: 20px;
        object-fit: contain;
        height: 20px;
    }

    .right-modal .filter-body .search-box input {
        font-size: 16px;
    }

    .right-modal .filter-body .search-box .icon {
        width: 16px;
        height: auto;
    }

    .company-reviews .over-all-reviews .item .progress {
        min-width: 300px;
    }

    .company-reviews .title {
        font-size: 20px;
    }

    .custom-navigation .btn-white {
        height: 48px;
    }

    .company-card .more {
        font-size: 16px;
    }

    .company-card .custom-service,
    .company-card .other-service {
        font-size: 16px;
    }

    .company-card .custom-service img,
    .company-card .other-service img {
        width: 42px;
        height: 42px;
    }

    .company-card .flex_items .item {
        font-size: 16px;
    }

    .company-card .header .right .share {
        font-size: 16px;
    }

    .company-card .header .data .name {
        font-size: 32px;
    }

    .custom-section .selected-filters .item {
        padding: 8px 16px;
        font-size: 14px;
        height: 38px;
    }

    .right-modal .filter-body .verified-filter .left img,
    #filterAccordion .accordion-button .left img {
        width: 42px;
        height: 42px;
    }

    .right-modal .filter-body .verified-filter .left {
        font-size: 18px;
    }

    #filterAccordion .accordion-button .left {
        font-size: 18px;
    }

    .custom-switch {
        height: 48px;
        width: 96px;
    }

    .custom-switch .icon {
        width: 44px;
        height: 44px;
    }

    .custom-switch .icon svg {
        width: 20px !important;
        height: auto !important;
    }

    .custom-section .top-filtes .right select {
        height: 48px;
        padding: 8px 16px;
        font-size: 16px;
        max-width: 200px;
    }

    .custom-section .top-filtes .text {
        font-size: 20px;
    }

    .custom-navigation .right .pagination {
        height: 48px;
    }

    .custom-navigation .right .pagination .page {
        height: 46px;
        width: 46px;
    }

    .custom-navigation .left,
    .custom-navigation .right {
        gap: 12px;
    }

    .custom-navigation .input,
    .custom-navigation .select-page {
        height: 48px;
        padding: 9px 16px;
    }

    .service-card .service-reviews .item {
        flex-shrink: 0;
        min-width: 110px;
    }

    .service-card .service-reviews .item .label {
        font-size: 16px;
    }

    .service-card .service-reviews .item .label .large-img {
        width: 56px;
    }

    .service-card .service-reviews .item .label .small-img {
        height: 10px;
    }

    .service-card .services .service,
    .service-card .services .more {
        font-size: 16px;
    }

    .service-card .title {
        font-size: 20px !important;
    }

    /* .service-card .header .profile .image img {
        width: 56px;
        height: 56px;
     } */

    .service-card .header .profile .data .name,
    .service-card .header .left .top-sec .name {
        font-size: 20px;
    }

    .filter-wrapper .right .filter-btn {
        height: 48px;
        font-size: 16px;
    }

    .filter-wrapper .right select {
        height: 48px;
        font-size: 16px;
    }

    .filter-wrapper {
        margin-bottom: 32px;
    }

    .filter-wrapper .search-wrapper input {
        font-size: 16px;
    }

    .filter-wrapper .search-wrapper {
        height: 48px;
    }

    .custom-bread-crumbs a {
        font-size: 16px;
    }

    .custom-bread-crumbs {
        gap: 16px;
    }

    .custom-bread-crumbs .home-icon {
        width: 24px;
        height: 24px;
    }

    .modal-content.custom-modal .body-section {
        max-height: 60vh;

    }

    .modal-content.custom-modal .search-wrapper {
        height: 48px;
    }

    .footer .title {
        font-size: 18px;
    }

    .footer .logo {
        height: auto;
        width: 150px;
        margin-bottom: 32px;
    }

    .clients-section .box .data .title {
        font-size: 36px;
    }

    .clients-section .box .data .text {
        font-size: 18px;
    }

    .popular-section .location-box .label {
        font-size: 14px;
    }

    .popular-section .title,
    .custom-section .title {
        font-size: 40px;
    }

    .popular-section .location-box {
        padding: 24px 20px;
    }

    .popular-section .text,
    .custom-section .text,
    .dynamic-text {
        font-size: 18px;
    }

    .flex-item .icon {
        width: 48px;
        height: 48px;
    }

    .flex-item .icon svg {
        width: 20px !important;
        height: auto !important;
    }

    .flex-item {
        font-size: 16px;
    }

    .popular-section .view-all,
    .popular-section .view-locations {
        font-size: 16px;
        padding: 12px;
        width: 200px;
    }

    .header-section .content .filter-box .search-box .right select {
        font-size: 16px;
        padding: 8px 16px;
    }

    .header-section .content .filter-box .searches .search-item {
        font-size: 14px;
    }

    .login-section .logo {
        width: 100px;
        margin-bottom: 16px;
    }

    .login-section .title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .login-section .boxx {
        padding: 20px;
        width: 94%;
        margin: auto;
    }

    .login-section .boxx .input-wrapper label {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .login-section .boxx .input-wrapper {
        margin-bottom: 20px;
    }

    .login-section .boxx .input-wrapper .input {
        height: 44px;
        font-size: 14px;

    }


    .header-section .content .filter-box .search-box .left input {
        font-size: 16px;
    }

    .container {
        max-width: 1340px !important;
    }
    .landing-header-container {
        max-width: 1670px !important;
        padding: 14px clamp(20px, 2vw, 136px);
    }

    .header-section .content {
        max-width: 1340px;
    }

    .header-section .content .title {
        font-size: 60px;
    }

    .header-section .content .text {
        font-size: 20px;
        max-width: 600px;

    }

    .custom-navbar .inner .logo {
        width: 120px;
    }

    .btn-blue,
    .btn-white,
    .btn-green {
        font-size: 16px;
        padding: 12px 20px;
    }

    .modal-content.custom-modal .top .title {
        font-size: 24px;
    }

    .custom-bread-crumbs-container {
        margin: 30px 0px;
    }
}

.claim-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #5A92A2;
    text-decoration: underline;
}

.claim-btn:hover {
    color: #47727E;
}

.claim-btn img {
    width: 18px;
}

.report-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #474747;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.report-btn:hover {
    color: #444444;
}

.report-btn img {
    width: 18px;
    height: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .login-section .boxx .title_small {
        font-size: 18px;
    }

    .login-section .logo.mb-90 {
        margin-bottom: 32px;
    }

    .login-section .boxx .text_small {
        font-size: 14px;
        margin-bottom: 30px;
    }

    .login-section .boxx .image-small {
        width: 130px;
        margin-bottom: 32px;
    }

    .popular-section .view-locations {
        font-size: 14px;
        padding: 8px 16px;
    }

    .user-dashboard .form-item .left .input-flex {
        height: 44px;
    }

    .user-dashboard .form-item .left .input-flex .icon {
        height: 44px;
        width: 44px;
    }

    .user-dashboard .form-item .left .input-flex .icon img {
        width: 18px;
        height: 18px;
    }

    .user-dashboard .right-container .top-bar .title {
        font-size: 20px;
    }

    .header-section {
        overflow-x: hidden;
    }

    .select2-container--default .select2-selection--multiple {
        min-height: 46px;
    }

    .user-dashboard .right-container .content .form-item .text {
        margin-bottom: 12px !important;
    }

    .user-dashboard .form-item .input.large {
        margin-top: 12px;
    }

    .toggle-buttons .button {
        font-size: 14px;
    }

    .toggle-buttons {
        height: 44px;
    }

    /* .btn-blue,
    .btn-white {
        font-size: 13px;
        padding: 8px 12px;
    } */

    .user-dashboard .form-item .input,
    .user-dashboard .form-item .input-parent {
        height: 44px;
    }

    .ql-container.ql-snow {
        height: 250px;
    }

    .user-dashboard .form-item .select2-container--default .select2-selection--single {
        height: 46px;
    }

    .user-dashboard .form-item .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 4px;
    }

    .footer {
        padding: 40px 0px;
    }

    .user-dashboard .form-item .right-item {
        flex-wrap: wrap;
        gap: 16px;
    }

    .user-dashboard .right-container .content .footer {
        height: auto;
        flex-wrap: wrap;
        gap: 12px;
    }

    .footer .title {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .footer .text {
        font-size: 14px;
        margin-bottom: 8px !important;
    }

    .footer .text.mb-57 {
        margin-bottom: 20px;
    }

    .footer .copy {
        padding: 16px 0px;
        flex-wrap: wrap;
        gap: 12px;
        /* text-align: center; */
        align-items: center;
        justify-content: center;
        margin-top: 28px !important;
    }
    .footer-va .row {
        justify-content: center !important;
    }
    .footer-va .row .col-12 {
        max-width: 100% !important;
        width: 100%;
    }
    .footer-va .row .col-12:not(:first-child) {
        width: 40%;
    }
    .footer-va .row .col-12:first-child {
        text-align: center;
        margin-bottom: 24px;
    }
    .footer-va .logo {
        width: 138px;
        margin-bottom: 24px;
        margin: 0 auto;
    }
    .user-dashboard .right-container .content .footer .right {
        justify-content: space-between;
        width: 100%;
    }

    .user-dashboard .form-item .select2-container {
        max-width: 200px;
    }

    .custom-checkbox .label,
    .user-dashboard .form-item .remove-btn {
        font-size: 14px !important;
    }

    .select2-container--default .select2-selection--single {
        height: 42px;
        font-size: 16px;
        min-width: 140px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 24px;
        font-size: 16px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px;
    }

    .filter-box .right .select2-container {
        min-width: 200px;
        max-width: 360px;
        width: 100% !important;
        margin-right: 8px;
    }

    .select2-container--default .select2-selection--multiple {
        max-width: 100%;
    }

    /* Mobile dropdown adjustments */
    .select2-dropdown {
        width: 250px !important;
        min-width: 200px !important;

    }

    .filter-wrapper .right {
        flex-wrap: wrap;
        gap: 12px;
    }

    .custom-bread-crumbs-container {
        flex-wrap: wrap;
    }

    .filter-wrapper .search-wrapper {
        margin-bottom: 12px;
    }

    .filter-wrapper .right .filter-btn {
        font-size: 14px;
        height: 44px;
    }

    .filter-wrapper .right .filter-btn img {
        width: 18px;
    }

    .custom-section .top-filtes .text {
        font-size: 16px;
    }

    .service-card .header {
        flex-wrap: wrap;
    }

    .custom-section .top-filtes,
    .service-card .header {
        gap: 12px;
    }

    .service-card .header .left {
        flex-wrap: wrap;
        gap: 12px;
    }

    .custom-section .selected-filters {
        gap: 12px;
    }

    .custom-section .selected-filters {
        margin-bottom: 24px;
    }

    .custom-section .top-filtes {
        flex-wrap: wrap;
    }

    .custom-switch {
        height: 44px;
    }

    .custom-switch .icon {
        height: 42px;
        width: 42px;
    }

    .custom-section .top-filtes .right select {
        max-width: 150px;
        height: 44px;
    }

    .detail-box {
        flex-wrap: wrap;
        gap: 16px;
    }

    .custom-bread-crumbs {
        gap: 8px;
        margin-bottom: 12px;
    }

    .custom-bread-crumbs a {
        font-size: 12px;
    }

    .custom-bread-crumbs-container .btn-white,
    .custom-bread-crumbs-container .btn-blue {
        font-size: 12px;
    }

    .popular-section .location-box {
        margin-bottom: 24px;
    }

    .detail-box .data .title {
        font-size: 18px;
    }

    .detail-box .data .text {
        font-size: 14px;
    }

    .company-card .header .left .image {
        width: 60px;
        height: 60px;
    }

    .company-card .header .data .date-wrapper {
        font-size: 13px;
    }

    .company-card .header {
        flex-wrap: wrap;
    }

    .company-card .custom-service,
    .company-card .other-service {
        font-size: 14px;
    }

    .company-card .custom-service img,
    .company-card .other-service img {
        width: 36px;
        height: 36px;
    }

    .company-card .header .right {
        margin-top: 12px;
    }

    .company-card .header .data .reviews-wrapper .reviews img {
        width: 16px;
        object-fit: contain;
        height: 16px;
    }

    .company-card .header .data .verified {
        font-size: 14px;
    }

    .company-card .header .data .name {
        font-size: 20px;
    }

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

    .company-card .text {
        font-size: 14px;
    }

    .company-card .flex_items .item {
        font-size: 14px;
    }

    .user-dashboard .left-container {
        background-color: transparent;
        border: none;
    }

    .modal-content.custom-modal {
        padding: 24px;
    }

    .modal-content.custom-modal .body-section .flex-items .flex-item {
        flex: 1 1 100%;
    }

    .modal-content.custom-modal .top .title {
        font-size: 24px;
    }

    .user-dashboard .right-container {
        padding: 20px;
        width: 100%;
    }

    .user-dashboard .right-container .content .top {
        padding: 16px;
    }

    .user-dashboard .form-item .upload-box .icon {
        height: 50px;
        width: 50px;
    }

    .user-dashboard .form-item .upload-box .upload-input {
        height: 44px;
        max-width: 300px;
    }

    .user-dashboard .form-item .input,
    .user-dashboard .form-item .input-conatiner {
        max-width: 320px;
    }

    .user-dashboard .form-item .input-container {
        flex-wrap: wrap;
    }

    .tagify__input {
        margin: 0px;
    }

    .custom-tages-container .tagify {
        min-width: 44px;
        padding: 6px 16px;
    }

    .custom-tages-container .tagify .tagify__tag {
        padding: 4px 10px;
        font-size: 12px;
        gap: 6px;
    }

    .user-dashboard .form-item .left {
        flex-wrap: wrap;
        flex-shrink: initial;
        gap: 12px;
    }

    .user-dashboard .form-item .upload-box {
        gap: 16px;
    }

    .modal-content.custom-modal .top .icon {
        width: 40px;
        height: 40px;
    }

    .popular-section .locations-container {
        margin: 32px 0px;
    }

    .clients-section .box .data .title {
        font-size: 20px;
    }

    .clients-section .box .data {
        padding: 30px;
    }

    .container {
        padding: 0px 15px !important;
    }

    .header-section .content .title {
        font-size: 28px;
        line-height: 1.5;
    }

    .header-section .content .filter-box .search-box {
        border: none;
        padding: 0px;
    }

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

    .header-section .content .filter-box .search-box .left input,
    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        font-size: 14px;
    }

    .header-section .content .filter-box .search-box .left {
        border: 1px solid #E5E5E5;
        border-radius: 67px;
        margin-bottom: 12px;
        height: 46px;
    }

    .header-section {
        padding: 40px 24px;
    }

    .header-section .content .filter-box .search-box .right,
    .header-section .content .filter-box .search-box .left {
        justify-content: center;
        flex: 1 1 100%;
    }

    .header-section .content .filter-box .search-box .right select {
        font-size: 12px;
        min-width: 90px;
        max-width: 150px;


        height: 36px;
        padding: 8px;
    }

    .popular-section .title,
    .custom-section .title {
        font-size: 24px;
    }

    .popular-section .col-md-6:first-child {
        margin-bottom: 24px;
    }

    .popular-section .location-box img {
        height: 80px;
    }

    .header-section .content .filter-box .search-box .right {
        flex-wrap: wrap;
    }

    .header-section .content .filter-box .search-box .right .search-btn {
        width: 100%;
        height: 46px;
        border-radius: 67px;
    }

    .header-section .content .filter-box {
        padding: 24px;
        margin-top: 40px;
    }

    .header-section .content .filter-box .search-box .right .search-btn svg {
        width: 18px !important;
        height: auto;
    }

    .header-section .content .filter-box .searches .search-item {
        font-size: 14px;
        padding: 8px 16px;
    }

    .custom-navbar .inner .logo {
        width: 60px;
    }

    .user-dashboard .left-container {
        width: 100%;
    }

    .user-dashboard {
        flex-wrap: wrap;
    }

    .user-dashboard .left-container .inner {
        padding: 20px;
        height: auto;
    }

    .user-dashboard .left-container .inner .logo img {
        width: 100px;

    }

    .user-dashboard .left-container .inner .logo {
        margin-bottom: 16px;
    }

    .user-dashboard .left-container .inner .link-item {
        font-size: 14px;
        padding: 8px 20px;
    }

    .user-dashboard .left-container .inner .link-item .icon img {
        width: 18px;
    }

    .custom-navbar .inner .right .btn-blue,
    .custom-navbar .inner .right .btn-white {
        font-size: 12px;
        padding: 8px 10px;
        height: 36px;
    }

    .custom-navbar .inner .right .user {
        height: 36px;
        width: 36px;
    }

    .custom-navbar .inner .right {
        gap: 10px;
    }

    .header-section .content .filter-box .search-box {
        flex-wrap: wrap;
        margin-bottom: 0px;
    }

    .header-section .content .filter-box .searches {
        flex-wrap: wrap !important;
    }

    .flex-item .icon {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .clients-section {
        padding: 48px 0px;
    }

    .clients-section .box .data .text {
        font-size: 15px;
    }

    .clients-section .box .data {
        padding: 24px 8px;
    }

    .popular-section .location-box {
        padding: 16px;
    }

    .popular-section .location-box .label {
        gap: 6px;
        font-size: 13px;
    }

    .flex-item {
        font-size: 14px;
    }

    .popular-section .text,
    .custom-section .text,
    .dynamic-text {
        font-size: 15px;
    }

    .popular-section .view-all,
    .popular-section .view-locations {
        padding: 8px 20px;
    }

    .company-reviews .customer-review .header {
        flex-wrap: wrap;
    }

    .company-reviews .customer-review .header .left {
        flex-wrap: wrap;
    }

    .company-reviews .customer-review .header .left .image {
        height: 40px;
        width: 40px;
    }

    .company-reviews .customer-review .body .title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .service-card .header .tag {
        margin-bottom: 12px;
    }

    .service-card .header .profile .data .reviews-wrapper .reviews img,
    .service-card .header .left .bottom-sec .reviews-wrapper .reviews img {
        width: 16px;
        object-fit: contain;
        height: 16px;
    }

    .company-reviews .customer-review .body .text {
        font-size: 14px;
    }

    .company-reviews .customer-review .body .actions .action {
        font-size: 14px;
    }

    .company-reviews .customer-review .header .right img {
        width: 60px;
    }

    .custom-navigation {
        flex-wrap: wrap;
        gap: 12px;
    }

    .company-reviews .review-filters {
        flex-wrap: wrap;
        gap: 12px;
    }

    .company-reviews .reviews-container .item .label {
        font-size: 16px;
    }

    /* .company-reviews .reviews-container .line {
        display: none;
    } */

    .company-reviews .review-filters .right select {
        max-width: 200px;
        height: 44px;
    }

    .service-cards .item .label {
        font-size: 18px;
    }

    .service-cards .item .text {
        font-size: 16px;
    }

    /* .service-cards .item {
        height: 250px;
    } */

    .service-cards .item .price .value {
        font-size: 30px;
    }

    .service-cards-wrapper {
        padding: 0px;
    }

    .service-card .service-reviews .slider-wrapper-container::before,
    .service-cards-wrapper::after {
        width: 0px;
    }

    .company-card {
        padding: 24px 14px;
    }

    /* .service-card .header .profile {
        flex-wrap: wrap;
        gap: 12px;
    } */

    .related-companies .service-card {
        padding: 16px;
    }

    .service-card .header .verified img {
        width: 16px !important;
    }

    .service-card .header .profile .data .name,
    .service-card .header .left .top-sec .name {
        font-size: 18px;
    }

    .company-reviews .customer-review .header .left .data .name,
    .company-reviews .customer-review .header .left .data .date {
        font-size: 14px;
    }

    .related-companies .service-card .header .right .btn-white,
    .related-companies .service-card .header .right .btn-blue {
        /* width: auto; */
        font-size: 13px;
        padding: 8px 12px;
    }

    .custom-navbar {
        padding: 12px 0px;
    }

    .service-card .header .verified,
    .service-card .header .tag {
        font-size: 14px;
        padding: 8px 12px;
        justify-content: center;
        width: 100%;
    }

    .login-section .logo {
        width: 80px;
        margin-bottom: 12px;
    }

    .login-section .title {
        font-size: 20px;
    }

    .login-section .boxx {
        padding: 20px;
        width: 94%;
        margin: auto;
        border-radius: 16px;
    }

    .login-section .boxx .input-wrapper label {
        font-size: 14px;
    }

    .login-section .boxx .input-wrapper {
        margin-bottom: 16px;
    }

    .login-section .boxx .input-wrapper .input {
        height: 44px;
        font-size: 14px;

    }

    .login-section .text {
        font-size: 14px;
    }

    .login-section .boxx .input-wrapper .input input {
        padding: 8px 12px;
    }

    .related-companies .service-card .d-flex.gap-2.align-items-center.mb4 {
        flex-wrap: wrap;
    }

    .service-cards .item .price .value sub {
        font-size: 14px;
    }

    .company-reviews .reviews-container {
        flex-wrap: wrap;
        gap: 12px;
    }

    .company-reviews .over-all-reviews .item .reviews img {
        width: 14px;
        object-fit: contain;
    }

    .company-reviews .over-all-reviews .item .progress {
        min-width: 120px;
    }

    .company-reviews .reviews-container .item .text {
        font-size: 14px;
    }

    .company-reviews .reviews-container .item .text-lg {
        font-size: 26px;
        margin-bottom: 8px;
    }

    .company-reviews .item .review-container {
        font-size: 26px;
    }

    .company-reviews .customer-review .header .right .reviews img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .company-reviews .reviews img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .company-reviews .review-filters .left {
        flex-wrap: wrap;
    }

    .company-reviews .review-filters .left .button {
        font-size: 14px;
        padding: 8px 16px;
    }

    .company-reviews .review-filters .left .button img {
        height: auto;
        width: 38px;
    }

    .custom-navigation .left {
        flex-wrap: wrap;
    }

    .custom-navigation .left .text {
        font-size: 14px;
    }

    .custom-navigation .input,
    .custom-navigation .select-page {
        height: 40px;
        font-size: 14px;
    }

    .custom-navigation .btn-white {
        height: 36px;
        font-size: 12px;
    }

    .custom-navigation .right .pagination {
        height: 38px;
    }

    .custom-navigation .right .pagination .page {
        height: 36px;
        width: 36px;
        font-size: 12px;
    }

    .custom-navigation .right {
        flex-wrap: wrap;
    }

    .back-box {
        font-size: 15px;
    }

    .related-companies .title-header .title {
        font-size: 20px;
    }

    .related-companies {
        padding: 24px 16px;
    }

    .related-companies .title-header .buttons .button {
        height: 40px;
        width: 40px;
    }

    .footer .logo {
        width: 100px;
        margin-bottom: 20px;
    }

    .service-card .services .service {
        font-size: 14px;
    }

    .service-card .footer {
        padding: 12px 0px;
        padding-bottom: 0px;
        font-size: 14px;
    }
}

@media (max-width:440px) {

    .custom-navbar .inner .right .btn-blue,
    .custom-navbar .inner .right .btn-white {
        font-size: 10px;
        padding: 8px 8px;
        height: 32px;
    }

    .custom-navbar .inner .logo {
        width: 56px;
    }

    .custom-navbar .inner .right {
        gap: 8px;
    }

    .custom-navbar .inner .right .user {
        height: 30px;
        width: 30px;
    }

    .custom-navbar .inner .right .user img {
        width: 16px;
    }
}

/* Expand/Collapse Toggle Styles */
.expand-toggle {
    display: inline-flex;
    user-select: none;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    color: var(--blue);
    font-weight: 500;
    font-family: var(--SFProMedium);
    transition: color 0.3s ease;
}

.expand-toggle:hover {
    color: var(--blue-light);
}

.expand-toggle img {
    width: 16px !important;
    height: 16px;
    transition: transform 0.3s ease;
}

.expand-toggle img.rotated {
    transform: rotate(180deg);
}

#password::placeholder {
    position: relative;
    font-size: medium;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.d-none {
    display: none !important;
}

.related-company-logo {
    background: #F5F3FC;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    width: 72px;
    height: 72px;
    opacity: 1;
    border-radius: 100px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
    gap: 8px;

}

.company-logo {
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 30px;
    text-transform: uppercase;
    /* width: 176px;
    height: 176px; */
    top: 32px;
    left: 32px;
    opacity: 1;
    border-radius: 236.11px;
    padding-top: 37.78px;
    padding-right: 56.67px;
    padding-bottom: 37.78px;
    padding-left: 56.67px;
    gap: 18.89px;
     background: #6EC1E41A;
    width: 100%;
    height: 100%;
}

/* Only peek next card on desktop (hide left padding visually) */
@media (min-width: 1024px) {
    .service-cards.owl-carousel .owl-stage-outer {
        padding-left: 0 !important;
        /* margin-left: -80px; */
        transition: margin-left 0.3s ease, padding-left 0.3s ease;
    }
}

/* Smooth opacity transition for peeking cards */
.service-cards.owl-carousel .owl-item {
    transition: opacity 0.3s ease;
}


.location-box-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.location-box {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-platform-services {
    display: flex;
    margin-top: 41px;
}

input[type="password"] {
    letter-spacing: 5px;
}

.back-to-login {
    margin-bottom: 20px;
}

.back-to-login a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #7D5CA4;
    text-decoration: underline;
    font-weight: 500;
    text-underline-offset: 3px;
}

.back-to-login a svg path {
    /* fill: rgb(85, 26, 139); */
    fill: rgba(97, 71, 127, 1);
    transition: fill 0.2s ease;
}

.back-to-login a:hover {
    color: rgb(85, 26, 139);
    ;
}

.back-to-login a:hover svg path {
    fill: rgb(85, 26, 139);
    ;
}

/* user comapany detail page about section character counter */
.char-counter {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
    font-weight: 500;
}


/* Change from .password to .password-hidden */
input.password-hidden::placeholder {
    font-size: 20px !important;
    /* other bullet styling */
}

.placeholder-centered {
    padding-bottom: 14px !important;
}

.tagify__dropdown {
    max-width: 345px !important;
    width: 100% !important;
    border-radius: 8px !important;
    box-shadow: 0px 0px 8px 0px #0000001F;
    z-index: 998;
}

.tagify__dropdown__wrapper {
    border: 1px solid #E5E5E5 !important;
    /* box-shadow: 0px 0px 8px 0px #0000001F; */

}

.tagify__dropdown__item {
    font-size: 16px;
    padding: 8px 16px;
    font-weight: 500;
}

/* dropdown of region and language of user company detail */
.tagify__dropdown__item:hover {
    background-color: #F8F7FA !important;
    color: #191221 !important;
}

.tagify__dropdown__item--active {
    background-color: #F8F7FA !important;
    color: #191221 !important;
}

/* Scrollbar thumb (the draggable part) */
.tagify__dropdown::-webkit-scrollbar-track {
    background: black !important;
}

.truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.truncate-1-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* limit to 1 line */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.password-title {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
}

.boxx p {
    margin-bottom: 32px !important;
}

.reset-password-text {
    color: rgba(130, 130, 130, 1);
}

.company-name-about p {
    word-break: break-word;
}

.tagify__dropdown__wrapper::-webkit-scrollbar {
    width: 4px;
    /* width of scrollbar */
}

.tagify__dropdown__wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
    /* track color */
    border-radius: 4px;
}

.tagify__dropdown__wrapper::-webkit-scrollbar-thumb {
    background: #D9D9D9;
    /* thumb color */
    border-radius: 4px;
}

/* .tagify__dropdown__wrapper::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* thumb hover color
} */

/* For Firefox
.tagify__dropdown__wrapper {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
} */

.rel {
    position: relative;
    line-height: 1;
}

/* Tooltip styling */
.rel .custom-tooltip {
    width: max-content;
    background-color: #191221E5;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--SFProBold);
    line-height: 1.2;
    transition: all 0.3s ease-in-out;
}

/* Tooltip arrow */
.rel .custom-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent #191221E5 transparent;
}
.custom-tooltip-link{
    text-decoration: none;
    color: #fff;
}
/* Show tooltip on hover if service has "bordered" class */
.service.bordered:hover .custom-tooltip,
.rel:hover .custom-tooltip:not(.price-tooltip),
.custom-tooltip.active {
    opacity: 1;
    visibility: visible;
}

.flag-content {
    width: 20% !important;
}

.other-tagify {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}

.error-links {
    /* color: #7D5CA4;
    text-decoration: underline; */
}

.error-link-no-under {
    text-decoration: none;
}

.error-link-bold {
    font-weight: bold;
    text-decoration: none;
}

.email-fixed {
    height: 100% !important;
}

.fixed-email-info {
    height: 100% !important;
    top: 0px !important;
    right: 0px !important;
}

.claim-company-name {
    font-size: 32px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 0px;
    word-break: break-word;
}

.company-info {
    display: flex;
    gap: 12px;
    align-items: center;
}

.claim-company-text {
    font-size: 20px;
    font-weight: 500;
    font-family: "Nunito Sans", sans-serif;
    color: #6D6D6D;
    line-height: 1.5;
    transition: all 0.3s ease-in-out;
}

.company-detail-logo {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover;
}

.submit-contact-form {
    width: 100% !important;
}

/* .industries-view-btn{
    background-color: rgba(169, 145, 230, 0.1) !important;
    color: rgba(125, 92, 164, 1) !important;
} */
.services-view-btn {
    background-color: rgba(124, 192, 212, 0.1) !important;
    color: rgba(90, 146, 162, 1) !important;
}

/* Logo Preview Styles - Frontend */
.upload-box .icon.current-logo {
    position: relative;
    border: 1px solid #e0e6f2;
    border-radius: 8px;
    padding: 4px;
    background: linear-gradient(135deg, #f5f6fa 0%, #eef2f8 100%);
    transition: all 0.3s ease;
}

.upload-box .icon.current-logo:hover {
    border-color: #d0d8e8;
    box-shadow: 0 4px 12px rgba(125, 92, 164, 0.1);
}

.upload-box .icon.current-logo img {
    border-radius: 4px;
    display: block;
}

.remove-logo-btn-frontend {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
    z-index: 10;
}

.remove-logo-btn-frontend:hover {
    background: linear-gradient(135deg, #e83e4d 0%, #ff5868 100%);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
    transform: scale(1.1);
}

.remove-logo-btn-frontend:active {
    transform: scale(0.95);
}

.remove-logo-btn-frontend svg {
    width: 14px;
    height: 14px;
}

/* Old styles for logo-preview-section-frontend (can be removed if not used elsewhere) */
.logo-preview-section-frontend {
    margin-top: 12px;
    margin-bottom: 16px;
}

.logo-preview-wrapper-frontend {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 160px;
    background: linear-gradient(135deg, #f5f6fa 0%, #eef2f8 100%);
    border: 2px solid #e0e6f2;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
}

.logo-preview-wrapper-frontend:hover {
    border-color: #d0d8e8;
    box-shadow: 0 4px 12px rgba(125, 92, 164, 0.1);
}

.logo-preview-image-frontend {
    width: 100%;
    height: auto;
    max-height: 136px;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    background: white;
}

.services-modal .flex-item .icon {
    color: rgba(90, 146, 162, 1) !important;
}

.industries-modal .flex-item .icon {
    color: rgba(125, 92, 164, 1) !important;
    background-color: rgba(169, 145, 230, 0.2);
}

.industries-modal .flex-item:hover {
    color: #7D5CA4;
}

/* Only show peek effect when slider is active */
.slider-wrapper-container.no-slider {
    overflow: visible !important;
}

.slider-wrapper-container.no-slider::before,
.slider-wrapper-container.no-slider::after {
    display: none !important;
}

/* Keep peek effect for active sliders */
.slider-wrapper-container.has-slider {
    overflow: visible;
}

.non-domain span {
    font-weight: bold;
}

.non-domain a {
    color: rgba(125, 92, 164, 1);
}

.header-left {
    position: absolute;
    left: 0;
    bottom: 290px;
}

.header-right {
    position: absolute;
    right: 0;
    top: 80px;
}

@media (max-width:768px) {

    .header-left,
    .header-right {
        display: none;
    }
}

.combine-popular {
    background: radial-gradient(ellipse 1000px 1000px at 0% 75%, rgba(224, 197, 255, 0.4) 0%, transparent 50%), radial-gradient(ellipse 1000px 1000px at 100% 30%, rgba(176, 237, 255, 0.4) 0%, transparent 50%), #FFFFFF;
}

#select2-industry-select-container .select2-selection__choice {
    color: rgba(125, 92, 164, 1) !important;
}

#select2-services-select-container .select2-selection__choice {
    color: rgba(90, 146, 162, 1) !important;
}

#select2-location-select-container .select2-selection__choice {
    color: rgba(125, 92, 164, 1) !important;
}

.top-clutch-content {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.top-clutch-content .text-top {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.clutch-badge {
    padding: 8px 24px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(234, 234, 234, 1);
    border-radius: 100px;

}

.clutch-icon {
    margin-top: 8px;
}

/* Modal Styles */
.inactive-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
    font-family: var(--SFProMedium);
}

.inactive-box {
    width: 720px;
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    padding: 42px 40px 24px 40px;
    text-align: center;
    position: relative;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    animation: inactive-pop 0.25s ease-out;
    backdrop-filter: blur(24px);
}

@keyframes inactive-pop {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.inactive-close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 30px;
    cursor: pointer;
    background: rgba(189, 189, 189, 0.2);
    font-weight: normal;
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

.inactive-icon-box img {
    width: 255px;
    height: 255px;
    opacity: 0.9;
}

.inactive-title {
    margin-top: 15px;
    font-size: 24px;
    font-weight: 700;
}

.inactive-description {
    color: rgba(108, 117, 125, 1);
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 12px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
}

.inactive-primary-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    font-weight: 500;
    background: rgba(125, 92, 164, 1);
}

.inactive-primary-btn:hover {
    background: rgba(97, 71, 127, 1);
}

.inactive-footer {
    margin-top: 10px;
    font-size: 16px;
    color: rgba(25, 18, 33, 1);
    margin-bottom: 0px !important;
}

.inactive-link {
    color: rgba(90, 146, 162, 1);
    text-decoration: underline;
    font-family: Nunito Sans, sans-serif;
}

.inactive-email {
    color: rgba(51, 51, 51, 1);
}

.ql-editor p span {
    font-size: 16px !important;
}

.ql-editor p {
    font-size: 16px !important;
}

.pro-service-details-select2-drop {
    max-width: 195px !important;
    width: 100% !important;
    min-width: 310px !important;
    border: 1px solid rgba(229, 229, 229, 1) !important;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);

}

.pro-service-details-select2-drop .select2-results__option:hover {
    background-color: rgba(248, 247, 250, 1) !important;
    color: rgba(25, 18, 33, 1) !important;
}

.pro-service-details-select2-drop .select2-results__option--highlighted {
    background-color: rgba(248, 247, 250, 1) !important;
    color: rgba(25, 18, 33, 1) !important;
}

.no-reviews-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 12px 0px 20px 0px;
}

.no-reviews-found h2 {
    margin-top: 40px;
    margin-bottom: 8px;
    font-size: 24px;
    font-family: var(--SFProBold);
    font-weight: 700;
    color: rgba(25, 18, 33, 1);
}

.no-reviews-found p {
    margin-bottom: 0px !important;
    font-size: 16px;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 500;
    color: rgba(161, 161, 161, 1);
}

.no-reviews-found p span {
    font-size: 16px;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 700;
    color: rgba(0, 0, 0, 1);
}

.expand-toggle img {
    transition: transform 0.3s ease;
}

.expand-toggle[aria-expanded="true"] img {
    transform: rotate(180deg);
}

.comp-detail {
    max-width: 960px;
    width: 100%;
}

.comp-detail .image {
    width: 18%
}

.comp-detail .data {
    width: 80%
}

.success-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 32px 23px 32px;
    margin-top: 115px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    max-width: 610px;
    width: 100%;
    backdrop-filter: blur(24px);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    height: 500px;
}

.success-box .success-tick {
    margin-bottom: 73px;
}

.success-box h2 {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(25, 18, 33, 1);
    margin-bottom: 8px;
}

.success-box p {
    font-size: 16px;
    font-weight: 500;
    font-family: "Nunito Sans", sans-serif;
    color: rgba(108, 117, 125, 1);
    margin-bottom: 45px;
}

.success-box .btn-blue {
    width: 100%;
}

.password-success-section {
    align-items: normal !important;
}

/* Make company items and checkboxes clickable in similar companies modal */
#companies .similar-companies-list .company-wrapper {
    cursor: pointer;
    margin-bottom: 16px;
    position: relative;
    /* z-index: 1; */
}

#companies .similar-companies-list .company-wrapper .box {
    cursor: pointer;
    pointer-events: auto !important;
    flex-shrink: 0;
    z-index: 10000 !important;
}

#companies .similar-companies-list .company-wrapper input[type="checkbox"] {
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 10000 !important;
}

#companies .similar-companies-list .company-wrapper .header {
    flex: 1;
}

/* Only target the backdrop for this modal by adding a class at runtime */
#companies.modal.show {
    z-index: 1100 !important;
}

.modal-backdrop.companies-backdrop {
    z-index: 1099 !important;
}

/* keep pointer-events and checkbox styles scoped to #companies */
#companies .similar-companies-list .company-wrapper {
    cursor: pointer;
    margin-bottom: 16px;
    position: relative;
}

#companies .similar-companies-list .company-wrapper label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px !important;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: rgba(113, 115, 118, 1);
    margin-bottom: 16px;
}

.message-editor-wrapper .expanded .input-wrapper input,
textarea {
    font-size: 20px !important;
    font-weight: 500 !important;
    font-family: var(--SFProMedium) !important;
    color: rgba(51, 51, 51, 1) !important;
}

.expand-message p,
.expanded p {
    margin-bottom: 0px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-family: var(--SFProMedium) !important;
    color: rgba(125, 92, 164, 1) !important;
    line-height: normal;
}

#companies .similar-companies-list .company-wrapper .box {
    cursor: pointer;
    pointer-events: auto !important;
    flex-shrink: 0;
    z-index: 10000 !important;
}

#companies .similar-companies-list .company-wrapper input[type="checkbox"] {
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 10000 !important;
}

#companies .similar-companies-list .company-wrapper .header {
    flex: 1;
    width: 100%;
}

.similar-services {
    margin-bottom: 0px !important;
}

.similar-image {
    background-color: transparent !important;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(125, 92, 164);
    border-image: initial;
}

.similar-top-sec {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.similar-name {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 0px;
    word-break: break-word;
}

.similar-tag {
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgb(131, 131, 131);
    background-color: white;
    gap: 5px;
    padding: 4px 16px;
    border-radius: 67px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(234, 234, 234);
    border-image: initial;
}

.similar-verified {
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgb(9, 178, 133);
    background-color: rgba(12, 198, 185, 0.1);
    gap: 5px;
    padding: 4px 16px;
    border-radius: 67px;
}

.similar-verified img {
    width: 16px;
    height: 16px;
}

.similar-core {
    color: rgba(88, 1, 181, 1) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgb(88, 1, 181) !important;
    border-image: initial !important;
    background: rgba(240, 248, 250, 1) !important;
}

.similar-core:hover {
    color: rgb(88, 1, 181) !important;
    background: linear-gradient(0deg, rgb(240, 248, 250), rgb(240, 248, 250)), linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)) !important;
}

.similar-bottom-sec {
    margin-top: 4px;
}

.similar-bottom-sec .rating-number {
    font-size: 16px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    color: rgba(25, 18, 33, 1);
}

.simple-similar {
    font-size: 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: rgba(124, 192, 212, 0.1) !important;
    font-weight: 500 !important;
    font-family: var(--SFProMedium) !important;
    color: rgb(90, 146, 162) !important;
    padding: 8px 24px !important;
    border-radius: 8px !important;
    gap: 8px !important;
    border: none !important;
}

.review-input-sections {
    flex-direction: column !important;
    margin-top: 0px !important;
}

.review-icon-input {
    margin-bottom: 40px !important;
}

.review-catched input {
    max-width: 100% !important;
}

.similar-companies-content {
    padding: 24px 21px 24px 40px !important;
}

.similar-companies-content .header .title {
    font-size: 56px !important;
    font-weight: 700 !important;
    font-family: var(--SFProBold) !important;
    color: rgba(25, 18, 33, 1) !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    margin-top: 24px !important;
}

.similar-companies-content .body .text {
    font-family: Nunito Sans, sans-serif !important;
    color: rgba(109, 109, 109, 1) !important;
    margin-top: 12px !important;
}

.similar-companies-content .footer .btn-blue {
    margin-right: 10px;
}

.similar-companies-content .footer .support .large {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: rgba(125, 92, 164, 1) !important;
}

.custom-sort-select {
    max-width: 290px !important;
    width: 100% !important;
    height: 56px !important;
    position: relative !important;
}

.custom-sort-select .select2-selection__arrow {
    top: 16px !important;
}

.custom-sort-dropdown {
    min-width: 290px !important;
    width: 100% !important;
}

.custom-sort-dropdown .select2-results .select2-results__options .select2-results__option--selectable:hover {
    background-color: rgba(248, 247, 250, 1) !important;
    color: rgba(25, 18, 33, 1) !important;
}

.company-name-clickable {
    cursor: pointer;
    text-decoration: none;
    color: var(--text-color);
}

.company-name-clickable:hover {
    text-decoration: underline;
}

.email-warning {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.email-warning .error {
    margin-top: 0px !important;
}

.forgot-input-error {
    border: 1px solid rgba(242, 0, 60, 1) !important;
}

.submit-description {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background-color: rgba(12, 198, 185, 0.1);
    width: 100%;
    border-radius: 10px;
    margin-top: 16px;
    margin-bottom: 20px;
}

.submit-description p {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(49, 49, 49, 1);
    margin-bottom: 0px !important;
}

.match-edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;
}

.match-edit .sub-title {
    margin-bottom: 0px !important;
}

.edit-message {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-message:hover {
    text-decoration: underline;
}

.edit-message p {
    margin-bottom: 0px !important;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(125, 92, 164, 1);
}

.submit-desc-top,
.submit-desc-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Expandable message editor styling */
.message-editor-wrapper {
    display: none;
    margin-top: 18px;
}

.message-editor-wrapper.expanded {
    display: block;
    width: 100%;
}

.message-editor-wrapper .input-wrapper {
    margin-bottom: 16px;
}

.message-editor-wrapper .input-wrapper:last-child {
    margin-bottom: 0;
}

.message-editor-wrapper label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.message-editor-wrapper .input {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 8px 12px;
}

.message-editor-wrapper .input img {
    width: 20px;
    height: 20px;
}

.message-editor-wrapper .input input,
.message-editor-wrapper .input textarea {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: inherit;
}

.message-editor-wrapper .input.lg {
    align-items: flex-start;
    height: 150px !important;
    resize: none !important;
    padding: 16px !important;
}

.message-editor-wrapper .input-wrapper .input .lg {
    height: 110px !important;
    resize: none !important;
}

.review-text {
    height: 160px !important;
}

.message-editor-wrapper .error-message {
    display: none;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    color: #dc3545;
    font-weight: 500;
}

.message-editor-wrapper .input.error {
    border-color: #dc3545;
}

/* Expand button styling */
.expand-message {
    display: none;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: rgba(125, 92, 164, 1);
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border: none;
}

.expand-message:hover {
    text-decoration: underline;
}

.match-edit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.match-edit .sub-title {
    margin: 0;
}

/* Expand controls styling */
.expand-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expand-controls .cancel-edit,
.expand-controls .collapse-edit {
    border: none;
    background: none;
    color: rgba(125, 92, 164, 1);
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.expand-controls .cancel-edit:hover,
.expand-controls .collapse-edit:hover {
    text-decoration: underline;
}

.expand-controls .cancel-edit {
    border-left: 1px solid rgba(203, 203, 203, 1);
    padding-left: 8px;
}

.similar-companies-footer {
    margin-top: 30px !important;
}

.similar-edit-collapse {
    display: flex;
    gap: 8px;
}

/* Modal size adjustments for core services modal */
.max-core-services-modal {
    max-width: 540px !important;
    width: 100% !important;
}

.max-core-services-modal .modal-content .modal-body {
    padding: 20px 40px !important;
    padding-bottom: 24px !important;
}

.max-core-services-modal .modal-content .modal-body .buttons .btn-red {
    padding: 16px 20px !important;
    width: 180px !important;
    background-color: var(--blue) !important;
    border: none !important;
}

/* Services and Industries section styles  centered on homepage*/
.services-industries-section .container {
    width: 60% !important;
}

.services-industries-section .container .row {
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

.services-industries-section .container .row .industries,
.services-industries-section .container .row .services {
    max-width: 450px !important;
    width: 100% !important;
}

/* similar companies modal styles  */
.similar-companies {
    border-radius: 24px !important;
}

.similar-companies-content .header {
    margin: 18px 18px 26px 0px !important;
}
#companies .similar-companies-list .company-wrapper .label .similar-pro-header {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-top: -16px;
    padding-top: 16px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    border-bottom: 1px solid #E5E5E5;
    background: rgba(88, 1, 181, 0.05) !important;
}

#companies .similar-companies-list .company-wrapper .label .similar-pro-header .header {
    border-bottom: none !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}
#companies .similar-companies-list .company-wrapper .label .similar-pro-header .header .image{
    position: relative;
    border: 2px solid rgba(88, 1, 181, 1) !important;
    padding: 2px !important;
}
.similar-pro-crown {
    position: absolute;
    width: 18px !important;
    height: 18px !important;
    top: -3px;
    right: -2px;
}
/* searchbox icons fit  */
.searchbox-company-logo {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
}

.searchbox-industry,
.searchbox-service {
    width: 24px !important;
    height: auto !important;
}

/* login page error message style  */
.general-error-login {
    margin-bottom: 16px;
    padding: 1rem;
    background-color: #fee2e2;
    border: 1px solid #f87171;
    border-radius: 4px;
    color: #b91c1c;
}

.general-error-login .list-disc {
    margin-bottom: 0px !important;
}

/* Enhanced expandable message editor styling in similar companies modal */
.message-editor-wrapper {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.4s ease-in-out,
        opacity 0.3s ease-in-out,
        margin-top 0.3s ease-in-out;
}

.message-editor-wrapper.expanded {
    max-height: 500px;
    opacity: 1;
    margin-top: 18px;
}

.message-editor-wrapper .input-wrapper {
    transition: all 0.3s ease-in-out;
    transform: translateY(0);
}

.message-editor-wrapper.expanded .input-wrapper {
    animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.expand-controls {
    transition: all 0.3s ease-in-out;
}

.expand-controls button,
.expand-controls .expand-message {
    transition: opacity 0.2s ease-in-out,
        transform 0.2s ease-in-out;
}

.expand-controls button.d-none,
.expand-controls .expand-message[style*="display: none"] {
    opacity: 0;
    transform: scale(0.95);
}

.expand-controls button:not(.d-none),
.expand-controls .expand-message:not([style*="display: none"]) {
    opacity: 1;
    transform: scale(1);
}

.company-wrapper {
    transition: all 0.3s ease-in-out;
}

.company-wrapper label.label {
    transition: all 0.2s ease-in-out;
}

.gradient-color {
    max-width: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    background: radial-gradient(ellipse 100vw 100vh at 0% 20%, rgba(224, 197, 255, 0.4) 0%, transparent 50%), radial-gradient(ellipse 100vw 100vh at 100% 50%, rgba(176, 237, 255, 0.4) 0%, transparent 50%), #FFFFFF;
    z-index: -1;
}

.auth-gradient-color {
    max-width: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    background: radial-gradient(ellipse 100vw 100vh at 80% 80%, rgba(224, 197, 255, 0.4) 0%, transparent 50%), radial-gradient(ellipse 100vw 100vh at 20% 25%, rgba(176, 237, 255, 0.4) 0%, transparent 50%), #FFFFFF;
    z-index: 1;
}

.modal-gradient-color {
    max-width: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    background: radial-gradient(ellipse 50vw 50vh at 0% 5%, rgba(224, 197, 255, 0.2) 0%, transparent 50%), radial-gradient(ellipse 50vw 50vh at 100% 0%, rgba(176, 237, 255, 0.2) 0%, transparent 50%), #FFFFFF;
}

.review-position {
    position: relative;
}

.error-margin {
    position: absolute;
    top: calc(100%);
    margin-top: 4px !important;
}






/* phase 2 css */
.sign-up-btn {
    padding: 10px 24px;
    border-radius: 16px;
    font-size: 20px;
    max-height: 56px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(25, 18, 33, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: 8px;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: rgba(154, 154, 154, 1);
    font-size: 16px;
    font-family: Nunito Sans, sans-serif;
    font-weight: 500;
    margin: 20px 0;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.divider::before {
    margin-right: 16px;
}

.divider::after {
    margin-left: 16px;
}


/* signup blade  */
.signup-names {
    display: flex;
    gap: 16px;
}

.signup-boxx {
    padding-bottom: 26px !important;
}


/* header css  */
.btn-notification,
.btn-messanger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border: 1px solid rgba(229, 229, 229, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    height: 56px;
    width: 56px;
}

.btn-notification:hover,
.btn-messanger:hover {
    border: 1px solid #61477F;
}

.red-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
}

.logged-user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-decoration: none;
}

.logged-user p {
    font-size: 20px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    font-family: var(--SFProMedium);
    margin-bottom: 0px !important;
}

/* User Profile Dropdown - Header */
.custom-navbar .user-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    position: relative;
}

.custom-navbar .user-profile .user-profile-wrapper {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px #0000001F;
    border: 1px solid #E5E5E5;
    background-color: white;
    top: calc(100% + 18px);
    right: 0px;
    z-index: 9999;
    display: none;
    overflow: hidden;
    width: 280px;
}

.custom-navbar .user-profile .user-profile-wrapper.show {
    display: block;
}

.custom-navbar .user-profile .user-profile-wrapper .item {
    display: flex;
    text-decoration: none;
    gap: 12px;
    padding: 16px;
    border: none;
    width: 220px;
    font-size: 16px;
    color: #191221;
    font-weight: 500;
    font-family: var(--SFProMedium);
    width: 100%;
}

.custom-navbar .user-profile .user-profile-wrapper .item:hover {
    background-color: #f8f9fa;
}

.custom-navbar .user-profile .user-profile-wrapper .item img {
    width: 24px;
    height: 24px;
}

.custom-navbar .user-profile .user-profile-wrapper .item.borderb {
    border-bottom: 1px solid #E5E5E5;
}
.custom-navbar .user-profile .user-profile-wrapper .user-name-dropdown {
    padding: 12px;
    border-bottom: 1px solid #E5E5E5;
    background: radial-gradient(ellipse 100% 200% at 30% 30%, rgba(224, 197, 255, 0.4) 20%, transparent 50%), radial-gradient(ellipse 200% 200% at 100% 70%, rgba(176, 237, 255, 0.4) 20%, transparent 50%), #FFFFFF;
    cursor: default;
    height: 120px;
    /* margin: auto; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.custom-navbar .user-profile .user-profile-wrapper .user-name-dropdown h3{
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin: 0px;
    margin-bottom: 4px;
}
.custom-navbar .user-profile .user-profile-wrapper .user-name-dropdown p{
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin: 0px;
}

.custom-navbar .user-profile .user-profile-text {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin: 0px;
    cursor: pointer;
}

.custom-navbar .user-profile .user-profile-image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #E5E5E5;
    cursor: pointer;
}

.custom-navbar .user-profile .user-profile-image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.custom-navbar .user-profile .user-profile-image .thumbnail-initials {
    font-size: 18px;
    font-weight: 600;
    color: #7D5CA4;
    font-family: var(--SFProMedium);
}


/* edit profile css  */
.signed-user {
    background-color: transparent !important;
    align-items: center;
    justify-content: center;
    min-height: 70vh !important;
}

.signed-user .right-container {
    margin-left: 0% !important;
    max-width: 1472px;
    width: 100%;
}

.signed-user .right-container .content .top h1 {
    font-size: 48px;
    font-family: var(--SFProMedium);
    font-weight: 700;
    color: rgba(25, 18, 33, 1);
}
.company-admin-edit-title{
    font-size: 48px;
    font-family: var(--SFProMedium);
    font-weight: 700;
    color: rgba(25, 18, 33, 1);
}




.title-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.title-btn .title {
    margin-bottom: 0px !important;
}

/* My Reviews Page Styles */
.my-reviews-page {
    max-width: 1472px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
    margin-top: 16px;
    backdrop-filter: blur(24px);
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
    padding: 32px !important;
}

.my-reviews-title {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin-bottom: 20px;
}

.my-reviews-subtitle {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(25, 18, 33, 1);
    margin-bottom: 20px;
}

.my-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Review Card */
.review-card {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    padding: 24px;
    transition: box-shadow 0.3s ease;
}

.review-card:hover {
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
}

/* Review Card Header */
.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    margin-bottom: 26px;
}

.review-company-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

.review-card .review-company-logo {
    width: 56px !important;
    height: 56px !important;
}
.review-card .review-company-logo img{
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
}
.review-company-logo {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50%;
    background-color: rgba(110, 193, 228, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.review-company-logo .logo-initial {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: #333;
}

.review-company-logo.figma-logo,
.review-company-logo.meta-logo {
    background-color: #F8F8F8;
}

.review-company-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-company-name {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0;
}

.review-time {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProRegular);
    color: rgba(132, 132, 132, 1);
}

.review-rating-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-rating-number {
    font-size: 20px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    color: rgba(0, 0, 0, 1);
}

.review-stars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.review-stars svg {
    width: 18px;
    height: 18px;
}

/* Review Card Content */
.review-card-content {
    margin-bottom: 24px;
}

.review-card-content .review-text {
    height: auto !important;
}
.review-card .review-gallery {
    display: flex;
    gap: 16px;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 24px;
}
.review-card .review-gallery img {
    width: 104px;
    height: 104px;
    border-radius: 8px;
    object-fit: cover;
}
.review-title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(25, 18, 33, 1);
    margin: 0 0 24px 0;
}

.review-text {
    font-size: 20px;
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
    color: rgba(0, 0, 0, 1);
    line-height: 1.5;
    margin: 0;
    padding-top: 10px !important;
    height: 120px !important;
}

.review-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding-top: 16px; */
    /* border-top: 1px solid #F0F0F0; */
}

.review-actions-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.review-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(125, 92, 164, 1);
    cursor: pointer;
    text-decoration: none;
}

.review-action-btn:hover {
    color: #61477F;
}

.review-action-btn svg {
    width: 16px;
    height: 16px;
}

.review-delete-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(242, 0, 60, 1);
    cursor: pointer;
}

.review-delete-btn:hover {
    color: rgb(255, 0, 64);
}

.my-review-badge {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(125, 92, 164, 1);
    background-color: rgba(125, 92, 164, 0.1);
    padding: 8px 24px;
    border-radius: 100px;
    border: 1px solid rgba(234, 234, 234, 1);
    display: flex;
    height: 40px;
    justify-content: center;
    align-items: center;
}

.my-review-badge p {
    margin-bottom: 0px !important;
}

.my-review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ===== My Requests Page Styles ===== */
.my-requests-page {
    padding: 32px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(24px);
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
    margin-top: 10px;
}

.my-requests-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.my-requests-title {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0;
}

.my-requests-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: rgba(125, 92, 164, 1);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.my-requests-create-btn:hover {
    background-color: rgba(97, 71, 127, 1);
    color: #fff;
}

/* Toggle Tabs */
.my-requests-tabs {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid rgba(234, 234, 234, 1);
}

.my-requests-tab {
    background: none;
    border: none;
    padding: 12px 0;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(108, 117, 125, 1);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    padding: 14px;
}

.my-requests-tab:hover {
    color: var(--text-color);
}

.my-requests-tab.active {
    color: var(--text-color);
}

.my-requests-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgba(125, 92, 164, 1);
    border-radius: 2px 2px 0 0;
}

/* Tab Content */
.my-requests-content {
    display: none;
}

.my-requests-content.active {
    display: block;
}

/* Empty State */
.my-requests-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
}

.my-requests-empty-icon {
    margin-bottom: 40px;
}

.my-requests-empty-icon img {
    width: 200px;
    height: auto;
}

.my-requests-empty h2 {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin-bottom: 8px;
}

.my-requests-empty p {
    font-size: 16px;
    font-weight: 500;
    font-family: "Nunito Sans", sans-serif;
    color: rgba(108, 117, 125, 1);
    margin-bottom: 24px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .my-requests-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .my-requests-title {
        font-size: 24px;
    }

    .my-requests-create-btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }

    .my-requests-tabs {
        gap: 24px;
    }

    .my-requests-tab {
        font-size: 16px;
    }

    .my-requests-empty {
        padding: 60px 20px;
    }

    .my-requests-empty-icon img {
        width: 160px;
    }

    .my-requests-empty h2 {
        font-size: 20px;
    }
}

/* ===== New Request Page Styles ===== */
.new-request-page {
    padding: 32px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(24px);
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
}

.new-request-title {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0 0 32px 0;
}

.new-request-content {
    max-width: 100%;
}

.new-request-content .form-item {
    border-bottom: 1px solid #E5E5E5;
    padding: 32px 0;
}

.new-request-content .form-item:first-child {
    padding-top: 0;
}

.new-request-content .form-item:last-of-type {
    border-bottom: none;
}

.new-request-content .label-wrapper {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    align-items: center;
}

.new-request-content .label-wrapper label {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProBold);
    color: var(--text-color);
}

.new-request-content .label-wrapper .info {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(108, 117, 125, 1);
    font-style: italic;
}

.new-request-content .text {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProRegular);
    color: rgba(161, 161, 161, 1);
}

.new-request-content .input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: var(--text-color);
    background-color: #fff;
    transition: border-color 0.3s ease;
}

.new-request-content .input:focus {
    outline: none;
    border-color: rgba(125, 92, 164, 1);
}

.new-request-content .input::placeholder {
    color: rgba(108, 117, 125, 1);
}

.new-request-content .right-section {
    width: 100%;
}

.new-request-content .right-section .label {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(108, 117, 125, 1);
    display: block;
    margin-bottom: 8px;
}

.new-request-content .footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 32px;
    border-top: 1px solid #E5E5E5;
    margin-top: 0;
}

.new-request-content .footer .right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.company-address-row {
    border: 1px solid rgba(231, 231, 233, 1);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}
.btn-remove-address{
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(242, 0, 60, 1);
    background: transparent;
    border: none;
}
.temp-company-address-header {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 16px;
}
.temp-company-address-header .col-12 {
    flex: 0 0 auto !important;
    width: max-content !important;
    padding: 0;
    margin: 0;
    margin-left: auto;
}
.temp-company-address-header h2{
    width: max-content;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    margin: 0;
    padding: 0;
}
.temp-company-address-header-divider {
    width: 49%;
    height: 1px;
    background: rgba(229, 229, 229, 1);
    margin: 0;
}
.user-dashboard .form-item .company-addresses-container .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 15px !important;
}
.user-dashboard .form-item .company-addresses-container .select2-container--default .select2-selection--single {
    display: flex;
}
.company-addresses-container .select2-container--default .select2-selection--single {
    border: 1px solid rgba(231, 231, 233, 1) !important;
}
.localization-select2-drop {
    border: none !important;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    max-height: 300px !important;
    margin-top: 4px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px #0000001F;
    width: 320px !important;
    min-width: 440px !important;
    max-width: 320px !important;
}
.select2-container--default .localization-select2-drop .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(125, 92, 164, 1) !important;
}
.localization-select2-drop .select2-results__option:hover {
    background-color: rgba(125, 92, 164, 1) !important;
    color: white !important;
}
.localization-select2-drop .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(125, 92, 164, 1) !important;
    color: white !important;
}
.location-address-wrapper {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0 !important;
}
/* Responsive styles for New Request Page */
@media (max-width: 768px) {
    .new-request-page {
        padding: 24px 16px;
    }

    .new-request-title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .new-request-content .form-item {
        padding: 24px 0;
    }

    .new-request-content .footer {
        flex-direction: column;
        gap: 12px;
    }

    .new-request-content .footer .right {
        width: 100%;
        flex-direction: column-reverse;
    }

    .new-request-content .footer .btn-white,
    .new-request-content .footer .btn-blue {
        width: 100%;
    }
}

.my-request-select2-selection {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.my-request-select2-selection .select2-selection__arrow {
    top: 16px !important;
    position: static !important;
    height: 24px !important;
}

/* ============================================
   MY REQUESTS PAGE - DATA VIEW STYLES
   ============================================ */

.request-card-container {
    padding: 20px 0;
}

.request-card {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

.request-card .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 16px;
}

.request-card .left-badges {
    display: flex;
    align-items: center;
    gap: 12px;
}

.request-card .posted-time {
    color: rgba(130, 130, 130, 1);
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
}

.request-card .status-badge {
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
}

.request-card .status-badge.active {
    background: rgba(12, 198, 185, 0.1);
    color: rgba(9, 178, 133, 1);
}

.request-card .payment-badge {
    padding: 6px 16px;
    border: 1px solid rgba(234, 234, 234, 1);
    border-radius: 100px;
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(131, 131, 131, 1);
}

.request-card .right-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.request-card .badge-btn {
    background: rgba(169, 145, 230, 0.05);
    color: rgba(125, 92, 164, 1);
    border: none;
    padding: 8px 24px;
    border-radius: 100px;
    font-family: var(--SFProMedium);
    font-size: 16px;
    font-weight: 500;
    border: 1px solid rgba(234, 234, 234, 1);
}

.request-card .btn-purple-sm {
    background: rgba(125, 92, 164, 1);
    color: #FFFFFF;
    padding: 16px 24px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    text-decoration: none;
    transition: all 0.3s ease;
}

.request-card .btn-purple-sm:hover {
    background: #61477F;
}

.request-card .meatball-btn {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 32px;
}

.request-card .request-title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin-bottom: 14px;
}

.request-card .about-section .text {
    font-size: 20px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 1);
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
}

.request-card .read-more-link {
    color: #5A92A2 !important;
    font-weight: 500;
    text-decoration: underline !important;
    margin-left: 5px;
}

.request-card .request-stats {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #F0F0F0;
}

.request-card .stat-link {
    color: rgba(125, 92, 164, 1);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.request-card .responses-section {
    margin-top: 24px;
}

.request-card .section-title {
    font-size: 16px;
    color: rgba(130, 130, 130, 1);
    font-weight: 500;
    margin-bottom: 18px;
    font-family: var(--SFProBold);
}

.request-card .responses-carousel-wrapper {
    position: relative;
    padding: 0px 15px;
}

.response-card {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.response-card .logo {
    width: 48px;
    height: 48px;
    background: #F8F9FA;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.response-card .logo img {
    width: 24px;
    height: auto;
}

.response-card .info {
    flex: 1;
}

.response-card .info .top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.response-card .info .name {
    font-weight: 500;
    font-size: 16px;
    font-family: var(--SFProBold);
}

.response-card .info .verified-icon {
    width: 14px;
}

.response-card .info .time {
    color: #A0A0A0;
    font-size: 12px;
}

.response-card .info .stars {
    display: flex;
    align-items: center;
    gap: 8px;
}

.response-card .info .stars-static {
    display: flex;
    align-items: center;
    gap: 2px;
}

.response-card .info .stars-static img {
    width: 14px;
    height: 14px;
}

.response-card .info .rating {
    font-weight: 600;
    font-size: 14px;
}

.response-card .actions {
    display: flex;
    gap: 8px;
}

.response-card .action-btn {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
}

.request-card .carousel-nav {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.request-card .nav-btn {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.request-card .nav-btn img {
    width: 16px;
}

/* Peek effect overrides for this carousel */
.responses-carousel.owl-carousel .owl-stage-outer {
    transition: all 0.3s ease;
}

.responses-carousel.owl-carousel .owl-item {
    transition: opacity 0.3s ease;
    width: 360px !important;
}


/* -------------------------------------------.
   Request Show Page Custom Styles (No Bootstrap)
------------------------------------------- */

.show-request-container {
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 26px;
    padding: 32px;
}

.show-request-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.show-request-top .back .back {
    display: flex;
    gap: 10px;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;

}

.service-card {
    transition: transform 0.2s;
}

.dynamic-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
    border-radius: 8px;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.copy-link-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #7D5CA4;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}

.close-request-btn {
    background: rgba(125, 92, 164, 1);
    color: #FFFFFF;
    padding: 16px 24px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

/* Header Section */
.request-show-header {
    margin-bottom: 24px;
}

.request-title-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.request-title {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0;
}

.request-actions {
    display: flex;
    gap: 20px;
}

.request-actions .meatball-btn {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 32px;
}

.request-meta-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.meta-date {
    color: rgba(130, 130, 130, 1);
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
}

/* Custom Buttons & Badges */
.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 67px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    gap: 8px;
    font-family: var(--SFProMedium);
}

.btn-outline-custom {
    background: transparent;
    border-color: #0084ff;
    color: #0084ff;
}

.btn-outline-custom:hover {
    background: #eef7ff;
}

.btn-filled-purple {
    background: var(--blue);
    color: white;
}

.btn-filled-purple:hover {
    background: #6a4c8f;
}

.btn-circle-light {
    background: #f8f9fa;
    color: var(--text-color);
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-circle-light:hover {
    background: #e9ecef;
}

.badge-custom {
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
}

.badge-light-green {
    background: rgba(12, 198, 185, 0.1);
    color: rgba(9, 178, 133, 1);
}

.request-payment-badge {
    padding: 6px 16px;
    border: 1px solid rgba(234, 234, 234, 1);
    border-radius: 100px;
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(131, 131, 131, 1);
}

.badge-outline {
    background: transparent;
    border: 1px solid #dee2e6;
    color: var(--text-color);
}

.badge-purple-light {
    background-color: #f3f0f7;
    color: var(--blue);
}

.badge-green-light {
    background-color: rgba(124, 192, 212, 0.1);
    color: rgba(90, 146, 162, 1);
}

.custom-divider {
    border: 0;
    border-top: 1px solid rgba(229, 229, 229, 1);
    opacity: 1;
    margin: 25px 0;
}

/* Description Section */
.request-description-section {
    margin-bottom: 48px;
}

.description-text {
    font-size: 20px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 1);
    font-weight: 500;
    font-family: Nunito Sans, sans-serif;
}

.tags-container-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.tags-column {
    flex: 1;
    min-width: 300px;
}

.tags-title {
    font-weight: 700;
    margin-bottom: 24px;
    font-size: 18px;
    color: var(--text-color);
    font-family: var(--SFProBold);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.more-tags-link {
    text-decoration: underline;
    font-size: 20px;
    font-family: var(--SFProMedium);
    color: #5A92A2;
    width: max-content;
    text-decoration: underline;
}

/* Responses Section */
.responses-section-wrapper {
    margin-top: 24px;
}

.section-heading {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--text-color);
    font-family: var(--SFProBold);
}

.filter-bar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 0;
    margin-bottom: 24px;
}

.request-filter-bar {
    border: none !important;
    margin-bottom: 24px !important;
}

.custom-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 32px;
    border-bottom: 1px solid rgba(234, 234, 234, 1);
    max-width: 1000px;
    width: 100%;
}

.tab-btn {
    background: none;
    border: none;
    padding: 0 0 19px 0;
    font-size: 16px;
    color: #848484;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-family: var(--SFProMedium);
}

.tab-item.active .tab-btn {
    color: var(--text-color);
    border-bottom-color: var(--blue);
    font-weight: 700;
    font-family: var(--SFProBold);
}

.search-wrapper-custom {
    max-width: 300px;
    width: 100%;
}

.search-inner {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
}

.search-input-custom {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border-radius: 50px;
    border: 1px solid #E5E5E5;
    outline: none;
    font-size: 14px;
    font-family: 'Nunito Sans', sans-serif;
    color: var(--text-color);
    background: #fff;
}

.search-input-custom:focus {
    border-color: var(--blue);
}

/* Response Cards Grid */
.custom-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.grid-item {
    height: 100%;
}

.response-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    background: #fff;
    position: relative;
    box-shadow: 0px 4px 12px 0px #0000001F;
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card-company-info {
    display: flex;
    gap: 16px;
}

.logo-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #E5E5E5;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-details {
    display: flex;
    flex-direction: column;
}

.name-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.company-name {
    font-weight: 700;
    font-size: 16px;
    margin: 0;
    color: var(--text-color);
    font-family: var(--SFProBold);
}

.verified-icon {
    width: 14px;
}

.ratings-row {
    font-size: 14px;
    margin-top: 4px;
    font-family: var(--SFProMedium);
}

.star-color {
    color: #ffc107;
}

.rating-val {
    color: #6c757d;
    margin-left: 4px;
}

.card-meta {
    text-align: right;
}

.time-ago {
    display: block;
    font-size: 12px;
    color: #848484;
    margin-bottom: 4px;
    font-family: 'Nunito Sans', sans-serif;
}

.fav-icon {
    color: #848484;
    cursor: pointer;
}

.card-description {
    flex-grow: 1;
    margin-bottom: 16px;
}

.desc-text {
    font-size: 14px;
    color: #6D6D6D;
    margin: 0;
    line-height: 1.5;
    font-family: 'Nunito Sans', sans-serif;
}

.read-more {
    color: #0084ff;
    text-decoration: none;
    font-weight: 500;
}

.latest-message-box {
    background-color: #f7f7f9;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.msg-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: #6c757d;
    font-family: var(--SFProBold);
}

.msg-time {
    font-size: 10px;
    color: #6c757d;
    font-family: 'Nunito Sans', sans-serif;
}

.msg-content {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-color);
    font-family: 'Nunito Sans', sans-serif;
}

.card-actions-row {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.action-btn {
    flex: 1;
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: var(--SFProMedium);
}

.action-btn.btn-outline {
    background: transparent;
    border-color: var(--text-color);
    color: var(--text-color);
}

.action-btn.btn-outline:hover {
    background: #f8f9fa;
}

.action-btn.btn-filled {
    background: var(--blue);
    color: white;
}

.action-btn.btn-filled:hover {
    background: #6a4c8f;
}


/* ===== INBOX DROPDOWN STYLES ===== */
.inbox-dropdown-container {
    position: relative;
}

.inbox-dropdown-wrapper {
    position: absolute;
    top: calc(100% + 18px);
    right: 0;
    width: 580px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid #E5E5E5;
    z-index: 9999;
    display: none;
    overflow: hidden;
}

.inbox-dropdown-wrapper.show {
    display: block;
}

.inbox-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px;
    border-bottom: 1px solid #EAEAEA;
    /* justify-content: space-between; */
}

.inbox-dropdown-title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0;
}

.inbox-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    background-color: rgba(242, 0, 60, 1);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--SFProMedium);
    border-radius: 100px;
}

.inbox-count-badge.large {
    min-width: 24px;
    min-height: 24px;
    font-size: 12px;
}

.inbox-dropdown-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Scrollbar width */
.inbox-dropdown-list::-webkit-scrollbar {
    width: 4px;
}

/* Track */
.inbox-dropdown-list::-webkit-scrollbar-track {
    background: #f3f4f6;
    /* light gray */
}

/* Thumb */
.inbox-dropdown-list::-webkit-scrollbar-thumb {
    background-color: rgba(217, 217, 217, 1);
    /* indigo */
    border-radius: 10px;
}

/* Hover */
.inbox-dropdown-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(217, 217, 217, 1);
}

.inbox-dropdown-item {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #F5F5F5;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.inbox-dropdown-item:hover {
    background-color: #F9F9F9;
}

.inbox-dropdown-item:last-child {
    border-bottom: none;
}

.inbox-item-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F8F8F8;
    border: 1px solid #E5E5E5;
}

.inbox-item-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inbox-item-logo.figma-logo,
.inbox-item-logo.meta-logo {
    background-color: #F8F8F8;
}

.inbox-item-logo.clutch-logo img {
    width: 70%;
    height: auto;
}

.inbox-item-content {
    flex: 1;
    min-width: 0;
}

.inbox-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.inbox-item-name {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(51, 51, 51, 1);
}

.inbox-verified-icon {
    width: 14px;
    height: 14px;
}

.inbox-item-subject {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(105, 105, 105, 1);
    margin: 0 0 4px 0;
}

.inbox-item-preview {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: rgba(130, 130, 130, 1);
    margin: 0;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    width: 15%;
}

.inbox-item-time {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: rgba(130, 130, 130, 1);
}

.inbox-unread-badge {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: #7D5CA4;
    display: inline-flex;
    gap: 4px;
}

.inbox-unread-badge img {
    width: 8px;
}

.inbox-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-top: 1px solid #EAEAEA;
    background-color: #FAFAFA;
}

.inbox-mark-read-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(125, 92, 164, 1);
    cursor: pointer;
}

.inbox-mark-read-btn:hover {
    text-decoration: underline;
}

.inbox-mark-read-btn img {
    width: 16px;
    height: 16px;
}

.inbox-goto-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #7D5CA4;
    text-decoration: none;
    margin-left: auto;
}

.inbox-goto-btn:hover {
    text-decoration: underline;
    color: #61477F;
}

.inbox-goto-btn img {
    width: 16px;
    height: 16px;
}


/* ===== INBOX PAGE STYLES ===== */
.inbox-page {
    background-color: #F7F7F9;
}

.inbox-container {
    display: flex;
    border-top: 1px solid rgba(215, 215, 215, 1);
    height: calc(100vh - 100px);
    overflow: hidden;
}

/* Inbox Sidebar */
.inbox-sidebar {
    width: 390px;
    min-width: 380px;
    background-color: rgba(255, 255, 255, 1);
    border-right: 1px solid rgba(215, 215, 215, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: calc(100vh - 100px);
}

.inbox-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid #EAEAEA;
}

.inbox-title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0;
}

.inbox-tabs {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid #EAEAEA;
}

.inbox-tab {
    padding: 16px 16px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(97, 106, 121, 1);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.inbox-tab:hover {
    color: var(--text-color);
}

.inbox-tab.active {
    font-size: 16px;
    font-family: var(--SFProBold);
    color: var(--text-color);
    font-weight: 700;
}

.inbox-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #7D5CA4;
}

.inbox-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border: 1px solid rgba(229, 229, 229, 1);
    width: 350px;
    border-radius: 16px;
    justify-content: center;
    margin: 16px;
    height: 48px;
}

.inbox-search-icon {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

.inbox-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: var(--SFProRegular);
    color: var(--text-color);
    font-weight: 400;
}

.inbox-search-input::placeholder {
    color: #848484;
}

.inbox-message-list {
    flex: 1;
    overflow-y: auto;
}

.inbox-message-item {
    display: flex;
    gap: 10px;
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.inbox-message-item:hover {
    background-color: #F9F9F9;
}

.inbox-message-item.selected {
    background-color: rgba(248, 247, 250, 1);
    /* border-left: 3px solid #7D5CA4; */
}

.inbox-chat-area-container {
    display: flex;
    /* max-width: calc(100% - 390px); */
    width: 100%;
    height: calc(100vh - 100px);

}

.inbox-message-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F8F8F8;
    border: 1px solid #E5E5E5;
    position: relative;
    align-self: center;
}

.inbox-message-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    border-radius: 50%;
}

.inbox-message-logo.clutch-logo img {
    width: 60%;
    height: auto;
}

.inbox-message-content {
    flex: 1;
    min-width: 0;
}

.inbox-message-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    /* flex-wrap: wrap; */
}

.inbox-message-name {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    line-height: normal;
    white-space: nowrap;
    max-width: 115px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.inbox-status-badge {
    font-size: 10px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    border-radius: 100px;
    order: -1;
}

.inbox-status-badge.active {
    /* background-color: rgba(34, 197, 94, 0.1); */
    color: rgba(9, 178, 133, 1);
    font-size: 12px;
    font-weight: 500;
}

.inbox-status-badge.inactive {
    color: #848484;
}

.inbox-message-subject {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-message-preview {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: rgba(130, 130, 130, 1);
    margin: 0;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-message-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    flex-shrink: 0;
}

.inbox-message-time {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: rgba(130, 130, 130, 1);
}

.inbox-favorite-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inbox-favorite-btn svg {
    transition: all 0.2s ease;
}

.inbox-favorite-btn:hover svg path {
    stroke: #7D5CA4;
}


/* Chat Area */
.inbox-chat-area {
    flex: 1;
    display: flex;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-right: 1px solid #EAEAEA;
    flex: 1;
    min-width: 0;
    /* padding: 16px; */
    border-radius: 24px;
    margin: 16px;
    height: calc(100% - 32px);
    position: relative;
    overflow: hidden;
}

.inbox-chat-area-container {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.inbox-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #EAEAEA;
}

.inbox-chat-company {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inbox-chat-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F8F8F8;
    border: 1px solid #E5E5E5;
}

.inbox-chat-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inbox-chat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inbox-chat-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inbox-chat-name {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
}

.inbox-verified {
    width: 16px;
    height: 16px;
}

.inbox-chat-status {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
}

.inbox-chat-messages {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 70%;
}

.inbox-chat-messages.full-width {
    width: 100% !important;
}


.inbox-chat-messages-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inbox-company-details-container {
    width: 320px;
    min-width: 320px;
    padding: 16px;
    border-left: 1px solid #EAEAEA;
    overflow-y: auto;
    width: 30%;
    position: relative;
}

/* ===== INBOX SEARCH OVERLAY STYLES ===== */
.inbox-search-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 10;
    flex-direction: column;
    padding: 0;
}

.inbox-search-overlay.show {
    display: flex;
}
.inbox-search-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.inbox-search-overlay-title {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
}
.inbox-search-overlay-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.inbox-search-overlay-close:hover {
    background-color: #F5F5F5;
}

.inbox-search-overlay-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 16px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 1);
    transition: border-color 0.2s ease;
}

/* .inbox-search-overlay-input-wrapper:focus-within {
    border-color: #7D5CA4;
} */

.inbox-search-overlay-icon {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

.inbox-search-overlay-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: var(--SFProRegular);
    color: var(--text-color);
    background: transparent;
}

.inbox-search-overlay-input::placeholder {
    color: #848484;
}

.inbox-search-overlay-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0 16px;
}

.inbox-search-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 40px 20px;
}

.inbox-search-placeholder-icon {
    margin-bottom: 14px;
}

.inbox-search-placeholder-title {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0px 0 14px 0;
}

.inbox-search-placeholder-text {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(161, 161, 161, 1);
    margin: 0;
    line-height: 1.5;
    max-width: 230px;
    width: 100%;
}

.inbox-search-placeholder-text strong {
    font-size: 'Nunito Sans', sans-serif;
    color: var(--text-color);
    font-weight: 700;
}

.inbox-search-results {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.inbox-search-results.show {
    display: flex;
}

.inbox-search-results.show + .inbox-search-placeholder {
    display: none;
}

.inbox-search-result-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
}
/*
.inbox-search-result-item:hover {
    background-color: #F0F0F0;
} */

.inbox-search-result-text {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    line-height: 22px;
}

.inbox-search-result-text mark {
    background-color: rgba(125, 92, 164, 0.2);
    color: #7D5CA4;
    padding: 0 2px;
    border-radius: 2px;
}

.inbox-search-result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(124, 124, 124, 1);
}

.inbox-search-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.inbox-search-no-results-text {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: #848484;
    margin: 0;
}

/* Search highlight animation for messages */
/*.chat-message.search-highlight {*/
/*    animation: searchHighlight 2s ease;*/
/*}*/
.chat-message{
    position: relative;
}
.chat-message.received.search-highlight::before{
    content: '';
    display: block;
    width: 1000px;
    height: 100%;
    /*background-color: gray;*/
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    animation: searchHighlight 2s ease infinite;
}.chat-message.sent.search-highlight::before{
    content: '';
    display: block;
    width: 1000px;
    height: 100%;
    background-color: red;
    position: absolute;
    /* left: -60%; */
    right: 0;
    top: 0;
    z-index: 1;
    animation: searchHighlight 2s ease infinite;
}

@keyframes searchHighlight {
    0%, 30% {
        background-color: rgba(125, 92, 164, 0.15);
        border-radius: 12px;
    }
    100% {
        background-color: transparent;
    }
}

.chat-message {
    display: flex;
    gap: 12px;
    max-width: 70%;
}

.chat-message.received {
    align-self: flex-start;
    flex-direction: row-reverse;
}

.chat-message.sent {
    align-self: flex-end;
    /*flex-direction: row-reverse;*/
}

.sent-footer {
    flex-direction: row !important;
}

.chat-bubble {
    padding: 16px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Nunito Sans', sans-serif;
    line-height: 1.5;
    max-width: max-content;
    height: max-content;
}

.chat-message-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px;
    margin: -10px -10px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}
.chat-message-wrapper:hover {
    background-color: rgba(0, 0, 0, 0.02);
}
.chat-message.received .chat-bubble {
    background-color: rgba(244, 244, 244, 1);
    color: var(--text-color);
    border-top-left-radius: 1px;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-message.sent .chat-bubble {
    background-color: rgba(242, 239, 246, 1);
    color: rgba(51, 51, 51, 1);
    /*border-top-left-radius: 1px;*/
    border-top-right-radius: 1px;
    align-self: end;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-bubble p {
    margin: 0 !important;
}

.chat-image {
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
    max-width: 200px;
}

.chat-image img {
    width: 100%;
    height: auto;
    display: block;
}

.chat-message.received .chat-message-wrapper .chat-message-footer {
    align-self: start;
}

.chat-message.received .chat-message-wrapper .chat-message-footer .received-time {
    order: 0 !important;
}

.chat-message-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    /*flex-direction: row-reverse;*/
    align-self: end;
    position: relative;
    width: 100%;
}

.chat-message-actions {
    display: none;
    align-items: center;
    gap: 16px;
    margin-left: 12px;
}

.chat-message-wrapper:hover .chat-message-actions {
    display: flex;
    order: -1;
    margin-right: auto;
}

.chat-action-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    gap: 6px;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: rgba(51, 51, 51, 1);
}
.chat-action-btn img {
    width: 16px;
    height: 16px;
}

.chat-message.received .chat-message-actions .edit-btn {
    display: none !important;
}

.chat-message.received .chat-message-actions {
    margin-left: 0;
    margin-right: auto;
    order: -1;
}

.reply-pin-container {
    padding: 8px 5px;
    background: rgba(0, 0, 0, 0.02);
    gap: 4px;
    margin: 13px 17px;
    margin-bottom: 0px;
    border-radius: 8px;
}

.reply-pin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reply-pin-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--blue);
}

.reply-pin-message {
    font-size: 16px;
    font-weight: 500;
    font-family: 'Nunito Sans', sans-serif;
    color: rgba(51, 51, 51, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    flex: 1;
    margin-left: 6px;
}
.reply-pin-content{
    width: 100%;
    position: relative;
    padding-left: 10px;
}
.reply-pin-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: rgba(151, 151, 151, 1);
    border-radius: 4px;
}
.reply-pin-content.own-reply::before {
    background-color: var(--blue);
}
.close-reply-pin {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    order: 2;
}

.close-reply-pin img {
    width: 16px;
    height: 16px;
}

/* Inline Editor Styling */
.inline-editor-wrapper {
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    margin-top: 5px;
    width: 100%;
    min-width: 550px;
    max-width: 100%;
    overflow: visible; /* Changed from hidden to allow dropdowns to overflow */
}

.inline-editor-container {
    height: max-content !important;
    border: none !important;
}

.inline-editor-container .ql-editor {
    padding: 15px 20px;
    font-size: 16px;
    font-family: 'Nunito Sans', sans-serif;
    color: rgba(51, 51, 51, 1);
}

.inline-toolbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background-color: rgba(130, 130, 130, 0.1);
    border-top: 1px solid #E5E5E5;
}

.inline-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.inline-toolbar-right {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-right: 5px;
}

.inline-toolbar-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    color: #333;
    position: relative;
}
.inline-save-btn,
.inline-cancel-btn {
    width: 14px !important;
    height: 14px !important;
}

.inline-toolbar-btn img {
    width: 16px;
    height: 16px;
}

.inline-save-btn img,
.inline-cancel-btn img {
    width: 100% !important;
    height: 100% !important;
}

.inline-attachment-previews {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: #F9F9F9;
    border-top: 1px solid #E5E5E5;
}

.inline-attachment-previews.show {
    display: flex;
}

.inline-attachment-previews .attachment-preview-item {
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #E5E5E5;
}

.chat-quoted-message {
    background: rgba(242, 239, 246, 1);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    padding-left: 15px;
    cursor: pointer;
    position: relative;
}
.chat-message.received .chat-message-wrapper .chat-bubble .chat-quoted-message {
    background: rgba(231, 220, 245, 0.5);
}

.quoted-message-sender {
    display: block;
    font-weight: 700;
    font-family: 'Nunito Sans', sans-serif;
    color: var(--blue);
    font-size: 13px;
    margin-bottom: 2px;
}

.quoted-message-text {
    font-size: 16px;
    font-weight: 500;
    font-family: 'Nunito Sans', sans-serif;
    color: rgba(51, 51, 51, 1);
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}

.chat-message.sent .chat-quoted-message {
    background: rgba(0, 0, 0, 0.05);
    padding: 8px 5px;
}

.quoted-message-text::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background-color: rgba(151, 151, 151, 1);
    border-radius: 4px;
}

.chat-quoted-message.own-reply .quoted-message-text::before {
    background-color: var(--blue);
}

.chat-message.sent .chat-quoted-message .quoted-message-text {
    color: rgba(51, 51, 51, 1);
    padding-left: 12px;
    /* position: relative; */
}


.chat-time {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: #848484;
    border-right: 1px solid rgba(130, 130, 130, 1);
    padding-right: 4px;
    line-height: 0.9;
}

.received-time {
    order: 1;
}

.chat-via {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: #848484;
}
.edited-indicator {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: #848484;
    border-left: 1px solid rgba(130, 130, 130, 1);
    line-height: 0.9;
    padding-left: 10px;
}
.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F8F8F8;
}

.sent-avatar {
    order: 2;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .inbox-chat-input-area {
    padding: 16px 24px;
    border-top: 1px solid #EAEAEA;
} */

.inbox-chat-input-wrapper {
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.inbox-chat-input {
    width: 100%;
    /* padding: 24px 16px; */
    border: none !important;
    font-size: 14px;
    font-family: 'Nunito Sans', sans-serif;
    outline: none;
    transition: border-color 0.2s ease;
    border-radius: 16px;
    height: 60px !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.inbox-chat-input:focus {
    border-color: #7D5CA4;
}

.inbox-chat-input .ql-editor {
    padding: 16px 16px !important;
}

.inbox-chat-input .ql-editor p {
    font-size: 16px !important;
    font-family: var(--SFProMedium) !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
}

.inbox-chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    background-color: rgba(130, 130, 130, 0.1);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    flex-wrap: wrap;
}

.inbox-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inbox-toolbar-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
    transition: all 0.2s ease;
}

/* .inbox-toolbar-btn:hover {
    background-color: #F5F5F5;
    border-color: #7D5CA4;
} */

.inbox-toolbar-btn img {
    width: 16px;
    height: 16px;
}
.counter-send-btn{
    display: flex;
    align-items: center;
    justify-content: center;
}
.inbox-send-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    border-left: 1px solid rgba(229, 229, 229, 1);
    border-bottom-right-radius: 16px;
}


/* Details Panel */
.inbox-details-panel {
    width: 320px;
    min-width: 320px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.inbox-details-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    /* padding: 16px 24px; */
    /* border-bottom: 1px solid #EAEAEA; */
}

.inbox-search-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    cursor: pointer;
}

.inbox-search-btn img {
    width: 16px;
    height: 16px;
}

.inbox-hide-details-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: none;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    height: 48px;
}

.inbox-hide-details-btn:hover {
    border-color: #7D5CA4;
}

.inbox-hide-details-btn img {
    width: 24px;
    height: 24px;
}

.inbox-favorite-large-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    cursor: pointer;
}

.inbox-favorite-large-btn:hover {
    border-color: #7D5CA4;
}

.inbox-company-details {
    border-bottom: 1px solid #EAEAEA;
}

.inbox-company-logo-large {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F8F8F8;
    border: 1px solid #E5E5E5;
    margin-bottom: 16px;
}

.inbox-company-logo-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inbox-company-name-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}

.inbox-company-name-large {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(125, 92, 164, 1);
    text-decoration: underline;
}

.inbox-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(9, 178, 133, 1);
    background-color: rgba(12, 198, 185, 0.1);
    border-radius: 100px;
    padding: 8px 12px;
}

.inbox-verified-badge img {
    width: 16px;
    height: 16px;
}

.inbox-company-rating {
    padding: 16px 0px;
    border-top: 1px solid rgba(229, 229, 229, 1);
}

.inbox-rating-label {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
    display: block;
    margin-bottom: 12px;
}

.inbox-rating-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 15px;
}

.inbox-rating-stars img {
    width: 18px;
    height: 18px;
}

.chatting {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Scrollbar for chatting */
.chatting::-webkit-scrollbar {
    width: 4px;
}

.chatting::-webkit-scrollbar-track {
    background: transparent;
}

.chatting::-webkit-scrollbar-thumb {
    background-color: rgba(217, 217, 217, 1);
    border-radius: 10px;
}

.inbox-chat-input-area {
    /* padding-top: 16px; */
    background: #fff;
    width: 100%;
    border: 1px solid rgba(229, 229, 229, 1);
    margin: 16px;
    border-radius: 16px;
    max-width: 1020px;
    width: calc(100% - 32px);
}

.inbox-service-tag.hidden {
    display: none;
}

/* Emoji Picker Mockup */
.emoji-picker-container {
    position: relative;
    display: flex;
}

.emoji-picker-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    z-index: 100;
}

.emoji-picker-popup.show {
    display: grid;
}

.emoji-item {
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.emoji-item:hover {
    background: #f0f0f0;
}

/* Attachment Previews */
.attachment-previews-container {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    background: #f9f9f9;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom: 1px solid #eee;
}

.attachment-previews-container.show {
    display: flex;
}

.attachment-preview-item {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 1px solid #ddd;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-preview-item .file-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px;
}

.attachment-preview-item .remove-attachment {
    position: absolute;
    top: -6px;
    right: -5px;
    width: 16px;
    height: 16px;
    background: #ff4d4d;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.file-icon-placeholder {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

/* Chat Attachments */
.chat-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.chat-file-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-color);
    text-decoration: none;
}

.chat-file-link img {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.chat-file-link:hover {
    background: rgba(0, 0, 0, 0.1);
}

.inbox-rating-value {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin-left: 12px;
}

.inbox-reviews-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inbox-reviews-count {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.inbox-last-rated {
    font-size: 16px;
    font-weight: 500;
    font-family: 'Nunito Sans', sans-serif;
    color: #848484;
}

.inbox-details-tabs {
    display: flex;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.inbox-details-tab {
    flex: 1;
    padding: 16px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(97, 106, 121, 1);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
    position: relative;
}
.count-files{
    position: absolute;
}
.inbox-details-tab:hover {
    color: var(--text-color);
}

.inbox-details-tab.active {
    color: var(--text-color);
    font-size: 16px;
    font-family: var(--SFProBold);
    font-weight: 700;
}

.inbox-details-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #7D5CA4;
}

.inbox-details-content {
    /* padding-top: 16px; */
    display: none;
}

.inbox-details-content.active {
    display: block;
}

.inbox-detail-section {
    margin-bottom: 24px;
    margin-top: 16px;
}

.inbox-detail-section:last-child {
    margin-bottom: 0;
}

.inbox-detail-label {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
    margin: 0 0 12px 0;
}

.inbox-detail-value {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
}

.inbox-services-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inbox-service-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background-color: rgba(124, 192, 212, 0.1);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(90, 146, 162, 1);
}

.inbox-service-tag.highlighted {
    background-color: rgba(240, 248, 250, 1);
    color: rgba(88, 1, 181, 1);
    border: 1px solid rgba(15, 0, 53, 1);
}

.inbox-service-tag img {
    width: 16px;
    height: 16px;
}

.inbox-show-more-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(90, 146, 162, 1);
    cursor: pointer;
}

.inbox-show-more-btn:hover {
    text-decoration: underline;
}

.unread-message {
    border: 1.5px solid rgba(125, 92, 164, 1) !important;
    position: relative;
}

.purple-dot {
    position: absolute;
    top: -3px;
    right: 0px;
    width: 13px !important;
    height: 13px !important;
}

.inbox-empty {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(105, 105, 105, 1);
    padding: 14px;
}

.inbox-empty p {
    margin-bottom: 0px !important;
}


/* ============================================================
   PAID PLANS / RANKING CSS
   ============================================================ */

/* Paid Ranking Content Container */
.paid-ranking-content {
    padding: 0 !important;
}

/* Paid Ranking Tabs */
.paid-ranking-tabs {
    display: flex;
    gap: 48px;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 28px;
}

.paid-ranking-tab {
    padding: 16px 0px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #848484;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.paid-ranking-tab:hover {
    color: var(--text-color);
}

.paid-ranking-tab.active {
    color: var(--text-color);
    font-weight: 700;
    font-family: var(--SFProBold);
}

.paid-ranking-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #7D5CA4;
    border-radius: 3px 3px 0 0;
}

/* Tab Content */
.paid-ranking-tab-content {
    display: none;
    /* padding: 0 32px 32px; */
}

.paid-ranking-tab-content.active {
    display: block;
}

/* Ranking Plan Header */
.ranking-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(249, 251, 252, 1);
    border-radius: 16px;
    margin-bottom: 16px;
    margin-left: -24px;
    margin-right: -24px;
    margin-top: -14px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    padding: 14px 24px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ranking-plan-info {
    flex: 1;
}

.ranking-plan-title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0 0 4px 0;
}

.ranking-plan-subtitle {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
    margin: 0;
}

.ranking-plan-subtitle span {
    font-weight: 700;
    font-family: var(--SFProBold);
}

.ranking-plan-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ranking-plan-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.ranking-plan-price .price-amount {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
}

.ranking-plan-price .price-period {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
}

.ranking-btn {
    width: 236px;
}

/* Overview Section */
.ranking-overview-section {
    margin-bottom: 60px;
}

.ranking-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ranking-overview-title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0;
}

.ranking-period-select .select2-container--default .selection {
    width: 295px;
    display: inline-block;
}

.ranking-period-select .select2-container {
    min-width: 160px;
}

.ranking-period-select .select2-container--default .select2-selection--single {
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 32px;
    height: 56px;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 1);
    max-width: 295px !important;
}

.ranking-period-select .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(113, 115, 118, 1);
    padding-left: 6px;
}

.ranking-period-select .select2 .selection .select2-selection {
    border-radius: 32px !important;
}

.ranking-period-select .select2 .selection .select2-selection:focus {
    border-radius: 32px !important;
}

.ranking-period-select .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-radius: 32px !important;
}

.ranking-period-select .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
    right: 20px;
    top: 8px !important;
}

.ranking-select2-dropdown {
    max-width: 295px !important;
    min-width: 295px !important;
}

.ranking-select2-dropdown .select2-results ul li:hover {
    background-color: rgba(248, 247, 250, 1) !important;
}

/* Stats Grid */
.ranking-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ranking-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    height: 140px;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: rgba(169, 145, 230, 0.2);
}

/* .stat-icon.services-icon {
    background-color: rgba(169, 145, 230, 0.2);
}

.stat-icon.industries-icon {
    background-color: rgba(125, 92, 164, 0.15);
}

.stat-icon.impressions-icon {
    background-color: rgba(255, 193, 7, 0.15);
}

.stat-icon.clicks-icon {
    background-color: rgba(233, 30, 99, 0.15);
} */

.stat-icon img {
    width: 24px;
    height: 24px;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
}

.ranking-hr {
    color: rgba(229, 229, 229, 1);
    margin: 1rem -24px !important;
    opacity: 1 !important;
}

/* Ranking Tables */
.ranking-table-section {
    margin-bottom: 32px;
    margin-top: 27px;
}

.ranking-table-title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0 0 24px 0;
}

.ranking-table-wrapper {
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 12px;
    overflow: hidden;
}

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

.ranking-table thead {
    background-color: rgba(249, 251, 252, 1);
}

.ranking-table th {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(78, 78, 78, 1);
    text-align: left;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.ranking-table td {
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    border-bottom: 1px solid #E5E5E5;
}

.ranking-table tbody tr td:last-child {
    text-align: right;
}
#billing-invoices td.dataTables_empty {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(97, 106, 121, 1);
    text-align: center !important;
}

.ranking-table tbody tr:last-child td {
    border-bottom: none;
}

.ranking-table tbody tr:hover {
    background-color: #F8F9FA;
}

/* Service Name Cell */
.service-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-icon,
.industry-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 100px;

}

.service-icon {
    background-color: rgba(110, 193, 228, 0.2);
}

.industry-icon {
    background-color: rgba(169, 145, 230, 0.2);
}

/* .service-icon.purple,
.industry-icon.purple {
    background-color: rgba(110, 193, 228, 0.2);
} */

/* .service-icon.pink {
    background-color: rgba(233, 30, 99, 0.15);
}

.service-icon.blue,
.industry-icon.blue {
    background-color: rgba(33, 150, 243, 0.15);
} */

/* .service-icon.orange,
.industry-icon.orange {
    background-color: rgba(255, 152, 0, 0.15);
}

.service-icon.purple-light {
    background-color: rgba(156, 39, 176, 0.15);
}

.service-icon.blue-dark {
    background-color: rgba(63, 81, 181, 0.15);
}

.industry-icon.green {
    background-color: rgba(76, 175, 80, 0.15);
} */

.service-icon img,
.industry-icon img {
    width: 18px;
    height: 18px;
}

.service-name-text {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
}

.expand-icon {
    margin-top: 4px;
}

/* Remove Button */
.btn-remove {
    padding: 11px 24px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-right: 12px;
}

.btn-remove:hover {
    border-color: #DC3545;
    color: #DC3545;
}

.ranking-table th:first-child,
.ranking-table td:first-child {
    width: 30%;
}

.ranking-table th:not(:first-child),
.ranking-table td:not(:first-child) {
    padding: 16px 0 !important;
    width: 18%;
}

/* Industries Table Adjustments */
.industries-table th:first-child,
.industries-table td:first-child {
    width: 30%;
}

.industries-table th:not(:first-child),
.industries-table td:not(:first-child) {
    padding: 16px 0 !important;
}

/* Payment Method Section */
.payment-method-section {
    margin-top: 32px;
}

.payment-method-title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0 0 22px 0;
}

.payment-method-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-card-info {
    display: flex;
    align-items: center;
    gap: 16px;

}

.card-brand {
    padding: 0px 14px;
    background-color: rgba(252, 252, 252, 1);
    border-radius: 6px;
    border: 2px solid rgba(203, 203, 203, 1);
}

.card-brand img {
    height: 44px;
    width: auto;
}

.card-number {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.card-dots {
    color: rgba(102, 101, 109, 1);
    letter-spacing: 2px;
}

.card-last-four {
    font-family: 'Eudoxus Sans', 'Inter', sans-serif;
    letter-spacing: 2px;
}

.btn-change-payment {
    padding: 11px 24px;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-change-payment:hover {
    border-color: #7D5CA4;
    color: #7D5CA4;
}

/* Past Invoices Section */
.past-invoices-section {
    padding-top: 14px;
}

.invoice-header {
    margin-bottom: 24px;
}

.invoice-filters {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.invoice-filters .filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invoice-filters .filter-group label {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
}

.date-input-wrapper {
    position: relative;
    width: 200px;
}

.date-input-wrapper input {
    width: 100%;
    height: 56px;
    padding: 8px 16px;
    padding-right: 48px;
    background-color: #FFFFFF;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 32px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(113, 115, 118, 1);
    outline: none;
}

.date-input-wrapper .calendar-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.invoice-results-info {
    margin-bottom: 24px;
}

.past-invoices-table th,
.past-invoices-table td {
    width: auto !important;
}

.past-invoices-table th,
.past-invoices-table td {
    width: 25% !important;
}

.invoice-id {
    font-weight: 700;
    font-family: var(--SFProBold);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 24px;
    border-radius: 67px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.status-badge.paid {
    background-color: rgba(3, 175, 159, 0.1);
    color: rgba(51, 51, 51, 1);
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.status-badge.paid .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #09B285;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: #FFFFFF;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 12px;
}

.btn-download:hover {
    border-color: #7D5CA4;
    color: #7D5CA4;
}

.btn-download img {
    width: 16px;
    height: 16px;
}

/* Custom Skin for jQuery UI Datepicker */
.ui-datepicker {
    background: #ffffff;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    font-family: 'Nunito Sans', sans-serif;
    padding: 16px;
    width: 300px !important;
    z-index: 1000 !important;
}

.ui-datepicker .ui-datepicker-header {
    background: transparent;
    border: none;
    padding: 0 0 16px 0;
}

.ui-datepicker .ui-datepicker-title {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: #F8F9FA;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    cursor: pointer;
    top: 14px !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: #f0f0f0;
}

.ui-datepicker .ui-datepicker-prev {
    left: 16px !important;
}

.ui-datepicker .ui-datepicker-next {
    right: 16px !important;
}

.ui-datepicker .ui-icon {
    display: none;
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #848484;
    border-right: 2px solid #848484;
    position: absolute;
    top: 50%;
    left: 50%;
}

.ui-datepicker .ui-datepicker-prev::after {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.ui-datepicker .ui-datepicker-next::after {
    transform: translate(-70%, -50%) rotate(45deg);
}

.ui-datepicker table {
    margin: 0;
}

.ui-datepicker th {
    color: #848484;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 0;
}

.ui-datepicker td {
    padding: 2px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    border: none !important;
    border-radius: 8px;
    color: var(--text-color) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 8px !important;
    text-align: center !important;
    transition: all 0.2s ease;
}

.ui-datepicker td a:hover {
    background: rgba(125, 92, 164, 0.1) !important;
    color: #7D5CA4 !important;
}

.ui-datepicker .ui-state-highlight {
    background: rgba(125, 92, 164, 0.05) !important;
    color: #7D5CA4 !important;
}

.ui-datepicker .ui-state-active {
    background: #7D5CA4 !important;
    color: #ffffff !important;
}

/* Hide the default jQuery UI icons background */
.ui-widget-header .ui-icon {
    background-image: none !important;
}

/* Past Invoices Placeholder */
.past-invoices-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    background-color: #F8F9FA;
    border-radius: 16px;
    font-size: 16px;
    color: #848484;
}

/* Profile Dropdown for Paid Ranking */
.profile {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.profile .profile-wrapper {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    padding: 8px;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
}

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

.profile .profile-wrapper .item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    text-decoration: none;
    border-radius: 12px;
    transition: background-color 0.2s ease;
}

.profile .profile-wrapper .item:hover {
    background-color: #F8F9FA;
}

.profile .profile-wrapper .item.border {
    border-bottom: 1px solid #E5E5E5;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-radius: 12px 12px 0 0;
}

.profile .profile-wrapper .item img {
    width: 20px;
    height: 20px;
}

.profile .text {
    font-size: 14px;
    font-weight: 600;
    font-family: var(--SFProBold);
    color: var(--text-color);
}

.profile .sub-text {
    font-size: 12px;
    font-weight: 400;
    font-family: 'Nunito Sans', sans-serif;
    color: #848484;
    margin-top: -4px;
}

.profile .admin-info .sub-text {
    font-size: 16px !important;
    font-weight: 500 !important;
    font-family: var(--SFProMedium) !important;
    color: rgba(130, 130, 130, 1) !important;
    margin-top: -4px !important;
    text-align: end;
}

.ranking-top-bar {
    margin-bottom: 14px !important;
}

.user-dashboard .right-container .paid-ranking-content {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    backdrop-filter: blur(24px);
    box-shadow: 0px 2px 16px 0px #00000014;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 14px 24px 32px 24px !important;
}

.profile .image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.profile .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive Styles for Paid Ranking */
@media (max-width: 1200px) {
    .ranking-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ranking-plan-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .ranking-plan-actions {
        width: 100%;
        justify-content: space-between;
    }

    .ranking-stats-grid {
        grid-template-columns: 1fr;
    }

    .ranking-table-wrapper {
        overflow-x: auto;
    }

    .ranking-table {
        min-width: 600px;
    }

    .payment-method-card {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .btn-change-payment {
        width: 100%;
    }

    .paid-ranking-tab-content {
        /* padding: 0 16px 16px; */
    }
}

/* Update Plan Page Styles */
.update-plan-actions-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.btn-back:hover {
    transform: translateX(-4px);
}

.btn-help {
    padding: 16px 24px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    font-size: 20px;
    font-weight: 500;
    color: var(--text-color);
    font-family: var(--SFProMedium);
    cursor: pointer;
}

/* .btn-help:hover {
    border-color: #7D5CA4;
    color: #7D5CA4;
} */

.update-plan-info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: rgba(249, 251, 252, 1);
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.update-plan-info-box .title {
    font-size: 24px;
    font-family: var(--SFProBold);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 4px;
}

.update-plan-info-box .subtitle {
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(130, 130, 130, 1);
    margin-bottom: 0PX !important;
}

.update-plan-info-box .pricing-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    color: rgba(130, 130, 130, 1);
    font-family: var(--SFProMedium);
    text-decoration: none;
}

/* .ranking-left {
    width: 30% !important;
}

.ranking-right {
    width: 70% !important;
} */
.ranking-left .section-label,.ranking-right .section-label{
    width: 412px;
}
.update-section {
    margin-bottom: 32px;
}

.ranking-services-section {
    padding: 46px 32px 0px 32px;
}
.ranking-industries-section {
    padding: 0px 32px;
}

.pricing-summary-section {
    padding: 0px 32px;
}
.pricing-summary-section .ranking-right{
    padding: 0;
}
.update-ranking-hr{
    margin: 1rem 32px;
    color: rgba(229, 229, 229, 1);
    opacity: 1;
}
.rank-all-checkbox {
    padding: 16px 24px;
    background: linear-gradient(0deg, #FAFAFA, #FAFAFA),
        linear-gradient(303.36deg, rgba(88, 1, 181, 0.05) 19.85%, rgba(148, 106, 255, 0) 99%);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 12px;
    margin-bottom: 20px;
}

.rank-all-checkbox .rank-box {
    margin-top: -3px !important;
}

.ranking-checkbox label,
.rank-all-checkbox label {
    font-size: 18px;
    font-weight: 500;
    font-family: "Helvetica Neue";
    color: rgba(25, 18, 33, 1);
    display: flex;
    cursor: pointer;
    gap: 4px;
}

.ranking-checkbox {
    align-items: self-start !important;
}

.ranking-checkbox .box {
    margin-top: 5px !important;
}

.ranking-checkbox label .star-icon {
    margin-top: 6px;
}

.section-label .title {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin-bottom: 10px;
}

.section-label .desc {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
}

.update-card {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    display: flex;
    min-height: 400px;
    overflow: hidden;
}

.side-tabs {
    width: 330px;
    background: #F8F9FA;
    border-right: 1px solid #E5E5E5;
    display: flex;
    flex-direction: column;
}

.side-tab {
    padding: 16px 24px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    text-align: left;
    font-size: 18px;
    font-weight: 500;
    color: rgba(78, 78, 78, 1);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    gap: 8px;
    align-items: center;
}

.side-tab.active {
    background: rgba(169, 145, 230, 0.1);
}

.side-tab .badge {
    background: #7D5CA4;
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--SFProBold);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-content-area {
    flex: 1;
    padding: 24px;
}

.select-all-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.core-service-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
    line-height: normal;
}

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

.checkbox-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.star-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.update-plan-hr {
    border: 0;
    border-top: 1px solid #E5E5E5;
    margin: 0;
    opacity: 1 !important;
}

.pricing-card {
    /* background: beige;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    padding: 24px; */
}

.pricing-wrapper {
    padding: 0px 24px;
}

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

.pricing-item.main {
    font-weight: 500;
    font-family: var(--SFProMedium);
    font-size: 18px;
    color: rgba(78, 78, 78, 1);
}

.pricing-item.sub {
    font-size: 18px;
    color: rgba(153, 153, 153, 1);
    font-family: var(--SFProRegular);
    margin-top: 16px;

}

.pricing-item.sub .label {
    margin-left: 24px;
    font-style: italic;
}

.pricing-item .value {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 18px;
    font-weight: 500;
    color: rgba(25, 18, 33, 1);
    font-family: var(--SFProRegular);
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* padding-top: 24px; */
    background-color: rgba(248, 248, 248, 1);
    margin-top: 30px;
    padding: 16px 24px;
}

.total-title {
    font-size: 24px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: var(--text-color);
}

.total-subtitle {
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(130, 130, 130, 1);
}

.total-price {
    font-size: 24px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 500;
    color: var(--text-color);
    text-align: right;
}

.total-period {
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(130, 130, 130, 1);
    text-align: right;
}

.update-plan-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding: 16px 24px;
    border-top: 1px solid rgba(229, 229, 229, 1);
}

.btn-cancel-plan {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(242, 0, 60, 1);
    text-decoration: none;
}

.right-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.btn-cancel-simple {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    border: 1px solid rgba(229, 229, 229, 1);
}

.btn-save-checkout {
    padding: 13px 24px;
    background: rgba(125, 92, 164, 1);
    border: none;
    border-radius: 10px;
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
}

.btn-save-checkout:hover {
    background: #6a4d8d;
}

@media (max-width: 992px) {
    .update-card {
        flex-direction: column;
    }

    .side-tabs {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #E5E5E5;
    }

    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}




.chat-message.company-received .chat-bubble {
    background-color: rgba(242, 239, 246, 1) !important;
    color: var(--text-color);
    border-top-right-radius: 1px;
}

.chat-message.company-sent .chat-bubble {
    background-color: rgba(247, 247, 247, 1) !important;
    color: rgba(51, 51, 51, 1);
    border-top-left-radius: 1px;
}

.company-inbox-user-details-name {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(51, 51, 51, 1);

}

.company-inbox-user-details .about .about-text {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(25, 18, 33, 1);
    display: block;
    margin-bottom: 16px;
}

.inbox-company-about-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.inbox-company-about-wrapper .user-details {
    width: 45%;
}

.inbox-toolbox-border {
    border-left: 1px solid rgba(229, 229, 229, 1);
    border-right: 1px solid rgba(229, 229, 229, 1);
}

.inbox-quick-response {
    border-right: 1px solid rgba(229, 229, 229, 1);
    border-radius: 0px !important;
    margin-left: 6px !important;
    justify-content: left !important;
}

/* Quick Response Dropdown Container */
.quick-response-dropdown-container {
    position: relative;
}

.quick-response-dropdown {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 330px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.quick-response-dropdown.show {
    display: block;
}

.quick-response-header {
    padding: 20px 14px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--SFProBold);
    color: rgba(51, 51, 51, 1);
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.quick-response-list {
    max-height: 400px;
    overflow-y: auto;
}

.quick-response-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-left: 3px solid transparent;
    margin: 8px 8px 0px 8px;
    border-radius: 8px;
}

.quick-response-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.quick-response-text {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(51, 51, 51, 1);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-response-actions {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.quick-response-item:hover .quick-response-actions {
    display: flex;
}

.quick-response-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
}

.quick-response-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.quick-response-action-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.quick-response-footer {
    border-top: 1px solid #F0F0F0;
    padding: 20px 14px;
}

.quick-response-create-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--SFProBold);
    color: rgba(51, 51, 51, 1);
}

.quick-response-create-btn:hover {
    color: #7D5CA4;
}

.quick-response-create-btn .plus-icon {
    font-size: 18px;
    font-weight: 400;
    color: inherit;
}

/* ============================================
   Quick Response Modal Styles
   ============================================ */
.quick-response-modal .modal-dialog {
    max-width: 720px;
}

.quick-response-modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.quick-response-modal-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, rgba(110, 193, 228, 0.15) 0%, rgba(125, 92, 164, 0.08) 50%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.quick-response-modal-inner {
    position: relative;
    padding: 24px 40px;
}

.quick-response-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.quick-response-modal-title {
    font-size: 56px;
    font-weight: 700;
    color: rgba(25, 18, 33, 1);
    margin: 0;
    font-family: var(--SFProBold);
}

.quick-response-modal-close {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(189, 189, 189, 0.2);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 8px;
}


.quick-response-modal-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 24px;
    background: rgba(66, 148, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 36px;
    margin-top: 16px;
}

.quick-response-info-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-response-info-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(42, 42, 42, 1);
    margin: 0;
    font-family: 'Eudoxus Sans', 'Inter', sans-serif;
}

.quick-response-modal-divider {
    height: 1px;
    background: rgba(229, 229, 229, 1);
    margin-bottom: 24px;
}

.quick-response-modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.quick-response-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-response-label {
    font-size: 20px;
    font-weight: 500;
    color: rgba(113, 115, 118, 1);
    font-family: var(--SFProMedium);
}

.quick-response-input-wrapper {
    position: relative;
}

.quick-response-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 500;
    color: rgba(25, 18, 33, 1);
    font-family: var(--SFProMedium);
    /* transition: border-color 0.2s ease, box-shadow 0.2s ease; */
}

/* .quick-response-input:focus {
    outline: none;
    border-color: #7D5CA4;
    box-shadow: 0 0 0 3px rgba(125, 92, 164, 0.1);
} */

.quick-response-input::placeholder {
    color: #9A9A9A;
}

.quick-response-textarea-wrapper {
    position: relative;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    overflow: hidden;
    /* transition: border-color 0.2s ease, box-shadow 0.2s ease; */
}

/* .quick-response-textarea-wrapper:focus-within {
    border-color: #7D5CA4;
    box-shadow: 0 0 0 3px rgba(125, 92, 164, 0.1);
} */

.quick-response-textarea-icon {
    position: absolute;
    top: 14px;
    left: 16px;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.quick-response-textarea {
    width: 100%;
    padding: 14px 16px 14px 52px;
    border: none;
    font-size: 20px;
    font-weight: 500;
    color: rgba(25, 18, 33, 1);
    font-family: var(--SFProMedium);
    resize: none;
    min-height: 240px;
}

.quick-response-textarea:focus {
    outline: none;
}

/* .quick-response-textarea::placeholder {
    color: #9A9A9A; */
/* } */

.quick-response-modal-footer {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.quick-response-btn-cancel,
.quick-response-btn-save {
    flex: 1;
    padding: 12px 24px;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 500;
    color: rgba(25, 18, 33, 1);
    font-family: var(--SFProMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-response-btn-cancel {
    background: #fff;
    border: 1px solid rgba(229, 229, 229, 1);
    color: rgba(25, 18, 33, 1);
}

.quick-response-btn-cancel:hover {
    background: #F5F5F5;
    border-color: #D5D5D5;
}

.quick-response-btn-save {
    background: rgba(125, 92, 164, 1);
    border: none;
    color: rgba(255, 255, 255, 1);
}

.quick-response-btn-save:hover {
    background: #6A4E8C;
}

/* review modal css  */
.review-profile {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.star-rating-input {
    display: flex;
    gap: 12px;
    align-items: center;
}

.star-btn {
    width: 48px;
    height: 48px;
    border: 1px solid #E5E5E5;
    background-color: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.star-rating-input .star-btn:hover,
.star-rating-input .star-btn.active,
.star-rating-input .star-btn.hovered {
    border-color: #7D5CA4;
    background-color: rgba(125, 92, 164, 0.1);
}

.star-rating-input .star-btn.active svg path,
.star-rating-input .star-btn.hovered svg path {
    fill: #7D5CA4;
    stroke: #7D5CA4;
}

.photo-upload-area {
    border: 2px dashed #E5E5E5;
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.photo-upload-area:hover,
.photo-upload-area.dragover {
    border-color: #7D5CA4;
    background-color: rgba(125, 92, 164, 0.02);
}

.photo-upload-area .upload-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 16px;
}

.photo-upload-area .upload-subtext {
    font-size: 14px;
    color: rgba(97, 106, 121, 1);
    margin-bottom: 16px;
    font-weight: 400;
}

.photo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.photo-preview .preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}

.photo-preview .preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview .preview-item .remove-photo {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.photo-preview .preview-item .remove-photo:hover {
    background-color: rgba(220, 53, 69, 0.9);
}

.photo-preview .preview-item .remove-photo svg {
    width: 12px;
    height: 12px;
}

#review-company-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#review-company-logo.no-logo {
    background-color: #6EC1E433;
}

.review-select {
    max-width: max-content !important;
}



.pro-company-banner {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
.pro-company-banner img{
    object-fit: cover;
    width: 100%;
    max-height: 400px;
}

.pro-company-card {
    border-radius: 0px 0px 16px 16px !important;
}
.pro-comp-detail{
    width: 55% !important;
}
.pro-company-header {
    background-color: rgba(255, 255, 255, 0.95);
    margin-top: -105px !important;
    border-radius: 24px;
    padding: 32px !important;
    align-items: inherit !important;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(24px);
}
.pro-company-image {
    border: 3px solid rgba(88, 1, 181, 1);
    /* width: 24% !important; */
    height: 176 !important;
    position: relative;
    padding: 4px;
    flex-shrink: 0;
}
.comp-reviews {
    font-size: 16px;
    font-weight: 500;
    font-family: 'Nunito Sans';
    color: rgba(25, 18, 33, 1);
}
.reivews-star-average {
    font-size: 20px;
    font-weight: 500;
    font-family: 'Nunito Sans';
    color: rgba(25, 18, 33, 1);
}
.pro-comp-crown {
    position: absolute;
    width: 40px !important;
    height: 40px !important;
    top: 0px;
    right: 0px;
}
.pro-comp-right {
    width: 50%;
}
.pro-comp-right-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    margin-left: auto;
}

.pro-comp-data .verified {
    background-color: rgba(231, 247, 239, 1) !important;
}

.pro-comp-right-btns {
    display: flex;
    gap: 16px;
    justify-content: end;
    align-items: center;
}
.pro-comp-main-actions{
    display: flex;
    gap: 16px;
}
.contact-phone {
    padding: 16px !important;
    max-height: 48px !important;
    max-width: 48px !important;
}
.pro-comp-right-links {
    margin-top: 10px;
    margin-left: auto;
}
.pro-comp-links-wrapper {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    /* margin-top: 12px; */
}

.pro-comp-item {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    height: 48px;
    width: 48px;
    background: rgba(255, 255, 255, 1);
    padding: 8px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    font-family: 'Poppins', sans-serif;
}

.pro-comp-item img {
    width: 24px;
    height: 24px;
}

/* .pro-comp-data .name {
    background: linear-gradient(301.72deg, #946AFF 15%, #5801B5 88.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
} */
.comp-core-service-rel {
    width: max-content;
    margin-top: 16px;
}
.comp-core-service {
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;

    color: #5801B5;

    width: max-content;
    border: 1px solid rgba(88, 1, 181, 1);
    border-radius: 8px;

    background: rgba(240, 248, 250, 1);
    margin-bottom: 16px;
}
/* Pro Company Services Accordion */
.pro-comp-services-accordion {
    border-radius: 12px;
    overflow: hidden;
    margin-top: 16px;
}

.pro-comp-accordion-item {
    border-bottom: 1px solid #E5E5E5;
}

.pro-comp-accordion-item:last-child {
    /* border-bottom: none; */
}

.pro-comp-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0px;
    cursor: pointer;
    background-color: #FFFFFF;
    transition: background-color 0.3s ease;
}

/* .pro-comp-accordion-header:hover {
    background-color: #F8F9FA;
} */

.pro-comp-accordion-header .left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pro-comp-accordion-header .category-name {
    font-family: var(--SFProMedium);
    font-size: 20px;
    font-weight: 500;
    color: var(--text-color);
}

.pro-comp-count-badge {
    background-color: rgba(125, 92, 164, 1);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    font-family: var(--SFProBold);
}

.pro-comp-accordion-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
    margin-right: 20px;
}

.pro-comp-accordion-item.active .pro-comp-accordion-icon {
    transform: rotate(180deg);
}

.pro-comp-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out, padding-bottom 0.4s ease-out;
    background-color: #FFFFFF;
    padding: 0 24px 0 24px;
    overflow: hidden;
}

.pro-comp-accordion-item.active .pro-comp-accordion-content {
    grid-template-rows: 1fr;
    padding-bottom: 24px;
}

.pro-comp-services-grid {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 10px;
}

.pro-comp-service-item {
    display: flex;
    align-items: center;
    gap: 16px;
    /* width: calc(50% - 10px); */
    border-radius: 12px;
    transition: background-color 0.2s ease;
    width: max-content;
}

.pro-comp-service-item:hover {
    background-color: #F8F9FA;
}

.pro-comp-icon-box {
    width: 56px;
    height: 56px;
    background-color: #E8F5F8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.pro-comp-service-item .pro-comp-icon-box span {
    color: rgba(90, 146, 162, 1);
}

.pro-comp-icon-box img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.pro-comp-service-item span {
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7CC0D41A;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #5A92A2;
    gap: 8px;
}
.address-card {
    /* display: flex; */
    max-width: 237px;
    width: 100%;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    padding: 16px;
    padding-bottom: 12px;
}
.address-card-wrapper {
    display: flex;
    /* align-items: center; */
    gap: 15px;
    flex-direction: column;
}
.flag-text {
    display: flex;
    align-items: center;
    gap: 12px;
}
.flag-text img {
    width: 32px !important;
    height: 24px;
    object-fit: cover;
}
.flag-text h3 {
    font-size: 18px;
    font-weight: 500;
    font-family: "Helvetica Neue";
    margin: 0;
}
.address-text{
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: rgba(109, 109, 109, 1);
}

/* Horizontal Address Carousel with Peek */
.address-title-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.address-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
    padding: 0 5px;
}

.address-nav .button {
    /* width: 40px; */
    /* height: 40px; */
    /* border-radius: 50%; */
    border: none;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
}
.address-nav .button img{
    width: 10px;
}
.address-prev {
    position: absolute;
    left: -24px;   /* adjust as needed */
}
.address-next {
    position: absolute;
    right: 15px;
}

/* .address-nav .button:hover {
    background: #f8f8f8;
    border-color: #d0d0d0;
} */

.address-carousel-wrapper {
    position: relative;
    overflow: visible;
}

.address-carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 150px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) -100%, rgba(255, 255, 255, 1) 50%);
    pointer-events: none;
    z-index: 2;
}

.address-carousel.owl-carousel .owl-stage {
    display: flex !important;
}

.address-carousel.owl-carousel .owl-item {
    display: flex;
    justify-content: center;
    /* width: 237px !important; */
}

.address-carousel.owl-carousel .address-card {
    max-width: 100%;
    margin: 0;
}
.address-carousel .owl-stage-outer .owl-stage{
    padding-left: 0 !important;
}

/* Pro Company Service Details Cards (New) */

/* Ensure equal heights for service cards in carousel */
.service-cards.owl-carousel .owl-stage {
    display: flex;
    align-items: flex-start;
    padding-left: 0 !important;
}

.service-cards.owl-carousel .owl-item {
    display: flex;
    height: auto;
}

@media (min-width: 992px) {
    .service-cards.owl-carousel .owl-item {
        /* width: 390px !important; */
    }
}

.service-details-item {
    display: flex;
    width: 100%;
}

.pro-comp-service-deatils-card {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    height: auto;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease;
    width: 100%;
}

@media (min-width: 992px) {
    .pro-comp-service-deatils-card {
        width: 390px;
    }
}

.pro-comp-service-deatils-card.is-clamped {
    max-height: 520px;
    width: 100%;
}

@media (min-width: 992px) {
    .pro-comp-service-deatils-card.is-clamped {
        width: 390px;
    }
}

.pro-comp-service-deatils-card.is-clamped .pro-comp-service-details-bottom {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.pro-comp-service-deatils-card.is-clamped .pro-comp-service-details-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
}

.pro-comp-service-deatils-card {
    transition: max-height 0.4s ease-in-out, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}

.pro-comp-service-deatils-card.is-clamped {
    max-height: 520px;
}

.pro-comp-service-deatils-card.is-expanded {
    max-height: 5000px; /* Large enough for any content */
}

.pro-comp-service-deatils-card .pro-comp-service-deatils-show-more {
    margin-top: auto;
    padding: 12px 24px 28px;
    /* border-top: 1px solid #F3F3F4; */
    display: none; /* Hidden by default, JS will show if overflow */
    justify-content: center;
    background: #fff;
    position: relative;
    z-index: 5;
}

.pro-comp-service-deatils-card .pro-comp-service-deatils-header {
    padding: 24px;
    background-color: rgba(249, 251, 252, 1);
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.pro-comp-service-details-bottom {
    /* margin-bottom: 14px; */
    padding: 0px 24px;
}

.pro-comp-service-deatils-card .pro-comp-service-deatils-title {
    font-family: var(--SFProBold);
    font-size: 24px;
    font-weight: 700;
    color: #191221;
    margin: 0;
}
.pro-comp-service-details-container {
    padding: 20px 16px;
    border-top: 1px solid #F3F3F4;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Select2 Customization for Service Details */
.pro-comp-service-deatils-dropdown-container .select2-selection--single {
    border: 1px solid #E5E5E5 !important;
    border-radius: 100px !important;
    height: 40px !important;
    padding: 6px 12px !important;
    background-color: #fff !important;
}

.pro-comp-service-deatils-dropdown-wrapper .select2 .selection .select2-selection {
    border-radius: 32px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.pro-comp-service-deatils-dropdown-wrapper .select2 {
    width: 112px !important;
}

.pro-comp-service-deatils-dropdown-wrapper .select2 .selection .select2-selection .select2-selection__arrow {
    top: 17px !important;
    width: 12px !important;
    height: 12px !important;
    right: 20px !important;
}

.pro-comp-service-deatils-dropdown-container .select2-selection__rendered {
    color: rgba(113, 115, 118, 1) !important;
    font-family: var(--SFProMedium) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    /* line-height: 26px !important; */
    padding-left: 0 !important;
}

.pro-comp-service-deatils-dropdown-open {
    min-width: 150px !important;
    max-width: 150px !important;
}

.pro-comp-service-deatils-dropdown-open .select2-dropdown {
    border: 1px solid #E5E5E5 !important;
    border-radius: 12px !important;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08) !important;
    z-index: 10001 !important;
}

.pro-comp-service-deatils-dropdown-open .select2-results__option {
    padding: 8px 16px !important;
    color: #191221 !important;
    font-family: var(--SFProMedium) !important;
    font-size: 16px !important;
}

.pro-comp-service-deatils-dropdown-open .select2-results__option--highlighted {
    background-color: rgba(125, 92, 164, 0.1) !important;
    color: rgba(125, 92, 164, 1) !important;
}

.pro-comp-service-deatils-price-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pro-comp-service-deatils-price {
    font-family: var(--SFProBold);
    font-size: 24px;
    font-weight: 700;
    color: #7D5CA4;
    line-height: 1;
}

.pro-comp-service-deatils-frequency {
    font-family: var(--SFProMedium);
    font-size: 20px;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
}
.pro-comp-service-deatils-description {
    font-family: "Nunito Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #616A79;
    line-height: 1.5;
    margin-top: 16px;
    margin-bottom: 0;
    word-wrap: break-word;
    transition: max-height 0.4s ease;
    overflow: hidden;
}
.pro-comp-service-deatils-description * {
    font-size: 20px;
    /* font-weight: inherit; */
    color: inherit;
    line-height: inherit;
    margin: 0 0 12px 0;
}
.pro-comp-service-deatils-description strong,
.pro-comp-service-deatils-description b {
    font-weight: 700;
}
.pro-comp-service-deatils-description ol {
    padding-left: 20px;
}

.pro-comp-service-deatils-description li[data-list="bullet"] {
    list-style-type: disc;
}

.pro-comp-service-deatils-description li[data-list="ordered"] {
    list-style-type: decimal;
}
.pro-comp-service-deatils-description *:last-child {
    margin-bottom: 0 !important;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 64px; /* Slight buffer for 20px * 1.5 * 2 = 60px */
}
.pro-comp-service-deatils-description:not(.line-clamp-2) {
    max-height: 2000px; /* Increased for very long descriptions */
}

.pro-comp-service-deatils-features-list {
    list-style: none;
    padding-left: 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pro-comp-service-deatils-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    color: #616A79;
    line-height: 1.4;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 500;
}

.pro-comp-service-deatils-feature-item::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #616A79;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 8px;
}

.pro-comp-service-deatils-show-more {
    margin-top: auto;
    padding: 24px;
    /* border-top: 1px solid #F3F3F4; */
    display: flex;
    justify-content: center;
}
.expand-toggle img {
    transition: transform 0.3s ease;
}
.expand-toggle[aria-expanded="true"] img {
    transform: rotate(180deg);
}

.pro-comp-service-deatils-toggle {
    color: rgba(90, 146, 162, 1);
    font-family: var(--SFProMedium);
    font-size: 20px;
    font-weight: 500;
    text-decoration: underline;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.pro-comp-service-deatils-toggle:hover {
    color: #477582 !important;
}

.pro-comp-service-deatils-toggle img {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.pro-comp-service-deatils-toggle.expanded img {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .pro-comp-service-item {
        width: 100%;
    }
}


/* Pro Company Portfolio Section */
.portfolio-section {
    margin: 28px 0px;
}

.portfolio-container {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    padding: 0px 32px;
}

.portfolio-top {
    padding: 24px 0px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.portfolio-top .title-btn {
    margin-bottom: 14px !important;
}

.portfolio-top .title-btn .title {
    font-size: 24px;
    font-family: var(--SFProBold);
    font-weight: 700;
    color: var(--text-color);
}

.portfolio-filters {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.portfolio-filters .left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.port-service-details-select2-drop{
    z-index: 998 !important;
}
/* Ensure desktop visibility for slider containers before JS initialization */
@media (min-width: 991.99px) {
    .portfolio-filters-carousel.owl-carousel,
    .review-filters-carousel.owl-carousel,
    .service-details-badges-carousel.owl-carousel {
        display: flex !important;
    }
}

.portfolio-filters .left .button.active {
    background-color: #7D5CA41A;
    border: 2px solid #7D5CA4;
}

.portfolio-filters .left .button {
    height: 40px;
    padding: 8px 24px;
    border-radius: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border: 1px solid #EAEAEA;
    background-color: transparent;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    width: max-content;
}

.portfolio-core-service {
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7CC0D41A;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #5A92A2;
    gap: 8px;
    cursor: pointer;
}

.portfolio-core-service img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.portfolio-tip {
    left: 25% !important;
    transform: translateX(-25%) !important;
}

.service-details-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    z-index: 10 !important;
}

.pro-tooltip {
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap;
}

.service-details-badges .portfolio-core-service {
    background-color: rgba(255, 255, 255, 1) !important;
    color: rgba(25, 18, 33, 1) !important;
    border-radius: 100px !important;
    padding: 10px 24px !important;
    border: 1px solid rgba(229, 229, 229, 1) !important;
}

.service-details-badges .portfolio-core-service img {
    width: 18px !important;
    height: 18px !important;
}

.service-details-badges .selected-service-detail-badge {
    background-color: rgba(125, 92, 164, 0.1) !important;
    border: 2px solid rgba(125, 92, 164, 1) !important;
}

.portfolio-core-service.active {
    background-color: #A991E61A;
    color: #7D5CA4;
}

.pro-comp-portfolio-card {
    background: #FFFFFF;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
}


.pro-comp-portfolio-card .image-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    border-radius: 16px;
}

.pro-comp-portfolio-card .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pro-comp-portfolio-card .category-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 8px 24px;
    border-radius: 8px;
    font-family: var(--SFProMedium);
    font-size: 16px;
    font-weight: 500;
    color: #7D5CA4;
}

.pro-comp-portfolio-card .category-badge span {
    color: rgba(125, 92, 164, 0.5);
}

.pro-comp-portfolio-card .content {
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pro-comp-portfolio-card .content .title {
    font-family: var(--SFProBold);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 12px;
}

.pro-comp-portfolio-card .content .description {
    font-family: "Nunito Sans", sans-serif;
    font-size: 20px;
    color: rgba(109, 109, 109, 1);
    line-height: 1.5;
    margin-top: 16px;
    margin-bottom: 0;
}
.pro-comp-portfolio-card .content .description * {
    word-wrap: break-word;
}

.portfolio-bottom {
    padding: 16px 0px;
}
.services-tagify-dropdown {
    max-width: 500px !important;
    width: 100% !important;
    z-index: 998;
}
.parent-service-tag{
    color: rgba(25, 18, 33, 0.5);
}
.view-all-link {
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(90, 146, 162, 1);
    text-decoration: underline;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    justify-content: center;
}

.pro-company-image-related {
    position: relative;
    border: 3px solid rgba(88, 1, 181, 1);
    overflow: visible !important;
    padding: 2px;
}
.pro-company-image-related:last-child {
    overflow: hidden !important;
}

.pro-comp-crown-related {
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    top: -7px;
    right: -5px;
    z-index: 10;
    overflow: clip !important;
}

.gradient-bg-pro {
    margin: -32px -32px 0 -32px;
    padding: 32px 32px 0 32px;
    border-radius: 24px 24px 0 0;
    background: rgba(88, 1, 181, 0.05)
}

/* ============================================
   Pro Company Admin Dashboard Styles
   ============================================ */

/* Pro Member Badge in Sidebar */
.pro-member-badge {
    position: absolute;
    bottom: 24px;
    left: 16px;
    right: 16px;
    background:
        linear-gradient(0deg, #FFFFFF, #FFFFFF),
        linear-gradient(104.97deg, rgba(220, 196, 152, 0.4) 2.4%, rgba(207, 178, 131, 0.4) 62.35%, rgba(201, 171, 122, 0.4) 76.22%, rgba(188, 156, 103, 0.4) 97.55%),
        linear-gradient(0deg, #FAFAFA, #FAFAFA),
        linear-gradient(303.36deg, rgba(148, 106, 255, 0) 19.85%, rgba(88, 1, 181, 0.05) 99%);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-direction: column;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
}

.pro-member-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pro-badge-icon {
    width: 36px;
    height: 24px;
}

.pro-badge-icon img {
    width: 100%;
    height: 100%;
}

.pro-badge-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pro-badge-title {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(0, 0, 0, 1);
}

.pro-badge-text {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(94, 94, 94, 1);
}

/* Pro Admin Tabs */
.pro-admin-tabs {
    display: flex;
    align-items: center;
    padding: 0;
    padding-right: 0px;
}

.pro-admin-tabs-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    border-bottom: 1px solid #E5E5E5;
    margin-right: 18px;
}
.get-pro-btn {
    display: flex;
    align-items: center;
    gap: 16px;
}
.get-pro-btn .btn-blue{
    height: 56px !important;
}
.pro-admin-tab {
    padding: 16px 20px;
    background: transparent;
    border: none;
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(97, 106, 121, 1);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: all 0.2s ease;
}

.pro-admin-tab:hover {
    color: rgba(51, 51, 51, 1);
}

.pro-admin-tab.active {
    font-family: var(--SFProBold);
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
}

.pro-admin-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(125, 92, 164, 1);
    border-radius: 2px 2px 0 0;
}
.admin-preview-btn {
    margin-left: auto;
    padding: 12px 54px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    font-size: 20px;
    font-family: var(--SFProBold);
    font-weight: 700;
    color: rgba(125, 92, 164, 1);
    cursor: pointer;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
/* Pro Admin Tab Content */
.pro-admin-content {
    padding: 8px 32px !important;
    border-radius: 16px 16px 0px 0px !important;
    margin-top: 24px !important;
    box-shadow: 0px -2px 16px 0px #00000014 !important;
}

.pro-admin-tab-content {
    display: none;
}

.pro-admin-tab-content.active {
    display: block;
}

#tab-service-details .form-item .row {
    flex-direction: column;
}

.service-details-admin-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}

.admin-service-details-title-info .label-wrapper {
    margin-bottom: 0px !important;
}

.service-details-exp-coll {
    display: flex;
    gap: 16px;
    align-items: center;
}

.service-details-exp-coll .ser-toggle-collapse-btn {
    font-size: 20px;
    font-family: var(--SFProMedium);
    color: rgba(90, 146, 162, 1);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.service-details-exp-coll .ser-toggle-collapse-btn {
    font-size: 20px;
    font-family: var(--SFProMedium);
    color: rgba(90, 146, 162, 1);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.ser-header-arrow {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.service-details-exp-coll .ser-toggle-collapse-btn .opposite-arrow,
.service-details-container-header .ser-det-header-wrapper .opposite-arrow {
    transform: rotate(180deg);
}
.localization-input{
    max-width: 100% !important;
    width: 100% !important;
}
.localization-input input{
    max-width: 100% !important;
    width: 100% !important;
    padding: 9px 0px !important;
}
.localization-input .icon{
    border-right: none !important;
}
.localization-input .icon:last-child{
    border-right: none !important;
    width: 46px !important;
    cursor: pointer;
}
#select2-country-select-container,#select2-state-select-container{
    font-size: 20px !important;
    color: var(--text-color) !important;
}
#select2-country-select-container .select2-selection__placeholder,#select2-state-select-container .select2-selection__placeholder{
    font-size: 20px !important;
    font-weight: 500 !important;
    font-family: var(--SFProMedium) !important;
    color: rgb(159, 173, 191) !important;
}
.localization-country-select2-drop,.localization-state-select2-drop{
    min-width: 450px !important;
    max-width: 450px !important;
}
.localization-country-select2-drop .select2-results__option:hover,.localization-state-select2-drop .select2-results__option:hover {
    background-color: rgba(248, 247, 250, 1) !important;
    color: rgba(25, 18, 33, 1) !important;
}
.service-details-container-header {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(231, 231, 233, 1);
    margin-bottom: 16px;
    border-radius: 16px;
}

.ser-det-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(249, 251, 252, 1);
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    padding: 16px 24px;
    border-radius: 16px 16px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ser-det-header-wrapper.collapsed {
    border-radius: 16px;
    border-bottom-color: transparent;
}

.ser-det-header-info {
    display: flex;
    gap: 16px;
    align-items: center;
}

.ser-det-header-info .title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(25, 18, 33, 1);
    margin-bottom: 0px !important;
}
.ser-det-header-info .title:hover {
    text-decoration: underline;
}
.ser-det-header-info .badge {
    padding: 8px 16px;
    border-radius: 33px;
    background-color: rgba(125, 92, 164, 0.1);
    width: max-content !important;
    font-size: 14px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    display: flex;
    align-items: center;
    color: rgba(125, 92, 164, 1);
}

.ser-det-package-count {
    padding: 4px 12px;
    border-radius: 33px;
    background-color: rgba(229, 229, 229, 0.6);
    font-size: 13px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(97, 106, 121, 1);
    white-space: nowrap;
}

.ser-det-card-btn {
    margin: 24px 16px;
}

.pro-admin-service-card-v2 .pricing-field .input-flex {
    width: 100% !important;
}

.pro-admin-service-card-v2 .service-card-header .input {
    max-width: 490px !important;
    width: 490px !important;
}

/* Pro Admin Logo Upload */
.pro-admin-logo-upload {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pro-admin-logo-upload .logo-preview {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: #F3E8FF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #E5E5E5;
}

.pro-admin-logo-upload .logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.pro-admin-logo-upload .upload-btn-wrapper {
    position: relative;
}

.pro-admin-logo-upload .upload-btn-wrapper input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.pro-admin-logo-upload .btn-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fff;
    border: 1px dashed #E5E5E5;
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--SFProMedium);
    color: #191221;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pro-admin-logo-upload .btn-upload:hover {
    border-color: #5801B5;
    color: #5801B5;
}

.pro-admin-logo-upload .btn-upload img {
    width: 20px;
    height: 20px;
}

/* Pro Admin Banner Upload */
.pro-admin-banner-upload {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pro-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(130, 130, 130, 1);
    border: 2px dashed gray;
    background-color: transparent;
}

.pro-admin-banner-upload .banner-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}

.pro-admin-banner-upload .upload-btn-wrapper {
    position: relative;
}

.remove-image-btn {
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(242, 0, 60, 0.97);
    display: flex;
    align-items: center;
    gap: 8px;
}

.remove-image-btn:hover {
    text-decoration: underline;
}

.pro-admin-banner-upload .upload-btn-wrapper input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.pro-admin-banner-upload .btn-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fff;
    border: 1px dashed #E5E5E5;
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--SFProMedium);
    color: #191221;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pro-admin-banner-upload .btn-upload:hover {
    border-color: #5801B5;
    color: #5801B5;
}

.pro-admin-banner-upload .btn-upload img {
    width: 20px;
    height: 20px;
}

.pro-admin-banner-upload .btn-remove-banner {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-family: var(--SFProMedium);
}

.pro-admin-banner-upload .banner-preview {
    width: 100%;
    height: 260px;
    border-radius: 16px;
    overflow: hidden;
    background: #F5F5F5;
}

.pro-admin-banner-upload .banner-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pro Admin Social Links */
.pro-admin-social-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pro-admin-social-links .social-input-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pro-admin-social-links .social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #F5F5F5;
}

.pro-admin-social-links .social-icon img {
    width: 100%;
    height: 100%;
}

.pro-admin-social-links .social-icon.linkedin {
    background: #E8F4FC;
}

.pro-admin-social-links .social-icon.twitter {
    background: #F0F0F0;
}

.pro-admin-social-links .social-icon.facebook {
    background: #E8F0FC;
}

.pro-admin-social-links .social-icon.instagram {
    background: #FDE8F0;
}

.pro-admin-social-links .social-icon.youtube {
    background: #FCE8E8;
}

.pro-admin-social-links .social-icon.github {
    background: #F0F0F0;
}

.pro-admin-social-links .social-icon.other {
    background: #E8F4FC;
}

.pro-admin-social-links .social-input-group .input {
    flex: 1;
    max-width: 100% !important;
}

/* Pro Admin Service Card V2 */
.pro-admin-service-card-v2 {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}
.user-dashboard .form-item .pro-admin-service-card-v2 .select2-container--default .select2-selection--single {
    display: flex;
}
.user-dashboard .form-item .pro-admin-service-card-v2 .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 11px;
}
.pro-admin-service-card-v2 .label.small {
    font-size: 20px !important;
}

.pro-admin-service-card-v2 .service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.service-card-body {
    margin-top: 24px;
}

.pro-admin-service-card-v2 .title-group {
    flex: 1;
    max-width: 400px;
}

.pro-admin-service-card-v2 .header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
}

.pro-admin-service-card-v2 .btn-remove-package {
    background: transparent;
    border: none;
    font-size: 14px;
    font-family: var(--SFProMedium);
    color: #F2003C;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 0;
}

.pro-admin-service-card-v2 .btn-remove-package img {
    width: 14px;
    height: 14px;
}

.pro-admin-service-card-v2 .toggle-collapse-btn {
    font-size: 20px;
    font-family: var(--SFProMedium);
    color: rgba(90, 146, 162, 1);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.pro-admin-service-card-v2 .toggle-collapse-btn:hover {
    text-decoration: underline;
}

.pro-admin-service-card-v2 .toggle-collapse-btn img {
    width: 12px;
    transition: transform 0.3s ease;
}

.pro-admin-service-card-v2 .toggle-collapse-btn[data-state="expanded"] img {
    transform: rotate(180deg);
}

.pro-admin-service-card-v2 .toggle-collapse-btn[data-state="collapsed"] img {
    transform: rotate(0deg);
}

.pro-admin-service-card-v2 .quill-editor {
    height: 210px;
    border-radius: 0 0 16px 16px;
    border-color: rgba(229, 229, 229, 1);
    font-size: 20px;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    font-weight: 500;
}

.pro-admin-service-card-v2 .ql-toolbar {
    border-radius: 16px 16px 0 0;
    border-color: rgba(229, 229, 229, 1);
    background: rgba(250, 250, 250, 1);
}

.pro-admin-service-card-v2 .pricing-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 24px 0px;
    border-bottom: 1px solid #F0F0F0;
    position: relative;
}

.pro-admin-service-card-v2 .pricing-field {
    flex: 1;
    min-width: 0;
    /* max-width: 195px; */
}

.pro-admin-service-card-v2 .price-max-field {
    transition: visibility 0.3s ease;
}

.pro-admin-service-card-v2 .price-max-field.hidden {
    visibility: hidden;
}

.pro-admin-service-card-v2 .price-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.pro-admin-service-card-v2 .price-input-wrapper .currency {
    position: absolute;
    left: 12px;
    color: #7D5CA4;
    font-weight: 500;
}

.pro-admin-service-card-v2 .price-input-wrapper .input {
    padding-left: 28px;
}

.pro-admin-service-card-v2 .btn-remove-pricing {
    background: transparent;
    border: none;
    cursor: pointer;
    margin-bottom: 4px;
    align-self: flex-start;
    margin-left: auto;
}

.pro-admin-service-card-v2 .btn-remove-pricing img {
    width: 20px;
    height: 20px;
}

.pricing-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: rgba(25, 18, 33, 1) !important;
    font-size: 20px !important;
}

.pro-admin-service-card-v2 .btn-add-pricing-row {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    padding: 8px 16px;
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(25, 18, 33, 1);
    cursor: pointer;
    margin-top: 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
}

.pro-admin-service-card-v2 .btn-add-pricing-row span {
    margin-right: 4px;
}

.pro-admin-service-details-right .btn-white#add-service-package-btn {
    border-style: solid;
    background: #fff;
    font-size: 20px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    height: 56px;
    color: rgba(25, 18, 33, 1);
}

/* Pro Admin Portfolio Grid */
.pro-admin-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pro-admin-portfolio-grid .portfolio-item {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #F5F5F5;
}

.pro-admin-portfolio-grid .portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pro-admin-portfolio-grid .portfolio-item .btn-remove-portfolio {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pro-admin-portfolio-grid .portfolio-item:hover .btn-remove-portfolio {
    opacity: 1;
}

.portfolio-upload {
    position: relative;
}

.portfolio-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.pro-comp-portfolio-no-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 310px;
    width: 100%;
    margin: auto;
    padding: 0 !important;
}
.no-portfolio-img {
    margin-bottom: 24px;
}
.portfolio-heading {
    font-size: 24px;
    font-family: var(--SFProBold);
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px !important;
}
.no-portfolio-text p{
    margin: 0 !important;
    font-size: 16px;
    font-family: Nunito Sans, sans-serif;
    font-weight: 500;
    text-align: center;
    margin-bottom: 24px !important;
    color: rgba(161, 161, 161, 1)
}
.portfolio-tab-row{
    height: 60vh;
}
/* Pro Admin Footer */
.pro-admin-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    padding-top: 12px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    border-top: none !important;
    padding-right: 0px !important;
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: 0 !important;
}

.pro-admin-footer .delete {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(242, 0, 60, 1);
    font-size: 20px;
    font-family: var(--SFProMedium);
    text-decoration: none;
    cursor: pointer;
}

.pro-admin-footer .delete:hover {
    text-decoration: underline;
}

.pro-admin-footer .delete img {
    width: 24px;
    height: 24px;
}

.pro-admin-footer .right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.pro-admin-footer .preview {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(125, 92, 164, 1);
    font-size: 20px;
    font-family: var(--SFProMedium);
    text-decoration: none;
    cursor: pointer;
}

.pro-admin-footer .preview:hover {
    color: #5801B5;
}

.pro-admin-footer .preview img {
    width: 18px;
    height: 18px;
}

/* Responsive adjustments for Pro Admin */
@media (max-width: 768px) {
    .pro-admin-tabs {
        padding: 0 16px;
    }

    .pro-admin-tab {
        padding: 12px 16px;
        font-size: 14px;
    }

    .pro-admin-content {
        padding: 20px 16px;
    }

    .pro-admin-logo-upload {
        flex-direction: column;
        align-items: flex-start;
    }

    .pro-admin-banner-upload .banner-actions {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .pro-admin-footer {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .pro-admin-footer .right {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pro-member-badge {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin: 24px 16px;
    }
}

/* ============================================================ */
/* Pro Admin Services Sidebar Tab System                        */
/* ============================================================ */

.pro-admin-services-card {
    display: flex;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    overflow: hidden;
}

.pro-admin-side-tabs {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    border-right: 1px solid #E5E5E5;
    background: #FAFAFA;
}

.pro-admin-side-tabs .side-tab {
    padding: 20px 24px;
    font-size: 18px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: var(--text-color);
    background: transparent;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.pro-admin-checkbox {
    align-items: self-start !important;
}

.pro-admin-checkbox .box {
    margin-top: 5px;
}

.pro-admin-side-tabs .side-tab:hover {
    background: #F0F0F0;
}

.pro-admin-side-tabs .side-tab.active {
    background: rgba(169, 145, 230, 0.1);

}

.pro-admin-side-tabs .side-tab .badge {
    background: #7D5CA4;
    color: #fff;
    font-size: 12px;
    font-family: var(--SFProMedium);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    height: 24px;
    text-align: center;
}

.pro-admin-tab-content-area {
    flex: 1;
    padding: 24px;
}

.pro-admin-tab-content-area .tab-pane {
    display: none;
}

.pro-admin-tab-content-area .tab-pane.active {
    display: block;
}

.pro-admin-tab-content-area .select-all-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pro-admin-tab-content-area .core-service-hint {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-admin-tab-content-area .core-service-hint .info-text {
    font-size: 14px;
    color: #888;
    font-family: var(--SFProRegular);
}

.pro-admin-checkbox-grid {
    /* display: flex; */
    gap: 0px !important;
}

.pro-admin-checkbox-grid .checkbox-col {
    flex: 1;
    gap: 0px !important;
}

.pro-admin-checkbox {
    cursor: pointer;
}

.pro-admin-checkbox label {
    cursor: pointer;
}

.form-item .pro-admin-comp-right-section .label:not(.pro-admin-other) {
    font-size: 18px !important;
    font-weight: 500 !important;
    font-family: "Helvetica Neue" !important;
    color: rgba(25, 18, 33, 1) !important;
    display: flex !important;
    cursor: pointer !important;
    gap: 4px !important;
}

.user-dashboard .right-container .pro-admin-content .form-item .text {
    width: 412px !important;
    line-height: 1.2 !important;
}
.user-dashboard .right-container .pro-admin-content .form-item .admin-service-details-title-info .text {
    width: 100% !important;
}
#about-editor.ql-container .ql-editor *,#description-editor.ql-container .ql-editor * {
    font-family: var(--SFProRegular) !important;
    font-size: 20px !important;
}
/* Responsive adjustments for Pro Admin Services Sidebar */
@media (max-width: 768px) {
    .pro-admin-services-card {
        flex-direction: column;
    }

    .pro-admin-side-tabs {
        flex-direction: row;
        min-width: auto;
        border-right: none;
        border-bottom: 1px solid #E5E5E5;
        overflow-x: auto;
    }

    .pro-admin-side-tabs .side-tab {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: 12px 16px;
    }

    .pro-admin-side-tabs .side-tab.active {
        border-left: none;
        border-bottom: 3px solid #7D5CA4;
    }

    .pro-admin-checkbox-grid {
        flex-direction: column;
        gap: 0;
    }
}
.no-core-service-banner .status-subtitle{
    font-size: 14px;
    font-weight: 500;
    font-family: 'Eudoxus Sans' !important;
    color: rgba(42, 42, 42, 1);
    margin-top: 6px;
}
.portfolio-name-span span {
    font-family: var(--SFProMedium);
    font-size: 16px;
    font-weight: 500px;
    color: rgba(130, 130, 130, 1)
}

.pro-admin-portfolio {
    margin-bottom: 20px !important;
}

.portfolio-content {
    background-color: transparent !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

.portfolio-edit-delete {
    position: absolute;
    display: flex;
    gap: 8px;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pro-comp-portfolio-card:hover .portfolio-edit-delete {
    opacity: 1;
}

.portfolio-ed-badge {
    height: 56px;
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
}

.portfolio-ed-badge img {
    height: 24px !important;
    width: 24px !important;
}

.pro-review-platform-services {
    display: flex;
    flex-direction: column;
}

.pro-review-platform-services .row .col-md-9 .input {
    max-width: 100%;
}

.pro-label img {
    max-height: 28px;
    width: auto !important;
}

/* ==========================================================
   Pro Company Admin – Mobile / Tablet Responsive (≤991.98px)
   Desktop layout is completely untouched.
   ========================================================== */
@media (max-width: 991.98px) {

    .user-dashboard .right-container {
        padding: 16px !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        
    }
    .user-dashboard .right-container .top-bar .left {
        justify-content: space-between;
        width: 100%;
        gap: 12px;
        flex-wrap: wrap;
    }
    .user-dashboard .right-container .top-bar .title {
        font-size: 20px;
    }
    /* ------- TAB BAR: horizontally scrollable, no scrollbar ------- */
    .pro-admin-tabs {
        flex-wrap: nowrap;
        padding: 0 16px;
        position: relative;
    }

    .pro-admin-tabs-list {
        overflow-x: auto;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* IE / Edge */
        flex-wrap: nowrap;
        margin-right: 0;
        padding-bottom: 0;
        position: relative;
    }

    .pro-admin-tabs-list::-webkit-scrollbar {
        display: none;                  /* Chrome / Safari */
    }
    .user-dashboard .right-container .content .form-item {
        padding: 16px 0px;
    }
    .user-dashboard .right-container .content #tab-contact .form-item {
        height: calc(100vh - 47vh) !important;
    }
    .user-dashboard .right-container .content .form-item .text {
        font-size: 14px;
    }
    .user-dashboard .form-item .upload-box .icon {
        height: 60px;
        width: 60px;
    }
    .remove-logo-btn-frontend {
        width: 14px;
        height: 14px;
    }
    .remove-logo-btn-frontend svg {
        width: 12px;
        height: 12px;
    }
    .user-dashboard .form-item .upload-box .upload-input {
        font-size: 14px;
        height: 40px;
        border-radius: 12px;
    }
    .user-dashboard .form-item .upload-box .upload-input img {
        width: 16px;
        height: auto;
    }
    .col-md-8 {
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .user-dashboard .form-item .btn-white {
        height: 40px;
        border-radius: 12px;
        font-size: 14px !important;
    }    
    .user-dashboard .form-item .btn-white img{
        width: 16px;
        height: auto;
    }
    .pro-admin-tab {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 12px 16px;
        font-size: 14px;
    }
    .company-admin-about-section{
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .user-dashboard .form-item .input {
        font-size: 14px;
        height: 48px;
    }
    .user-dashboard .ql-toolbar.ql-snow .ql-formats button {
        height: 40px;
        width: 40px;
    }
    .user-dashboard .ql-toolbar.ql-snow .ql-formats button svg {
        height: 18px;
        width: auto;
    }
    .ql-editor {
        word-break: break-word !important;
        padding: 8px 12px;
    }
    #about-editor.ql-container .ql-editor *, #description-editor.ql-container .ql-editor * {
        font-family: var(--SFProRegular) !important;
        font-size: 14px !important;
    }
    .ql-container.ql-snow {
        height: 180px;
    }
    .char-counter {
        font-size: 12px;
        margin-top: 6px;
    }
    /* Fade gradient on right edge hinting more tabs */
    .pro-admin-tabs::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 100%;
        background: linear-gradient(to left, #fff 20%, transparent);
        pointer-events: none;
        z-index: 2;
    }
    .admin-preview-btn {
        border-radius: 12px;
        font-size: 14px;
        height: 40px;
        align-items: center;
    }
    /* Hide Preview / Get-Pro buttons row on mobile to save space */
    .pro-admin-tabs .get-pro-btn {
        display: none;
    }   
    .responsive-get-pro-btn {
        display: flex !important;
    }

    /* ------- CONTENT AREA: add padding ------- */
    .pro-admin-content {
        padding: 16px !important;
        margin-top: 16px !important;
    }
    .company-social-links-section .row .col-md-8 {
        justify-content: space-between;
    }
    .pro-admin-social-links {
        width: 100%;
    }
    /* ------- FORM SECTIONS: stack vertically, border separator ------- */
    .pro-admin-tab-content > form > .form-item,
    .pro-admin-tab-content > .form-item {
        border-bottom: 1px solid #E5E5E5;
        padding-bottom: 20px;
        margin-bottom: 16px;
    }

    .pro-admin-tab-content > form > .form-item:last-of-type,
    .pro-admin-tab-content > .form-item:last-of-type {
        border-bottom: none;
    }

    /* Stack label column + field column vertically */
    .pro-admin-tab-content .form-item > .row > .col-md-4 {
        margin-bottom: 12px;
    }

    /* Let helper text span full width */
    .user-dashboard .right-container .pro-admin-content .form-item .text {
        width: 100% !important;
    }

    /* ------- FORM FIELDS: full-width inputs ------- */
    .pro-admin-tab-content .input,
    .pro-admin-tab-content input[type="text"],
    .pro-admin-tab-content input[type="url"],
    .pro-admin-tab-content input[type="number"],
    .pro-admin-tab-content input[type="email"],
    .pro-admin-tab-content select.input,
    .pro-admin-tab-content textarea {
        /* width: 100% !important; */
        max-width: 100% !important;
    }

    .pro-admin-service-card-v2 .service-card-header .input {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ------- COMPANY LOGO: side-by-side preview + upload ------- */
    .pro-admin-tab-content .upload-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        width: 100%;
    }
    .user-dashboard .right-container .content .form-item .label-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
        margin-bottom: 8px;
    }
    .pro-admin-tab-content .upload-box .icon {
        flex-shrink: 0;
    }

    .pro-admin-tab-content .upload-box .upload-input {
        flex: 1;
    }

    /* ------- BANNER: actions below the image ------- */
    .pro-admin-banner-upload {
        display: flex;
        flex-direction: column-reverse !important;
        gap: 16px;
        width: 100%;
    }

    .pro-admin-banner-upload .banner-actions {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
    }

    .pro-admin-banner-upload .banner-preview {
        height: 180px;
    }
    .remove-image-btn {
        font-size: 14px;
        gap: 4px;
    }
    .remove-image-btn img{
        width: 14px;
        height: auto;
    }   
    /* ------- STICKY SAVE BUTTON (footer) ------- */
    .pro-admin-footer {
        position: sticky;
        bottom: 0;
        z-index: 50;
        background: #fff !important;
        padding: 12px 16px !important;
        margin: 0 -16px;
        width: calc(100% + 32px);
        border-top: 1px solid #E5E5E5 !important;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
        flex-wrap: wrap;
        gap: 12px;
        height: 10vh !important;
    }
    .pro-admin-footer .right {
        width: 100%;
        display: flex;
        gap: 12px;
    }

    .pro-admin-footer .right .btn-blue {
        flex: 1;
        text-align: center;
        justify-content: center;
        font-family: 14px !important;
        height: 40px;
        border-radius: 12px;
    }

    .pro-admin-footer .right .btn-white {
        flex: 0 0 auto;
        flex: 1;
        font-family: 14px !important;
        height: 40px;
        border-radius: 12px;
    }

    .pro-admin-footer .delete {
        width: 100%;
        justify-content: center;
    }

    /* ------- SOCIAL LINKS ------- */
    .pro-admin-social-links .social-input-group {
        flex-direction: row;
        gap: 12px;
    }

    .pro-admin-social-links .social-input-group .input {
        flex: 1;
    }

    /* ------- SERVICES / INDUSTRIES sidebar tabs ------- */
    .pro-admin-services-card {
        flex-direction: column;
    }

    .pro-admin-side-tabs {
        flex-direction: row;
        min-width: auto;
        border-right: none;
        border-bottom: 1px solid #E5E5E5;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pro-admin-side-tabs::-webkit-scrollbar {
        display: none;
    }

    .pro-admin-side-tabs .side-tab {
        white-space: nowrap;
        padding: 12px 16px;
        font-size: 15px;
        border-bottom: 3px solid transparent;
    }

    .pro-admin-side-tabs .side-tab.active {
        border-bottom: 3px solid #7D5CA4;
    }

    .pro-admin-tab-content-area {
        padding: 16px;
    }

    .pro-admin-checkbox-grid {
        flex-direction: column;
        gap: 0;
    }

    /* ------- SERVICE DETAILS ------- */
    .service-details-admin-info {
        flex-direction: column;
        gap: 12px;
    }

    .ser-det-header-info {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ser-det-header-info .title {
        font-size: 16px;
    }

    .pricing-row {
        flex-wrap: wrap;
        padding: 16px 0px !important;
    }

    .pricing-field {
        min-width: 100% !important;
    }

    /* ------- REVIEWS TAB ------- */
    .review-icon-input > .col-md-3 {
        margin-bottom: 8px;
    }

    .input-with-btn {
        flex-direction: column;
        gap: 8px;
    }

    .input-with-btn .input {
        width: 100% !important;
    }

    .input-with-btn .btn-blue {
        width: 100%;
    }


    /* ------- PORTFOLIO TAB ------- */
    .title-btn.pro-admin-portfolio {
        align-items: flex-start !important;
        gap: 12px;
        flex-wrap: wrap;
    }

    .portfolio-tab-row {
        height: auto;
    }

    /* ------- CONTACT TAB ------- */
    .right-section .input-flex {
        flex-wrap: nowrap;
    }

    /* ------- VISIBILITY TOGGLE ------- */
    .toggle-buttons {
        width: 180px;
        height: 40px;
    }

    .toggle-buttons .button {
        font-size: 16px;
    }

    /* ------- UNLOCK BANNERS (non-pro) ------- */
    .unlock {
        padding: 16px;
    }

    .unlock-banner-top h2 {
        font-size: 18px;
    }

    .unlock-banner-bottom {
        flex-direction: column;
        gap: 12px;
    }
    .user-dashboard .right-container .content .footer .delete {
        font-size: 14px;
        border: 1px solid #E5E5E5;
        height: 40px;
        border-radius: 12px;
        /* width: max-content; */
        padding: 0 12px;
    }
    .user-dashboard .form-item .left .input-flex {
        border-radius: 14px;
        height: 48px;
    }
    .user-dashboard .form-item .left .input-flex .icon img {
        height: 18px;
        width: 18px;
    }
    .user-dashboard .form-item .input-parent .fixed-info {
        font-size: 14px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
    .user-dashboard .form-item .left .info {
        font-size: 12px;
    }
    .user-dashboard .right-container .content #tab-contact .form-item .right-section{
       width: 100%;
    }    
    .user-dashboard .right-container .content #tab-contact .form-item .right-section .left{
       flex-wrap: nowrap;
       gap: 12px;
    }
    .user-dashboard .form-item .left .input-flex .input {
        font-size: 14px;
    }
    .select-all-row {
        margin-bottom: 12px;
    }
    .custom-checkbox {
        gap: 8px;
    }    
    .pro-admin-checkbox-grid .custom-checkbox,.pro-admin-comp-right-section .custom-checkbox {
        margin-bottom: 12px !important;
    }
    .custom-checkbox .box {
        margin-top: 4px !important;
        width: 16px;
        height: 16px;
    }
    .pro-admin-comp-right-section .custom-checkbox .box {
        margin-top: 0px !important;
    }
    .custom-checkbox .box input[type="checkbox"]+.check {
        height: 16px;
        width: 16px;
    }
    .custom-checkbox .box .img {
        width: 10px;
    }
    .ranking-checkbox label, .rank-all-checkbox label {
        font-size: 16px;
        gap: 4px;
    }
    .service-details-admin-info {
        margin-bottom: 24px;
    }
    .service-details-exp-coll .ser-toggle-collapse-btn {
        font-size: 14px;
    }    
    .service-details-exp-coll .ser-toggle-collapse-btn img{
        width: 14px;
        height: 14px;
    }
    .ser-det-header-wrapper {
        padding: 12px 14px;
    }
    .ser-det-header-info .badge {
        font-size: 12px;
    }
    .ser-det-package-count {
        border-radius: 33px;
    }
    .service-details-container-header {
        margin-bottom: 12px;
    }
    .ser-det-card-btn {
        margin: 16px 12px;
    }
    .pro-admin-service-card-v2 {
        padding: 16px;
        margin-bottom: 16px;
    }
    .user-dashboard .form-item .right-section .label {
        font-size: 16px !important;
        margin-bottom: 8px;
    }
    .pro-admin-service-card-v2 .toggle-collapse-btn {
        font-size: 14px;
    }    
    .pro-admin-service-card-v2 .toggle-collapse-btn img{
        width: 14px;
        height: 14px;
    }
    .service-card-body {
        margin-top: 16px;
    }
    .user-dashboard .form-item .pro-admin-service-card-v2 .select2-container--default .select2-selection--single {
        height: 48px;
        border: 1px solid #E5E5E5 !important;
    }
    .pricing-field .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 14px !important;
    }
    .user-dashboard .form-item .pro-admin-service-card-v2 .select2-container--default .select2-selection--single .select2-selection__arrow {
       top: 13px;
    }
    .user-dashboard .form-item .error {
        font-size: 12px;
    }
    .pro-admin-service-card-v2 .btn-add-pricing-row {
        font-size: 14px;
        margin-top: 16px;
        border-radius: 12px;
    }
    .pro-admin-service-card-v2 .btn-remove-pricing {
        position: absolute;
        top: 10px;
        right: 0px;
    }
    .company-addresses-container .select2-container--default .select2-selection--single {
        height: 48px !important;
    }
    .user-dashboard .form-item .company-addresses-container .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 11px !important;
    }
    #tab-localization .row{
        flex-direction: column;
        gap: 16px;
    }
    #tab-localization .row .col-md-8 {
        width: 100% !important;
    }
    .user-dashboard .right-container .content #tab-localization .form-item .label-wrapper {
        flex-direction: row;
        gap: 12px;
    }
    #tab-localization .form-item > .row > .col-md-4 {
        width: 100% !important;
    }
    #tab-localization .location-address-wrapper .user-dashboard .form-item .select2-container {
        max-width: 100% !important;
    }
    .company-address-row .row .col-md-6 {
        width: 100% !important;
    }
    .user-dashboard #tab-localization .form-item .select2-container {
        max-width: 100%;
        width: 100% !important;
    }
    .user-dashboard .form-item .company-addresses-container .select2-container--default .select2-selection--single {
        max-width: 100%;
    }
    .row.temp-company-address-header{
        flex-direction: row !important;
    }
    .temp-company-address-header {
        justify-content: space-between;
    }
    .temp-company-address-header .col-12 {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        width: max-content !important;
    }
    .temp-company-address-header h2 {
        font-size: 16px;
    }
    .temp-company-address-header-divider {
        display: none;
    }
    .btn-remove-address {
        font-size: 14px;
        gap: 8px;
    }     
    .btn-remove-address img{
        width: 14px;
        height: 14px;
    }    
    .btn-remove-address .company-btn-span span{
        display: none;
    }
    .right-section-localization{
        width: 100%;
    }
    .localization-select2-drop {
        min-width: 70vw !important;
        width: 100% !important;
        max-width: 100% !important;
    }
   
}


.create-port {
    margin: 16px 0px;
    background-color: unset !important;
    display: unset !important;
    min-height: unset !important;
}

.port-container {
    max-width: 1440px;
    width: 100%;
    margin: 0px auto !important;
    border-radius: 16px;
    /* backdrop-filter: blur(24px); */
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
    flex: initial !important;
    padding: 0 !important;
    margin-top: 24px !important;
}

.port-top {
    padding: 32px;
    background-color: transparent !important;
}
.port-top-wrapper {
    background-color: unset !important;
    border-radius: unset !important;
    backdrop-filter: unset !important;
    box-shadow: unset !important;
    border: unset !important;
}

.port-title {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0px;
}

.port-bottom {
    padding: 16px 24px;
    border-top: 1px solid rgba(229, 229, 229, 1);
}

.port-bottom-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
}

.port-flex {
    display: flex;
    align-items: center;
    border-radius: 16px;
    border: 1px solid #E5E5E5;
    height: 56px;
    width: 230px;
    overflow: hidden;
    width: 100%;
}

.port-flex .icon {
    border-right: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
    height: 56px;
    flex-shrink: 0;
    width: 56px;
    justify-content: center;
}

.port-flex .input {
    border-radius: 0px 16px 16px 0px !important;
    max-width: 100% !important;
    width: 100% !important;
}

.port-service-details-select2-drop {
    min-width: 440px !important;
    max-width: 440px !important;
}

/* Common styling for the selection box using the custom container class */
.port-service-details-select2-container {
    display: flex !important;
}
.port-service-details-select2-container .select2-selection__rendered {
    color: #717376 !important;
    line-height: 28px;
    padding: 0 !important;
    padding-right: 0px !important;
}
.port-service-details-select2-container .select2-selection__arrow {
    right: 8px !important;
}

/* Style for the highlighted/hovered option */
.port-service-details-select2-drop .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #F5F5F7 !important;
    color: #1A1A1A !important;
}

/* Style for the currently selected option in the list */
.port-service-details-select2-drop .select2-results .select2-results__option--selected {
    background-color: #EEEEEE !important;
    color: #1A1A1A !important;
}
.select2-container--default.select2-container--open.select2-container--above .port-service-details-select2-container {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}
/* Portfolio Attachments Styles */
.port-attachments-upload-area {
    border: 2px dashed #D1D1D1;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    background-color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
}

.port-attachments-upload-area:hover,
.port-attachments-upload-area.dragover {
    border-color: var(--blue);
    background-color: rgba(125, 92, 164, 0.02);
}

.port-attachments-upload-area .upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.port-attachments-upload-area .upload-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
}

.port-attachments-upload-area .upload-icon img {
    width: 100%;
    height: 100%;
}

.port-attachments-upload-area .upload-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    font-family: var(--SFProBold);
}

.port-attachments-upload-area .upload-subtext {
    font-size: 16px;
    color: #717376;
    margin: 0;
    font-family: var(--SFProRegular);
}

.port-attachments-upload-area .btn-white {
    margin-top: 8px;
    padding: 10px 24px;
    height: auto;
    font-size: 16px;
}

.attachments-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.attachment-preview-item {
    position: relative;
    border-radius: 12px;
    overflow: visible;
    aspect-ratio: 1 / 1;
    border: 1px solid #E5E5E5;
    background: #F9FBFC;
}
.port-attachment-preview-item {
    width: auto !important;
    height: auto !important;
    cursor: pointer;
}
.attachment-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.attachment-preview-item .file-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 8px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-preview-item .remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    padding: 6px;
}

.attachment-preview-item .remove-btn:hover {
    background: #FFEDED;
}

.attachment-preview-item .remove-btn img {
    width: 12px;
    height: 12px;
}

.pdf-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 8px;
    padding: 10px;
}

.pdf-placeholder span {
    font-size: 12px;
    font-weight: 500;
    color: #717376;
    text-align: center;
}

/* ============================================================ */
/* Portfolio Modal Styles                                       */
/* ============================================================ */

.portfolio-modal-dialog {
    max-width: 600px;
    margin: 1.75rem auto;
}

.portfolio-modal-content {
    padding: 40px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    border: none;
}

.portfolio-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portfolio-modal-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.portfolio-nav-btn {
    width: 56px;
    height: 56px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
}

.portfolio-nav-btn:hover {
    background: #F5F5F5;
    border-color: #D0D0D0;
}

.portfolio-nav-counter {
    font-size: 14px;
    font-family: var(--SFProMedium);
    color: #666;
}

.portfolio-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.portfolio-right {
    transform: rotate(180deg);
}

/* .portfolio-modal-close:hover {
    background: #F5F5F5;
} */

.portfolio-modal-body {
    margin-top: 32px;
    flex: 1;
    overflow-y: auto;
    padding-right: 20px;
    /* Space for scrollbar */
    margin-right: -30px;
}

.portfolio-modal-title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 16px;
}

.portfolio-modal-title {
    font-size: 56px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0;
    flex: 1;
    min-width: 200px;
}

.portfolio-modal-actions {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.portfolio-modal-view-btn,
.portfolio-modal-contact-btn {
    font-size: 14px !important;
    padding: 10px 16px !important;
    height: auto !important;
    border-radius: 12px !important;
}

.portfolio-modal-description {
    font-size: 20px;
    font-family: Nunito Sans, sans-serif;
    font-weight: 500;
    color: rgba(109, 109, 109, 1);
    line-height: 1.6;
    margin-bottom: 20px;
}

.portfolio-modal-carousel {
    margin-bottom: 20px;
    border-radius: 16px;
    overflow: hidden;
}

.portfolio-carousel-main {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.portfolio-carousel-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.portfolio-modal-mockup {
    margin-bottom: 20px;
    border-radius: 16px;
    overflow: hidden;
    background: #F5F5F5;
}

.portfolio-modal-mockup img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.portfolio-modal-section {
    margin-bottom: 24px;
}

.portfolio-modal-section-title {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin-bottom: 24px;
}

.portfolio-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.portfolio-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #F5F5F5;
    border-radius: 20px;
    font-size: 12px;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    border: 1px solid transparent;
}

.portfolio-tag.highlighted {
    background: rgba(122, 92, 255, 0.1);
    border-color: rgba(122, 92, 255, 0.3);
    color: #7A5CFF;
}

.portfolio-tag.more-tag {
    background: #fff;
    border: 1px solid #E5E5E5;
    color: #666;
    cursor: pointer;
}

.portfolio-tag.more-tag:hover {
    background: #F5F5F5;
}

.portfolio-modal-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);

}

.portfolio-detail-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portfolio-detail-label {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
}

.portfolio-detail-value {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.portfolio-modal-contact-section {
    margin-top: 24px;
    background: radial-gradient(ellipse 250px 380px at 4% 0%, rgba(224, 197, 255, 1) 0%, transparent 50%), radial-gradient(ellipse 200px 200px at 100% 80%, rgba(176, 237, 255, 1) 0%, transparent 50%), #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 2.72px 8.16px 0px rgba(0, 0, 0, 0.12);

}

.portfolio-contact-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    gap: 24px;
}

.portfolio-contact-info {
    width: 60%;
    padding: 28px 38px;
}

.portfolio-contact-title {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin-bottom: 10px;
}

.portfolio-contact-text {
    font-size: 14px;
    font-family: Nunito Sans, sans-serif;
    color: rgba(109, 109, 109, 1);
    line-height: 1.5;
    margin-bottom: 12px;
    max-width: 430px;
}

.portfolio-contact-illustration {
    flex-shrink: 0;
    width: 40%;
}

.portfolio-contact-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Portfolio Card Click Styles */
.pro-comp-portfolio-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pro-comp-portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Responsive Styles for Portfolio Modal */
@media (max-width: 768px) {
    .portfolio-modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .portfolio-modal-content {
        max-height: calc(100vh - 1rem);
    }

    .portfolio-modal-title-section {
        flex-direction: column;
        align-items: stretch;
    }

    .portfolio-modal-actions {
        width: 100%;
    }

    .portfolio-modal-actions .btn-white,
    .portfolio-modal-actions .btn-blue {
        flex: 1;
    }

    /* .portfolio-modal-details-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    } */

    .portfolio-contact-card {
        flex-direction: column;
        text-align: center;
    }

}

/* Portfolio Modal Services & Industries Badges */
.portfolio-modal-content .services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    gap: 16px;
}

.portfolio-modal-content .services .rel {
    position: relative;
    display: flex;
    gap: 4px;
}

.portfolio-modal-content .services .service {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7CC0D41A;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #5A92A2;
    gap: 6px;
    position: relative;
}

.portfolio-modal-content .services .service img {
    width: 18px;
    height: auto;
    vertical-align: baseline !important;
}
.portfolio-modal-content #portfolio-modal-services .service.active{
    background-color: rgba(124, 192, 212, 0.1);
    color: rgba(90, 146, 162, 1);
}
.portfolio-modal-content .services .service.active {
    background-color: #A991E61A;
    color: #7D5CA4;
    font-size: 20px;
}

.portfolio-modal-content .services .service.active.bordered {
    border: 1px solid #5801B5;
    background: linear-gradient(319.48deg, #0F0035 -111.8%, #5801B5 95.12%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 20px;
    color: #7D5CA4 !important;
}

.portfolio-modal-content .services .service.active.bordered:hover {
    background: linear-gradient(0deg, #F0F8FA, #F0F8FA),
        linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03));
    color: #5801B5;
}

.portfolio-modal-content .services .service .custom-tooltip {
    width: max-content;
    background-color: #191221E5;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 6px 10px;
    position: absolute;
    z-index: 10;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--SFProBold);
    line-height: 1.2;
    display: none;
    transition: all 0.3s ease-in-out;
}

.portfolio-modal-content .services .service:hover .custom-tooltip {
    display: block;
}

.portfolio-modal-content .services .service .custom-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #191221E5 transparent;
}

.portfolio-modal-content .services .more {
    font-size: 14px;
    font-family: var(--SFProMedium);
    color: #5A92A2;
    text-decoration: underline;
    font-weight: 500;
}

.portfolio-modal-content .services .more:hover {
    color: #7D5CA4;
}

/* Portfolio Modal Gradient Background */
.portfolio-modal-content {
    position: relative;
    overflow: hidden;
}

.portfolio-modal-content .modal-gradient-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.portfolio-modal-content .portfolio-modal-header,
.portfolio-modal-content .portfolio-modal-body {
    position: relative;
    z-index: 1;
}

.pro-browse-company-image {
    border: 2px solid rgba(88, 1, 181, 1);
    position: relative;
    overflow: visible !important;
    padding: 2px;
}

.pro-browse-dot {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    height: 24px !important;
    width: 24px !important;
}

.pro-browse-comp-name{
    color: rgba(73, 2, 148, 1) !important;
}
.pro-browse-company-name {
    background: linear-gradient(301.72deg, #946AFF 15%, #5801B5 88.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.non-pro-admin-tab {
    display: flex;
    align-items: center;
    gap: 8px;
}

.non-pro-admin-tab:disabled {
    color: rgba(97, 106, 121, 0.5) !important;
}

.non-pro-admin-tab img {
    width: 18px;
    height: 12px;
}

.non-pro-admin-tab:disabled img {
    opacity: 0.5;
}

.get-pro-blue-btn {
    gap: 8px !important;
}

.get-pro-blue-btn {
    gap: 8px !important;
    width: 190px;
    /* max-height: 50px !important; */
    font-size: 20px !important;
}

.non-pro-admin-tab .custom-tooltip {
    left: 0% !important;
    right: 5% !important;
    transform: translateX(5%) !important;
    top: calc(100% + 20px) !important;
    background-color: rgba(51, 51, 51, 1) !important;
    font-family: 'Eudoxus Sans' !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 1) !important;
    padding: 12px 16px !important;
}

.non-pro-admin-tab .custom-tooltip::after {
    left: 5% !important;
    top: -45%;
    border-color: transparent transparent rgba(51, 51, 51, 1) transparent;
}

/* Locked tab styles (progressive unlock) */
.locked-admin-tab {
    display: flex;
    align-items: center;
    gap: 8px;
}

.locked-admin-tab:disabled {
    color: rgba(97, 106, 121, 0.5) !important;
    cursor: not-allowed;
    pointer-events: auto;
}

.locked-admin-tab img {
    width: 14px;
    height: 14px;
    opacity: 0.5;
}

.locked-admin-tab .custom-tooltip {
    left: 0% !important;
    right: 5% !important;
    transform: translateX(5%) !important;
    top: calc(100% + 20px) !important;
    background-color: rgba(51, 51, 51, 1) !important;
    font-family: 'Eudoxus Sans' !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 1) !important;
    padding: 12px 16px !important;
}

.locked-admin-tab .custom-tooltip::after {
    left: 5% !important;
    top: -45%;
    border-color: transparent transparent rgba(51, 51, 51, 1) transparent;
}

.unlock {
    padding: 40px 45px 24px 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 16px;
    background: linear-gradient(0deg,
            #FAFAFA 0%,
            #FAFAFA 100%),
        linear-gradient(303.36deg,
            rgba(148, 106, 255, 0) 19.85%,
            rgba(88, 1, 181, 0.05) 99%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.unlock-banner-top {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.unlock-banner-top .banner-pro-top-btn .pro-tag-title {
    color: rgba(88, 1, 181, 1) !important;
}
.banner-pro-top-btn {
    border: 1px solid rgba(88, 1, 181, 1);
    border-radius: 33px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    padding: 8px 24px;
    color: red;
    text-decoration: none;
    width: max-content;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
}

.banner-pro-top-btn img {
    width: 18px;
    height: 12px;
}

.unlock-banner-top h2 {
    font-size: 20px;
    font-weight: 500;
    font-family: 'SFProDisplayMedium';
    color: rgba(0, 0, 0, 1);
    margin-bottom: 16px;
}

.unlock-banner-top p {
    margin-bottom: 0px !important;
    font-size: 16px;
    font-weight: 500;
    font-family: 'SFProDisplayMedium';
    color: rgba(130, 130, 130, 1);
    text-align: center;
    max-width: 290px;
}

.unlock-banner-bottom {
    display: flex;
    gap: 24px;
    align-items: center;
}

.unlock-banner-bottom .banner-info {
    background-color: rgba(66, 148, 255, 0.1);
    padding: 21px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.unlock-banner-bottom .banner-info img {
    width: 24px;
    height: 24px;
}

.unlock-banner-bottom .banner-info span {
    font-family: 'Eudoxus Sans';
    color: rgba(42, 42, 42, 1);
    font-size: 14px;
    font-weight: 500px;
}

/* Pro/Non-Pro Service Details UI */
.quill-non-pro-wrapper {
    position: relative;
}

.quill-non-pro-wrapper .ql-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quill-non-pro-wrapper .ql-toolbar .ql-formats {
    opacity: 0.3;
    pointer-events: none;
    /* Disable toolbar interactions */
}

/* MODIFIED: Keep editor content area functional */
.quill-non-pro-wrapper .ql-container {
    opacity: 1;
    /* Changed from 0.5 to 1 */
    pointer-events: all;
    /* Changed from none to all */
    background-color: rgba(249, 249, 249, 0.3);
    /* Lighter background */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Ensure the editor text area is fully functional */
.quill-non-pro-wrapper .ql-editor {
    opacity: 1;
    pointer-events: all;
    cursor: text;
    background-color: transparent;
}

.quill-non-pro-toolbar-overlay {
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: 8px;
    z-index: 10;
    pointer-events: none;
    opacity: 1 !important;
    /* Ensure full visibility */
    margin-left: auto;
    /* Push to the right */
}

.quill-non-pro-toolbar-overlay .pro-unlock-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    font-family: var(--SFProMedium);
}

.quill-non-pro-toolbar-overlay .pro-unlock-msg img {
    width: 18px;
    height: 12px;
}

.btn-add-pricing-row .crown-icon {
    width: 18px;
    height: 12px;
    margin-right: 8px;
}

.get-pro-link {
    font-size: 20px;
    font-family: 'SFProDisplayMedium';
    font-weight: 500;
    color: rgba(90, 146, 162, 1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.non-pro-bg {
    background: radial-gradient(ellipse 40vw 100vh at 0% 0%, rgba(224, 197, 255, 0.4) 0%, transparent 50%), radial-gradient(ellipse 40vw 100vh at 100% 100%, rgba(176, 237, 255, 0.4) 0%, transparent 50%), #FFFFFF;
}

.get-pro-link img {
    transform: rotate(270deg);
}

/* Billing & Subscription Page Styles */
.billing-tabs {}

.billing-content {
    background-color: unset !important;
    border-radius: unset !important;
    backdrop-filter: unset !important;
    box-shadow: unset !important;
    border: unset !important;
}

.billing-tab-content {
    display: none;
}

.billing-tab-content.active {
    display: block;
}

.billing-payments-card {
    background: #FFFFFF;
    border: 1px solid rgba(231, 231, 233, 1);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
}

.billing-section {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.billing-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.billing-section-title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0;
}

.billing-section-divider {
    height: 1px;
    background: rgba(231, 231, 233, 1);
    margin: 24px 0;
}

.active-plans-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.active-plan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-right: 24px;
}

/* .active-plan-item:first-child {
    border-right: 1px solid rgba(231, 231, 233, 1);
} */

.active-plan-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.active-plan-name {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
}

.active-plan-meta {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
}
.billing-info-row,
.billing-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.billing-info-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.billing-info-name {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
}

.billing-info-email,
.billing-info-address {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
}

.payment-method-details {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-method-brand img {
    width: 44px;
    height: auto;
    display: block;
}
.payment-method-brand {
   border: 1.26px solid rgba(203, 203, 203, 1) !important;
   color: rgba(252, 252, 252, 1);
}
.payment-method-meta {
    font-size: 16px;
    font-weight: 500;
    font-family: 'Eudoxus Sans', 'Inter', sans-serif;
    letter-spacing: 3px;
    color: rgba(102, 101, 109, 1);
}
.payment-method-meta .card-dots {
    font-size: 24px;
    line-height: 0.5;
}
.payment-method-meta .card-last-four{
    line-height: 1.2;
}
.btn-outline-light {
    padding: 11px 23px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(231, 231, 233, 1);
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(51, 51, 51, 1);
}

.btn-outline-light:hover {
    background: rgba(245, 245, 245, 1);
}

.subscription-status-card {
    border: 1px solid rgba(231, 231, 233, 1);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
    /* subtle gradient overlay */
    background: linear-gradient(0deg, rgba(57, 103, 153, 0.05), rgba(57, 103, 153, 0.05)), #FFFFFF;
}


.subscription-status-info {
    display: flex;
    /* align-items: center; */
    gap: 20px;
}
.status-text{
    max-width: 440px;
}
.subscription-status-info img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(45, 156, 219, 1);
    margin-top: 6px;
    flex-shrink: 0;
}

.status-title {
    font-size: 16px;
    font-weight: 600;
    font-family: Poppins;
    color: var(--text-color);
}

.status-subtitle {
    font-size: 14px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    color: rgba(97, 106, 121, 1);
    margin-top: 6px;
}
.status-subtitle span{
    font-weight: 700;

}
.btn-restore-plan {
    padding: 10px 18px;
    border-radius: 12px;
    background: rgba(125, 92, 164, 1);
    color: #FFFFFF;
    border: none;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    width: 131px;
}

.btn-restore-plan:hover {
    background: #61477F;
}

@media (max-width: 992px) {
    .active-plans-grid {
        grid-template-columns: 1fr;
    }

    .active-plan-item {
        padding-right: 0;
        border-right: none;
    }

    .billing-info-row,
    .billing-payment-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .subscription-status-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

.selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.selection-title {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.plan-toggle {
    background: rgba(255, 255, 255, 1);
    padding: 2px 0px;
    border-radius: 32px;
    display: flex;
    gap: 2px;
}

.toggle-btn {
    padding: 8px 24px;
    border-radius: 80px;
    border: none;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(25, 18, 33, 1);
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    background: transparent;
    transition: all 0.3s ease;
}

.toggle-btn.active {
    background: rgba(125, 92, 164, 1);
    color: rgba(255, 255, 255, 1);
}

.toggle-btn.active .discount-badge {
    background: rgba(255, 255, 255, 1);
}

.discount-badge {
    background: rgba(125, 92, 164, 0.1);
    color: rgba(125, 92, 164, 1);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    padding: 4px 8px;
    border-radius: 33px;
}

.billing-plans-grid {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.billing-plan-card {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(231, 231, 233, 1);
    border-radius: 16px;
    padding: 40px 24px 38px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
    flex: 1;
}

.pro-billing-plan-card {
    background: rgb(148 106 255 / 3%);
}

.badge-pin {
    position: absolute;
    width: 12px;
    height: 12px;
}

.pin-top-l {
    top: 12px;
    left: 12px;
}

.pin-top-r {
    top: 12px;
    right: 12px;
}

.pin-bottom-l {
    bottom: 12px;
    left: 12px;
}

.pin-bottom-r {
    bottom: 12px;
    right: 12px;
}

.billing-card-top {
    display: flex;
    flex-direction: column;
}

.plan-body {
    margin: 0 auto;
}

.pro-plan-body {
    align-self: end;
}

.billing-card-top .plan-header .plan-desc {
    width: 320px;
}

.billing-plan-card.pro {
    border: 2px solid #7D5CA4;
}

.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 24px;
    border-radius: 33px;
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    border: 1px solid rgba(88, 1, 181, 1);
    margin-bottom: 10px;
    width: fit-content;
    align-items: center;
}

.pro.plan-badge {
    background: linear-gradient(319.48deg, #0F0035 -111.8%, #5801B5 95.12%);
    color: #FFFFFF;
}

.plan-name {
    font-size: 24px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    margin-bottom: 10px;
}

.plan-desc {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
}

.plan-price-group {
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

.plan-desc-price {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.plan-header {
    display: flex;
}
.plan-footer {
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 25px;
}
.plan-footer, .billing-upgrade-form{
    width: 100%;
}
.plan-price-group p {
    margin: 0px;
}

.plan-price-group .price {
    font-size: 48px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: rgba(125, 92, 164, 1);
}

.plan-price-group .price-period {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(172, 172, 172, 1);
}

.plan-features {
    list-style: none;
    padding: 0;
}

.plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(113, 115, 118, 1);
}

.btn-current-plan {
    width: 100%;
    padding: 16px;
    background: rgba(169, 145, 230, 0.1);
    border: none;
    border-radius: 16px;
    color: rgba(125, 92, 164, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    cursor: default;
}
.plan-footer .btn-cancel-plan{
    width: 30%;
    display: flex;
    border: none;
    background: none;
}
.btn-current-plan:hover {
    background: rgb(169 145 230 / 22%);
    cursor: pointers;
}

.btn-upgrade {
    width: 100%;
    padding: 16px;
    background: rgba(125, 92, 164, 1);
    border: none;
    border-radius: 16px;
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.btn-upgrade:hover {
    background: #61477F;
}

/* Compare Plans Section */
.billing-compare-section {
    border-radius: 16px;
    margin-top: 26px;
    backdrop-filter: blur(24px);
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 24px;
}

.compare-main-title {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    background: rgba(249, 251, 252, 1);
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    padding: 14px 24px;
    margin: 0;
}

.compare-plans-wrapper {
    background: #FFFFFF;
    padding: 32px 24px;
    position: relative;
    /* For pseudo-element positioning */
}

/* Row Layout using CSS Grid */
.compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    border-bottom: 1px solid rgba(231, 231, 233, 1);
}

.compare-header-row.compare-row:last-child {
    border-left: 1px solid rgba(231, 231, 233, 1);
    border-right: 1px solid rgba(231, 231, 233, 1);
}

.compare-row:first-child,
.compare-header-row {
    border-top: none;
    border-bottom: none;
}

/* Cells */
.compare-cell {
    padding: 20px 0;
}

.compare-cell.feature-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.inbox-chat-input-wrapper .inbox-chat-input .ql-editor.ql-blank::before {
    font-style: normal !important;
}

.compare-cell.plan-cell {
    /* padding: 24px; */
    padding-bottom: 0px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.compare-cell.plan-cell:hover {
    opacity: 0.9;
}

/* Active Plan Column - Unified Shadow Approach */
/* Default: highlight the Pro column (third column) */
.compare-plans-wrapper::before {
    content: '';
    position: absolute;
    top: 32px;
    bottom: 32px;
    right: 18px;
    width: calc((100% - 8px - 48px) / 3);
    border-radius: 16px;
    border: 1px solid rgba(198, 198, 198, 1);
    box-shadow: 0 0 24px 0px rgba(0, 0, 0, 0.08),
        -10px 0 20px -8px rgba(0, 0, 0, 0.12),
        10px 0 20px -8px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    z-index: 1;
    transition: right 0.3s ease, width 0.3s ease;
}

/* When Free Plan is selected, move shadow to middle column */
/* Middle column right = right-padding + column-width + gap */
/* .compare-plans-wrapper.free-plan-selected::before {
    right: calc(40px + (100% - 80px - 48px) / 3 + 24px);
    width: calc((100% - 80px - 48px) / 3);
} */

.compare-cell .plan-header-content .plan-badge {
    margin-bottom: 10px !important;
}

.compare-cell .plan-header-content .compare-plan-name {
    font-size: 24px !important;
    margin-bottom: 10px !important;
}

/* Base pro-cells: transparent, no individual shadows/borders */
.pro-cell {
    position: relative;
    z-index: 2;
    /* Above the shadow overlay */
    background: transparent;
    /* width: 500px; */
}



.compare-cell.check-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-cell.check-cell img {
    width: 24px;
    height: 24px;
}

.compare-cell.check-cell .disabled-check {
    opacity: 0.3;
    filter: grayscale(1);
}

/* Header Row */
.compare-header-row .compare-cell.feature-cell {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 24px;
}

.compare-feature-label {
    font-size: 24px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

/* Plan Header Content */
.plan-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.plan-header-content .plan-badge {
    margin-bottom: 12px;
}

.compare-desc-title {
    display: flex;
    flex-direction: column;
    width: 322px;
}

.compare-plan-name {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin-bottom: 12px;
}

.compare-plan-desc {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
    margin-bottom: 10px;
    width: 100%;
}

.plan-header-content .btn-current-plan,
.plan-header-content .btn-upgrade {
    width: 160px;
    padding: 12px 24px;
    font-size: 16px;
}

/* Feature Row Content */
.feature-title {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
}

.feature-desc {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
}

/* Plan Switcher Styles */
.compare-plan-switcher {
    display: none;
    padding: 16px 24px;
    background: #F9FBFC;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    gap: 12px;
}

.switcher-btn {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(229, 229, 229, 1);
    background: white;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    transition: all 0.3s ease;
    cursor: pointer;
}

.switcher-btn.active {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
}

/* FAQ Section */
.billing-faq-section {
    border-radius: 16px;
    /* margin-top: 40px; */
    margin-bottom: 24px;
    border-radius: 16px;
    backdrop-filter: blur(24px);
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
}

.faq-main-title {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    background: rgba(249, 251, 252, 1);
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    padding: 14px 24px;
    border-radius: 16px 16px 0px 0px;
    margin: 0px !important;
}

.faq-accordion {
    padding: 0px 24px 0px 24px;
    background: #FFFFFF;
    border-radius: 0px 0px 16px 16px;
}

.faq-item {
    background: #FFFFFF;
    overflow: hidden;
    border-bottom: 1px solid rgba(219, 219, 219, 1);
    padding: 22px 18px;
    display: flex;
    gap: 14px;
}
.faq-item:last-child {
    border-bottom: none;
}

.faq-qs-qns {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.faq-answer {
    display: none;
    color: rgba(108, 108, 108, 1);
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
}

.faq-answer p {
    margin: 0px !important;
}

.faq-item.active .faq-qs-qns .faq-answer {
    display: block;
}

/* Payment Tab Styles */
.billing-tab-content.payments {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(229, 229, 229, 1);
}

.payment-section {
    /* padding: 24px 24px 32px; */
    /*border-bottom: 1px solid rgba(229, 229, 229, 1);*/
}

.payment-section.no-border {
    border-bottom: none;
    margin: 0;
}

.payment-section-title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin-bottom: 22px;
}

.active-plans-grid {
    display: flex;
    gap: 32px;
}

.active-plans-grid > *:not(.plan-divider) {
    flex: 1;
}
.active-plan-card-wrapper{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.active-plan-card{
    flex-direction: column;
    gap: 30px;
}
.border-right-plan{
    border-right: 1px solid rgba(229, 229, 229, 1);
    padding-right: 24px;
}
.red-manage-btn {
    padding: 11px 22px !important;
    display: flex;
    gap: 10px;
    color: rgba(242, 0, 60, 1) !important;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    font-family: 'SFProDisplayMedium';
}
.active-plan-card, .active-plan-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.plan-info .plan-title {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0 0 12px 0;
}

.plan-info .plan-details, .user-details .user-email {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(101, 101, 101, 1);
    margin: 0;
}

.plan-info .plan-details span {
    margin: 0 8px;
    color: rgba(229, 229, 229, 1);
}

.plan-divider {
    width: 1px;
    height: 48px;
    background-color: rgba(229, 229, 229, 1);
}

.btn-manage-plan, .btn-change-info, .btn-change-method {
    padding: 11px 32px;
    border-radius: 12px;
    border: 1px solid rgba(229, 229, 229, 1);
    background: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-manage-plan:hover, .btn-change-info:hover, .btn-change-method:hover {
    background: #f8f8f8;
    border-color: #d1d1d1;
}

.billing-info-content, .payment-method-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-details .user-name {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin: 0 0 4px 0;
}

.card-display {
    display: flex;
    align-items: center;
    gap: 16px;
}

.card-icon {
    width: 64px;
    height: 40px;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
}

.card-icon img {
    height: 18px;
}

.card-number {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--SFProMedium);
    font-size: 18px;
    color: rgba(101, 101, 101, 1);
}

.card-number .dots {
    letter-spacing: 2px;
    font-size: 24px;
    line-height: 1;
    position: relative;
    top: 4px;
}

.card-number .last-four {
    color: var(--text-color);
    font-family: var(--SFProMedium);
}

/* Invoice Tab Styles (with billing- prefix) */
.billing-past-invoices-section {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    backdrop-filter: blur(24px);
    box-shadow: 0px 2px 16px 0px #00000014;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 14px 24px 32px 24px !important;
}

.billing-invoice-header {
    margin-bottom: 32px;
    padding: 18px 24px !important;
}
table.dataTable.ranking-table {
    border-bottom: 1px solid rgba(229, 229, 229, 1) !important;
}
table.dataTable thead th, table.ranking-table thead td {
    border-bottom: 1px solid rgba(229, 229, 229, 1) !important;
}
/* ========================================
   Dashboard Header Navigation Styles
   ======================================== */

/* Layout Override for Header Nav Layout */
.user-dashboard.header-nav-layout {
    flex-direction: column;
}

.user-dashboard.header-nav-layout .right-container.header-nav-content {
    margin-left: 0;
    padding-top: 32px;
}

/* Header Navigation Bar */
.dashboard-header-nav {
    width: 100%;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
}

.header-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 48px;
    max-width: 100%;
    gap: 30px;
}

/* Logo */
.header-nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-nav-logo img {
    /* height: 32px; */
    width: 140px;
}

/* Navigation Links */
.header-nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-start;
    margin-left: 40px;
}

.header-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(25, 18, 33, 1);
    text-decoration: none;
    position: relative;
}

.header-nav-item:hover {
    color: rgba(125, 92, 164, 1);
}

.header-nav-item.active {
    background-color: transparent;
    color: rgba(125, 92, 164, 1);
}

.header-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: rgba(125, 92, 164, 1);
    border-radius: 80px 80px 0 0;
}

.header-nav-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.header-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.header-nav-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Right Section */
.header-nav-right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

/* Notification Icons */
.header-nav-notifications {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #F5F5F5;
    transition: all 0.2s ease;
    position: relative;
}

.notification-icon:hover {
    background-color: #EBEBEB;
}

.notification-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.notification-icon.has-badge .notification-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: #FF4444;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
}

/* User Profile in Header */
.header-nav-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 6px 12px 6px 16px;
    border-radius: 50px;
    background-color: #F9F9F9;
    transition: all 0.2s ease;
}

.header-nav-profile:hover {
    background-color: #F0F0F0;
}

.profile-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.profile-name {
    font-size: 14px;
    font-weight: 600;
    font-family: var(--SFProSemibold);
    color: var(--text-color);
    line-height: 1.2;
}

.profile-role {
    font-size: 12px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: #828282;
    line-height: 1.2;
}

.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Get Pro Button */
.header-get-pro-btn {
    align-items: center;
    gap: 8px;
    padding: 16px 24px !important;
    width: 190px;
    height: 56px;

}
.responsive-get-pro-btn{
    display: none;
}
.header-get-pro-btn img {
    width: 16px;
    height: 16px;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .header-nav-links {
        gap: 4px;
        margin-left: 24px;
    }

    .header-nav-item {
        padding: 8px 12px;
        font-size: 13px;
    }

    .header-nav-item span {
        display: none;
    }

    .header-nav-icon {
        width: 24px;
        height: 24px;
    }

    .header-nav-icon img {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 768px) {
    .header-nav-inner {
        padding: 12px 16px;
        gap: 16px;
    }

    .header-nav-logo img {
        height: 28px;
    }

    .header-nav-notifications {
        display: none;
    }

    .header-nav-profile .profile-info {
        display: none;
    }

    .header-get-pro-btn {
        padding: 10px 16px;
        font-size: 12px;
    }

    .header-get-pro-btn span {
        display: none;
    }
}

/* Header Nav Right with Profile Integration */
.header-nav-right.profile {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.header-nav-right.profile .profile-wrapper {
    /* right: calc(30%); */
    display: none;
}

.header-nav-right.profile .profile-wrapper.show {
    display: block;
}

.header-nav-right.profile .admin-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.header-nav-right.profile .admin-info .text {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
}

.header-nav-right.profile .admin-info .sub-text {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
}

.header-nav-right.profile .image {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.header-nav-right.profile .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-nav-right.profile .inbox-dropdown-container {
    position: relative;
}

.header-nav-right.profile .inbox-dropdown-wrapper {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 9999;
}

.main-content {
    padding: 0 0 44px 0 !important;
    max-width: 1472px !important;
    width: 100% !important;
    margin: 0 auto !important;
    margin-top: 24px !important;
}
.billing-container{
    padding: 0 32px 32px 32px !important;
}
.review-icon-input .col-12.col-md-9 {
    position: relative;
}

.review-help-text {
    position: absolute;
    bottom: -28px;
    left: 12px;
    font-size: 14px;
    color: #718096;
    font-family: var(--SFProMedium);
    pointer-events: none;
}

.review-icon-input .col-12.col-md-9 {
    position: relative;
}

.review-help-text {
    position: absolute;
    bottom: -32px;
    left: 15px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(130, 130, 130, 1);
    font-family: var(--SFProRegular);
    pointer-events: none;
}

.pro-review-platform-services .active-input {
    border: 1px solid rgba(125, 92, 164, 1) !important;
}


.cate-section {
    margin-top: 26px;
    margin-bottom: 54px;
}

.cate-container {
    max-width: 1452px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.cate-title-text {
    display: flex;
    flex-direction: column;
    align-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.cate-title {
    font-size: 56px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
}

.cate-title-bg {
    background-color: #7d5ca4;
    color: rgba(255, 255, 255, 1);
}

.cate-text {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(109, 109, 109, 1);
}

/* Category List Styles */
.cate-list-wrapper {
    display: flex;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
}

.cate-sidebar {
    width: 320px;
    background: #F8F9FA;
    border-right: 1px solid #E5E5E5;
    display: flex;
    flex-direction: column;
    width: 24%;
}

.cate-sidebar-item {
    padding: 21px 24px;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(78, 78, 78, 1);
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* .cate-sidebar-item:hover {
    background: rgba(125, 92, 164, 0.05);
    padding-left: 28px;
} */

.cate-sidebar-item.active {
    background: rgba(169, 145, 230, 0.1);
}

.cate-content {
    /* flex: 1; */
    padding: 24px;
    background: #FFF;
    width: 76%;
}
.cate-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
    gap: 28px;
}

.cate-main-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cate-main-title {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin-bottom: 0px;
}

.cate-accordion-body .view-all-link,
.cate-main-title-row .view-all-link {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(90, 146, 162, 1);
    text-decoration: underline;
    transition: color 0.2s;
    justify-content: flex-start;
}

.view-all-link:hover {
    color: #4A7A88;
}

.cate-actions {
    display: flex;
    gap: 24px;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-main-title{
    line-height: normal;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
}
.action-link {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(90, 146, 162, 1);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: underline;
}

.action-link:hover {
    color: #4A7A88;
}

.action-link.collapse-all-btn img {
    transform: rotate(180deg);
}

.action-link img {
    width: 14px;
}

.cate-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cate-accordion-item {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cate-accordion-item.open {
    /* border-color: #7D5CA4; */
    box-shadow: 0px 4px 15px rgba(125, 92, 164, 0.08);
}

.cate-accordion-header {
    padding: 16px 24px;
    background: #FAFAFA;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.cate-accordion-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-right: 16px;
}
.cate-agency-count{
    font-size: 16px;
    font-weight: 600;
    font-family: 'Nunito Sans';
    color: rgba(132, 132, 132, 1);
}
.cate-accordion-title-with-flag {
    display: flex;
    align-items: center;
    gap: 16px;
}
.cate-accordion-title-with-flag img{
    width: 34px;
    height: 24px;
    object-fit: cover;
}
.cate-expand-wrapper{
    display: flex;
    align-items: center;
    gap: 16px;
}
.cate-expand-wrapper span{
    font-family: 'Nunito Sans';
    font-size: 16px;
    font-weight: 600;
    color: rgba(132, 132, 132, 1);
}
.cate-accordion-header:hover {
    background: #F5F5F5;
}

.cate-accordion-item.open .cate-accordion-header {
    background: rgba(249, 251, 252, 1);
    border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.cate-accordion-title {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin-bottom: 0;
}

.toggle-icon {
    width: 14px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cate-accordion-item.open .cate-expand-wrapper .toggle-icon {
    transform: rotate(180deg) !important;
}

.cate-expand-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cate-expand-wrapper span {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(132, 132, 132, 1);
}

.cate-accordion-body {
    padding: 24px;
    display: none;
}

.cate-accordion-item.open .cate-accordion-body {
    display: block;
}

.cate-sub-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0px;
}
.cate-sub-grid .cate-column{
    /* width: 165px; */
    width: 100%;
}
.cate-sub-grid .cate-column:last-child {
    /* width: 250px; */
    margin-left: 10px;
}

.cate-column-title {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(25, 18, 33, 1);
    margin-bottom: 24px;
}

.cate-mobile-nav-bar,
.cate-mobile-overlay,
.cate-mobile-drawer,
.cate-column-title .toggle-icon {
    display: none;
}

@media (max-width: 991.98px) {
    .desktop-only {
        display: none !important;
    }
}

.cate-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

.cate-list-items li {
    margin-bottom: 14px;
}

.cate-list-items li:last-child {
    margin-bottom: 0;
}

.cate-list-items li a {
    font-family: Nunito Sans, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: rgba(25, 18, 33, 1);
    text-decoration: none;
    transition: all 0.2s;
}

.cate-list-items li a:hover {
    color: #7D5CA4;
}

.view-more-sm {
    font-size: 16px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: rgba(90, 146, 162, 1);
    display: none; /* Hidden by default, shown via JS if items > limit */
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    text-decoration: underline;
    background: none;
    border: none;
}

.cate-column.expanded .view-more-sm img {
    transform: rotate(180deg);
}

.cate-list-items li.hidden-item {
    display: block; /* Must be block for height animation */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0 !important;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
}

.cate-column.expanded .cate-list-items li.hidden-item {
    max-height: 100px; /* Large enough for one line */
    opacity: 1;
    margin-bottom: 14px !important;
}

/* Ensure the last item never has margin bottom even when expanded */
.cate-column.expanded .cate-list-items li.hidden-item:last-child {
    margin-bottom: 0 !important;
}


.view-more-sm img {
    width: 10px;
}

@media (max-width: 1200px) {
    .cate-sub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .cate-sub-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    /* Force all industries to be visible on mobile since view-more is hidden */
    .cate-column[data-group="Industries"] .cate-list-items li.hidden-item,
    .cate-column[data-group="Common Industries"] .cate-list-items li.hidden-item {
        display: block !important;
        opacity: 1 !important;
        max-height: 100px !important;
        margin-bottom: 12px !important;
    }

    .toggle-icon {
        display: block !important;
    }
    .cate-title {
        font-size: 24px;
    }
    .cate-title-text {
        gap: 8px;
        margin-bottom: 16px;
    }
    .cate-title-text p{
        margin-bottom: 0px;
    }
    .cate-text {
        font-size: 14px;
    }
    .cate-list-wrapper {
        flex-direction: column;
        border-radius: 24px;
        gap: 0;
    }

    .cate-sidebar {
        width: 100%;
        height: 100%;
        background: rgba(249, 251, 252, 1);
        border-right: 1px solid #E5E5E5;
        display: flex;
        flex-direction: column;
    }

    .cate-sidebar-item {
        border-bottom: 1px solid rgba(229, 229, 229, 1);
        border-right: none;
        white-space: normal;
        padding: 18px 24px;
        background: #FFF;
        justify-content: flex-start;
        font-size: 16px;
        color: #4E4E4E;
        font-family: var(--SFProMedium);
        min-height: 56px;
    }

    .cate-sidebar-item.active {
        background: rgba(169, 145, 230, 0.1);
        color: #7D5CA4;
    }

    .cate-content {
        display: block;
        width: 100%;
        padding: 0px;
        background: rgba(255, 255, 255, 1);
    }

    /* Mobile Header (Image 2 style) */
    .cate-mobile-nav-bar {
        background: rgba(249, 251, 252, 1);
        border-bottom: 1px solid rgba(229, 229, 229, 1);
        padding: 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        position: sticky;
        z-index: 100;
        cursor: pointer;
    }

    .cate-mobile-hamburger {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #F8F9FA;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #E5E5E5;
    }

    .cate-mobile-hamburger img {
        width: 16px;
    }

    .cate-mobile-nav-title {
        font-size: 16px;
        font-weight: 500;
        font-family: var(--SFProBold);
        color: rgba(25, 18, 33, 1);
    }

    /* Side Drawer for Sidebar */
    .cate-mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        display: block; /* Override global display: none */
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .cate-mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .cate-mobile-drawer {
        position: fixed;
        top: 0;
        left: -320px;
        width: 320px;
        height: 100%;
        background: rgba(249, 251, 252, 1);
        z-index: 2001;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
    }

    .cate-mobile-drawer.active {
        left: 0;
    }

    .cate-drawer-content {
        flex: 1;
        overflow-y: auto;
    }

    /* Mobile Category Content Accordions */
    .cate-header {
        gap: 0;
        padding: 0 16px;
        margin-bottom: 0;
    }

    .cate-column {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(229, 229, 229, 1);
    }

    .cate-column-title {
        padding: 18px 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
        color: #191221;
    }

    .cate-column-title .toggle-icon {
        display: block !important;
        width: 12px;
        transition: transform 0.3s ease;
        filter: invert(53%) sepia(17%) saturate(1001%) hue-rotate(151deg) brightness(94%) contrast(88%); /* Match #5A92A2 */
    }

    .cate-column.open .cate-column-title .toggle-icon {
        transform: rotate(180deg) !important;
    }

    .cate-list-items {
        padding-bottom: 0px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.4s ease-in-out;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .cate-column.open .cate-list-items {
        padding-bottom: 16px;
        max-height: 1000px;
        opacity: 1;
    }
    .cate-accordion-item:last-child {
        border-bottom: none;
    }

    .cate-list-items li{
        margin: 0;
        padding: 0;
    }

    .cate-list-items li a {
        font-size: 16px;
        font-family: var(--SFProMedium);
        color: #191221;
        padding: 0;
        display: block;
    }

    /* Sub-accordions styling refinement */
    .cate-accordion {
        gap: 0px;
    }

    .cate-accordion-item {
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(231, 231, 233, 1);
    }

    .cate-accordion-header {
        padding: 14px 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cate-accordion-info {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: flex-start;
    }

    .cate-accordion-title {
        font-size: 16px;
        color: #191221;
        margin: 0;
    }

    .cate-agency-count {
        font-size: 16px;
    }

    .cate-expand-wrapper {
        display: flex;
        align-items: center;
        margin-left: 12px;
    }

    .cate-expand-wrapper .toggle-icon {
        width: 12px;
        filter: invert(53%) sepia(17%) saturate(1001%) hue-rotate(151deg) brightness(94%) contrast(88%); /* Match #5A92A2 */
    }

    .cate-accordion-body {
        padding: 0 16px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.4s ease-in-out;
    }

    .cate-accordion-item.open .cate-accordion-body {
        padding: 16px 16px 0px 16px;
        max-height: 2000px;
        opacity: 1;
    }
     .cate-accordion-body .mb-4{
        margin: 0 !important;
    }

    .cate-accordion-body .view-all-link {
        font-size: 14px;
    }

    .cate-main-title,
    .accordion-header,
    .view-more-sm {
        display: none !important;
    }
    .cate-section {
        margin-top: 16px;
        margin-bottom: 0px;
    }
    .footer {
        padding: 26px 0px;
        padding-bottom: 0px;
    }
}


.inbox-delete-modal {
    max-width: 570px !important;
    width: 100% !important;
}

.inbox-delete-modal .content {
    position: relative !important;
}

.inbox-modal-close {
    position: absolute !important;
    top: 42px !important;
    right: 40px !important;
    width: 48px !important;
    height: 48px !important;
    cursor: pointer !important;
}



/* Inbox Delete Confirmation Modal Styling */
#inboxDeleteModal .modal-dialog {
    max-width: 570px !important;
    width: 100% !important;
}

#inboxDeleteModal .modal-content {
    border-radius: 24px !important;
    border: none !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

#inboxDeleteModal .content {
    padding: 56px 40px 33px !important;
    position: relative !important;
}

#inboxDeleteModal .inbox-modal-close {
    position: absolute !important;
    top: 42px !important;
    right: 40px !important;
    width: 48px !important;
    height: 48px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f9fa !important;
    border-radius: 50% !important;
    transition: background 0.2s !important;
    z-index: 10 !important;
}

#inboxDeleteModal .inbox-modal-close:hover {
    background: #e9ecef !important;
}

#inboxDeleteModal .image-large {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 28px !important;
}

#inboxDeleteModal .image-large img {
    width: 162px !important;
    height: 162px !important;
    object-fit: contain !important;
}

#inboxDeleteModal .text-med {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: rgba(25, 18, 33, 1) !important;
    margin-bottom: 8px !important;
    text-align: center !important;
    font-family: 'SFProBold', sans-serif !important;
}

#inboxDeleteModal .text {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: rgba(161, 161, 161, 1) !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
    text-align: center !important;
}

#inboxDeleteModal .buttons-small {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
}

#inboxDeleteModal .btn-white {
    background-color: #fff !important;
    border: 1px solid #DEE2E6 !important;
    color: #495057 !important;
    padding: 12px 24px !important;
    border-radius: 16px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    min-width: 170px !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

#inboxDeleteModal .btn-white:hover {
    background-color: #f8f9fa !important;
    border-color: #adb5bd !important;
}

#inboxDeleteModal .btn-red {
    background-color: rgba(242, 0, 60, 1) !important;
    color: rgba(255, 255, 255, 1) !important;
    padding: 12px 24px !important;
    border-radius: 16px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    min-width: 170px !important;
    transition: all 0.2s !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

#inboxDeleteModal .btn-red:hover {
    background-color: #D80035 !important;
    box-shadow: 0 4px 12px rgba(242, 0, 60, 0.2) !important;
}

/* --- Toast Notification Styles --- */
.va-toast-container {
    position: fixed;
    bottom: 28px;
    right: 40px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: none;
}

.va-toast {
    position: relative;
    width: 470px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
    animation: va-toast-in 0.3s ease forwards;
    transition: all 0.3s ease;
}

@keyframes va-toast-in {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.va-toast.hiding {
    opacity: 0;
    transform: translateX(100px);
}

.va-toast-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #F8F9FA;
}

.va-toast-icon-wrapper img {
    width: 24px;
    height: 24px;
}

.va-toast-content {
    flex: 1;
}

.va-toast-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 4px;
}

.va-toast-message {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: rgba(97, 106, 121, 1);
    line-height: 1.5;
    margin: 0;
    margin-bottom: 4px;
}

.va-toast-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
    margin-top: -4px;
    margin-right: -4px;
    position: absolute;
    right: 9px;
    top: 5px;
}

.va-toast-close:hover {
    opacity: 1;
}

.va-toast-close img {
    width: 14px;
    height: 14px;
}

/* Success Variant */
.va-toast.success {
       background:
        linear-gradient(
            180deg,
            rgba(34, 197, 94, 0.075) 0%,
            rgba(34, 197, 94, 0.04) 60%,
            rgba(255, 255, 255, 0) 100%
        ),
        #ffffff;
}
/* Warning Variant */
.va-toast.warning {
        background:
        linear-gradient(
            180deg,
            rgba(245, 158, 11, 0.075) 0%,
            rgba(245, 158, 11, 0.05) 60%,
            rgba(255, 255, 255, 0) 100%
        ),
        #ffffff;
}
/* Info Variant (Using as regular message in image) */
.va-toast.info {
       background:
        linear-gradient(
            180deg,
            rgba(57, 103, 153, 0.075) 0%,
            rgba(57, 103, 153, 0.05) 60%,
            rgba(57, 103, 153, 0) 100%
        ),
        #ffffff;
}
/* Error Variant */
.va-toast.error {
       background:
        linear-gradient(
            180deg,
            rgba(239, 68, 68, 0.075) 0%,
            rgba(239, 68, 68, 0.05) 60%,
            rgba(255, 255, 255, 0) 100%
        ),
        #ffffff;
}
.va-toast.success .va-toast-icon-wrapper {
    background: #FFFFFF;
    box-shadow: 0px 4px 10px rgba(76, 175, 80, 0.1);
}

.va-toast.warning .va-toast-icon-wrapper {
    background: #FFFFFF;
    box-shadow: 0px 4px 10px rgba(255, 152, 0, 0.1);
}

.va-toast.info .va-toast-icon-wrapper {
    background: #FFFFFF;
    box-shadow: 0px 4px 10px rgba(33, 150, 243, 0.1);
}

.va-toast.error .va-toast-icon-wrapper {
    background: #FFFFFF;
    box-shadow: 0px 4px 10px rgba(244, 67, 54, 0.1);
}



.inbox-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.no-message-convo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.no-message-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.no-convo-img{
    margin-bottom: 24px;
}
.no-convo-heading{
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin-bottom: 8px;
}
.no-convo-text{
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(161, 161, 161, 1);
    text-align: center;
    margin: 0;
    max-width: 325px;
    width: 100%;
}
.chat-area-no-message-convo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: auto;
}

.chat-area-no-message-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.chat-area-no-convo-img{
    margin-bottom: 24px;
}
.chat-area-no-convo-heading{
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin-bottom: 8px;
}
.chat-area-no-convo-text{
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(161, 161, 161, 1);
    text-align: center;
    margin: 0;
    max-width: 325px;
    width: 100%;
}

/* ===== CHAT MULTI-IMAGE GRID STYLES ===== */
.chat-images-grid {
    display: grid;
    gap: 8px;
    max-width: 280px;
    overflow: hidden;
}

/* 2 images - side by side */
.chat-images-grid.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 images - 1 large left, 2 stacked right */
.chat-images-grid.grid-3 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.chat-images-grid.grid-3 .chat-image-item:first-child {
    grid-row: span 2;
}

/* 4+ images - 2x2 grid */
.chat-images-grid.grid-4,
.chat-images-grid.grid-more {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.chat-image-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.2s ease;
    border-radius: 8px;
    max-width: 120px;
    width: 100%;
}

/* .chat-image-item:hover {
    opacity: 0.9;
} */

.chat-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay for "+X more" on last visible image */
.chat-images-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 1);
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
}

/* Single image - keep existing chat-image style */
.chat-bubble .chat-images-grid.grid-1 {
    max-width: 200px;
}

.chat-bubble .chat-images-grid.grid-1 .chat-image-item {
    aspect-ratio: auto;
    border-radius: 12px;
}

/* ===== FILES & MEDIA TABS STYLES ===== */
.files-media-container {
    display: none;
}

.files-media-container.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 60vh;
}

.files-media-tabs {
    display: flex;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    margin-bottom: 16px;
}

.files-media-tab {
    flex: 1;
    padding: 12px 8px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(97, 106, 121, 1);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
    /* text-align: center; */
    display: inline-flex;
    /* align-items: center; */
    justify-content: center;
}

.files-media-tab:hover {
    color: var(--text-color);
}

.files-media-tab.active {
    color: var(--text-color);
    font-family: var(--SFProBold);
    font-weight: 700;
}

.files-media-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    height: 4px;
    background-color: #7D5CA4;
    width: 70%;
}

.files-media-content {
    display: none;
}

.files-media-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.inbox-no-media {
    max-width: 230px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: auto;
}
.no-media-title {
    font-size: 24px;
    font-weight: 700;
    font-family: 'SFProDisplayBold';
    margin: 0;
    color: rgba(25, 18, 33, 1);
}
.no-media-text {
    text-align: center;
    font-family: 'Nunito Sans';
    font-size: 16px;
    font-weight: 500;
    color: rgba(161, 161, 161, 1);
}
/* Media Grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.media-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/*
.media-item:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
} */

.media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Documents List */
.docs-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    /* padding: 12px; */
    /* background-color: rgba(247, 247, 249, 1); */
    /* border-radius: 8px; */
    cursor: pointer;
    /* transition: background-color 0.2s ease; */
    text-decoration: none;
    color: var(--text-color);
}

.doc-item:hover .doc-info > :not(:last-child) {
  text-decoration: underline;
}

/* Ensure the last child stays without underline */
.doc-item:hover .doc-info > :last-child {
  text-decoration: none;
}

.doc-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 8px;
    flex-shrink: 0;
}

.doc-icon img {
    width: 40px;
    height: 40px;
}
.doc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.doc-name {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-meta {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: rgba(130, 130, 130, 1);
    margin: 0;
}

/* Links List */
.links-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid rgba(215, 215, 215, 1);;
    padding-bottom: 8px;
}

.link-item:hover {
    background-color: none;
}

.link-favicon {
    margin: auto;
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--SFProBold);
    flex-shrink: 0;
}

.link-info {
    flex: 1;
    min-width: 0;
}

.link-title {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-url {
    font-size: 12px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: rgba(125, 92, 164, 1);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-date {
    font-size: 11px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: rgba(130, 130, 130, 1);
    margin: 4px 0 0 0;
}

/* Empty State for Files & Media */
.files-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
}

.files-media-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.files-media-empty-text {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(130, 130, 130, 1);
    margin: 0;
}

/* Image Preview Modal */
.image-preview-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-preview-modal.show {
    display: flex;
}

.image-preview-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.image-preview-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.image-preview-close:hover {
    color: #bbb;
}

.image-preview-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 60px;
    font-weight: 300;
    cursor: pointer;
    user-select: none;
    padding: 20px;
    transition: 0.3s;
    background: transparent;
    border: none;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-nav:hover {
    color: #bbb;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.image-preview-prev {
    left: 20px;
}

.image-preview-next {
    right: 20px;
}

.image-preview-nav:disabled {
    opacity: 0.2;
    cursor: default;
}

.image-preview-nav:disabled:hover {
    background-color: transparent;
    color: #fff;
}

.thumbnail-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #7D5CA4;
    color: white;
    font-weight: 600;
    font-size: 14px;
    border-radius: 50%;
    text-transform: uppercase;
    background-color: #f0f0f0;
    color: #7D5CA4;
}

.inbox-message-logo.thumbnail-placeholder,
.inbox-chat-logo.thumbnail-placeholder {
    /* background-color: #7D5CA4; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inbox-message-logo.thumbnail-placeholder .thumbnail-initials,
.inbox-chat-logo.thumbnail-placeholder .thumbnail-initials {
    font-size: 16px;
}

.inbox-chat-logo.thumbnail-placeholder .thumbnail-initials {
    font-size: 20px;
}

.chat-avatar.thumbnail .thumbnail-initials {
    font-size: 12px;
}

.sent-avatar.thumbnail .thumbnail-initials {
    background-color: #f0f0f0;
    color: #7D5CA4;
}

/* ============================================================================
   IMAGE MODAL STYLES (MIGRATED FROM INBOX.VUE)
   ============================================================================ */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.image-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.image-modal-close:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.image-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.image-modal-nav:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.1);
}

.image-modal-nav.prev {
    left: 20px;
}

.image-modal-nav.next {
    right: 20px;
}

.image-modal-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px 200px;
    min-height: 0;
    width: 100%;
    position: relative;
}

.image-modal-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
    user-select: none;
}

.image-modal-info {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 5;
}

.image-modal-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.image-modal-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-modal-meta {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.image-modal-counter {
    font-size: 14px;
    font-weight: 500;
    color: white;
    padding: 0 16px;
    white-space: nowrap;
}

.image-modal-download {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.image-modal-download:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.image-modal-thumbnails-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.image-modal-thumbnails {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;
    justify-content: center;
}

.image-modal-thumbnails::-webkit-scrollbar {
    display: none;
}

.image-modal-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.image-modal-thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.image-modal-thumb.active {
    opacity: 1;
    border-color: #7D5CA4;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(125, 92, 164, 0.4);
}

.image-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ============================================================================
   IMAGE MODAL STYLES (MIGRATED FROM INBOX.VUE)
   ============================================================================ */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.image-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.image-modal-close:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.image-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.image-modal-nav:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.1);
}

.image-modal-nav.prev {
    left: 20px;
}

.image-modal-nav.next {
    right: 20px;
}

.image-modal-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px 200px;
    min-height: 0;
    width: 100%;
    position: relative;
}

.image-modal-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
    user-select: none;
}

.image-modal-info {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 5;
}

.image-modal-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.image-modal-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-modal-meta {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.image-modal-counter {
    font-size: 14px;
    font-weight: 500;
    color: white;
    padding: 0 16px;
    white-space: nowrap;
}

.image-modal-download {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.image-modal-download:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.image-modal-thumbnails-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.image-modal-thumbnails {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;
    justify-content: center;
}

.image-modal-thumbnails::-webkit-scrollbar {
    display: none;
}

.image-modal-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.image-modal-thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.image-modal-thumb.active {
    opacity: 1;
    border-color: #7D5CA4;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(125, 92, 164, 0.4);
}

.image-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Inline Editor Dropdowns Styling */
.inline-emoji-picker-popup {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.inline-quick-response-container {
    position: relative;
    display: inline-block;
}

.inline-quick-response-dropdown {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-height: 300px;
    overflow-y: auto;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 1060;
    display: none;
}
.inline-quick-response-dropdown .quick-response-empty {
    font-family: 'SFProDisplayRegular';
    padding: 20px;
    text-align: center;
    color: #666;
}
.inline-quick-response-dropdown .quick-response-empty p:first-child {
    font-weight: 600;
    color: #333;
}
.inline-quick-response-dropdown .quick-response-empty p:last-child {
    margin: 5px 0 !important;
    font-size: 14px;
}
.inline-quick-response-dropdown.open-upward {
    top: auto;
    bottom: calc(100% + 5px);
}

.inline-quick-response-dropdown .quick-response-header {
    padding: 12px 16px;
    font-weight: 600;
    color: #1A1A1A;
    border-bottom: 1px solid #E5E5E5;
}

.inline-quick-response-dropdown .quick-response-list {
    padding: 8px 0;
}

.inline-quick-response-dropdown .inline-quick-item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.inline-quick-response-dropdown .inline-quick-item:hover {
    background: #F5F5F5;
}

.inline-attachment-previews {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 8px;
}

.inline-attachment-previews.show {
    display: flex;
}

.other-services-list-row{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.other-popular-link{
    margin-top: 14px !important;
}
.other-popular-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.other-popular {
    margin-top: 40px;
}
.other-popular-heading{
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(125, 92, 164, 1);
    margin-bottom: 32px;
}









.hero-section{
    padding-top: 64px !important;
    padding-bottom: 38px !important;
    background: radial-gradient(ellipse 100% 100% at 30% 50%, rgba(224, 197, 255, 0.4) 0%, transparent 100%), radial-gradient(ellipse 100% 100% at 70% 50%, rgba(176, 237, 255, 0.4) 0%, transparent 100%), #FFFFFF !important;
}
.hero-section .content .title {
    font-size: 64px !important;
}
.hero-section .content .filter-box {
    margin-top: 40px !important;

}
.hero-section .content .filter-box h2{
    font-size: 24px;
    margin: auto;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    text-align: center;
    margin-bottom: 21px;
}
.hero-section .content .filter-box h2 span{
    color: rgba(125, 92, 164, 1);
}
.hero-section .content .text {
    max-width: 100% !important;

}
.reviews-platform {
    margin-top: calc(40px + var(--search-results-height, 0px));
    margin-bottom: 0px;
    transition: margin-top 0.3s ease;
}
.reviews-platform-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.reviews-platform-wrapper p{
    margin: 0;
    color: rgba(132, 132, 132, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Nunito Sans';
}
.reviews-platform-badge{
    display: flex;
    align-items: center;
    gap: 24px;
}
.reviews-badge {
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.8);
    padding: 23px 15px;
}
.reviews-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.clutch-badge img {
    object-fit: contain;
}


.three-steps{
    background: rgba(255, 255, 255, 1);
}
.three-steps-container{
    max-width: 1308px !important;
    width: 100%;
    padding: 40px 0;
}
.three-steps-title {
    max-width: 965px;
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    text-align: center;
    margin: 0 auto;
}
.three-steps-title span{
    color: rgba(125, 92, 164, 1);
}
.steps{
    margin-top: 24px;
}
.steps-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.step {
    flex: 1;
    max-width: 404px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.step-img{
    padding: 25px;
    border: 1.25px solid rgba(229, 229, 229, 1);
    border-radius: 30px;
    max-width: 100px;
}
.step-img img{
    width: 50px;
    height: 50px;
}
.step-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.step-text .title {
    margin: 0;
    margin-top: 21px;
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    text-align: center;
    max-width: 235px;
}
.step-text p{
    margin: 0;
    margin-top: 8px;
    color: rgba(132, 132, 132, 1);
    font-size: 20px;
    font-weight: 600;
    font-family: 'Nunito Sans';
    text-align: center;
}




.partners {
    padding: 40px 0;
    background: radial-gradient(ellipse 100% 100% at 0% 30%, rgba(224, 197, 255, 0.4) 0%, transparent 100%), radial-gradient(ellipse 100% 100% at 100% 50%, rgba(176, 237, 255, 0.4) 0%, transparent 100%), #FFFFFF;
}
.partner-top{
    margin-bottom: 24px;
}
.p-top-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.partner-header{
    text-align: center;
    margin-bottom: 24px;
}
.partner-header .title{
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0;
}
.partner-header .title span{
    color: rgba(125, 92, 164, 1);
}
.partner-header p{
    margin: 0;
    color: rgba(25, 18, 33, 1);
    font-size: 24px;
    font-weight: 500;
    font-family: 'Nunito Sans';
}
.partner-cards-container {
    margin-bottom: 24px;
    padding: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.partner-cards-container-wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 24px;
}
.partner-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(24px);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    border-radius: 24px;
}
.partner-top .partner-card .btn-white {
    margin-top: auto;
}
.p-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 24px;
    background: radial-gradient(ellipse 100% 100% at 0% 50%, rgba(224, 197, 255, 0.4) 0%, transparent 90%), radial-gradient(ellipse 1000px 1000px at 100% 50%, rgba(176, 237, 255, 0.4) 0%, transparent 10%), #FFFFFF;
    text-decoration: none;
}
.p-card-header:hover .title{
    /* text-decoration: underline; */
    color: rgba(125, 92, 164, 1);
}
.p-card-header .title {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    margin: 0;
    margin-left: 20px;
    line-height: 1;
}
.p-card-header img {
    width: auto;
    max-width: 40%;
    height: auto;
    max-height: 110px;
    object-fit: contain;
}
.p-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.p-card-item {
    font-size: 24px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(15, 53, 71, 0.8);
    /* line-height: 24px; */
}
.p-card-item > a {
    display: block;
    color: inherit;
    text-decoration: none;
}
.p-card-list .p-card-item:not(:last-child) {
    margin-bottom: 8px;
}
.p-card-item > a:hover{
    color: rgba(125, 92, 164, 1);
    cursor: pointer;
}
.partner-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #c0c0c0 48.56%,
        #ffffff 100%
    );
}
.partner-bottom{
    margin-top: 32px;
}
.p-bottom-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.partner-badge {
    padding: 40px 0;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(235, 235, 235, 1);
    border-radius: 18px;
    max-width: 342px;
    width: 100%;
    text-align: center;
}
.partner-badge .title{
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(125, 92, 164, 1);
}
.partner-badge p{
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--SFProRegular);
    color: rgba(15, 53, 71, 1);
}
.loader-section{
    margin: auto;
}
.loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.loader-wrapper img {
    width: 195px;
    height: auto;
    object-fit: cover;
}
.loader-wrapper h4 {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProSemiBold);
    color: var(--text-color);
    margin-top: -24px;
    margin-bottom: 8px;
}
.loader-wrapper p {
    font-size: 16px;
    font-weight: 500;
    font-family: "Nunito Sans", sans-serif;
    color: rgba(161, 161, 161, 1);
}


/* ============================================================================
   INBOX IMAGE PERFORMANCE
   ============================================================================ */

/* Image container with placeholder background */
.chat-image-item {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    background-color: #f5f5f5;
}

/* Image on top of placeholder */
.chat-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
}

/* Smooth scrolling optimization */
.chatting {
    transform: translateZ(0);
}
/* Service Selection Limit Toast */
.service-limit-toast {
    position: absolute;
    background: #2D2D2D;
    color: #FFFFFF;
    padding: 12px 16px;
    border-radius: 8px;
    z-index: 10000;
    display: none;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    /* max-width: 505px;
    width: max-content; */
}

.service-limit-toast.show {
    display: block;
}

.service-limit-toast .toast-content {
    font-family: 'Eudoxus Sans', 'Inter', sans-serif;
    font-size: 14px;
}

.service-limit-toast .notify-link {
    color: rgba(164, 115, 223, 1);
    text-decoration: underline;
    font-weight: 400;
}

.service-limit-toast .notify-link:hover {
    color: #B692FF;
}

/* Cancel Plan Modal Styles */
.cancel-plan-modal .modal-lg, .modal-xl {
    --bs-modal-width: 1200px !important;
}
.cancel-plan-modal .modal-content.small-modal {
    max-width: 1200px !important;
}
.cancel-plan-modal .modal-content.small-modal {
    border-radius: 24px;
    border: none;
    overflow: auto;
    position: relative;
}

.cancel-plan-modal .modal-gradient-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 0% 0%, rgba(224, 197, 255, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, rgba(176, 237, 255, 0.2) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.cancel-plan-modal .modal-content .content {
    position: relative;
    z-index: 1;
    padding: 24px;
    overflow: auto;
}

.cancel-plan-modal .modal-content .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cancel-plan-modal .modal-content .header .title {
    font-size: 56px !important;

}

.cancel-plan-modal .modal-content .header .close {
    width: 48px;
    height: 48px;
    background: #F5F5F5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cancel-plan-modal .cancel-plan-subtitle {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    color: #656565;
    margin-bottom: 12px;
}

.cancel-plan-modal .cancel-plan-loss-box {
    background: rgba(242, 0, 60, 0.1);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}
.talk-to {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    margin-bottom: 14px;
}
.talk-to-wrapper {
    display: flex;
    gap: 24px;
    padding: 12px 20px;
}
.talk-to-img {
    margin: auto 0;
    width: 10%;
}
.talk-to-img img{
    object-fit: cover;
    width: 100%;
}
.talk-to-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* max-width: 432px; */
}
.talk-to-heading {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin: 0;
}
.talk-to-text p{
    margin: 0;
    font-family: var(--SFProMedium);
    font-size: 16px;
    color: rgba(130, 130, 130, 1);
    font-weight: 500;
}
.talk-to-contact {
    margin: 0;
    font-family: var(--SFProMedium);
    font-size: 16px;
    color: rgba(90, 146, 162, 1);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.talk-to-contact img{
    transform: rotate(270deg);
}
.cancel-plan-hr{
    margin: 0;
    padding: 0;
    color: rgba(229, 229, 229, 1);
    opacity: 1 !important;
}
.pause-plan {
    margin: 14px 0;
    padding: 14px;
    background: linear-gradient(0deg, #FAFAFA, #FAFAFA),
                linear-gradient(303.36deg, rgba(88, 1, 181, 0.05) 19.85%, rgba(148, 106, 255, 0) 99%);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 12px;
}
.pause-plan-wrapper {
    display: flex;
    justify-content: space-between;
}
.pause-heading{
    font-size: 22px;
    font-weight: 700;
    font-family: var(--SFProBold);
    margin: 0;
    margin-bottom: 8px;
}
.pause-plan-text{
    margin: 0;
    font-family: var(--SFProMedium);
    font-size: 16px;
    color: rgba(130, 130, 130, 1);
    font-weight: 500;
    margin-bottom: 16px;
}
.pause-plan-wrapper span {
    margin: 0;
    font-family: var(--SFProMedium);
    font-size: 20px;
    color: rgba(130, 130, 130, 1);
    font-weight: 500;
}
.pause-plan-btns-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.pause-btns{
    /* padding: 16px 24px !important; */
}
.pause-plan-btn{
    margin-top: 16px !important;
    color: rgba(125, 92, 164, 1) !important;
    width: 310px !important;
    border: 1px solid rgba(125, 92, 164, 1);
}
.pause-btns:focus {
    background: rgba(125, 92, 164, 0.1) !important;
}
.cancel-plan-modal .cancel-plan-loss-box .loss-text {
    font-family: var(--SFProMedium);
    font-size: 18px;
    color: rgba(49, 49, 49, 1);
    font-weight: 500;
}

.cancel-plan-modal .modal-form-label {
    display: block;
    font-family: var(--SFProMedium);
    font-size: 20px;
    font-weight: 500;
    color: rgba(113, 115, 118, 1);
    margin-bottom: 11px;
    border-top: 1px solid #E5E5E5;
    padding-top: 15px;
}
.modal-form-label.text-area-label {
    border-top: none;
    padding-top: 0;
    margin-top: 20px;
    margin-bottom: 16px;
}
.cancel-plan-modal .cancel-plan-select,
.cancel-plan-modal .cancel-plan-textarea {
    width: 100%;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    padding: 12px 16px;
    font-family: var(--SFProMedium);
    font-size: 20px;
    color: var(--text-color);
    background: #FFFFFF;
    margin-bottom: 20px;
}

.cancel-plan-modal .cancel-plan-textarea-wrapper {
    position: relative;
}

.cancel-plan-modal .cancel-plan-textarea {
    /* padding-left: 44px; */
    height: 150px;
    resize: none;
}
.cancel-plan-textarea:focus-visible{
    outline: none;
    border-color: #7D5CA4;
}
.cancel-plan-modal .cancel-plan-textarea-wrapper .mail-icon {
    position: absolute;
    top: 20px;
    left: 16px;
    width: 24px;
    height: auto;
}

.cancel-plan-modal .modal-footer-btns {
    display: flex;
    gap: 16px;
    /* margin-top: 8px; */
}

.cancel-plan-modal .modal-footer-btns .btn-stay {
    flex: 1;
    background: #7D5CA4;
    color: #FFFFFF;
    padding: 14px;
    border-radius: 16px;
    border: none;
    font-family: var(--SFProMedium);
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}

.cancel-plan-modal .modal-footer-btns .btn-cancel {
    flex: 1;
    background: #FFFFFF;
    color: #FF3B30;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #FF3B30;
    font-family: var(--SFProMedium);
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}

/* Select2 Customization for Cancel Plan Modal */
.cancel-plan-modal .select2-container--default .select2-selection--single {
    border: 1px solid #E5E5E5 !important;
    border-radius: 16px !important;
    height: 56px !important;
    padding: 12px 16px !important;
    background-color: #fff !important;
    max-width: 100% !important;
}
.cancel-plan-modal .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.cancel-plan-modal .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 16px !important;
    border: 1px solid #7D5CA4 !important;
}
.cancel-plan-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    font-family: var(--SFProMedium) !important;
    color: var(--text-color) !important;
    padding-left: 0 !important;
}

.cancel-plan-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 24px !important;
    right: 16px !important;
    top: 16px !important;
}

.cancel-plan-select2-dropdown {
    border: 1px solid #E5E5E5 !important;
    border-radius: 12px !important;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08) !important;
    z-index: 10001 !important;
    width: 650px !important;
    min-width: 650px !important;
    max-width: 100%;
}

.cancel-plan-select2-dropdown .select2-results__option {
    padding: 12px 16px !important;
    color: #191221 !important;
    font-family: var(--SFProMedium) !important;
    font-size: 18px !important;
}

.cancel-plan-select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: #F8F7FA !important;
    color: #7D5CA4 !important;
}

table.dataTable thead th,
table.dataTable thead td {
    font-weight: normal !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_disabled {
    font-weight: normal !important;
}

/* Users Reviews Section */
.users-reviews {
    padding: 40px 0;
    background-color: #fff;
    overflow: hidden;
}

.users-reviews .title {
    margin: 0 auto;
    max-width: 1020px;
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    text-align: center;
    margin-bottom: 24px;
}

.users-reviews .title span {
    color: rgba(125, 92, 164, 1);
}

.reviews-container-wrapper {
    position: relative;
}

/* Blur Effect using pseudo-classes */
.reviews-container-wrapper::before,
.reviews-container-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 200px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.reviews-container-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.reviews-container-wrapper::after {
    right: 0;
    background: linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.users-reviews .owl-carousel {
    margin-bottom: 30px;
}

.users-reviews .review-card {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
    margin: 10px;
    transition: transform 0.3s ease;
    height: 100%;
    min-width: 320px;
    max-width: 475px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 285px;
    direction: ltr;
    backdrop-filter: blur(24px);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);

}


.users-reviews .owl-carousel .owl-stage {
    display: flex !important;
    transition-timing-function: linear !important;
}

.users-reviews .review-card:hover {
    transform: translateY(-5px);
}

.users-reviews .card-header .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.users-reviews .card-header .avatar {
    width: 64px !important;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.users-reviews .card-header .avatar img{
    width: 100% !important;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.users-reviews .card-header .avatar.no-logo {
    width: 64px !important;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(229, 229, 229, 1);
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.users-reviews .card-header h3 {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(15, 53, 71, 0.8);
    margin: 0;
}

.users-reviews .rating {
    display: flex;
    align-items: center;
    gap: 1.5px;
    margin-top: 4px;
}

.users-reviews .rating img {
    width: 18px !important;
    height: 18px;
}

.users-reviews .rating span {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(15, 53, 71, 0.8);
    margin-left: 4px;
}

.users-reviews .review-text {
    font-size: 18px;
    line-height: 1;
    color: rgba(15, 53, 71, 0.6);
    font-family: var(--SFProMedium);
    margin-bottom: 20px;
    flex-grow: 1;
    height: max-content !important;
}

.users-reviews .card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    /* padding-top: 16px; */
    /* border-top: 1px solid #F3F3F3; */
}

.users-reviews .company-logo {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain;
    border: none;
    border-radius: 12px;
    padding: 0;
}

.users-reviews .company-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(229, 229, 229, 1);
    font-size: 16px;
    font-weight: 700;
    color: var(--blue);
    font-family: var(--SFProBold);
    width: 52px;
    height: 52px;
    border-radius: 12px;
}

.users-reviews .company-name {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(15, 53, 71, 1);
}
.users-reviews .owl-carousel .owl-stage-outer {
    overflow: visible !important;
}
/* RTL Row specific needs */
.reviews-row-1.owl-rtl .owl-item {
    float: right;
}


/* Responsiveness */
@media (max-width: 768px) {
    .users-reviews .title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .reviews-container-wrapper::before,
    .reviews-container-wrapper::after {
        width: 100px;
    }
}





.industry-expert {
    padding: 40px 0 24px 0;
    background: radial-gradient(ellipse 100% 100% at 0% 30%, rgba(224, 197, 255, 0.4) 0%, transparent 100%), radial-gradient(ellipse 100% 100% at 100% 50%, rgba(176, 237, 255, 0.4) 0%, transparent 100%), #FFFFFF;
}
.ind-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ind-header{
    text-align: center;
    margin-bottom: 44px;
}
.ind-header .title {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProDisplayBold);
    margin: 0;
    color: rgba(25, 18, 33, 1);
    margin-bottom: 12px;
}
.ind-header .title span{
    color: rgba(125, 92, 164, 1);
}
.ind-header p{
    font-size: 24px;
    font-weight: 500;
    font-family: 'Nunito Sans';
    margin: 0;
    color: rgba(25, 18, 33, 1);
    white-space: wrap;

}
.ind-card-item {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    backdrop-filter: blur(24px);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}
@media (min-width: 768px){
.ind-card-item:hover {
    /* transform: translateY(-10px); */
    border-color: rgba(125, 92, 164, 1);
}
.ind-card-item:hover .ind-badge {
    transform: translateY(-35px);
    border: 1px solid rgba(125, 92, 164, 1);
}
.ind-card-item:hover .find-match {
    opacity: 1;
    max-height: 40px;
    margin-top: 12px;
}
.location-item:hover .location-arrow {
    visibility: visible;
}
}
.ind-card-item-header {
    max-width: 295px;
    width: 100%;
    background: radial-gradient(ellipse 100% 100% at 0% 50%, rgba(224, 197, 255, 0.4) 0%, transparent 90%), radial-gradient(ellipse 1000px 1000px at 100% 50%, rgba(176, 237, 255, 0.4) 0%, transparent 10%), #FFFFFF;
    min-height: 98px;
    border-radius: 24px;
    /* margin: 0 auto; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.location-flag.location-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
    width: 64px;
    height: 64px;
    padding: 0;
}
.location-flag.location-group img,
.location-flag.location-group .more-count {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.location-flag.location-group .more-count {
    background: #E5E5E5;
    color: #848484;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--SFProBold);
}
.ind-badge {
    width: max-content;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 50%;
    padding: 30px;
    margin-top: -60px;
    transition: all 0.3s ease-in-out;
}
.ind-badge img{
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.ind-badge-text {
    margin-top: 20px;
}
.location-name-arrow{
    display: flex;
    align-items: center;
    text-decoration: none;
    justify-content: space-between;
}
.location-name-arrow img{
    transform: rotate(270deg);
    visibility: hidden;
}

.find-match {
    position: absolute;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: rgba(0, 122, 255, 1);
    font-family: var(--SFProDisplayBold);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    color: rgba(90, 146, 162, 1);
    max-width: 161px;
    width: 100%;
}
.find-match img {
    width: 16px;
    height: auto;
    transform: rotate(270deg);
}
.ind-badge-text h2{
    font-size: 20px;
    font-weight: 700;
    font-family: var(--SFProDisplayBold);
    margin: 0;
    color: rgba(15, 53, 71, 1);
}
.ind-badge-text p{
    font-size: 18px;
    font-weight: 600;
    font-family: 'Nunito Sans';
    margin: 0;
    color: rgba(132, 132, 132, 1);
    margin-top: 4px;
}
.ind-cards{
    width: 100%;
}
.ind-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 56px 24px;
}
.ind-cards-wrapper > .ind-card-item{
    flex: 0 1 calc(25% - 18px);
    max-width: calc(25% - 18px);
}
.ind-blue-btn{
    margin-top: 60px;
}





.top-rated-container{
    margin-top: 40px;
    margin-bottom: 36px;
}
.top-rated-container h2{
    font-size: 48px;
    font-weight: 700;
    font-family: var(--SFProDisplayBold);
    margin: 0;
    color: rgba(25, 18, 33, 1);
    margin-bottom: 24px;
    text-align: center;
}
.top-rated-container .title span{
    color: rgba(125, 92, 164, 1);
}
.top-rated-comp{
    max-width: 730px;
    width: 100%;
}
.top-rated-comp .service-card .services .more {
    color: #1f5f73;
    cursor: pointer;
}
.top-rated-comp .service-card .header .profile {
    flex-direction: column;
    align-items: baseline;
}
.top-rated-comp .service-card .right {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 16px;
}
.top-rated-comp .service-card .right .btn-white,.top-rated-comp .service-card .right .btn-blue{
    flex: 1;
}

.top-rated-comp .service-card .header .profile .top-sec {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-rated-comp .service-card .header .profile .verified-rates {
    display: flex;
    align-items: center;
    gap: 10px;
}
.top-rated-comp .service-card .header .profile .top-sec .name-stars  .name {
    font-size: 32px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 0px;
    word-break: break-word;
}
.top-rated-comp .service-card .header .profile .top-sec .name-stars  .name .company-name-clickable:hover{
    text-decoration: none !important;
}
.top-rated-comp .service-card .header .profile .top-sec .name-stars  .bottom-sec img{
    min-width: 24px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* object-fit: cover; */
}
.top-rated-comp .service-card .header .profile .top-sec .name-stars  .bottom-sec .rating-number{
    font-size: 16px;
    font-weight: 500;
    font-family: 'Nunito Sans';
    color: rgba(25, 18, 33, 1);
    margin: 0px;
    word-break: break-word;
}
.comp-last-rated{
    font-size: 16px;
    font-weight: 500;
    font-family: 'Nunito Sans';
    color: rgba(88, 88, 88, 1);
    margin: 0px;
    margin-left: 12px;
}
.comp-last-rated span{
    font-weight: 700;
}

/* Owl Carousel Customization for VA Stacked Carousel */
/* --- Top Rated Virtual Assistant Companies Carousel --- */

.va-stacked-carousel-wrapper {
    position: relative;
    max-width: 1440px;
    margin: -70px auto 0; /* Apply vertical offset here */
    overflow: visible; /* Prevent horizontal scroll from stacked items */
}

.va-companies-stacked-carousel .owl-stage-outer {
    overflow: visible !important;
    padding: 100px 0 20px 0;
}

.va-companies-stacked-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.va-companies-stacked-carousel .owl-item {
    transition: transform 0.6s ease, opacity 0.6s ease;
    will-change: transform, opacity;
    opacity: 0.9;
    transform: scale(1) translateX(0);
    position: relative;
    z-index: 1;
    width: 730px !important;
    flex-shrink: 0 !important;
}

/* Center active item */
.va-companies-stacked-carousel .owl-item.active.center {
    opacity: 1;
    transform: scale(1.055) translateX(0);
    z-index: 10;
    width: 730px !important;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Items next to center (active but side) */
.va-companies-stacked-carousel .owl-item.active:not(.center) {
    opacity: 0.9;
    transform: scale(1) translateX(0);
    z-index: 5;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Left side overlap (50% stacked under center) */
.va-companies-stacked-carousel .owl-item.active.center + .owl-item {
    transform: scale(1) translateX(-480px); /* Keep scale(1) for consistent interpolation */
}

/* Right side overlap */
.va-companies-stacked-carousel .owl-item:has(+ .owl-item.active.center) {
    transform: scale(1) translateX(480px);
}
#companies-container {
    margin-bottom: 0 !important;
}
#companies-container.grid-mode-companies{
    margin-bottom: 24px !important;
}
#companies-container .companies-list .col-12:last-child {
    margin-bottom: 0 !important;
}
#pagination-container{
    margin-bottom: 40px !important;
}
/* Service Card Refinement */
.service-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(229, 229, 229, 1);
}

.va-companies-stacked-carousel
.owl-item.active.center .service-card {
    box-shadow: -100px 0 100px -60px rgba(0, 0, 0, 0.18),
         100px 0 100px -60px rgba(0, 0, 0, 0.18);
}


/* Card Header */
.profile-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.profile-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info .name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.profile-info .name a {
    color: #7c3aed;
    text-decoration: none;
}

.rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rating .stars {
    display: flex;
    gap: 2px;
}

.rating .stars img {
    width: 14px;
    height: 14px;
}

.rating .rating-val {
    font-weight: 600;
    color: #4b5563;
    font-size: 14px;
}

.rating .last-rated {
    color: #9ca3af;
    font-size: 12px;
}

/* Profile Tags (Right Side) */
.profile-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.profile-tags .tag {
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-tags .tag.verified {
    background-color: #ecfdf5;
    color: #059669;
}

.profile-tags .tag.verified img {
    width: 14px;
}

.profile-tags .tag.price {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* About Section */
.about-section {
    margin-bottom: 24px;
}

.about-section .description {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 0;
}

.about-section .read-more {
    color: #7c3aed;
    font-weight: 600;
    text-decoration: underline;
    margin-left: 4px;
}

/* Features Section (Services/Industries) */
.features-section {
    margin-bottom: 20px;
}

.features-section .section-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tag-pill {
    padding: 6px 14px;
    background-color: #f3f4f6;
    color: #4b5563;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tag-pill.active {
    background-color: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.tag-pill img {
    width: 14px;
}

.more-link {
    color: #7c3aed;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
}

/* Card Footer Buttons */
.card-footer {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.card-footer .btn-outline {
    flex: 1;
    padding: 12px;
    border: 1px solid #7c3aed;
    color: #7c3aed;
    background: transparent;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
}

.card-footer .btn-outline:hover {
    background: #f5f3ff;
}

.card-footer .btn-solid {
    flex: 1;
    padding: 12px;
    background: #7c3aed;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.card-footer .btn-solid:hover {
    background: #6d28d9;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* Navigation Arrows */
.va-stacked-custom-prev, .va-stacked-custom-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 1);
    border: 1.79px solid rgba(229, 229, 229, 1);
    border-radius: 28px;
    color: #1e1b4b;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.va-stacked-custom-prev {
    left: -7%;
}
.va-stacked-custom-next { right: -7%; }

.va-stacked-custom-prev:hover,
.va-stacked-custom-next:hover {
    background: rgba(125, 92, 164, 1);
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

/* Pagination Dots */
.va-stacked-custom-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.va-stacked-custom-dots .dot {
    width: 10px;
    height: 10px;
    background: #e2e8f0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.va-stacked-custom-dots .dot.active {
    width: 40px;
    height: 8px;
    background: rgba(125, 92, 164, 1);
    border-radius: 100px;
}

/* Explore Button */
.btn-explore-all {
    background: rgba(125, 92, 164, 1);
    color: #ffffff;
    padding: 16px 40px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-explore-all:hover {
    background: #6d28d9;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(124, 58, 237, 0.3);
}
.explore-section{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px
}
.top-rated-comp .reviews-wrapper .d-flex {
    flex-direction: row;
}
.top-rated-comp .reviews-wrapper .star-rating {
    flex-direction: row;
}
.stars-avg-count{
    display: flex;
}
/* Responsive */
@media (max-width: 991.98px) {
    .va-stacked-carousel-wrapper {
        padding: 0;
        margin-top: 20px;
        overflow: hidden; /* Fix horizontal scroll */
    }

    .va-stacked-custom-prev,
    .va-stacked-custom-next {
        display: none;
    }

    /* Disable stack effect and enable peeking */
    .va-companies-stacked-carousel .owl-item,
    .va-companies-stacked-carousel .owl-item.active.center,
    .va-companies-stacked-carousel .owl-item.active.center + .owl-item,
    .va-companies-stacked-carousel .owl-item:has(+ .owl-item.active.center) {
        transform: none !important;
        opacity: 1 !important;
        width: 320px !important; /* Fixed width for better control of peeking */
        max-width: 85vw !important;
    }
    .va-companies-stacked-carousel
    .owl-item.active.center .service-card {
        box-shadow: none;
    }
    .va-companies-stacked-carousel .owl-stage-outer {
        padding: 40px 20px 20px 20px !important;
        overflow: visible !important;
    }

    .va-companies-stacked-carousel .owl-item:not(.center) {
        display: block !important;
    }

    .top-rated-comp {
        max-width: 100%;
    }
    .service-card .header .profile .image {
        width: 52px;
        height: 52px;
        font-size: 14px;
    }
    .service-card {
        padding: 20px;
    }
    .top-rated-comp .service-card .header .profile .top-sec .name-stars  .name {
        font-size: 16px;
    }
    .top-rated-comp .service-card .header .profile .top-sec .name-stars  .bottom-sec img {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
    }
    .top-rated-comp .reviews-wrapper .d-flex {
        flex-direction: column;
    }
    .top-rated-comp .reviews-wrapper .star-rating {
        flex-direction: row !important;
    }
    .comp-last-rated {
        font-size: 12px;
        margin-left: 0px !important;
    }
    .service-card .header .verified img {
        width: 16px;
    }
    .top-rated-comp .service-card .header .profile {
        gap: 13px;
    }
    .service-card .header .verified {
        height: 26px;
        padding: 4px 10px;
        font-size: 12px;
        width: 128px;
        gap: 2px;
        flex: 1;
    }
    .service-card .header .tag {
        height: 26px;
        font-size: 12px;
        padding: 4px 10px;
        flex: 1;
    }
    .popular-section .text, .custom-section .text, .dynamic-text {
        font-size: 14px;
    }
    .top-rated-container h2 {
        font-size: 24px;
    }
    .top-rated-comp .service-card .header {
        padding-bottom: 0px;
        margin-bottom: 13px;
        border-bottom: none;
    }
    .top-rated-comp .service-card .about-section {
        margin-top: 0px;
        margin-bottom: 18px
    }
    .top-rated-comp .service-card .title {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .top-rated-comp .service-card .services .service, .service-card .services .more {
        font-size: 14px;
    }
    .top-rated-comp .service-card .services .service img {
        width: 14px;
    }
    .top-rated-comp .service-card .services {
        margin-bottom: 8px;
        gap: 8px;
    }
    .top-rated-comp .service-card .right {
        gap: 8px;
        margin-top: 16px;
    }
    .top-rated-comp .service-card .right .btn-white, .top-rated-comp .service-card .right .btn-blue {
        font-size: 14px !important;
    }
    .profile-main {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .va-stacked-carousel-wrapper {
        padding: 0;
    }
    .va-companies-stacked-carousel .owl-stage-outer {
        padding: 20px 0 20px 0 !important;
    }
}

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

.fadeInUp {
    animation: fadeInUp 0.6s ease forwards;
}







.location-section {
    padding-top: 40px !important;
    padding-bottom: 52px !important;
    background: radial-gradient(ellipse 100% 100% at -60% 70%, rgba(224, 197, 255, 0.4) 70%, transparent 100%), radial-gradient(ellipse 70% 200% at 100% 100%, rgba(176, 237, 255, 0.4) 0%, transparent 100%), #FFFFFF;
}
.location-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.location-header{
    margin-bottom: 24px !important;
}
.location-cards-wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
}
.location-blue-btn{
    margin-top: 40px;
}
.location-flag{
    width: 65px;
    height: 50px;
}
.location-flag img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.va-providers .title{
    max-width: 800px !important;
}
.va-providers .steps .step .title {
    max-width: 170px !important;
}
.va-providers .steps{
    padding-top: 30px !important;
}



.leads-section .container {
    background: radial-gradient(ellipse 100% 100% at -70% 40%, rgba(224, 197, 255, 1) 80%, transparent 100%), radial-gradient(ellipse 70% 200% at 100% 100%, rgba(176, 237, 255, 1) 50%, transparent 100%), #FFFFFF;
    padding: 0;
    border-radius: 24px;
}
.leads-section .client-title {
    max-width: 650px !important;
}
.leads-section .client-title span{
    color: rgba(125, 92, 164, 1);
}
.leads-section .clients-lists {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}
.leads-section .clients-lists .client-li{
    display: flex;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(113, 115, 118, 1);
}
.leads-section .client-btn{
    width: max-content;
}
.leads-section .col-12{
    flex: 1;
}
.leads-section .col-12:last-child{
    flex: 0.85;
}

/* Responsive Header Styles */
.mobile-controls {
    display: none;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.mobile-controls button {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-controls img {
    width: 24px;
    height: 24px;
}

/* ── Mobile Search Overlay ── */
.mobile-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    pointer-events: none;
}

.mobile-search-overlay.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-search-overlay-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.mobile-search-overlay-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 0 16px;
    height: 48px;
}

.mobile-search-overlay-input-wrapper .mobile-search-overlay-icon {
    width: 20px;
    height: 20px;
    opacity: 0.5;
    flex-shrink: 0;
}

.mobile-search-overlay-input-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    height: 100%;
}

.mobile-search-overlay-input-wrapper input::placeholder {
    color: #a0a0a0;
}

.mobile-search-overlay-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-search-overlay-close img {
    width: 18px;
    height: 18px;
}

.mobile-search-overlay-results {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.mobile-search-overlay-results.show {
    display: block;
}

.mobile-search-overlay-results .hsd-title {
    font-size: 14px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: #A0A0A0CC;
    padding: 6px;
    text-transform: uppercase;
}

.mobile-search-overlay-results .hsd-queries {
    display: flex;
    flex-direction: column;
    padding: 6px;
}

.mobile-search-overlay-results .hsd-query-item {
    padding: 10px 0;
    font-size: 15px;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-search-overlay-results .hsd-query-item:last-child {
    border-bottom: none;
}

.mobile-search-overlay-results .hsd-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
}

.mobile-search-overlay-results .hsd-service-tag {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--SFProMedium);
    text-decoration: none;
    background-color: #7CC0D41A;
    color: #5A92A2;
}

.mobile-search-overlay-results .hsd-industry-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 14px;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    flex: 1 1 auto;
}

.mobile-search-overlay-results .hsd-industry-item .hsd-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ede9fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #7c3aed;
    overflow: hidden;
}

.mobile-search-overlay-results .hsd-industry-item .hsd-icon img {
    width: 60%;
    height: 60%;
    object-fit: cover;
}

.mobile-search-overlay-results .hsd-companies-grid {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
}

.mobile-search-overlay-results .hsd-company-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-search-overlay-results .hsd-company-row:last-child {
    border-bottom: none;
}

.mobile-search-overlay-results .hsd-company-row .hsd-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background-color: rgba(110, 193, 228, 0.2);
    color: rgba(90, 146, 162, 1);
    overflow: visible;
}

.mobile-search-overlay-results .hsd-company-row .hsd-avatar.pro-avatar {
    border: 1px solid rgba(88, 1, 181, 1);
    padding: 1.5px;
}

.mobile-search-overlay-results .hsd-company-row .hsd-avatar .hsd-pro-crown {
    position: absolute;
    top: -4px;
    right: -1px;
    width: 16px;
    height: 16px;
}

.mobile-search-overlay-results .hsd-company-row .hsd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mobile-search-overlay-results .hsd-company-row .hsd-company-info {
    flex: 1;
    min-width: 0;
}

.mobile-search-overlay-results .hsd-company-row .hsd-company-name {
    font-size: 15px;
    font-family: var(--SFProMedium);
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-search-overlay-results .hsd-company-row .hsd-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-family: var(--SFProMedium);
    color: #666;
    flex-shrink: 0;
}

.mobile-search-overlay-results .hsd-company-row .hsd-rating img {
    width: 14px;
    height: 14px;
}

.mobile-search-overlay-results .hsd-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    font-size: 14px;
    font-family: var(--SFProMedium);
    font-weight: 600;
    text-decoration: none;
    border-top: 1px solid #e5e5e5;
    margin-top: 8px;
    color: #5A92A2;
}

.mobile-search-overlay-results .no-filtered-data {
    text-align: center;
    padding: 60px 20px;
}

.mobile-search-overlay-results .no-filtered-data .image img {
    width: 120px;
    margin-bottom: 16px;
}

.mobile-menu {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100dvh - 80px);
    background: rgba(255, 255, 255, 1) !important;
    z-index: 9999;
    display: none;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.mobile-menu.active {
    display: flex;
    flex-direction: column;
}

.mobile-menu .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.mobile-menu .mobile-menu-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.mobile-menu .menu-views-wrapper {
    display: flex;
    width: 200%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    min-height: 0; /* Important for flex children with overflow */
}

.mobile-menu .menu-view {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.mobile-menu .main-view {
    overflow-y: auto;
}

.mobile-menu .nav-menu-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    gap: 0 !important;
}

.mobile-menu.drilldown-active .menu-views-wrapper {
    transform: translateX(-50%);
}



/* Drilldown View Styling */
.mobile-menu .drilldown-view {
    background: #fff;
    overflow-y: auto;
}

.mobile-menu .drilldown-header {
    padding: 24px 20px;
    padding-right: 0;
    background: linear-gradient(135deg, #F5F3FF 0%, #EFF6FF 100%);
    border-radius: 16px;
    margin: 15px;
    margin-right: 0;
    display: flex;
    align-items: center;
    min-height: 120px;
    overflow: hidden;
}

.mobile-menu .back-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    margin-right: 12px;
    z-index: 2;
}

.mobile-menu .back-btn img {
    width: 20px;
    height: 20px;
}

.mobile-menu .drilldown-header-content {
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.mobile-menu .drilldown-title {
    font-size: 24px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
    line-height: 1.2;
}

.mobile-menu .drilldown-illustration {
    width: 140px;
}

.mobile-menu .drilldown-illustration img {
    width: 100%;
    height: auto;
}

.mobile-menu .drilldown-links {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
}

.mobile-menu .drilldown-item {
    padding: 16px 0;
    font-family: var(--SFProMedium);
    font-size: 16px;
    font-weight: 500;
    color: rgba(25, 18, 33, 1);
    cursor: pointer;
}

.mobile-menu .drilldown-item:first-child {
    color: rgba(125, 92, 164, 1);
}

.mobile-menu .nav-item {
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    width: 100%;
}

.mobile-menu .navbar-link {
    padding: 18px 0;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: #191221 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-decoration: none;
}

.mobile-menu .navbar-link .mobile-arrow {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.mobile-menu .bottom-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px;
    background-color: rgba(255, 255, 255, 1);
    /* border-top: 1px solid #e5e5e5; */
    margin-top: auto;
    flex-shrink: 0;
}
.mobile-menu .bottom-actions .ba-btns{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;

}
.mobile-menu .bottom-actions .btn-white, .mobile-menu .bottom-actions .btn-blue {
    flex: 1;
    height: 48px !important;
    max-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 16px;
}

.mobile-menu .user-link {
    text-decoration: none;
    margin-top: 8px;
}

.mobile-menu .user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(124, 192, 212, 1);
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    color: white;
}

.mobile-menu .user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #7CC0D4;
    padding: 6px;
}

.mobile-menu .user span {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

/* Mobile Profile Trigger */
.mobile-profile-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 8px;
}

.mobile-profile-trigger:active {
    background: rgba(100, 170, 192, 1);
}

.mobile-profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.mobile-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mobile-profile-initials {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
}

.mobile-profile-name {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--SFProMedium);
    color: var(--text-color);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-profile-arrow {
    width: 24px;
    height: 24px;
    transform: rotate(270deg);
    flex-shrink: 0;
}

/* Drilldown Profile Items */
.drilldown-profile-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.drilldown-profile-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.drilldown-logout-item {
    color: #e53e3e;
    cursor: pointer;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

.mobile-menu.drilldown-active .bottom-actions {
    display: none !important;
}

/* Mobile Accordion Styles */
.mobile-menu .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fff;
}

.mobile-menu .nav-item.active .accordion-content {
    max-height: 1000px; /* Adjust based on content */
    transition: max-height 0.5s ease-in;
}

.mobile-menu .nav-item.active .mobile-arrow {
    transform: rotate(180deg);
}

.mobile-menu .sub-menu {
    display: flex;
    flex-direction: column;
}

.mobile-menu .sub-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 16px 40px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--SFProMedium);
}

.mobile-menu .sub-item:last-child {
    border-bottom: none;
}

.mobile-menu .sub-item:active {
    background: #f9f9f9;
}

.mobile-menu .sub-item span {
    font-size: 16px;
    color: rgba(78, 78, 78, 1);
    font-weight: 500;
}

.mobile-menu .sub-item img {
    width: 24px;
    height: 24px;
    opacity: 1;
    transform: rotate(270deg);
}
.sub-item-icon{
    display: flex;
    gap: 8px;
}
.sub-item-icon img{
    display: flex;
    gap: 8px;
     transform: rotate(0deg) !important;
}

.location-solution{
    margin-top: 40px;
}

.location-solution-wrapper{
    display: flex;
    flex-direction: column;
}
.location-top{
    margin-bottom: 52px;
    padding-bottom: 20px;
    /* border-bottom: 1px solid rgba(229, 229, 229, 1); */
}
.location-solution-top-wrapper{
    display: flex;
    flex-direction: column;
}
.location-solution-top-wrapper .title{
    font-size: 24px;
    font-weight: 700;
    font-family: var(--SFProBold);
    color: rgba(125, 92, 164, 1);
    margin: 0;
    margin-bottom: 32px;
}
.location-solution-top-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
}
.location-solution-top-li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.location-solution-top-li a{
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(25, 18, 33, 1);
}
.location-solution-top-li a:hover{
    color: rgba(125, 92, 164, 1);
    text-decoration: underline;
}
.view-all-location-solution{
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--SFProMedium);
    color: rgba(125, 92, 164, 1);
    text-decoration: underline;
}

/* Service Hierarchy Styles */
.contact-service-hierarchy {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.contact-parent-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-parent-service .custom-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.contact-parent-service .contact-service-toggle {
    width: 24px;
    height: 24px;
    background-color: #7D5CA4;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.contact-parent-service label {
    margin-bottom: 0 !important;
    color: var(--text-color) !important;
}
.contact-parent-service .contact-service-toggle:hover {
    background-color: #6a4d8c;
}

.contact-parent-service .contact-service-toggle span {
    margin-top: -2px;
}

.contact-parent-service .contact-service-title {
    font-size: 20px;
    font-weight: 500;
    color: #191221;
    font-family: var(--SFProMedium);
}

.contact-service-child-list {
    padding-left: 36px;
    display: none;
    flex-direction: column;
    margin-top: 12px;
}
.company-visibility {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255, 174, 0, 0.08);
    width: max-content;
    margin: 0 auto;
    border-radius: 12px;
    max-width: 630px;
    padding: 20px 24px;
}
.company-visibility span{
    font-size: 14px;
    font-weight: 500;
    font-family: 'Eudoxus Sans';
}
.contact-service-child-list.show {
    display: flex;
}

/* Review Search Button Styling */
.input-with-btn {
    display: flex;
    gap: 12px;
    align-items: center;
}

.input-with-btn .input {
    flex: 1;
}

.btn-search-review {
    padding: 10px 20px !important;
    font-size: 16px !important;
    height: 48px;
    border-radius: 12px !important;
    transition: all 0.3s ease;
}

/* Modal Styling */
.review-search-modal .modal-content {
    border-radius: 24px;
    border: none;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 16px;
}

.modal-header-custom {
    padding: 32px 32px 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.platform-icon-wrapper {
    width: 150px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.close-modal-btn {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Search Results List */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 450px;
    overflow-y: auto;
    padding-right: 8px;
}

.search-results-list::-webkit-scrollbar {
    width: 6px;
}

.search-results-list::-webkit-scrollbar-thumb {
    background: #E5E5E5;
    border-radius: 10px;
}

/* Result Item Styling */
.search-result-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 20px;
    cursor: pointer;
}

.search-result-item:hover {
    border-color: var(--blue);
}

.result-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #F9FAFB;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid #F0F0F0;
    /* object-fit: contain; */
}

.result-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-info {
    flex: 1;
}

.result-name {
    font-family: var(--SFProMedium);
    font-size: 18px;
    color: #191221;
    margin-bottom: 4px;
    line-height: 1.2;
}

.result-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #656565;
}

.result-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.result-rating img {
    width: 14px;
    height: 14px;
}

.result-select-btn {
    background: #F7F7F7;
    color: #191221;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    border: none;
}

.search-result-item:hover .result-select-btn {
    background: var(--blue);
    color: #FFFFFF;
}
.btn-link-no-style{
    background: none;
    border: none;
}
.select2-container--default .admin-work-details-container .select2-selection__rendered {
    color: var(--text-color);
}
#success-modal-submit .modal-dialog .modal-content.small-modal .content .body h4 {
    font-family: var(--SFProBold) !important;
}
.user-email-link {
    color: rgba(125, 92, 164, 1) !important;
}
#success-modal-submit .modal-dialog .modal-content.small-modal .content .body .success-message {
    font-family: 'Nunito Sans';
}
@media (max-width: 768px) {
    .modal-header-custom {
        padding: 24px 24px 16px;
    }
    .modal-body-custom {
        padding: 0 24px 24px;
    }
    .search-result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .result-select-btn {
        width: 100%;
    }
    .input-with-btn {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (min-width: 1920px){
    .mega-menu-container {
        width: 1510px !important;
    }
    .mega-menu-container.show {
        transform: translateX(-24%) translateY(18px) !important;
    }
    .services-navbar .nav-item.active::before {
        bottom: -20px !important;
        left: -8px !important;
    }
}
@media (max-width: 1600px){
    .service-cards-wrapper::after {
        width: 55px;
    }
}
/* Breakpoints */
@media (max-width: 1399.98px) {
    .container {
        max-width: 1140px !important;
    }
    .landing-header-container {
        max-width: 1670px !important;
        padding: 14px clamp(20px, 2vw, 136px);
    }
    .landing-header .inner .logo {
        width: 140px !important;
    }
    .services-navbar {
        margin-left: 36px !important;
    }
    .nav-menu-wrapper {
        gap: 18px !important;
    }
    .services-navbar .nav-item.active::before {
        bottom: -20px !important;
    }
    .services-navbar .navbar-link {
        font-size: 18px !important;
    }
    .mega-menu-container {
        width: 1150px !important;
    }
    .mega-menu-container.show {
        transform: translateX(-34%) translateY(17px) !important;
    }
    .mega-menu-sidebar {
        width: 300px !important;
    }
    .mega-menu-tab-content {
        /* padding: 24px !important; */
    }
    .mega-menu-services-grid {
        /* gap: 32px !important;
        padding-bottom: 24px !important; */
    }
    .mega-menu-services-grid {
        margin: 20px 0 0 20px;
    }
    .mega-menu-sidebar-image {
        margin: 22px 16px 0 0;
        /* padding: 24px; */
        max-width: 280px;
    }
    /* .mega-menu-link{
        margin-top: 8px;
    } */
    .mega-menu-tab-content {
        min-height: auto;
    }
    .mega-menu-list {
        column-gap: clamp(0px, 4%, 48px);
    }
    .header-section .content .filter-box .search-box .left {
        flex: 0.95;
    }
    .header-section .content .filter-box .search-box .right {
        flex: 0;
    }
    .header-section .content {
        max-width: 1140px;
    }
    .hero-section .content .title {
        max-width: 920px;
        margin: auto;
        margin-bottom: 8px;
    }
    .reviews-badge {
        padding: 36px 24px !important;
    }
    .ind-header p {
        white-space: normal;
    }
    .mega-menu-simple-image {
        max-width: 550px;
        /* flex-shrink: 0; */
    }
    .top-rated-container{
        max-width: 100% !important;
    }
    .top-rated-comp {
        max-width: 510px;
        width: 100%;
    }
    .va-stacked-carousel-wrapper {
        overflow: hidden;
        max-width: 1200px;
        margin: -70px auto 0
    }
     .va-stacked-carousel-wrapper .va-companies-stacked-carousel{
        transform: translateX(50px); /* Compensate for visual left shift */
    }
    .va-companies-stacked-carousel .owl-item {
        width: 480px !important;
    }
    .va-companies-stacked-carousel .owl-item.active.center {
        width: 550px !important;
        z-index: 10;
    }
    .va-stacked-custom-prev {
        left: 0%;
    }
    .va-stacked-custom-next {
        right: 0%;
    }
    /* Right side item - move Left to stack behind */
    .va-companies-stacked-carousel .owl-item.active.center + .owl-item {
        transform: scale(0.9) translateX(-380px);
        z-index: 5;
        opacity: 0.9;
    }
    /* Left side item - move Right to stack behind */
    .va-companies-stacked-carousel .owl-item:has(+ .owl-item.active.center) {
        transform: scale(0.9) translateX(310px);
        z-index: 5;
        opacity: 0.9;
    }
    .company-reviews .reviews-container {
        gap: 40px;
    }
    .service-card .service-reviews {
        gap: 30px;
        margin-bottom: 32px;
    }
    /* .select2-results__options, .select2-container--default .select2-results>.select2-results__options {
        max-height: 165px !important;
    } */
     .user-dashboard .right-container .pro-admin-content .form-item .text {
        width: auto !important;
        margin: 8px 0;
    }
    .temp-company-address-header .col-12 {
        width: max-content !important;
    }
    .temp-company-address-header-divider {
        display: none;
    }
    .localization-select2-drop, .port-service-details-select2-drop {
        min-width: auto !important; 
        max-width: auto !important;
    }
    .login-r,.login-l {
       width: 15vw;
    }
    .admin-work-details-dropdown {
        min-width: 29vw !important;
        max-width: 450px !important;
    }


    .user-dashboard .right-container .top-bar .left {
        justify-content: space-between;
        width: 100%;
        gap: 12px;
        flex-wrap: wrap;
    }
    .get-pro-btn.responsive-get-pro-btn{
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .get-pro-btn.responsive-get-pro-btn .admin-preview-btn, .get-pro-btn.responsive-get-pro-btn .btn-blue {
        width: 100%;
        max-width: 180px;
    }
    .get-pro-btn{
        display: none !important;
    }

}
@media (min-width: 1200px){
    .modal-content.small-modal.submit-company-modal{
        max-width: 700px !important;
    }
     .modal-content.small-modal.submit-company-modal .content {
        padding: 24px;
    }
    .submit-description {
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .submit-description p {
        font-size: 18px;
    }
}
@media (max-width: 1199.98px) {
    .container {
        max-width: 960px !important;
        margin: 0 auto;
    }
    .landing-header-container {
        max-width: 1670px !important;
        padding: 14px clamp(20px, 2vw, 136px);
    }
    .landing-header .inner .logo {
        width: 100px !important;
    }
    .services-navbar {
        margin-left: 20px !important;
    }
    .services-navbar .container {
        padding: 0 8px !important;
    }
    .nav-menu-wrapper {
        gap: 12px !important;
    }
    .services-navbar .nav-item.active::before {
        bottom: -15px !important;
    }
    .mega-menu-container.show {
        transform: translateX(-31%) translateY(15px) !important;
        max-width: 960px;
    }
    .mega-menu-sidebar {
        width: 230px !important;
    }
    .mega-menu-tab {
        padding: 15px !important;
        font-size: 14px !important;

    }
    .mega-menu-list {
        column-gap: clamp(0px, 4%, 0px);
    }
    .services-navbar .navbar-link {
        font-size: 14px !important;
    }
    .landing-header .btn-blue,.landing-header .btn-white,.landing-header .btn-green {
        font-size: 14px;
        padding: 14px 20px;
        max-height: 48px;
    }
    .custom-navbar .inner .right {
        gap: 8px !important;
    }
    .mega-menu-tab-content {
        /* padding: 17px !important; */
        margin: auto;
    }
    .mega-menu-services-grid {
        /* gap: 24px !important; */
        /* padding-bottom: 18px !important; */
    }
    .mega-menu-list {
        /* gap: 12px !important; */
    }
    .mega-menu-services-grid {
        margin: 20px 0 0 20px;
        width: 60%;
    }
    .mega-menu-list li a {
        font-size: 14px !important;

    }
    .mega-menu-sidebar-image {
        max-width: 190px !important;
        margin: 12px 17px 0 0 !important;
        min-height: 240px !important;
        width: 35%;
    }
    .mega-menu-list {
        padding-bottom: 14px;;
    }
    .mega-menu-list li {
        padding-bottom: 8px;
    }
    .header-section .content {
        max-width: 950px;
    }
    .reviews-badge {
        padding: 23px 12px !important;
    }
    .reviews-platform-badge {
        gap: 16px;
    }
    .partner-header .title {
        font-size: 32px;
        margin-bottom: 8px;
    }
    .partner-card {
        gap: 10px;
    }
    .partner-header p {
        font-size: 16px;
    }
    .p-card-header .title {
        font-size: 20px;
    }
    .p-card-header img {
        width: auto;
        max-width: 40%;
        height: auto;
        max-height: 80px;
    }
    .p-card-item {
        font-size: 16px;
    }
    .partner-cards-container {
        margin-bottom: 24px;
    }
    .partner-card .btn-blue, .btn-white {
        font-size: 16px !important;
        padding: 12px 20px !important;
    }
    .ind-badge {
        padding: 20px;
        margin-top: -90px;
    }
    .ind-cards-wrapper {
        gap: 56px 24px;
    }
    .ind-cards-wrapper > .ind-card-item{
        flex-basis: calc(33.333% - 16px);
        max-width: calc(33.333% - 16px);
    }
    .location-cards-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }
    .step-text p {
        font-size: 16px;
    }
    .leads-section .box .data .title {
        font-size: 26px;
    }
    .leads-section .box .data {
        padding: 20px 20px;
        /* padding-left: 30px; */
    }
    .leads-section .box {
        padding: 0;
    }
    .mega-menu-simple-layout {
        gap: 20px;
        padding: 20px 24px 18px;
    }
    .mega-menu-simple-image {
        max-width: 425px;
        /* flex-shrink: 0; */
    }
     .top-rated-container{
        max-width: 100% !important;
    }
    .top-rated-comp {
        max-width: 480px;
        width: 100%;
    }
    .va-stacked-carousel-wrapper {
        overflow: hidden;
        max-width: 990px;
        margin: -70px auto 0
    }
     .va-stacked-carousel-wrapper .va-companies-stacked-carousel{
        transform: translateX(0px); /* Compensate for visual left shift */
    }
    .va-companies-stacked-carousel .owl-item {
        width: 480px !important;
    }
    .va-companies-stacked-carousel .owl-item.active.center {
        width: 480px !important;
        z-index: 10;
    }
    .va-stacked-custom-prev {
        left: 0%;
    }
    .va-stacked-custom-next {
        right: 0%;
    }
    /* Right side item - move Left to stack behind */
    .va-companies-stacked-carousel .owl-item.active.center + .owl-item {
        transform: scale(0.9) translateX(-450px);
        z-index: 5;
        opacity: 0.9;
    }
    /* Left side item - move Right to stack behind */
    .va-companies-stacked-carousel .owl-item:has(+ .owl-item.active.center) {
        transform: scale(0.9) translateX(450px);
        z-index: 5;
        opacity: 0.9;
    }
    .top-rated-container h2 {
        margin-top: 24px;
    }
    .explore-section {
        margin-bottom: 32px;
    }
    .location-countries,.location-states,.location-cities {
        max-width: 200px;
    }
    #locations-menu .location-title {
        font-size: 14px;
    }
    #locations-menu .location-view-all {
        font-size: 14px;
    }
    .header-search-dropdown .hsd-title {
        font-size: 14px;
        margin-bottom: 12px;
    }
    .header-search-dropdown .hsd-queries {
        gap: 12px;
        margin-bottom: 18px;
    }
    .header-search-dropdown .hsd-query-item {
        font-size: 16px;
    }
    .header-search-dropdown .hsd-items .hsd-service-tag {
        font-size: 14px;
    }
    .header-search-dropdown .hsd-items {
        margin-bottom: 18px;
    }
    .header-search-dropdown .hsd-companies-grid {
        column-gap: 36px;
        row-gap: 18px;
    }
    .header-search-dropdown .hsd-company-row .hsd-company-info .hsd-company-name {
        font-size: 18px;
    }
    .header-search-dropdown .hsd-company-row .hsd-rating {
        font-size: 14px;
    }
    .header-search-dropdown .hsd-see-all {
        font-size: 16px;
    }
    .global-search .search-wrapper {
        height: 48px;
    }
    .global-search .search-wrapper input {
        font-size: 14px;
    }
    .global-search .search-wrapper .header-search-icon img {
        width: 18px;
        height: 18px;
    }
    .global-search .search-wrapper .header-search-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .btn-notification, .btn-messanger {
        height: 48px;
        width: 48px;
    }
    .custom-navbar .inner .right .user {
        height: 48px;
        width: 48px;
    }
    .custom-navbar .user-profile .user-profile-wrapper .user-name-dropdown {
        height: 100px;
    }
    .custom-navbar .user-profile .user-profile-wrapper .user-name-dropdown h3 {
        font-size: 14px;
    }
    .custom-navbar .user-profile .user-profile-wrapper .user-name-dropdown p {
        font-size: 18px;
    }
    .custom-navbar .user-profile .user-profile-wrapper {
        width: 240px;
    }
    .custom-navbar .user-profile .user-profile-wrapper .item {
        gap: 10px;
        padding: 14px;
        font-size: 14px;
    }
    .section-top-title {
        margin-top: 24px;
    }
    .breadcrumbs-right span {
        font-size: 18px;
    }
    .breadcrumbs-left {
        font-size: 14px;
    }
    .section-top-title .date {
        font-size: 14px;
    }
    .popular-section .title, .custom-section .title {
        font-size: 36px;
        margin-bottom: 24px;
    }
    .popular-section .text, .custom-section .text, .dynamic-text {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .filter-wrapper {
        margin-bottom: 24px;
    }
    .custom-section .top-filtes {
        margin-bottom: 24px;
    }
    .filter-wrapper .right {
        gap: 12px;
    }
    #location-search-input {
        font-size: 14px;
    }
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        font-size: 14px;
    }
    .filter-wrapper .right .filter-btn {
        font-size: 14px;
        width: 20% !important;
    }
    .filter-wrapper .right .child {
        min-width: 0;
    }
    .custom-section .applied-titles {
        font-size: 14px;
    }
    #companies-container{
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }
    .custom-section .top-filtes .text {
        font-size: 18px;
    }
    .custom-sort-select {
        height: 48px !important;
    }
    .custom-section .top-filtes .right .label {
        font-size: 14px;
    }
    .custom-sort-select .select2-selection__arrow {
        top: 50% !important;
        transform: translateY(-50%);
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 14px;
    }
    .service-card {
        padding: 24px;
        padding-bottom: 0;
        margin-bottom: 24px;
    }
    .gradient-bg-pro {
        margin: -24px -24px 0 -24px;
        padding: 24px 24px 0 24px;
    }
    .service-card .header .verified {
        height: 32px;
        padding: 8px 20px;
        font-size: 14px;
    }
    .service-card .header .tag {
        height: 32px;
        padding: 8px 20px;
        font-size: 14px;
    }
    .service-card .header .left .top-sec {
        gap: 12px;
    }
    .service-card .header .verified img {
        width: 18px;
    }
    .star-rating.large .star {
        width: 20px;
        height: 20px;
    }
    .rating-number {
        font-size: 14px !important;
    }
    .service-card .header .comp-locations img {
        width: 18px;
        height: 18px;
    }
    .service-card .header .comp-locations span {
        font-size: 14px;
    }
    .service-card .header {
        padding-bottom: 24px;
    }
    .service-card .title {
        font-size: 18px !important;
    }
    .service-card .services {
        margin-bottom: 18px;
        gap: 12px;
    }
    .service-card .about-section {
        margin-top: 12px;
        margin-bottom: 18px;
    }
    .service-card .services .service, .service-card .services .more {
        font-size: 14px;
    }
    .service-card .footer {
        padding: 24px 0px;
        font-size: 18px;
    }
    .location-solution {
        margin-top: 24px;
    }
    .location-solution-top-li a {
        font-size: 14px;
    }
    .location-solution-top-items {
        gap: 16px;
    }
    .view-all-location-solution {
        margin-top: 16px;
        font-size: 14px;
    }
    .location-top {
        margin-bottom: 32px;
    }
    .service-card.grid-fixed-height .dynamic-text .read-more-link {
        text-wrap: auto;
    }
    .service-card.grid-fixed-height .dynamic-text .read-more-link::after {
        display: none;
    }
    .service-card .service-reviews .slider-wrapper-container {
        overflow: hidden !important;
    }

    /* 2-line limit for about section on mobile */
    .about-section .dynamic-text[data-is-expanded="false"] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }

    .about-section .dynamic-text[data-is-expanded="false"] .read-more-link {
        display: inline-block !important;
        position: absolute;
        bottom: 0;
        right: 0;
        background: white;
        padding-left: 10px;
    }
    .company-reviews .reviews-container {
        justify-content: flex-start;
        gap: 10px;
    }
    .company-card .header .data .verified {
        height: 26px;
        width: 128px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .company-card .header .data .verified img {
        width: 16px;
    }
    .company-card .header .data .name {
        font-size: 20px;
        margin-top: 4px;
        margin-bottom: 4px;
    }
    .company-card .star-rating.large .star {
        width: 12px !important;
        height: 12px !important;
    }
    .pro-company-header {
        padding: 16px !important;
    }
    .reivews-star-average {
        font-size: 14px;
    }
    .company-card .header .left .image {
        height: 156px;
        width: 156px;
        border-radius: 50%;
    }
    .pro-comp-crown {
        position: absolute;
        width: 30px !important;
        height: 30px !important;
        top: 5px;
        right: 5px;
    }
    .pro-comp-right-btns {
        gap: 8px;
    }
    .pro-comp-main-actions {
        gap: 8px;
    }
    .pro-comp-detail {
        width: 45% !important;
    }
    .pro-comp-right {
        width: 55%;
    }
    /* .select2-results__options, .select2-container--default .select2-results>.select2-results__options {
        max-height: 165px !important;
    } */
     .service-cards-wrapper::after {
        width: 105px;
    }
    .modal-content.small-modal.submit-company-modal {
        max-width: 700px !important;
    }
    .submit-description {
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .submit-desc-top img, .submit-desc-bottom img{
        width: 22px;
        height: 22px;
    }
    .submit-description p {
        font-size: 16px;
    }
    .modal-content.small-modal.submit-company-modal .content {
        padding: 24px;
    }
    .mega-menu-link {
        /* margin-top: 8px; */
        margin: auto 0 0 0;
    }

    .pro-admin-tabs {
        padding: 0px;
    }

    .responsive-location-row{
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .responsive-location-col{
        width: 100% !important;
        max-width: 100% !important;
    }
    .responsive-services-row{
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .responsive-services-col{
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 991.98px) {
    .container {
        max-width: 990px !important;
        padding: 0 15px;
    }
    .services-navbar,
    .custom-navbar .inner .right {
        display: none !important;
    }

    /* Company Detail Page Responsiveness */
    .custom-bread-crumbs-container {
        margin: 18px 0px;
    }
    .company-card {
        padding: 16px;
        border-radius: 20px;
    }

    .pro-company-banner {
        height: 135px;
    }

    .pro-company-banner .pro-company-banner-image {
        height: 100%;
        object-fit: cover;
    }

    .company-card.pro-company-card {
        /* margin-top: -10px; */
        padding-top: 80px;
    }
    .pro-company-header {
        padding: 16px !important;
    }
    .company-card .pro-company-header {
        display: grid !important;
        grid-template-columns: 1fr auto auto;
        gap: 8px;
        align-items: flex-start;
        padding-bottom: 24px;
        margin-bottom: 16px;
    }
    .company-card .header .btn-blue{
        margin-top: 16px;
    }

    .company-card .header .left.comp-detail {
        grid-column: 1;
        width: 100% !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .company-card .header .right,
    .pro-comp-right-wrapper,
    .pro-comp-right-btns {
        display: contents !important;
    }

    .company-card .pro-company-header .right .share, .pro-comp-right-btns .contact-phone {
        grid-row: 1;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 8px;
        border: 1px solid #E2E8F0;
    }
    .company-card .header .right .share img, .pro-comp-right-btns .contact-phone img{
        width: 14px;
        height: 14px;
    }
    .company-card .header .right .share {
        font-size: 14px;
        height: 48px;
    }
    .company-card .pro-company-header .right .share{
        width: max-content !important;
        border-radius: 0px;
        border: none;
    }
    .company-card .pro-company-header .right .share {
        grid-column: 2;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        background: #fff;
    }

    .pro-comp-right-btns .contact-phone {
        grid-column: 3;
    }

    .company-card .pro-company-header .right .share span {
        display: none;
    }

    .share-mobile-icon {
        display: block !important;
    }

    .company-card .header .left.comp-detail .image {
        width: 90px;
        height: 90px;
        flex-shrink: 0;
    }
    .company-logo {
        font-size: 16px;
        width: 90px;
        height: 90px;
        top: 0;
        left: 0;
        border-radius: 50%;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        gap: 0;
    }

    .company-card .header .left.comp-detail .image.pro-company-image {
        width: 52px;
        height: 52px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px;
        border: 1.3px solid rgba(88, 1, 181, 1);
    }

    .company-card .header .left.comp-detail .image.pro-company-image .company-logo {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .pro-comp-crown {
        width: 13.5px !important;
        height: 13.5px !important;
        top: 0px;
        right: 1px;
    }

    .company-card .header .data .name {
        font-size: 20px;
        margin-top: 4px;
        margin-bottom: 4px;
    }
    .company-card .header .data .verified {
        height: 26px;
        width: 128px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .company-card .header .data .verified img {
        width: 16px;
    }
    .comp-reviews {
        font-size: 14px;
    }
    .company-card .header .data .reviews-wrapper {
        font-size: 14px;
    }
    .reivews-star-average {
        font-size: 14px;
    }
    .company-card .header .right {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .pro-comp-main-actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 12px;
        width: 100%;
        margin-top: 12px;
        flex-wrap: wrap;
    }

    .pro-comp-main-actions .btn-white, .pro-comp-main-actions .btn-blue {
        flex: 1;
        width: 100% !important;
        justify-content: center;
        height: 40px;
        margin: 0 !important;
        display: flex;
        align-items: center;
        font-size: 14px !important;
        border-radius: 12px !important;
    }

    .pro-comp-right-wrapper {
        width: 100%;
    }

    .pro-comp-right-btns {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .pro-comp-main-actions{
        grid-column: 1 / -1;
    }
    .pro-comp-right-btns .contact-phone {
        width: 100% !important;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pro-comp-right-links {
        width: 100%;
        grid-column: 1 / -1;
    }
    .pro-comp-item {
        height: 40px;
        width: 40px;
    }
    .pro-comp-item img {
        width: 20px;
        height: 20px;
    }
    .pro-comp-links-wrapper {
        display: flex;
        /* justify-content: center; */
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .company-name-about {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
    }

    .company-name-about .title {
        font-size: 18px;
    }

    .company-card .company-name-about p {
        font-size: 14px;
        order: 3;
        margin-top: 0;
        margin-bottom: 8px;
    }
    .company-card .company-name-about p:last-of-type {
        margin-bottom: 0;
    }
    .company-name-about blockquote{
        font-size: 14px;
        order: 3;
        margin-bottom: 8px;
        margin-top: 0px;
    }
    .company-card .title {
        font-size: 14px;
        margin-bottom: 16px !important;
        font-family: var(--SFProMedium);
        order: 2;
        margin-top: 16px;
    }
    .company-card .company-name-about  .title {
        font-weight: 500;
    }
    .company-card .flex_items {
        gap: 8px;
    }
    .company-card .flex_items .item {
        font-size: 14px;
    }
    .company-card .row .col-md-6 {
        width: 100%;
        margin-bottom: 0;
    }
    .company-card .row .col-md-6:first-child {
        order: 2;
    }
    /* .address-carousel.owl-carousel .address-card {
        width: 195px;
        margin: 0;
    } */
    /* .address-carousel.owl-carousel .owl-item {
        width: 195px !important;
    } */
    .address-card-wrapper {
        gap: 8px;
    }
    .flag-text {
        gap: 8px;
    }
    .flag-text img {
        width: 21px !important;
        height: 16px;
    }
    .flag-text h3 {
        font-size: 16px;
    }
    .address-text {
        font-size: 14px;
    }
    .address-nav {
       display: none;
    }
    .flex_items {
        gap: 8px;
    }
    .address-carousel-wrapper::after {
        width: 110px;
    }
    .comp-core-service-rel {
        width: max-content;
        margin-top: 8px;
    }
    .comp-core-service {
        font-size: 14px;
        margin-bottom: 0px;
    }
    .comp-core-service img{
        width: 14px;
    }
    .flex_items .item {
        font-size: 14px;
        padding: 6px 14px;
    }

    .address-carousel-wrapper {
        margin-top: 16px;
    }
    .pro-comp-accordion-header .category-name {
        font-size: 14px;
    }
    .pro-comp-services-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    .pro-comp-count-badge {
        font-size: 10px;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: normal;
    }
    .pro-comp-accordion-header .left {
        gap: 8px;
    }
    .pro-comp-accordion-header {
        padding: 0px 0px;
        padding-top: 10px;
    }
    .pro-comp-service-item span {
        font-size: 14px;
    }
    .pro-comp-accordion-item.active .pro-comp-accordion-content {
        padding-bottom: 16px;
    }
    .portfolio-section {
        padding: 0;
    }
    .portfolio-core-service {
        font-size: 14px;
    }
    .service-details-badges .portfolio-core-service img {
        width: 14px !important;
        height: 14px !important;
    }
    .service-details-badges {
        margin-bottom: 16px;
        display: block !important;
    }
    .service-details-badges-carousel.owl-carousel {
        display: block !important;
    }
    .service-details-badges-carousel .owl-stage {
        display: flex !important;
        touch-action: pan-y;
    }
    .service-details-badges-carousel .owl-item {
        width: auto !important;
        flex-shrink: 0;
    }
    .service-details-badges .service {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .service-cards-wrapper::after {
        content: '';
        position: absolute;
        z-index: 9;
        bottom: 0px;
        right: 0px;
        width: 125px;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 29.99%, #FFFFFF 67.32%);
        pointer-events: none;
        display: none;
    }
    .pro-comp-service-deatils-card .pro-comp-service-deatils-header {
        padding: 16px;
    }
    .pro-comp-service-details-bottom {
        /* margin-bottom: 14px; */
        padding: 0px 12px;
    }
    .pro-comp-service-deatils-description {
        margin-top: 12px;
    }
    .pro-comp-service-deatils-card .pro-comp-service-deatils-title {
        font-size: 16px;
    }
    .pro-comp-service-deatils-description * {
        font-size: 14px;
    }
    .pro-comp-service-deatils-card.is-clamped {
        max-height: 420px;
        min-height: 420px;
    }
    .pro-comp-service-deatils-card {
        max-height: 420px;
        min-height: 420px;
    }
    .pro-comp-service-deatils-card .pro-comp-service-deatils-show-more {
        padding: 12px 24px 18px;
    }
    .pro-comp-service-deatils-toggle {
        font-size: 14px;
    }

    .pro-comp-service-deatils-price {
        font-size: 14px;
    }
    .pro-comp-service-deatils-dropdown-container .select2-selection__rendered {
        font-size: 14px !important;
    }
    .pro-comp-service-deatils-dropdown-open .select2-results__option {
        font-size: 14px !important;
    }
    .pro-comp-service-details-container {
        padding: 16px;
    }
    .custom-nav{
        display: none
    }
    .review-filters {
        display: block !important;
        margin-bottom: 24px;
    }
    .review-filters .left {
        display: block;
        width: 100%;
        margin-bottom: 24px;
    }
    .review-filters-carousel.owl-carousel {
        display: block !important;
    }
    .review-filters-carousel .owl-stage {
        display: flex !important;
        touch-action: pan-y;
    }
    .review-filters-carousel .owl-item {
        width: auto !important;
        flex-shrink: 0;
    }
    .review-filters .button {
        padding: 8px 16px;
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .company-reviews .review-filters .left .button img {
        height: 40px !important;
        width: 58px !important;
        object-fit: contain;
        min-height: 20px;
    }
    .portfolio-filters {
        padding-bottom: 2px;
        margin: 16px 0;
        display: block !important;
    }
    .portfolio-top .btn-blue, .portfolio-top .btn-white {
        font-size: 14px;
        padding: 12px 20px;
        height: 40px;
    }
    .portfolio-filters .left {
        display: block;
        width: 100%;
        gap: 10px;
    }
    .portfolio-filters .left .button {
        font-size: 14px;
        height: 32px;
        padding: 8px 16px;
        white-space: nowrap;
    }
    .portfolio-filters-carousel.owl-carousel {
        display: block !important;
    }
    .portfolio-filters-carousel .owl-stage {
        display: flex !important;
        touch-action: pan-y;
    }
    .portfolio-filters-carousel .owl-item {
        width: auto !important;
        flex-shrink: 0;
    }
    .pro-comp-portfolio-card .image-wrapper {
        height: 108px;
        border-radius: 8px;
    }
    .portfolio-item {
        margin-bottom: 16px !important;
        padding: 0 6px;
        width: 25%;
    }
    /* .portfolio-item:last-child {
        padding: 0;
    } */
    .pro-comp-portfolio-card {
        padding: 8px;
    }
    .pro-comp-portfolio-card .category-badge {
        font-size: 12px;
        padding: 8px 12px;
        display: none;
    }
    .pro-comp-portfolio-card .content {
        padding-top: 12px;
    }
    .pro-comp-portfolio-card .content .title {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .pro-comp-portfolio-card .portfolio-core-service{
        display: none;
    }
    .pro-comp-portfolio-card .content .description {
        font-size: 12px;
        margin-top: 0px;
    }
    .portfolio-top {
        padding-bottom: 0px;
        border: none;
    }
    .view-all-link {
        font-size: 14px;
    }
    .portfolio-filters .button {
        padding: 8px 16px;
        font-size: 14px;
        white-space: nowrap;
    }
    .clients-section{
        border-radius: 24px;
    }
    .clients-section .col-12 {
        width: 100% !important;
    }
    .clients-section .box {
        padding: 28px 34px;
    }

    .clients-section .box .row {
        gap: 40px;
        align-items: center;
    }

    .clients-section .box .data {
        padding: 0;
    }

    .leads-section .box .data .title {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .clients-section .box .data .text {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .clients-section .box .right {
        display: flex;
        justify-content: center;
        position: relative;
    }

    .clients-section .box .right .abs-right {
        display: none;
    }

    .clients-section .box .right .imgg {
        width: 100%;
    }

    .clients-section .box .data .btn-blue {
        width: max-content;
        border-radius: 12px;
    }
    .back-box {
        margin: 16px 0;
        justify-content: center;
        height: 52px;
        font-size: 14px;
        gap: 8px;
    }
     .back-box img{
        width: 8px;
    }

    .related-companies .service-card .header .left, .related-companies .service-card .header .right {
        gap: 8px;
        flex-wrap: wrap;
    }
    .company-reviews {
        padding: 16px;
    }
    .company-reviews .title {
        font-size: 14px;
    }
    .company-reviews .title-btn {
        margin-bottom: 16px;
    }
    .company-reviews .btn-blue,.company-reviews .btn-white {
        font-size: 14px !important;
    }
    .company-reviews .reviews-container {
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .company-reviews .reviews-container > .line:nth-child(4) {
        display: none;
    }
    .company-reviews .review-filters {
        margin-bottom: 16px;
        gap: 16px;
        flex-wrap: wrap;
    }
    .company-reviews .review-filters .right {
        justify-content: flex-start;
        gap: 8px;
        display: none;
    }
    .company-reviews .review-filters .right select {
        height: 48px;
        font-size: 14px;
        max-width: 200px;
    }
    .company-reviews .review-filters .left {
        flex-wrap: wrap;
        gap: 12px;
    }
    .company-reviews .review-filters .left .button {
        font-size: 14px;
        width: max-content;
        padding: 8px 20px;
        height: 32px;
    }
    .company-reviews .reviews-container .item .label {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .company-reviews .reviews-container .item .text-lg {
        font-size: 24px;
        margin-bottom: 8px;
    }
    .company-reviews .reviews-container .item .text {
        font-size: 12px;
    }
    .company-reviews .item .review-container {
        font-size: 20px;
    }
    .company-reviews .over-all-reviews {
        flex-direction: column;
        gap: 24px;
        flex: 1;
    }
    .mobile-controls {
        display: flex !important;
    }
    .landing-header .inner .logo {
        width: 110px !important;
    }
    .custom-navbar {
        height: 80px;
        padding: 0 !important;
        display: flex;
        align-items: center;
        background: #fff;
    }
    #reviews-pagination{
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    .landing-header-container {
        padding: 0 15px;
        width: 100% !important;
    }
    .mobile-menu .navbar-link{
        font-size: 16px !important;
        font-weight: 700 !important;
        font-family: var(--SFProBold) !important;
    }
    .mobile-menu .bottom-actions .btn-white, .mobile-menu .bottom-actions .btn-blue {
       padding: 12px !important;
    }
    .header-section .content {
        max-width: 740px;
        margin: 0 auto;
    }
    .hero-section {
        padding-top: 60px !important;
    }
    .hero-section .content .title {
        font-size: 52px !important;
    }
    .reviews-platform-badge {
        gap: 12px;
    }
    .reviews-badge {
        /* width: 135px;
        height: 80px; */
        display: flex;
        align-items: center;
    }
    .reviews-platform-badge.owl-carousel {
        width: 100vw;
        position: relative;
        left: 0%;
        right: 0%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    .reviews-platform-badge.owl-carousel .owl-stage-outer .owl-stage {
        display: flex;
        gap: 12px;
    }
    .reviews-platform-badge.owl-carousel .owl-item {
        width: auto !important;
        margin: 0 !important;
    }
    .three-steps-title {
        font-size: 24px;
        margin-top: 24px;
    }
    .steps {
        margin: 24px 0;
    }
    .steps-wrapper {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }
    .step {
        max-width: 100%;
        flex-direction: row;
        gap: 16px;
    }
    .step-img {
        padding: 14px;
        border-radius: 16px;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .step-img img {
        width: 28px;
        height: 28px;
    }
    .step-text {
        align-items: flex-start;
    }
    .step-text .title {
        margin: 0;
        font-size: 16px;
        max-width: 100%;
    }
    .step-text p {
        margin: 0;
        font-size: 14px;
        text-align: start;
    }
    .partner-header .title {
        font-size: 24px;
    }
    .partner-header p {
        font-size: 14px;
    }
    .partner-cards-container-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    .partner-badge .title {
        font-size: 24px;
    }
    .p-bottom-wrapper {
        gap: 18px;
    }
    .partner-badge p {
        font-size: 14px;
    }
    .users-reviews .review-card {
        min-height: 0px;
    }
    .users-reviews .card-header h3 {
        font-size: 16px;
    }
    .users-reviews .card-header .avatar {
        width: 48px !important;
        height: 48px;
    }
    .users-reviews .review-text {
        font-size: 16px;
        margin-bottom: 0px;
        line-height: 1.5;
    }
    .review-card .card-footer {
        margin-top: 16px !important;
    }
    .reviews-container-wrapper::before, .reviews-container-wrapper::after {
        width: 100px;
    }
    .users-reviews .company-logo {
        width: 40px !important;
        height: 40px !important;
    }
    .ind-header .title {
        font-size: 24px;
    }
    .ind-header p {
        font-size: 14px;
    }
    .ind-cards-wrapper {
        gap: 17px;
    }
    .ind-cards-wrapper > .ind-card-item{
        flex-basis: calc(50% - 9px);
        max-width: calc(50% - 9px);
    }

    .ind-badge-text h2 {
        font-size: 16px;
    }
    .ind-badge-text p {
        font-size: 12px;
    }
    .ind-badge img{
        width: 28px;
        height: 28px;
    }
    .ind-badge {
        padding: 14px;
        margin-top: 0px;
    }
    .ind-card-item-header {
        max-width: 100%;
    }
    .leads-section {
        padding: 32px 15px;
        background-color: #EFF6FA;
    }
    .leads-section .box .row {
        flex-direction: column;
        align-items: center;
    }
    .leads-section .box .data .title {
        font-size: 24px;
    }
    .leads-section .clients-lists .client-li {
        font-size: 14px;
        gap: 10px;
        align-items: flex-start;
        text-align: left;
    }
    .leads-section .col-12:last-child {
        width: 100%;
    }
    .leads-section .client-btn {
        width: 100%;
    }
    .leads-section .box .data {
        text-align: center;
    }
    .va-stacked-carousel-wrapper .va-companies-stacked-carousel {
        transform: translateX(20px);
    }
    .footer-va .row .col-12:first-child {
        width: 100% !important;
        max-width: 100% !important;
    }
    .breadcrumbs-right span {
        font-size: 14px;
    }
    .section-top-title {
        display: contents;
    }
    .company-top-wrapper{
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
        margin-top: 16px;
    }
    .breadcrumbs-right {
        order: 1;
        margin-bottom: 16px;
    }
    .breadcrumbs-right a {
        font-size: 18px;
    }
    .breadcrumbs-left {
        order: 4;
    }
    .popular-section .company-top-wrapper .title, .custom-section .company-top-wrapper .title {
        order: 2;
        font-size: 24px;
        margin-bottom: 8px;
    }
    .company-top-wrapper .service-description {
        order: 3;
        margin-bottom: 16px;
    }
    .company-top-wrapper .service-description .text {
         font-size: 14px;
    }
    .breadcrumbs-left {
        font-size: 12px;
    }
    .section-top-title .date {
        font-size: 12px;
    }
    .custom-section .applied-titles {
        font-size: 14px;
        margin-bottom: 16px;
    }
    .custom-section .selected-filters .item img {
        width: 14px;
        height: auto;
        cursor: pointer;
    }
    .custom-section .selected-filters .item {
        padding: 8px 16px;
        font-size: 12px;
        height: 38px;
    }
    .custom-section .selected-filters {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .location-solution-top-wrapper .title {
        font-size: 16px !important;
    }
    .faq-accordion {
        padding: 0px 16px 0px 16px;
    }
    .faq-item {
        padding: 16px 0px;
    }
    .faq-question {
        font-size: 16px;
    }
    .faq-answer {
        font-size: 14px;
    }
    .company-filters{
        display: flex;
        flex-wrap: wrap;
    }
    .custom-section .company-filters .top-filtes .text {
        order: 1;
        width: 100%;
        font-size: 16px;
        margin-bottom: 16px;
    }
    .custom-section .company-filters .top-filtes {
        display: contents;
    }
    .custom-section .company-filters .top-filtes .right {
        order: 2;
        width: 50%;
        justify-content: flex-start;
    }
    .filter-wrapper {
        order: 3;
        width: 127px;
        margin-bottom: 0px;
    }
    .filter-wrapper .row {
        max-width: 127px;
        margin: 0;
        margin-left: auto;
    }
    .filter-wrapper .row .col-12{
        margin: 0;
        padding: 0;
    }
    .filter-wrapper .right .filter-btn {
        margin-left: auto;
        width: 100% !important;
        height: 40px;
        border-radius: 12px;
    }
    .filter-wrapper .right {
        display: contents;
    }
    .filter-wrapper .right .child {
        display: none;
    }
    .custom-switch {
        display: none !important;
    }
    #companies-container #companies-list .col-12{
        margin-bottom: 16px !important;
    }
    .service-card {
        padding: 20px;
        padding-bottom: 0;
        margin-bottom: 0px;
    }
    .gradient-bg-pro {
        margin: -20px -20px 0 -20px;
        padding: 20px 20px 0 20px;
    }
    .service-card .header {
        padding-bottom: 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    .service-card .header .right {
        width: 100%;
    }
    .service-card .header .right .btn-white, .service-card .header .right .btn-blue {
        width: 50%;
        border-radius: 12px !important;
        font-size: 14px !important;
        height: 40px;
    }
    .pro-browse-dot {
        height: 20px !important;
        width: 20px !important;
    }
    .service-card .header .verified {
        height: 26px;
        padding: 0px 12px;
        font-size: 12px;
        flex: 0 0 auto !important;
        width: max-content !important;
    }
    .service-card .header .profile {
        gap: 12px;
    }
    .service-card .header .verified img {
        width: 16px;
    }
    .service-card .header .tag {
        height: 26px;
        padding: 0px 12px;
        font-size: 12px;
        margin-bottom: 0 !important;
        flex: 0 0 auto !important;
        width: max-content !important;
    }
    .service-card .header .left .bottom-sec {
        margin-top: 6px;
    }
    .star-rating.large .star {
        width: 18px;
        height: 18px;
    }
    .service-card .header .comp-locations span {
        font-size: 12px;
    }
    .select2-container {
        /* width: 100% !important; */
    }
    .popular-section .text, .custom-section .text, .dynamic-text {
        font-size: 14px !important;
    }
    .service-card .title {
        font-size: 14px !important;
    }
    .service-card .services .service img {
        width: 14px;
    }
    .service-card .title {
        margin-bottom: 8px;
    }
    .service-card .services {
        margin-bottom: 8px;
        gap: 8px;
    }
    .service-card .service-reviews {
       flex-direction: column;
       gap: 0px;
       margin-bottom: 16px;
    }
    .service-card .flex-buttons {
        margin-bottom: 20px !important;
    }
    .service-card .service-reviews > .item:nth-child(1) {
        display: flex;
        flex-wrap: wrap;
    }

    .service-card .service-reviews > .item:nth-child(1) .label:nth-child(1) {
        flex: 1 1 48%;
        font-size: 14px;
        margin-bottom: 6px;
    }
    .service-card .service-reviews > .item:nth-child(1) .ratings {
        margin-bottom: 0px !important;
    }

    .service-card .service-reviews > .item:nth-child(1) .text {
        flex: 1 1 100%;
        font-size: 14px !important;
        margin-bottom: 16px;
    }
    .service-card .service-reviews .line {
        display: none;
    }
    .star-rating.large .star {
        width: 18px !important;
        height: 18px !important;
    }
    .company-card .star-rating.large .star {
        width: 12px !important;
        height: 12px !important;
    }
    .service-card .service-reviews .slider-wrapper .item {
        padding-right: 16px;
    }
    .rating-number {
        font-weight: 500 !important;
    }
    .service-card .service-reviews .item .text {
        font-size: 14px !important;
    }
    .service-card .footer {
        padding: 16px 0px;
        font-size: 14px;
    }
    .claim-btn,.report-btn {
        font-size: 14px;
    }
    .claim-btn img,.report-btn img {
        width: 16px;
    }
    .expand-toggle img {
        width: 12px !important;
        height: 12px;
    }
    .company-reviews .customer-review {
        padding: 16px;
        border-radius: 12px;
    }
    .company-reviews .customer-review .header .left {
        gap: 8px;
    }
    .company-reviews .customer-review .header .left .image {
        width: 32px;
        height: 32px;
    }
   .company-reviews .customer-review .header .left .image .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .company-reviews .customer-review .header .left .data .name {
        font-size: 14px !important;
    }
    .company-reviews .customer-review .header .left .data .date {
        font-size: 12px;
        font-family: Nunito Sans, sans-serif;
    }
    .customer-review .rating-number {
        min-width: auto;
    }
    .company-reviews .customer-review .header .left .badge {
        height: 32px;
    }
    .company-reviews .customer-review .header .right {
        gap: 8px;
    }
    .company-reviews .customer-review .header {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }
    .company-reviews .customer-review .body .title {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .company-reviews .customer-review .body .text {
        font-size: 12px;
        margin-bottom: 8px;
    }
    .user-avatar {
        font-size: 12px;
    }
    .company-reviews .customer-review .body .review-gallery {
        margin-bottom: 8px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .company-reviews .customer-review .body .review-gallery img {
        width: 80px;
        height: 80px;
    }
    .company-reviews .customer-review .header .left .badge img {
        width: 60px !important;
        height: auto !important;
    }
    .related-companies .service-card .header .right .btn-white, .related-companies .service-card .header .right .btn-blue {
        width: 100%;
        flex: 1;
    }
    .footer .logo {
        margin: 0 auto;
        margin-bottom: 24px;
    }
    .footer .row > .col-md-6:first-of-type {
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
    }
    .footer .row .col-md-6 {
        width: 50% !important;
    }
    .footer .row > div:first-child .title:first-of-type {
        font-size: 18px;
        margin-bottom: 16px !important;
    }
    .footer .row > div:first-child .text:first-of-type {
        font-size: 14px;
        margin-bottom: 24px !important;
    }
    .footer .title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .footer .text {
        font-size: 14px;
        margin-bottom: 8px !important;
    }
    .location-solution-top-items {
        grid-template-columns: repeat(1, 1fr);
    }
    .location-top {
        margin-bottom: 24px;
    }
    .faq-main-title {
        font-size: 16px;
    }
    .dynamic-text a.has-gradient::after {
        display: none;
    }
    .dynamic-text a {
        text-wrap: wrap;
    }
    .modal-content.small-modal {
        border-radius: 24px !important;
    }
    .modal-content.small-modal .content{
        padding: 16px 18px !important;
    }
    .modal-content.small-modal .content .text {
        font-size: 14px;
        margin-bottom: 8px !important;
    }
    .modal-content.small-modal .content .profile {
        margin-bottom: 16px !important;
    }
    .modal-content.small-modal .content .company-info-fields{
        gap: 8px !important;
        padding: 0 16px !important;
    }
    .modal-content.small-modal .content .company-info-fields .col-12{
        padding: 0px !important;
    }
    .modal-content.small-modal .content .profile .image {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    .modal-content.small-modal .content .profile .text {
        font-size: 16px;
        margin-bottom: 0px !important;
    }
    .modal-content.small-modal .content .input-wrapper label, .modal-content.small-modal .content .input-wrapper .input input {
        font-size: 14px !important;
        margin-bottom: 0px !important;
    }
    .modal-content.small-modal .content .input-wrapper label {
        margin-bottom: 12px !important;
    }
    .modal-content.small-modal .content .input-wrapper .contact-service-hierarchy label {
        margin-bottom: 0px !important;
    }
    .modal-content.small-modal .content .input-wrapper .input {
        height: 48px;
        padding-left: 14px;
        border-radius: 12px;
    }
     .modal-content.small-modal .content .input-wrapper .input img{
        width: 16px;
        height: 16px;
    }
   .modal-content.small-modal .content .company-info-fields .col-md-6 {
       margin-bottom: 0px !important;
        flex: 0 0 auto;
        width: 49%;
    }
    .modal-content.small-modal .content .input-wrapper .small-text {
        font-size: 12px;
        margin-bottom: 12px;
    }
    .modal-content.small-modal .content .footer .btn-blue {
        margin-bottom: 8px !important;
        font-size: 14px;
        border-radius: 12px;
        height: 40px;
        line-height: 0;
    }
    .modal-content.small-modal .content .footer .support {
        font-size: 12px;
    }
    .modal-content.small-modal .content .footer .support a{
        font-size: 12px !important;
    }
    .modal-content.small-modal .content .support a.large img {
        width: 6px;
        height: auto;
    }
    .modal-content.small-modal .content .header {
        margin-bottom: 6px;
        height: 32px;
    }
    .modal-content.small-modal .content.no-footer .body .row{
        margin-top: 8px !important;
        padding: 0 16px !important;
        gap: 8px !important;
    }
    .modal-content.small-modal .content.no-footer .body .row .col-12{
        padding: 0px !important;
        margin-bottom: 0px !important;
    }
    .modal-content.small-modal .content.no-footer .body .row .col-md-6 {
        flex: 0 0 auto;
        width: 48%;
    }
    .modal-content.small-modal .content.no-footer .body .custom-checkbox {
        gap: 8px;
        margin-bottom: 12px !important;
    }
     .modal-content.small-modal .content.no-footer .body .custom-checkbox .box {
        width: 16px;
        height: 16px;
    }
    .modal-content.small-modal .content.no-footer .body .custom-checkbox .label{
        margin-bottom: 0px !important;
    }
    .modal-content.small-modal .content.no-footer .body .custom-checkbox .box input[type="checkbox"]+.check {
        height: 16px;
        width: 16px;
    }
    .modal-content.small-modal .content.no-footer .body .custom-checkbox .label img {
        width: 14px;
        height: auto;
    }
    .modal-content.small-modal .content .input-wrapper .label-flex {
        font-size: 14px;
        margin-bottom: 12px;
    }
    .modal-content.small-modal .content .input-wrapper .input.lg {
        height: 150px;
        padding-top: 8px;
        padding-left: 12px;
    }
    .modal-content.small-modal .content .input-wrapper .input textarea {
        font-size: 14px !important;
    }
    .modal-content.small-modal .content .support {
        font-size: 12px;
    }
    .modal-content.small-modal .content.no-footer .body .btn-blue, .modal-content.small-modal .content.no-footer .body .btn-white {
        font-size: 14px;
    }
    .modal-content.small-modal .content.no-footer .body .buttons-flex {
        margin-bottom: 12px;
        margin-top: 12px;
    }
    .modal-content.small-modal .content.no-footer .body .buttons-flex button{
        border-radius: 12px;
    }
    .modal-content.small-modal .content .footer {
        height: auto !important;
    }
    .modal-content.small-modal .content .image-large {
        width: 100%;
        margin: 8px auto;
        margin-bottom: 16px !important;
    }
    .modal-content.small-modal .content .image-large img {
        max-height: 150px;
    }
    .modal-content.small-modal .content .text-med {
        font-size: 20px;
        margin-bottom: 8px;
    }
    .similar-companies-content .header .title {
        font-size: 24px !important;
        margin-bottom: 8px !important;
        margin-top: 0px !important;
    }
    .similar-companies-content .header {
        margin: 0px !important;
        margin-bottom: 12px !important;
    }
    .modal-content.small-modal .content .similar-companies-list .company-wrapper .label {
        border: 1px solid #ccc;
    }
    .similar-name {
        font-size: 16px;
    }
    .modal-content.small-modal .content .companies .company-wrapper .custom-checkbox .box {
        width: 16px;
        height: 16px;
    }
    .modal-content.small-modal .content .companies .company-wrapper .custom-checkbox .box input[type="checkbox"]+.check {
        height: 16px;
        width: 16px;
    }
    .modal-content.small-modal .content .companies .company-wrapper .label .header .image {
        width: 40px;
        height: 40px;
    }
    .review-count{
        font-size: 14px;
    }
    .similar-verified,.similar-tag {
        height: 26px;
        font-size: 12px;
    }
    #companies .similar-companies-list .company-wrapper .label .similar-pro-header {
        margin-bottom: 16px;
    }
    .modal-content.small-modal .content .companies .company-wrapper .sub-title {
        font-size: 14px;
    }
    .edit-message p {
        font-size: 14px !important;
    }
    .edit-message img {
        width: 16px !important;
        height: 16px !important;
    }
    .modal-content.small-modal .content .companies .company-wrapper .services .service img {
        width: 16px;
    }
    .simple-similar {
        font-size: 14px !important;
    }
    .expand-controls .cancel-edit, .expand-controls .collapse-edit {
        font-size: 14px;
    }
    .modal-content.small-modal .content .companies .company-wrapper .label .header {
        padding-left: 30px;
    }
    #companies .similar-companies-list .company-wrapper .label .similar-pro-header .header {
        padding-left: 50px;
    }
    .submit-description {
        padding: 12px 8px;
        margin-top: 8px;
        margin-bottom: 12px;
    }
    .submit-desc-top, .submit-desc-bottom {
        gap: 8px;
    }
    .submit-desc-top img, .submit-desc-bottom img{
        width: 16px;
        height: 16px;
    }
    .submit-description p {
        font-size: 12px;
    }
    .modal-content.small-modal .content .input-wrapper .company-name-input {
        height: 40px;
        border-radius: 12px;
        gap: 8px;
        padding-left: 14px;
    }
    .modal-content.small-modal .content .input-wrapper .company-name-input input {
        font-size: 14px;
    }
    .modal-content.small-modal .content .input-wrapper .company-name-input .companies-result .title {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .modal-content.small-modal .content .input-wrapper .company-name-input .companies-result .item {
        gap: 8px;
        font-size: 14px;
    }
    .modal .modal-dialog .right-modal {
        width: 360px !important;
        padding: 16px;
    }
    .right-modal .filter-top .title-wrapper .text {
        font-size: 24px;
    }
    .right-modal .filter-top .title-wrapper .icon {
        width: 32px;
        height: 32px;
        cursor: pointer;
    }
    .right-modal .filter-top .title-wrapper .icon img{
        width: 32px;
        height: 32px;
    }
    .right-modal .filter-top .filter-selection {
        font-size: 14px;
    }
    .right-modal .filter-top {
        height: auto;
        padding-bottom: 0px;
        padding-top: 0px;
    }
    .right-modal .filter-body {
        padding: 16px 0px;
        padding-right: 8px;
        padding-bottom: 8px;
        height: auto;

    }
    .right-modal .filter-body .verified-filter {
        gap: 8px;
        margin-bottom: 8px;
        padding: 12px;
    }
    .right-modal .filter-body .verified-filter .left img, #filterAccordion .accordion-button .left img {
        width: 40px;
        height: 40px;
    }
    .right-modal .filter-body .verified-filter .left {
        font-size: 14px;
    }
    .right-modal .filter-body .verified-filter .switch {
        height: 24px;
        width: 44px;
    }
    .right-modal .filter-body .verified-filter .switch input[type="checkbox"]:checked+.track .circle {
        left: 23px;
    }
    .right-modal .filter-body .verified-filter .switch .track .circle {
        top: 3px;
        left: 2px;
        height: 18px;
        width: 18px;
    }
    #filterAccordion .accordion-item {
        margin-bottom: 8px;
    }
    #filterAccordion .accordion-button .left {
        font-size: 14px;
        gap: 8px;
    }
    #filterAccordion .accordion-button {
        padding: 12px;
    }
    #filterAccordion .accordion-button .left .count {
        height: 16px;
        width: 16px;
        font-size: 10px;
    }
    #filterAccordion .accordion-button .right {
        gap: 8px;
    }
    #filterAccordion .accordion-button.collapsed .icon img {
        width: 20px;
        height: 20px;
    }
    #filterAccordion .accordion-button .right a {
        font-size: 14px;
    }
    .right-modal .footer {
        margin-top: auto;
        padding-top: 16px;
    }
    .right-modal .footer .btn-white, .right-modal .footer .btn-blue {
        flex: 1;
        padding: 8px 20px !important;
    }
    #filterAccordion .accordion-item .accordion-body {
        padding: 16px 12px;
    }
    .right-modal .filter-body .search-box {
        height: 40px;
        margin-bottom: 16px;
    }
    .right-modal .filter-body .search-box input {
        height: 40px;
        padding-left: 40px;
        font-size: 14px;
    }
    .filter-parent .title {
        font-size: 14px;
        font-weight: 500;
    }
    .filter-parent .parent-toggle {
        width: 16px;
        height: 16px;
    }
    #filterAccordion .accordion-item .accordion-body .filter-item {
        gap: 8px;
        font-size: 14px;
    }
    #filterAccordion .accordion-item .accordion-body .box {
        width: 16px;
        height: 16px;
    }
    #filterAccordion .accordion-item .accordion-body .box input[type="checkbox"]+.check {
        height: 16px;
        width: 16px;
    }
    .filter-child label {
        font-size: 14px;
        font-weight: 500;
    }
    #filterAccordion .accordion-item .price-wrapper {
        gap: 8px;
    }
    #filterAccordion .accordion-item .price-wrapper .text {
        font-size: 14px;
    }
    #filterAccordion .accordion-item .price-wrapper .price-input input {
        padding: 8px 4px;
        font-size: 14px;
    }
    #filterAccordion .accordion-item .price-wrapper .price-input {
        height: 32px;
    }
    #filterAccordion .accordion-item .accordion-body .box input[type="radio"]+.check {
        height: 16px;
        width: 16px;
    }
    #filterAccordion .accordion-item .accordion-body .filter-item label.flex-label {
        font-size: 14px;
    }
    #filterAccordion .accordion-item .accordion-body .filter-item label.flex-label .reviews img {
        width: 16px;
    }
    #pagination-container {
        margin-bottom: 24px !important;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    .get-pro-btn .btn-blue.get-pro-blue-btn {
        height: 40px !important;
        margin: 0 !important;
    }
    .unlock {
        padding: 16px;
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 12px;
    }
    .banner-pro-top-btn {
        font-size: 14px !important;
        margin-bottom: 16px;
    }
    .unlock-banner-top h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .unlock-banner-top p {
        font-size: 14px;
    }
    .unlock-banner-bottom .banner-info {
        padding: 16px;
        flex-direction: column;
    }
    .unlock-banner-bottom .banner-info span {
        font-size: 12px;
    }
    .custom-navigation {
        display: contents;
    }
    .custom-navigation .left {
        display: contents;
    }
    .custom-navigation .left .line {
        display: none;
    }
    .custom-navigation .left .text {
        order: 1;
        flex: 0 0 100%;
        margin-bottom: 0px !important;
        font-size: 14px !important;
    }
    .custom-navigation .right {
        order: 2;
        flex: 0 0 100%;
        justify-content: space-between;
    }
    .custom-navigation .left .per-page-wrapper {
        order: 3;
        flex: 0 0 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }
    .custom-navigation .left .per-page-wrapper .per-page-wrapper-row {
        gap: 8px;
    }
    .custom-navigation .left .per-page-wrapper .text {
        order: 0;
        flex: 0 0 auto;
    }
    .custom-navigation .input, .custom-navigation .select-page {
        height: 40px;
        font-size: 12px;
        border-radius: 8px;
        width: 55px;
        padding: 8px;
    }
     .custom-navigation .input, .custom-navigation #jump-to-page {
        width: 98px;
    }
    .custom-navigation .btn-white {
        height: 44px;
        font-size: 14px !important;
        border-radius: 8px;
    }
    .custom-navigation .btn-white span{
        display: none;
    }
    .custom-navigation .right .pagination {
        height: 44px;
        border-radius: 8px;
    }
    .custom-navigation .right .pagination .page {
        height: 44px;
        width: 44px;
        border-radius: 8px;
    }
    .contact-parent-service .contact-service-title {
        font-size: 14px;
    }
    .contact-parent-service .contact-service-toggle {
        width: 16px;
        height: 16px;
    }
    .contact-parent-service {
        gap: 8px;
    }
    .portfolio-modal-content {
        padding: 16px;
        border-radius: 12px;
        margin: 0 8px;
    }
    .portfolio-modal-nav {
        gap: 8px;
    }
    .portfolio-nav-btn {
        width: 48px;
        height: 48px;
        border-radius: 8px;
    }
    .portfolio-nav-counter {
        font-family: 'Nunito Sans';
    }
    #portfolio-current-index, #portfolio-total-count {
        font-weight: 700;
    }
    .portfolio-modal-close {
        width: 32px;
        height: 32px;
    }
    .portfolio-modal-body {
        margin-top: 16px;
    }
    .portfolio-modal-title {
        font-size: 14px;
        min-width: auto;
        margin-bottom: 8px;
    }
    .portfolio-modal-title-section {
        gap: 8px;
        margin-bottom: 8px;
    }
    .portfolio-modal-actions {
        display: none;
    }
    .portfolio-modal-carousel {
        margin-bottom: 16px;
        overflow: hidden;
    }
    .portfolio-carousel-main{
        margin-bottom: 8px !important;
        border-radius: 12px;
    }
    .portfolio-modal-description {
        font-size: 12px;
        margin-bottom: 16px;
    }
    .portfolio-modal-section-title {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .portfolio-detail-item {
        gap: 8px;
    }
    .portfolio-modal-content .services .service.active {
        font-size: 12px;
    }
    .portfolio-modal-content .services {
        margin-bottom: 16px;
        padding-bottom: 16px;
        gap: 8px;
    }
    .portfolio-detail-label {
        font-size: 12px;
    }
    .portfolio-detail-value {
        font-size: 14px;
    }
    .portfolio-modal-details-grid {
        gap: 8px;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
    .portfolio-contact-card {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .portfolio-contact-info {
        width: 100%;
        text-align: start;
        padding: 32px 24px;
    }
    .portfolio-contact-title {
        margin-bottom: 8px;
    }
    .portfolio-contact-text {
        margin: 0 auto;
        margin-bottom: 16px;
    }
    .portfolio-contact-info .btn-blue {
        width: max-content;
        border-radius: 12px;
    }
    .portfolio-contact-illustration {
        order: -1;
        width: 100%
    }
    .section-top-title .back {
        font-size: 14px;
        font-weight: 700;
        gap: 8px;
    }
    .custom-bread-crumbs-container .btn-white, .custom-bread-crumbs-container .btn-blue {
        font-size: 14px !important;
        height: 40px;
        border-radius: 12px;
    }
    .custom-bread-crumbs-container .right a .btn-comp-text-group .btn-comp-label{
        display: none;
    }
    .custom-bread-crumbs-container .right a svg{
        width: 12px;
        height: 12px;
    }
    .company-reviews .customer-review .body .actions .action {
        font-size: 14px;
    }
    .company-reviews .customer-review .body .actions .action img {
        width: 16px;
        height: auto;
    }
    #success-modal-submit .modal-dialog .modal-content.small-modal .content .body h4 {
        font-size: 20px;
    }
    #success-modal-submit .modal-dialog .modal-content.small-modal .content .body img {
        width: 67%
    }
    #success-modal-submit .modal-dialog .modal-content.small-modal .content .body .success-message {
        font-size: 14px;
    }
    #success-modal-submit .modal-dialog .modal-content.small-modal  {
        border-radius: 24px;
    }
    #success-modal-submit .modal-dialog .modal-content.small-modal .content {
        padding: 16px;
    }
    #success-modal-submit .modal-dialog .modal-content.small-modal .content .support {
        font-size: 12px;
    }
    #success-modal-submit .modal-dialog .modal-content.small-modal .content .footer {
        height: max-content;
    }
    .hero-section .filter-box .filters-results .title {
        font-size: 14px !important;
        margin-bottom: 8px;
    }
    .filter-box .filters-results .items .item {
        gap: 8px;
        font-size: 14px;
    }
    .filter-box .filters-results .items {
        gap: 8px;
        margin-bottom: 16px;
    }
    .filter-box .filters-results .search-services-items .item {
        font-size: 14px;
    }
    .filter-box .filters-results .items .item .image {
        width: 48px;
        height: 48px;
    }
    .filter-box .filters-results .items .item {
        max-width: 100%;
    }
    .filter-box .filters-results .company-container .company .item .image {
        width: 48px;
        height: 48px;
    }
    .filter-box .filters-results .company-container .company .item {
        gap: 8px;
        font-size: 14px;
    }
    .filter-box .filters-results .company-container .company .review {
        gap: 8px;
        font-size: 14px;
    }
    .filter-box .filters-results .company-container .company .review img {
        width: 16px;
    }
    .filter-box .filters-results .see-all {
       font-size: 14px;
    }
    .header-section .content .filter-box {
        padding-bottom: 16px;
    }
    .submit-description {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .submit-desc-top, .submit-desc-bottom {
        gap: 10px;
    }
    .submit-desc-top img, .submit-desc-bottom img{
        width: 16px;
        height: 16px;
    }
    .submit-description p {
        font-size: 12px;
    }
}
@media (max-width: 768px) {
    .mobile-menu .drilldown-header {
        padding: 16px !important;
        padding-right: 0px !important;
        min-height: 120px !important;
        height: auto !important;
        margin: 10px !important;
        margin-right: 0px !important;
    }

    .mobile-menu .drilldown-title {
        font-size: 18px !important;
    }

    .mobile-menu .drilldown-illustration {
        width: 120px !important;
    }
    .hero-section .content {
        max-width: 560px;
    }
    .hero-section .content .title {
        font-size: 28px !important;
        line-height: 1.2;
        margin-bottom: 24px;
    }
    .header-section .content .text {
        font-size: 14px;
        max-width: 500px;
    }
    .hero-section .content .filter-box {
        margin-top: 32px !important;
    }
    .hero-section .content .filter-box h2 {
        font-size: 18px;
        max-width: 313px;
    }
    .hero-section .content .filter-box .search-box {
        border: 1px solid #E5E5E5 !important;
        flex-wrap: nowrap !important;
        padding: 12px !important;
        margin-bottom: 12px;
    }
    .hero-section .content .filter-box .search-box .left {
        border: none !important;
        border-radius: 0px !important;
        margin-bottom: 0px !important;
        height: auto !important;
        flex: 0 0 80%;
    }
    .hero-section .content .filter-box .search-box .right .search-btn {
        height: 40px !important;
        width: 40px !important;
        border-radius: 12px !important;
    }
    .hero-section .content .filter-box .label {
        font-size: 12px;
    }
    .reviews-platform-wrapper p {
        font-size: 14px;
        text-align: center;
    }
    .reviews-platform {
        margin-top: calc(40px + var(--search-results-height, 0px));
    }
    .partner-cards-container-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
    .p-card-header img {
        width: auto;
        max-width: 25%;
        height: auto;
        max-height: 100px;
    }
    .p-bottom-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }
    .leads-section .container {
        background: transparent;
    }
    .select2-container {
        width: 50% !important;
    }
    .service-card .header .left .bottom-sec .reviews-wrapper .d-flex{
        flex-wrap: wrap;
        gap: 8px;
    }
    .service-card .header .comp-locations {
        margin-left: 0px;
    }
    .service-card .headers .rating-number {
        margin-left: 0 !important;
    }
    .custom-section .company-filters .top-filtes .right {
        gap: 8px;
    }
    .select2-container--default .select2-selection--single {
        height: 40px !important;
        font-size: 14px;
        min-width: 110px !important;
    }
    .service-card .header .left .top-sec {
        gap: 8px;
    }
        /* 2-line limit for about section on mobile */
    .about-section .dynamic-text[data-is-expanded="false"] {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }

    .about-section .dynamic-text[data-is-expanded="false"] .read-more-link {
        display: inline-block !important;
        position: absolute;
        bottom: 0;
        right: 0;
        background: white;
        padding-left: 10px;
    }
    .portfolio-top .title-btn {
        margin-bottom: 14px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .address-carousel-wrapper::after {
        width: 30px;
    }
    .service-cards.owl-carousel .owl-stage{
        padding-left: 0 !important;
    }    .filter-box .filters-results .company-container {
        flex-wrap: wrap;
        width: 100%;
    }
    .filter-box .filters-results .company-container .company {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .filter-box .filters-results .company-container .line {
       display: none;
    }

    .portfolio-item {
        width: 50%;
    }
    .user-dashboard .form-item .pro-admin-service-card-v2 .select2-container--default{
        max-width: 460px !important;
        width : 100% !important;
    }    
    .user-dashboard .form-item .pro-admin-service-card-v2 .select2-container--default .select2-selection--single {
        height: 48px !important;
        border: 1px solid #E5E5E5 !important;
        max-width: 460px !important;
    }
    .pro-admin-service-card-v2 .service-card-header {
        gap: 8px;
    }
}

@media (max-width: 575.98px) {
    .mobile-menu .drilldown-header {
        padding: 12px !important;
        padding-right: 0px !important;
        min-height: 80px !important;
        height: auto !important;
        margin: 8px !important;
        margin-right: 0px !important;
    }
    /* .landing-header .inner .logo {
        width: 80px !important;
    } */
    /* Fix carousel center card alignment */
    .va-stacked-carousel-wrapper {
        padding: 0;
        overflow: hidden;
    }
    .va-stacked-carousel-wrapper .va-companies-stacked-carousel {
        transform: none !important;
    }
    .va-companies-stacked-carousel .owl-stage {
        display: flex;
        justify-content: center;
    }
    .va-companies-stacked-carousel .owl-stage-outer {
        padding: 70px 0 20px 0 !important;
        overflow: hidden !important;
    }
    .va-companies-stacked-carousel .owl-item,
    .va-companies-stacked-carousel .owl-item.active.center,
    .va-companies-stacked-carousel .owl-item.active.center + .owl-item,
    .va-companies-stacked-carousel .owl-item:has(+ .owl-item.active.center) {
        transform: none !important;
        opacity: 1 !important;
        width: 80vw !important;
        max-width: 90vw !important;
    }
    .modal-content.small-modal .content .company-info-fields .col-md-6 {
        margin-bottom: 0px !important;
        flex: 0 0 48%;
        width: 48%;
    }
    /* .company-card .header{
        display: flex !important;
    } */
     .plan-header {
        flex-wrap: wrap;
    }
    .plan-body {
        margin: 0;
    }
    .billing-card-top .plan-header .plan-desc {
        width: 100%;
    }
    .pro-billing-plan-card .plan-desc-price {
        display: contents;
    }
    .pro-billing-plan-card .plan-header {
        display: contents;
    }
    .pro-billing-plan-card .plan-body {
        align-self: flex-start;
    }
    .pro-billing-plan-card .plan-price-group {
        order: 3;
    }
}
@media (max-width: 479.98px) {
    .mobile-menu .drilldown-header {
        padding: 6px !important;
        padding-right: 0px !important;
        min-height: 80px !important;
        height: auto !important;
        margin: 8px !important;
        margin-right: 0px !important;
    }

    .landing-header .inner .logo {
        width: 110px !important;
    }

    .hero-section {
        padding-top: 60px !important;
    }
    .hero-section .content .title {
        font-size: 28px !important;
        margin-bottom: 24px !important;
    }
    .header-section .content {
        max-width: 360px !important;
    }
    .header-section .content .text {
        font-size: 14px !important;
        max-width: 500px !important;
    }
    .hero-section .content .filter-box {
        margin-top: 32px !important;
    }
    .hero-section .content .filter-box h2 {
        font-size: 18px;
    }
    .hero-section .content .filter-box .search-box {
        height: 48px;
        padding: 4px !important;
    }
    .users-reviews .review-card {
        min-width: 330px !important;
        max-width: 330px !important;
        width: 330px !important;
        margin: 0 !important;
    }
    .va-companies-stacked-carousel .owl-item, .va-companies-stacked-carousel .owl-item.active.center, .va-companies-stacked-carousel .owl-item.active.center + .owl-item, .va-companies-stacked-carousel .owl-item:has(+ .owl-item.active.center) {
        transform: none !important;
        opacity: 1 !important;
        width: 77vw !important;
        max-width: 90vw !important;
    }
    .top-rated-comp .service-card .header .tag {
        margin-bottom: 0px;
    }
    .top-rated-comp .service-card .header .profile .top-sec .name-stars  .bottom-sec img {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
    }
    .top-rated-comp .service-card .header .profile .top-sec .name-stars  .bottom-sec .rating-number {
        font-size: 14px !important;
    }
    .top-rated-comp .service-card .header .profile .image {
        margin-top: 0px;
    }
    .top-rated-comp .stars-avg-count {
        display: flex;
        align-items: center;
    }
    .top-rated-comp .service-card .header .profile .top-sec .name-stars  .name {
        font-size: 16px;
        line-height: 1;
    }
    .top-rated-comp .service-card .header .profile .top-sec {
        gap: 12px;
    }
    .top-rated-comp .service-card .header .verified {
        font-size: 11px;
    }
    .top-rated-comp .service-card .header .tag {
        height: 26px;
        font-size: 11px;
        padding: 4px 10px;
        flex: 1;
    }
    .top-rated-comp .service-card .services .service, .service-card .services .more {
        font-size: 12px;
    }
    .top-rated-comp .reviews-wrapper .d-flex {
        margin-top: 3px;
        margin-bottom: 3px;
    }
    /* .filter-wrapper .right .filter-btn {
        font-size: 12px;
        width: 65% !important;
    } */
    .filter-wrapper .right .filter-btn img {
        width: 12px;
    }
            /* 2-line limit for about section on mobile */
    .about-section .dynamic-text[data-is-expanded="false"] {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }

    .about-section .dynamic-text[data-is-expanded="false"] .read-more-link {
        display: inline-block !important;
        position: absolute;
        bottom: 0;
        right: 0;
        background: white;
        padding-left: 10px;
    }
    .similar-verified, .similar-tag {
        font-size: 11px;
    }
    .cate-mobile-drawer {
        left: -280px;
        width: 280px;
    }
    .modal .modal-dialog .right-modal {
        width: 300px !important;
        padding: 8px;
    }
    .select2-container--default .select2-selection--single {
        min-width: 120px !important;
    }
    /* .filter-wrapper .right .filter-btn {
        width: 80px !important;
    } */


    .pro-comp-main-actions .btn-white, .pro-comp-main-actions .btn-blue {
        font-size: 13px !important;
    }
    .pro-comp-service-details-container {
        padding: 12px;
    }
    .pro-comp-service-deatils-dropdown-wrapper .select2 {
        width: 100px !important;
    }
    .pro-comp-service-deatils-dropdown-wrapper .select2 .selection .select2-selection {
        min-width: 100px !important;
        height: 40px;
    }
    .pro-comp-service-deatils-dropdown-wrapper .select2 .selection .select2-selection .select2-selection__arrow {
        top: 15px !important;
        width: 12px !important;
        height: 12px !important;
        right: 20px !important;
    }
    /* .pro-comp-service-deatils-card.is-clamped {
        max-height: 420px;
        min-height: 420px;
    } */
    .portfolio-container {
        padding: 0px 16px;
    }
    .portfolio-top .title-btn .title {
        font-size: 14px;
    }
    .portfolio-top .title-btn {
        margin-bottom: 16px !important;
    }
    .service-cards.owl-carousel .owl-stage{
        padding-left: 0 !important;
    }
    .remove-image-btn .company-btn-span span{
        display: none;
    }
    .admin-preview-btn {
        width: 120px !important;
        font-size: 14px !important;
    }
    .user-dashboard .right-container .content #tab-contact .form-item .right-section .left{
       flex-wrap: wrap;
       gap: 4px;
    }
    #emailLocal{
        padding-right: 110px !important;
    }
    .ui-datepicker {
        position: fixed !important;
        top: 20% !important;
        left: 50% !important;
        transform: translate(-50%, 0);
        z-index: 9999;
        width: 95% !important;
    }
    .btn-manage-plan {
        flex: 1 1 100%;
        align-items: center;
        justify-content: center;
    } 
}
@media (max-width: 350px){
    .company-card .header{
        display: flex !important;
    }
    .ind-cards-wrapper > .ind-card-item {
        flex-basis: 100%;
        max-width: 100%;
    }
    .pro-admin-service-card-v2 .service-card-header .input {
        padding-right: 0px !important;
    }
    .project-duration-row {
        flex-direction: column;
        gap: 8px;
    }   
     .project-duration-row .col-6{
        max-width: 100% !important;
        width: 100% !important;
    }
    .user-dashboard .right-container .content  .update-password-footer {
        padding: 16px;
    }
    .user-dashboard .right-container .content  .update-password-footer .btn-white, .user-dashboard .right-container .content  .update-password-footer .btn-blue {
        font-size: 14px !important;
    }
    .modal-content.small-modal.submit-company-modal .content .header .title {
        font-size: 20px;
    }

}

/* Error Modal List Styling */
.error-modal-list {
    text-align: left;
    margin-top: 10px;
    padding-left: 20px;
    list-style-type: disc;
}

.error-modal-list li {
    margin-bottom: 8px;
    font-size: 16px;
    color: #dc3545;
}

/* Form Error Styling */
.input-flex.is-invalid,
.input-flex.invalid,
.custom-tages-container.invalid,
.custom-tages-container.is-invalid {
    border: 1px solid #dc3545 !important;
    border-radius: 16px;
}

.input-flex.is-invalid .input,
.input-flex.invalid .input {
    border: none !important;
}

.input-flex.is-invalid:focus-within,
.input-flex.invalid:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}
#billingUpgradeSuccessModal .modal-content.small-modal {
    border-radius: 24px;
}

.input-flex.is-invalid:focus-within,
.input-flex.invalid:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}
#billingUpgradeSuccessModal .modal-content.small-modal {
    border-radius: 24px;
}

/* ============================================================================
   INBOX RESPONSIVE STYLES
   ============================================================================ */

/* ---------- 1399px - Large Desktop ---------- */
@media (max-width: 1399.98px) {
    .inbox-sidebar {
        width: 340px;
        min-width: 340px;
    }

    .inbox-search {
        width: calc(100% - 32px);
    }

    .inbox-company-details-container {
        min-width: 280px;
    }

    .inbox-chat-input-area {
        max-width: 100%;
    }

    .chat-message {
        max-width: 80%;
    }

    .inbox-hide-details-btn {
        padding: 10px 12px;
        font-size: 14px;
    }

    .inbox-details-tab {
        font-size: 14px;
        padding: 14px 10px;
    }

    .inline-editor-wrapper {
        min-width: 450px;
    }
}

/* ---------- 1199px - Desktop ---------- */
@media (max-width: 1199.98px) {
    .inbox-sidebar {
        width: 300px;
        min-width: 300px;
    }

    .inbox-search {
        width: calc(100% - 32px);
        padding: 12px 16px;
    }

    .inbox-chat-messages {
        width: 100%;
    }

    .inbox-company-details-container {
        width: 280px;
        min-width: 280px;
        padding: 12px;
    }

    .inbox-chat-area {
        margin: 12px;
        height: calc(100% - 24px);
    }

    .inbox-chat-header {
        padding: 12px 16px;
    }

    .inbox-details-header {
        gap: 10px;
    }

    .inbox-hide-details-btn {
        padding: 8px 10px;
        font-size: 13px;
        gap: 6px;
    }

    .inbox-hide-details-btn img {
        width: 18px;
        height: 18px;
    }

    .inbox-search-btn,
    .inbox-favorite-large-btn {
        width: 40px;
        height: 40px;
    }

    .chat-message {
        max-width: 85%;
    }

    .inbox-details-tab {
        font-size: 13px;
        padding: 12px 8px;
    }

    .count-files {
        position: static;
    }

    .inbox-chat-input-area {
        max-width: 100%;
        margin: 12px;
        width: calc(100% - 24px);
    }

    .inline-editor-wrapper {
        min-width: 400px;
    }

    .quick-response-dropdown {
        width: 280px;
    }

    .inbox-search-overlay-header {
        padding: 12px;
    }

    .inbox-search-overlay-title {
        font-size: 16px;
    }
    .inbox-chat-toolbar {
        padding-left: 10px;
    }
}

/* Navigation Buttons - Mobile Toggles */
.inbox-messenger-toggle,
.inbox-sidebar-back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.inbox-messenger-toggle:hover,
.inbox-sidebar-back-btn:hover {
    border-color: #7D5CA4;
    background-color: #F8F7FA;
}

.inbox-messenger-toggle img,
.inbox-sidebar-back-btn svg {
    width: 20px;
    height: 20px;
}

.inbox-messenger-toggle img {
    object-fit: contain;
}

.inbox-details-mobile-header {
    display: none;
    padding: 12px 16px;
    border-bottom: 1px solid #E5E5E5;
    background: white;
}

.inbox-details-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #333;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font-family: var(--SFProMedium);
}

.inbox-details-back-btn svg {
    width: 20px;
    height: 20px;
}

/* ---------- 991px - Tablet Landscape ---------- */
@media (max-width: 991.98px) {
    .inbox-container {
        height: calc(100vh - 80px);
        position: relative;
    }

    /* Show mobile navigation buttons */
    .inbox-messenger-toggle,
    .inbox-sidebar-back-btn {
        display: flex;
    }

    /* Mobile toggle: sidebar visible by default, chat hidden */
    .inbox-sidebar {
        display: flex;
    }

    .inbox-chat-area {
        display: none;
    }

    /* When a conversation is selected: hide sidebar, show chat */
    .inbox-container.mobile-chat-active .inbox-sidebar {
        display: none;
    }

    .inbox-container.mobile-chat-active .inbox-chat-area {
        display: flex;
        flex: 1;
    }

    .inbox-sidebar {
        width: 100%;
        min-width: 100%;
        height: calc(100vh - 80px);
        border-right: none;
    }

    .inbox-sidebar-header {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .inbox-title {
        font-size: 18px;
    }

    .inbox-tabs {
        padding: 0 12px;
    }

    .inbox-tab {
        padding: 12px 10px;
        font-size: 14px;
    }

    .inbox-tab.active {
        font-size: 14px;
    }

    .inbox-search {
        margin: 12px;
        width: calc(100% - 24px);
        height: 42px;
        padding: 10px 16px;
    }

    .inbox-message-item {
        padding: 12px;
        gap: 8px;
    }

    .inbox-message-name {
        font-size: 14px;
    }

    .inbox-message-preview {
        font-size: 13px;
    }

    .inbox-message-time {
        font-size: 12px;
    }

    .inbox-message-logo {
        width: 40px;
        height: 40px;
    }

    /* Details panel full screen on mobile */
    .inbox-company-details-container {
        display: block;
        position: fixed;
        top: 80px; /* Below header */
        left: 0;
        right: 0;
        width: 100%;
        bottom: 0;
        z-index: 1010;
        background: white;
        padding: 0; /* Remove default padding, use header padding */
        overflow-y: auto;
    }
    .inbox-details-content.active {
        padding: 16px;
    }
    .inbox-company-name-row {
        padding: 16px;
        font-size: 24px;
    }
    .inbox-details-mobile-header {
        display: flex;
    }

    .inbox-details-header-info {
        padding: 16px;
    }

    .inbox-chat-messages {
        width: 100%;
    }

    .inbox-chat-area {
        margin: 10px;
        height: calc(100% - 20px);
        border-radius: 16px;
    }

    .inbox-chat-header {
        padding: 10px 12px;
    }

    .inbox-chat-name {
        font-size: 14px;
    }

    .inbox-chat-status {
        font-size: 12px;
    }

    .inbox-chat-logo {
        width: 40px;
        height: 40px;
    }

    /* Show details toggle as icon-only on tablet */
    .inbox-hide-details-btn {
        display: flex;
        font-size: 0;
        padding: 0;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        border: 1px solid #E5E5E5;
        border-radius: 8px;
        gap: 0;
    }

    .inbox-hide-details-btn img {
        margin: 0;
        width: 20px;
        height: 20px;
    }

    .chat-bubble {
        padding: 12px;
        font-size: 15px;
    }

    .chat-message {
        max-width: 85%;
        gap: 8px;
    }

    .chat-avatar {
        width: 32px;
        height: 32px;
    }

    .chat-time {
        font-size: 12px;
    }

    .chat-via {
        font-size: 12px;
    }

    .edited-indicator {
        font-size: 12px;
    }

    .chatting {
        padding: 12px;
        gap: 16px;
    }

    .inbox-chat-input-area {
        margin: 10px;
        width: calc(100% - 20px);
    }

    .inbox-chat-toolbar {
        padding-left: 12px;
    }

    .inbox-chat-input {
        height: 50px !important;
    }

    .inline-editor-wrapper {
        min-width: 350px;
    }

    .chat-message-wrapper {
        padding: 8px 8px;
        margin: -8px -8px;
        gap: 0;
    }

    .reply-pin-container {
        margin: 10px 12px;
        margin-bottom: 0;
    }

    .reply-pin-message {
        font-size: 14px;
    }

    /* Image Modal tablet */
    .image-modal-image-container {
        padding: 50px 30px 180px;
    }

    .image-modal-info {
        padding: 16px 30px;
        bottom: 90px;
    }

    .image-modal-nav {
        width: 40px;
        height: 40px;
    }

    .image-modal-nav.prev {
        left: 12px;
    }

    .image-modal-nav.next {
        right: 12px;
    }

    .image-modal-close {
        width: 40px;
        height: 40px;
        top: 12px;
        right: 12px;
    }

    /* Quick response modal */
    .quick-response-modal .modal-dialog {
        max-width: 90%;
    }

    .va-toast-container {
        right: 16px;
        left: auto;
        max-width: 320px;
    }
     .portfolio-name-span .title {
        font-size: 16px;
    }    
    .portfolio-name-span span {
        font-size: 14px;
    }
    .pro-admin-portfolio .btn-blue {
        font-size: 14px;
        height: 40px;
        border-radius: 12px;
    }
    .portfolio-ed-badge {
        height: 26px;
        width: 26px;
        border-radius: 12px;
    }
    .portfolio-ed-badge img {
        height: 14px !important;
        width: 14px !important;
    }

    .create-port .admin-preview-btn {
        display: none;
    }
    /* ------- PORTFOLIO CREATE/EDIT ------- */
    .create-port.user-dashboard {
        padding: 0 !important;
    }

    .port-container {
        margin-top: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .port-top {
        padding: 16px !important;
    }    
    .port-top .port-top-wrapper .form-item .row .col-md-8 {
        display: block !important;
    }

    .port-title {
        font-size: 24px !important;
        line-height: 1.2;
    }
    .port-service-details-select2-container {
        height: 48px !important;
    }
    .port-flex {
       height: 48px !important;
    }
    .port-service-details-select2-container .select2-selection__arrow {
        top: 13px !important;
    }
    .port-top .label {
        font-size: 14px !important;
    }
    .port-service-details-select2-drop{
        min-width: 30vw !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .port-attachments-upload-area {
        padding: 20px !important;
        min-height: 160px !important;
    }

    .port-attachments-upload-area .upload-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 4px !important;
    }

    .port-attachments-upload-area .upload-title {
        font-size: 16px !important;
    }

    .port-attachments-upload-area .upload-subtext {
        font-size: 14px !important;
    }

    .attachments-preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 12px !important;
        margin-top: 16px !important;
    }

    .attachment-preview-item .remove-btn {
        width: 20px !important;
        height: 20px !important;
        padding: 4px !important;
    }

    .attachment-preview-item .remove-btn img {
        width: 10px !important;
        height: 10px !important;
    }

    /* Sticky Footer for Portfolio */
    .port-bottom {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 100 !important;
        background: #fff !important;
        padding: 12px 16px !important;
        border-top: 1px solid #E5E5E5 !important;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
        margin: 0 -16px;
    }

    .port-bottom-wrapper {
        display: flex !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .port-bottom-wrapper .btn-blue,
    .port-bottom-wrapper .btn-white {
        flex: 1 !important;
        height: 40px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    .pro-comp-portfolio-card .portfolio-edit-delete {
        opacity: 1;
    }

    .responsive-review-row{
        flex-direction: column;
        gap: 16px;
    }
    .responsive-review-row .responsive-review-col{
        max-width: 100% !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .pro-review-platform-services {
        width: 100% !important;
    }
    .pro-review-platform-services .row .col-md-9 .input{
        flex: auto !important;
    }
    .review-icon-input .custom-checkbox .box {
        margin-top: 0px !important;
    }
    #tab-general .pro-admin-footer {
        height: 15vh !important;
    }
    .btn-red {
        height: 48px;
        border-radius: 12px;
        font-size: 14px;
        width: max-content !important;
    }
    .review-search-modal-content .modal-header-custom{
        padding: 16px;
    }
    .review-search-modal-content .close-modal-btn img{
        width: 32px;
        height: 32px;
    }
    .company-admin-edit-title,.signed-user .right-container .content .top h1 {
        font-size: 20px;
    }
    .user-dashboard .right-container .content .top {
        padding: 16px;
    }
    .user-dashboard .right-container .edit-profile-content .form-item .label-wrapper label {
        font-size: 16px;
    }
    .user-dashboard .edit-profile-content .form-item .input-parent {
        height: 48px;
        overflow: hidden;
    }
    .user-dashboard .edit-profile-content .form-item .input-parent .fixed-info {
        height: 46px;
        border-bottom-right-radius: 15px;
        border-top-right-radius: 15px;
    }  
    .user-dashboard .edit-profile-content .form-item .select2-container {
        height: 48px;
    } 
    .admin-work-details-container{
        height: 48px !important;
    }
    .admin-work-details-container .select2-selection__rendered {
        font-size: 14px !important;
    }
    .user-dashboard .right-container .content .form-item .admin-work-details .label-wrapper label {
        font-size: 16px;
    }
   .confirmation-modal-content .btn-blue {
        max-height: 48px;
    }
    .select2-container--default .admin-work-details-container .select2-selection__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        top: auto !important;
    }
    .admin-work-details-dropdown {
        min-width: 30vw !important;
        width: auto !important;
        /* max-width: 450px !important; */
    }
    .time-zone-item .col-md-8{
        justify-content: flex-start !important;
    }
    .update-password-top label {
        font-size: 16px !important;
    }
    .user-dashboard .form-item .input-parent .icon {
        transform: translateY(-63%);
        
    }
    .update-password-top .col-md-8 {  
        flex-direction: column;
    }
    .update-password-top .input-parent{
        height: 48px !important;
    }
    .responsive-error{
        flex-direction: column;
    }

    /* ---------------login--------------- */
    .login-r,.login-l {
       width: 10vw;
    }
    .login-section .logo {
        width: 110px !important;
        margin-bottom: 16px;
    }
    .login-section .title {
        font-size: 20px;
        margin-bottom: 16px;
    }
    .login-section .boxx {
        padding: 16px;
    }
    .login-section .boxx .input-wrapper {
        margin-bottom: 16px;
    }
    .login-section .boxx .input-wrapper label {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .login-section .boxx .input-wrapper .input {
        height: 48px;
        font-size: 14px;
        border-radius: 12px;
    }    
    .login-section .boxx .input-wrapper .input input {
        font-size: 14px;
    }
    .login-section .boxx .input-wrapper .error {
        font-size: 14px;
    }
    .login-section .boxx .input-wrapper .input img {
        width: 20px;
    }
    .login-section .remember-me {
        margin-bottom: 16px;
    }
    .login-section .remember-me .left {
        gap: 8px;
    }
    .login-section .remember-me .left label, .login-section .remember-me .forgot {
        font-size: 14px;
    }
    .login-section .btn-blue, .login-section .btn-white {
        border-radius: 12px;
        font-size: 14px;
        height: 48px;
        margin-bottom: 16px !important;
    }
    .dont-have-account {
        font-size: 14px;
        margin-bottom: 16px;
    }
    .sign-up-btn {
        font-size: 14px;
        height: 48px;
    }    
    .sign-up-btn img{
        width: 12px;
    }
    .divider {
        font-size: 14px;
        margin: 16px 0;
    }
    .login-section .text {
        font-size: 14px;
        margin-bottom: 16px !important;
    }

    /* ------------sign up ----------------- */
    .signup-names .first-name, .signup-names .last-name {
        width: 50%;
    }
    .login-section .boxx .signup-names .input {
        margin-bottom: 0px !important;
    } 



    /* ---------forgot password------- */
    .login-section.forget-passsword-section .logo {
        width: 110px !important;
        margin-bottom: 16px;
    }
    .login-section.forget-passsword-section .title {
        font-size: 20px !important;
        margin-bottom: 16px;
    }
    .login-section.forget-passsword-section .other-title {
        font-size: 16px !important;
    }
    .reset-password-text{
        margin-bottom: 16px !important;
    }
    .back-to-login {
        margin-bottom: 16px;
    }
    .back-to-login a {
        font-size: 14px;
    }
    #success-modal-forgot-password .body img{
        width: 180px;
    }   
     #success-modal-forgot-password .body h4{
        font-size: 20px;
    }     
    #success-modal-forgot-password .body p{
        font-size: 14px;
    }



    /* ----------user review ------------ */
        .user-dashboard .right-container.my-reviews-page{
        align-self: flex-start;
        padding-bottom: 16px !important;
    }
    .my-reviews-title {
        font-size: 20px;
        margin-bottom: 16px;
    }
    .no-reviews-found h2 {
        margin-top: 16px;
        margin-bottom: 16px;
        font-size: 16px;
    }
    .no-reviews-found img{
        width: 20vw;
    }

    .my-reviews-page .my-reviews-subtitle {
        font-size: 16px;
        margin-bottom: 16px;
    }
    .my-reviews-page .review-card {
        border-radius: 12px;
        padding: 16px;
    }
    .my-reviews-page .review-card-header {
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
    .my-reviews-page .review-company-info {
        gap: 8px;
    }
    .my-reviews-page .review-card .review-company-logo {
        width: 32px !important;
        height: 32px !important;
    }
    .my-reviews-page .review-company-name {
        font-size: 14px;
    }
    .my-reviews-page .review-time {
        font-size: 12px;
    }
    .my-reviews-page .review-rating-info {
        gap: 8px;
    }
    .my-reviews-page .review-rating-number {
        font-size: 14px;
    }
    .my-reviews-page .review-stars svg {
        width: 14px;
        height: 14px;
    }
    .my-reviews-page .review-card-content {
        margin-bottom: 16px;
    }
    .my-reviews-page .review-title {
        font-size: 14px;
        margin-bottom: 16px;
    }
    .my-reviews-page .review-text {
        font-size: 12px;
        padding-top: 0px;
    }
    .my-reviews-page .review-actions-left {
        gap: 16px;
    }
    .my-reviews-page .review-card-footer {
        flex-wrap: wrap;
        gap: 16px;
    }
    .my-reviews-page .review-action-btn {
        font-size: 14px;
    }    
    .my-reviews-page .review-action-btn img,.my-reviews-page .review-action-btn img, .my-reviews-page .review-delete-btn img {
        width: 16px;
        height: 16px;
    }
    .my-reviews-page .review-action-btn {
        font-size: 14px;
    }
    .my-reviews-page .review-delete-btn {
        font-size: 14px;
    }



    /* -------- Billing & Subscription ---------  */

    .paid-ranking-tabs {
        gap: 24px;
        margin-bottom: 16px;
    }
    .paid-ranking-tab {
        font-size: 14px;
    }

    #tab-invoices .ranking-plan-header {
        border-radius: 12px;
        margin-left: -16px;
        margin-right: -16px;
    }
    .billing-past-invoices-section {
        border-radius: 12px;
        padding: 14px 16px 32px 16px !important;
    }
    .ranking-plan-title {
        font-size: 16px;
    }
    .invoice-filters {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .invoice-filters .filter-group label {
        font-size: 14px;
    }
    .date-input-wrapper input {
        height: 48px;
        font-size: 12px;
    }
    .date-input-wrapper .calendar-icon {
        width: 16px;
        height: 16px;
    }
    .ranking-table-title {
        font-size: 16px;
        margin: 0px 0 16px 0;
    }
    .ranking-table th {
        font-size: 14px;
    }
    .ranking-table td {
        font-size: 14px;
    }
    .status-badge.paid {
        font-size: 14px;
    }

    /* Past Invoices - Card Layout (1 card per record) */
    .billing-past-invoices-section .ranking-table-wrapper {
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    .past-invoices-table,
    .past-invoices-table thead,
    .past-invoices-table tbody,
    .past-invoices-table tr,
    .past-invoices-table td {
        display: block;
        width: 100%;
    }
    .past-invoices-table th, .past-invoices-table td {
        width: 100% !important;
    }
    .past-invoices-table thead {
        display: none;
    }

    .past-invoices-table tbody tr {
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        background: #fff;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04);
    }

    .past-invoices-table tbody tr:hover {
        background-color: #FAFBFC;
    }

    .past-invoices-table tbody tr td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0 !important;
        border-bottom: none;
        font-size: 14px;
        text-align: right !important;
    }

    .past-invoices-table tbody tr td::before {
        font-size: 13px;
        font-weight: 500;
        font-family: var(--SFProMedium);
        color: rgba(130, 130, 130, 1);
        text-align: left;
        flex-shrink: 0;
        margin-right: 12px;
    }
    table.dataTable.ranking-table {
        border-bottom: none !important;
        margin-bottom: 16px !important;
    }
    .ranking-table th:not(:first-child), .ranking-table td:not(:first-child) {
        padding: 12px 0 !important;
    }
    .past-invoices-table tbody tr td:nth-child(1)::before {
        content: 'Invoice ID';
    }

    .past-invoices-table tbody tr td:nth-child(2)::before {
        content: 'Date';
    }

    .past-invoices-table tbody tr td:nth-child(3)::before {
        content: 'Amount';
    }

    .past-invoices-table tbody tr td:nth-child(4)::before {
        content: 'Status';
    }

    .past-invoices-table tbody tr td:nth-child(4) {
        padding-bottom: 10px !important;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(229, 229, 229, 0.6) !important;
    }

    .past-invoices-table tbody tr td:nth-child(5) {
        justify-content: flex-end;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    .past-invoices-table tbody tr td:nth-child(5)::before {
        content: none;
    }

    .past-invoices-table tbody tr:last-child td {
        border-bottom: none;
    }

    .past-invoices-table tbody tr:last-child {
        margin-bottom: 0;
    }

    /* DataTables empty state */
    .past-invoices-table tbody tr td.dataTables_empty {
        justify-content: center;
        text-align: center !important;
    }

    .past-invoices-table tbody tr td.dataTables_empty::before {
        content: none;
    }


    /* --------- Billing & Payment Methods ---------   */
    .billing-payments-card {
        border-radius: 12px;
        padding: 16px;
    }
    .payment-section-title {
        font-size: 16px;;
        margin-bottom: 16px;
    }
    .active-plan-card-wrapper {
        flex-wrap: wrap;
        gap: 16px;
    }
    .plan-info .plan-details {
        font-size: 14px;
    }
    .plan-info .plan-title {
        font-size: 14px;
        margin: 0 0 8px 0;
    }
    .btn-manage-plan {
        font-size: 14px;
    }    
    .btn-manage-plan img{
        width: 16px;
        height: 16px;
    }
    .billing-section-divider {
        margin: 16px 0;
    }
    .billing-section {
        gap: 16px;
    }
    .billing-section-title {
        font-size: 16px;
    }
    .billing-info-name {
        font-size: 14px;
    }
    .billing-info-email, .billing-info-address {
        font-size: 14px;
    }
    .btn-outline-light {
        border-radius: 12px;
        font-size: 14px;
    }
    .billing-info-modal .modal-content.small-modal .content .header .title {
        font-size: 18px;
    }
    .billing-info-modal .modal-content.small-modal .content.no-footer .body .btn-blue, .billing-info-modal .modal-content.small-modal .content.no-footer .body .btn-white {
        font-size: 14px;
        flex: 1;
        height: 48px;
        border-radius: 12px;
        margin-top: 12px;
    }
    .billing-info-modal .modal-content.small-modal .content.no-footer .body .row .col-md-6 {
        flex: 0 0 auto;
        width: 100%;
    }
    .billing-info-modal .modal-content.small-modal .content .input-wrapper label {
        margin-bottom: 8px !important;
    }
    .payment-method-details {
        flex-wrap: wrap;
    }
    .payment-method-meta {
        font-size: 14px;
    }
    .stripe-modal-body {
        padding: 8px !important;
    }

    .cancel-plan-modal{
        padding: 16px !important;
    }
    .cancel-plan-modal .modal-content .header .title {
        font-size: 24px !important;
    }
    .cancel-plan-modal .cancel-plan-subtitle {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .cancel-plan-modal .cancel-plan-loss-box .loss-text {
        font-size: 14px;
    }
    .cancel-plan-modal .cancel-plan-loss-box img{
        width: 20px;
        height: 20px;
    }
    .talk-to {
        border-radius: 12px;
    }
    .talk-to-wrapper {
        gap: 16px;
    }
    .talk-to-img {
        display: none;
    }
    .talk-to-heading {
        font-size: 16px;
    }
    .talk-to-text p {
        font-size: 14px;
    }
    .talk-to-contact {
        font-size: 14px;
    }
    .pause-plan-wrapper {
       flex-direction: column;
    }
    .pause-plan-btns-wrapper {
        flex-wrap: wrap;
    }
    .pause-heading {
        font-size: 16px;
    }
    .pause-plan-text {
        font-size: 14px;
        margin-bottom: 12px;
    }
    .pause-plan-wrapper span {
        font-size: 16px;
    }
    .pause-btns {
        font-size: 14px !important;
        border-radius: 12px;
    }
    .pause-plan-btn {
        width: 100% !important;
        height: 48px;
    }
    .cancel-plan-modal .modal-footer-btns .btn-stay {
        border-radius: 12px;
        font-size: 14px;
        height: 48px;
        padding: 4px;
    }
    .cancel-plan-modal .modal-footer-btns .btn-cancel {
        border-radius: 12px;
        font-size: 14px;
        height: 48px;
        padding: 4px;
    }
    .cancel-plan-modal .modal-form-label {
        font-size: 16px;
    }
    .cancel-plan-modal .cancel-plan-select, .cancel-plan-modal .cancel-plan-textarea {
        font-size: 14px;
        margin-bottom: 16px;
    }
    .modal-form-label.text-area-label {
        margin-top: 0px;
    }
    .cancel-plan-modal .cancel-plan-textarea {
        height: 120px;
    }


    .selection-title {
        font-size: 16px;
    }
    .billing-plans-grid {
        gap: 16px;
    }
    .billing-plan-card {
        border-radius: 12px;
        padding: 32px 16px 32px 16px;
    }
    .plan-badge {
        font-size: 14px;
    }
    .plan-name {
        font-size: 18px;
    }
    .plan-desc {
        font-size: 14px;
    }
    .plan-features li {
        gap: 8px;
        font-size: 14px;
    }
    .plan-price-group .price {
        font-size: 32px;
    }
    .plan-price-group .price-period {
        font-size: 16px;
    }
    .billing-plans-grid {
        flex-direction: column;
    }
    .plan-footer {
        margin-top: 16px;
    }
    .btn-upgrade {
        font-size: 14px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .billing-compare-section {
        border-radius: 12px;
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .compare-plan-switcher {
        display: flex;
    }

    .compare-row {
        grid-template-columns: 1.2fr 1fr;
        gap: 12px;
        padding: 0 16px;
    }

    .compare-plans-wrapper {
        padding: 16px 0;
    }
    .compare-header-row .compare-cell.feature-cell {
        padding-bottom: 16px;
    }
    .compare-plans-wrapper .plan-cell,
    .compare-plans-wrapper .check-cell {
        display: none;
    }
    .compare-cell {
        padding: 16px 0;
    }
    .compare-plans-wrapper.free-plan-selected .plan-cell:not(.pro-cell),
    .compare-plans-wrapper.free-plan-selected .check-cell:not(.pro-cell),
    .compare-plans-wrapper.pro-plan-selected .plan-cell.pro-cell,
    .compare-plans-wrapper.pro-plan-selected .check-cell.pro-cell {
        display: flex;
    }

    .compare-plans-wrapper::before {
        display: none !important;
    }

    .compare-feature-label {
        font-size: 18px;
    }

    .feature-title {
        font-size: 14px;
    }

    .feature-desc {
        font-size: 12px;
    }

    .compare-desc-title {
        width: auto;
    }

    .compare-plan-name {
        font-size: 20px !important;
    }

    .compare-plan-desc {
        font-size: 13px;
    }

    .compare-header-row {
        display: block !important;
    }
    .compare-header-row .feature-cell {
        display: none !important;
    }
    .compare-header-row .plan-cell {
        width: 100% !important;
    }
    
    .plan-header-content {
        width: 100% !important;
    }

    .plan-header-content .btn-current-plan, .plan-header-content .btn-upgrade {
        width: 100%;
        padding: 10px;
        font-size: 14px;
        height: 48px;
        border-radius: 12px;
    }
    .get-pro-blue-btn {
        height: 40px;
        border-radius: 12px;
        font-size: 14px !important;
        margin-top: 8px;
    }
}

/* ---------- 768px - Tablet Portrait / Mobile ---------- */
@media (max-width: 768px) {
    .inbox-container {
        flex-direction: row; /* Ensure row for toggle */
        height: 100vh;
        height: 100dvh;
        position: relative;
    }

    /* Show back button */
    .inbox-back-btn {
        display: flex;
    }

    /* Mobile toggle: sidebar visible by default, chat hidden */
    .inbox-sidebar {
        display: flex;
        width: 100%;
        min-width: 100%;
        height: 100%;
        border-right: none;
    }

    .inbox-chat-area {
        display: none;
        margin: 0;
        border-radius: 0;
        height: 100%;
    }

    /* When a conversation is selected: hide sidebar, show chat */
    .inbox-container.mobile-chat-active .inbox-sidebar {
        display: none;
    }

    .inbox-container.mobile-chat-active .inbox-chat-area {
        display: flex;
        flex: 1;
    }

    .inbox-sidebar-header {
        padding: 10px 16px;
    }

    .inbox-title {
        font-size: 18px;
    }

    .inbox-tabs {
        padding: 0 16px;
        gap: 0;
    }

    .inbox-tab {
        padding: 10px 12px;
        font-size: 13px;
        flex: 1;
        text-align: center;
    }

    .inbox-tab.active {
        font-size: 13px;
    }

    .inbox-search {
        margin: 10px 12px;
        width: calc(100% - 24px);
        height: 40px;
        border-radius: 12px;
        padding: 8px 12px;
    }

    .inbox-search-input {
        font-size: 14px;
    }

    .inbox-message-list {
        flex: 1;
        max-height: none; /* Let it fill available space in active view */
    }

    .inbox-message-item {
        padding: 10px 12px;
        gap: 8px;
    }

    .inbox-message-logo {
        width: 36px;
        height: 36px;
    }

    .inbox-message-name {
        font-size: 14px;
    }

    .inbox-message-subject {
        font-size: 14px;
    }

    .inbox-message-preview {
        font-size: 12px;
    }

    .inbox-message-time {
        font-size: 11px;
    }

    .inbox-message-meta {
        gap: 12px;
    }

    .inbox-favorite-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Chat area style adjustments */
    .inbox-chat-area-container {
        height: auto;
        flex: 1;
    }

    .inbox-chat-header {
        padding: 8px 12px;
        gap: 8px;
    }

    .inbox-chat-company {
        gap: 8px;
    }

    .inbox-chat-logo {
        width: 36px;
        height: 36px;
    }

    .inbox-chat-name {
        font-size: 14px;
    }

    .inbox-chat-status {
        font-size: 11px;
    }

    .inbox-verified {
        width: 14px;
        height: 14px;
    }

    .inbox-details-header {
        gap: 8px;
    }

    .inbox-search-btn,
    .inbox-favorite-large-btn {
        width: 36px;
        height: 36px;
    }

    .inbox-search-btn img,
    .inbox-favorite-large-btn svg {
        width: 14px;
        height: 14px;
    }

    /* Show details toggle as icon-only on mobile */
    .inbox-hide-details-btn {
        display: flex;
        font-size: 0;
        padding: 0;
        width: 36px;
        height: 36px;
        justify-content: center;
        align-items: center;
        border: 1px solid #E5E5E5;
        border-radius: 8px;
    }

    .inbox-hide-details-btn img {
        margin: 0;
        width: 18px;
        height: 18px;
    }

    .inbox-company-details-container {
        /* Inherits styles from 991px query */
        top: 60px; /* Adjust for smaller mobile header */
        width: 100%;
    }

    .inbox-chat-messages {
        width: 100%;
    }

    /* Chat messages */
    .chatting {
        padding: 10px;
        gap: 12px;
    }

    .chat-message {
        max-width: 90%;
        gap: 6px;
    }

    .chat-bubble {
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 12px;
    }

    .chat-message.received .chat-bubble {
        border-top-left-radius: 1px;
    }

    .chat-message.sent .chat-bubble {
        border-top-right-radius: 1px;
    }

    .chat-avatar {
        width: 28px;
        height: 28px;
    }

    .chat-time {
        font-size: 11px;
    }

    .chat-via {
        font-size: 11px;
    }

    .edited-indicator {
        font-size: 11px;
        padding-left: 6px;
    }

    .chat-message-footer {
        gap: 3px;
        margin-top: 4px;
    }

    .chat-action-btn {
        font-size: 12px;
        gap: 4px;
    }

    .chat-action-btn img {
        width: 14px;
        height: 14px;
    }

    .chat-message-actions {
        gap: 10px;
        margin-left: 8px;
    }

    /* Chat input */
    .inbox-chat-input-area {
        margin: 8px;
        width: calc(100% - 16px);
        border-radius: 12px;
    }

    .inbox-chat-input {
        height: 44px !important;
        border-radius: 12px !important;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }

    .inbox-chat-input .ql-editor {
        padding: 10px 12px !important;
    }

    .inbox-chat-input .ql-editor p {
        font-size: 14px !important;
    }

    .inbox-chat-toolbar {
        padding-left: 8px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .inbox-toolbar-btn {
        width: 28px;
        height: 28px;
    }

    .inbox-toolbar-btn img {
        width: 14px;
        height: 14px;
    }

    .inbox-send-btn {
        width: 36px;
        height: 36px;
        border-bottom-right-radius: 12px;
    }

    .counter-send-btn {
        gap: 2px;
    }

    .character-counter {
        padding: 6px 8px;
    }

    .counter-text {
        font-size: 10px;
    }

    /* Reply pin */
    .reply-pin-container {
        margin: 8px 10px;
        margin-bottom: 0;
        padding: 6px 4px;
    }

    .reply-pin-message {
        font-size: 13px;
        margin-left: 4px;
    }

    .close-reply-pin img {
        width: 14px;
        height: 14px;
    }

    /* Inline editor */
    .inline-editor-wrapper {
        min-width: 100%;
    }

    .inline-editor-container .ql-editor {
        padding: 10px 14px;
        font-size: 14px;
    }

    .inline-toolbar-wrapper {
        padding: 0 8px;
    }

    /* Attachment previews */
    .attachment-previews-container {
        padding: 6px 10px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .attachment-preview-item {
        width: 48px;
        height: 48px;
    }

    /* Quick response dropdown */
    .quick-response-dropdown {
        width: 280px;
        left: -100px;
    }

    .quick-response-header {
        padding: 14px 12px;
        font-size: 14px;
    }

    .quick-response-text {
        font-size: 14px;
    }

    .quick-response-footer {
        padding: 14px 12px;
    }

    .quick-response-create-btn {
        font-size: 14px;
    }

    /* Emoji picker */
    .emoji-picker-popup {
        left: -50px;
    }

    /* Image modal mobile */
    .image-modal-image-container {
        padding: 50px 16px 160px;
    }

    .image-modal-info {
        padding: 12px 16px;
        bottom: 80px;
    }

    .image-modal-name {
        font-size: 14px;
    }

    .image-modal-meta {
        font-size: 12px;
    }

    .image-modal-counter {
        font-size: 12px;
        padding: 0 10px;
    }

    .image-modal-nav {
        width: 36px;
        height: 36px;
    }

    .image-modal-nav svg {
        width: 24px;
        height: 24px;
    }

    .image-modal-nav.prev {
        left: 8px;
    }

    .image-modal-nav.next {
        right: 8px;
    }

    .image-modal-close {
        width: 36px;
        height: 36px;
        top: 10px;
        right: 10px;
    }

    .image-modal-close svg {
        width: 24px;
        height: 24px;
    }

    .image-modal-thumbnails-container {
        padding: 12px;
    }

    .image-modal-thumb {
        width: 48px;
        height: 48px;
    }

    .image-modal-download {
        width: 36px;
        height: 36px;
    }

    /* Chat images grid */
    .chat-images-grid {
        max-width: 250px;
    }

    .chat-bubble .chat-images-grid.grid-1 .chat-image-item {
        max-width: 200px;
    }

    /* Quick Response Modal */
    .quick-response-modal .modal-dialog {
        max-width: 95%;
        margin: 16px auto;
    }

    .quick-response-modal-inner {
        padding: 16px;
    }

    /* Toast notifications */
    .va-toast-container {
        right: 10px;
        left: 10px;
        max-width: 100%;
    }

    .va-toast {
        padding: 10px 14px;
    }

    /* No conversation state */
    .no-message-convo,
    .chat-area-no-message-convo {
        padding: 20px;
    }

    .no-convo-img,
    .chat-area-no-convo-img {
        max-width: 120px;
    }

    .no-convo-heading,
    .chat-area-no-convo-heading {
        font-size: 18px;
    }

    .no-convo-text,
    .chat-area-no-convo-text {
        font-size: 14px;
    }

    /* Upload progress */
    .upload-progress-container {
        padding: 8px 12px;
        margin-bottom: 8px;
    }

    .upload-progress-text {
        font-size: 11px;
    }

    /* Quoted messages */
    .quoted-message-text {
        font-size: 14px;
    }

    .chat-file-link {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* Search overlay */
    .inbox-search-overlay-header {
        padding: 10px 12px;
    }

    .inbox-search-overlay-title {
        font-size: 16px;
    }

    .inbox-search-overlay-input-wrapper {
        margin: 10px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .inbox-search-overlay-input {
        font-size: 13px;
    }

    .inbox-search-placeholder-title {
        font-size: 18px;
    }

    .inbox-search-placeholder-text {
        font-size: 14px;
    }

    .inbox-search-result-text {
        font-size: 14px;
    }

    .inbox-search-result-meta {
        font-size: 13px;
    }
    .select2-container--default .port-service-details-select2-container{
        height: 48px !important;
        min-width: 30vw !important;
    }
    .user-dashboard .create-port .form-item .select2-container {
        max-width: 100% !important;
        width: 100% !important;
    }
    .project-date-row {
        flex-direction: column;
        gap: 8px;
    }
    .project-date-row .col-6{
        width: 100% !important;
    }
    .user-dashboard .create-port .form-item .select2-container--default .select2-selection--single {
        max-width: 100% !important;
    }
    .user-dashboard .edit-profile-content .form-item .select2-container {
        height: 48px;
        min-width: 100% !important;
        max-width: 100% !important;
    } 
    .select2-container--default .admin-work-details-container{
        height: 48px !important;
        max-width: 100% !important;
    }
    .user-dashboard .edit-profile-content .form-item .input {
        max-width: 100% !important;
    }
    .user-dashboard .form-item .select2-container--default .admin-work-details-container .select2-selection__arrow {
        top: 12px;
    }
    .user-dashboard .edit-profile-content .select2-container {
        width: auto !important;
    }
    .admin-work-details {
        padding: 0 !important;
    }
    .responsive-edit-row {
        flex-direction: column;
        justify-content: flex-start !important;
        width: 100% !important;
    }
     .responsive-edit-row .col-12 {
        max-width: 100% !important;
        width: 100% !important; 
    }
    .edit-profile-upload .upload-box{
        justify-content: space-between;
        width: 100% !important;
    }    
    .edit-profile-upload .upload-box .upload-input{
        width: 110px !important;
    }
    .update-password-top .col-md-8 {
        width: 100% !important;   
        flex-direction: column;
    }
    .user-dashboard .update-password-top .form-item .input {
        max-width: 100% !important;
        width: 100% !important;
    }
    .user-dashboard .form-item .input-parent .icon {
        transform: translateY(-40%);
    }

    .ranking-table {
        min-width: auto !important;
    }
}

/* ---------- 575px - Small Phone ---------- */
@media (max-width: 575.98px) {
    .inbox-container {
        height: 100vh;
        height: 100dvh;
    }

    /* Mobile toggle for small phone */
    .inbox-sidebar {
        display: flex;
        width: 100%;
        min-width: 100%;
        height: 100%;
    }

    .inbox-chat-area {
        display: none;
        margin: 0;
        border-radius: 0;
    }

    .inbox-container.mobile-chat-active .inbox-sidebar {
        display: none;
    }

    .inbox-container.mobile-chat-active .inbox-chat-area {
        display: flex;
        flex: 1;
    }

    .inbox-sidebar-header {
        padding: 8px 12px;
    }

    .inbox-title {
        font-size: 16px;
    }

    .inbox-count-badge.large {
        font-size: 10px;
        min-width: 18px;
        height: 18px;
    }

    .inbox-tabs {
        padding: 0 8px;
    }

    .inbox-tab {
        padding: 8px 6px;
        font-size: 12px;
    }

    .inbox-tab.active {
        font-size: 12px;
    }

    .inbox-search {
        margin: 8px;
        width: calc(100% - 16px);
        height: 36px;
        gap: 8px;
        border-radius: 10px;
    }

    .inbox-search-input {
        font-size: 13px;
    }

    .inbox-message-list {
        flex: 1;
        max-height: none;
    }

    .inbox-message-item {
        padding: 8px 10px;
    }

    .inbox-message-logo {
        width: 32px;
        height: 32px;
    }

    .inbox-message-name {
        font-size: 13px;
    }

    .inbox-message-subject {
        font-size: 13px;
    }

    .inbox-message-preview {
        font-size: 12px;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .inbox-message-time {
        font-size: 10px;
    }

    .inbox-message-meta {
        gap: 8px;
    }

    .inbox-favorite-btn svg {
        width: 14px;
        height: 14px;
    }

    /* Chat header */
    .inbox-chat-header {
        padding: 6px 10px;
    }

    .inbox-chat-logo {
        width: 32px;
        height: 32px;
    }

    .inbox-chat-name {
        font-size: 13px;
    }

    .inbox-chat-status {
        font-size: 10px;
    }

    .inbox-chat-company {
        gap: 6px;
    }

    .inbox-search-btn,
    .inbox-favorite-large-btn {
        width: 32px;
        height: 32px;
    }

    /* Chat content */
    .chatting {
        padding: 8px;
        gap: 10px;
    }

    .chat-message {
        max-width: 92%;
        gap: 4px;
    }

    .chat-bubble {
        padding: 8px 10px;
        font-size: 13px;
        border-radius: 10px;
    }

    .chat-message.received .chat-bubble {
        border-top-left-radius: 1px;
    }

    .chat-message.sent .chat-bubble {
        border-top-right-radius: 1px;
    }

    .chat-avatar {
        width: 24px;
        height: 24px;
    }

    .chat-time {
        font-size: 10px;
    }

    .chat-via {
        font-size: 10px;
    }

    .edited-indicator {
        font-size: 10px;
        padding-left: 4px;
    }

    .chat-action-btn {
        font-size: 11px;
        gap: 3px;
    }

    .chat-action-btn img {
        width: 12px;
        height: 12px;
    }

    .chat-message-actions {
        gap: 6px;
        margin-left: 4px;
    }

    /* Input area */
    .inbox-chat-input-area {
        margin: 6px;
        width: calc(100% - 12px);
        border-radius: 10px;
    }

    .inbox-chat-input {
        height: 40px !important;
        border-radius: 10px !important;
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }

    .inbox-chat-input .ql-editor {
        padding: 8px 10px !important;
    }

    .inbox-chat-input .ql-editor p {
        font-size: 13px !important;
    }

    .inbox-chat-toolbar {
        padding-left: 6px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .inbox-toolbar-left {
        gap: 4px;
    }

    .inbox-toolbar-btn {
        width: 26px;
        height: 26px;
    }

    .inbox-toolbar-btn img {
        width: 13px;
        height: 13px;
    }

    .inbox-send-btn {
        width: 32px;
        height: 32px;
        border-bottom-right-radius: 10px;
    }

    .inbox-send-btn img {
        width: 16px;
        height: 16px;
    }

    .counter-text {
        font-size: 9px;
    }

    .character-counter {
        padding: 4px 6px;
    }

    /* Reply pin */
    .reply-pin-container {
        margin: 6px 8px;
        margin-bottom: 0;
        padding: 5px 4px;
    }

    .reply-pin-message {
        font-size: 12px;
    }

    /* Inline editor */
    .inline-editor-wrapper {
        min-width: 100%;
    }

    .inline-editor-container .ql-editor {
        padding: 8px 10px;
        font-size: 13px;
    }

    .inline-toolbar-left {
        gap: 4px;
    }

    /* Quick response */
    .quick-response-dropdown {
        width: 250px;
        left: -120px;
    }

    .quick-response-header {
        padding: 12px 10px;
        font-size: 13px;
    }

    .quick-response-item {
        padding: 10px 0;
        margin: 4px 8px 0 8px;
    }

    .quick-response-text {
        font-size: 13px;
    }

    .quick-response-footer {
        padding: 12px 10px;
    }

    .quick-response-create-btn {
        font-size: 13px;
    }

    /* Emoji picker */
    .emoji-picker-popup {
        left: -80px;
    }

    /* Attachment previews */
    .attachment-preview-item {
        width: 40px;
        height: 40px;
        border-radius: 6px;
    }

    /* Image modal */
    .image-modal-image-container {
        padding: 40px 10px 140px;
    }

    .image-modal-info {
        padding: 10px 12px;
        bottom: 70px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .image-modal-name {
        font-size: 13px;
    }

    .image-modal-meta {
        font-size: 11px;
    }

    .image-modal-counter {
        font-size: 11px;
        padding: 0 8px;
    }

    .image-modal-nav {
        width: 32px;
        height: 32px;
    }

    .image-modal-nav svg {
        width: 20px;
        height: 20px;
    }

    .image-modal-close {
        width: 32px;
        height: 32px;
    }

    .image-modal-close svg {
        width: 20px;
        height: 20px;
    }

    .image-modal-thumbnails-container {
        padding: 8px;
    }

    .image-modal-thumb {
        width: 40px;
        height: 40px;
        border-radius: 6px;
    }

    .image-modal-thumbnails {
        gap: 8px;
    }

    /* Chat images */
    .chat-images-grid {
        max-width: 200px;
    }

    .chat-bubble .chat-images-grid.grid-1 .chat-image-item {
        max-width: 180px;
    }

    /* Quick Response Modal */
    .quick-response-modal .modal-dialog {
        max-width: 100%;
        margin: 10px;
    }

    .quick-response-modal-content {
        border-radius: 12px !important;
    }

    .quick-response-modal-header {
        padding: 14px;
    }

    .quick-response-modal-title {
        font-size: 18px;
    }

    .quick-response-modal-body {
        padding: 14px;
    }

    .quick-response-label {
        font-size: 14px;
    }

    .quick-response-input,
    .quick-response-textarea {
        font-size: 14px;
    }

    .quick-response-modal-footer {
        padding: 14px;
        gap: 8px;
    }

    /* Search overlay */
    .inbox-search-overlay-header {
        padding: 8px 10px;
    }

    .inbox-search-overlay-title {
        font-size: 15px;
    }

    .inbox-search-overlay-input-wrapper {
        margin: 8px;
        padding: 8px 10px;
        border-radius: 10px;
    }

    .inbox-search-overlay-input {
        font-size: 13px;
    }

    .inbox-search-result-text {
        font-size: 13px;
        line-height: 18px;
    }

    .inbox-search-result-meta {
        font-size: 12px;
    }

    .inbox-search-placeholder-title {
        font-size: 16px;
    }

    .inbox-search-placeholder-text {
        font-size: 13px;
    }

    /* Toast notifications */
    .va-toast {
        padding: 8px 12px;
    }

    .va-toast-title {
        font-size: 13px;
    }

    .va-toast-message {
        font-size: 12px;
    }

    .va-toast-icon-wrapper {
        width: 32px;
        height: 32px;
    }

    .va-toast-icon-wrapper img {
        width: 16px;
        height: 16px;
    }

    /* No conversation states */
    .no-convo-img,
    .chat-area-no-convo-img {
        max-width: 100px;
    }

    .no-convo-heading,
    .chat-area-no-convo-heading {
        font-size: 16px;
    }

    .no-convo-text,
    .chat-area-no-convo-text {
        font-size: 13px;
    }

    /* Delete modal */
    #inboxDeleteModal .modal-dialog {
        max-width: 90%;
        margin: 10px auto;
    }

    /* Thumbnail initials */
    .thumbnail-initials {
        font-size: 12px;
    }
}

/* ---------- 479px - Extra Small Phone ---------- */
@media (max-width: 479.98px) {
    /* Mobile toggle for extra small phone */
    .inbox-sidebar {
        display: flex;
        width: 100%;
        min-width: 100%;
        height: 100%;
    }

    .inbox-chat-area {
        display: none;
        margin: 0;
        border-radius: 0;
    }

    .inbox-container.mobile-chat-active .inbox-sidebar {
        display: none;
    }

    .inbox-container.mobile-chat-active .inbox-chat-area {
        display: flex;
        flex: 1;
    }

    .inbox-sidebar-header {
        padding: 6px 10px;
    }

    .inbox-title {
        font-size: 15px;
    }

    .inbox-tab {
        padding: 6px 4px;
        font-size: 11px;
    }

    .inbox-tab.active {
        font-size: 11px;
    }

    .inbox-tab.active::after {
        height: 3px;
    }

    .inbox-search {
        margin: 6px;
        width: calc(100% - 12px);
        height: 34px;
    }

    .inbox-search-input {
        font-size: 12px;
    }

    .inbox-message-list {
        flex: 1;
        max-height: none;
    }

    .inbox-message-item {
        padding: 6px 8px;
    }

    .inbox-message-logo {
        width: 28px;
        height: 28px;
    }

    .inbox-message-name {
        font-size: 12px;
    }

    .inbox-message-preview {
        font-size: 11px;
    }

    .inbox-message-time {
        font-size: 9px;
    }

    .inbox-favorite-btn svg {
        width: 12px;
        height: 12px;
    }

    .purple-dot {
        width: 10px !important;
        height: 10px !important;
    }

    /* Chat */
    .inbox-chat-header {
        padding: 6px 8px;
    }

    .inbox-chat-logo {
        width: 28px;
        height: 28px;
    }

    .inbox-chat-name {
        font-size: 12px;
    }

    .inbox-chat-status {
        font-size: 9px;
    }

    .inbox-search-btn,
    .inbox-favorite-large-btn {
        width: 28px;
        height: 28px;
    }

    .chatting {
        padding: 6px;
        gap: 8px;
    }

    .chat-message {
        max-width: 95%;
        gap: 3px;
    }

    .chat-bubble {
        padding: 6px 8px;
        font-size: 12px;
        border-radius: 8px;
    }

    .chat-message.received .chat-bubble {
        border-top-left-radius: 1px;
    }

    .chat-message.sent .chat-bubble {
        border-top-right-radius: 1px;
    }

    .chat-avatar {
        width: 20px;
        height: 20px;
    }

    .chat-time,
    .chat-via,
    .edited-indicator {
        font-size: 9px;
    }

    .chat-message-footer {
        gap: 2px;
        margin-top: 2px;
    }

    .chat-message-actions {
        gap: 4px;
    }

    .chat-action-btn {
        font-size: 10px;
    }

    /* Input */
    .inbox-chat-input-area {
        margin: 4px;
        width: calc(100% - 8px);
    }

    .inbox-chat-input {
        height: 36px !important;
    }

    .inbox-chat-input .ql-editor p {
        font-size: 12px !important;
    }

    .inbox-toolbar-left {
        gap: 2px;
    }

    .inbox-toolbar-btn {
        width: 24px;
        height: 24px;
    }

    .inbox-toolbar-btn img {
        width: 12px;
        height: 12px;
    }

    .inbox-send-btn {
        width: 28px;
        height: 28px;
    }

    .inbox-send-btn img {
        width: 14px;
        height: 14px;
    }

    /* Quick Response dropdown */
    .quick-response-dropdown {
        width: 220px;
        left: -140px;
    }

    /* Emoji picker */
    .emoji-picker-popup {
        left: -100px;
        max-width: calc(100vw - 20px);
    }

    /* Image modal */
    .image-modal-image-container {
        padding: 36px 8px 120px;
    }

    .image-modal-info {
        bottom: 60px;
        padding: 8px 10px;
    }

    .image-modal-thumbnails-container {
        padding: 6px;
    }

    .image-modal-thumb {
        width: 36px;
        height: 36px;
    }

    .image-modal-thumbnails {
        gap: 6px;
    }

    /* Chat images */
    .chat-images-grid {
        max-width: 170px;
    }

    .chat-bubble .chat-images-grid.grid-1 .chat-image-item {
        max-width: 150px;
    }

    /* Toast */
    .va-toast-container {
        top: 8px;
        right: 8px;
        left: 8px;
    }

    /* Search overlay */
    .inbox-search-overlay-input-wrapper {
        margin: 6px;
    }

    .inbox-search-placeholder {
        padding: 20px 12px;
    }

    .inbox-search-placeholder-title {
        font-size: 15px;
    }

    .inbox-search-placeholder-text {
        font-size: 12px;
    }

    /* Quoted message */
    .quoted-message-text {
        font-size: 12px;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .chat-file-link {
        padding: 5px 8px;
        font-size: 12px;
        gap: 6px;
    }

    .chat-file-link img {
        width: 14px;
        height: 14px;
    }
    .content.confirmation-modal-content .image-large{
        margin-bottom: 16px !important;
    }
    .confirmation-modal-header {
        right: 15px;
    }
    .modal-content.small-modal .content .image-large img {
        max-height: 120px;
    }
}