/* ==========================================================================
   WeaveWorld — Design System
   --------------------------------------------------------------------------
   1. Design Tokens   — colors, radii, shadows, spacing. Change the look of
                         the whole site by editing the variables in :root.
   2. Base            — resets & element defaults
   3. Buttons
   4. Navbar
   5. Page / Hero headers
   6. Sections & Typography utilities
   7. Cards & Surfaces
   8. Icon tiles & Avatars
   9. Badges & Pills
   10. Carousels (banner + testimonials)
   11. Footer
   12. Forms
   13. Utility helpers
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Edit these to re-theme the entire front-end.
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --primary: #1E4FD6;          /* core brand blue — buttons, links, active states */
    --primary-dark: #15379E;     /* hover / pressed */
    --primary-darker: #0F2A7A;
    --primary-light: #EDF2FF;    /* tint background (badges, hovers, soft sections) */
    --primary-light-2: #DCE6FF;

    --accent: #C8A96E;           /* warm gold — premium / verified / trust-seal moments */
    --accent-dark: #A8893E;

    --ink: #101B2D;              /* headings / darkest text — matches logo navy */
    --ink-soft: #3D4A61;         /* body copy */
    --muted: #6B7686;            /* secondary / meta text */

    /* Semantic */
    --success: #21994e;
    --success-light: #b7fed2;
    --danger: #DC2626;
    --danger-light: #ffd2d2;
    --warning: #F59E0B;
    --warning-light: #FEF3E2;
    --info: #0EA5E9;
    --info-light: #E6F7FE;

    /* Neutrals */
    --bg: #F6F8FC;
    --surface: #FFFFFF;
    --border: #E5E9F2;
    --border-strong: #D3DAE8;

    /* Legacy aliases (kept so older markup referencing these still resolves) */
    --secondary: #0EA5E9;
    --light: var(--primary-light);
    --dark: var(--ink);

    /* Shape */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 2px 10px rgba(16, 27, 45, .06);
    --shadow-md: 0 10px 30px rgba(16, 27, 45, .08);
    --shadow-lg: 0 24px 60px rgba(16, 27, 45, .14);

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Spacing */
    --spacing-md:15px;
    --spacing-lg:30px;
    --spacing-xl:40px;
}


/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
    color: var(--ink-soft);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}

::selection {
    background: var(--primary-light-2);
    color: var(--ink);
}

.text-primary { color: var(--primary) !important; }
.text-muted   { color: var(--muted) !important; }
.text-black   { color: var(--ink) !important; }
.bg-light     { background: var(--bg) !important; }

/* bootstrap.min.css bakes the old brand blue into these utilities as literal
   hex + !important — override here rather than editing the compiled file. */
.bg-primary     { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all .25s var(--ease);
    padding-top: 13px!important;
    padding-bottom:13px !important;
    font-size:13px !important;
    line-height:1;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(30, 79, 214, .22);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

/* The customized bootstrap.min.css sets outline-primary hover/active text to
   black (#000) against its dark hover background — unreadable. Force white. */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:active + .btn-outline-primary {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}

.btn-gold {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
}

.btn-gold:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #FFFFFF;
}

/* Pill-shaped button, e.g. hero search toggles */
.btn-pill {
    border-radius: var(--radius-pill) !important;
}

.btn-square {
    width: 38px;
    height: 38px;
}

/* Header Login / Sign Up buttons — fixed 44px tap target regardless of
   font metrics or icon presence. */
.nav-auth-btn {
    /* height: 44px; 
    line-height: 1;*/
    padding-top: 0;
    padding-bottom: 0;
    /* display: inline-flex;
    align-items: center;
    justify-content: center; */
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: var(--radius-sm);
}


/* --------------------------------------------------------------------------
   4. NAVBAR
   -------------------------------------------------------------------------- */
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 5px;
    transition: .5s;
}

.navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

.navbar-dark .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
    outline: none;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-dark .navbar-nav .nav-link,
    .navbar-light .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar-light .navbar-nav {
        border-top: 1px solid var(--border);
    }
}

/* Nav has more items than it used to (Partners added) — tighten spacing just
   above the mobile breakpoint so items don't wrap/overflow before ~1240px. */
@media (min-width: 992px) and (max-width: 1240px) {
    .navbar-dark .navbar-nav .nav-link,
    .navbar-light .navbar-nav .nav-link {
        margin-right: 14px;
        font-size: 13px;
    }
}

.navbar-light .navbar-nav .nav-link {
    color: var(--ink);
    font-weight: 500;
}

.navbar-light.sticky-top {
    top: -100px;
    transition: .5s;
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        top: 100%;
        margin-top: 0;
        border: none;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md);
        transform: translateY(8px);
        transform-origin: 0% 0%;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
    }
}

.dropdown-menu {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-sm) !important;
    max-width: calc(100vw - 24px);
}

/* bootstrap.min.css's `.dropdown-menu-end[data-bs-popper]` rule only fires
   when Bootstrap's JS stamps a `data-bs-popper` attribute on the menu —
   that's Bootstrap 5.2+ behavior, but the site loads the 5.0.0 JS bundle,
   which never sets it. The rule silently never applies, so menus meant to
   hug the right edge of their toggle (like the navbar user menu, which
   sits near the far-right edge of the page) were actually left-anchored
   and spilling past the viewport, causing page-wide horizontal scroll.
   Force it unconditionally instead of depending on that attribute. */
.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

/* Safety net: even a correctly-positioned dropdown can graze the viewport
   edge on narrow desktop widths — never let it grow the page's own
   scrollable area. */
html {
    overflow-x: hidden;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--primary-light);
    color: var(--primary-dark);
}
.dropdown-item {
    font-size:14px;
}
.dropdown-item.active,
.dropdown-item:active {
    background: var(--primary);
    color: #fff;

}

/* Logged-in user chip in the navbar — a small "account" pill rather than a
   plain nav-link, so it doesn't inherit the uppercase/letter-spaced/tall-
   padded look meant for Home/Pricing/etc. Avatar + first name are always
   visible; the name is width-capped with an ellipsis so an unusually long
   name can never widen the chip enough to affect navbar/page layout. The
   actual page-wide horizontal scroll bug was the `.dropdown-menu-end`
   fallback below, not this chip — see that rule's comment. */
.nav-user-chip {
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px !important;
    margin-right: 0 !important;
    border-radius: var(--radius-pill);
    background: var(--bg);
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    transition: background .2s var(--ease);
}

.nav-user-chip:hover,
.nav-user-chip.show {
    background: var(--primary-light);
    color: var(--primary-dark) !important;
}

.nav-user-chip .nav-user-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-header strong {
    color: var(--ink);
}


/* --------------------------------------------------------------------------
   5. PAGE / HERO HEADERS
   -------------------------------------------------------------------------- */
.header-carousel .container,
.page-header .container {
    position: relative;
    padding: 45px 0 45px 35px;
    border-left: 15px solid var(--primary);
}

.header-carousel .container::before,
.header-carousel .container::after,
.page-header .container::before,
.page-header .container::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100px;
    height: 15px;
    background: var(--primary);
}

.header-carousel .container::after,
.page-header .container::after {
    top: 100%;
    margin-top: -15px;
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
    }

    .header-carousel .owl-carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-carousel .owl-carousel-item p {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .header-carousel .owl-carousel-item h1 {
        font-size: 30px;
        font-weight: 600;
    }
}

.page-header {
    background: linear-gradient(135deg, rgba(15, 27, 45, .82), rgba(30, 79, 214, .78)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.breadcrumb {
    background: transparent;
}

.breadcrumb-item a {
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #fff;
}

/* Reusable hero/band background — replaces one-off inline gradients that were
   copy-pasted per page (e.g. `style="background: linear-gradient(135deg, #0066cc..."`). */
.hero-band {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-darker) 100%);
}

.hero-band-dark {
    background: linear-gradient(135deg, var(--ink) 0%, #1C2E4A 100%);
}


/* --------------------------------------------------------------------------
   6. SECTIONS & TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */
.section {
    padding: 80px 0;
}

.section-sm { padding: 48px 0; }
.section-lg { padding: 110px 0; }

.section-alt {
    background: var(--bg);
}

/* Small uppercase label shown above a section heading, e.g. "Learn About Us" */
.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}

.section-title {
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
}

.section-subtitle {
    color: var(--muted);
}


/*** About ***/
.about-bg {
    background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 100%);
    background-size: 5px 5px;
}

.about .about-img {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: .5s;
}
.about .about-img-1 {
    position: relative;
    height: 100%;
    margin: 0 150px 150px 0;
}
.about .about-img-2 {
    position: absolute;
    height: 100%;
    top: 150px;
    left: 150px;
    z-index: 1;
}
.about .about-img-1 img, .about .about-img-2 img {
    position: relative;
    width: 100%;
}
.about {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.feature .feature-img {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.feature .feature-img::after {
    position: absolute;
    content: "";
    width: 80%;
    height: 70%;
    top: 30%;
    left: 0;
    border: 30px solid;
    border-image: repeating-linear-gradient(45deg, rgba(30, 79, 214, .06), rgba(30, 79, 214, .06) .5%, rgba(30, 79, 214, .1) .5%, rgba(30, 79, 214, .1) 1%) 30;
    z-index: 1;
}
.feature .feature-img img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    margin: 0 30px 30px 30px;
    z-index: 2;
}

.hover-zoom {
    transition: .4s;
}
.feature-img:hover .hover-zoom {
    transform: scale(1.05);
}


/* --------------------------------------------------------------------------
   7. CARDS & SURFACES
   -------------------------------------------------------------------------- */

/* Generic elevated white card. Compose with padding/text utilities in markup.
   `.cat-item`, `.card-item`, `.category-card`, `.trust-card` below are legacy
   page-specific names kept as thin aliases onto this same visual language. */
.surface-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.surface-card:hover,
.hover-lift:hover {
     /* transform: translateY(-6px); */
    /* box-shadow: var(--shadow-lg); */
    
}

.rounded-3,
.rounded-4 {
    border-radius: var(--radius-sm) !important;
}

/* Site-wide standard box radius. Apply to any card/box/image container
   instead of repeating `border-radius: 8px` inline or in a page-local rule. */
.rounded-8 {
    border-radius: var(--radius-sm) !important;
}

.card {
    border-radius: var(--radius-md);
    border-color: var(--border);
    /* overflow: hidden; */
}

/* bootstrap.min.css only rounds .card-header/.card-footer corners by 1px
   (matching its old near-square card radius). Now that cards use a much
   bigger radius, a colored header/footer would visibly poke past the
   card's rounded corners without this. `overflow: hidden` above already
   clips it, but fix the radius directly too since some header/footer
   variants sit flush against the card edge without a solid fill. */
.card-header:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card-footer:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}


/*** Category / Job cards ***/
.cat-item {
    display: block;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.cat-item:hover {
    border-color: var(--primary-light-2);
    box-shadow: var(--shadow-md);
    transform: translateY(-6px);
}


.nav-pills .nav-item .active {
    border-bottom: 2px solid var(--primary);
}


/*** Directory cards — shared by Leads (post.blade.php), Verified Contacts
     (contact-master.blade.php) and Partners (partners/index.blade.php).
     These three pages had each independently built a near-identical card
     (a saturated gradient header block with a stacked avatar+name, 10-13px
     body text) — consolidated into one component here so all three read
     consistently and can be tuned in one place. The header is now a
     compact single row on a light background instead of a heavy color
     block, and body text sizes are bumped up for readability. ***/
.dir-card {
    position: relative;
    /* overflow: hidden; */
      background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* box-shadow: var(--shadow-sm); */
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    width:100%
}
/* Featured / promoted listing — border-only distinction: primary color for
   featured, the existing light --border color for a normal card. */
.dir-card.featured {
    border: 1.5px solid var(--primary);
}

.dir-card.featured:hover {
    border-color: var(--primary-dark);
}

/* Small corner tag for featured cards — kept separate from the header's
   status/verified badge row so it doesn't read as a star rating. */
.featured-tag {
    position: absolute;
    top: -11px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #d7a80f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 10px rgba(30, 79, 214, .3);
}
.card-item {
  
}

.card-item:hover {
  
}
.dir-card:hover{
    
  border-color:var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px); 
}

.dir-card .card-footer{
    background:transparent !important;
}
.dir-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--primary);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
   
}

.dir-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
}

.dir-header-text {
    min-width: 0;
    flex: 1;
}

.dir-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.dir-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
        /* position: absolute;
    top: -16px;
    right: 12px; */
}

.dir-header-badges:empty {
    display: none;
}

.dir-body {
    padding: 14px 18px 8px;
}

.dir-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.dir-row:last-of-type {
    border-bottom: none;
}

.dir-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.dir-card:hover .dir-icon{
    background:var(--primary-light);
}
.dir-icon.text-danger {
    background: var(--danger-light);
    color: var(--danger);
}

.dir-text {
    min-width: 0;
    font-size: 14.5px;
}

.dir-text .label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
    margin-bottom: 2px;
}

.dir-text .value {
    color: var(--ink);
    font-weight: 500;
    word-break: break-word;
}

.dir-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 6px;
}

.dir-locked-notice {
    border-radius: var(--radius-sm);
    background: var(--warning-light);
    border: 1px dashed var(--warning);
    color: #92600F;
    font-size: 13.5px;
}

.dir-posted-at {
    font-size: 12.5px;
    color: var(--muted);
}


/*** Product / category catalogue cards ***/
.category-card {
    background: var(--surface);
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    height: 100%;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.category-img {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.category-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease);
}

.category-card:hover .category-img img {
    transform: scale(1.06);
}

.view-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(16, 27, 45, .65);
    color: #fff;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: .3s;
}

.view-btn:hover {
    background: var(--accent);
    color: #fff;
}

.category-img .view-btn {
    opacity: 0;
}

.category-card:hover .view-btn {
    opacity: 1;
}


/*** Stat / counter cards (used on gradient bands) ***/
.counter-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: all 0.3s var(--ease);
}

.counter-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .16);
}

.counter-card h1 {
    font-size: 48px;
    font-weight: 700;
    margin: 10px 0;
    color: #fff;
}

.counter-card p {
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
}

.counter-card .icon {
    width: 60px;
    height: 60px;
    margin: auto;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*** Trust / value-prop cards ***/
.trust-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

.trust-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light-2);
}


/* --------------------------------------------------------------------------
   8. ICON TILES & AVATARS
   -------------------------------------------------------------------------- */

/* Round/soft-square icon backdrop used across cat-item, trust-card, feature
   lists, etc. Pair with a color modifier, e.g. `icon-tile icon-tile-primary`. */
.icon-tile {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 22px;
    transition: transform .3s var(--ease);
}

.icon-box i {
    transition: 0.3s;
}

.trust-card:hover .icon-box i {
    transform: scale(1.2);
}

.icon-tile-primary { background: var(--primary-light); color: var(--primary); }
.icon-tile-success { background: var(--success-light); color: var(--success); }
.icon-tile-warning  { background: var(--warning-light); color: var(--warning); }
.icon-tile-danger   { background: var(--danger-light);  color: var(--danger); }
.icon-tile-gold     { background: rgba(200, 169, 110, .15); color: var(--accent-dark); }

/* Circular initials avatar, e.g. header user menu / testimonial author */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    object-fit: cover;
}

.avatar-circle-sm { width: 32px; height: 32px; font-size: 13px; }
.avatar-circle-lg { width: 56px; height: 56px; font-size: 20px; }


/* --------------------------------------------------------------------------
   9. BADGES & PILLS
   -------------------------------------------------------------------------- */
.badge-soft-primary { background: var(--primary-light); color: var(--primary-dark); }
.badge-soft-success { background: var(--success-light); color: var(--success); }
.badge-soft-warning  { background: var(--warning-light); color: #92600F; }
.badge-soft-danger   { background: var(--danger-light);  color: var(--danger); }
.badge-soft-gold     { background: rgba(200, 169, 110, 1); color: #fff; }

.badge-soft-primary,
.badge-soft-success,
.badge-soft-warning,
.badge-soft-danger,
.badge-soft-gold {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   10. CAROUSELS (banner + testimonials)
   -------------------------------------------------------------------------- */
.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    margin: 7px 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border: 1px solid #FFFFFF;
    border-radius: var(--radius-sm);
    font-size: 22px;
    transition: .3s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.home-dir-carousel .testimonial-item {
   width:100%
}
/* 
.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    pointer-events: auto;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border: 1px solid #FFFFFF;
    border-radius: var(--radius-sm);
    font-size: 22px;
    transition: .3s;
    margin: 0 -22px;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.testimonial-carousel .owl-item .testimonial-item,
.testimonial-carousel .owl-item.center .testimonial-item * {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-item {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-item * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 5px solid var(--primary);
    border-radius: var(--radius-sm);
    transition: .3s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--ink);
    border-color: var(--primary);
} */

.home-dir-carousel .owl-stage {
    display: flex;
    padding: 12px 0px;
}

.home-dir-carousel .owl-item {
    display: flex;
    height: auto;
}

.home-dir-item {
    display: flex;
    width: 100%;
    padding-bottom: 8px;
}

.home-dir-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.home-dir-carousel .owl-nav .owl-prev,
.home-dir-carousel .owl-nav .owl-next {
    pointer-events: auto;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border: 1px solid #FFFFFF;
    border-radius: var(--radius-sm);
    font-size: 22px;
    transition: .3s;
    margin: 0 -22px;
}

.home-dir-carousel .owl-nav .owl-prev:hover,
.home-dir-carousel .owl-nav .owl-next:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.home-dir-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.home-dir-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    transition: .3s;
}

.home-dir-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}

.banner-media {
    width: 100%;
    height: 80vh;
    object-fit: contain;
    background: white;
}

@media (max-width: 768px) {
    .banner-media {
        height: 50vh;
    }
}


/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--radius-sm);
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--ink);
    background: var(--accent);
    border-color: var(--accent);
}

.footer .btn.btn-link {
    display: block !important;
    margin-bottom: 0px;
    padding:5px 0px 5px 0 !important;
    text-align: left;
    font-size: 15px;
    font-weight: normal !important;
    text-transform: capitalize;
    transition: .3s;

}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
  
    box-shadow: none;
    color: var(--accent) !important;
}

.footer .form-control {
    border-color: rgba(255,255,255,0.5);
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

/* Floating WhatsApp button */
.whatsapp-float {
    position: fixed;
    width: 55px;
    height: 55px;
    bottom: 105px;
    right: 45px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: var(--shadow-md);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--ease);
    animation: pulse 1.5s infinite;
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: #1ebe5d;
    transform: scale(1.1);
    color: #fff;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}


/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border-strong);
    padding: 10px 14px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(30, 79, 214, .15);
}

.input-group-text {
    border-color: var(--border-strong);
}

/* bootstrap.min.css bakes in the old template's near-square 2px radius for
   alerts — bump it to match every other box on the page. */
.alert {
    border-radius: var(--radius-sm);
}

/* Home / search filter form */
.filter-form {
    background:#fff;
    border-radius: var(--radius-sm);
    padding:var(--spacing-md);
}
@media screen and (min-width: 767px) {
    .filter-form {
           position: relative;
        margin-bottom: -100px;
        box-shadow: 1px 2px 6px 1px rgba(0, 0, 0, .15);
    }
}
.filter-form .form-control-lg,
.filter-form .form-select-lg  {
    border-radius: var(--radius-sm);
    font-size: 15px;
    height: 50px;
    padding: 12px 15px;
    border:1px solid var(--border-strong) !important;
    box-shadow:none !important
}


.filter-form .input-group-text {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border:1px solid var(--border-strong) !important;
    box-shadow: none !important;
    border-right:0px !important;
}
.filter-form .input-group-icon {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border:1px solid var(--border-strong) !important;
    box-shadow: none !important;
    border-right:0px !important;
    width:50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-form .form-control {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    box-shadow: none !important;
}

.filter-form .btn {
    border-radius: var(--radius-sm);
    transition: all 0.3s var(--ease);
     
}
.filter-form .btn[type="submit"] {
     background: #25D366;
    color: #fff !important;
    border:0px !important;
    height:50px;
}
.filter-form .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(30, 79, 214, .25) !important;
}
.filter-form .btn-outline-light.rounded-pill{
    color:var(--ink);
        border: 1px solid var(--border-strong) !important;
    font-weight: 500 !important;
    font-size:14px;
    font-family: inherit;
}
.btn-check:checked+.btn-outline-light, .btn-check:active+.btn-outline-light, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show {
    color: var(--primary) !important;
    background-color: var(--primary-light) !important;
    border-color: var(--primary) !important;
}

@media (max-width: 768px) {
    .filter-form .form-control-lg,
    .filter-form .form-select-lg, .filter-form .btn[type="submit"]{
        height: 45px;
        font-size: 14px;
    }
}
/* Registration form */
.auth-split-brand-content img {
    filter:invert(1) grayscale(1);
}
 .registration-form .form-control, .registration-form .form-select-lg {
 font-size: 15px;
 height: 56px;
 }

/* "Active leads" live badge shown on the homepage hero */
.active-leads-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(200, 169, 110, .5);
    border-radius: var(--radius-pill);
    padding: 10px 26px;
    box-shadow: var(--shadow-md);
    animation: leadsFloat 3s ease-in-out infinite;
}

.active-leads-dot {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    animation: leadsPulse 1.6s infinite;
}

.active-leads-badge i {
    color: var(--accent);
    font-size: 18px;
}

.active-leads-count {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.active-leads-label {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

@keyframes leadsPulse {
    0% { box-shadow: 0 0 0 0 rgba(200, 169, 110, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(200, 169, 110, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 169, 110, 0); }
}

@keyframes leadsFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (max-width: 576px) {
    .active-leads-badge {
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 18px;
    }
}


/* --------------------------------------------------------------------------
   13. AUTH SPLIT LAYOUT (login / register)
   -------------------------------------------------------------------------- */

/* Used with include.auth-header / include.auth-footer — a minimal page
   shell (no site nav/footer) so the split card owns branding on its own
   instead of duplicating the logo/nav that's already in the site header. */
.auth-page-body {
    background: var(--bg);
    min-height: 100vh;
}

.auth-back-home {
    position: absolute;
    top: 24px;
    left: 32px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    z-index: 10;
}

.auth-back-home:hover {
    color: var(--primary);
}

.auth-page-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.auth-split {
    display: flex;
    min-height: 560px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    background: var(--surface);
}

.auth-split-brand {
    flex: 0 0 42%;
    position: relative;
    background: linear-gradient(160deg, var(--ink) 0%, var(--primary-darker) 100%);
    color: #fff;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.auth-split-brand::before,
.auth-split-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.auth-split-brand::before {
    width: 260px;
    height: 260px;
    top: -90px;
    right: -90px;
}

.auth-split-brand::after {
    width: 190px;
    height: 190px;
    bottom: -70px;
    left: -70px;
    background: rgba(255, 255, 255, .05);
}

.auth-split-brand-content {
    position: relative;
    z-index: 1;
}

.auth-split-brand-content img {
    width: 110px;
    margin-bottom: 26px;
}

.auth-split-brand-content h3 {
    font-size: 23px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.auth-split-brand-content > p {
    color: rgba(255, 255, 255, .68);
    font-size: 14.5px;
    margin-bottom: 30px;
}

.auth-feature-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.auth-feature-row i {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.auth-feature-row span {
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
    padding-top: 5px;
}

.auth-split-form {
    flex: 1;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.auth-split-form-inner {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    color: var(--muted);
    cursor: pointer;
    z-index: 5;
}

.password-toggle:hover {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .auth-split {
        flex-direction: column;
        min-height: 0;
    }

    .auth-split-brand {
        flex: none;
        padding: 32px 28px;
    }

    .auth-split-brand-content img {
        width: 84px;
        margin-bottom: 18px;
    }

    .auth-feature-list {
        display: none;
    }

    .auth-split-form {
        padding: 36px 24px;
    }
}


/* --------------------------------------------------------------------------
   14. UTILITY HELPERS
   -------------------------------------------------------------------------- */
.shadow-soft { box-shadow: var(--shadow-sm) !important; }
.shadow-elevated { box-shadow: var(--shadow-md) !important; }
.thumb-sm { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); }
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }


/*Pagination*/
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin-left: 5px;
    gap:5px;

}
.page-item.active .page-link, .page-item .page-link {
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    line-height:normal
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}