/* ==========================================================================
   Legaldev — Legal, Tax & Compliance Platform
   Pixel-Perfect Bootstrap 5.3 + Tailwind Theme Alignment
   ========================================================================== */

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

/* Global Reset & Base */
html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #334155;
    background-color: #ffffff;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
    line-height: 1.6;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

/* SVG Global Constraints — Never blow up */
svg {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    flex-shrink: 0;
}

    svg:not([width]):not([height]) {
        width: 24px;
        height: 24px;
    }

/* Utility Flex & Grid Helpers */
.flex {
    display: flex !important;
}

.inline-flex {
    display: inline-flex !important;
}

.grid {
    display: grid !important;
}

.items-center {
    align-items: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-center {
    justify-content: center !important;
}

.place-items-center {
    place-items: center !important;
}

.flex-1 {
    flex: 1 1 0% !important;
}

.flex-shrink-0, .shrink-0 {
    flex-shrink: 0 !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.whitespace-nowrap {
    white-space: nowrap !important;
}

.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.sticky {
    position: sticky !important;
}

/* Spacing & Gap */
.gap-0\.5 {
    gap: 0.125rem !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-1\.5 {
    gap: 0.375rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-2\.5 {
    gap: 0.625rem !important;
}

.gap-3 {
    gap: 0.75rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

.gap-5 {
    gap: 1.25rem !important;
}

.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.px-2\.5 {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
}

.px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.py-1\.5 {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-2\.5 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.ml-auto {
    margin-left: auto !important;
}

/* Dimensions */
.h-7 {
    height: 1.75rem !important;
    min-height: 1.75rem !important;
}

.w-7 {
    width: 1.75rem !important;
    min-width: 1.75rem !important;
}

.h-8 {
    height: 2rem !important;
    min-height: 2rem !important;
}

.w-8 {
    width: 2rem !important;
    min-width: 2rem !important;
}

.h-9 {
    height: 2.25rem !important;
    min-height: 2.25rem !important;
}

.w-9 {
    width: 2.25rem !important;
    min-width: 2.25rem !important;
}

.h-10 {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
}

.w-10 {
    width: 2.5rem !important;
    min-width: 2.5rem !important;
}

.h-\[64px\] {
    height: 64px !important;
}

.h-\[68px\] {
    height: 68px !important;
}

/* Typography */
.text-\[13px\] {
    font-size: 13px !important;
}

.text-\[13\.5px\] {
    font-size: 13.5px !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-extrabold {
    font-weight: 800 !important;
}

.tracking-tight {
    letter-spacing: -0.025em !important;
}

/* Rounded Corners & Borders */
.rounded-md {
    border-radius: 0.375rem !important;
}

.rounded-lg {
    border-radius: 0.5rem !important;
}

.rounded-xl {
    border-radius: 0.75rem !important;
}

.rounded-2xl {
    border-radius: 1rem !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

.border-b {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
}

/* Responsive Visibility */
.hidden {
    display: none !important;
}

@media (min-width: 576px) {
    .sm\:flex {
        display: flex !important;
    }

    .sm\:inline-flex {
        display: inline-flex !important;
    }

    .sm\:gap-5 {
        gap: 1.25rem !important;
    }
}

@media (min-width: 992px) {
    .lg\:inline-flex {
        display: inline-flex !important;
    }

    .lg\:flex {
        display: flex !important;
    }

    .lg\:hidden {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .xl\:flex {
        display: flex !important;
    }

    .xl\:inline-flex {
        display: inline-flex !important;
    }

    .xl\:hidden {
        display: none !important;
    }
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    color: #0b1130;
    font-weight: 700;
    letter-spacing: -0.015em;
}

a {
    color: #116956;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

    a:hover {
        color: #ef1301;
    }

::selection {
    background: #b2ead5;
    color: #0b1130;
}

/* Custom Container */
.container-x {
    width: 100%;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Mobile */
@media (max-width: 767.98px) {
    .blog-tag-pill {
        font-size: 11px;
        margin: 5px 1px;
        padding: 5px 10px;
        gap: 0.25rem;
        line-height: 1.2;
        white-space: nowrap
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .blog-tag-pill {
        font-size: 12px;
        margin: 4px 3px;
        padding: 5px 10px;
        gap: 0.3rem;
        line-height: 1.2;
        white-space: nowrap;
    }
}

@media (min-width: 640px) {
    .container-x {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container-x {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Background Gradients & Effects */
.hero-glow1 {
    background: radial-gradient(60% 60% at 15% 20%, rgb(2 53 79) 0%, #003450 60%), radial-gradient(50% 50% at 90% 10%, rgba(203, 214, 238, 0.6) 0%, transparent 60%), linear-gradient(180deg, #ffffff 0%, #f6faf9 100%);
}

.hero-glow {
    background: radial-gradient(60% 60% at 15% 20%, #ade3ff 0%, transparent 60%), radial-gradient(50% 50% at 90% 10%, rgba(203, 214, 238, 0.6) 0%, transparent 60%), linear-gradient(180deg, #fff0ef 0%, #ade3ff 100%)
}



.dot-grid1 {
    background-image: radial-gradient(rgb(89 129 149 / 54%) 1px, transparent 1px);
    background-size: 7px 6px;
}

.dot-grid {
    background-image: radial-gradient(rgba(11, 17, 48, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
}

.gradient-text {
    background: linear-gradient(135deg, #ef1301 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text1 {
    color: #f59e0b;
}

.sn-hero-badge {
    display: inline-flex;
    margin-bottom: 20px;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #0f172a;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    border: 2px solid #fff;
    position: relative;
    overflow: hidden;
}

/* Eyebrows & Badges */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid #b2ead5;
    background-color: #effbf6;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #116956;
}

.badge-hot {
    background-color: #fef3c7;
    color: #b45309;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
}

.badge-verified {
    background-color: #effbf6;
    color: #116956;
    border: 1px solid #b2ead5;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
}

/* Custom Buttons */
.btn-primary-lx, .btn-primary, .btn-primary.btn-md {
    background-color: #ef1301 !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.75rem;
    padding: 0.6rem 1.25rem;
    border: none;
    box-shadow: 0 8px 20px -8px rgba(20, 132, 105, 0.7);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

    .btn-primary-lx:hover, .btn-primary:hover, .btn-primary.btn-md:hover {
        background-color: #116956 !important;
        transform: translateY(-1px);
        box-shadow: 0 12px 24px -8px rgba(20, 132, 105, 0.85);
        color: #ffffff !important;
    }

.btn-secondary-lx, .btn-secondary, .btn-secondary.btn-md {
    background-color: #ffffff !important;
    color: #0b1130 !important;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.75rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

    .btn-secondary-lx:hover, .btn-secondary:hover, .btn-secondary.btn-md:hover {
        border-color: #7fd8bb !important;
        background-color: #effbf6 !important;
        color: #116956 !important;
    }

.btn-dark-lx, .btn-dark {
    background-color: #0b1130 !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.65rem 1.35rem;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn-dark-lx:hover, .btn-dark:hover {
        background-color: #1d2650 !important;
        color: #ffffff !important;
        transform: translateY(-2px);
    }

.btn-ghost-lx, .btn-ghost, .btn-ghost.btn-md {
    background-color: transparent !important;
    color: #0b1130 !important;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.75rem;
    padding: 0.55rem 1rem;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

    .btn-ghost-lx:hover, .btn-ghost:hover, .btn-ghost.btn-md:hover {
        background-color: #f1f5f9 !important;
        color: #116956 !important;
    }

/* Cards & Hover Shadows */
.card-lx, .card {
    background-color: #ffffff;
    border: 1px solid #f1f5f9 !important;
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(11, 17, 48, 0.04), 0 8px 24px -12px rgba(11, 17, 48, 0.12);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.card-hover:hover {
    transform: translateY(-4px);
    border-color: #b2ead5 !important;
    box-shadow: 0 20px 50px -20px rgba(11, 17, 48, 0.25);
}

/* Header & Navbar */
.top-announcement-bar {
    background-color: #0b1130;
    color: #23a382;
    font-size: 0.8125rem;
    padding: 0.45rem 0;
    z-index: 1040;
}

    .top-announcement-bar a {
        color: #23a382;
        text-decoration: underline;
        font-weight: 600;
    }

        .top-announcement-bar a:hover {
            color: #49be9c;
        }

/* Header button clean reset */
header button {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    font-family: inherit;
    cursor: pointer;
}

header nav button,
.nav-link-item {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0b1130 !important;
    padding: 0.45rem 0.65rem !important;
    border-radius: 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

    header nav button:hover,
    header nav button:focus,
    .nav-link-item:hover,
    .nav-link-item:focus,
    .nav-link-item.active {
        background-color: #f8fafc !important;
        color: #116956 !important;
    }

.lx-nav-group {
    position: static;
}

    header nav button svg,
    .lx-nav-group button svg,
    .nav-link-item svg {
        width: 12px !important;
        height: 12px !important;
        color: #64748b !important;
        transition: transform 0.25s ease !important;
    }

    .lx-nav-group:hover header nav button svg,
    .lx-nav-group:hover button svg,
    .lx-nav-group.is-open header nav button svg,
    .lx-nav-group.is-open button svg,
    .lx-nav-group.is-open .nav-link-item svg {
        transform: rotate(180deg) !important;
        color: #116956 !important;
    }

header.sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px -12px rgba(11, 17, 48, 0.25);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.navbar-Legaldev {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px -12px rgba(11, 17, 48, 0.25);
    transition: all 0.3s ease;
    z-index: 1030;
}

.nav-link-lx {
    font-weight: 600;
    font-size: 13.5px;
    color: #0b1130 !important;
    padding: 0.5rem 0.65rem !important;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

    .nav-link-lx:hover,
    .nav-link-lx.active {
        background-color: #f8fafc;
        color: #116956 !important;
    }

/* Tailwind Utilities Helpers */
.bg-navy-950 {
    background-color: #0b1130 !important;
}

.text-navy-950 {
    color: #0b1130 !important;
}

.text-brand-300 {
    color: #7fd8bb !important;
}

.text-brand-600 {
    color: #ef1301 !important;
}

.text-brand-700 {
    color: #116956 !important;
}

.bg-brand-50 {
    background-color: #effbf6 !important;
}

.bg-brand-600 {
    background-color: #ef1301 !important;
}

.border-slate-200 {
    border-color: #e2e8f0 !important;
}

.border-slate-100 {
    border-color: #f1f5f9 !important;
}

/* Mega Menu Dropdown Container */
.mega-dropdown-menu {
    display: none;
    position: fixed;
    top: 100%;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: min(1280px, calc(100vw - 2rem)) !important;
    max-width: 1280px !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    box-shadow: 0 30px 60px -25px rgba(11, 17, 48, 0.35);
    z-index: 1060;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
}

@media (min-width: 992px) {
    .lx-nav-group:hover .mega-dropdown-menu,
    .lx-nav-group.is-open .mega-dropdown-menu,
    .lx-nav-group:focus-within .mega-dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
}

.mega-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.mega-dropdown-menu::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}

.mega-dropdown-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

    .mega-dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

.mega-menu-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #01364f;
    margin-bottom: 0.75rem;
}

.mega-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #334155;
    transition: all 0.15s ease;
    text-decoration: none;
}

    .mega-menu-item:hover {
        background-color: #02354e;
        color: #ffffff;
        padding-left: 0.75rem;
    }

.mega-aside-card {
    background: linear-gradient(145deg, #0b1130, #1d2650);
    border-radius: 1.25rem;
    padding: 1.75rem;
    color: #ffffff;
}

/* ==========================================================================
   Responsive Single Header Navigation (Unified Desktop + Mobile)
   ========================================================================== */

/* Desktop Display (>= 992px) */
@media (min-width: 992px) {
    .site-main-nav {
        display: flex !important;
        align-items: center;
        gap: 0.125rem;
        flex: 1 1 0%;
        margin-left: 0.5rem;
    }

    .mobile-nav-toggle-btn {
        display: none !important;
    }
}

/* Mobile Display (< 992px) */
@media (max-width: 991.98px) {
    /* Header stays sticky at top when scrolling normally */
    header.sticky {
        position: sticky !important;
        top: 0 !important;
        z-index: 1050 !important;
        width: 100% !important;
    }

    /* Lock body scroll completely when mobile nav is active */
    body.mobile-nav-active {
        overflow: hidden !important;
        touch-action: none !important;
        overscroll-behavior: none !important;
    }

    /* Fix header permanently at top when side menu is open */
    body.mobile-nav-active header,
    body.mobile-nav-active header.sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 64px !important;
        z-index: 1060 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(11, 17, 48, 0.08) !important;
        transform: none !important;
    }

    .mobile-nav-toggle-btn {
        width: 38px;
        height: 38px;
        display: inline-grid !important;
        place-items: center;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: #0b1130;
        cursor: pointer;
        padding: 0;
        transition: background-color 0.15s ease;
    }

        .mobile-nav-toggle-btn:hover {
            background-color: #f1f5f9;
        }

    /* Single Navigation Drawer on Mobile */
    .site-main-nav {
        display: none;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 64px !important; /* Starts directly below the fixed 64px header */
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 64px) !important;
        height: calc(100dvh - 64px) !important;
        background-color: #ffffff !important;
        z-index: 1055 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important; /* Contain scroll inside drawer, no body scrolling */
        touch-action: pan-y !important;
        padding: 1rem 1.25rem 5rem !important;
        flex-direction: column !important;
        box-shadow: 0 25px 50px -12px rgba(11, 17, 48, 0.25) !important;
        border-top: 1px solid #e2e8f0 !important;
    }

        .site-main-nav.mobile-active {
            display: flex !important;
            animation: mobileNavIn 0.22s ease-out;
        }

    @keyframes mobileNavIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Each category accordion on Mobile */
    .site-main-nav .lx-nav-group {
        width: 100%;
        position: static !important;
        border-bottom: 1px solid #f1f5f9;
    }

        .site-main-nav .lx-nav-group > button,
        .site-main-nav .lx-nav-group > .nav-link-item {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 0.85rem 0.5rem !important;
            font-size: 0.95rem !important;
            font-weight: 700 !important;
            color: #0b1130 !important;
            background: transparent !important;
            border-radius: 0.5rem !important;
            border: none !important;
            text-align: left;
            cursor: pointer;
        }

            .site-main-nav .lx-nav-group > button:hover,
            .site-main-nav .lx-nav-group > button:focus,
            .site-main-nav .lx-nav-group.is-open > button {
                background-color: #f8fafc !important;
                color: #148469 !important;
            }

            .site-main-nav .lx-nav-group > button svg,
            .site-main-nav .lx-nav-group > .nav-link-item svg {
                width: 16px !important;
                height: 16px !important;
                color: #64748b !important;
                transition: transform 0.25s ease !important;
                flex-shrink: 0;
            }

        .site-main-nav .lx-nav-group.is-open > button svg,
        .site-main-nav .lx-nav-group.is-open > .nav-link-item svg {
            transform: rotate(180deg) !important;
            color: #148469 !important;
        }

    /* Direct top-level links like Blog */
    .site-main-nav > a.nav-link-item {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.85rem 0.5rem !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: #0b1130 !important;
        border-bottom: 1px solid #f1f5f9;
        text-decoration: none !important;
        border-radius: 0.5rem !important;
    }

        .site-main-nav > a.nav-link-item:hover {
            background-color: #f8fafc !important;
            color: #148469 !important;
        }

    /* Mega dropdown menu inside category accordion on Mobile */
    .site-main-nav .mega-dropdown-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0.25rem 0 0.85rem 0 !important;
        padding: 0.75rem 0.85rem !important;
        border-radius: 0.875rem !important;
        border: 1px solid #e2e8f0 !important;
        background-color: #f8fafc !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: none !important;
    }

    .site-main-nav .lx-nav-group.is-open .mega-dropdown-menu {
        display: block !important;
    }

    /* Prevent row margin horizontal overflow */
    .site-main-nav .mega-dropdown-menu .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

        .site-main-nav .mega-dropdown-menu .row > [class*="col-"] {
            padding-left: 0 !important;
            padding-right: 0 !important;
            width: 100% !important;
            margin-bottom: 0.85rem;
        }

    .site-main-nav .mega-menu-heading {
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        color: #148469 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        margin-top: 0.65rem !important;
        margin-bottom: 0.4rem !important;
        padding-bottom: 0.3rem !important;
        border-bottom: 1px dashed #cbd5e1 !important;
    }

    .site-main-nav .mega-menu-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.45rem 0.5rem !important;
        font-size: 0.88rem !important;
        color: #334155 !important;
        border-radius: 0.375rem !important;
        text-decoration: none !important;
        transition: all 0.15s ease !important;
    }

        .site-main-nav .mega-menu-item:hover {
            background-color: #effbf6 !important;
            color: #148469 !important;
            padding-left: 0.75rem !important;
        }

    .site-main-nav .mega-aside-card {
        border-radius: 0.875rem !important;
        padding: 1.25rem !important;
        margin-top: 0.5rem !important;
    }
}

/* Live Search Modal / Overlay */
.search-overlay-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 1rem 2rem;
}

.search-overlay-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(11, 17, 48, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.search-overlay-content {
    position: relative;
    width: 100%;
    max-width: 680px;
    background-color: #ffffff;
    border-radius: 1.25rem;
    box-shadow: 0 25px 50px -12px rgba(11, 17, 48, 0.35);
    overflow: hidden;
    z-index: 10;
    animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Service Icon Box */
.service-icon-box {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 0.85rem;
    display: inline-grid;
    place-items: center;
    background-color: #effbf6;
    color: #116956;
    font-size: 1.25rem;
    transition: all 0.25s ease;
}

.card-hover:hover .service-icon-box {
    background-color: #ef1301;
    color: #ffffff;
}

/* Avatars & Stars */
.avatar-stack {
    display: inline-flex;
}

.avatar-pill {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    border: 2px solid #ffffff;
    margin-left: -0.5rem;
}

    .avatar-pill:first-child {
        margin-left: 0;
    }

.stars-rating {
    color: #f59e0b;
    display: inline-flex;
    gap: 0.15rem;
}

/* Animations */
@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes floatSlowAnimation {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-float {
    animation: floatAnimation 6s ease-in-out infinite;
}

.animate-float-slow {
    animation: floatSlowAnimation 8s ease-in-out infinite;
}

.marquee-wrapper {
    display: flex;
    overflow: hidden;
    user-select: none;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
    padding-right: 3rem;
    animation: marquee 35s linear infinite;
}

/* Floating Actions Bar */
.floating-actions-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-end;
}

.floating-btn {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 1.35rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    cursor: pointer;
    color: #ffffff !important;
}

    .floating-btn:hover {
        transform: scale(1.08) translateY(-2px);
    }

.floating-whatsapp {
    background-color: #25D366;
}

.floating-scroll-top {
    background-color: #0b1130;
    display: none;
}

.floating-expert-pill {
    bottom: 5%;
    left: 1%;
    z-index: 1111;
    background: linear-gradient(135deg, #f13222, #f13222);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.65rem 1.25rem;
    border-radius: 9999px;
    box-shadow: 0 10px 25px -5px rgba(20, 132, 105, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
    position: fixed;
}

    .floating-expert-pill:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px -5px rgba(20, 132, 105, 0.65);
    }

/* Accordions */
.accordion-lx .accordion-item {
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.accordion-lx .accordion-button {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #0b1130;
    padding: 1.15rem 1.35rem;
    background-color: #ffffff;
}

    .accordion-lx .accordion-button:not(.collapsed) {
        background-color: #effbf6;
        color: #116956;
        box-shadow: none;
    }

    .accordion-lx .accordion-button:focus {
        box-shadow: none;
    }

/* Modals */
.modal-content-lx {
    border-radius: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 25px 60px -15px rgba(11, 17, 48, 0.35);
    overflow: hidden;
}

.form-control-lx {
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    padding: 7px 7px;
    font-size: 0.925rem;
    transition: all 0.2s ease;
    background: #e2e8f0;
}

    .form-control-lx:focus {
        border-color: #23a382;
        box-shadow: 0 0 0 4px #d7f5e8;
        outline: none;
    }

/* Sticky Tab Navigation on Service Pages */
.sticky-tabs-nav {
    position: sticky;
    top: 68px;
    z-index: 1020;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e2e8f0;
}

    .sticky-tabs-nav .nav-link {
        color: #475569;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 0.85rem 1.25rem;
        border-bottom: 2px solid transparent;
        border-radius: 0;
    }

        .sticky-tabs-nav .nav-link.active {
            color: #116956;
            border-bottom-color: #ef1301;
        }

/* Responsive tweaks */
@media (max-width: 991.98px) {
    .mega-dropdown-menu {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        border-radius: 0.75rem;
        padding: 1rem;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* Mobile Offcanvas Accordion Styles */
.mobile-nav-accordion .accordion-item {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.mobile-nav-accordion .accordion-button {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #0b1130 !important;
    padding: 0.85rem 0.5rem;
    background: transparent !important;
    box-shadow: none !important;
}

    .mobile-nav-accordion .accordion-button:not(.collapsed) {
        color: #116956 !important;
        background-color: #effbf6 !important;
        border-radius: 0.5rem;
    }

    .mobile-nav-accordion .accordion-button::after {
        background-size: 0.85rem;
        transition: transform 0.2s ease;
    }

.mobile-nav-accordion .accordion-body {
    padding: 0.5rem 0.5rem 1rem 0.5rem !important;
}

.mobile-subgroup-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-top: 0.75rem;
    margin-bottom: 0.35rem;
}

.mobile-service-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.5rem;
    font-size: 0.875rem;
    color: #334155;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

    .mobile-service-link:hover,
    .mobile-service-link:active {
        background-color: #effbf6;
        color: #116956;
    }

.ld-footer {
    background: #012334;
    color: #9aaade;
}

    .ld-footer h5 {
        color: #fff;
        font-size: 0.85rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .ld-footer a {
        color: #bfbfbf;
        font-size: 0.8rem;
        text-decoration: none;
        transition: color 0.15s;
    }

        .ld-footer a:hover {
            color: #fff;
        }

    .ld-footer .footer-brand {
        font-family: 'Sora', sans-serif;
        font-weight: 800;
        font-size: 1.3rem;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
    }

.newsletter-input {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.75rem;
    padding: 0.65rem 1rem;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
    flex: 1;
}

    .newsletter-input::placeholder {
        color: rgba(255,255,255,0.4);
    }

    .newsletter-input:focus {
        border-color: #49be9c;
    }

/* ---------- Social icons ---------- */
.social-btn {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    background: #003450;
    display: grid;
    place-items: center;
    color: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

    .social-btn:hover {
        border-color: #49be9c;
        color: #fff;
    }

/* ---------- App store badges ---------- */
.store-badge {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.75rem;
    padding: 0.55rem 1rem;
    background: rgba(255,255,255,0.05);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}

    .store-badge:hover {
        background: rgba(255,255,255,0.12);
        color: #fff;
    }

    .store-badge .store-text small {
        display: block;
        font-size: 0.62rem;
        opacity: 0.65;
    }

    .store-badge .store-text strong {
        display: block;
        font-size: 0.85rem;
        font-weight: 700;
    }


/* Ravindra updates - Fully Responsive */
.size21 {
    width: 149px;
    max-width: 149px;
    display: inline-flex;
    align-items: center;
}

.lead1 {
    font-size: 1.25rem;
    font-weight: 300;
    max-width: 822px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.lead {
    font-size: 15px;
    font-weight: 500;
    color: #000000;
}

.search-results-dropdown {
    background: #ffffff;
    padding: 19px;
    border-radius: 12px;
    position: relative;
    top: 1px;
    max-height: 380px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Multi-Device Responsiveness (Mobile, Tablet, Small Laptop, Desktop, 4K)
   ========================================================================== */

/* Universal Media & Element Constraints */
*, *::before, *::after {
    box-sizing: border-box;
}

img, picture, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* 1. Mobile Phones (< 576px, e.g. iPhone SE, iPhone 14/15/16, Galaxy S) */
@media (max-width: 575.98px) {
    /* Announcement bar */
    .top-announcement-bar {
        padding: 0.35rem 0.25rem !important;
    }

        .top-announcement-bar .container-x {
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
        }

        .top-announcement-bar span {
            font-size: 0.72rem !important;
            line-height: 1.35 !important;
        }

    /* Header & Logo */
    header.sticky {
        padding: 0 !important;
    }

    header .container-x {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        gap: 0.35rem !important;
        justify-content: space-between !important;
    }

    .size21 {
        width: 115px !important;
        max-width: 115px !important;
    }

        .size21 img {
            max-height: 36px;
            width: auto;
        }

    /* Header action buttons: Hide wide button in mobile navbar (it's inside mobile drawer & hero) */
    header .btn-primary-lx {
        display: none !important;
    }

    .btn-auth-login {
        font-size: 12.5px !important;
        padding: 0.35rem 0.5rem !important;
    }

    /* Hero Section */
    .hero-glow, .hero-glow1 {
        padding-top: 2rem !important;
        padding-bottom: 2.5rem !important;
    }

    h1.display-4 {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
        margin-bottom: 1rem !important;
    }

    .lead, .lead1 {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 1.25rem !important;
    }

    /* Live Search Form on Mobile */
    .lx-search-container {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        width: 100% !important;
    }

        .lx-search-container form {
            padding: 0.35rem 0.45rem !important;
            border-radius: 0.85rem !important;
        }

        .lx-search-container i.bi-search {
            margin-left: 0.5rem !important;
            font-size: 0.95rem !important;
        }

        .lx-search-container .lx-search-input {
            font-size: 0.85rem !important;
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
            text-overflow: ellipsis;
        }

        .lx-search-container button[type="submit"] {
            padding: 0.45rem 0.85rem !important;
            font-size: 0.825rem !important;
            border-radius: 0.6rem !important;
        }

    /* Popular quick pills */
    .hero-glow1 .btn-sm,
    .hero-glow .btn-sm {
        font-size: 0.725rem !important;
        padding: 0.25rem 0.6rem !important;
    }

    /* Trust Badges */
    .hero-glow1 ul.list-unstyled {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.65rem !important;
    }

        .hero-glow1 ul.list-unstyled li {
            font-size: 0.82rem !important;
        }

    /* Section Headings */
    .display-5 {
        font-size: 1.75rem !important;
    }

    .display-6 {
        font-size: 1.5rem !important;
    }

    /* Stage & Service cards */
    .card-lx {
        padding: 1.25rem !important;
        border-radius: 1rem !important;
    }

        .card-lx img {
            max-height: 160px;
            object-fit: cover;
        }

    /* Floating Action Buttons */
    .floating-actions-container {
        bottom: 1rem !important;
        right: 1rem !important;
        gap: 0.5rem !important;
    }

    .floating-btn {
        width: 2.85rem !important;
        height: 2.85rem !important;
        font-size: 1.2rem !important;
    }

    .floating-expert-pill {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.85rem !important;
    }

    /* Modals */
    .modal-dialog {
        margin: 0.75rem !important;
        max-width: calc(100% - 1.5rem) !important;
    }

    .modal-content-lx {
        padding: 1rem !important;
        border-radius: 1.25rem !important;
    }

    /* Search Overlay */
    .search-overlay-modal {
        padding: 1.5rem 0.75rem 1rem !important;
    }

    .search-overlay-content {
        border-radius: 1rem !important;
    }

    /* Offcanvas Drawer */
    .offcanvas.offcanvas-start {
        max-width: min(320px, 85vw) !important;
        width: 85vw !important;
    }

    /* Footer */
    .ld-footer .container-lg {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .ld-footer .newsletter-form {
        flex-direction: column !important;
    }

        .ld-footer .newsletter-form button {
            width: 100% !important;
        }
}

/* 2. Narrow Mobile (< 380px, e.g. iPhone SE 1st/2nd Gen) */
@media (max-width: 379.98px) {
    .size21 {
        width: 100px !important;
        max-width: 100px !important;
    }

    .btn-auth-login span {
        display: none;
    }

    h1.display-4 {
        font-size: 1.65rem !important;
    }

    .container-x {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }
}

/* 3. Tablets in Portrait & Phablets (576px – 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .size21 {
        width: 130px !important;
        max-width: 130px !important;
    }

    header .btn-primary-lx {
        padding: 0.45rem 0.85rem !important;
        font-size: 12.5px !important;
    }

    h1.display-4 {
        font-size: 2.15rem !important;
        line-height: 1.25 !important;
    }

    .display-5 {
        font-size: 2rem !important;
    }

    .display-6 {
        font-size: 1.75rem !important;
    }
}

/* 4. Medium Tablets & iPad Portrait (768px – 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    h1.display-4 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }

    .display-5 {
        font-size: 2.25rem !important;
    }

    .display-6 {
        font-size: 2rem !important;
    }
}

/* 5. Small Laptops, Notebooks & Tablets in Landscape (992px – 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    header nav .nav-link-item,
    header nav button {
        font-size: 12px !important;
        padding: 0.35rem 0.4rem !important;
        gap: 0.2rem !important;
    }

        header nav button svg,
        .nav-link-item svg {
            width: 10px !important;
            height: 10px !important;
        }

    .size21 {
        width: 125px !important;
        max-width: 125px !important;
    }

    header .btn-primary-lx {
        font-size: 12px !important;
        padding: 0.45rem 0.8rem !important;
    }

    .mega-dropdown-menu {
        padding: 1.25rem 1.5rem !important;
        width: min(1050px, calc(100vw - 2rem)) !important;
        max-width: calc(100vw - 2rem) !important;
    }

    .mega-aside-card {
        padding: 1.25rem !important;
    }

        .mega-aside-card h5 {
            font-size: 1rem !important;
        }

        .mega-aside-card p {
            font-size: 0.78rem !important;
        }

    h1.display-4 {
        font-size: 2.85rem !important;
    }
}

/* 6. Large Desktop Displays & 4K (1400px+) */
@media (min-width: 1400px) {
    .container-x {
        max-width: 1380px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* 7. Service Page Sticky Navigation Tab Bar (Single-Row Touch Swipe on All Devices) */
.sticky-tabs-nav {
    position: sticky;
    top: 64px;
    z-index: 1020;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #e2e8f0;
}

    .sticky-tabs-nav .container-x {
        overflow: hidden;
    }

    .sticky-tabs-nav .nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0.25rem 0;
        gap: 0.25rem !important;
    }

        .sticky-tabs-nav .nav::-webkit-scrollbar {
            display: none;
        }

    .sticky-tabs-nav .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        color: #475569;
        font-weight: 600;
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
        border-bottom: 2px solid transparent;
        border-radius: 0;
    }

        .sticky-tabs-nav .nav-link.active {
            color: #116956;
            border-bottom-color: #ef1301;
        }

/* 8. iOS Safari Input Zoom Prevention (16px minimum on mobile inputs) */
@media (max-width: 768px) {
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    select,
    textarea,
    .form-control,
    .form-control-lx,
    .form-select {
        font-size: 16px !important;
    }
}

/* 9. Touch-Friendly Tap Targets */
@media (pointer: coarse) {
    .nav-link-item,
    .mega-menu-item,
    .mobile-service-link,
    .btn,
    .btn-primary-lx,
    .btn-secondary-lx {
        min-height: 30px;
    }
}

/* 10. Tables Touch Scrolling */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* 11. Dashboard & Blog Mobile Fine-Tuning */
@media (max-width: 575.98px) {
    #dashLoggedInState .card-lx {
        padding: 0.85rem 0.5rem !important;
    }

    #dashLoggedInState .fs-3 {
        font-size: 1.35rem !important;
    }

    #featuredBlogImg {
        min-height: 200px !important;
        max-height: 220px !important;
    }
}

/* ==========================================================================
   12. Lex Assistant Chatbot Widget (Interactive Service Redirection & WhatsApp)
   ========================================================================== */

/* Floating Chat Launcher Button */
.floating-chat-btn {
    background: linear-gradient(135deg, #0b1130 0%, #1e293b 100%);
    color: #ffffff !important;
    position: relative;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.35rem;
    box-shadow: 0 10px 25px -5px rgba(11, 17, 48, 0.35);
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

    .floating-chat-btn:hover {
        transform: scale(1.08) translateY(-2px);
        box-shadow: 0 14px 30px -5px rgba(11, 17, 48, 0.5);
        color: #ffffff;
    }

.floating-chat-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background-color: #23a382;
    border: 2px solid #ffffff;
    border-radius: 50%;
    animation: pulse-ring 2s infinite;
}

/* Chat Widget Container */
.lex-chat-widget {
    position: fixed;
    bottom: 90px;
    right: 1.5rem;
    width: 380px;
    max-width: calc(100vw - 2rem);
    height: 520px;
    max-height: calc(100vh - 120px);
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    box-shadow: 0 25px 60px -15px rgba(11, 17, 48, 0.35);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.96);
    pointer-events: none;
}

    .lex-chat-widget.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

/* Chat Header */
.lex-chat-header {
    background-color: #0b1130;
    padding: 0.9rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
}

.lex-chat-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #23a382, #148469);
    display: inline-grid;
    place-items: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
}

.lex-online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    background-color: #10b981;
    border: 2px solid #0b1130;
    border-radius: 50%;
}

.lex-chat-title-group {
    flex: 1;
    min-width: 0;
}

.lex-chat-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.lex-chat-subtitle {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.2;
}

.lex-chat-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    display: grid;
    place-items: center;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
}

    .lex-chat-close-btn:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.1);
    }

/* Chat Body & Messages */
.lex-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background-color: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .lex-chat-body::-webkit-scrollbar {
        width: 5px;
    }

    .lex-chat-body::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

.lex-msg-row {
    display: flex;
    width: 100%;
}

    .lex-msg-row.bot {
        justify-content: flex-start;
    }

    .lex-msg-row.user {
        justify-content: flex-end;
    }

.lex-msg-bubble {
    max-width: 99%;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 0.75rem 0.95rem;
    word-break: break-word;
}

.lex-msg-row.bot .lex-msg-bubble {
    background-color: #ffffff;
    color: #0b1130;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem 1.15rem 1.15rem 0.25rem;
    box-shadow: 0 1px 3px rgba(11, 17, 48, 0.04);
}

.lex-msg-row.user .lex-msg-bubble {
    background-color: #23a382;
    color: #ffffff;
    border-radius: 1.15rem 1.15rem 0.25rem 1.15rem;
    box-shadow: 0 4px 12px rgba(35, 163, 130, 0.25);
}

/* Recommended Service Cards inside Bot Message */
.lex-svc-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.lex-svc-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #effbf6;
    border: 1px solid #b2ead5;
    border-radius: 0.65rem;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
    color: #0e453a;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

    .lex-svc-card:hover {
        background-color: #d7f5e8;
        color: #062721;
        transform: translateX(2px);
        border-color: #7fd8bb;
    }

.lex-svc-price {
    color: #116956;
    font-weight: 700;
    font-size: 0.775rem;
    background: #ffffff;
    padding: 0.15rem 0.45rem;
    border-radius: 0.4rem;
    border: 1px solid #b2ead5;
}

/* WhatsApp Bot Action Button */
.lex-whatsapp-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #25D366;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.825rem;
    padding: 0.55rem 0.95rem;
    border-radius: 0.65rem;
    text-decoration: none;
    margin-top: 0.65rem;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transition: all 0.15s ease;
}

    .lex-whatsapp-card:hover {
        background-color: #1faa54;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
    }

/* Typing Indicator */
.lex-typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.6rem 0.85rem;
}

.lex-typing-dot {
    width: 6px;
    height: 6px;
    background-color: #94a3b8;
    border-radius: 50%;
    animation: lexDotBounce 1.4s infinite ease-in-out both;
}

    .lex-typing-dot:nth-child(1) {
        animation-delay: -0.32s;
    }

    .lex-typing-dot:nth-child(2) {
        animation-delay: -0.16s;
    }

@keyframes lexDotBounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Quick Suggestion Chips */
.lex-chat-chips-wrap {
    background-color: #ffffff;
    border-top: 1px solid #f1f5f9;
    padding: 0.5rem 0.75rem 0.25rem;
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .lex-chat-chips-wrap::-webkit-scrollbar {
        display: none;
    }

.lex-chip {
    flex-shrink: 0;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

    .lex-chip:hover {
        border-color: #49be9c;
        color: #116956;
        background-color: #effbf6;
    }

/* Input Area */
.lex-chat-footer {
    background-color: #ffffff;
    border-top: 1px solid #f1f5f9;
    padding: 0.6rem 0.75rem 0.75rem;
}

.lex-chat-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lex-chat-input {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
    color: #0b1130;
    outline: none;
    transition: all 0.2s ease;
}

    .lex-chat-input:focus {
        border-color: #23a382;
        box-shadow: 0 0 0 3px rgba(35, 163, 130, 0.15);
    }

.lex-chat-send-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 0.75rem;
    background-color: #23a382;
    color: #ffffff;
    border: none;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .lex-chat-send-btn:hover {
        background-color: #116956;
        transform: translateY(-1px);
    }

/* Mobile Responsiveness for Lex Chat Widget */
@media (max-width: 575.98px) {
    .lex-chat-widget {
        bottom: 75px;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-width: none;
        height: 480px;
        max-height: 75vh;
    }

    .floating-chat-btn {
        width: 2.85rem;
        height: 2.85rem;
        font-size: 1.2rem;
    }
}
/*box-card*/
.rating-card {
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(15, 23, 42, 0.06);
    transition: all 0.25s ease;
}

    .rating-card:hover {
        transform: translateY(-3px);
        border-color: #dce5df;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
    }

.rating-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7df;
    color: #f59e0b;
    font-size: 20px;
}

.success-icon {
    background: #eaf8f0;
    color: #16a34a;
}



.rating-text {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #64748b;
}

    .rating-text strong {
        color: #111827;
        font-size: 15px;
    }

.card-number {
    display: block;
    color: #111827;
    font-size: 17px;
    line-height: 1.3;
}

.card-label {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    text-transform: capitalize;
}

/*ravinder*/
.card-service {
    border: 1px solid #e7e7e74d;
    background: #ffffff17;
}

    .card-service:hover {
        border-color: #ffffff;
        background: #0b1130;
    }


li.mb-2 {
    padding: 7px 7px;
    border-radius: 9px;
    border: 2px solid #ffffff69;
}

/*li.mb-2:hover {
    background-color: #0b1130;
    border-color: #ffc107;
    transform: translateY(-2px);
    transition: all 0.3s ease;
    cursor: pointer;
}
/* ravinder 9/9/2026 */



/* ===== TOPBAR BASE ===== */
.top-announcement-bar1 {
    background: #051422;
    color: #ffffff;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 400;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

    .top-announcement-bar1 .container-x {
        display: flex;
        align-items: center;
        justify-content: space-between; /* desktop: dono taraf split */
        gap: 12px;
        flex-wrap: wrap; /* jab space kam ho tab wrap ho, crush na ho */
    }

/* ===== LEFT SIDE (call/email) ===== */
.topbar-left {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    row-gap: 6px;
}

    .topbar-left span {
        display: flex;
        align-items: center;
        gap: 6px;
        opacity: 0.85;
        white-space: nowrap;
    }

        .topbar-left span i {
            color: #f59d09;
            font-size: 15px;
        }

    .topbar-left a {
        color: inherit;
        text-decoration: none;
    }

        .topbar-left a:hover {
            text-decoration: underline;
        }

    /* Language Selector in Topbar */
    .tb-lang-wrapper {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 8px;
        padding: 4px 10px;
        transition: all 0.2s ease;
        line-height: 1.5;
        vertical-align: middle;
    }

    .tb-lang-wrapper:hover,
    .tb-lang-wrapper:focus-within {
        background: rgba(255, 255, 255, 0.22);
        border-color: #ef9a0a;
    }

    .tb-lang-wrapper i {
        color: #ef9a0a;
        font-size: 15px;
    }

    .header-lang-select {
        background: transparent;
        color: #ffffff;
        border: none;
        border-radius: 0;
        padding: 0 4px 0 0;
        font-size: 12px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        outline: none;
        line-height: 1.5;
        vertical-align: middle;
    }

    .header-lang-select option {
        background-color: #051422;
        color: #ffffff;
        padding: 6px 10px;
    }

/* Hide Google Translate top banner, tooltips, frames & shifts */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

body {
    top: 0px !important;
    position: static !important;
}

#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

.skiptranslate > iframe {
    display: none !important;
}

.goog-logo-link,
.goog-te-gadget {
    display: none !important;
}

/* ===== RIGHT SIDE (buttons) ===== */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .topbar-right a {
        padding: 5px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1.6;
    }

.tb-wa {
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .tb-wa:hover {
        background: #1fb857;
        color: #fff;
    }

.tb-login {
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}

    .tb-login:hover {
        border-color: #fff;
        color: #fff;
        background: rgba(255,255,255,0.08);
    }

.tb-signup {
    background: #ef9a0a;
    color: #102a44;
    font-weight: 600;
}

    .tb-signup:hover {
        background: #f5ab2c;
        color: #102a44;
    }

/* ===================================================
     TABLET (≤ 768px) — text thoda chhota, gap kam
  =================================================== */
@media (max-width: 768px) {
    .top-announcement-bar1 {
        font-size: 12px;
    }

    .topbar-left {
        gap: 14px;
    }

    .header-lang-select {
        font-size: 10px !important;
        padding: 2px 6px;
        max-width: 91px;
    }

    .topbar-right a {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* ===================================================
     MOBILE (≤ 576px)
     - Left/right ko stack karo (call/email upar, buttons neeche)
     - Email ko chhupao taaki jagah bache (sirf call + buttons)
     - WhatsApp text hide, sirf icon dikhao
  =================================================== */
@media (max-width: 576px) {
    .top-announcement-bar1 .container-x {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .topbar-left {
        justify-content: center;
        gap: 14px;
    }

    /* Email chhota screen par hide - sirf call number dikhega */
    /*.topbar-left .tb-email{
      display: none;
    }*/

    .topbar-right {
        justify-content: center;
        gap: 8px;
    }

        .topbar-right a {
            flex: 0 0 auto;
        }

    /* WhatsApp par sirf icon, text hide (space bachane ke liye) */
    /*.tb-wa .tb-wa-text{
      display: none;
    }*/
    .tb-wa {
        padding: 6px 10px;
    }
}

/* ===================================================
     EXTRA SMALL (≤ 360px) — Admin link bhi hide kar sakte ho
  =================================================== */
@media (max-width: 360px) {
    .tb-login {
        display: none;
    }
}



.step-number {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffc107;
    font-size: 0.875rem;
    font-weight: 700;
    width: 28px;
    height: 28px;
    top: 0;
    left: -2.4rem;
    background-color: #0b1130 !important;
    line-height: 1;
}

.display-5 {
    font-size: 24px;
}

/* ==========================================================================
   13. Premium Blog & Blog Details Design System
   ========================================================================== */

/* Reading Progress Indicator */
.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3.5px;
    width: 0%;
    background: linear-gradient(90deg, #ef1301 0%, #f59e0b 50%, #148469 100%);
    z-index: 99999;
    transition: width 0.1s linear;
}

/* Blog Hero & Category Bar */
.blog-hero-wrap {
    position: relative;
    background: #00354c;
    padding: 3.5rem 0 2.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.blog-search-box {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 50px;
    box-shadow: 0 8px 24px -6px rgba(11, 17, 48, 0.08);
    padding: 0.35rem 0.5rem 0.35rem 1.25rem;
    transition: all 0.25s ease;
}

    .blog-search-box:focus-within {
        border-color: #148469;
        box-shadow: 0 0 0 4px rgba(20, 132, 105, 0.12), 0 8px 24px -6px rgba(11, 17, 48, 0.1);
    }

.blog-search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.95rem;
    color: #0b1130;
    width: 100%;
}

.blog-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12px;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

    .blog-tag-pill:hover,
    .blog-tag-pill.active {
        background: #0b1130;
        color: #ffffff;
        border-color: #0b1130;
        box-shadow: 0 4px 12px rgba(11, 17, 48, 0.15);
    }

/* Featured Editorial Banner */
.featured-blog-card {
    border-radius: 20px;
    background: linear-gradient(135deg, #0b1130 0%, #111d47 60%, #081028 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px -15px rgba(11, 17, 48, 0.35);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .featured-blog-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 24px 48px -15px rgba(11, 17, 48, 0.45);
    }

.featured-blog-img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-blog-card:hover .featured-blog-img {
    transform: scale(1.03);
}

/* Standard Blog Card */
.blog-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(11, 17, 48, 0.04);
}

    .blog-card:hover {
        transform: translateY(-6px);
        border-color: #cbd5e1;
        box-shadow: 0 16px 32px -8px rgba(11, 17, 48, 0.12);
    }

.blog-card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 220px;
    background-color: #f1f5f9;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

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

.blog-category-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(11, 17, 48, 0.85);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.blog-read-time-badge {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    color: #0b1130;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 50px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.blog-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card-title {
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0b1130;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.blog-card:hover .blog-card-title {
    color: #148469;
}

.blog-card-excerpt {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.blog-card-footer {
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.author-mini {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.author-mini-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #e2e8f0;
}

.author-mini-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.author-mini-date {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Blog Details Layout & Typography */
.article-header-wrap {
    background: radial-gradient(70% 70% at 50% 0%, rgba(20, 132, 105, 0.08) 0%, transparent 80%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 3rem 0 2.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.article-featured-image-box {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 36px -12px rgba(11, 17, 48, 0.15);
    margin-bottom: 2.5rem;
    border: 1px solid #e2e8f0;
}

.article-featured-image {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
}

.article-content {
    font-size: 1.08rem;
    line-height: 1.85;
    color: #334155;
}

    .article-content h2 {
        font-size: 1.65rem;
        font-weight: 800;
        color: #0b1130;
        margin-top: 2.75rem;
        margin-bottom: 1.15rem;
        scroll-margin-top: 90px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .article-content h3 {
        font-size: 1.32rem;
        font-weight: 700;
        color: #0b1130;
        margin-top: 2rem;
        margin-bottom: 0.85rem;
        scroll-margin-top: 90px;
    }

    .article-content p {
        margin-bottom: 1.35rem;
    }

    .article-content ul,
    .article-content ol {
        margin-bottom: 1.5rem;
        padding-left: 1.5rem;
    }

    .article-content li {
        margin-bottom: 0.65rem;
    }

.article-callout {
    background: #f8fafc;
    border-left: 4px solid #148469;
    border-radius: 12px;
    padding: 1.35rem 1.65rem;
    border-top: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.article-table-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px -2px rgba(11, 17, 48, 0.04);
}

/* Article Body Links & Content Elements */
.article-content a {
    color: #148469;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .article-content a:hover {
        color: #0d5c49;
    }

.twitter-embed-wrapper {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    clear: both;
}

    .twitter-embed-wrapper blockquote.twitter-tweet {
        margin: 0 auto !important;
    }

.pdf-download-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .pdf-download-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px -4px rgba(220, 38, 38, 0.12) !important;
    }

.article-content h3.faq-question,
.faq-question {
    color: #0b1130;
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 1.8rem;
    margin-bottom: 0.5rem;
}

.article-content p.faq-answer,
.faq-answer {
    background: #f8fafc;
    border-left: 3px solid #23a382;
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 1.25rem;
}

/* Sidebar Widgets */
.sidebar-sticky-box {
    position: sticky;
    top: 90px;
}

.sidebar-widget {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px -4px rgba(11, 17, 48, 0.05);
}

.toc-link {
    display: block;
    font-size: 0.88rem;
    color: #64748b;
    padding: 0.45rem 0.75rem;
    border-left: 2px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.4;
}

    .toc-link:hover,
    .toc-link.active {
        color: #148469;
        border-left-color: #148469;
        background-color: #effbf6;
        font-weight: 600;
        border-radius: 0 8px 8px 0;
    }

.share-btn-round {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 1.1rem;
}

    .share-btn-round:hover {
        transform: translateY(-2px);
        color: #ffffff;
    }

.share-btn-wa:hover {
    background-color: #25d366;
    border-color: #25d366;
}

.share-btn-li:hover {
    background-color: #0a66c2;
    border-color: #0a66c2;
}

.share-btn-tw:hover {
    background-color: #0f1419;
    border-color: #0f1419;
}

.share-btn-cp:hover {
    background-color: #148469;
    border-color: #148469;
}

/* Author Bio Card */
.author-bio-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.75rem;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    box-shadow: 0 4px 16px -4px rgba(11, 17, 48, 0.05);
}

.author-bio-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #effbf6;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .author-bio-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   14. Free Consultation Page Styles
   ========================================================================== */
.consult-hero-wrap {
    position: relative;
    background: radial-gradient(70% 70% at 15% 15%, rgba(20, 132, 105, 0.09) 0%, transparent 70%), radial-gradient(55% 55% at 85% 25%, rgba(239, 19, 1, 0.05) 0%, transparent 60%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 3.5rem 0 4rem;
    border-bottom: 1px solid #e2e8f0;
}

.consult-booking-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    box-shadow: 0 20px 45px -12px rgba(11, 17, 48, 0.16);
    padding: 2.25rem 2rem;
    position: relative;
    overflow: hidden;
}

    .consult-booking-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, #148469 0%, #22c55e 50%, #f59e0b 100%);
    }

.consult-feature-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
}

    .consult-feature-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px -6px rgba(11, 17, 48, 0.08);
        border-color: #cbd5e1;
    }

.slot-choice-pill input[type="radio"] {
    display: none;
}

.slot-choice-pill label {
    display: block;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.slot-choice-pill input[type="radio"]:checked + label {
    background: #0b1130;
    color: #ffffff;
    border-color: #0b1130;
    box-shadow: 0 4px 12px rgba(11, 17, 48, 0.15);
}

.expert-card-modern {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.75rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(11, 17, 48, 0.04);
}

    .expert-card-modern:hover {
        transform: translateY(-5px);
        border-color: #cbd5e1;
        box-shadow: 0 16px 32px -8px rgba(11, 17, 48, 0.12);
    }

.expert-avatar-large {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.15rem;
    border: 3px solid #effbf6;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.process-step-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    position: relative;
    height: 100%;
    transition: all 0.25s ease;
}

    .process-step-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px -6px rgba(11, 17, 48, 0.08);
        border-color: #cbd5e1;
    }

.process-step-number {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #0b1130;
    color: #ffc107;
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.15rem;
}


/*ravinder saini 06/10/2026*/

.p-md-5 {
    padding: 2rem !important;
}

hr {
    margin: 5px 0px;
}

.text-data {
    font-size: 11px;
    color: #00334d;
}
.display-6 {
    font-size: 21px;
}
.data21 {
    margin-bottom: 0px;
    font-weight: 600;
    font-size: 15px;
}
.data22 {
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 13px;
}
.sticky-top {
    z-index: 1000;
}