@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:opsz,wght@6..72,300;6..72,400;6..72,500;6..72,600;6..72,700;6..72,800&display=swap');

/* JAI KUMAR CONSULTANCY — shared brand theme
   Navy is the foundation; saffron is reserved for calls to action; green signals success. */
:root {
    --primary-color: #021D3A;
    --primary-dark: #01162c;
    --theme-color: var(--primary-color);
    --primary-color-rgb: 2, 29, 58;
    --white-color: #FFFFFF;
    --jk-navy: var(--primary-color);
    --jk-navy-dark: var(--primary-dark);
    --jk-saffron: #f47a20;
    --jk-saffron-dark: #cf5f0d;
    --jk-green: #138a4a;
    --jk-page: #f5f8fc;
    --jk-border: #dce5ef;

    /* Admin template tokens */
    --primary: var(--jk-navy);
    --primary-hover: var(--jk-navy-dark);
    --secondary: var(--jk-green);
    --secondary-hover: #0d6d39;
    --success: var(--jk-green);
    --success-hover: #0d6d39;
    --warning: var(--jk-saffron);
    --warning-hover: var(--jk-saffron-dark);
    --orange: var(--jk-saffron);
    --orange-hover: var(--jk-saffron-dark);
    --primary-rgb: var(--primary-color-rgb);
    --secondary-rgb: 19, 138, 74;
    --success-rgb: 19, 138, 74;
    --warning-rgb: 244, 122, 32;
    --orange-rgb: 244, 122, 32;
    --primary-transparent: #e6edf5;
    --secondary-transparent: #e8f6ed;
    --success-transparent: #e8f6ed;
    --warning-transparent: #fff0e5;
    --orange-transparent: #fff0e5;
    --border-color: var(--jk-border);
    --login-gradient: linear-gradient(135deg, var(--primary-color) 0%, #0b355f 100%);
    --login-gradient-hover: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--primary-color-rgb);
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: var(--primary-dark);
}

/* Page-level styles may expose the same token, but the site-wide value stays
   authoritative even when those styles are rendered later in the document. */
html {
    --primary-color: #021D3A !important;
    --primary-dark: #01162c !important;
    --theme-color: #021D3A !important;
    --primary-color-rgb: 2, 29, 58 !important;
    --white-color: #FFFFFF !important;
}

/* One font across the public site, dashboard, broker panel and authentication pages.
   Icon classes are excluded so Tabler and Font Awesome glyphs keep rendering correctly. */
body,
body *:not(.ti):not([class^="ti-"]):not([class*=" ti-"]):not(.fa):not(.fas):not(.far):not(.fab):not([class^="fa-"]):not([class*=" fa-"]) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Shared page and form treatment */
body { background-color: var(--jk-page); }
a { color: var(--primary-color); }
a:hover { color: var(--primary-dark); }
/* .footer-section a,
.footer-section a:hover,
.footer-contact a,
.footer-contact a:hover {
    color: #ffffff !important;
} */
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem rgba(var(--primary-color-rgb), .14);
}

/* Bootstrap controls used throughout the public site and management panels */
.btn-primary, .bg-primary { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: var(--white-color); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline-primary:hover { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-warning, .bg-warning { background-color: var(--jk-saffron) !important; border-color: var(--jk-saffron) !important; color: #fff !important; }
.btn-warning:hover, .btn-warning:focus { background-color: var(--jk-saffron-dark) !important; border-color: var(--jk-saffron-dark) !important; }
.text-primary { color: var(--primary-color) !important; }
.text-success { color: #012936 important; }
.badge-soft-primary { color: var(--jk-navy) !important; background-color: #e8f0f8 !important; }
.badge-soft-success { color: var(--jk-green) !important; background-color: #e8f6ed !important; }
.badge-soft-warning { color: #9a4509 !important; background-color: #fff0e5 !important; }

/* Admin and broker dashboard */
.main-wrapper .content { background: var(--jk-page); }
.sidebar { background: var(--primary-color) !important; }
.sidebar .sidebar-menu > ul > li > a,
.sidebar .sidebar-menu > ul > li > a span,
.sidebar .sidebar-menu > ul > li > a i,
.sidebar .sidebar-menu > ul li .submenu > a,
.sidebar .sidebar-menu > ul li .submenu > a span,
.sidebar .sidebar-menu > ul li .submenu > a i {
    color: #ffffff !important;
}
.sidebar .sidebar-menu > ul > li > a:hover,
.sidebar .sidebar-menu > ul li .submenu > a:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}
.sidebar .sidebar-menu > ul > li > a:hover span,
.sidebar .sidebar-menu > ul > li > a:hover i,
.sidebar .sidebar-menu > ul li .submenu > a:hover span,
.sidebar .sidebar-menu > ul li .submenu > a:hover i,
.sidebar .sidebar-menu > ul li .submenu > a:hover .menu-arrow::before {
    color: #ffffff !important;
    border-color: #ffffff !important;
}
.sidebar .sidebar-menu > ul > li > a.active,
.sidebar .sidebar-menu > ul li .submenu > a.active,
.sidebar .sidebar-menu > ul li .submenu > a.subdrop,
.sidebar .sidebar-menu > ul > li ul > li.active a {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}
.sidebar .sidebar-menu > ul > li > a.active span,
.sidebar .sidebar-menu > ul > li > a.active i,
.sidebar .sidebar-menu > ul li .submenu > a.active span,
.sidebar .sidebar-menu > ul li .submenu > a.active i,
.sidebar .sidebar-menu > ul li .submenu > a.subdrop span,
.sidebar .sidebar-menu > ul li .submenu > a.subdrop i {
    color: #ffffff !important;
}
.sidebar .sidebar-menu > ul li .submenu > ul li a,
.sidebar .sidebar-menu > ul > li.submenu ul li a {
    color: #e8f0f8 !important;
}
.sidebar .sidebar-menu > ul li .submenu > ul li a:hover,
.sidebar .sidebar-menu > ul > li.submenu ul li a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.16) !important;
}
.sidebar .sidebar-menu > ul > li ul > li a.active,
.sidebar .sidebar-menu > ul li .submenu > ul li a.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
}
.navbar-header { background-color: var(--primary-color) !important; border-bottom-color: var(--primary-color); color: var(--white-color); }
.navbar-header .topbar-link, .navbar-header .header-search-icon, .navbar-header .sidenav-toggle-btn { color: var(--white-color) !important; }
.card { border-color: var(--jk-border); box-shadow: 0 4px 16px rgba(6, 43, 82, .06); }
.table > thead { background: #e6edf5; color: var(--primary-color); }
.page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); }
.page-link { color: var(--primary-color); }a

/* Frontend CTAs, navigation and key visual accents */
.btn-consult, #add, .register-btn, .login-btn { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: var(--white-color) !important; }
.btn-consult:hover, #add:hover, .register-btn:hover, .login-btn:hover { background-color: #FFFFFF !important; border-color: #021D3A !important; color: #021D3A !important;  }
.top-header, footer, .footer, .main-header, .navbar { border-color: var(--jk-border); }
.colorgreen, .namecoloragents { color: var(--primary-color) !important; }

/* Preserve saffron as the only promotional accent and green for positive information. */
.service-card i, .counter-box h3 { color: var(--primary-color) !important; }

/* Frontend logged-in user menu */
.top-header .container,
.top-header .row,
.top-header [class*="col-"] {
    overflow: visible !important;
}
.custom-navbar { z-index: 1020; }
.top-social { overflow: visible; }
.top-social .user-account-menu { display: inline-flex; align-items: center; width: auto; height: auto; position: relative; z-index: 1070; }
.top-social .user-account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 38px;
    height: auto;
    padding: 4px 10px 4px 5px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 22px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
}
.top-social .user-account-trigger::after { display: none; }
.top-social .user-account-trigger:hover,
.top-social .user-account-trigger:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}
.user-account-avatar {
    width: 29px;
    height: 29px;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}
.user-account-chevron { font-size: 10px; }
/* Frontend logged-in user dropdown - FIXED */
.top-social .user-account-menu {
    position: relative !important;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    z-index: 9999 !important;
}

.user-account-dropdown {
    position: absolute !important;

    /* Dropdown button ke exactly neeche */
    top: calc(100% + 10px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    /* Bootstrap/Popper transform ko override */
    transform: none !important;

    width: 280px !important;
    min-width: 280px !important;
    height: auto !important;
    max-height: none !important;

    padding: 8px !important;
    margin: 0 !important;

    background: #ffffff !important;
    border: 1px solid var(--jk-border) !important;
    border-radius: 12px !important;

    box-shadow: 0 14px 30px rgba(6, 43, 82, .16) !important;

    overflow: visible !important;
    z-index: 99999 !important;
}
.top-header,
.top-header .container,
.top-header .row,
.top-header [class*="col-"],
.top-social,
.top-social .user-account-menu {
    overflow: visible !important;
}
.top-social .user-account-dropdown .dropdown-item {
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    background: transparent !important;
    color: var(--primary-color) !important;
}
.user-account-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px;
    color: var(--primary-color);
}
.user-account-summary .user-account-avatar { width: 42px; height: 42px; border-color: var(--jk-border); }
.user-account-summary small { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 175px; }
.user-account-dropdown .dropdown-item {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 40px !important;
    height: auto !important;

    padding: 10px 12px !important;
    margin: 0 !important;

    border-radius: 7px !important;
    background: transparent !important;
    color: var(--primary-color) !important;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.user-account-dropdown .dropdown-item:hover {
    background: #e6edf5 !important;
    /* color: var(--primary-color) !important; */
}

.user-account-dropdown .dropdown-item i {
    width: 20px;
    margin-right: 8px;
    color: var(--primary-color) !important;
}
.user-account-dropdown .user-account-logout { width: 100%; border: 0; background: transparent; text-align: left; color: #c62828; }
.user-account-dropdown .user-account-logout i { color: #c62828; }
.user-account-dropdown .user-account-logout:hover { background: #fff0f0; color: #c62828; }

/* Keep the main navigation in its normal top-header position. Only the
   contact/social strip belongs at the bottom of the public site. */
:root {
    --frontend-nav-height: 116px;
    --frontend-top-header-height: 78px;
}
.frontend-body { padding-bottom: calc(var(--frontend-top-header-height) + 16px); }
.top-header {
    position: fixed !important;
    top: auto !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1049 !important;
}
.custom-navbar {
    position: sticky !important;
    top: 0 !important;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 1050 !important;
    background-color: var(--primary-color) !important;
    border-top: 1px solid rgba(255, 255, 255, .18) !important;
}
.top-header { background-color: var(--primary-color) !important; }
.custom-navbar .navbar-nav .nav-link { color: var(--white-color) !important; }
.custom-navbar .navbar-nav .nav-link:hover,
.custom-navbar .navbar-nav .nav-link:focus,
.custom-navbar .navbar-nav .nav-link.active { color: var(--white-color) !important; background: rgba(255, 255, 255, .14); }
.custom-navbar .dropdown-menu .dropdown-item { color: var(--primary-color) !important; }
.custom-navbar .dropdown-menu .dropdown-item:hover,
.custom-navbar .dropdown-menu .dropdown-item:focus { background: #e6edf5; color: var(--primary-color) !important; }
.box-search-btn .buy-btn {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
    border-color: var(--primary-color) !important;
}
.box-search-btn .buy-btn.activebutton {
    background-color: var(--white-color) !important;
    color: var(--primary-color) !important;
    border-color: var(--white-color) !important;
}
.footer-section, .footer, footer.footer {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}
.footer .text-dark, footer.footer .text-dark { color: var(--white-color) !important; }

/* Legacy inline primary shades still present in individual views inherit the
   centralized navy at runtime without affecting neutral/status text colors. */
[style*="background:#012936"], [style*="background: #012936"],
[style*="background-color:#012936"], [style*="background-color: #012936"],
[style*="background:#062b52"], [style*="background: #062b52"] {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
[style*="color:#012936"], [style*="color: #012936"],
[style*="color:#062b52"], [style*="color: #062b52"] { color: var(--primary-color) !important; }
@media (max-width: 575.98px) {
    .top-social { gap: 8px; }
    .top-social .user-account-name, .top-social .user-account-chevron { display: none; }
    .top-social .user-account-trigger { padding: 3px; }
}

@media (max-width: 991.98px) {
    :root { --frontend-nav-height: 84px; --frontend-top-header-height: 128px; }
    .frontend-body { padding-bottom: calc(var(--frontend-top-header-height) + 16px); }
    .custom-navbar .navbar-collapse {
        position: absolute;
        right: 0;
        top: 100%;
        bottom: auto;
        left: 0;
        padding: 12px 16px;
        background: var(--primary-color);
        border-top: 1px solid rgba(255, 255, 255, .18);
    }
    .custom-navbar .navbar-nav .nav-link { padding: 10px 12px; }
}

.hero-section.has-dynamic-banners {
    background-image: none !important;
    padding-bottom: 0;
}
.home-banner-slide {
    min-height: 420px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.col-xl-4 .project-cards,

.col-md-6 .project-cards {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}
.category-card { color: inherit; }
@media (max-width: 767.98px) {
    .home-banner-slide { min-height: 320px; }
}





/* =========================================
   MOBILE USER ACCOUNT MENU FIX
   ========================================= */

@media (max-width: 991.98px) {

    /* User account ko navbar ke andar proper position */
    .custom-navbar .navbar-collapse .top-social {
        width: 100% !important;
        margin: 8px 0 0 0 !important;
        padding: 0 10px 15px 10px !important;

        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;

        overflow: visible !important;
    }

    .custom-navbar .navbar-collapse .top-social .user-account-menu {
        position: relative !important;

        display: inline-flex !important;
        width: auto !important;
        height: auto !important;

        margin: 0 !important;

        overflow: visible !important;
        z-index: 99999 !important;
    }

    /* User button */
    .custom-navbar .user-account-trigger {
        min-height: 44px !important;
        height: 44px !important;

        padding: 4px 12px 4px 5px !important;

        border-radius: 25px !important;

        display: inline-flex !important;
        align-items: center !important;

        gap: 8px !important;

        background: #ffffff !important;
        border: 1px solid #dce5ef !important;

        color: #021D3A !important;

        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12) !important;
    }

    .custom-navbar .user-account-trigger:hover,
    .custom-navbar .user-account-trigger:focus {
        background: #ffffff !important;
        color: #021D3A !important;
    }

    /* Avatar */
    .custom-navbar .user-account-trigger .user-account-avatar {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;

        border: 2px solid #dce5ef !important;
        border-radius: 50% !important;

        object-fit: cover !important;
    }

    /* User name */
    .custom-navbar .user-account-trigger .user-account-name {
        color: #021D3A !important;
        font-size: 13px !important;
        font-weight: 600 !important;

        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .custom-navbar .user-account-chevron {
        color: #021D3A !important;
        font-size: 9px !important;
    }

    /* =========================================
       LOGIN DROPDOWN
       ========================================= */

    .custom-navbar .user-account-dropdown {
        position: absolute !important;

        top: calc(100% + 8px) !important;
        bottom: auto !important;

        left: 0 !important;
        right: auto !important;

        transform: none !important;

        width: 280px !important;
        min-width: 280px !important;

        max-width: calc(100vw - 30px) !important;

        margin: 0 !important;
        padding: 8px !important;

        background: #ffffff !important;

        border: 1px solid #dce5ef !important;
        border-radius: 12px !important;

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;

        z-index: 999999 !important;

        overflow: visible !important;
    }

    /* Dropdown content */
    .custom-navbar .user-account-dropdown .user-account-summary {
        padding: 8px !important;
    }

    .custom-navbar .user-account-dropdown .user-account-summary .user-account-avatar {
        width: 42px !important;
        height: 42px !important;
    }

    .custom-navbar .user-account-dropdown .dropdown-item {
        min-height: 42px !important;
        height: auto !important;

        padding: 10px 12px !important;

        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 575.98px) {

    .custom-navbar .navbar-collapse .top-social {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 15px !important;
    }

    .custom-navbar .user-account-trigger {
        height: 42px !important;
        min-height: 42px !important;
    }

    .custom-navbar .user-account-trigger .user-account-avatar {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;
    }

    .custom-navbar .user-account-trigger .user-account-name {
        max-width: 110px;
        font-size: 12px !important;
    }

    .custom-navbar .user-account-dropdown {
        width: 270px !important;
        min-width: 270px !important;

        max-width: calc(100vw - 30px) !important;
    }
}

/* =========================================
   STEP 2 - ICON COLOR CLEANUP
   ========================================= */

/* Feature / service icons */
.feature-box i,
.sell-feature-card i,
.service-card i {
    color: var(--primary-color) !important;
}

/* Process icons */
.process-card i,
.process-card span i {
    color: var(--primary-color) !important;
}

/* Property information icons */
.property-short-info i,
.property-info i {
    color: var(--primary-color) !important;
}

/* Why Choose Us / other feature icons */
.feature-icon i,
.why-choose-icon i,
.about-icon i,
.mission-icon i,
.vision-icon i {
    color: var(--primary-color) !important;
}

/* Section title decorative icons */
.title-dividerss i,
.title-divider i,
.section-title i {
    color: var(--primary-color) !important;
}

/* Bootstrap warning/success classes on normal icons */
.frontend-body i.text-warning,
.frontend-body i.text-success,
.frontend-body .icon.text-warning,
.frontend-body .icon.text-success {
    color: var(--primary-color) !important;
}

/* =========================================
   STEP 2 - REMOVE FLAG COLORS FROM ICONS
   ========================================= */

/* Mission & Vision icon circles */
.mv-icon {
    background: #ffffff !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.mv-icon i {
    color: var(--primary-color) !important;
}

/* Other About page icons */
.value-icon,
.journey-icon {
    color: var(--primary-color) !important;
}

.value-icon i,
.journey-icon i {
    color: var(--primary-color) !important;
}

/* =========================================
   STEP 5 - HEADER MENU ITEM SPACING
   ========================================= */

.custom-navbar .navbar-nav {
    gap: 8px;
}

.custom-navbar .navbar-nav > .nav-item > .nav-link {
    padding-left: 8px !important;
    padding-right: 8px !important;
}


/* Mobile */
@media (max-width: 991.98px) {

    .custom-navbar .navbar-nav {
        gap: 0;
    }

    .custom-navbar .navbar-nav > .nav-item > .nav-link {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

}