:root {
    --primary: #5b4af0;
    --primary-dark: #4938d5;
    --primary-light: #eeeaff;

    --text-dark: #171b2d;
    --text: #353a4d;
    --text-muted: #747b8c;

    --white: #ffffff;
    --body-bg: #f8f9fc;

    --border: #e7e9f0;

    --shadow-sm: 0 4px 18px rgba(31, 35, 60, 0.06);
    --shadow-md: 0 10px 35px rgba(31, 35, 60, 0.10);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --transition: all 0.25s ease;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif;

    color: var(--text);
    background: var(--white);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
    font-family: "Inter", sans-serif;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 99;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(20, 25, 45, 0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        box-shadow 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}


/* Header after scroll */

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.985);

    border-color: rgba(20, 25, 45, 0.08);

    box-shadow:
        0 7px 30px rgba(23, 28, 55, 0.08);
}


/* =========================================================
   HEADER CONTAINER
========================================================= */

.header-container {
    width: 100%;
    /* min-height: 54px; */
    padding-left: 30px;
    padding-right: 30px;
    /* display: flex; */
    align-items: center;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    color: var(--text-dark);

    transition: var(--transition);
}

.brand:hover {
    color: var(--text-dark);
}

.brand-logo {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.brand-info {
    display: flex;
    flex-direction: column;

    justify-content: center;

    line-height: 1.1;
}


.brand-name {
    display: block;

    font-size: 18px;
    font-weight: 800;

    letter-spacing: -0.45px;

    color: var(--text-dark);
}


.brand-tagline {
    display: block;

    margin-top: 4px;

    font-size: 8px;
    font-weight: 700;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.desktop-nav {
    flex: 1;

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

    gap: 2px;

    margin-left: 25px;
}


.desktop-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 10px;
    color: #505669;
    font-size: 14px;
    /* font-weight: 600; */
    white-space: nowrap;
    border-radius: 9px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


.desktop-nav .nav-link:hover {
    color: var(--primary);

    background: rgba(91, 74, 240, 0.055);
}


.desktop-nav .nav-link.active {
    color: var(--primary);
}


.desktop-nav .nav-link.active::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;

    bottom: 2px;

    height: 2px;

    border-radius: 20px;

    background: var(--primary);
}


/* =========================================================
   SEARCH BUTTON
========================================================= */

.header-search {
    width: 40px;
    height: 40px;

    margin-left: 12px;

    flex: 0 0 40px;

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

    border: 1px solid var(--border);
    border-radius: 11px;

    background: var(--white);

    color: #52596b;

    cursor: pointer;

    transition: var(--transition);
}


.header-search i {
    font-size: 14px;
}


.header-search:hover {
    color: var(--white);

    background: var(--primary);

    border-color: var(--primary);

    box-shadow:
        0 6px 18px rgba(91, 74, 240, 0.22);

    transform: translateY(-1px);
}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.mobile-menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;
    margin-left: auto;

    flex: 0 0 44px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 12px;

    cursor: pointer;

    box-shadow: none;

    transition: var(--transition);
}


.mobile-menu-toggle:hover {
    border-color: rgba(91, 74, 240, 0.25);

    background: var(--primary-light);
}


.mobile-menu-toggle:focus {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(91, 74, 240, 0.12);
}


.mobile-menu-toggle span {
    width: 19px;
    height: 2px;

    display: block;

    border-radius: 20px;

    background: var(--text-dark);

    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}


/* =========================================================
   MOBILE OFFCANVAS
========================================================= */

.mobile-offcanvas {
    width: min(88vw, 390px) !important;

    border: 0 !important;

    background: #f8f9fd;

    box-shadow:
        -15px 0 50px rgba(20, 24, 45, 0.13);
}


.mobile-offcanvas .offcanvas-header {
    min-height: 76px;
    padding: 15px 17px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    z-index: 99999;
}


/* =========================================================
   MOBILE BRAND
========================================================= */

.mobile-brand {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--text-dark);
}


.mobile-brand:hover {
    color: var(--text-dark);
}


.mobile-brand img {
    width: 42px;
    height: 42px;

    object-fit: contain;
}


.mobile-brand strong {
    display: block;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.2;
}


.mobile-brand small {
    display: block;

    margin-top: 3px;

    color: var(--primary);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.65px;

    text-transform: uppercase;
}


/* =========================================================
   MOBILE CLOSE
========================================================= */

.mobile-close {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--white);
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
    margin: 0 0 0 90px;
}


.mobile-close:hover {
    color: var(--primary);

    background: var(--primary-light);

    border-color: rgba(91, 74, 240, 0.15);
}


.mobile-close:focus {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(91, 74, 240, 0.10);
}


/* =========================================================
   MOBILE OFFCANVAS BODY
========================================================= */

.mobile-offcanvas .offcanvas-body {
    padding: 20px 15px 25px;

    overflow-y: auto;

    scrollbar-width: thin;
}


.mobile-navigation-title {
    margin: 2px 5px 11px;

    color: #9298a8;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   MOBILE NAV
========================================================= */

.mobile-nav {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.mobile-nav-item {
    min-height: 52px;

    width: 100%;

    padding: 8px 10px;

    display: flex;
    align-items: center;

    gap: 11px;

    color: #454b5c;

    border-radius: 13px;

    font-size: 12.5px;
    font-weight: 600;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}


.mobile-nav-item:hover {
    color: var(--primary);

    background: rgba(91, 74, 240, 0.055);

    transform: translateX(2px);
}


.mobile-nav-item.active {
    color: var(--primary);

    background: rgba(91, 74, 240, 0.095);
}


.mobile-nav-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

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

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--white);

    color: var(--primary);

    box-shadow: 0 2px 7px rgba(30, 35, 60, 0.035);
}


.mobile-nav-icon i {
    font-size: 14px;
}


.mobile-nav-item > i:last-child {
    margin-left: auto;

    color: #a1a6b3;

    font-size: 9px;
}


/* =========================================================
   MOBILE CTA
========================================================= */

.mobile-cta {
    margin-top: 22px;

    padding: 14px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-radius: 16px;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            #5142df 0%,
            #7047eb 100%
        );

    box-shadow:
        0 12px 30px rgba(91, 74, 240, 0.18);
}


.mobile-cta-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.15);
}


.mobile-cta-icon i {
    font-size: 15px;
}


.mobile-cta-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.mobile-cta-content strong {
    font-size: 16px;
    font-weight: 700;
}


.mobile-cta-content span {
    /* margin-top: 3px; */
    font-size: 11.5px;
    opacity: 0.8;
}


.mobile-cta > a {
    width: 31px;
    height: 31px;

    margin-left: auto;

    flex: 0 0 31px;

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

    border-radius: 9px;

    color: var(--white);

    background: rgba(255, 255, 255, 0.14);

    transition: var(--transition);
}


.mobile-cta > a:hover {
    background: rgba(255, 255, 255, 0.24);

    transform: translate(1px, -1px);
}


/* =========================================================
   BOOTSTRAP OFFCANVAS BACKDROP
========================================================= */

.offcanvas-backdrop {
    z-index: 1040;

    background-color: #111426;
}


.offcanvas-backdrop.show {
    opacity: 0.48;
}


/* =========================================================
   PLACEHOLDER MAIN AREA
========================================================= */

main {
    min-height: 500px;
}


/* =========================================================
   RESPONSIVE — LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .header-container {
        padding-left: 42px;
        padding-right: 42px;
    }

    .desktop-nav {
        gap: 4px;

        margin-left: 35px;
    }

    .desktop-nav .nav-link {
        padding-left: 12px;
        padding-right: 12px;

        font-size: 11.5px;
    }

}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .header-container {
        padding-left: 22px;
        padding-right: 22px;
    }

    .desktop-nav {
        margin-left: 15px;
    }

    .desktop-nav .nav-link {
        padding-left: 7px;
        padding-right: 7px;

        font-size: 10px;
    }

    .brand {
        gap: 8px;
    }

    .brand-name {
        font-size: 17px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET / MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .header-container {
        min-height: 38px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .desktop-nav,
    .header-search {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
    }

    .brand-name {
        font-size: 16px;
    }

    .brand-tagline {
        font-size: 7.5px;
    }

}


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

@media (max-width: 575.98px) {

    .header-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mobile-menu-toggle {
        width: 43px;
        height: 43px;

        flex-basis: 43px;
    }

    .brand-logo {
        width: 82px;
        height: 82px;
    }

    .brand-name {
        font-size: 23px;
    }

    .mobile-offcanvas {
        width: 90vw !important;
    }

}


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

@media (max-width: 360px) {

    .brand {
        gap: 7px;
    }

    .brand-name {
        font-size: 20px;
    }

    .brand-tagline {
        font-size: 12px;
    }

    .mobile-offcanvas {
        width: 94vw !important;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* =========================================================
   MOBILE TOGGLE — HAMBURGER → CLOSE
========================================================= */

.mobile-menu-toggle {
    position: relative;
}

.mobile-menu-toggle .toggle-line {
    position: absolute;

    width: 19px;
    height: 2px;

    margin: 0;

    border-radius: 20px;

    background: var(--text-dark);

    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}

.mobile-menu-toggle .line-1 {
    transform: translateY(-6px);
}

.mobile-menu-toggle .line-2 {
    transform: translateY(0);
}

.mobile-menu-toggle .line-3 {
    transform: translateY(6px);
}


/* MENU OPEN → X */

.mobile-menu-toggle.menu-open .line-1 {
    transform: rotate(45deg);
}

.mobile-menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.menu-open .line-3 {
    transform: rotate(-45deg);
}


/* =========================================================
   SEARCH OVERLAY
========================================================= */

.search-overlay {
    position: fixed;
    top: 147px;
    left: 0;
    right: 0;
    z-index: 1045;
    padding: 18px 25px;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--border);
    box-shadow:
        0 15px 40px rgba(25, 30, 55, 0.10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;
}


.search-overlay.open {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


.search-overlay-inner {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;
}


.search-box {
    width: 100%;
}


.search-input-wrapper {
    width: 100%;

    height: 56px;

    display: flex;
    align-items: center;

    padding: 0 8px 0 18px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 15px;

    box-shadow:
        0 6px 25px rgba(30, 35, 60, 0.07);
}


.search-input-wrapper > i {
    margin-right: 12px;

    color: var(--primary);

    font-size: 17px;
}


.search-input-wrapper input {
    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--text-dark);

    font-size: 14px;
    font-weight: 500;
}


.search-input-wrapper input::placeholder {
    color: #9aa0af;
}


.search-close {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border: 0;

    border-radius: 10px;

    background: #f4f5f9;

    color: #596073;

    cursor: pointer;

    transition: var(--transition);
}


.search-close:hover {
    background: var(--primary-light);

    color: var(--primary);
}


.search-hint {
    margin-top: 8px;

    text-align: right;

    color: #8a90a0;

    font-size: 10px;
}


.search-hint kbd {
    padding: 2px 6px;

    border: 1px solid #dfe2e9;

    border-radius: 4px;

    background: #f5f6f9;

    color: #62697a;

    font-size: 9px;
}


/* =========================================================
   SEARCH MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .search-overlay {
        top: 68px;

        padding: 12px 12px;
    }

    .search-input-wrapper {
        height: 52px;

        border-radius: 13px;
    }

    .search-input-wrapper input {
        font-size: 13px;
    }

    .search-hint {
        display: none;
    }

}


/* =========================================================
   MOBILE TOGGLE OPEN STATE
========================================================= */

@media (max-width: 991.98px) {

    .mobile-menu-toggle.menu-open {
        background: var(--primary-light);

        border-color: rgba(91, 74, 240, 0.20);
    }

    .mobile-menu-toggle.menu-open .toggle-line {
        background: var(--primary);
    }

}

/* =====================================================
   SERVICES SECTION STYLES
===================================================== */
.services-section {
    /* background-color: #0b132b; */ /* Dark background matching the hero theme */
}

/* Card Base Styling */
.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 6px;
    height: 100%;
    min-height: 320px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

/* Specific Card Background Colors from Image */
.card-dark-blue {
    background-color: #1e3a4b;
}

.card-deep-blue {
    background-color: #1a2f5a;
}

.card-teal {
    background-color: #2b7a69;
}

.card-slate {
    background-color: #1f4850;
}

/* Icon Style */
.service-icon {
    font-size: 3.2rem;
    color: #ffffff;
    margin-bottom: 1.25rem;
    line-height: 1;
}

/* Text Content */
.service-title {
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.service-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    max-width: 90%;
}

/* Learn More Button */
.service-btn {
    display: inline-block;
    background-color: #e59819; /* Amber/Orange button color */
    color: #ffffff !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.55rem 1.4rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.service-btn:hover {
    background-color: #d1850e;
    transform: scale(1.03);
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .service-card {
        min-height: auto;
        padding: 2rem 1.25rem;
    }
}

/* Custom Utility */
.fs-7 { font-size: 0.825rem; }
.tracking-wider { letter-spacing: 1.5px; }

/* 1. Market Section Styling */
.market-section {
    background-color: #0d172a;
}
.share-card {
    background: #152238;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1.25rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.share-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 152, 25, 0.4);
}
.company-logo-placeholder {
    width: 44px;
    height: 44px;
    background: #1e3a4b;
    color: #fff;
    font-weight: bold;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    margin-right: 0.85rem;
}
.share-name {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
}
.price-tag {
    color: #e59819;
    font-weight: 700;
    font-size: 1rem;
}

/* 2. Stats Section Styling */
.stats-section {
    background: linear-gradient(135deg, #194778 0%, #67ab40 100%);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stat-number {
    color: #ffffff;
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 0.25rem;
}
.stat-label {
    color: rgb(255 255 255);
    font-size: 13px;
    margin: 0;
}

/* 3. Process Section Styling */
.process-section {
    background-color: #0b132b;
}
.process-step {
    background: #152238;
    padding: 2rem 1.5rem;
    border-radius: 8px;
    position: relative;
    height: 100%;
    border-top: 3px solid #e59819;
}
.step-num {
    font-size: 2rem;
    font-weight: 800;
    color: rgba(229, 152, 25, 0.25);
    margin-bottom: 0.5rem;
}

/* =====================================================
   WHY TRUST US SECTION (LIGHT THEME)
===================================================== */
.trust-section {
    background-color: #f8f9fa; /* Clean Light Gray Background */
    color: #212529;
}

/* Subtitle & Title */
.trust-subtitle {
    color: #e59819; /* Brand Accent Color */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.trust-title {
    color: #0b132b; /* Deep Navy Heading */
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.3;
}

.title-divider {
    width: 60px;
    height: 3px;
    background-color: #e59819;
    border-radius: 2px;
}

/* Cards Styling */
.trust-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    height: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.trust-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(11, 19, 43, 0.08);
    border-color: rgba(229, 152, 25, 0.4);
}

/* Icons */
.trust-icon-box {
    width: 60px;
    height: 60px;
    background-color: rgba(229, 152, 25, 0.1); /* Subtle Brand Tint */
    color: #e59819;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1.25rem auto;
}

/* Numbers & Descriptions */
.stat-value {
    color: #0b132b;
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.stat-text {
    color: #6c757d;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

/* Responsive Scaling */
@media (max-width: 767.98px) {
    .trust-title {
        font-size: 1.65rem;
    }
    .trust-card {
        padding: 2rem 1.25rem;
    }
    .stat-value {
        font-size: 1.9rem;
    }
}

/* =====================================================
   HOW TO BUY SECTION (LIGHT THEME)
===================================================== */
.how-to-buy-section {
    background-color: #ffffff; /* Premium Clean White Background */
    color: #212529;
}

/* Subtitle & Header */
.process-subtitle {
    color: #e59819; /* Brand Accent Color */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.process-title {
    color: #0b132b; /* Deep Navy Heading */
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Card Container */
.process-card {
    background: #f8f9fa; /* Light Gray Card Background */
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 2.5rem 1.25rem 2rem 1.25rem;
    text-align: center;
    position: relative;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.process-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(11, 19, 43, 0.08);
    border-color: rgba(229, 152, 25, 0.5);
}

/* Step Number Badge */
.step-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background-color: #0b132b; /* Navy Badge */
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.process-card:hover .step-badge {
    background-color: #e59819; /* Gold accent on hover */
}

/* Icons Style */
.step-icon {
    width: 58px;
    height: 58px;
    background-color: rgba(229, 152, 25, 0.12);
    color: #e59819;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0.5rem auto 1.25rem auto;
}

/* Text Elements */
.step-title {
    color: #0b132b;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.65rem;
}

.step-desc {
    color: #6c757d;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .process-title {
        font-size: 22px;
    }
    .process-card {
        padding: 2.25rem 1.25rem 1.75rem 1.25rem;
    }
}

/* =====================================================
   CREATIVE ABOUT US SECTION
===================================================== */
.about-section {
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
    position: relative;
}

/* Central Card Overlay */
.about-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(11, 19, 43, 0.04);
}

/* Top Badge */
.about-badge {
    background-color: rgba(229, 152, 25, 0.12);
    color: #e59819;
    font-size: 12px;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Heading & Highlights */
.about-title {
    color: #0b132b;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
}

.highlight-text {
    color: #e59819;
    background: linear-gradient(120deg, rgba(229, 152, 25, 0.15) 0%, rgba(229, 152, 25, 0.05) 100%);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
}

/* Main Paragraph Text */
.about-text {
    color: #4a5568;
    font-size: 15px;
    /* line-height: 1.7; */
    /* max-width: 820px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* Feature Item Box */
.feature-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    padding: 0.85rem 1rem;
    border-radius: 10px;
}

.feature-item i {
    font-size: 1.35rem;
}

/* Read More Button Styling */
.btn-about-primary {
    display: inline-flex;
    align-items: center;
    background-color: #0b132b;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(11, 19, 43, 0.15);
}

.btn-about-primary:hover {
    background-color: #e59819;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(229, 152, 25, 0.25);
}

/* Responsive Tweaks */
@media (max-width: 767.98px) {
    .about-title {
        font-size: 15px;
        margin: 0 0 6px 0 !important;
    }
    .about-text {
        font-size: 0.95rem;
    }
    .about-card {
        padding: 1.75rem 1.25rem;
    }
}

/* =====================================================
   TESTIMONIALS & GOOGLE REVIEWS SECTION
===================================================== */
.testimonials-section {
    background-color: #f8f9fa;
}

.testimonial-subtitle {
    color: #e59819;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.testimonial-title {
    color: #0b132b;
    font-size: 29px;
    font-weight: 800;
}

/* Overall Google Score Badge Header */
.google-rating-badge {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.google-icon-wrapper {
    width: 45px;
    height: 45px;
    background-color: #f1f5f9;
    color: #4285f4; /* Google Blue */
    font-size: 1.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Individual Review Cards */
.review-card {
    background: #67a942;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(11, 19, 43, 0.06);
    border-color: rgba(229, 152, 25, 0.3);
}

.review-text {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
}

/* User Avatar Initials */
.user-avatar {
    width: 42px;
    height: 42px;
    background-color: #0b132b;
    color: #e59819;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-name {
    color: #0b132b;
    font-weight: 700;
    font-size: 0.98rem;
}

.verified-tag {
    font-size: 0.78rem;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .testimonial-title {
        font-size: 1.65rem;
    }
}

/* =====================================================
   CREATIVE OUR TEAM SECTION
===================================================== */
.team-section {
    background-color: #ffffff;
}

.team-subtitle {
    color: #e59819;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.team-title {
    color: #0b132b;
    font-size: 2.1rem;
    font-weight: 800;
}

/* Team Card Base */
.team-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(11, 19, 43, 0.08);
    border-color: rgba(229, 152, 25, 0.4);
}

/* Image Wrapper & Badging */
.team-img-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 1.5rem;
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.role-badge {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0b132b;
    color: #e59819;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    border-radius: 50px;
    white-space: nowrap;
    border: 2px solid #ffffff;
}

/* Content & Bio */
.member-name {
    color: #0b132b;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.member-bio {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    max-width: 320px;
}

/* Connect Button */
.btn-connect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #0b132b;
    border: 2px solid #0b132b;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.55rem 1.35rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-connect:hover {
    background-color: #e59819;
    border-color: #e59819;
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 767.98px) {
    .team-title {
        font-size: 21px;
    }
}

/* =====================================================
   PREMIUM WHY CHOOSE US & QUERY FORM
===================================================== */
.why-choose-premium {
    background-color: #070d19; /* Deep Luxe Dark Theme */
    padding: 5rem 0;
}

/* Background Ambient Glows */
.glow-bg {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    pointer-events: none;
}
.glow-1 {
    top: -100px;
    left: -100px;
    background: #e59819;
}
.glow-2 {
    bottom: -100px;
    right: -100px;
    background: #1e3a4b;
}

/* Utilities */
.fw-extrabold { font-weight: 800; }
.fs-7 { font-size: 0.825rem; }
.fs-8 { font-size: 0.75rem; }
.text-light-subtle { color: rgba(255, 255, 255, 0.7); }

/* Text Gradient Highlight */
.text-gradient-gold {
    background: linear-gradient(135deg, #f7c978 0%, #e59819 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gold Pill Badge */
.badge-pill-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(229, 152, 25, 0.1);
    border: 1px solid rgba(229, 152, 25, 0.3);
    color: #f7c978;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Feature Cards (Glassmorphism) */
.feature-glass-card {
    background: rgb(8 38 71);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    height: 100%;
    transition: all 0.3s ease;
}
.feature-glass-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(229, 152, 25, 0.4);
    transform: translateY(-3px);
}
.feature-icon-wrapper {
    width: 38px;
    height: 38px;
    background: rgba(229, 152, 25, 0.15);
    color: #e59819;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* FORM STYLING */
.premium-form-card {
    background: linear-gradient(180deg, #121c2e 0%, #0d1625 100%);
    border: 1px solid rgba(229, 152, 25, 0.25);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(229, 152, 25, 0.05);
    position: relative;
}

.form-label-custom {
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.input-glass-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 1rem;
    color: #a0aec0;
    font-size: 1.1rem;
    pointer-events: none;
    transition: color 0.3s ease;
}

.form-control-glass {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.75rem 1rem 0.75rem 2.8rem;
    color: #ffffff;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.form-control-glass::placeholder {
    color: #64748b;
}

.form-control-glass:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #e59819;
    box-shadow: 0 0 15px rgba(229, 152, 25, 0.2);
}

.form-control-glass:focus + .input-icon,
.input-glass-group:focus-within .input-icon {
    color: #e59819;
}

/* Gold Gradient Button */
.btn-gradient-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f7c978 0%, #e59819 100%);
    color: #0b132b;
    border: none;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(229, 152, 25, 0.3);
}

.btn-gradient-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(229, 152, 25, 0.45);
    background: linear-gradient(135deg, #ffffff 0%, #e59819 100%);
}

.text-muted-gold {
    color: rgba(247, 201, 120, 0.7);
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
    .premium-form-card {
        padding: 2rem 1.5rem;
    }
    .display-5 {
        font-size: 25px;
        margin: 0 0 10px 0 !important;
    }
}

.feature-glass-card p {color:#fff;font-size: 14px;}

/* =====================================================
   SHARES MARKET GRID & CREATIVE MODAL STYLES
===================================================== */
.shares-market-section {
    background-color: #0b132b;
}

.glow-spot {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    pointer-events: none;
}
.spot-left { top: -50px; left: -50px; background: #e59819; }
.spot-right { bottom: -50px; right: -50px; background: #2b7a69; }

/* Header Button */
.btn-explore-glow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #1f3556 0%, #152238 100%);
    border: 1px solid rgba(229, 152, 25, 0.4);
    color: #ffffff !important;
    padding: 0.75rem 1.4rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bhaav-hero-section {
    /* background: linear-gradient(135deg, #0b1329 0%, #101f42 100%); */
    padding: 29px 0;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.bhaav-hero-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(56, 189, 248, 0.15);
    filter: blur(120px);
    border-radius: 50%;
}

.hero-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* padding: 6px 16px; */
    border-radius: 30px;
    font-size: 0.85rem;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.hero-main-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 8px;
    letter-spacing: -0.5px;
    color: #000;
}

.hero-main-title span.highlight {
    background: linear-gradient(90deg, #38bdf8, #4ade80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtext {
    font-size: 15px;
    color: #94a3b8;
    margin-top: 11px;
    line-height: 1.6;
    /* max-width: 540px; */
}

.hero-action-group {
    /* display: flex; */
    /* align-items: center; */
    gap: 15px;
    margin-top: -5px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    background: #198754;
    color: #ffffff;
    font-weight: 700;
    padding: 9px 17px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.25);
    font-size: 13px;
}

.btn-hero-primary:hover {
    background: #0ea5e9;
    color: #fff;
    transform: translateY(-2px);
}

.btn-hero-secondary {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.hero-stats-row {
    display: flex;
    align-items: center;
    gap: 35px;
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2px;
}

.stat-item p {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0;
    text-transform: uppercase;
}

/* Glassmorphism Live Preview Widget (Right Side) */
.hero-widget-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.widget-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.5px;
}

.widget-date {
    font-size: 0.75rem;
    color: #64748b;
}

.share-mini-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-mini-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.share-mini-item:hover {
    background: rgba(255, 255, 255, 0.07);
}

.mini-logo-box {
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.mini-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mini-info h6 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.mini-info span {
    font-size: 0.75rem;
    color: #64748b;
}

.mini-price {
    text-align: right;
}

.mini-price .price-txt {
    font-size: 0.95rem;
    font-weight: 700;
    color: #38bdf8;
    display: block;
}

.mini-price .tag-txt {
    font-size: 0.65rem;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.widget-footer {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-footer span {
    font-size: 0.75rem;
    color: #64748b;
}

.widget-footer a {
    font-size: 0.85rem;
    color: #38bdf8;
    text-decoration: none;
    font-weight: 600;
}

/* Mobile Responsive Settings */
@media (max-width: 991.98px) {
    .bhaav-hero-section {
        padding: 18px 0;
    }
    .hero-main-title {
        font-size: 25px;
    }
    .hero-stats-row {
        gap: 20px;
        justify-content: space-between;
    }
    .stat-item h3 {
        font-size: 1.4rem;
    }
}

.btn-explore-glow:hover {
    background: #e59819;
    color: #0b132b !important;
    transform: translateY(-2px);
}

/* Share Cards Base */
.market-share-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.25rem;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    margin: 0 0 15px 0;
}
.market-share-card:hover {
    transform: translateY(-5px);
}

/* Card Elements */
.company-logo-box {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.company-logo-box img { max-width: 100%; max-height: 100%; }

.share-page-link {
    color: #0b132b;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
}
.share-page-link:hover { color: #e59819; }

.stat-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
}
.stat-badge.pos { background: #dcfce7; color: #166534; }
.stat-badge.neg { background: #fee2e2; color: #991b1b; }

.metric-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px dashed #f1f5f9;
}
.metric-row small { display: block; color: #64748b; font-size: 0.7rem; font-weight: 700; }
.metric-row strong { color: #0b132b; font-size: 0.85rem; }

.tag-drhp {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.price-value { font-size: 1.15rem; font-weight: 800; color: #0b132b; }

/* Buy & Sell Action Buttons */
.card-action-btns { display: flex; gap: 0.5rem; margin-top: 1rem; }
.btn-trade {
    flex: 1;
    border: none;
    padding: 0.55rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.btn-trade.buy { background: #10b981; color: #ffffff; }
.btn-trade.sell { background: #3b82f6; color: #ffffff; }
.btn-trade:hover { opacity: 0.9; }

/* CREATIVE POPUP MODAL STYLES */
.creative-modal-content {
    background: linear-gradient(180deg, #198754 0%, #0b132b 100%);
    border: 1px solid rgba(229, 152, 25, 0.3);
    border-radius: 18px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.badge-action-type {
    background: #e59819;
    color: #0b132b;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
}

.modal-trust-points {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.85rem;
}
.trust-point-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.825rem;
    margin-bottom: 0.4rem;
}
.trust-point-item:last-child { margin-bottom: 0; }

.input-group-custom {
    position: relative;
    display: flex;
    align-items: center;
}
.input-group-custom i {
    position: absolute;
    left: 1rem;
    color: rgba(255, 255, 255, 0.4);
}
.form-input-custom {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    color: #ffffff;
    font-size: 0.9rem;
    outline: none;
}
.form-input-custom:focus {
    border-color: #e59819;
    background: rgba(255, 255, 255, 0.1);
}

.btn-modal-submit {
    background: linear-gradient(135deg, #f7c978 0%, #e59819 100%);
    color: #0b132b;
    border: none;
    font-weight: 800;
    padding: 0.75rem;
    border-radius: 8px;
    transition: transform 0.2s ease;
}
.btn-modal-submit:hover { transform: translateY(-2px); }

.shares-market-section h2 {
    color: #fff;
    margin: 10px 0 20px 0 !important;
    font-size: 22px;
}

/* =====================================================
   CLEAN & PERFECTLY ALIGNED TOP BAR
===================================================== */
.top-utility-bar {
    background-color: #198754;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    position: relative;
    z-index: 1040;
}

/* Flex Column Width Balance for Vertical Bounding */
.top-bar-left, 
.top-bar-right {
    min-width: 180px;
}

.text-gold {
    color: #e59819;
}

.top-bar-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    transition: color 0.25s ease;
}

.top-bar-link:hover {
    color: #ffffff;
}

/* Center Punchline Styling */
.top-punchline-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(229, 152, 25, 0.2);
    padding: 0.25rem 1rem;
    border-radius: 50px;
}

.punchline-text {
    color: #e2e8f0;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Green Pulse Indicator */
.live-pulse {
    width: 7px;
    height: 7px;
    background-color: #10b981;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.live-pulse::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #10b981;
    border-radius: 50%;
    animation: pulse-ring 1.8s infinite ease-out;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3.5); opacity: 0; }
}

/* Right Side CTA */
.btn-top-accent {
    background: linear-gradient(135deg, #f7c978 0%, #e59819 100%);
    color: #0b132b !important;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.btn-top-accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 152, 25, 0.35);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .top-bar-left, .top-bar-right {
        display: none !important;
    }
    .top-bar-center {
        width: 100%;
    }
    .punchline-text {
        font-size: 0.72rem;
        white-space: normal;
    }
}

/* =====================================================
   CREATIVE PREMIUM FOOTER SECTION
===================================================== */
.site-footer {
    background-color: #050a14; /* Deep Luxe Dark */
    color: #e2e8f0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 1px solid rgba(229, 152, 25, 0.15);
}

/* Background Ambient Glows */
.footer-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    pointer-events: none;
}
.glow-left { top: -50px; left: -50px; background: #e59819; }
.glow-right { bottom: 0; right: -50px; background: #1e3a4b; }

/* Top CTA Banner */
.footer-cta-card {
    background: linear-gradient(135deg, #121c2e 0%, #0c1524 100%);
    border: 1px solid rgba(229, 152, 25, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.badge-cta {
    display: inline-block;
    background: rgba(229, 152, 25, 0.15);
    color: #f7c978;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #198754 0%, #198754 100%);
    color: #ffffff !important;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 0.75rem 1.4rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(229, 152, 25, 0.25);
}
.btn-footer-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(229, 152, 25, 0.4);
}

/* Brand Area */
.footer-logo {
    height: 36px;
    width: auto;
}
.footer-brand-name {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 800;
}
.footer-desc {
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Social Buttons */
.social-icon-btn {
    width: 36px;
    height: 36px;
    background: #198754;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}
.social-icon-btn:hover {
    background: #e59819;
    color: #0b132b;
    border-color: #e59819;
    transform: translateY(-3px);
}

/* Navigation Lists */
.footer-heading {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1.25rem;
    position: relative;
}
.footer-heading::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: #e59819;
    margin-top: 0.35rem;
    border-radius: 2px;
}

.footer-links-list li {
    margin-bottom: 0.65rem;
}
.footer-links-list a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.88rem;
    transition: all 0.25s ease;
}
.footer-links-list a:hover {
    color: #f7c978;
    padding-left: 4px;
}

/* Contact Info Styling */
.contact-icon {
    width: 34px;
    height: 34px;
    background: rgba(229, 152, 25, 0.12);
    color: #e59819;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
}
.contact-label {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.contact-val {
    color: #cbd5e1;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
a.contact-val:hover {
    color: #f7c978;
}

/* Divider & Legal Bottom Bar */
.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

.copyright-text {
    font-size: 0.8rem;
}
.legal-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.2s ease;
}
.legal-links a:hover {
    color: #f7c978;
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
    .site-footer {
        padding-top: 3rem;
    }
    .footer-heading {
        margin-top: 1rem;
    }
}

/* =====================================================
   DESKTOP & MOBILE FLOATING CALL / WHATSAPP ACTION BAR
===================================================== */

/* DESKTOP VIEW: Right Side Floating Stack */
.floating-contact-wrapper {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Floating Base Button Style */
.float-btn {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.float-btn .btn-icon {
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Color Brands & Ambient Pulse Glow */
.float-whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}
.float-whatsapp::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25d366;
    z-index: 1;
    animation: float-pulse-whatsapp 2s infinite ease-out;
}

.float-call {
    background: linear-gradient(135deg, #f7c978 0%, #e59819 100%);
    color: #0b132b !important;
}
.float-call::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e59819;
    z-index: 1;
    animation: float-pulse-call 2s infinite ease-out 0.4s;
}

/* Desktop Hover Tooltips */
.btn-tooltip {
    position: absolute;
    right: 65px;
    background: #0b132b;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    pointer-events: none;
}

.float-btn:hover {
    transform: scale(1.1);
}

.float-btn:hover .btn-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Keyframe Animations */
@keyframes float-pulse-whatsapp {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes float-pulse-call {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* =====================================================
   MOBILE VIEW: Bottom Horizontal Action Dock (Screen < 768px)
===================================================== */
@media (max-width: 767.98px) {
    .floating-contact-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        /* background: rgba(11, 19, 43, 0.95); */
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(229, 152, 25, 0.2);
        padding: 7px;
        flex-direction: row;
        gap: 5px;
        box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.4);
    }

    .float-btn {
        flex: 1;
        height: 38px;
        width: 100%;
        border-radius: 8px;
        box-shadow: none;
    }

    .float-btn::after {
        display: none; /* Disable ring pulses on mobile to prevent performance lag */
    }

    .btn-tooltip {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        font-size: 12px;
        margin-left: 6px;
    }

    .float-whatsapp .btn-tooltip { color: #ffffff; }
    .float-call .btn-tooltip { color: #0b132b; }
}

/* =====================================================
   WHY CHOOSE US - SPLIT LAYOUT (LEFT CONTENT / RIGHT IMAGE)
===================================================== */
.why-choose-split {
    background-color: #070d19;
    padding: 5rem 0;
}

/* Background Ambient Glows */
.glow-bg {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    pointer-events: none;
}
.glow-left { top: -80px; left: -80px; background: #e59819; }
.glow-right { bottom: -80px; right: -80px; background: #1e3a4b; }

.fs-7 { font-size: 0.85rem; }
.fs-8 { font-size: 0.75rem; }

/* Left Side Feature Cards */
.feature-row-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 1rem 1.25rem;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.feature-row-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(229, 152, 25, 0.35);
    transform: translateX(6px);
}

.feature-icon {
    width: 44px;
    height: 44px;
    background: rgba(229, 152, 25, 0.12);
    border: 1px solid rgba(229, 152, 25, 0.25);
    color: #e59819;
    font-size: 1.2rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Right Side Image Styling & Border Glow */
.border-gold-glow {
    border: 1px solid rgba(229, 152, 25, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(229, 152, 25, 0.08);
}

.main-feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.creative-image-container:hover .main-feature-img {
    transform: scale(1.03);
}

/* Floating Overlay Cards */
.glass-stat-card {
    position: absolute;
    background: rgba(11, 19, 43, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 152, 25, 0.3);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

.card-top-right {
    top: -15px;
    right: -15px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-bottom-left {
    bottom: -15px;
    left: -15px;
}

.stat-icon-circle {
    width: 32px;
    height: 32px;
    background: #10b981;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* Mobile Adjustments */
@media (max-width: 991.98px) {
    .creative-image-container {
        margin-top: 1.5rem;
    }
    .card-top-right {
        top: 10px;
        right: 10px;
    }
    .card-bottom-left {
        bottom: 10px;
        left: 10px;
    }
}

.why-choose-split h2 {
    font-size: 25px;
}


/* =========================================
   HOME ABOUT SECTION
========================================= */

.home-about {
    position: relative;
    padding: 30px 0;
    overflow: hidden;
    background: #fff;
}

.about-container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}

.about-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 43px;
}


/* =========================================
   VISUAL
========================================= */

.about-visual {
    position: relative;
    /* min-height: 500px; */
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

.about-main-card {
    position: relative;
    width: 390px;
    min-height: 400px;
    padding: 38px;
    overflow: hidden;
    border-radius: 30px;
    background:
        radial-gradient(circle at 80% 15%,
        rgba(13,110,253,.25),
        transparent 35%),
        linear-gradient(145deg, #07111f, #12355d);
    box-shadow: 0 30px 70px rgba(8,30,60,.20);
}

.about-main-card::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -100px;
    bottom: -100px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.about-card-label {
    color: rgba(255,255,255,.55);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.about-chart {
    position: relative;
    height: 180px;
    margin-top: 60px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.about-chart::before,
.about-chart::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,.08);
}

.about-chart::before {
    top: 45px;
}

.about-chart::after {
    top: 95px;
}

/* Popular Unlisted Shares Section Styling */
.popular-shares-section {
    background: #0b0f19;
}

.text-gold-sub {
    color: #d4af37;
    letter-spacing: 2px;
}

.gold-gradient-text {
    background: linear-gradient(135deg, #f39c12, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Single Full Width Button CSS */
.btn-explore-gold {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

.btn-explore-gold:hover {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
    transform: translateY(-1px);
}

/* Mobile Responsive Adjustments */
@media (max-width: 576px) {
    .btn-explore-gold {
        font-size: 11px;
        padding: 6px 4px;
    }
}

.gold-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #d4af37, transparent);
    border-radius: 2px;
}

/* Glass Card Design */
.share-glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.share-glass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.1);
}

/* Logo & Badges */
.share-logo-box {
    width: 42px;
    height: 42px;
    background: #ffffff;
    border-radius: 10px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-logo-box img {
    max-height: 100%;
    object-fit: contain;
}

.sector-badge {
    font-size: 10px;
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    max-width: 90px;
}

/* Typography */
.share-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 36px;
}

/* Informative Inner Box */
.share-info-box {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.info-label {
    font-size: 10px;
    color: #8a94a6;
    text-uppercase: uppercase;
}

.share-price {
    font-size: 16px;
    font-weight: 700;
    color: #2ed573;
}

.info-value {
    font-size: 11px;
    font-weight: 600;
    color: #e0e0e0;
}

.border-top-dark {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Buttons */
.btn-gold-sm {
    background: linear-gradient(135deg, #d4af37, #f39c12);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 0;
    border-radius: 8px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.btn-gold-sm:hover {
    background: #ffffff;
    color: #000;
}

.btn-outline-glass-sm {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.btn-outline-glass-sm:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #d4af37;
    border-color: #d4af37;
}

/* Mobile Responsive Optimization (Strict 2 Columns) */
@media (max-width: 576px) {
    .share-title {
        font-size: 12px;
    }
    .share-price {
        font-size: 13px;
    }
    .btn-gold-sm, .btn-outline-glass-sm {
        font-size: 11px;
        padding: 5px 0;
    }
}

.chart-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    height: 120px;
    border-top: 3px solid #4d9aff;
    clip-path: polygon(
        0 80%,
        12% 72%,
        25% 77%,
        39% 50%,
        50% 58%,
        64% 32%,
        76% 40%,
        100% 0
    );
}

.about-card-bottom {
    position: absolute;
    left: 38px;
    right: 38px;
    bottom: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-card-bottom small,
.about-card-bottom strong {
    display: block;
}

.about-card-bottom small {
    color: rgba(255,255,255,.5);
    font-size: 11px;
}

.about-card-bottom strong {
    margin-top: 5px;
    color: white;
    font-size: 16px;
}

.about-arrow {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: white;
    font-size: 20px;
}


/* Floating Card */

.about-floating-card {
    position: absolute;
    top: 55px;
    right: -20px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    border-radius: 15px;
    background: white;
    box-shadow: 0 20px 45px rgba(20,40,70,.14);
}

.floating-check {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf5ff;
    color: #0d6efd;
    font-weight: 800;
}

.about-floating-card strong,
.about-floating-card small {
    display: block;
}

.about-floating-card strong {
    font-size: 13px;
}

.about-floating-card small {
    margin-top: 3px;
    color: #667085;
    font-size: 10px;
}


/* Story Badge */

.about-experience {
    position: absolute;
    left: -20px;
    bottom: 50px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 22px;
    border-radius: 15px;
    background: #0d6efd;
    color: white;
    box-shadow: 0 18px 40px rgba(13,110,253,.3);
}

.about-experience strong {
    font-size: 30px;
    line-height: 1;
}

.about-experience span {
    font-size: 12px;
    line-height: 1.15;
}


/* =========================================
   CONTENT
========================================= */

.about-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #0d6efd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.about-tag::before {
    content: "";
    width: 25px;
    height: 2px;
    background: #0d6efd;
}

.about-content h2 {
    max-width: 600px;
    margin: 14px 0 12px;
    color: #07111f;
    font-size: clamp(24px, 4vw, 33px);
    line-height: 1.05;
    letter-spacing: -2.5px;
}

.about-content h2 span {
    color: #0d6efd;
}

.about-intro {
    max-width: 620px;
    color: #263449 !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
}

.about-content > p {
    max-width: 650px;
    color: #667085;
    font-size: 14px;
    line-height: 1.85;
}


/* =========================================
   POINTS
========================================= */

.about-points {
    /* margin-top: 30px; */
    border-top: 1px solid #e7ecf3;
}

.about-point {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid #e7ecf3;
}

.about-point > span {
    color: #0d6efd;
    font-size: 12px;
    font-weight: 800;
}

.about-point h4 {
    margin: 0 0 5px;
    color: #07111f;
    font-size: 15px;
}

.about-point p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================
   BUTTON
========================================= */

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
    padding: 8px 11px;
    border-radius: 50px;
    background: #07111f;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: .3s ease;
}

.about-btn span {
    font-size: 18px;
}

.about-btn:hover {
    background: #0d6efd;
    transform: translateY(-3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .about-grid {
        grid-template-columns: 1fr;
        gap: 0px;
    }

    .about-visual {
        /* max-width: 600px; */
        width: 100%;
        margin: auto;
    }

    .about-content {
        max-width: 700px;
        margin: auto;
    }
}


@media (max-width: 600px) {

    .home-about {
        padding: 30px 0;
    }

    .about-container {
        width: calc(100% - 30px);
    }

    .about-visual {
        /* min-height: 390px; */
    }

    .about-main-card {
        width: calc(100% - 45px);
        min-height: 330px;
        padding: 28px;
    }

    .about-card-bottom {
        left: 28px;
        right: 28px;
        bottom: 28px;
    }

    .about-chart {
        margin-top: 40px;
        height: 140px;
    }

    .about-floating-card {
        right: 0;
        top: 20px;
    }

    .about-experience {
        left: 0;
        bottom: 20px;
    }

    .about-content h2 {
        font-size: 23px;
        letter-spacing: -1.8px;
    }

    .about-intro {
        font-size: 15px !important;
    }
}

.home-about img {border-radius: 30px; filter: drop-shadow(0px 0px 2px black);}

/* =========================================
   CONTACT PAGE
========================================= */

.contact-page {
    overflow: hidden;
    background: #fff;
    color: #172033;
}

.contact-container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}


/* =========================================
   COMMON
========================================= */

.contact-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #0d6efd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.contact-tag::before {
    content: "";
    width: 25px;
    height: 2px;
    background: #0d6efd;
}


/* =========================================
   HERO
========================================= */

.contact-hero {
    position: relative;
    padding: 75px 0 80px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 40%,
            rgba(13,110,253,.12),
            transparent 35%
        ),
        #f7faff;
}

.contact-hero .contact-container {
    min-height: 300px;
    display: flex;
    align-items: center;
    position: relative;
}

.contact-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.contact-hero h1 {
    margin: 17px 0;
    color: #07111f;
    font-size: clamp(45px, 5vw, 68px);
    line-height: 1;
    letter-spacing: -3px;
}

.contact-hero h1 span {
    color: #0d6efd;
}

.contact-hero p {
    max-width: 620px;
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
}

.contact-hero-decoration {
    position: absolute;
    right: 0;
    width: 360px;
    height: 300px;
}

.contact-circle {
    position: absolute;
    border: 1px solid rgba(13,110,253,.15);
    border-radius: 50%;
}

.circle-one {
    width: 300px;
    height: 300px;
}

.circle-two {
    width: 190px;
    height: 190px;
    top: 55px;
    left: 55px;
}

.contact-symbol {
    position: absolute;
    left: 130px;
    top: 105px;
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    border-radius: 25px;
    background: #0d6efd;
    color: white;
    font-size: 35px;
    box-shadow: 0 25px 50px rgba(13,110,253,.3);
}


/* =========================================
   MAIN CONTACT
========================================= */

.contact-main {
    padding: 30px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 75px;
    align-items: start;
}


/* Left */

.contact-info h2 {
    margin: 15px 0 2px;
    color: #07111f;
    font-size: 35px;
    line-height: 1.05;
    letter-spacing: -2px;
}

.contact-info h2 span {
    color: #0d6efd;
}

.contact-description {
    margin: 0 0 15px;
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
}

.contact-info-card {
    display: flex;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid #e8edf3;
}

.contact-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #edf5ff;
    color: #0d6efd;
}

.contact-icon svg {
    width: 24px;
    height: 24px;
}

.contact-info-card small {
    color: #98a2b3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.contact-info-card h3 {
    margin: 5px 0 6px;
    color: #07111f;
    font-size: 15px;
}

.contact-info-card p,
.contact-info-card a {
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.7;
    text-decoration: none;
}

.contact-info-card a:hover {
    color: #0d6efd;
}

.contact-support {
    display: flex;
    gap: 14px;
    margin-top: 30px;
    padding: 18px;
    border-radius: 15px;
    background: #f7faff;
}

.contact-support > span {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    flex: 0 0 35px;
    border-radius: 50%;
    background: #0d6efd;
    color: white;
    font-weight: 800;
}

.contact-support strong {
    font-size: 13px;
}

.contact-support p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 11px;
}


/* =========================================
   QUERY FORM
========================================= */

.query-wrapper {
    padding: 42px;
    border-radius: 25px;
    background: #f7faff;
    border: 1px solid #e6ebf2;
}

.query-form-header h2 {
    margin: 14px 0 10px;
    color: #07111f;
    font-size: 25px;
    letter-spacing: -1.3px;
}

.query-form-header h2 span {
    color: #0d6efd;
}

.query-form-header p {
    margin: 0 0 30px;
    color: #667085;
    font-size: 13px;
    line-height: 1.7;
}

.query-form {
    padding: 30px;
    border-radius: 18px;
    background: white;
    box-shadow: 0 15px 45px rgba(20,40,70,.07);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-size: 11px;
    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dfe5ec;
    outline: none;
    border-radius: 10px;
    padding: 13px 14px;
    background: #fff;
    color: #172033;
    font-family: inherit;
    font-size: 13px;
    transition: .25s ease;
}

.form-group input,
.form-group select {
    height: 46px;
}

.form-group textarea {
    resize: vertical;
    min-height: 125px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #98a2b3;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13,110,253,.08);
}

.form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.consent {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 10px;
}

.consent input {
    accent-color: #0d6efd;
}

.form-bottom button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 14px 20px;
    border: 0;
    border-radius: 50px;
    background: #07111f;
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    transition: .3s ease;
}

.form-bottom button:hover {
    background: #0d6efd;
    transform: translateY(-2px);
}

.form-bottom button span {
    font-size: 17px;
}


/* =========================================
   LOCATION
========================================= */

.location-section {
    padding: 0 0 40px;
}

.location-box {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    min-height: 370px;
    overflow: hidden;
    border-radius: 25px;
    background: #07111f;
}

.location-content {
    padding: 50px;
    color: white;
}

.location-content h2 {
    margin: 15px 0;
    font-size: 38px;
    letter-spacing: -1.5px;
}

.location-content h2 span {
    color: #4d9aff;
}

.location-content p {
    color: rgba(255,255,255,.65);
    font-size: 13px;
    line-height: 1.8;
}

.direction-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    padding: 12px 18px;
    border-radius: 50px;
    background: white;
    color: #07111f;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

.map-placeholder {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            30deg,
            rgba(13,110,253,.07) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(13,110,253,.07) 87.5%
        ),
        #eaf2fa;
    background-size: 55px 55px;
}

.map-grid {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        linear-gradient(90deg, transparent 49%, #b9c9d9 50%, transparent 51%),
        linear-gradient(transparent 49%, #b9c9d9 50%, transparent 51%);
    background-size: 80px 80px;
}

.map-pin {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    display: grid;
    place-items: center;
    border-radius: 50% 50% 50% 0;
    background: #0d6efd;
    color: white;
    font-size: 18px;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-shadow: 0 15px 35px rgba(13,110,253,.35);
}

.map-pin span {
    transform: rotate(45deg);
}

.map-label {
    position: absolute;
    left: 50%;
    top: calc(48% + 55px);
    transform: translateX(-50%);
    padding: 12px 18px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 10px 30px rgba(20,40,70,.12);
    white-space: nowrap;
    text-align: center;
}

.map-label strong,
.map-label small {
    display: block;
}

.map-label strong {
    font-size: 11px;
}

.map-label small {
    margin-top: 3px;
    color: #667085;
    font-size: 9px;
}


/* =========================================
   CTA
========================================= */

.contact-cta {
    padding-bottom: 100px;
}

.contact-cta-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 50px;
    border-radius: 25px;
    background: #f7faff;
    border: 1px solid #e6ebf2;
}

.contact-cta-box h2 {
    margin: 14px 0 0;
    max-width: 650px;
    color: #07111f;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.contact-cta-box h2 span {
    color: #0d6efd;
    display: block;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 15px 22px;
    border-radius: 50px;
    background: #0d6efd;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}

.cta-btn span {
    font-size: 18px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .contact-info {
        max-width: 700px;
    }

    .contact-hero-decoration {
        opacity: .5;
    }

    .location-box {
        grid-template-columns: 1fr;
    }

    .map-placeholder {
        min-height: 330px;
    }
}


@media (max-width: 767px) {

    .contact-container {
        width: calc(100% - 30px);
    }

    .contact-hero {
        padding: 65px 0;
    }

    .contact-hero .contact-container {
        min-height: auto;
    }

    .contact-hero h1 {
        font-size: 44px;
        letter-spacing: -2px;
    }

    .contact-hero-decoration {
        display: none;
    }

    .contact-main {
        padding: 30px 0;
    }

    .contact-info h2 {
        font-size: 26px;
    }

    .query-wrapper {
        padding: 25px;
    }

    .query-form {
        padding: 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .form-bottom button {
        justify-content: center;
    }

    .location-content {
        padding: 35px 25px;
    }

    .contact-cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 35px 25px;
    }

    .cta-btn {
        width: 100%;
        justify-content: center;
    }
}


@media (max-width: 480px) {

    .contact-hero h1 {
        font-size: 38px;
    }

    .query-wrapper {
        padding: 18px;
    }

    .query-form {
        padding: 18px;
    }

    .contact-info-card {
        gap: 13px;
    }

    .location-content h2 {
        font-size: 32px;
    }

    .map-placeholder {
        min-height: 280px;
    }
}

.trade-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.trade-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid rgba(255,255,255,0.12);
}

.trade-action-btn i {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}

.trade-action-btn span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.trade-action-btn strong {
    font-size: 16px;
    font-weight: 700;
}

.trade-action-btn small {
    font-size: 12px;
    opacity: 0.75;
}

/* Call */
.call-btn {
    background: rgba(59, 130, 246, 0.12);
    color: #ffffff;
}

.call-btn i {
    background: #3b82f6;
    color: #ffffff;
}

.call-btn:hover {
    background: rgba(59, 130, 246, 0.22);
    transform: translateY(-2px);
    color: #ffffff;
}

/* WhatsApp */
.whatsapp-btn {
    background: rgba(16, 185, 129, 0.12);
    color: #ffffff;
}

.whatsapp-btn i {
    background: #10b981;
    color: #ffffff;
}

.whatsapp-btn:hover {
    background: rgba(16, 185, 129, 0.22);
    transform: translateY(-2px);
    color: #ffffff;
}

.testimonials-section {
    padding: 30px 0 70px 0;
    background: #f7f9fc;
}

.section-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #3b82f6;
    margin-bottom: 12px;
}

.section-heading h2 {
    font-size: 28px;
    font-weight: 800;
    color: #0b1530;
    margin-bottom: 12px;
}

.section-heading p {
    max-width: 650px;
    margin: auto;
    color: #64748b;
}


/* Google Rating */

.google-rating-box {
    max-width: 420px;
    margin: 14px auto -21px;
    padding: 22px 28px;
    background: #ffffff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .08);
    border: 1px solid #e8edf5;
}

.google-icon {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    font-size: 25px;
}

.google-rating-content {
    flex: 1;
}

.google-label {
    display: block;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 3px 0;
}

.rating-row strong {
    font-size: 26px;
    color: #0f172a;
}

.stars,
.testimonial-stars {
    color: #f5b301;
    letter-spacing: 2px;
}

.google-rating-content small {
    color: #94a3b8;
}


/* Cards */

.testimonial-card {
    position: relative;
    height: 100%;
    padding: 28px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e8edf5;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    transition: .3s ease;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .11);
}

.testimonial-top {
    display: flex;
    align-items: center;
    gap: 13px;
}

.client-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0b1530;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.testimonial-top h5 {
    margin: 0;
    font-size: 16px;
    color: #0f172a;
}

.testimonial-top small {
    color: #94a3b8;
}

.testimonial-stars {
    margin: 20px 0 12px;
    font-size: 15px;
}

.testimonial-card p {
    color: #475569;
    line-height: 1.7;
    margin: 0;
    position: relative;
    z-index: 2;
}

.quote-icon {
    position: absolute;
    right: 22px;
    bottom: 15px;
    font-size: 55px;
    color: #eef2f7;
}

.unlisted-page-banner {
    position: relative;
    overflow: hidden;
    padding: 25px 0 25px;
    background: #198754;
}

.unlisted-page-banner::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 50%;
    right: -160px;
    top: -200px;
}

.unlisted-page-banner::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 50%;
    left: -120px;
    bottom: -180px;
}

.banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 17px;
    border: 1px solid rgba(245,158,11,.45);
    border-radius: 50px;
    background: rgba(245,158,11,.08);
    color: #fbbf24;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.banner-content h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.banner-content p {
    max-width: 720px;
    margin: 15px auto 0;
    color: rgba(255,255,255,.68);
    font-size: 16px;
    line-height: 1.7;
}

.banner-breadcrumb {
    margin-top: 3px;
    font-size: 13px;
    color: rgb(255 255 255);
}

.banner-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

.banner-breadcrumb i {
    margin: 0 8px;
}


/* =====================================================
   MAIN SECTION
===================================================== */

.unlisted-main-section {
    padding: 25px 0 50px;
    background: #f7f9fc;
}


/* =====================================================
   SECTION HEADING
===================================================== */

.unlisted-section-heading {
    text-align: center;
    margin-bottom: 10px;
}

.unlisted-section-heading .eyebrow {
    display: inline-block;
    color: #3b82f6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 9px;
}

.unlisted-section-heading h2 {
    margin: 0;
    color: #0b1530;
    font-size: 34px;
    font-weight: 800;
}

.unlisted-section-heading p {
    margin: 10px auto 0;
    max-width: 650px;
    color: #64748b;
    font-size: 15px;
}


/* =====================================================
   SEARCH BOX
===================================================== */

.share-search-wrapper {
    /* max-width: 760px; */
    margin: 0 auto 18px;
}

.share-search-box {
    position: relative;
    display: flex;
    align-items: center;
    height: 62px;
    padding: 0 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(15,23,42,.07);
    transition: all .25s ease;
}

.share-search-box:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 15px 40px rgba(59,130,246,.13);
}

.share-search-box > i {
    color: #64748b;
    font-size: 20px;
    margin-right: 13px;
}

.share-search-box input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 15px;
}

.share-search-box input::placeholder {
    color: #94a3b8;
}

.clear-search-btn {
    display: none;
    border: 0;
    background: #f1f5f9;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.clear-search-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}


/* =====================================================
   LIST HEADER
===================================================== */

.shares-list-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 25px;
}

.list-eyebrow {
    display: block;
    color: #3b82f6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    margin-bottom: 5px;
}

.shares-list-header h3 {
    margin: 0;
    color: #0b1530;
    font-size: 26px;
    font-weight: 800;
}

.shares-count {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.shares-count strong {
    color: #0b1530;
    font-size: 16px;
}

.shares-count span {
    color: #64748b;
    font-size: 12px;
}


/* =====================================================
   SHARE CARD
===================================================== */

.share-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 17px;
    padding: 19px;
    box-shadow: 0 7px 24px rgba(15,23,42,.055);
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
}

.share-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59,130,246,.25);
    box-shadow: 0 16px 38px rgba(15,23,42,.10);
}


/* Card Top */

.share-card-top {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 63px;
}

.share-logo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border: 1px solid #dbe4ee;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ffffff;
}

.share-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.share-company {
    min-width: 0;
    flex: 1;
}

.share-company h4 {
    margin: 0 0 7px;
    color: #0b1530;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.share-change,
.price-change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.positive {
    background: #dcfce7;
    color: #047857;
}

.negative {
    background: #fee2e2;
    color: #dc2626;
}


/* Info */

.share-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 17px;
    padding: 14px 0;
    border-top: 1px dashed #e5e7eb;
    border-bottom: 1px dashed #e5e7eb;
}

.share-info span,
.share-meta span,
.share-price-row span {
    display: block;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    margin-bottom: 5px;
}

.share-info strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
}

.text-end {
    text-align: right;
}


/* Meta */

.share-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.share-meta strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 750;
}

.share-tag {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background: #e0f2fe;
    color: #0369a1 !important;
    border-radius: 5px;
    font-size: 9px !important;
}


/* Price */

.share-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

.share-price-row strong {
    color: #0b1530;
    font-size: 20px;
    font-weight: 850;
}


/* Buttons */

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

.share-actions button {
    height: 40px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s ease;
}

.share-buy {
    background: #10b981;
}

.share-buy:hover {
    background: #059669;
    transform: translateY(-1px);
}

.share-sell {
    background: #3b82f6;
}

.share-sell:hover {
    background: #2563eb;
    transform: translateY(-1px);
}


/* =====================================================
   NO RESULT
===================================================== */

.no-share-result {
    display: none;
    text-align: center;
    padding: 55px 20px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    margin-top: 10px;
}

.no-share-result i {
    display: block;
    font-size: 38px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.no-share-result h4 {
    color: #0f172a;
    font-size: 19px;
    font-weight: 750;
    margin-bottom: 6px;
}

.no-share-result p {
    color: #64748b;
    margin: 0;
    font-size: 14px;
}


.badge-action-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .6px;
}


.modal-trust-points {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.trust-point-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.70);
    font-size: 12px;
}

.trust-point-item i {
    font-size: 16px;
}


/* =====================================================
   MODAL CALL / WHATSAPP BUTTONS
===================================================== */

.trade-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trade-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 17px;
    border-radius: 13px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.10);
    transition: all .25s ease;
}

.trade-action-btn i {
    width: 47px;
    height: 47px;
    min-width: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 19px;
}

.trade-action-btn span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.trade-action-btn strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.trade-action-btn small {
    color: rgba(255,255,255,.55);
    font-size: 11px;
}


/* Call */

.call-btn {
    background: rgba(59,130,246,.09);
}

.call-btn i {
    background: #3b82f6;
    color: #ffffff;
}

.call-btn:hover {
    background: rgba(59,130,246,.18);
    transform: translateY(-2px);
}


/* WhatsApp */

.whatsapp-btn {
    background: rgba(16,185,129,.09);
}

.whatsapp-btn i {
    background: #10b981;
    color: #ffffff;
}

.whatsapp-btn:hover {
    background: rgba(16,185,129,.18);
    transform: translateY(-2px);
}


@media (max-width: 991px) {

    .unlisted-page-banner {
        padding: 60px 0;
    }

    .unlisted-main-section {
        padding: 60px 0 70px;
    }

}

@media (max-width: 767px) {

    .unlisted-page-banner {
        padding: 8px 0;
    }

    .banner-content h1 {
        font-size: 35px;
    }

    .banner-content p {
        font-size: 14px;
    }

    .unlisted-main-section {
        padding: 10px 0 40px;
    }

    .unlisted-section-heading h2 {
        font-size: 24px;
    }

    .share-search-box {
        height: 56px;
    }

    .shares-list-header {
        align-items: center;
    }

    .shares-list-header h3 {
        font-size: 21px;
    }

    .shares-count {
        padding: 7px 10px;
    }

    #tradeLeadModal .modal-dialog {
        margin: 12px;
    }

}

@media (max-width: 420px) {

    .shares-list-header {
        gap: 10px;
    }

    .shares-count span {
        display: none;
    }

    .share-card {
        padding: 17px;
    }

}

.stock-page {
            max-width: 1240px;
            margin: auto;
            padding: 45px 20px 80px;
        }

        /* =========================================
           HERO
        ========================================= */

        .stock-hero {
            position: relative;
            overflow: hidden;
            border-radius: 26px;
            padding: 38px;
            background:
                radial-gradient(circle at 85% 10%, rgba(48, 190, 123, .18), transparent 28%),
                linear-gradient(135deg, #071a35, #0d3154 65%, #103e58);
            color: #fff;
            margin-bottom: 25px;
        }

        .stock-hero::after {
            content: "";
            position: absolute;
            width: 280px;
            height: 280px;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 50%;
            right: -90px;
            bottom: -130px;
        }

        .hero-top {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: flex-start;
        }

        .company-label {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .company-label span:first-child {
            font-size: 13px;
            font-weight: 700;
            color: #b9c8da;
            text-transform: uppercase;
            letter-spacing: .6px;
        }

        .active-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(44, 211, 129, .14);
            color: #45e39a;
            border: 1px solid rgba(69,227,154,.25);
            border-radius: 50px;
            padding: 5px 11px;
            font-size: 11px;
            font-weight: 700;
        }

        .active-badge::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #45e39a;
        }

        .company-title {
            font-size: clamp(22px, 5vw, 35px);
            line-height: 1.05;
            font-weight: 800;
            letter-spacing: -1.8px;
            margin-bottom: 8px;
        }

        .company-symbol {
            color: #a9bad0;
            font-size: 15px;
        }

        .hero-price-area {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .price-box {
            min-width: 150px;
            padding: 14px 18px;
            border-radius: 15px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.14);
        }

        .price-box small {
            display: block;
            font-size: 10px;
            color: #b8c7d9;
            text-transform: uppercase;
            letter-spacing: .7px;
            margin-bottom: 2px;
        }

        .price-box strong {
            font-size: 27px;
            line-height: 1.2;
        }

        .return-box {
            min-width: 130px;
            padding: 14px 18px;
            border-radius: 15px;
            background: rgba(41, 210, 125, .1);
            border: 1px solid rgba(71, 226, 151, .25);
        }

        .return-box small {
            display: block;
            font-size: 10px;
            color: #a9cbbd;
            text-transform: uppercase;
            margin-bottom: 2px;
        }

        .return-box strong {
            font-size: 25px;
            color: #48df95;
        }

        .trade-buttons {
            display: flex;
            gap: 8px;
        }

        .trade-buttons button {
            border: 0;
            border-radius: 11px;
            padding: 13px 20px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: .25s ease;
        }

        .buy-btn {
            background: #fff;
            color: #0c3152;
        }

        .sell-btn {
            background: transparent;
            border: 1px solid rgba(255,255,255,.35) !important;
            color: #fff;
        }

        .trade-buttons button:hover {
            transform: translateY(-2px);
        }

        /* =========================================
           PRICE STRIP
        ========================================= */

        .price-strip {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin-bottom: 25px;
        }

        .price-stat {
            background: #fff;
            border: 1px solid #e6eaf0;
            border-radius: 17px;
            padding: 21px;
            position: relative;
            overflow: hidden;
        }

        .price-stat::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: #163f68;
        }

        .price-stat.low::before {
            background: #ef5350;
        }

        .price-stat.cap::before {
            background: #30b97b;
        }

        .price-stat small {
            display: block;
            color: #7a8799;
            font-size: 11px;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .price-stat strong {
            font-size: 24px;
            font-weight: 800;
            color: #102b49;
        }

        .price-stat.low strong {
            color: #ed4545;
        }

        /* =========================================
           RETURN BAR
        ========================================= */

        .latest-return {
            background: #fff;
            border: 1px solid #e5e9ef;
            border-radius: 18px;
            padding: 20px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .latest-return small {
            display: block;
            color: #7b8797;
            font-size: 11px;
            margin-bottom: 3px;
        }

        .latest-return strong {
            color: #19a968;
            font-size: 28px;
        }

        .return-icon {
            width: 48px;
            height: 48px;
            border-radius: 13px;
            background: #ecfbf4;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #18ad69;
            font-size: 25px;
            font-weight: 800;
        }

        /* =========================================
           SECTION COMMON
        ========================================= */

        .section {
            margin-bottom: 28px;
        }

        .section-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .section-heading h2 {
            font-size: 25px;
            color: #102d4d;
            letter-spacing: -.6px;
        }

        .section-heading span {
            color: #8793a3;
            font-size: 12px;
        }

        /* =========================================
           COMPANY OVERVIEW
        ========================================= */

        .company-overview {
            display: grid;
            grid-template-columns: 1fr 290px;
            gap: 20px;
            background: #fff;
            border-radius: 22px;
            border: 1px solid #e5e9ef;
            padding: 28px;
        }

        .overview-main h2 {
            color: #102d4d;
            font-size: 25px;
            margin-bottom: 10px;
        }

        .overview-main p {
            color: #69788b;
            font-size: 14px;
            max-width: 780px;
        }

        .overview-highlight {
            border-radius: 17px;
            padding: 21px;
            background: #eef7ff;
            border: 1px solid #dbeafa;
        }

        .overview-highlight small {
            display: block;
            font-size: 10px;
            color: #738399;
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        .overview-highlight strong {
            display: block;
            color: #143a60;
            font-size: 21px;
        }

        .overview-highlight span {
            font-size: 12px;
            color: #738399;
        }

        /* =========================================
           STRENGTH & RISK
        ========================================= */

        .strength-risk {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .insight-card {
            border-radius: 21px;
            padding: 26px;
            border: 1px solid;
        }

        .strength-card {
            background: #effbf5;
            border-color: #c7eed9;
        }

        .risk-card {
            background: #fff4f3;
            border-color: #f4cccc;
        }

        .insight-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .insight-title .icon {
            width: 34px;
            height: 34px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            font-weight: 800;
            font-size: 18px;
        }

        .strength-card .icon {
            color: #0da45f;
            background: #d9f7e7;
        }

        .risk-card .icon {
            color: #e43b3b;
            background: #ffe0df;
        }

        .insight-title h3 {
            font-size: 22px;
            color: #102b49;
        }

        .insight-list {
            list-style: none;
        }

        .insight-list li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 10px;
            font-size: 13px;
            color: #394d63;
        }

        .insight-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
        }

        .strength-card .insight-list li::before {
            background: #16a765;
        }

        .risk-card .insight-list li::before {
            background: #ed4848;
        }

        /* =========================================
           KEY INFORMATION
        ========================================= */

        .key-info-section {
            background: #102e4d;
            border-radius: 23px;
            padding: 30px;
            color: #fff;
        }

        .key-info-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 22px;
        }

        .key-info-header h2 {
            font-size: 25px;
        }

        .key-info-header span {
            font-size: 11px;
            color: #9fb4c9;
            text-transform: uppercase;
            letter-spacing: .8px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 13px;
        }

        .info-item {
            padding: 18px;
            background: rgba(255,255,255,.065);
            border: 1px solid rgba(255,255,255,.09);
            border-radius: 14px;
        }

        .info-item small {
            display: block;
            color: #9db1c5;
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: .7px;
            margin-bottom: 4px;
        }

        .info-item strong {
            color: #fff;
            font-size: 13px;
            word-break: break-word;
        }

        /* =========================================
           FINANCIAL FUNDAMENTALS
        ========================================= */

        .financial-card {
            background: #fff;
            border: 1px solid #e5e9ef;
            border-radius: 23px;
            padding: 30px;
        }

        .financial-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .financial-header h2 {
            color: #102d4d;
            font-size: 25px;
        }

        .financial-header span {
            padding: 6px 10px;
            background: #eef5fb;
            color: #55728e;
            font-size: 10px;
            border-radius: 50px;
        }

        .fundamentals-table {
            width: 100%;
            border-collapse: collapse;
        }

        .fundamentals-table tr {
            border-bottom: 1px solid #edf0f4;
        }

        .fundamentals-table tr:last-child {
            border-bottom: none;
        }

        .fundamentals-table td {
            padding: 14px 8px;
            font-size: 13px;
        }

        .fundamentals-table td:nth-child(1),
        .fundamentals-table td:nth-child(3) {
            color: #66778b;
            font-weight: 500;
            width: 25%;
        }

        .fundamentals-table td:nth-child(2),
        .fundamentals-table td:nth-child(4) {
            color: #102d4d;
            font-weight: 700;
            width: 25%;
        }

        /* =========================================
           BOTTOM CTA
        ========================================= */

        .investment-cta {
            margin-top: 28px;
            padding: 28px 30px;
            border-radius: 22px;
            background: linear-gradient(100deg, #edf8f3, #eef5fc);
            border: 1px solid #dce9e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .investment-cta h3 {
            color: #102d4d;
            font-size: 21px;
            margin-bottom: 4px;
        }

        .investment-cta p {
            color: #718196;
            font-size: 12px;
        }

        .cta-button {
            white-space: nowrap;
            background: #113b62;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 13px 22px;
            font-weight: 700;
            cursor: pointer;
        }

        /* =========================================
           RESPONSIVE
        ========================================= */

        @media (max-width: 900px) {

            .stock-page {
                padding: 25px 15px 60px;
            }

            .hero-top {
                flex-direction: column;
            }

            .hero-price-area {
                width: 100%;
                justify-content: flex-start;
            }

            .price-strip {
                grid-template-columns: repeat(2, 1fr);
            }

            .company-overview {
                grid-template-columns: 1fr;
            }

            .info-grid {
                grid-template-columns: repeat(2, 1fr);
            }

        }

        @media (max-width: 650px) {

            .stock-page {
                padding: 15px 12px 45px;
            }

            .stock-hero {
                padding: 25px 20px;
                border-radius: 20px;
            }

            .company-title {
                font-size: 28px;
                letter-spacing: -1px;
            }

            .hero-price-area {
                display: grid;
                grid-template-columns: 1fr 1fr;
                width: 100%;
            }

            .price-box,
            .return-box {
                min-width: 0;
                width: 100%;
            }

            .trade-buttons {
                grid-column: 1 / -1;
                width: 100%;
            }

            .trade-buttons button {
                flex: 1;
            }

            .price-strip {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

            .price-stat {
                padding: 17px 15px;
                border-radius: 14px;
            }

            .price-stat strong {
                font-size: 20px;
            }

            .latest-return {
                padding: 17px;
                border-radius: 15px;
            }

            .latest-return strong {
                font-size: 24px;
            }

            .company-overview,
            .insight-card,
            .financial-card,
            .key-info-section {
                padding: 21px;
            }

            .strength-risk {
                grid-template-columns: 1fr;
                gap: 13px;
            }

            .section-heading h2,
            .overview-main h2,
            .financial-header h2,
            .key-info-header h2 {
                font-size: 21px;
            }

            .info-grid {
                grid-template-columns: 1fr 1fr;
                gap: 9px;
            }

            .info-item {
                padding: 14px 12px;
            }

            .info-item strong {
                font-size: 11px;
            }

            /*
               Mobile Financial Table
               2-column layout
            */

            .financial-card {
                overflow: hidden;
            }

            .fundamentals-table,
            .fundamentals-table tbody,
            .fundamentals-table tr {
                display: block;
                width: 100%;
            }

            .fundamentals-table tr {
                display: grid;
                grid-template-columns: 1fr 1fr;
                border: 0;
                gap: 9px;
                margin-bottom: 9px;
            }

            .fundamentals-table td {
                width: auto !important;
                display: flex;
                flex-direction: column;
                justify-content: center;
                background: #f7f9fc;
                border: 1px solid #edf0f4;
                border-radius: 11px;
                padding: 12px;
            }

            .fundamentals-table td:nth-child(1),
            .fundamentals-table td:nth-child(3) {
                font-size: 9px;
                text-transform: uppercase;
                color: #8290a0;
                letter-spacing: .3px;
            }

            .fundamentals-table td:nth-child(2),
            .fundamentals-table td:nth-child(4) {
                font-size: 13px;
            }

            .investment-cta {
                flex-direction: column;
                align-items: flex-start;
                padding: 21px;
            }

            .cta-button {
                width: 100%;
            }

        }

        @media (max-width: 400px) {

            .hero-price-area {
                grid-template-columns: 1fr;
            }

            .trade-buttons {
                grid-column: auto;
            }

            .price-strip {
                grid-template-columns: 1fr;
            }

            .info-grid {
                grid-template-columns: 1fr;
            }

        }
		
		/* =========================================
   DETAILS PAGE CONTAINER
========================================= */

.details-page {
    width: 100%;
    padding: 45px 20px 80px;
}

.details-container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

/* Desktop large screens */
@media (min-width: 1200px) {
    .details-container {
        max-width: 1140px;
    }
}

/* Large desktop */
@media (min-width: 1400px) {
    .details-container {
        max-width: 1200px;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .details-page {
        padding: 30px 18px 60px;
    }

    .details-container {
        max-width: 100%;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .details-page {
        padding: 18px 12px 45px;
    }
}


 
    /* Mobile Responsive Optimizations (2 Columns Grid) */
    @media (max-width: 575.98px) {
        .grid-shares-row {
            --bs-gutter-x: 0.5rem;
            --bs-gutter-y: 0.75rem;
        }

        .market-share-card {
            padding: 10px !important;
            border-radius: 10px;
        }

        .company-logo-box {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px;
        }

        .company-name {
            font-size: 0.8rem !important;
            line-height: 1.2;
        }

        .stat-badge {
            font-size: 0.65rem !important;
            padding: 2px 5px !important;
        }

        .metric-row small {
            font-size: 0.6rem !important;
        }

        .metric-row strong, 
        .price-value {
            font-size: 0.75rem !important;
        }

        .card-action-btns {
            gap: 4px !important;
            margin-top: 8px !important;
        }

        .btn-trade {
            padding: 4px 6px !important;
            font-size: 0.75rem !important;
        }
    }
    
    .top-bar-center {
    flex: 1;
    min-width: 0;
    margin: 0 30px;
    overflow: hidden;
}

.top-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.top-marquee-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    width: max-content;
    animation: topMarquee 28s linear infinite;
}

.top-marquee-track span {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #ffffff;
    letter-spacing: 0.2px;
    margin-right: 35px;
}

.top-marquee-track strong {
    color: #ffffff;
    font-weight: 700;
}

.top-marquee-track .text-gold {
    color: #d4af37;
}

.marquee-separator {
    color: #d4af37 !important;
    font-size: 18px !important;
    margin-right: 35px !important;
}

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

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

/* Pause on hover */
.top-marquee:hover .top-marquee-track {
    animation-play-state: paused;
}


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

@media (max-width: 991px) {

    .top-bar-center {
        margin: 0 15px;
    }

    .top-marquee-track span {
        font-size: 12px;
        margin-right: 25px;
    }

    .marquee-separator {
        margin-right: 25px !important;
    }
}

@media (max-width: 767px) {

    .top-bar-left,
    .top-bar-right {
        display: none;
    }

    .top-bar-center {
        width: 100%;
        margin: 0;
    }

    .top-utility-bar .py-2 {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .top-marquee-track span {
        font-size: 11px;
        margin-right: 20px;
    }

    .marquee-separator {
        font-size: 15px !important;
        margin-right: 20px !important;
    }
}