/* ==========================================================================
   Tether Elite Finance - Deep Navy / Slate Dark Theme
   Tone: #0c1527 (Deep luminous crypto navy, soft on the eyes, luxury feel)
   ========================================================================== */

:root {
    --bg-deep: #0c1527;
    --bg-surface: #101c33;
    --bg-surface-elevated: #14223d;
    --bg-surface-hover: #172847;
    --bg-alt: #080f1d;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(230, 146, 46, 0.35);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --brand-gold: #E6922E;
    --brand-gold-hover: #d47a16;
    --brand-gold-glow: rgba(230, 146, 46, 0.2);
}

/* Base Body & Layout */
html, body {
    background-color: var(--bg-deep) !important;
    color: var(--text-secondary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p {
    color: var(--text-secondary) !important;
}

a {
    color: var(--brand-gold);
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: var(--brand-gold-hover);
    text-decoration: none;
}

/* ==========================================================================
   Top Bar Area
   ========================================================================== */
.topbar-area {
    background: var(--bg-alt) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

.topbar-left ul li a {
    color: var(--text-secondary) !important;
}

.topbar-left ul li a:hover {
    color: var(--brand-gold) !important;
}

.topbar-left ul li a i {
    color: var(--brand-gold) !important;
}

/* ==========================================================================
   Header & Sticky Navigation (Desktop & Large Screens)
   ========================================================================== */
.header-area {
    background: transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Default Header (Top of page) constraints */
.header-area .logo a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 14px 0 !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}

.header-area .logo img,
.header-area .navbar-brand img {
    max-height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

.header-area .main-menu ul.navbar-nav li a {
    padding: 22px 14px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #e2e8f0 !important;
    letter-spacing: 0.3px !important;
    transition: all 0.25s ease !important;
}

.header-area .main-menu ul.navbar-nav li a:hover,
.header-area .main-menu ul.navbar-nav li.active a {
    color: var(--brand-gold) !important;
}

.header-area .header-right-link {
    padding: 16px 0 !important;
    margin-left: 20px !important;
    width: auto !important;
    float: right !important;
    transition: all 0.25s ease !important;
}

.header-area .s-menu {
    padding: 8px 22px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    letter-spacing: 0.4px !important;
    display: inline-block !important;
}

/* Sleek, Compact Sticky Navigation on Scroll */
.header-area.stick {
    background: rgba(10, 18, 36, 0.96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.header-area.stick .logo a {
    padding: 7px 0 !important;
}

.header-area.stick .logo img,
.header-area.stick .navbar-brand img {
    max-height: 32px !important;
    width: auto !important;
}

.header-area.stick .main-menu ul.navbar-nav li a {
    padding: 13px 12px !important;
    font-size: 14px !important;
    color: #e2e8f0 !important;
}

.header-area.stick .main-menu ul.navbar-nav li a:hover,
.header-area.stick .main-menu ul.navbar-nav li.active a {
    color: var(--brand-gold) !important;
}

.header-area.stick .header-right-link {
    padding: 9px 0 !important;
}

.header-area.stick .s-menu {
    padding: 6px 18px !important;
    font-size: 13px !important;
}

/* Always preserve white/gold logo on dark theme */
.header-area .logo a.white-logo,
.header-area.stick .logo a.white-logo {
    display: inline-flex !important;
}

.header-area .logo a.black-logo,
.header-area.stick .logo a.black-logo {
    display: none !important;
}

/* Dropdown Sub-menu */
.main-menu ul.nav li ul.sub-menu {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important;
    padding: 8px 0 !important;
}

.main-menu ul.nav li ul.sub-menu li a,
.header-area.stick .main-menu ul.nav li ul.sub-menu li a {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    transition: all 0.2s ease;
}

.main-menu ul.nav li ul.sub-menu li a:hover,
.header-area.stick .main-menu ul.nav li ul.sub-menu li a:hover {
    background: rgba(230, 146, 46, 0.12) !important;
    color: var(--brand-gold) !important;
    padding-left: 20px !important;
}

/* ==========================================================================
   Section Headlines & Common Containers
   ========================================================================== */
.section-headline h3 {
    color: var(--text-primary) !important;
}

.section-headline p {
    color: var(--text-secondary) !important;
}

.bg-color {
    background-color: var(--bg-alt) !important;
}

/* ==========================================================================
   Counter / Stats Area
   ========================================================================== */
.counter-area {
    background-color: var(--bg-alt) !important;
}

.fun_text {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    padding: 30px 18px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.3s ease;
}

.fun_text:hover {
    transform: translateY(-4px);
    border-color: var(--border-highlight) !important;
}

.fun_text .counter {
    color: var(--text-primary) !important;
    font-weight: 700;
}

.fun_text h4 {
    color: var(--text-secondary) !important;
}

.fun_text .counter-icon {
    color: var(--brand-gold) !important;
}

/* ==========================================================================
   About & Support Services
   ========================================================================== */
.about-area {
    background-color: var(--bg-deep) !important;
}

.about-content h3 {
    color: var(--text-primary) !important;
}

.about-content p {
    color: var(--text-secondary) !important;
}

.support-service-area, .services-area {
    background-color: var(--bg-deep) !important;
}

.support-services {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    padding: 28px 22px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease;
}

.support-services:hover {
    transform: translateY(-4px);
    border-color: var(--border-highlight) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.support-content h4 {
    color: var(--text-primary) !important;
}

.support-content p {
    color: var(--text-secondary) !important;
}

.support-images i {
    color: var(--brand-gold) !important;
}

/* ==========================================================================
   Investment Plans Area (Pricing Cards) - High Contrast Fix
   ========================================================================== */
.invest-area {
    background-color: var(--bg-alt) !important;
}

.pri_table_list {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-highlight) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    color: #e2e8f0 !important;
    transition: all 0.3s ease;
}

.pri_table_list:hover {
    transform: translateY(-6px);
    border-color: var(--brand-gold) !important;
    box-shadow: 0 15px 40px var(--brand-gold-glow) !important;
}

.top-price-inner {
    border-bottom: 1px solid var(--border-subtle) !important;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.pri_table_list .rates {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.pri_table_list .prices {
    color: var(--brand-gold) !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding-right: 0 !important;
}

/* High visibility for 'Daily' */
.pri_table_list span.users {
    color: #f1f5f9 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* High visibility for 'Days' */
.pri_table_list .per-day {
    color: #f8fafc !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-top: 12px !important;
    display: block !important;
    letter-spacing: 0.5px !important;
}

.pricing-text {
    color: #e2e8f0 !important;
}

/* High visibility for plan features list */
.pri_table_list ol li {
    color: #e2e8f0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
    padding: 9px 0 !important;
}

.pri_table_list ol li.investment-title {
    color: var(--brand-gold) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* Modal Windows for Investment details */
.modal-content {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-subtle) !important;
}

.modal-header .modal-title {
    color: var(--text-primary) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-subtle) !important;
}

.modal-body p {
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   Live Platform Transaction Stream Area
   ========================================================================== */
.payment-history-area {
    background: var(--bg-alt) !important;
    background-image: none !important;
    position: relative !important;
}

.payment-history-area::after {
    display: none !important;
    background: transparent !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.payment-history-area .section-headline h3 {
    color: #f8fafc !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}

.payment-history-area .section-headline p {
    color: #cbd5e1 !important;
    font-size: 16px !important;
    max-width: 650px !important;
    margin: 10px auto 0 !important;
    line-height: 1.6 !important;
}

.diposite-box {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.diposite-box::after {
    background: var(--brand-gold) !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.diposite-box h4 {
    background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-hover) 100%) !important;
    box-shadow: 0 4px 15px var(--brand-gold-glow) !important;
    border-radius: 6px !important;
}

.diposite-box span {
    background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-hover) 100%) !important;
    box-shadow: 0 4px 15px var(--brand-gold-glow) !important;
    border-radius: 6px !important;
}

.deposite-content table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    overflow: hidden;
    width: 100% !important;
    table-layout: fixed !important;
}

.deposite-content th {
    background: var(--bg-surface-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    padding: 12px 10px !important;
    font-weight: 700;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.deposite-content td {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    padding: 10px 8px !important;
    height: 48px !important;
    vertical-align: middle !important;
}

/* Explicit Column Alignments & Proportions for Perfect Uniformity */
.deposite-content th.col-name,
.deposite-content td.col-name {
    width: 30% !important;
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deposite-content th.col-date,
.deposite-content td.col-date {
    width: 25% !important;
    text-align: left !important;
    white-space: nowrap;
}

.deposite-content th.col-amount,
.deposite-content td.col-amount {
    width: 25% !important;
    text-align: left !important;
    white-space: nowrap;
    font-weight: 600 !important;
}

.deposite-content th.col-currency,
.deposite-content td.col-currency {
    width: 20% !important;
    min-width: 80px !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 6px 4px !important;
}

.deposite-content tr:nth-child(even) {
    background-color: #0d172b !important;
}

.deposite-content tr:nth-child(odd) {
    background-color: var(--bg-surface) !important;
}

.deposite-content tr:hover {
    background-color: var(--bg-surface-hover) !important;
}

/* Uniform Crypto Coin Pill Badge (Desktop / Big Screen) */
.crypto-coin-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    box-sizing: border-box !important;
    gap: 5px !important;
    padding: 0 6px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    margin: 0 auto !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    user-select: none !important;
    cursor: default !important;
    transition: all 0.2s ease !important;
}

.crypto-coin-pill:hover {
    background: rgba(230, 146, 46, 0.15) !important;
    border-color: rgba(230, 146, 46, 0.4) !important;
}

.crypto-coin-pill svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

.crypto-coin-pill .crypto-ticker,
.crypto-coin-pill span {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    line-height: 1 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   Reviews / Testimonials Carousel - Enclosed Card Layout
   ========================================================================== */
.reviews-area, .testimonial-area {
    background-color: var(--bg-deep) !important;
}

.reviews-area .single-testi {
    margin: 0 0 30px !important;
}

.reviews-area .testi-text {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 14px !important;
    padding: 26px 22px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 240px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
}

.reviews-area .active.center .testi-text {
    border-color: var(--border-highlight) !important;
    box-shadow: 0 12px 35px var(--brand-gold-glow) !important;
}

/* ==========================================================================
   Reviews Page Grid (Guarantees Strict 3-Per-Row Layout & Equal Heights)
   ========================================================================== */
.review-page-area .reviews-content,
.reviews-grid-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.review-page-area .reviews-content::before,
.review-page-area .reviews-content::after,
.reviews-grid-row::before,
.reviews-grid-row::after {
    display: none !important;
    content: none !important;
}

.review-page-area .reviews-content > [class*="col-"],
.review-page-area .review-col,
.reviews-grid-row > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
}

@media (min-width: 992px) {
    .review-page-area .reviews-content > [class*="col-"],
    .review-page-area .review-col,
    .reviews-grid-row > [class*="col-"] {
        width: 33.33333333% !important;
        max-width: 33.33333333% !important;
        flex: 0 0 33.33333333% !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .review-page-area .reviews-content > [class*="col-"],
    .review-page-area .review-col,
    .reviews-grid-row > [class*="col-"] {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}

@media (max-width: 767px) {
    .review-page-area .reviews-content > [class*="col-"],
    .review-page-area .review-col,
    .reviews-grid-row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

.review-page-area .single-testi {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
}

.review-page-area .testi-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 250px !important;
}

.reviews-area .clients-text {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
}

.reviews-area .clients-text::after,
.reviews-area .clients-text::before {
    display: none !important;
}

.reviews-area .clients-text p {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    font-style: italic !important;
}

.reviews-area .client-rating {
    margin-bottom: 12px !important;
}

.reviews-area .client-rating a {
    color: var(--brand-gold) !important;
    font-size: 15px !important;
    padding-right: 3px !important;
}

/* Footer info inside the review card */
.reviews-area .testi-img {
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--border-subtle) !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
}

.reviews-area .guest-details {
    position: static !important;
    top: 0 !important;
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
}

.reviews-area .guest-details h4 {
    color: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 3px 0 !important;
    text-transform: capitalize !important;
}

.reviews-area .guest-details .guest-rev {
    color: var(--brand-gold) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

/* Owl Carousel indicators */
.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot > span {
    background: #1e293b !important;
}

.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot.active > span {
    background: var(--brand-gold) !important;
}

/* ==========================================================================
   FAQ Section - High Contrast Typography
   ========================================================================== */
.faq-area {
    background-color: var(--bg-alt) !important;
}

.faq-details .panel-default {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
}

.faq-details .panel-default > .panel-heading {
    background: var(--bg-surface-elevated) !important;
    color: var(--text-primary) !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 8px !important;
}

.faq-details h4.check-title {
    margin: 0 !important;
}

.faq-details h4.check-title a {
    color: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 16px 20px 16px 65px !important;
    display: block !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.faq-details h4.check-title a.active,
.faq-details h4.check-title a:hover {
    color: var(--brand-gold) !important;
}

.faq-details .panel-heading h4 a::before {
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    line-height: 52px !important;
    height: 100% !important;
    width: 48px !important;
    font-size: 15px !important;
}

.faq-details .panel-heading h4 a.active::before {
    color: #fff !important;
    background: var(--brand-gold) !important;
}

.faq-details .panel-body {
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: 18px 24px 22px 65px !important;
}

.faq-details .panel-body p {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ==========================================================================
   FAQ Contact Form Alignment Fix
   ========================================================================== */
.faq-area .faq-content {
    margin-left: 0 !important;
    width: 100% !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-highlight) !important;
    border-radius: 14px !important;
    padding: 32px 28px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35) !important;
}

.faq-content h4 {
    color: #f8fafc !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
}

.faq-content .contact-form .form-control {
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: #f8fafc !important;
    border-radius: 6px !important;
    height: 46px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    width: 100% !important;
    transition: all 0.2s ease !important;
}

.faq-content .contact-form textarea.form-control {
    height: 120px !important;
    resize: vertical !important;
}

.faq-content .contact-form .form-control:focus {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 2px var(--brand-gold-glow) !important;
    outline: none !important;
}

.faq-content .quote-btn {
    width: 100% !important;
    background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-hover) 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 13px 20px !important;
    border-radius: 6px !important;
    border: none !important;
    box-shadow: 0 4px 15px var(--brand-gold-glow) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.faq-content .quote-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 146, 46, 0.45) !important;
}

/* ==========================================================================
   Blog & News Section
   ========================================================================== */
.blog-area {
    background-color: var(--bg-deep) !important;
}

.single-blog {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease;
}

.single-blog:hover {
    transform: translateY(-4px);
    border-color: var(--border-highlight) !important;
}

.blog-content {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    padding: 20px !important;
}

.blog-content a h4 {
    color: var(--text-primary) !important;
}

.blog-content a h4:hover {
    color: var(--brand-gold) !important;
}

.blog-meta span {
    color: var(--text-muted) !important;
}

/* ==========================================================================
   Breadcrumb & Subpage Area
   ========================================================================== */
.breadcrumb-bg {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    top: 0 !important;
    margin: 25px auto 0 !important;
    display: inline-block !important;
    padding: 12px 28px !important;
}

.breadcrumb-bg h2 {
    color: var(--text-primary) !important;
}

.breadcrumb ul li {
    color: #f8fafc !important;
}

.breadcrumb ul li a {
    color: #cbd5e1 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.breadcrumb ul li a:hover {
    color: var(--brand-gold) !important;
}

.breadcrumb ul li.home-bread::after {
    color: var(--brand-gold) !important;
}

.bread-list li a {
    color: var(--text-secondary) !important;
}

.bread-list li a:hover {
    color: var(--brand-gold) !important;
}

/* ==========================================================================
   Forms, Inputs & Contact Area
   ========================================================================== */
.contact-area {
    background-color: var(--bg-deep) !important;
}

.contact-form {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    padding: 30px !important;
}

.contact-icon {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
}

.contact-icon h5 {
    color: var(--text-primary) !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background: var(--bg-surface-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 2px var(--brand-gold-glow) !important;
    outline: none !important;
}

/* ==========================================================================
   Auth Pages: Login, Register, Forgot Password & Password Reset
   ========================================================================== */
.login-area,
.signup-area {
    background-color: var(--bg-deep) !important;
    padding: 70px 0 !important;
}

.login-page,
.signup-page,
.auth-page {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.signup-page {
    max-width: 520px !important;
}

.login-form,
.signup-form,
.auth-card {
    background: linear-gradient(145deg, #131d31 0%, #0c1424 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 3px solid #E6922E !important;
    border-radius: 16px !important;
    padding: 38px 34px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(230, 146, 46, 0.04) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-align: left !important;
}

.auth-header {
    text-align: center !important;
    margin-bottom: 26px !important;
}

.auth-header .auth-badge-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(230, 146, 46, 0.12);
    border: 1px solid rgba(230, 146, 46, 0.35);
    color: #E6922E;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 4px 15px rgba(230, 146, 46, 0.2);
}

.login-title,
.auth-title {
    font-size: 23px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    text-align: center !important;
}

.auth-subtitle {
    font-size: 13.5px !important;
    color: #94a3b8 !important;
    margin: 0 auto !important;
    text-align: center !important;
    line-height: 1.5 !important;
    max-width: 360px !important;
}

/* Explicit, Crisp Form Labels */
.auth-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #e2e8f0 !important;
    margin-bottom: 7px !important;
    letter-spacing: 0.3px !important;
    text-align: left !important;
}

.auth-group {
    margin-bottom: 18px !important;
    position: relative !important;
}

/* Input Icon Container */
.input-icon-wrap {
    position: relative !important;
    width: 100% !important;
}

.input-icon-wrap .input-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #E6922E !important;
    font-size: 14.5px !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.input-icon-wrap .toggle-password {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    z-index: 3 !important;
    padding: 4px !important;
    outline: none !important;
    transition: color 0.2s ease !important;
}

.input-icon-wrap .toggle-password:hover {
    color: #E6922E !important;
}

/* Form Controls with High Contrast & Sleek Glow */
.login-form .form-control,
.signup-form .form-control,
.auth-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    height: 48px !important;
    padding: 10px 16px !important;
    font-size: 14.5px !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.input-icon-wrap .form-control,
.input-icon-wrap .auth-input {
    padding-left: 42px !important;
    padding-right: 42px !important;
}

.login-form .form-control:focus,
.signup-form .form-control:focus,
.auth-input:focus {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: #E6922E !important;
    box-shadow: 0 0 0 3px rgba(230, 146, 46, 0.25) !important;
    color: #ffffff !important;
    outline: none !important;
}

.login-form .form-control::placeholder,
.signup-form .form-control::placeholder,
.auth-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* Autofill Overrides for Chrome, Safari, Firefox */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #0f182c inset !important;
    box-shadow: 0 0 0px 1000px #0f182c inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    caret-color: #ffffff !important;
}

/* Checkbox & Remember Me / Terms */
.login-form .check-group,
.signup-form .check-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 14px !important;
    margin-bottom: 22px !important;
    position: static !important;
}

.login-form .check-box,
.signup-form .check-box {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    margin: 0 !important;
    color: #cbd5e1 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    position: relative !important;
    line-height: 1.4 !important;
}

.login-form .check-box-input,
.signup-form .check-box-input {
    position: relative !important;
    top: 2px !important;
    left: auto !important;
    width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #E6922E !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.login-form .remember-text,
.signup-form .remember-text {
    position: static !important;
    color: #cbd5e1 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    left: auto !important;
    top: auto !important;
    line-height: 1.4 !important;
}

.login-form .terms-link,
.signup-form .terms-link {
    color: #E6922E !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.login-form .terms-link:hover,
.signup-form .terms-link:hover {
    color: #ffaa47 !important;
}

.login-form .text-muted,
.login-form a.text-muted,
.login-form .forgot-link,
.login-form a.forgot-link {
    color: #E6922E !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    float: none !important;
    margin-top: 0 !important;
}

.login-form .text-muted:hover,
.login-form a.text-muted:hover,
.login-form .forgot-link:hover,
.login-form a.forgot-link:hover {
    color: #ffaa47 !important;
    text-decoration: underline !important;
}

/* Submit Button */
.login-form .login-btn,
.signup-form .login-btn,
.auth-submit-btn {
    background: linear-gradient(135deg, #E6922E 0%, #cf7818 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 13px 24px !important;
    text-transform: uppercase !important;
    width: 100% !important;
    box-shadow: 0 4px 16px rgba(230, 146, 46, 0.35) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.login-form .login-btn:hover,
.signup-form .login-btn:hover,
.auth-submit-btn:hover {
    background: linear-gradient(135deg, #f5a038 0%, #E6922E 100%) !important;
    box-shadow: 0 6px 22px rgba(230, 146, 46, 0.5) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* Bottom Links */
.login-form .sign-icon,
.signup-form .sign-icon {
    display: block !important;
    margin-top: 22px !important;
    text-align: center !important;
}

.login-form .acc-not,
.signup-form .acc-not {
    color: #94a3b8 !important;
    font-size: 13.5px !important;
    margin-top: 10px !important;
    text-align: center !important;
}

.login-form .acc-not a,
.signup-form .acc-not a {
    color: #E6922E !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 5px !important;
    transition: color 0.2s ease !important;
}

.login-form .acc-not a:hover,
.signup-form .acc-not a:hover {
    color: #ffaa47 !important;
    text-decoration: underline !important;
}

/* Institutional Security Badge */
.auth-security-note {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    margin-top: 26px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.auth-security-note i {
    color: #10b981 !important;
    font-size: 13px !important;
}

/* Validation error text */
.login-form ul.space-y-1,
.login-form .text-red-600,
.login-form .text-red-400,
.signup-form ul.space-y-1,
.signup-form .text-red-600,
.signup-form .text-red-400 {
    color: #f87171 !important;
    font-size: 12.5px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 6px 0 0 0 !important;
    text-align: left !important;
    font-weight: 500 !important;
}

/* Auth Alerts (Session Status / Errors) */
.auth-alert {
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.auth-alert-success {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #34d399 !important;
}

.auth-alert-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
}

/* ==========================================================================
   Footer Area
   ========================================================================== */
.footer1 {
    background: #060b16 !important;
    background-image: none !important;
    position: relative !important;
}

.footer1::after {
    display: none !important;
    background: transparent !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.footer-area {
    background: #060b16 !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img {
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
}

.footer-head h4 {
    color: var(--text-primary) !important;
}

.footer-tags li a, .footer-menu li a, .footer-list li a {
    color: var(--text-secondary) !important;
    transition: all 0.2s ease !important;
}

.footer-tags li a:hover, .footer-menu li a:hover, .footer-list li a:hover {
    color: var(--brand-gold) !important;
}

.footer-list li a::after {
    color: var(--brand-gold) !important;
}

.footer-area-bottom {
    background: #04070e !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* ==========================================================================
   Comprehensive Mobile Responsiveness Overrides (@media max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Global Layout, Container & Padding */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .area-padding {
        padding: 42px 0 24px !important;
    }

    .area-padding-2 {
        padding: 42px 0 24px !important;
    }

    .section-headline {
        margin-bottom: 24px !important;
        padding: 0 4px !important;
    }

    .section-headline h3 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        font-weight: 700 !important;
    }

    .section-headline p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

    /* 2. Item 1: Mobile Header & Hamburger Menu */
    .mobile-menu-area {
        position: relative !important;
        background: #080f1d !important;
        height: 60px !important;
        min-height: 60px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        z-index: 99999 !important;
        width: 100% !important;
    }

    .mobile-menu-area .container,
    .mobile-menu-area .mobile-header-inner {
        position: relative !important;
        height: 60px !important;
        min-height: 60px !important;
        display: block !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Mobile Logo - pinned firmly to far left */
    .mobile-logo-wrap,
    .mobile-menu-area .logo {
        position: absolute !important;
        left: 14px !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        z-index: 10 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-logo-wrap a,
    .mobile-menu-area .logo a {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        text-decoration: none !important;
    }

    .mobile-logo-wrap img.mobile-logo,
    .mobile-menu-area .logo img {
        max-height: 30px !important;
        width: auto !important;
        max-width: 110px !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* Live Crypto Rates Marquee Rolling in Mobile Header Center */
    .mobile-crypto-marquee-wrap {
        position: absolute !important;
        left: 130px !important;
        right: 58px !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        z-index: 5 !important;
        pointer-events: auto !important;
    }

    .mobile-crypto-marquee-wrap .crypto-marquee {
        width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        mask-image: linear-gradient(to right, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%) !important;
    }

    .mobile-crypto-marquee-wrap .crypto-prices {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    .mobile-crypto-marquee-wrap .crypto-prices li {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 11px !important;
        color: #94a3b8 !important;
        margin-right: 20px !important;
        list-style: none !important;
        line-height: 1 !important;
        letter-spacing: 0.2px !important;
    }

    .mobile-crypto-marquee-wrap .crypto-prices li strong {
        color: #E6922E !important;
        font-weight: 700 !important;
        font-size: 11.5px !important;
    }

    /* MeanMenu Bar Reset */
    .mean-container .mean-bar {
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        min-height: 0 !important;
        height: 0 !important;
    }

    /* Pin hamburger toggle to the far top right, perfectly centered vertically in 60px bar */
    .mean-container a.meanmenu-reveal {
        position: absolute !important;
        top: 12px !important;
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        float: none !important;
        z-index: 9999999 !important;
        margin: 0 !important;
        padding: 6px 7px !important;
        width: 38px !important;
        height: 36px !important;
        box-sizing: border-box !important;
        background: rgba(230, 146, 46, 0.12) !important;
        border: 1px solid rgba(230, 146, 46, 0.45) !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
        text-indent: 0 !important;
        color: #E6922E !important;
        transition: all 0.2s ease !important;
    }

    .mean-container a.meanmenu-reveal:hover,
    .mean-container a.meanmenu-reveal:focus {
        background: rgba(230, 146, 46, 0.22) !important;
        border-color: #E6922E !important;
    }

    .mean-container a.meanmenu-reveal span {
        background: #E6922E !important;
        display: block !important;
        height: 2.5px !important;
        width: 20px !important;
        margin: 2px 0 !important;
        border-radius: 2px !important;
    }

    .mean-container a.meanmenu-reveal.meanclose {
        color: #E6922E !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Remove phantom lines & hidden artifacts */
    .mean-container .mean-bar::before,
    .mean-container .mean-bar::after,
    .mean-container .mean-push {
        display: none !important;
        content: none !important;
        border: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* MeanMenu Nav Container: Transparent & Borderless when closed (Eradicates ghost line!) */
    .mean-container .mean-nav {
        position: absolute !important;
        top: 60px !important;
        left: 12px !important;
        right: 12px !important;
        width: calc(100% - 24px) !important;
        margin: 0 !important;
        z-index: 999998 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        pointer-events: none;
        max-height: 75vh !important;
        overflow-y: auto !important;
        padding: 0 !important;
    }

    /* Floating card menu list (only visible when opened) */
    .mean-container .mean-nav > ul {
        background: #0d172a !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 12px !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        overflow: hidden !important;
        pointer-events: auto;
    }

    .mean-container .mean-nav ul li {
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        background: transparent !important;
    }

    .mean-container .mean-nav ul li a {
        background: transparent !important;
        color: #e2e8f0 !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        padding: 12px 18px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        text-transform: uppercase !important;
        display: block !important;
        transition: all 0.2s ease !important;
    }

    .mean-container .mean-nav > ul > li:first-child > a {
        border-top: none !important;
    }

    .mean-container .mean-nav ul li a:hover {
        background: rgba(230, 146, 46, 0.12) !important;
        color: #E6922E !important;
        padding-left: 22px !important;
    }

    .mean-container .mean-nav ul li a.mean-expand {
        background: transparent !important;
        color: #E6922E !important;
        border: none !important;
        top: 0 !important;
        right: 0 !important;
        height: 42px !important;
        line-height: 42px !important;
        padding: 0 16px !important;
        font-size: 18px !important;
    }

    @media (max-width: 380px) {
        .mobile-logo-wrap,
        .mobile-menu-area .logo {
            left: 10px !important;
        }

        .mobile-logo-wrap img.mobile-logo,
        .mobile-menu-area .logo img {
            max-width: 90px !important;
            max-height: 26px !important;
        }

        .mobile-crypto-marquee-wrap {
            left: 108px !important;
            right: 48px !important;
        }

        .mean-container a.meanmenu-reveal {
            right: 10px !important;
        }
    }

    /* 3. Item 2: Hero Section & CTA Buttons Visibility */
    .intro-area {
        position: relative !important;
        overflow: hidden !important;
    }

    .intro-carousel,
    .intro-carousel .owl-stage-outer,
    .intro-carousel .owl-stage,
    .intro-carousel .owl-item,
    .intro-content {
        min-height: 520px !important;
        height: auto !important;
        position: relative !important;
    }

    .slider-images {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    .slider-images img {
        width: 100% !important;
        height: 100% !important;
        min-height: 520px !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    .intro-content::after {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(180deg, rgba(12, 21, 39, 0.82) 0%, rgba(8, 15, 29, 0.94) 100%) !important;
        content: "" !important;
        z-index: 2 !important;
    }

    .slider-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 55px 15px 50px !important;
        z-index: 4 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 520px !important;
        box-sizing: border-box !important;
    }

    .slider-content .display-table,
    .slider-content .display-table-cell {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .intro-area .slide-content {
        margin-top: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .intro-area .title2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
        color: #f8fafc !important;
    }

    .intro-area .layer-1-3 p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin: 0 auto 20px !important;
        max-width: 100% !important;
        padding: 0 4px !important;
        color: #cbd5e1 !important;
    }

    .intro-area .layer-1-3 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .intro-area .layer-1-3 .ready-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    .intro-area .layer-1-3 .ready-btn.right-btn {
        margin-left: 0 !important;
    }

    /* 4. Item 3a: counter-area (Aligned 2x2 Grid) */
    .counter-area {
        padding: 35px 0 20px !important;
    }

    .counter-area .fun-content {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .counter-area .fun-content > div {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .counter-area .fun_text {
        padding: 16px 10px !important;
        margin-bottom: 0 !important;
        border-radius: 8px !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
    }

    .counter-area .fun_text i {
        width: 46px !important;
        height: 46px !important;
        line-height: 46px !important;
        font-size: 22px !important;
        margin-bottom: 8px !important;
    }

    .counter-area .fun_text .counter {
        font-size: 16px !important;
        padding-bottom: 2px !important;
    }

    .counter-area .fun_text h4 {
        font-size: 12px !important;
        color: var(--text-secondary) !important;
        font-weight: 500 !important;
    }

    /* 5. Item 3b: investment-plans (Aligned Responsive Cards) */
    #investment-plans.invest-area {
        padding: 38px 0 24px !important;
    }

    #investment-plans .pricing-content .col-xs-12 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #investment-plans .pri_table_list {
        margin-bottom: 20px !important;
        padding: 22px 16px !important;
        border-radius: 12px !important;
    }

    #investment-plans .top-price-inner {
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }

    #investment-plans .rates .prices {
        font-size: 30px !important;
    }

    #investment-plans .rates .users {
        font-size: 12px !important;
    }

    #investment-plans .per-day {
        font-size: 13px !important;
    }

    #investment-plans .pricing-text {
        padding: 8px 0 !important;
    }

    #investment-plans .pricing-text li {
        padding: 7px 0 !important;
        font-size: 13px !important;
    }

    #investment-plans .price-btn a.btn {
        width: 90% !important;
        padding: 11px 0 !important;
        font-size: 13.5px !important;
    }

    /* 6. Item 3c: support-service-area (Aligned Horizontal Feature Cards) */
    .support-service-area {
        padding: 38px 0 20px !important;
    }

    .support-service-area .support-all .col-xs-12 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .support-services {
        display: flex !important;
        align-items: flex-start !important;
        padding: 16px 14px !important;
        margin-bottom: 14px !important;
        border-radius: 10px !important;
    }

    .support-services a.support-images {
        float: none !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        line-height: 44px !important;
        font-size: 22px !important;
        margin-right: 14px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    .support-services .support-content {
        padding-left: 0 !important;
        margin-top: 0 !important;
        flex: 1 !important;
    }

    .support-services .support-content h4 {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }

    .support-services .support-content p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    /* 7. Item 3d: calculator-area (Aligned & Compact Mobile Form & Results) */
    .calculator-area {
        padding: 38px 0 25px !important;
    }

    .calculator-area .calc-card {
        padding: 20px 16px !important;
        border-radius: 10px !important;
    }

    .calculator-area .calc-results-card {
        padding: 20px 16px !important;
        border-radius: 10px !important;
    }

    .calculator-area select#calc-plan {
        height: 44px !important;
        font-size: 13.5px !important;
        padding: 8px 10px !important;
    }

    .calculator-area #calc-amount-label {
        font-size: 19px !important;
    }

    .calculator-area .quick-amount {
        flex: 1 1 calc(33.333% - 6px) !important;
        padding: 6px 2px !important;
        font-size: 12px !important;
        text-align: center !important;
    }

    .calculator-area #res-daily,
    .calculator-area #res-weekly {
        font-size: 19px !important;
        margin-top: 4px !important;
    }

    .calculator-area #res-total {
        font-size: 23px !important;
        margin-top: 4px !important;
    }

    /* 8. Item 4: payment-history-area (No 840px Overflow, Compact Tables) */
    .payment-history-area {
        padding: 38px 0 20px !important;
    }

    .deposite-content {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .diposite-box {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 12px 20px !important;
        margin-bottom: 22px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    .diposite-box h4 {
        font-size: 14px !important;
        padding: 6px 14px !important;
        margin-bottom: 14px !important;
        border-radius: 4px !important;
        display: inline-block !important;
    }

    .diposite-box span {
        font-size: 18px !important;
        padding: 6px 12px !important;
        line-height: 22px !important;
        border-radius: 4px !important;
        float: right !important;
    }

    .deposite-table {
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .deposite-content table {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important;
        border-radius: 6px !important;
    }

    .deposite-content th {
        font-size: 11px !important;
        padding: 8px 4px !important;
        letter-spacing: 0.3px !important;
    }

    .deposite-content td {
        font-size: 11px !important;
        padding: 8px 4px !important;
        height: 42px !important;
        vertical-align: middle !important;
    }

    .deposite-content th.col-name,
    .deposite-content td.col-name {
        width: 30% !important;
    }

    .deposite-content th.col-date,
    .deposite-content td.col-date {
        width: 24% !important;
    }

    .deposite-content th.col-amount,
    .deposite-content td.col-amount {
        width: 24% !important;
    }

    .deposite-content th.col-currency,
    .deposite-content td.col-currency {
        width: 22% !important;
        min-width: 66px !important;
        padding: 6px 2px !important;
    }

    /* Uniform Crypto Coin Pill Badge (Mobile Screen) */
    .crypto-coin-pill {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        padding: 0 4px !important;
        gap: 3px !important;
        border-radius: 4px !important;
    }

    .crypto-coin-pill svg {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
    }

    .crypto-coin-pill .crypto-ticker,
    .crypto-coin-pill span {
        font-size: 10px !important;
    }

    /* Mobile Pagination Navigation */
    nav[aria-label="Pagination Navigation"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        margin-top: 18px !important;
    }

    nav[aria-label="Pagination Navigation"] div:nth-child(2) {
        order: -1 !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 6px !important;
    }

    nav[aria-label="Pagination Navigation"] a,
    nav[aria-label="Pagination Navigation"] span {
        padding: 7px 14px !important;
        font-size: 12px !important;
    }

    /* 9. Item 5: faq-area (Compact Accordion & Responsive Contact Card) */
    .faq-area {
        padding: 38px 0 22px !important;
    }

    .faq-details .panel-default {
        margin-bottom: 10px !important;
        border-radius: 6px !important;
    }

    .faq-details h4.check-title a {
        font-size: 13.5px !important;
        padding: 12px 14px 12px 44px !important;
        line-height: 1.4 !important;
    }

    .faq-details .panel-heading h4 a::before {
        width: 36px !important;
        line-height: 42px !important;
        font-size: 13px !important;
    }

    .faq-details .panel-body {
        padding: 12px 14px 14px 14px !important;
    }

    .faq-details .panel-body p {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }

    .faq-area .faq-content {
        margin-left: 0 !important;
        margin-top: 22px !important;
        padding: 20px 16px !important;
        border-radius: 10px !important;
    }

    .faq-content h4 {
        font-size: 17px !important;
        margin-bottom: 14px !important;
    }

    .faq-content .contact-form .form-control {
        height: 42px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        margin-bottom: 12px !important;
        border-radius: 6px !important;
    }

    .faq-content .contact-form textarea.form-control {
        height: 95px !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
        margin-bottom: 14px !important;
    }

    .faq-content .quote-btn {
        padding: 11px !important;
        font-size: 13.5px !important;
        border-radius: 6px !important;
    }

    /* 10. Auth Forms & Breadcrumb (Mobile Sizing & Padding) */
    .login-area,
    .signup-area {
        padding: 35px 0 25px !important;
    }

    .login-page,
    .signup-page,
    .auth-page {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
    }

    .login-form,
    .signup-form,
    .auth-card {
        padding: 26px 18px !important;
        border-radius: 12px !important;
    }

    .login-title,
    .auth-title {
        font-size: 20px !important;
        margin-bottom: 6px !important;
    }

    .auth-subtitle {
        font-size: 12.5px !important;
        margin-bottom: 18px !important;
    }

    .login-form .form-control,
    .signup-form .form-control,
    .auth-input {
        height: 46px !important;
        font-size: 13.5px !important;
        padding: 8px 12px !important;
    }

    .input-icon-wrap .form-control,
    .input-icon-wrap .auth-input {
        padding-left: 38px !important;
        padding-right: 38px !important;
    }

    .login-form .check-group,
    .signup-form .check-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-top: 10px !important;
        margin-bottom: 18px !important;
    }

    .page-area .breadcrumb {
        padding: 95px 0 30px !important;
    }

    .breadcrumb .section-headline h3 {
        font-size: 26px !important;
        line-height: 32px !important;
        padding: 10px 0 !important;
    }

    .breadcrumb-bg {
        padding: 10px 18px !important;
        top: 0 !important;
        margin: 15px auto 0 !important;
        max-width: 95% !important;
    }

    /* 11. Footer Mobile Responsive Font Sizes & Spacing */
    .footer-area {
        padding: 36px 0 12px !important;
    }

    .footer-content {
        margin-bottom: 24px !important;
    }

    .footer-content.last-content {
        margin-bottom: 8px !important;
    }

    .footer-logo {
        margin-bottom: 12px !important;
    }

    .footer-logo img {
        max-width: 115px !important;
    }

    .footer-head h4 {
        font-size: 15px !important;
        line-height: 20px !important;
        margin-bottom: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
    }

    .footer-head p,
    .logo-footer .footer-head p {
        font-size: 12px !important;
        line-height: 1.6 !important;
        color: #94a3b8 !important;
        margin-bottom: 10px !important;
    }

    .footer-list {
        width: 100% !important;
        float: none !important;
    }

    .footer-list li a {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
        padding: 4px 0 4px 16px !important;
        color: #94a3b8 !important;
    }

    .footer-list li a::after {
        font-size: 10px !important;
        top: 2px !important;
    }

    .footer-contacts p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
        color: #cbd5e1 !important;
    }

    .footer-contacts p span {
        font-size: 12px !important;
        margin-right: 4px !important;
    }

    .footer-icons {
        margin-top: 14px !important;
    }

    .footer-icons ul li a {
        width: 28px !important;
        height: 28px !important;
        line-height: 26px !important;
        font-size: 13px !important;
    }

    .footer-area-bottom {
        padding: 14px 0 !important;
        text-align: center !important;
    }

    .footer-area-bottom .copyright,
    .footer-area-bottom .copyright p {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
        color: #64748b !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .footer-area-bottom .copyright a {
        font-size: 11.5px !important;
        font-weight: 600 !important;
    }
}