:root {
    --primary-green: #0B1F3A;
    --accent-green: #C9A84C;
    --mint: #F9F6F0;
    --mint-light: #d1f4e1;
    --cream: #f9f6f0;
    --text-dark: #2D2D2D;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background-color: white;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1500px;
}

.primary-text {
    color: var(--primary-green);
    /* letter-spacing: -1px; */
}

.bg-cream {
    background-color: var(--cream);
}

.bg-lt-blue {
    background-color: #0B1F3A14 !important;
}

.border-top {
    border-top: var(--bs-border-width) var(--bs-border-style) #d3d4d9 !important;
}

.bg-mint {
    background-color: var(--mint);
}


.text-primary-green {
    color: var(--primary-green);
}

.text-primary-black {
    color: #2D2D2D;
}

.text-primary-1 {
    --bs-text-opacity: 1;
    color: var(--primary-green) !important;
}
.text-primary-2 {
    --bs-text-opacity: 1;
    color: #2D2D2D !important;
}

.text-dark-blue {
    --bs-text-opacity: 1;
    color: #0B1F3A !important;
}

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

.fw-lt-bold {
    font-weight: 500;
}

.top-bar {
    background-color: var(--primary-green);
    color: white;
    font-size: 0.85rem;
}

.top-bar a {
    color: white;
    text-decoration: underline;
}

.badge-pill {
    background: var(--primary-green);
    color: white;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-primary-green {
    background-color: var(--primary-green);
    color: white;
    border: none;
    transition: 0.3s;
    opacity: 1 !important;
    transform: translate(0px, 0px) !important;
}

.btn-primary-green:hover {
    background-color: #013d35;
    transform: translateY(-2px);
    color: white;
}

/* Hero Grid */
.hero-col {
    flex: 1;
    min-width: 150px;
}

.hero-col img {
    height: 480px;
    width: 100%;
    object-fit: cover;
}

/* Cards (Features) */
.feature-card {
    transition: 0.4s;
    background: #faf9f6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.icon-circle {
    width: 50px;
    height: 50px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    margin-left: -5px;
}

.feature-img-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    margin: 0 -1.5rem -1.5rem -1.5rem;
    padding-top: 2rem;
}

.feature-img-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}

/* Stacked Cards Section */
.stacked-cards-wrapper {
    position: relative;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.s-card {
    position: absolute;
    width: 320px;
    padding: 40px;
    border-radius: 24px;
    text-align: left;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.s-card-1 {
    background: #fce7b2;
    z-index: 1;
}

.s-card-2 {
    background: #ffcb7e;
    z-index: 2;
}

.s-card-main {
    background: #f5cf8e;
    width: 450px;
    z-index: 3;
}

/* Banner Mint Section */
.banner-mint-section {
    background-color: var(--mint-light);
    color: var(--primary-green);
}

.service-check-card {
    background: var(--mint);
    border: none;
    color: var(--primary-green);
}

.x-small {
    font-size: 0.75rem;
}

/* Play Button on Video */
.play-video-btn {
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 16px 8px 12px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.play-video-btn:hover {
    background: #fff;
    transform: scale(1.05);
}

.play-icon-circle {
    width: 28px;
    height: 28px;
    background: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    padding-left: 2px;
}

/* Testimonial Mask */
.testimonial-img-mask {
    width: 300px;
    height: 400px;
    overflow: hidden;
    border-radius: 150px 150px 0 0;
    margin: 0 auto;
}

.testimonial-img-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grayscale {
    filter: grayscale(1);
}

/* Accordion */
.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--primary-green);
    box-shadow: none;
}

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

@media (max-width: 768px) {
    .hero-grid {
        flex-wrap: wrap;
    }

    .stacked-cards-wrapper {
        height: auto;
        flex-direction: column;
        gap: 20px;
    }

    .s-card {
        position: relative;
        width: 100% !important;
        transform: none !important;
    }
}

.hero-parallax-slider {
    width: 100%;
    overflow: hidden;
    padding: 80px 0;
    background: #fff;
}

.slider-container {
    width: 100%;
}

.slider-track {
    display: flex;
    gap: 20px;
    width: max-content;
}

.parallax-item {
    width: 350px;
    height: 500px;
    border-radius: 24px;
    overflow: hidden;
    flex-shrink: 0;
}

.parallax-item img {
    width: 100%;
    height: 140%;
    object-fit: cover;
    display: block;
}

/* Base starting offsets */
.parallax-up img {
    transform: translateY(-15%);
}

.parallax-down img {
    transform: translateY(0%);
}

.parallax-grid {
    display: flex;
    gap: 20px;
    align-items: center;
    width: max-content;
    /* Important: prevents items from squishing */
}

.parallax-item {
    flex: 0 0 350px;
    /* Give each image a fixed width instead of flex 1 */
    height: 550px;
    border-radius: 24px;
    overflow: hidden;
}

.slider-section {
    /* background-color: #f9f6f0; Cream background from template */
    position: relative;
    padding: 80px 0;
}

.slider-container {
    width: 100%;
    overflow: hidden;
    cursor: grab;
}

.slider-track {
    display: flex;
    gap: 20px;
    /* Spacing between cards */
    width: max-content;
}

.slide-card {
    width: 340px;
    /* Exact size requested */
    height: 420px;
    /* Exact size requested */
    flex-shrink: 0;
    border-radius: 24px;
    /* Soft rounded corners from design */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

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

.slide-card:hover img {
    transform: scale(1.05);
}

/* Floating UI from Screenshot */
.floating-buy-ui {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 10;
}

.buy-tag {
    background: #000;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 220px;
}

.custom-tag {
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Custom Button Style */
.btn-primary-green {
    background-color: #0B1F3A !important;
    /* Exact Dark Green from screenshot */
    color: #ffffff !important;
    border: none;
    font-weight: 500;
    transition: all 0.3s ease;
    z-index: 10;
    position: relative;
}

.btn-primary-green:hover {
    background-color: #013d35 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: #ffffff !important;
}

/* Ensure the text content is on top of any background elements */
.hero-text-content {
    position: relative;
    z-index: 5;
}

/* Styling for the badge and primary text */
.primary-text {
    color: #0B1F3A;
}

.badge-pill {
    background-color: #f1f3f1;
    color: #0B1F3A;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
}

/* Sampler Fixes */
.btn-primary-green {
    background-color: #0B1F3A !important;
    color: #000 !important;
    border: none;
    font-weight: 400;
    transition: all 0.3s ease;
    z-index: 999;
    /* Boost z-index */
    position: relative;
    opacity: 1;
    /* Ensure default is visible */
    visibility: visible;
}

.btn-primary-green:hover {
    background-color: #061325 !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.hero-text-content {
    position: relative;
    z-index: 10;
}

/* Fix for Hero height - ensure section has height to show button */
.hero-section {
    /* min-height: 500px; */
    padding-bottom: 5px !important;
}

/* Ensure font displays correctly */
body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background-color: white;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Logo Trust Section Styles */
.logo-trust-section {
    background-color: #f9f6f0;
    /* The cream background */
    padding: 80px 0;
}

.trust-text {
    color: #0B1F3A;
    /* Dark green */
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0;
}

.logo-grid-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.logo-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-item img {
    height: 32px;
    /* Standardizing logo icon height */
    width: auto;
    /* This filter forces the icons to the specific dark green color if they are black SVGs */
    filter: brightness(0) saturate(100%) invert(18%) sepia(34%) saturate(1636%) hue-rotate(125deg) brightness(91%) contrast(101%);
}

.logo-name {
    color: #0B1F3A;
    font-size: 1.4rem;
    font-weight: 500;
    /* letter-spacing: -0.5px; */
}

.logo-separator {
    width: 1px;
    height: 40px;
    background-color: #0B1F3A;
    opacity: 0.15;
    /* Subtle vertical lines from the screenshot */
    margin: 0 15px;
}

/* Responsive adjustment */
@media (max-width: 991px) {
    .logo-separator {
        display: none;
        /* Hide separators on mobile for better wrapping */
    }

    .logo-grid-wrapper {
        gap: 40px;
    }
}



:root {
    --primary-green: #0B1F3A;
    --text-muted: #2D2D2D;
    --bg-cream: #F9F7F2;
}

.bg-cream {
    background-color: var(--bg-cream);
}

.feature-card {
    background: #ffffff;
    border-radius: 32px;
    /* Very large rounding */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Clips the bottom image to the card's radius */
    border: 1px solid #dedede;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(1, 81, 71, 0.08);
}

.card-body-content {
    padding: 40px 40px 20px 40px;
    /* Generous top/side padding */
    flex-grow: 1;
}

.card-icon {
    margin-bottom: 30px;
    height: 40px;
    display: flex;
    align-items: center;
}

.card-title {
    color: var(--primary-green);
    font-size: 24px !important;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    /* letter-spacing: -0.5px; */
}

.card-text {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
    font-weight: 400;
}

.read-more {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.read-more .arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.read-more:hover .arrow {
    transform: translateX(3px);
}

.card-img-container {
    width: 100%;
    height: 300px;
    margin-top: auto;
    /* Pushes to bottom */
    overflow: hidden;
}

.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}

.service-overlay-div {
    background-image: linear-gradient(180deg, var(--🎨-color--orange-100), transparent);
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0% auto auto 0%;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .card-body-content {
        padding: 20px;
    }

    .card-title {
        font-size: 22px !important;
    }
}

:root {
    --primary-green: #0B1F3A;
    --card-bg: #F9F7F2;
    /* Exact cream color */
    --radius: 32px;
    /* Large rounded corners */
}

.premium-feature-card {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    height: 540px;
    /* Fixed height to match the screenshot proportions */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* This clips the bottom image to the radius */
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.premium-feature-card:hover {
    transform: translateY(-12px);
}

.card-top-content {
    padding: 40px;
    flex-shrink: 0;
}

.read-more-link {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* letter-spacing: -0.2px; */
}

.read-more-link .chevron {
    font-size: 1.3rem;
    line-height: 1;
    margin-top: -2px;
    transition: transform 0.2s ease;
}

.read-more-link:hover .chevron {
    transform: translateX(4px);
}

/* THE BOTTOM IMAGE BOX */
.card-image-box {
    width: 100%;
    height: 100%;
    /* Fills the remaining space */
    position: relative;
    margin-top: auto;
}

/* Subtle fade effect at the top of the image */
.card-image-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    /* Transition height */
    background: linear-gradient(to bottom, var(--card-bg) 0%, rgba(249, 247, 242, 0) 100%);
    z-index: 2;
}

.card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Slight desaturation for that organic film look */
    filter: saturate(0.9) contrast(1.05);
}

/* Responsive Gutter fix */
@media (max-width: 768px) {
    .premium-feature-card {
        height: 480px;
    }
}

.card-img-container {
    width: 100%;
    height: 300px;
    /* Force height */
    margin-top: auto;
    overflow: hidden;
    background-color: #f1f3f1;
    /* Placeholder color while loading */
}

.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1 !important;
    /* Ensure visibility */
}

:root {
    --primary-green: #0B1F3A;
    --cream: #F9F7F2;
    --why-yellow: #fdd086;
}

.bg-cream {
    background-color: var(--cream);
}

.primary-green-text {
    color: var(--primary-green);
}

.py-100 {
    padding: 120px 0 !important;
}

.py-70 {
    padding: 70px 0 !important;
}

.py-80 {
    padding: 80px 0 !important;
}

.py-40 {
    padding: 40px 0 !important;
}

.dot-top {
    width: 12px;
    height: 12px;
    background-color: var(--primary-green);
    border-radius: 50%;
    margin: 0 auto;
}

/* Card Styling */
.why-card {
    background-color: var(--why-yellow);
    border-radius: 32px;
    padding: 50px 40px;
    color: var(--primary-green);
    transition: transform 0.3s ease;
}

.why-icon {
    margin-bottom: 40px;
    color: var(--primary-green);
}

.why-card h3 {
    font-size: 2rem;
    line-height: 1.1;
    /* letter-spacing: -1px; */
}

.why-card p {
    line-height: 1.6;
    margin-bottom: 0;
}

/* Desktop stacking base state - only applies for larger screens */
@media (min-width: 992px) {
    .why-card-anim {
        position: relative;
        z-index: 1;
    }

    #card2 {
        z-index: 10;
    }

    /* Center card on top */
}


:root {
    --primary-green: #0B1F3A;
    --bg-cream: #F9F7F2;
    --why-orange: #fdd086;
}

.why-choose-section {
    background-color: var(--bg-cream);
    padding: 120px 0;
}

.scroll-dot {
    width: 14px;
    height: 14px;
    background-color: var(--primary-green);
    border-radius: 50%;
    margin: 0 auto;
}

.why-card {
    background-color: var(--why-orange);
    border-radius: 40px;
    /* Large corner radius as per screenshot */
    padding: 60px 45px;
    color: var(--primary-green);
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.card-icon {
    margin-bottom: 40px;
}

.why-card h3 {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 600;
    /* letter-spacing: -1px; */
}
@media (max-width: 768px) {
    .why-card h3 {
        font-size: 22px;
    }
}

.why-card p {
    font-size: 1.05rem;
    line-height: 1.5;
}

.primary-text {
    color: var(--primary-green);
}

/* Ensure cards overlap on center for the initial animation frame */
@media (min-width: 992px) {
    .cards-stack-wrapper {
        perspective: 1000px;
    }
}

/* Ensure the wrapper handles the perspective for the fan */
.cards-stack-wrapper {
    position: relative;
    padding: 60px 0;
    perspective: 1200px;
}

/* Force the side cards behind the center card initially */
@media (min-width: 992px) {
    #centerCard {
        z-index: 5;
        position: relative;
    }

    #leftCard,
    #rightCard {
        z-index: 1;
        position: relative;
    }
}

/* Correcting the Orange for Why-Choose */
.why-card {
    background-color: #ffffff !important;
    /* Exact orange from screenshot */
    border-radius: 40px;
    padding: 60px 45px;
    color: #0B1F3A;
    height: 100%;
    border: 1px solid #0b1f3a57;
}

/* Ensure images in the slider don't have JS-added opacity 0 */
.slide-card img {
    opacity: 1 !important;
    visibility: visible !important;
}

.stats-section {
    background-color: #F9F7F2;
    padding: 40px 0;
}

.stat-item {
    border-left: 1px solid rgba(1, 81, 71, 0.15);
    /* Subtle vertical line */
    padding-left: 40px;
}

/* Ensure the layout looks clean on mobile */
@media (max-width: 767px) {
    .stat-item {
        border-left: none;
        border-bottom: 1px solid rgba(1, 81, 71, 0.1);
        padding: 40px 0;
    }

    .stat-item:last-child {
        border-bottom: none;
    }
}

.stat-number {
    font-size: 5rem;
    /* Large impact numbers */
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1;
    /* letter-spacing: -2px; */
}

.stat-title {
    color: var(--primary-green);
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.stat-desc {
    color: var(--primary-green);
    opacity: 0.8;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 220px;
    /* Forces the text to wrap like the screenshot */
}

:root {
    --primary-green: #0B1F3A;
    --cream-bg: #f9f6f0;
}

.bg-cream {
    background-color: var(--cream-bg);
}

.primary-text {
    color: var(--primary-green);
}

.py-100 {
    padding: 120px 0;
}

.small-label {
    color: #2D2D2D;
    font-weight: 500;
    font-size: 0.9rem;
    /* letter-spacing: 0.5px; */
}

.display-3 {
    line-height: 1.1;
    /* letter-spacing: -2px; */
}

.value-card {
    padding: 30px;
    border-radius: 24px;
    transition: all 0.4s ease;
    height: 100%;
    /* Initially transparent, becomes very subtle on hover like the screenshot */
    background: transparent;
}

.value-card:hover {
    background: rgba(1, 81, 71, 0.03);
    transform: translateY(-5px);
}

.value-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
}

.explore-link {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: 0.3s;
}

.explore-link:hover {
    /* letter-spacing: 0.5px; */
}

/* Ensure paragraph width matches screenshot layout */
.text-muted {
    line-height: 1.6;
    font-size: 16px;
    color: #2D2D2D !important;
}

.text-muted-1 {
    line-height: 1.6;
    font-size: 16px;
    color: #2D2D2D !important;
}


/* Ensure the values section has enough height for a good scroll feel */
.values-section {
    position: relative;
    padding: 100px 0;
    /* Increased padding for better scroll "runway" */
}

/* Pre-set the cards to be invisible so GSAP can take over cleanly */
.value-card-item {
    will-change: transform, opacity;
}

/* Optional: Add a subtle transition to the card background on hover 
   that doesn't interfere with the scroll animation */
.value-card {
    transition: background-color 0.3s ease;
}

/* WHY CHOOSE SECTION FIXES */
.why-choose-section {
    background-color: #0B1F3A14 !important;
    /* min-height: 100vh; Set to viewport height for pinning */
    display: flex;
    align-items: center;
    overflow: visible !important;
    /* Allow cards to fan out of container if needed */
}

.cards-stack-wrapper {
    width: 100%;
    position: relative;
    z-index: 5;
}

/* Ensure the center card is always on top during the fan */
#centerCard {
    z-index: 10;
}

#leftCard,
#rightCard {
    z-index: 5;
}

/* VALUES SECTION FIXES */
.values-section {
    padding: 140px 0;
    overflow: hidden;
}

.value-card-item {
    will-change: transform, opacity;
}

.value-card {
    transition: background-color 0.3s ease;
    border-radius: 24px;
    padding: 30px;
}

:root {
    --primary-green: #0B1F3A;
    --cream-bg: #f9f6f0;
}

.bg-cream {
    background-color: var(--cream-bg);
}

.primary-text {
    color: #0B1F3A;
}

.py-120 {
    padding: 120px 0;
}

.small-label {
    color: #2D2D2D;
    font-weight: 500;
    font-size: 0.9rem;
    /* letter-spacing: 0.5px; */
    text-transform: uppercase;
}


.display-3 {
    line-height: 110% !important;
    /* letter-spacing: -5px !important; */
    font-size: 3rem !important;
    font-weight: 500 !important;
    /* Large impact heading */
}

@media (max-width: 768px) {
    .display-3 {
        font-size: 36px !important;
        line-height: 120% !important;
    }
}

.display-4 {
    line-height: 110% !important;
    /* letter-spacing: -5px !important; */
    font-size: 32px !important;
    font-weight: 500 !important;
    /* Large impact heading */
}

.value-card {
    padding: 30px;
    border-radius: 24px;
    transition: background-color 0.4s ease;
    height: 100%;
    background: #fff;
}

.value-card:hover {
    background: rgba(1, 81, 71, 0.04);
    /* Subtle hover background like screenshot */
}

.value-icon {
    height: 60px;
    display: flex;
    align-items: center;
}

.explore-link {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
}

.text-color:hover {
    color: #0b1f3a !important;
    font-weight: 500;
}

.text-color {
    color: #2D2D2D;
}


/* About Us Specific Styles */
.about-section {
    background-color: #D1F4E1;
    /* Exact mint background */
}

.ls-tight {
    /* letter-spacing: -2.5px; */
    line-height: 1.05;
}

.about-description {
    font-size: 18px;
    line-height: 1.6;
    color: #2D2D2D;
    opacity: 0.9;
}

/* Floating Dot */
.about-moving-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #4A5A53;
    border-radius: 50%;
    z-index: 5;
    top: 15%;
    left: 45%;
}

/* Custom Check Cards */
.about-feature-card {
    background-color: #F9F6F0;
    /* Brighter mint for cards */
    border-radius: 28px;
    padding: 40px;
    height: 100%;
    transition: transform 0.3s ease;
}

.about-feature-card:hover {
    transform: translateY(-8px);
}

.check-icon-box {
    width: 32px;
    height: 32px;
    background-color: #0B1F3A;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-icon-box svg {
    width: 18px;
    height: 18px;
}

.about-feature-card h4 {
    font-size: 1.6rem;
    line-height: 1.2;
}


.about-section {
    background-color: #D1F4E1;
    overflow: hidden;
}

.about-feature-card {
    background-color: #F9F6F0;
    border-radius: 28px;
    padding: 40px;
    height: 100%;
    /* Pre-set for smooth movement */
    will-change: transform, opacity;
}

.about-cards-row {
    position: relative;
    padding-top: 50px;
}

/* Ensure cards are visible for the GSAP to take over */
.about-card-wrap {
    opacity: 1;
}

/* Pixel Perfect About Section */
.about-section {
    background-color: #f9f6f0 !important;
    overflow: hidden;
    /* min-height: 100vh; */
}

/* Pixel Perfect About Section */
.about-feature-card {
    background-color: #F9F6F0 !important;
    border-radius: 32px;
    padding: 40px;
    min-height: 220px;
    border: none;
    will-change: transform, opacity;

    /* ADD THESE LINES */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertical center */
    align-items: center;
    /* Horizontal center */
    text-align: center;
    /* Center text lines */
}

.bg-blue {
    background: #1d59a8 !important;
}

.bg-dark-blue {
    background: #0c2a49 !important;
}

.bg-dark-blue-1 {
    background: #091523 !important;
}

.bg-cream-blue {
    background: #2a7977 !important;
}

.bg-brown {
    background: #8e5b2a !important;
}

/* Ensure the wrapper allows overlap during animation */
.about-fan-container {
    perspective: 1500px;
    position: relative;
    z-index: 10;
}

.about-moving-dot {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #4A5A53;
    border-radius: 50%;
    z-index: 1;
    top: 20%;
    left: 40%;
}

.ls-tight {
    /* letter-spacing: -2.5px; */
    line-height: 1.05;
}

.about-description {
    font-size: 18px;
    color: #2D2D2D;
    opacity: 0.9;
}

.check-icon-box {
    width: 32px;
    height: 32px;
    background-color: #0B1F3A;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.cta-container {
    text-align: center;
    padding: 0 20px 80px 20px;
    /* max-width: 900px; */
}

/* Typography */
.main-headline {
    color: var(--primary-green);
    font-size: 4rem;
    /* Matching the large "display" scale */
    font-weight: 700;
    line-height: 1.1;
    /* letter-spacing: -2px; */
    /* Tight tracking as seen in screenshot */
    margin-bottom: 24px;
}

.sub-text {
    color: #2D2D2D;
    font-size: 16px;
    line-height: 1.6;
    /* max-width: 720px; */
    margin: 0 auto 48px auto;
    opacity: 0.9;
}

/* Mobile devices */
@media (max-width: 768px) {
    .sub-text {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 30px;
    }
}

/* Buttons */
.btn-wrapper {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.btn-solid {
    background-color: #c9a84c;
    color: #0b1f3a;
    border: none;
    padding: 16px 36px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1rem;
    /* transition: all 0.3s ease; */
    text-decoration: none;
}

.btn-solid:hover {
    background-color: var(--btn-hover);
    /* transform: translateY(-2px); */
    color: #ffffff;
    border: 1px solid #16358c;
    background: #0b1f3a;
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-green);
    border: 1.5px solid #0b1f3a;
    padding: 16px 36px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-outline:hover {
    border-color: var(--primary-green);
    background-color: rgba(1, 81, 71, 0.03);
    color: #ffffff;
    background: #0b1f3a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-headline {
        font-size: 2.5rem;
        /* letter-spacing: -1px; */
    }

    .btn-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .btn-solid,
    .btn-outline {
        width: 100%;
        max-width: 300px;
    }
}


.how-it-works-vertical-stack {
    background-color: #F4F1E9;
    padding: 100px 0;
    /* min-height: 100vh; */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.how-header-top {
    width: 100%;
}

.how-header-top .main-title {
    font-size: 48px;
    font-weight: 500;
    line-height: 1;
    color: #0B1F3A;
}

.max-w-500 {
    max-width: 500px;
}

/* THE CARDS TRACK */
.how-cards-wrapper-bottom {
    margin-top: 80px;
    position: relative;
}

#cards-track {
    display: flex;
    gap: 30px;
    padding-bottom: 50px;
    will-change: transform;
}

.step-card {
    flex: 0 0 395px;
    min-height: 420px;
    background: #EFEDE3;
    border-radius: 40px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}

.card-icon {
    width: 90px;
    height: auto;
    margin-bottom: 25px;
}

.step-label {
    font-size: 12px;
    font-weight: 800;
    color: #004D40;
}

.step-card h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 15px 0;
    color: #0B1F3A;
}

.step-card p {
    font-size: 17px;
    line-height: 1.5;
    opacity: 0.8;
}

/* Moving Indicator Dot */
#indicator-dot {
    position: absolute;
    top: -40px;
    left: 0;
    width: 14px;
    height: 14px;
    background: #004D40;
    border-radius: 50%;
    z-index: 50;
}


:root {
    --primary-green: #0B1F3A;
    --tag-bg: #F9F6F0;
    --bg-cream: #F4F1E9;
}

.blog-section {
    background-color: var(--bg-cream);
    color: var(--primary-green);
    padding: 100px 0;
}

.eyebrow {
    font-size: 14px;
    font-weight: 700;
    text-transform: capitalize;
}

.ls-tight {
    /* letter-spacing: -2.5px; */
    line-height: 1.05;
}

.btn-view-more {
    background-color: var(--primary-green);
    color: white;
    border-radius: 50px;
    padding: 14px 28px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-view-more:hover {
    background-color: #061325;
    color: white;
    transform: translateY(-2px);
}

/* Card Styling */
.blog-card {
    background: white;
    border-radius: 32px;
    overflow: hidden;
    height: 100%;
    transition: transform 0.4s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
}

.blog-img-wrapper {
    width: 100%;
    height: 300px;
    overflow: hidden;
    /* Screenshot shows rounded corners on top of the image */
    border-radius: 32px 32px 0 0;
}

.blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-content {
    padding: 35px;
}

/* Badge Tags */
.badge-tag {
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    background-color: var(--tag-bg);
}

.blog-date {
    font-size: 13px;
    color: var(--primary-green);
    opacity: 0.8;
    margin-left: 8px;
}

.blog-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 15px 0;
    /* letter-spacing: -0.5px; */
}

.blog-excerpt {
    font-size: 15px;
    line-height: 1.5;
    color: var(--primary-green);
    opacity: 0.8;
    margin-bottom: 0;
}

.hero-text-content .btn-primary-green {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-height: 70px; */
    /* Forces both buttons to be the same height */
    font-size: 16px;
    /* Professional UI font size */
}


/* Refined Typography and Borders for Professional Look */
.letter-spacing-2 {
    /* letter-spacing: 2px; */
    font-size: 0.8rem;
    opacity: 0.7;
}

.text-accent-green {
    color: #C9A84C;
    /* Using the accent green from your root variables */
}

.lead {
    font-size: 1.25rem;
    line-height: 1.5;
}

.italic {
    font-style: italic;
}

/* Adds a subtle vertical line on desktops to separate the Heading from Content */
@media (min-width: 992px) {
    .border-start-lg {
        border-left: 1px solid rgba(1, 81, 71, 0.15) !important;
    }
}

.bg-opacity-50 {
    background-color: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(5px);
}

/* Professional Button refinement for this section */
.about-section .btn-primary-green {
    text-transform: none;
    /* letter-spacing: -0.2px; */
    box-shadow: 0 10px 20px rgba(22, 53, 125, 0.15);
}

/* Heading Adjustment */
.about-section .display-3 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
}

.card-icon {
    height: auto;
    /* Allow it to scale with the font-size */
    display: flex;
    align-items: center;
    margin-bottom: 0;
    /* Override previous styles */
}

.icon-individuals {
    font-size: 45px;
    line-height: 1;
    /* Prevents extra 'leading' space from throwing off centering */
}


.ecosystem-section {
    background-color: #0B1F3A14 !important;
    position: relative;
}

.ecosystem-orbit-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Central Hub */
.ecosystem-center {
    width: 220px;
    height: 220px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    z-index: 10;
    border: 1px solid rgba(22, 53, 125, 0.1);
}

.center-content {
    color: var(--primary-green);
    font-size: 28px;
    line-height: 1.2;
}

/* Common Node Styles */
.orbit-node {
    position: absolute;
    width: 110px;
    height: 110px;
    background-color: #0B1F3A;
    /* Your Primary Blue */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    z-index: 5;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(22, 53, 125, 0.2);
    transition: transform 0.3s ease;
}

.orbit-node:hover {
    transform: scale(1.1);
    background-color: #061325;
}

/* Clockwise Positioning */
.node-top {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.node-right {
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}

.node-bottom {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.node-left {
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}

/* Background Decoration */
.orbit-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 768px) {
    .ecosystem-orbit-wrapper {
        height: 500px;
    }

    .ecosystem-center {
        width: 160px;
        height: 160px;
    }

    .orbit-node {
        width: 90px;
        height: 90px;
        font-size: 12px;
    }
}

/* Ensure the section has enough "scroll runway" */
.ecosystem-section {
    position: relative;
    overflow: hidden;
}

.ecosystem-orbit-wrapper {
    position: relative;
    width: 100%;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Hide nodes initially so they can pop in */
.orbit-node {
    position: absolute;
    opacity: 0;
    transform: scale(0);
    /* Reset position to center of parent */
    top: 50%;
    left: 50%;
    margin-top: -60px;
    /* Half height */
    margin-left: -60px;
    /* Half width */
}

.orbit-rings {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    transform-origin: center center;
}

.ecosystem-center {
    opacity: 0;
    transform: scale(0.5);
}


.how-it-works-vertical-stack {
    background-color: #F4F1E9;
    padding: 100px 0;
    /* min-height: 100vh; */
    overflow: hidden;
    /* Critical for pinning */
    position: relative;
}

#cards-track {
    display: flex;
    gap: 30px;
    padding-bottom: 50px;
    will-change: transform;
    /* Boosts performance during scrub */
    width: max-content;
    /* Ensures cards don't wrap */
}

.how-cards-wrapper-bottom {
    margin-top: 80px;
    position: relative;
    width: 100%;
}

/* The Timeline Line */
#timeline-track {
    position: absolute;
    top: -34px;
    /* Centered with the dot's height */
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(0, 77, 64, 0.15);
    /* Faint green line */
    z-index: 40;
}

/* Adjusted Indicator Dot to sit on the line */
#indicator-dot {
    position: absolute;
    top: -40px;
    /* Adjusting to sit centered on the 2px line */
    left: 0;
    width: 14px;
    height: 14px;
    background: #004D40;
    border-radius: 50%;
    z-index: 50;
}

/* Ensure the wrapper has enough space for the timeline at the top */
.how-cards-wrapper-bottom {
    margin-top: 100px;
    position: relative;
    border-top: none;
    /* Remove any existing borders if present */
}

.how-cards-wrapper-bottom {
    position: relative;
    margin-top: 100px;
    width: 100%;
    /* Important: Takes the width of the Bootstrap .container */
}

#timeline-track {
    position: absolute;
    top: -10px;
    /* Adjust based on your design */
    left: 0;
    width: 100%;
    /* Spans the full width of the .container */
    height: 2px;
    background: rgba(0, 77, 64, 0.2);
    z-index: 40;
}

#indicator-dot {
    position: absolute;
    top: -16px;
    /* Centers the 14px dot on the 2px line */
    left: 0;
    width: 14px;
    height: 14px;
    background: #004D40;
    border-radius: 50%;
    z-index: 50;
    /* Remove any previous 'top' or 'left' values that conflict */
}


/* Container for the Horizontal Section */
.how-it-works-vertical-stack {
    background-color: #0B1F3A14 !important;
    /* Creamier background */
    padding: 120px 0;
}

/* Individual Card Design */
.step-card {
    flex: 0 0 395px;
    /* Slightly wider for better text flow */
    min-height: 350px;
    background: #ffffff;
    /* Clean white card on cream background */
    border-radius: 40px;
    padding: 50px 45px;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 77, 64, 0.02);
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 77, 64, 0.08);
    border: 1px solid #0b1f3a57;
}

/* Icon Management */
.card-icon {
    width: 64px;
    /* Standardized size */
    height: 64px;
    object-fit: contain;
    margin-bottom: 0;
    /* Optional: filter to match your primary green if they are black icons */
    /* filter: brightness(0) saturate(100%) invert(18%) sepia(34%) saturate(1636%) hue-rotate(125deg) brightness(91%) contrast(101%); */
}

/* Typography for Step Cards */
.step-card h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #0B1F3A;
    /* Your Primary Blue/Green */
    margin-bottom: 20px;
    /* letter-spacing: -0.8px; */
}
@media (max-width: 768px) {
    .step-card h3 {
        font-size: 22px; /* or 16px depending on your design */
        line-height: 1.3;
        margin-bottom: 12px;
    }
}

.step-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #2D2D2D;
    /* Muted slate for readability */
    opacity: 0.9;
    margin-bottom: 0;
}

/* Timeline/Progress Decoration */
.how-cards-wrapper-bottom {
    margin-top: 70px;
    position: relative;
    padding-top: 40px;
    /* Space for the timeline */
}

@media (max-width: 767px) {
    .how-cards-wrapper-bottom {
        padding-top: 0 !important;
    }
}

#timeline-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    /* Thinner is more professional */
    background: rgb(155 163 183);
}

#indicator-dot {
    position: absolute;
    top: -6px;
    /* Centered on the 1px line */
    width: 12px;
    height: 12px;
    background: #0B1F3A;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(22, 53, 125, 0.1);
    /* Subtle outer glow */
}

/* Section Header Typography */
.main-title {
    font-size: 48px !important;
    /* letter-spacing: -2.5px; */
    font-weight: 800;
    color: #0B1F3A;
}

/* Mobile */
@media (max-width: 767px) {
    .main-title {
        font-size: 36px !important;
        /* smaller font for mobile */
        line-height: 1.2;
        /* optional: adjust line height */
    }
}

/* Tablet (optional) */
@media (min-width: 768px) and (max-width: 991px) {
    .main-title {
        font-size: 36px !important;
        /* medium size for tablets */
    }
}

.eyebrow {
    font-size: 14px;
    /* text-transform: uppercase; */
    /* letter-spacing: 1px; */
    font-weight: 500;
    color: #2D2D2D;
    /* opacity: 0.6; */
}

/* Ensure the wrapper handles the stacking */
.cards-stack-wrapper {
    position: relative;
    padding: 60px 0;
    min-height: 500px;
    /* Give it space to breathe */
}

/* On desktop, we want the cards to stack on top of each other initially */
@media (min-width: 992px) {
    .card-item {
        position: relative;
        transition: transform 0.1s ease;
        will-change: transform, opacity;
    }

    /* This makes sure the center card is visually on top */
    #centerCard {
        z-index: 10;
    }

    #leftCard,
    #rightCard {
        z-index: 5;
    }
}

/* Fix for Font Awesome icons inside the cards */
.card-icon i {
    font-size: 40px;
    color: #0B1F3A;
}

/* Prevent 'Flash of Unstyled Content' (FOUC) */
.why-choose-section .card-item {
    opacity: 1;
    /* Keep at 1, GSAP will handle the "from" state */
    will-change: transform, opacity;
}

/* Ensure the section has enough height so the trigger doesn't finish instantly */
.why-choose-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
    overflow: visible !important;
    /* Important for the fan effect */
}

/* Make sure the row doesn't clip the rotation of the cards */
.cards-stack-wrapper {
    overflow: visible !important;
}

.value-card-item {
    will-change: transform, opacity;
}

/* Ensure cards are visible by default */
.value-card-item {
    opacity: 1;
    visibility: visible;
    will-change: transform, opacity;
}

/* Ensure the section has enough space to be triggered */
#valuesSection {
    min-height: 400px;
    position: relative;
    z-index: 10;
}

#valuesSection {
    overflow: visible !important;
}

/* our values */
/* Unique Values Section Styles */
.uv-section {
    padding: 70px 0;
    overflow: hidden;
}

.uv-primary-text {
    color: #0B1F3A;
}

.uv-small-label {
    color: var(--primary-green);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    /* letter-spacing: 1.5px; */
}

.uv-display-3 {
    font-size: 48px;
    line-height: 1.1;
    /* letter-spacing: -2px; */
}

@media (max-width: 767px) {
    .uv-display-3 {
        font-size: 36px;
        /* smaller on mobile */
        line-height: 1.2;
        /* adjust if needed */
    }
}

.uv-text-muted {
    color: #2D2D2D;
    line-height: 1.6;
}

.uv-value-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 28px;
    height: 100%;
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.uv-value-card:hover {
    background: rgba(22, 53, 125, 0.03);
    /* Subtle tint using primary green */
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgb(201 168 76 / 16%);
}

.uv-icon-box {
    height: 50px;
    display: flex;
    align-items: center;
}

.uv-explore-link {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
}

.uv-card-item {
    will-change: transform, opacity;
}


.uv-scroll-container {
    padding: 140px 0;
    background-color: #F9F7F2;
    /* Cream from video */
    overflow: hidden;
}

.uv-eyebrow {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-green);
    /* letter-spacing: 1px; */
    font-size: 0.85rem;
}

.uv-main-heading {
    font-size: 5rem;
    line-height: 1;
    /* letter-spacing: -3px; */
    margin-bottom: 40px;
}

.uv-sub-text {
    font-size: 1.15rem;
    color: var(--primary-green);
    opacity: 0.8;
    line-height: 1.6;
    margin-top: 20px;
}

/* Card Styling */
.uv-value-card {
    background: #fff !important;
    padding: 30px;
    border-radius: 24px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #dedede;
}

.uv-value-card:hover {
    background: rgba(22, 53, 125, 0.04);
}

.uv-icon-wrap {
    height: 60px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.uv-value-card h4 {
    color: #0B1F3A;
    font-weight: 600;
    font-size: 24px;
}
@media (max-width: 768px) {
    .uv-value-card h4 {
        font-size: 22px;
    }
}

.uv-value-card p {
    color: #2D2D2D;
    opacity: 0.7;
    font-size: 16px;
}

.uv-link {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 700;
}

/* Animation Starting State */
.uv-card-wrapper {
    opacity: 0;
    transform: translateY(100px);
    /* Starts deep down */
    will-change: transform, opacity;
}

.uv-sticky-header {
    will-change: transform, opacity;
}


.ecosystem-orbit-wrapper {
    position: relative;
    width: 100%;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* THE VISIBLE CONNECTING CIRCLE */
.visible-orbit-ring {
    position: absolute;
    /* Diameter is 520px (matches 260px radius) */
    width: 520px;
    height: 520px;
    border-radius: 50%;
    /* Solid line that is clearly visible but professional */
    border: 2px solid rgb(201 168 76 / 16%);
    background-color: #f4f6fb;
    z-index: 1;
    pointer-events: none;
}

.ecosystem-hub {
    position: relative;
    z-index: 10;
    width: 200px;
    height: 200px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: 1px solid rgba(22, 53, 125, 0.05);
}

.hub-text {
    display: block;
    font-weight: 800;
    font-size: 24px;
    color: #0B1F3A;
    line-height: 1.1;
}

/* NODE STYLING */
.orbit-node {
    position: absolute;
    width: 125px;
    height: 125px;
    background-color: #1e56a0;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    z-index: 15;
    box-shadow: 0 10px 30px rgba(30, 86, 160, 0.2);
}

/* Perfect alignment on the 520px diameter ring */
.node-top {
    transform: translateY(-260px);
}

.node-right {
    transform: translateX(260px);
}

.node-bottom {
    transform: translateY(260px);
}

.node-left {
    transform: translateX(-260px);
}

@media (max-width: 932px) {
    .ecosystem-orbit-wrapper {
        height: 500px;
    }

    .visible-orbit-ring {
        width: 340px;
        height: 340px;
    }

    .node-top {
        transform: translateY(-170px);
    }

    .node-right {
        transform: translateX(170px);
    }

    .node-bottom {
        transform: translateY(170px);
    }

    .node-left {
        transform: translateX(-170px);
    }

    .orbit-node {
        width: 90px;
        height: 90px;
        font-size: 11px;
    }

    .ecosystem-hub {
        width: 150px;
        height: 150px;
    }
}


/* Professional Hero Styling */
.bg-dark-navy {
    background-color: #08121e !important;
    /* background-image: radial-gradient(circle at 50% 0%, #11253e 0%, #08121e 70%); */
}

.bg-dark-navy-1 {
    background-color: #08121e !important;
    /* background-image: radial-gradient(circle at 50% 0%, #11253e 0%, #08121e 70%); */
}

.ls-tight {
    /* letter-spacing: -2px; */
    line-height: 1.1;
}

/* Category Pills */
.financial-category-pills {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pill-item {
    background: rgb(237 239 245);
    border: 1px solid rgb(237 239 245);
    color: rgb(18 39 87);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* The Premium Cards */
.wealth-card {
    background: rgba(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    backdrop-filter: blur(10px);
    width: max-content;
}

.wealth-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 1px 5px 15px -4px rgba(0, 0, 0, 0.4);
}

.card-icon-box {
    width: 50px;
    height: 50px;
    background: #0B1F3A;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    /* box-shadow: 0 0 20px rgba(22, 53, 125, 0.5); */
}

.card-title {
    color: #0B1F3A;
   
    font-weight: 500;
    margin-bottom: 0;
}

.card-title-1 {
    color: #2D2D2D;
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0;
}

.card-p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.card-p strong {
    color: #ffffff;
    font-weight: 500;
}

/* Subtle Glow Effect on Hover */
.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.wealth-card:hover .card-glow {
    opacity: 1;
}


/* Assessment Section Styles */
.assessment-section {
    position: relative;
}

.assessment-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.assessment-card {
    background: #fff;
    padding: 20px 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(22, 53, 125, 0.05);
    transition: all 0.3s ease;
}

.assessment-card:hover {
    transform: translateX(10px);
    background: #fdfdfd;
    border-color: var(--primary-green);
    box-shadow: 0 10px 30px rgba(22, 53, 125, 0.05);
}

.assessment-card p {
    margin-bottom: 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: #0B1F3A;
}

.check-circle {
    width: 32px;
    height: 32px;
    background: rgba(22, 53, 125, 0.1);
    color: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.assessment-card:hover .check-circle {
    background: var(--primary-green);
    color: #fff;
}

.border-primary-green {
    border-color: var(--primary-green) !important;
}

@media (max-width: 991px) {
    .assessment-card:hover {
        transform: translateY(-5px);
    }
}


/* Style for the 'Check Box' circle */
.check-box-ui {
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e0;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
}

/* When the card is selected */
.assessment-card.is-selected {
    border-color: #0B1F3A;
    background-color: #f0f4ff;
    /* Light blue tint */
}

.assessment-card.is-selected .check-box-ui {
    background-color: #0B1F3A;
    border-color: #0B1F3A;
}

/* Add a white checkmark inside the box when selected */
.assessment-card.is-selected .check-box-ui::after {
    content: '✓';
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

.selectable-card {
    cursor: pointer;
    user-select: none;
}



/* 2nd */

.checkup-title {
    color: #0B1F3A;
    font-size: 3rem;
    font-weight: 800;
    /* letter-spacing: -1.5px; */
}

.checkup-item {
    padding: 15px 30px;
    border: 2px solid #e2e8f0;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    font-weight: 500;
    color: #4a5568;
}

.checkup-item:hover {
    border-color: #0B1F3A;
    transform: translateY(-3px);
}

.active-pill {
    background: #0B1F3A !important;
    color: #fff !important;
    border-color: #0B1F3A !important;
    box-shadow: 0 10px 20px rgba(22, 53, 125, 0.2);
}


/* 3rd */

.split-heading {
    font-size: 4rem;
    color: #0B1F3A;
    font-weight: 800;
}

.split-list-card {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 15px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.3s;
}

.split-icon-box {
    width: 50px;
    color: #ff9800;
    font-size: 24px;
}

.split-text h6 {
    margin: 0;
    font-weight: 700;
    color: #0B1F3A;
}

.split-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #718096;
}

.split-check-mark {
    margin-left: auto;
    font-size: 24px;
    color: #e2e8f0;
}

.split-list-card.checked {
    border-color: #0B1F3A;
    background: #f8fafc;
}

.split-list-card.checked .split-check-mark {
    color: #0B1F3A;
}


.discovery-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 180px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    color: #fff;
    cursor: pointer;
    transition: 0.4s;
}

.discovery-box i {
    font-size: 32px;
    color: #0B1F3A;
}

.discovery-box p {
    font-weight: 500;
    margin: 0;
}

.selected-box {
    background: #0B1F3A !important;
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.selected-box i {
    color: #fff;
}



/* Progress Bar */
.quiz-progress-wrapper {
    height: 6px;
    width: 100%;
    position: relative;
}

.quiz-progress-bar {
    height: 100%;
    background: #0B1F3A;
    transition: width 0.4s ease;
}

/* Steps */
.quiz-step {
    display: none;
}

.quiz-step.active {
    display: block;
    animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

/* Badge */
.badge-step {
    background: rgba(22, 53, 125, 0.1);
    color: #0B1F3A;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}

/* Option Buttons */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-quiz-opt {
    background: white;
    border: 2px solid #e2e8f0;
    padding: 20px;
    border-radius: 15px;
    font-weight: 500;
    color: #0B1F3A;
    text-align: left;
    transition: 0.3s;
    cursor: pointer;
}

.btn-quiz-opt:hover {
    border-color: #0B1F3A;
    background: #f8fbff;
    transform: translateY(-2px);
}

.quiz-input {
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #ddd;
}

/* Custom Button Styles for Quiz Options */
.btn-quiz-opt {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 18px 25px;
    border-radius: 12px;
    font-weight: 500;
    color: #0B1F3A;
    text-align: left;
    transition: all 0.25s ease;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.btn-quiz-opt:hover {
    border-color: #0B1F3A;
    background: #f0f4ff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgb(201 168 76 / 16%);
}

/* Form input styling */
.quiz-input {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 18px;
}

.quiz-input:focus {
    border-color: #0B1F3A;
    box-shadow: 0 0 0 3px rgba(22, 53, 125, 0.1);
}

/* Animations */
.quiz-step {
    display: none;
}

.quiz-step.active {
    display: block;
    animation: fadeInSlide 0.4s ease forwards;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

.footer-padding {
    padding-top: 70px;
    padding-bottom: 20px;
}

@media (max-width: 768px) {
    .footer-padding {
        padding-top: 50px;
        padding-bottom: 20px;
    }
}

.opacity-90 {
    opacity: .90 !important;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    /* circle size */
    height: 40px;
    border-radius: 50%;
    /* makes it round */
    background-color: #e0e0e0;
    /* light gray background */
    color: #0B1F3A;
    /* icon color */
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 18px;
}

.social-icon:hover {
    background-color: #0B1F3A;
    /* dark background on hover */
    color: #ffffff;
    /* white icon on hover */
    transform: scale(1.1);
    /* slight zoom effect */
}


/* Team */
/* --- Section & Layout --- */
.leadership-showcase {
    padding: 70px 0;
    background-color: var(--cream-bg);
}

@media (max-width: 768px) {
    .leadership-showcase {
        padding: 50px 0;
    }
}


.showcase-wrapper {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header Styling --- */
.showcase-header {
    max-width: 600px;
    margin-bottom: 60px;
}

.showcase-subtitle {
    font-size: 15px;
    font-weight: 500;
    color: var(--brand-primary);
    margin-bottom: 12px;
}

.showcase-title {
    font-size: 48px !important;
    line-height: 1.1;
    color: #0B1F3A;
    margin: 0 0 24px;
    font-weight: 500;
    /* letter-spacing: -2px; */
}

.showcase-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--brand-primary-faded);
    margin: 0;
    font-weight: 400;
}

/* --- The Animation Stage --- */
.animation-arena {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    height: 850px;
}

/* --- Individual Cards --- */
.profile-panel {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -140px;
    width: 345px;
    height: 375px;
    background-color: var(--color-light);
    border-radius: var(--border-radius-profile);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    will-change: transform;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
    /* Ensures crisp edges on overlap */
    border-radius: 20px;
}

.profile-panel:hover {
    box-shadow: 0 20px 45px rgba(16, 82, 70, 0.15);
}

/* FIXED Z-INDEX PYRAMID: Center cards overlap outer cards */
.panel-layer-1 {
    z-index: 1;
}

.panel-layer-2 {
    z-index: 2;
}

.panel-layer-3 {
    z-index: 3;
}

.panel-layer-4 {
    z-index: 3;
}

.panel-layer-5 {
    z-index: 2;
}

.panel-layer-6 {
    z-index: 1;
}

.profile-media-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-profile) var(--border-radius-profile) 0 0;
    line-height: 0;
}

.profile-portrait {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

/* --- Hover Overlay --- */
.profile-details-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    text-align: center;
}

.profile-panel:hover .profile-details-overlay {
    opacity: 1;
}

.profile-social-icons {
    margin-bottom: 20px;
}

.profile-social-icons a {
    margin: 0 8px;
    color: var(--brand-primary);
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 82, 70, 0.2);
    border-radius: 50%;
}

.profile-social-icons a:hover {
    background-color: var(--brand-primary);
    color: var(--color-light);
}

.profile-quote-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--brand-primary-faded);
    font-style: italic;
    margin: 0;
}

/* TIGHTER TYPOGRAPHY FOR FOOTER */
.profile-info-footer {
    padding: 16px 20px;
    /* Reduced padding */
    text-align: left;
    background: var(--color-light);
    border-radius: 0 0 var(--border-radius-profile) var(--border-radius-profile);
}

.profile-person-name {
    font-size: 15px;
    /* Slightly smaller */
    font-weight: 500;
    color: #0B1F3A;
    margin-bottom: 2px;
    /* Tighter margin */
}

.profile-person-role {
    font-size: 12px;
    /* Slightly smaller */
    font-weight: 500;
    color: var(--brand-primary-faded);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 991px) {
    .animation-arena {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    .profile-panel {
        position: relative;
        top: auto;
        left: auto;
        margin-left: 0;
        transform: none !important;
        width: calc(50% - 12px);
    }
}

@media (max-width: 767px) {
    .showcase-title {
        font-size: 36px;
        /* letter-spacing: -1px; */
    }

    .profile-panel {
        width: 100%;
        max-width: 350px;
    }
}

/* Ensure the whole card has a solid background */
.profile-panel {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Gives a slight edge to separate overlapping cards */
}

/* Ensure the text area specifically has a solid background to block underlying text */
.profile-info-footer {
    background-color: #ffffff !important;
    position: relative;
    z-index: 5;
    /* Ensures the text block sits above any shadows/images from below */
    padding: 20px;
}

/* Optional: Add a subtle shadow inside the card to separate the image from the text */
.profile-media-container {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}



.showcase-wrapper {
    max-width: 1500px;
    /* Increased to match your site's global container width */
    margin: 0 auto;
    padding: 0 20px;
}

.animation-arena {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* Changed to 100% so it fills the wrapper completely */
    margin: 0 auto;
    height: 790px;
}

/* Find this block and update it */
.how-it-works-vertical-stack {
    background-color: #0B1F3A14 !important;
    /* Change padding to reduce bottom space (Top Right Bottom Left) */
    padding: 120px 0 60px 0;

    /* REMOVE THIS LINE ENTIRELY: */
    /* min-height: 100vh; */

    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

#cards-track {
    display: flex;
    gap: 30px;
    padding-bottom: 20px;
    /* Reduced from 50px */
    will-change: transform;
    width: max-content;
}

.how-it-works-vertical-stack {
    background-color: #0B1F3A14 !important;
    padding: 120px 0 60px 0;
    min-height: auto !important;
    /* Forces GSAP to respect content height */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.display-2 {
    font-size: 48px;
}
/* Mobile */
@media (max-width: 768px) {
    .display-2 {
        font-size: 36px;
        line-height: 1.2;
    }
}

.display-1 {
    font-size: 64px;
}

.pt-lg-5 {
    padding-top: 1.5rem !important;
}

.pt-70 {
    padding-top: 70px !important;
}

@media (max-width: 768px) {
    .pt-70 {
        padding-top: 50px !important;
    }
}

.pb-70 {
    padding-bottom: 70px !important;
}

@media (max-width: 768px) {
    .pb-70 {
        padding-bottom: 50px !important;
    }
}


.small,
small {
    font-size: 15px;
}


/* header */
/* =========================================
   NEW SPLIT HERO SECTION STYLES
   ========================================= */
.hero-split-section {
    padding: 100px 0;
    min-height: 90vh;
    overflow: hidden;
    position: relative;
}

/* Eyebrow Badge */
.hero-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    background: rgb(201 168 76 / 16%);
    color: #0B1F3A;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(22, 53, 125, 0.1);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #C9A84C;
    /* Accent green */
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: 0 0 0 rgba(23, 179, 142, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(23, 179, 142, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(23, 179, 142, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(23, 179, 142, 0);
    }
}

/* Typography */
.hero-main-title {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

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

.hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #4a5568;
    max-width: 90%;
}

/* Buttons */
.btn-premium-solid {
    background: #0B1F3A;
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    /* Sharper corners look more corporate/financial */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.btn-premium-solid:hover {
    background: #061325;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(22, 53, 125, 0.2);
}

.btn-premium-outline {
    background: transparent;
    color: #0B1F3A;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid #0B1F3A;
    transition: all 0.3s ease;
}

.btn-premium-outline:hover {
    background: rgba(22, 53, 125, 0.05);
    color: #0B1F3A;
}

/* Avatars */
.trust-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 3px solid #f9f6f0;
    margin-left: -15px;
    object-fit: cover;
}

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

/* Right Side Image Composition */
.hero-image-wrapper {
    position: relative;
    border-radius: 24px 24px 24px 120px;
    /* Elegant asymmetrical shape */
    overflow: hidden;
    height: 600px;
    z-index: 2;
}

.hero-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(8, 18, 30, 0.4), transparent);
}

/* Floating Services Box */
.floating-services-card {
    position: absolute;
    bottom: -30px;
    left: -40px;
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    z-index: 5;
    width: 320px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.list-icon {
    width: 35px;
    height: 35px;
    background: rgba(22, 53, 125, 0.1);
    color: #0B1F3A;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Decorative Background Pattern */
.hero-pattern-dots {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    background-image: radial-gradient(#0B1F3A 2px, transparent 2px);
    background-size: 15px 15px;
    opacity: 0.1;
    z-index: 1;
}

/* Responsive Fixes */
@media (max-width: 991px) {
    .hero-split-section {
        padding: 60px 0;
        text-align: center;
    }

    .hero-main-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        margin: 0 auto 40px;
        max-width: 100%;
    }

    .hero-action-btns {
        justify-content: center;
    }

    .trust-indicator {
        justify-content: center;
    }

    .hero-content-right {
        margin-top: 60px;
    }

    .hero-image-wrapper {
        height: 400px;
        border-radius: 20px;
    }

    .floating-services-card {
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
    }
}

.hero-institutional {
    min-height: 90vh;
    background-color: #08121e;
    /* Deep midnight blue/black */
    padding: 120px 0 60px;
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Optional: Add a subtle grayscale office or mountain image here */
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=2000');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    /* Barely visible */
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #08121e 40%, transparent 100%);
    z-index: 2;
}

.accent-gold {
    color: #d4af37;
    /* Champagne Gold */
    font-size: 0.85rem;
    font-weight: 600;
}

.tracking-wide {
    letter-spacing: 2px;
}

.line-accent {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: #d4af37;
    margin-bottom: 4px;
    margin-right: 10px;
}

.btn-gold-solid {
    background-color: #d4af37;
    color: #08121e;
    padding: 16px 36px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-gold-solid:hover {
    background-color: #f3c83f;
    color: #08121e;
    transform: translateY(-2px);
}

.btn-text-light {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.btn-text-light:hover {
    color: #d4af37;
}





/* Bento Grid Layout */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 240px);
    gap: 20px;
    margin-top: 20px;
}

.bento-item {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(22, 53, 125, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.bento-content {
    padding: 30px;
    position: relative;
    z-index: 2;
}

.bento-icon {
    width: 45px;
    height: 45px;
    background: rgb(201 168 76 / 16%);
    color: #0B1F3A;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Specific Spans */
.bento-large {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}

.bento-large .bento-graphic {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    margin-top: -20px;
}

.bento-large .bento-graphic img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.bento-wide {
    grid-column: span 2;
    grid-row: span 1;
}

.bento-small {
    grid-column: span 1;
    grid-row: span 1;
}

/* Responsive */
@media (max-width: 991px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .bento-large,
    .bento-wide,
    .bento-small {
        grid-column: span 1;
        grid-row: auto;
    }
}


/* Container for the two cards */
.wealth-card-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1000px;
    /* Keeps them from getting too wide on large screens */
    margin: 0 auto;
}

/* Individual Card Styling */
.wealth-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    flex: 1;
    /* Makes both cards equal width */
    min-width: 420px;
    /* Ensures they don't get too skinny */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.wealth-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(22, 53, 125, 0.1);
}

.card-icon-box {
    width: 48px;
    height: 48px;
    background: #0B1F3A;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.card-title-1 {
    color: #2D2D2D;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

/* Responsive adjustment */
@media (max-width: 991px) {
    .wealth-card {
        min-width: 100%;
        /* Stack on mobile */
    }
}


/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    background: #eef2ff;
    color: #0B1F3A;
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: #C9A84C;
    border-radius: 50%;
    margin-right: 8px;
}

/* Visual Box - Creates depth */
.hero-visual-box {
    position: relative;
    height: 400px;
}

.card-visual-card {
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    width: 280px;
    position: absolute;
    top: 20px;
    left: 20px;
    transition: 0.3s;
}

.offset-card {
    top: 150px;
    left: 150px;
    z-index: 2;
}

.card-visual-icon {
    width: 45px;
    height: 45px;
    background: #f0f4ff;
    color: #0B1F3A;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

/* Enhancing existing Typography */
.display-1 {
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -1px;
}

/* Buttons upgrade */
.btn-primary-green {
    background-color: #C9A84C !important;
    padding: 12px 30px !important;
    transition: 0.3s;
}

.btn-primary-green:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(22, 53, 125, 0.2);
}



/* ---------------------------------------
   UPGRADED HERO LOOK — Professional, Modern
---------------------------------------- */

.hero-section {
    background: #f9f6f0;
    padding: 120px 0 100px;
}

.hero-main {
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: -1px;
    color: #2D2D2D;
}

/* Category Pills – cleaner, tighter */
.financial-category-pills {
    gap: 12px;
}

.pill-item {
    background: #eef2ff;
    padding: 6px 18px;
    border-radius: 40px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0B1F3A;
    border: 1px solid rgba(22, 53, 125, 0.1);
}

/* Benefit cards – corporate-grade look */
.hero-benefits-row {
    margin-top: 20px;
}

.hero-benefit-card {
    background: white;
    padding: 28px 32px;
    border-radius: 20px;
    border: 1px solid rgb(201 168 76 / 16%);
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: 0.35s ease;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.hero-benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgb(201 168 76 / 16%);
}

.fs-15 {
    font-size: 15px;
}
.fs-16 {
    font-size: 16px;
}
.fs-32{
    font-size: 32px;
}

.fs-18 {
    font-size: 18px !important;
}
.w-20{
    width: 20px;
}

@media (max-width: 768px) {
    .fs-18 {
        font-size: 16px !important;
    }
}

.hero-mantra {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.hero-mantra h2 {
    font-size: 15px;
    font-weight: 500;
    color: #2D2D2D;
}

@media (max-width: 767px) {
    .hero-mantra h2 {
        font-size: 12px;
        /* mobile font */
    }
}

/* Icon Box */
.icon-box {
    width: 48px;
    height: 48px;
    background: #0B1F3A;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 12px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Benefit title */
.benefit-title {
    font-size: 1.1rem;
    line-height: 1.45;
    font-weight: 600;
    color: #2D2D2D;
    margin: 0;
}

/* Small floating shadow-texture for premium touch */
.hero-benefit-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 20px 40px rgba(22, 53, 125, 0.05);
    opacity: 0;
    transition: 0.3s ease;
}

.hero-benefit-card:hover::after {
    opacity: 1;
}


/* Styling the "Get a free consultation" button */
.btn-primary-green {
    background-color: #0B1F3A;
    /* Adjust this to your specific green/blue brand color */
    color: #ffffff;
    padding: 14px 30px !important;
    font-size: 1rem;
    border-radius: 50px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-weight: 500;
}

.btn-primary-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    background-color: #061325;
    /* Slightly darker shade on hover */
    color: #ffffff;
}

/* Ensure the hero text is centered and readable */
.hero-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* mobile responsive */
/* --- MOBILE RESPONSIVE FIXES --- */

@media (max-width: 991px) {

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* Shrink large headings for mobile */
    /* .display-1,
    .display-2,
    .display-3 {
        font-size: 36px !important;
    } */

    /* Adjust Sections */
    .hero-section {
        padding: 40px 0 5px !important;
    }

    .section-padding,
    .py-70,
    .py-120 {
        padding: 50px 10px !important;
    }

    /* Hero Benefits Stack */
    .hero-benefits-row {
        flex-direction: column;
    }

    /* How it works (Horizontal -> Vertical) */
    .how-cards-wrapper-bottom {
        margin-top: 40px;
    }

    #cards-track {
        flex-direction: column !important;
        width: 100% !important;
        transform: none !important;
        /* Disable horizontal GSAP scroll */
    }

    .step-card {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin-bottom: 20px;
        padding: 25px 30px;
    }

    #timeline-track,
    #indicator-dot {
        display: none !important;
    }

    /* Leadership Animation */
    .animation-arena {
        height: auto !important;
        display: block !important;
    }

    .profile-panel {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin: 20px auto !important;
        width: 90% !important;
        transform: none !important;
    }

    /* Partner Orbit */
    .ecosystem-orbit-wrapper {
        height: 400px !important;
    }

    .orbit-node {
        width: 70px !important;
        height: 70px !important;
        font-size: 10px !important;
    }

    .ecosystem-hub {
        width: 120px !important;
        height: 120px !important;
    }

    /* Why Choose Section */
    .cards-stack-wrapper {
        height: auto !important;
        display: block !important;
    }

    .card-item {
        width: 100% !important;
        margin-bottom: 20px;
    }
}

/* Ensure images never overflow */
img {
    max-width: 100%;
    height: auto;
}


/* Styling the Offcanvas */
.offcanvas {
    width: 80% !important;
    /* Sidebar width on mobile */
    max-width: 320px;
}

.offcanvas-body .nav-link {
    color: #0B1F3A;
    font-weight: 600;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
}

.nav-link {
    color: #2D2D2D;
    font-weight: 500;
}

/* Ensure the toggle button is aligned */
.navbar-toggler {
    padding: 0.5rem;
}

@media (min-width: 992px) {

    /* Ensure the offcanvas is closed automatically if the window is resized to desktop */
    .offcanvas.show {
        display: none !important;
    }
}


/* Mobile Sidebar Link Styles */
.custom-mobile-link {
    color: #0B1F3A !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    /* Larger font size */
    padding: 10px 13px !important;
    border-bottom: 1px solid #eeeeee;
    /* Thin gray line */
    transition: all 0.2s;
}

.custom-mobile-link:hover {
    opacity: 0.7;
}

/* Ensure the contact button in mobile menu matches the primary color */
#mobileMenu .btn-primary-green {
    background-color: #0B1F3A !important;
    color: #fff !important;
    font-size: 1.2rem !important;
}

/* Remove default padding from header */
.offcanvas-header {
    padding-bottom: 20px !important;
}

.px-10-30 {
    padding: 10px 30px !important;
}

@media (max-width: 767px) {
    .cards-stack-wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

.navbar-brand {
    padding-left: 10px;
}


/* --- Mobile Partner Ecosystem Fixes --- */
@media (max-width: 767px) {
    .ecosystem-section {
        padding: 50px 0 !important;
    }

    .ecosystem-orbit-wrapper {
        height: 350px !important;
        /* Smaller area for mobile */
        max-width: 100%;
        margin-top: 20px;
    }

    .visible-orbit-ring {
        width: 260px !important;
        /* Tighter ring */
        height: 260px !important;
    }

    .ecosystem-hub {
        width: 100px !important;
        /* Smaller center hub */
        height: 100px !important;
    }

    .hub-text {
        font-size: 14px !important;
        /* Smaller text */
    }

    .orbit-node {
        width: 75px !important;
        height: 75px !important;
        font-size: 10px !important;
        padding: 5px;
    }

    /* Adjust positions for the smaller ring */
    .node-top {
        transform: translateY(-130px) !important;
    }

    .node-right {
        transform: translate(130px, -40px) !important;
        /* right + slightly up */
    }

    .node-bottom {
        transform: translate(0, 130px) !important;
    }

    .node-left {
        transform: translate(-130px, -40px) !important;
        /* left + slightly up */
    }
}

@media (max-width: 767px) {
    .orbit-node {
        /* ... your existing styles ... */
        transform: none !important;
        /* Force reset of any JS transforms */
        animation: none !important;
        /* Stop any CSS animations */
    }
}

@media (max-width: 767px) {
    .mg-left {
        margin-left: 20px;
    }
}

@media (max-width: 767px) {
    .mg-right {
        margin-right: 20px;
    }
}

@media (max-width: 767px) {
    .about-description {
        font-size: 16px;
    }
}

@media (max-width: 932px) {
    .orbit-node {
        width: 75px !important;
        height: 75px !important;
        font-size: 10px !important;
        padding: 5px;
        /* KILL THE ANIMATION AND TRANSFORM */
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Manually position them on the ring for mobile */
    .node-top {
        top: 108px !important;
        left: 67% !important;
        transform: translate(-50%, -35px) !important;
    }

    .node-right {
        top: 67% !important;
        left: 285px !important;
        right: 0 !important;
        transform: translate(35px, -50%) !important;
    }

    .node-bottom {
        top: 285px !important;
        bottom: 0 !important;
        left: 69% !important;
        transform: translate(-50%, 35px) !important;
    }

    .node-left {
        top: 67% !important;
        left: 106px !important;
        transform: translate(-35px, -50%) !important;
    }
}

/* Add these styles to your style.css */
.card-item {
    opacity: 0;
    /* Hide them initially */
    will-change: transform, opacity;
}

#leftCard {
    transform: translateX(10px) rotate(-12deg);
}

#rightCard {
    transform: translateX(-10px) rotate(12deg);
}

#centerCard {
    transform: scale(0.9);
}


/* Ensure the arena expands to fit the grid formation */
@media (min-width: 992px) {
    .animation-arena {
        /* Increase height to ensure the grid (410px offset) fits */
        height: 800px !important;
    }
}

/* Fix for overlapping cards in grid mode */
.profile-panel {
    /* Ensure cards have a consistent size */
    width: 345px;
    height: 375px;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Ensure the wrapper doesn't clip the cards when they move */
.leadership-showcase {
    overflow: visible !important;
}

.offcanvas-title {
    margin-left: 10px;
}

.modal-content {
    background-color: #f9f6f0;
    /* Cream background */
}

.modal .form-control,
.modal .form-select {
    border: 1px solid #ced4da;
}

.modal .form-control:focus {
    border-color: #0B1F3A;
    box-shadow: 0 0 0 0.2rem rgba(22, 53, 125, 0.25);
}

/* Modal Input/Select Styling */
.modal .form-control,
.modal .form-select {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #2D2D2D !important;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.modal .form-control:focus,
.modal .form-select:focus {
    border-color: #0B1F3A !important;
    box-shadow: 0 4px 12px rgba(22, 53, 125, 0.15) !important;
}

/* Customizing the Select Dropdown Arrow */
.modal .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2316357d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 16px 12px;
}

/* Modal Title */
.modal-title {
    color: #0B1F3A;
    font-weight: 700;
}

/* Close Button fix */
.btn-close {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.btn-close:hover {
    opacity: 1;
}

/* Modal content styling */
.modal-content {
    background-color: #f9f6f0 !important;
}

/* Input/Select Field Upgrades */
.modal .form-control,
.modal .form-select {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #2D2D2D !important;
    font-size: 0.95rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.modal .form-control:focus,
.modal .form-select:focus {
    border-color: #0B1F3A !important;
    box-shadow: 0 0 0 4px rgb(201 168 76 / 16%) !important;
    outline: none;
}

/* Make placeholders slightly lighter */
.modal .form-control::placeholder {
    color: #a0aec0;
}

/* Modal Title */
.modal-title {
    font-size: 1.5rem;
}

/* Add a subtle top border to the button area if desired */
.btn-primary-green {
    border-radius: 50px;
    font-size: 1rem;
    /* letter-spacing: 0.5px; */
}

/* Custom Select Dropdown Styling */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.form-select.premium-select {
    appearance: none;
    /* Hides default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 14px 20px;
    border-radius: 50px !important;
    /* Matches your pill shape */
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316357d'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    color: #4a5568 !important;
    transition: all 0.3s ease;
}

.form-select.premium-select:focus {
    border-color: #0B1F3A !important;
    box-shadow: 0 0 0 3px rgba(22, 53, 125, 0.1) !important;
}

/* Hover state for the dropdown list */
.form-select.premium-select option {
    padding: 15px;
    background-color: #ffffff;
    color: #2D2D2D;
}


/* Choices css */
/* Choices.js Customization */
.choices__inner {
    border-radius: 50px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 20px !important;
    background: #ffffff !important;
    min-height: 56px !important;
    display: flex;
    align-items: center;
}

.choices__list--dropdown {
    border-radius: 20px !important;
    margin-top: 10px !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    padding: 10px;
}

.choices__item--choice {
    padding: 12px 20px !important;
    border-radius: 10px !important;
}

.choices__item--choice.is-highlighted {
    background-color: #0B1F3A !important;
    color: white !important;
}

.choices[data-type*='select-one']::after {
    border-color: #0B1F3A transparent transparent transparent !important;
    right: 20px !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    z-index: 9999;
}


/* Styling for the section header */
.display-5 {
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

@media (max-width: 767px) {
    .display-5 {
        font-size: 32px;
        margin-bottom: 20px;
    }
}

/* Styling for the section header */
.display-6 {
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .display-6 {
        font-size: 22px;
        margin-bottom: 20px;
    }
}



/* Badge styling for the eyebrow */
.badge-step {
    display: inline-block;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #0B1F3A;
}

/* Subtle background for the whole section */
#financial {
    background-color: #f9f7f2;
    /* Soft Cream */
    padding: 100px 0;
}

/* Enhancing the card shadow for depth */
.quiz-main-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.quiz-main-card:hover {
    transform: translateY(-5px);
}

/* Improving text readability in the quiz */
.quiz-step h3 {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 2rem !important;
}

.navbar-brand img {
    transition: transform 0.3s ease;
    max-width: 195px;
    /* Adjust based on your logo proportions */
}

/* .navbar-brand:hover img {
    transform: scale(1.02);
} */

/* Ensure mobile menu logo doesn't hug the edges */
.offcanvas-title img {
    padding-left: 10px;
}

/* Smooth active state for nav links */
.nav-link:hover {
    color: #c9a84c !important;

    transform: translateY(-1px);
}

.offcanvas-title img {
    height: 43px;
}

/* Footer Logo Styling */
.footer-brand img {
    /* Ensures logo stays high quality and responds to theme */
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: block;
    height: 50px;
}

.footer-brand:hover img {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Adjust column spacing if necessary */
.footer-padding .col-lg-5 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Ensure paragraph starts exactly where the logo ends */
.footer-brand+p {
    margin-top: 0;
}


/* WhatsApp Always Visible */
.whatsapp-always {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white !important;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    z-index: 99999;
    /* Ensures it is above everything else */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: transform 0.3s ease;
}

/* Optional: Subtle Pulse to draw attention without moving position */
.whatsapp-always::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #25d366;
    z-index: -1;
    animation: wa-ripple 2s infinite;
}

@keyframes wa-ripple {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.whatsapp-always:hover {
    transform: scale(1.1);
}

/* Text label appearing next to icon on desktop */
.wa-label {
    position: absolute;
    right: 75px;
    background: #2D2D2D;
    /* Matches your Dark Blue brand color */
    color: white;
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Make the label always visible or only on hover: */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.whatsapp-always:hover .wa-label {
    opacity: 1;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .whatsapp-always {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 28px;
    }

    .wa-label {
        display: none;
        /* Hide text label on small screens */
    }
}


/* Sidebar Consultation Tab */
.sidebar-consultation-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9998;
    /* Just below WhatsApp */
}

.sidebar-consultation-tab button {
    background-color: #0B1F3A;
    /* Nepal Wealth Dark Blue */
    color: #ffffff;
    border: none;
    padding: 20px 12px;
    border-radius: 12px 0 0 12px;
    /* Rounded only on the left side */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* Vertical Text Logic */
.sidebar-consultation-tab button span {
    writing-mode: vertical-rl;
    /* Vertical text */
    text-orientation: mixed;
    transform: rotate(180deg);
    /* Flips text to read bottom-to-top */
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sidebar-consultation-tab button i {
    font-size: 20px;
}

/* Hover Effect: Slide out slightly */
.sidebar-consultation-tab button:hover {
    padding-right: 20px;
    background-color: #061325;
    color: #ffffff;
}

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

    /* On mobile, sidebar tabs can block reading. 
       We convert it to a small square or hide it if WhatsApp is enough. */
    .sidebar-consultation-tab button span {
        display: none;
        /* Hide text on mobile */
    }

    .sidebar-consultation-tab button {
        padding: 15px 10px;
        border-radius: 8px 0 0 8px;
    }

    /* Alternatively, move it higher so it doesn't hit the WhatsApp button */
    .sidebar-consultation-tab {
        top: 40%;
    }
}

/* Testimonial Section Styles */
.testimonial-card {
    background: #ffffff;
    border-radius: 32px;
    padding: 45px 40px;
    border: 1px solid rgba(22, 53, 125, 0.05);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.testimonial-card:hover {
    transform: translateY(-10px);
    border-color: #0b1f3a57;
    box-shadow: 0 20px 40px rgb(201 168 76 / 16%);
}

.quote-icon i {
    font-size: 40px;
    color: #0B1F3A;
    opacity: 0.5;
}

.testimonial-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #2D2D2D;
    font-style: italic;
    opacity: 1;
}

.client-info h5 {
    color: #0B1F3A;
    font-size: 18px;
}

.client-info span {
    color: #2D2D2D;
}
.client-details h3{
    font-size: 18px;
}

/* Ensure staggering reveal animation works on mobile */
@media (max-width: 767px) {
    .testimonial-card {
        padding: 30px;
        margin-bottom: 10px;
    }
}

.client-monogram {
    width: 45px;
    height: 45px;
    background-color: #0B1F3A;
    /* Brand Navy */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Optional: Give each card a slightly different monogram background color */
.col-lg-4:nth-child(2) .client-monogram {
    background-color: #1d59a8;
}

.col-lg-4:nth-child(3) .client-monogram {
    background-color: #2a7977;
}

/* quiz */
/* Fix visibility for quiz components */
.quiz-step-content {
    display: none;
}

.quiz-step-content.active-step {
    display: block !important;
}

.quiz-q-step {
    display: none;
}

.quiz-q-step.active-q {
    display: block !important;
}

.btn-quiz-opt {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 16px 20px;
    border-radius: 12px;
    font-weight: 500;
    color: #0B1F3A;
    text-align: left;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-quiz-opt:hover {
    border-color: #0B1F3A;
    background-color: #f0f4ff;
}

.quiz-step-content {
    display: none;
}

.quiz-step-content.active-step {
    display: block !important;
}

.quiz-q-step {
    display: none;
}

.quiz-q-step.active-q {
    display: block !important;
}

.btn-quiz-opt {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 16px 20px;
    border-radius: 12px;
    font-weight: 500;
    color: #0B1F3A;
    text-align: left;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-quiz-opt:hover {
    border-color:  #e3e3e3 !important;
    background-color: #f7f2e4;
}


.eco-orbit-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 750px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eco-hub {
    position: relative;
    z-index: 10;
    width: 220px;
    height: 220px;
    background: #0b1f3a;
    color: #c9a84c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 15px 45px rgba(22, 53, 125, 0.2);
    border: 8px solid #fff;
    /* Start at scale 0 for the pop-in */
    transform: scale(0);
    opacity: 0;
}

.eco-node {
    position: absolute;
    /* This forces all nodes to sit exactly behind the hub initially */
    top: 50%;
    left: 50%;
    margin-top: -42px;
    /* Half of circle height (85/2) */
    margin-left: -42px;
    /* Half of circle width (85/2) */
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Start invisible and scaled down at the center */
    opacity: 0;
    transform: scale(0);
}

.node-circle {
    width: 85px;
    height: 85px;
    background: #0b1f3a;
    color: #c9a84c;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #eef2f7;
}

.node-label {
    background: #ffffff;
    padding: 8px 15px;
    border-radius: 100px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f4f8;
    margin-top: 10px;
    min-width: 150px;
    /* Labels start invisible to fade in later */
    opacity: 0;
    transform: translateY(10px);
}

.orbit-ring-decoration {
    position: absolute;
    width: 560px;
    height: 560px;
    border: 2px dashed rgba(22, 53, 125, 0.15);
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    /* Hidden initially */
    transform: scale(0.8);
}

.eco-hub {
    /* ... your existing hub styles ... */
    transform: scale(0);
    /* Start scaled down */
    opacity: 0;
}

.eco-node {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    /* Center alignment */
    margin-left: -95px;
    z-index: 5;
    opacity: 0;
    transform: scale(0);
}

.eco-orbit-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 700px;
    /* Adjusted height for better vertical fit */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-ring-decoration {
    position: absolute;
    width: 600px;
    height: 600px;
    border: 3px dashed rgba(22, 53, 125, 0.15);
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
}

.node-circle {
    width: 90px;
    /* Slightly smaller to match screenshot proportions */
    height: 90px;
    background: #0b1f3a;
    color: #c9a84c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f4f8;
    position: relative;
    z-index: 2;
    /* Sits above the label */
}

.node-label {
    background: #ffffff;
    padding: 10px 20px;
    border-radius: 100px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f4f8;
    margin-top: -5px;
    /* Pulls the label up to overlap the circle */
    min-width: 180px;
    position: relative;
    z-index: 1;
}

.node-label h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0B1F3A;
    line-height: 1.2;
}
@media (max-width: 768px) {
    .node-label h3 {
        font-size: 10px;
    }
}

.node-label span {
    font-size: 13px;
    color: #2D2D2D;
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

/* NRI / Diaspora Section */
.nrn-diaspora-section {
    background-color: var(--cream-bg) !important;
    /* Soft Slate Blue to separate visually */
    overflow: hidden;
}

.nrn-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 32px;
    /* Matching the website's theme */
    height: 100%;
    border: 1px solid #dedede;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.nrn-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(22, 53, 125, 0.06);
}

.nrn-icon {
    width: 50px;
    height: 50px;
    background: rgb(201 168 76 / 16%);
    color: #0B1F3A;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 25px;
}

.nrn-icon-2 {
    color: #ee1d23 !important;

}

.nrn-icon-3 {
    color: #c9a84c !important;
}

.nrn-icon-4 {
    color: #171717 !important;
}

.nrn-card h3 {
    color: #0B1F3A;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 24px;
}
@media (max-width: 768px) {
    .nrn-card h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }
}

.nrn-card p {
    font-size: 15px;
    color: #2D2D2D;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Specific Highlight for WhatsApp card */
.wa-highlight {
    border: 1px solid #dedede;
}

.wa-highlight .nrn-icon {
    background: #f7f2e4;
    color: #25d366;
}

/* Trust Signal Styling */
.nrn-trust-signal {
    background: #ffffff;
    display: inline-block;
    padding: 18px 35px;
    border-radius: 50px;
    font-weight: 600;
    color: #0B1F3A;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(22, 53, 125, 0.1);
}

@media (max-width: 767px) {
    .nrn-card {
        padding: 30px;
    }

    .nrn-trust-signal {
        border-radius: 20px;
        font-size: 14px;
        padding: 15px 25px;
    }
}


/* Regulatory Top Bar */
.regulatory-top-bar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #edeff5;
    color: #0B1F3A;
    font-size: 12px;
}

.reg-number i {
    font-size: 13px;
    vertical-align: middle;
}

/* Authority Logo Grid */
.authority-logo-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    opacity: 0.7;
    /* Premium muted look */
    transition: opacity 0.3s ease;
}

.authority-logo-grid:hover {
    opacity: 1;
}

.authority-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 150px;
}

.auth-logo {
    height: 45px;
    /* Standardized height for all logos */
    width: auto;
    filter: grayscale(100%);
    /* Muted until hover */
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.authority-item:hover .auth-logo {
    filter: grayscale(0%);
    transform: translateY(-5px);
}

.authority-item span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #4a5568;
    letter-spacing: 0.5px;
}

@media (max-width: 767px) {
    .authority-logo-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}


/* --- PIXEL PERFECT COMPLIANCE SECTION --- */
.regulatory-section {
    background-color: #f9f6f0;
    /* Matches your bg-cream */
}

.compliance-card {
    background: #ffffff;
    border-radius: 24px;
    /* Soft rounding like the screenshot */
    padding: 40px 30px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.compliance-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgb(201 168 76 / 16%);
}

.compliance-logo-box {
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.compliance-logo-box img {
    max-height: 100%;
    max-width: 120px;
    object-fit: contain;
    /* Optional: uncomment if you want grayscale-to-color effect */
    /* filter: grayscale(100%); opacity: 0.7; transition: 0.3s; */
}

/* .compliance-card:hover img { filter: grayscale(0); opacity: 1; } */

.compliance-title {
    color: #0B1F3A;
    /* Nepal Wealth Navy */
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Specific Badge style from screenshot */
.compliance-badge {
    background-color: rgb(201 168 76 / 16%);
    /* Light gray-blue pill */
    color: #0B1F3A;
    font-size: 10px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

@media (max-width: 767px) {
    .compliance-card {
        padding: 30px 20px;
    }
}

/* Top Bar Styling */
.regulatory-top-bar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #edeff5;
    color: #0B1F3A;
    font-size: 11px;
}

.reg-badge-mini strong {
    font-weight: 700;
    color: #08121e;
}

/* Homepage Compliance Cards */
.compliance-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 30px;
    border: var(--bs-border-width) var(--bs-border-style) #e3e3e3 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease;
    height: 100%;
}

.compliance-card:hover {
    transform: translateY(-8px);
}

.compliance-logo-box {
    height: 60px;
    /* Fixed height for client-uploaded logos */
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compliance-logo-box img {
    max-height: 100%;
    max-width: 100%;
    filter: grayscale(100%);
    /* Keeps it professional */
    opacity: 0.7;
}

.compliance-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.compliance-title {
    color: #0B1F3A;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.compliance-pill {
    background-color: rgb(201 168 76 / 16%);
    color: #2D2D2D;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    display: inline-block;
}

.compliance-logo-box {
    height: 70px;
    /* Standardize space for logos */
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.compliance-logo-box img {
    max-height: 100%;
    max-width: 140px;
    /* Increased slightly for wide logos like NIA */
    object-fit: contain;
    filter: grayscale(0%);
    opacity: 1;
    transition: all 0.3s ease;
}

.compliance-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}



/* NEPSE Sub-Ticker Container */
.nepse-sub-ticker {
    background-color: #fcfcfc;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    overflow: hidden;
}

.status-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Individual Index Card */
.index-card {
    flex: 0 0 auto;
    padding: 5px 20px;
    border-left: 4px solid #ddd;
    /* Default */
    min-width: 160px;
    transition: background 0.2s;
}

/* Dynamic Colors Based on Trend */
.index-card.down {
    border-left-color: #fecaca;
}

/* Light Red Border */
.index-card.down .index-change {
    color: #dc2626;
}

/* Bold Red Text */

.index-card.up {
    border-left-color: #bbf7d0;
}

/* Light Green Border */
.index-card.up .index-change {
    color: #16a34a;
}

/* Bold Green Text */

.index-name {
    display: block;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 2px;
}

.index-value {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0;
}

.index-change {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Navigation Buttons */
.nav-btn {
    width: 28px;
    height: 28px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
}

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

/* Wrapper to hide scrollbar but keep functionality */
.ticker-scroll-wrapper {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.ticker-scroll-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}


/* --- Stock Ticker Bar Styles --- */
.stock-ticker-section {
    padding: 15px 0;
    background: var(--cream-bg) !important;
}

.ticker-container {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    height: 90px;
    overflow: hidden;
    border: 1px solid #edf2f7;
}

/* Left Section */
.trending-label {
    background: #0b1f3a;
    /* The bright blue from screenshot */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}

/* Scrolling Track */
.stock-scroll-area {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
}

.stock-track {
    display: flex;
    gap: 0;
    animation: marquee 40s linear infinite;
    white-space: nowrap;
}

.stock-track:hover {
    animation-play-state: paused;
}

.stock-item {
    flex: 0 0 220px;
    padding: 0 20px;
    border-right: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.company-name {
    font-size: 11px;
    color: #8c8c8c;
    display: block;
    margin-bottom: 2px;
}

.symbol {
    font-weight: 800;
    font-size: 15px;
}

.color-blue {
    color: #0b1f3a;
}

.price {
    font-weight: 700;
    font-size: 15px;
    color: #262626;
}

.stock-change {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.stock-change.up {
    color: #C9A84C;
}

.stock-change.down {
    color: #e53e3e;
}

/* Right Status Section */
.market-status-box {
    background: #fffbe6;
    /* Light yellow from screenshot */
    border-left: 1px solid #ffe58f;
    padding: 0 20px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.status-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #262626;
}

.status-indicator {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-indicator.close {
    color: #ff4d4f;
}

.status-indicator.open {
    color: #C9A84C;
}

.status-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

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

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

@media (max-width: 768px) {
    .trending-label {
        padding: 0 10px;
        font-size: 12px;
    }

    .stock-item {
        flex: 0 0 160px;
    }
}

/* Update the animation duration for more items */
.stock-track {
    display: flex;
    gap: 0;
    /* Increase 40s to 60s if it feels too fast with 12 items */
    animation: marquee 60s linear infinite;
    white-space: nowrap;
}

/* Ensure the track width can accommodate all 24 items (12 unique + 12 duplicates) */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    /* We translate by 50% because the set is duplicated exactly */
    100% {
        transform: translateX(-50%);
    }
}

/* Animation performance optimization for NRN Section */
.nrn-diaspora-section .reveal-up {
    will-change: transform, opacity;
}

/* Typography Pairing: Playfair Display for Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.hero-main,
.main-title,
.uv-display-3,
.showcase-title,
.about-title,
.checkup-title,
.split-heading {
    font-family: 'Playfair Display', serif;
}

/* Ensure UI elements, buttons, and badges stay crisp using Inter */
.btn,
.badge-pill,
.pill-item,
.nav-link,
.small-label,
.eyebrow,
.compliance-pill {
    font-family: 'Inter', sans-serif;
}

.ls-tight {
    /* letter-spacing: -2.5px;  <-- REMOVE THIS */
    line-height: 1.1;
}

.hero-main {
    font-size: 64px;
    line-height: 1.1;
    /* letter-spacing: -1px;  <-- REMOVE THIS */
    color: #2D2D2D;
}

@media (max-width: 768px) {
    .hero-main {
        font-size: 39px;
        line-height: 1.2;
    }
}


/* --- MOBILE FIX: SCALED CIRCULAR PARTNER ECOSYSTEM --- */
@media (max-width: 991px) {

    /* 1. Scale container and prevent horizontal scrolling */
    .eco-orbit-container {
        height: 350px !important;
        max-width: 100vw;
        overflow: hidden;
    }

    /* 2. Force elements to be visible (bypassing the disabled JS) */
    .eco-hub,
    .orbit-ring-decoration,
    .eco-node,
    .node-label {
        opacity: 1 !important;
    }

    /* 3. Scale down the dashed ring */
    .orbit-ring-decoration {
        width: 270px !important;
        height: 270px !important;
        transform: scale(1) !important;
    }

    /* 4. Scale down the center hub */
    .eco-hub {
        width: 120px !important;
        height: 120px !important;
        transform: scale(1) !important;
        border-width: 4px !important;
    }

    .eco-hub .display-6 {
        font-size: 15px !important;
        margin-bottom: 2px !important;
    }

    .eco-hub .small {
        font-size: 9px !important;
    }

    /* 5. Scale down the Node Circles and Labels */
    .eco-node {
        margin-top: -22px !important;
        /* Half of new 45px height */
        margin-left: -46px !important;
        /* Half of new 45px width */
    }

    .node-circle {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }

    .node-label {
        min-width: 90px !important;
        max-width: 95px !important;
        padding: 5px !important;
        margin-top: -6px !important;
        transform: translateY(0) !important;
        /* Reset JS start state */
    }

    .node-label h6 {
        font-size: 9.5px !important;
        margin-bottom: 2px !important;
    }

    .node-label span {
        font-size: 8px !important;
    }

    /* 6. Manually position the 7 nodes in a circle (Radius = 135px) */
    /* Math used: 360 degrees / 7 nodes = ~51.4 degrees apart */
    .eco-node[data-q="1"] {
        transform: rotate(-90deg) translate(135px) rotate(90deg) !important;
    }

    .eco-node[data-q="2"] {
        transform: rotate(-38.6deg) translate(135px) rotate(38.6deg) !important;
    }

    .eco-node[data-q="3"] {
        transform: rotate(12.8deg) translate(135px) rotate(-12.8deg) !important;
    }

    .eco-node[data-q="4"] {
        transform: rotate(64.3deg) translate(135px) rotate(-64.3deg) !important;
    }

    .eco-node[data-q="5"] {
        transform: rotate(115.7deg) translate(135px) rotate(-115.7deg) !important;
    }

    .eco-node[data-q="6"] {
        transform: rotate(167.1deg) translate(135px) rotate(-167.1deg) !important;
    }

    .eco-node[data-q="7"] {
        transform: rotate(218.5deg) translate(135px) rotate(-218.5deg) !important;
    }
}

/* Extra tweak for very small phones (like iPhone SE) to prevent edge clipping */
@media (max-width: 380px) {
    .eco-orbit-container {
        transform: scale(1);
    }
}

.copyright-text {
    color: #0B1F3A;
    transition: color 0.3s ease;
}

.copyright-text:hover {
    color: #061325 !important;

}

/* stock */
/* Ticker Premium Wrapper */
.ticker-premium-wrap {
    padding-top: 20px;
    /* Overlap slightly with the section above for modern feel */
    position: relative;
    z-index: 100;
    padding-bottom: 20px;
    background: #f9f6f0;
}

.ticker-floating-bar {
    background: #0B1F3A;
    /* Brand Dark Blue */
    border-radius: 100px;
    /* Pill shape */
    display: flex;
    align-items: center;
    padding: 8px 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    height: 60px;
}

/* Index Anchor (Left Fixed Part) */
.index-anchor {
    display: flex;
    align-items: center;
    padding-right: 25px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.index-label {
    font-family: 'Playfair Display', serif;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin-right: 12px;
    letter-spacing: 1px;
}

.index-price {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    margin-right: 8px;
}

.index-change.up {
    color: #2ecc71;
    /* Brand Green */
    font-size: 13px;
    font-weight: 500;
}

/* Scroll Container */
.ticker-scroll-container {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.ticker-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.t-item {
    display: flex;
    align-items: center;
    padding: 0 25px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.t-symbol {
    font-weight: 700;
    color: #fff;
    margin-right: 8px;
}

.t-price {
    margin-right: 8px;
    font-family: 'Inter', sans-serif;
}

.t-pct.positive {
    color: #2ecc71;
}

.t-pct.negative {
    color: #e74c3c;
}

/* Status Badge */
.market-status-badge {
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 15px;
    border-radius: 50px;
    margin-left: 20px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-text {
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(46, 204, 113, 0.4);
    animation: pulse-green 2s infinite;
}

/* Animations */
@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }

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

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .ticker-floating-bar {
        padding: 8px 15px;
        border-radius: 12px;
        height: auto;
        flex-direction: column;
        align-items: flex-start;
    }

    .index-anchor {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
}


/* new stock */
.ticker-premium-wrap {
    padding: 20px 0;
    background: #f9f6f0;
}

.ticker-floating-bar {
    background: #0B1F3A;
    border-radius: 100px;
    display: flex;
    align-items: center;
    padding: 8px 30px;
    height: 60px;
    overflow: hidden;
}

.index-anchor {
    display: flex;
    align-items: center;
    padding-right: 25px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.index-label {
    font-family: 'Playfair Display', serif;
    color: #fff;
    font-weight: 700;
    margin-right: 12px;
}

.index-price {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    margin-right: 8px;
}

.index-change.up {
    color: #2ecc71;
    font-size: 13px;
}

.index-change.negative {
    color: #e74c3c;
    font-size: 13px;
}

.ticker-scroll-container {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ticker-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: ticker-scroll 45s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.t-item {
    display: flex;
    align-items: center;
    padding: 0 30px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.t-symbol {
    font-weight: 700;
    color: #fff;
    margin-right: 8px;
}

.t-price {
    margin-right: 8px;
    font-family: 'Inter', sans-serif;
}

.t-pct.positive {
    color: #2ecc71;
    font-weight: 600;
}

.t-pct.negative {
    color: #e74c3c;
    font-weight: 600;
}

.market-status-badge {
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 15px;
    border-radius: 50px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-text {
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    animation: pulse-green 2s infinite;
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }

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

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

/* Professional Footer Legal Info */
.footer-reg-info {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 5px;
    padding: 6px 12px;
    background-color: rgba(11, 31, 58, 0.05); /* Very light brand blue tint */
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #4a5568;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}

.footer-reg-info .divider {
    color: #0b1f3a;
    font-weight: 300;
}

.footer-reg-info strong {
    color: #0B1F3A; /* Brand Blue */
    font-weight: 700;
}

/* Mobile fix for legal info */
@media (max-width: 767px) {
    .footer-reg-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        background: transparent;
        padding: 0;
    }
    .footer-reg-info .divider {
        display: none;
    }
}

/* --- REFINED MOBILE TICKER FIX --- */
@media (max-width: 768px) {
    .ticker-premium-wrap {
        padding: 15px 0; /* Tighter vertical spacing for the section */
    }

    .ticker-floating-bar {
        height: auto !important; /* Allow the bar to expand vertically */
        padding: 12px 16px !important;
        border-radius: 24px !important; /* Change from 100px pill to a rounded box */
        flex-direction: column !important; /* Stack Index and Ticker */
        align-items: flex-start !important;
        gap: 8px; /* Space between the index and the scrolling items */
    }

    .index-anchor {
        border-right: none !important; /* Remove vertical divider */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Add horizontal divider */
        width: 100% !important;
        padding-right: 0 !important;
        padding-bottom: 8px !important;
        margin-bottom: 4px !important;
        justify-content: center !important; /* Push NEPSE to left, Price to right */
    }

    .index-label {
        font-size: 13px !important;
        letter-spacing: 0.5px;
    }

    .index-price {
        font-size: 15px !important;
    }

    /* THE FIX: Ensure the scroll container has enough height and visibility */
    .ticker-scroll-container {
        width: 100% !important;
        height: 30px !important; /* Explicit height to prevent clipping */
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .ticker-track {
        height: 100%;
        display: flex;
        align-items: center;
        animation-duration: 30s !important; /* Speed up slightly for small screens */
    }

    .t-item {
        padding: 0 15px !important; /* Tighter padding between stocks */
        font-size: 12px !important; /* Slightly smaller text for mobile */
        display: flex !important;
        align-items: center;
        height: 100%;
    }

    .market-status-badge {
        /* Usually hidden on mobile to save vertical space, 
           but if you want it, keep it 'flex' and it will stack at bottom */
        display: none !important; 
    }
}

.footer-link{
    color: #08121e; 
    font-size: 18px;
}

.border-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) #e3e3e3 !important;
}
.border-top {
    border-top: var(--bs-border-width) var(--bs-border-style) #e3e3e3 !important;
}