/* ==========================================================
   GLOBAL VAULT PLATFORM
   MAIN STYLESHEET
========================================================== */

:root {

    --primary:#0B1F3A;

    --secondary:#D4AF37;

    --background:#F8F9FA;

    --text:#343A40;

    --white:#FFFFFF;

    --success:#28A745;

    --danger:#DC3545;

    --border-radius:12px;


    /* Theme Engine */

    --gv-background:#F8F9FA;

    --gv-card:#FFFFFF;

    --gv-text:#343A40;

    --gv-muted:#777777;

    --gv-border:#e5e7eb;

    --gv-navbar:#ffffff;

}

/* ==========================================================
   THEME VARIABLES
========================================================== */

:root{

    --body-bg:#f8f9fa;
    --card-bg:#ffffff;
    --navbar-bg:#ffffff;
    --text-color:#343A40;
    --text-light:#666666;

    --transition:.30s;

}

body.dark-mode{

    --body-bg:#0d1117;
    --card-bg:#161b22;
    --navbar-bg:#111827;
    --text-color:#f3f4f6;
    --text-light:#c5c5c5;

}

[data-theme="dark"] {

    --gv-background:#050505;

    --gv-card:#111111;

    --gv-text:#ffffff;

    --gv-muted:#9ca3af;

    --gv-border:#252525;

    --gv-navbar:#0B1F3A;

}

html{
    scroll-behavior:smooth;
}


body{

    background:var(--body-bg);
color:var(--text-color);
transition:background .3s,color .3s;

    font-family:Arial, Helvetica, sans-serif;

    margin:0;

    padding:0;

}


a{

    text-decoration:none;

}



/* ==========================================================
   TOP BAR
========================================================== */

.gv-topbar{

    background:var(--primary);

    color:var(--white);

    font-size:14px;

    padding:10px 0;

}


.gv-topbar a{

    color:var(--white);

    transition:.3s;

}


.gv-topbar a:hover{

    color:var(--secondary);

}



/* ==========================================================
   NAVBAR
========================================================== */


.navbar-brand{

    font-size:1.2rem;

    color:var(--primary)!important;

}


.navbar-nav .nav-link{

    font-weight:500;

    margin-left:12px;

    color:var(--text);

    transition:.3s;

}


.navbar-nav .nav-link:hover{

    color:var(--secondary);

}



.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

}


.btn-primary:hover{

    background:var(--secondary);

    border-color:var(--secondary);

}



.btn-outline-primary{

    color:var(--primary);

    border-color:var(--primary);

}


.btn-outline-primary:hover{

    background:var(--primary);

    color:#fff;

}



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


.hero-section{

    background:#ffffff;

    padding:80px 0;

}



.hero-section.with-background{

    background:
    linear-gradient(
 rgba(11,31,58,.65),
 rgba(11,31,58,.65)
    ),
    url("../images/backgrounds/hero.jpg");

    background-size:cover;

    background-position:center;

    color:#fff;

}



.hero-badge{

    display:inline-block;

    background:rgba(212,175,55,.12);

    color:var(--secondary);

    padding:8px 18px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:25px;

}



.hero-title{

    font-size:3.2rem;

    font-weight:700;

    color:var(--primary);

    line-height:1.2;

}



.hero-description{

    margin-top:25px;

    font-size:1.15rem;

    color:#666;

    line-height:1.9;

}



.hero-image{

    max-height:600px;

    border-radius:20px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}



@media(max-width:991px){

    .hero-section{

        text-align:center;

        padding:60px 0;

    }


    .hero-title{

        font-size:2.3rem;

    }


    .hero-image{

        margin-top:40px;

    }

}



/* ==========================================================
   STATISTICS
========================================================== */


.statistics-section{

    padding:80px 0;

    background:#f8f9fa;

}



.stat-card{

    background:#fff;

    padding:35px;

    border-radius:15px;

    text-align:center;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    height:100%;

}



.stat-card:hover{

    transform:translateY(-8px);

}



.stat-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    background:rgba(11,31,58,.08);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}



.stat-icon i{

    font-size:30px;

    color:var(--primary);

}



.stat-card h2{

    font-size:2.2rem;

    color:var(--primary);

    font-weight:700;

}



.stat-card p{

    margin-top:15px;

    color:#666;

    font-weight:500;

}



/* ==========================================================
   GENERAL SECTION TITLES
========================================================== */


.section-title{

    color:var(--primary);

    font-size:2.4rem;

    font-weight:700;

}



.section-subtitle{

    color:#777;

    margin-top:15px;

}



/* ==========================================================
   INVESTMENT PLANS
========================================================== */


.plans-section{

    padding:90px 0;

    background:#fff;

}



.plan-card{

    background:#fff;

    border-radius:15px;

    padding:40px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}



.plan-card:hover{

    transform:translateY(-10px);

}



.plan-return{

    font-size:3rem;

    color:var(--secondary);

    font-weight:700;

}



/* ==========================================================
   MARGIN LENDING
========================================================== */


.margin-section{

    padding:90px 0;

    background:#f8f9fa;

}



.margin-list{

    list-style:none;

    padding:0;

    margin-top:25px;

}



.margin-list li{

    margin-bottom:18px;

    font-size:1rem;

    color:#555;

}



.margin-list i{

    color:var(--secondary);

    margin-right:12px;

}



/* ==========================================================
   WHY CHOOSE US
========================================================== */


.why-section{

    padding:90px 0;

    background:#fff;

}



.feature-card{

    background:#fff;

    border-radius:15px;

    padding:30px;

    height:100%;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    transition:.35s;

}



.feature-card:hover{

    transform:translateY(-8px);

}



.feature-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(11,31,58,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

}



.feature-icon i{

    font-size:28px;

    color:var(--primary);

}



.feature-card h5{

    color:var(--primary);

    font-weight:700;

}



.feature-card p{

    color:#666;

    line-height:1.7;

}



/* ==========================================================
   TESTIMONIALS
========================================================== */


.testimonials-section{

    padding:90px 0;

    background:#f8f9fa;

}



.testimonialSwiper{

    overflow:hidden;

    padding-bottom:50px;

}



.testimonial-card{

    background:#fff;

    padding:40px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}



.testimonial-image{

    width:90px;

    height:90px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:20px;

}



.testimonial-message{

    font-style:italic;

    color:#666;

    line-height:1.8;

}



.swiper-pagination-bullet-active{

    background:var(--primary);

}



/* ==========================================================
   NEWS
========================================================== */


.news-section{

    padding:90px 0;

    background:#fff;

}



.news-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    height:100%;

}



.news-image{

    width:100%;

    height:240px;

    object-fit:cover;

}



.news-content{

    padding:25px;

}



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


.cta-section{

    padding:100px 0;

    background:linear-gradient(
        135deg,
        var(--primary),
        #15375f
    );

    color:#fff;

}



.cta-section h2{

    font-size:2.8rem;

    font-weight:700;

}



.cta-section p{

    font-size:1.2rem;

}



.cta-section .btn{

    min-width:190px;

}



/* ==========================================================
   FOOTER
========================================================== */


.footer-section{

    background:#08172b;

    color:#fff;

    padding:70px 0 30px;

}



.footer-section h4,
.footer-section h5{

    color:#fff;

}



.footer-links{

    list-style:none;

    padding:0;

}



.footer-links li{

    margin-bottom:12px;

}



.footer-links a{

    color:#d8d8d8;

}



.footer-links a:hover{

    color:var(--secondary);

}



.footer-section p{

    color:#d8d8d8;

}



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


@media(max-width:768px){


    .section-title{

        font-size:2rem;

    }


    .plan-card{

        padding:25px;

    }


    .plan-return{

        font-size:2.3rem;

    }


    .cta-section h2{

        font-size:2rem;

    }


    .testimonial-card{

        padding:25px;

    }

}
/* ==========================================================
   LIVE MARKET TICKER
========================================================== */

.gv-market-ticker{

    background:#061321;

    border-bottom:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    height:44px;

    display:flex;

    align-items:center;

}

.ticker-window{

    width:100%;

    overflow:hidden;

    position:relative;

}

.ticker-track{

    display:flex;

    align-items:center;

    gap:60px;

    white-space:nowrap;

    will-change:transform;

}

.market-item{

    display:flex;

    align-items:center;

    gap:8px;

    flex-shrink:0;

    font-size:14px;

    font-weight:600;

}

.market-symbol{

    color:#ffffff;

    font-weight:700;

}

.market-price{

    color:#ffffff;

}

.market-change{

    font-weight:700;

}

.market-icon{

    font-size:16px;

}

.market-item.up{

    color:#20c997;

}

.market-item.down{

    color:#ff5b5b;

}

.ticker-loading{

    color:#ffffff;

    padding:10px 20px;

}
/* ==========================================================
   GLOBAL MARKET CENTER
========================================================== */

.market-center{

    background:#f4f7fb;

    padding:80px 0;

}

.market-center .card{

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.10);

}

#tradingview_chart{

    width:100%;

    height:650px;

}

@media(max-width:991px){

    #tradingview_chart{

        height:500px;

    }

}

@media(max-width:768px){

    #tradingview_chart{

        height:420px;

    }

}
/* ==========================================================
   MARKET WATCH
========================================================== */

.market-watch-card{

    height:650px;

}

.market-watch-card .card-body{

    overflow-y:auto;

}

@media(max-width:991px){

    .market-watch-card{

        height:auto;

    }

}
/* ==========================================================
   PROFESSIONAL MARKET WATCH V2
========================================================== */

.market-watch-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border-bottom:1px solid rgba(0,0,0,.08);

    transition:.3s;

    background:#fff;

}


.market-watch-item:hover{

    transform:translateX(5px);

    background:#f8f9fa;

}


.market-left{

    display:flex;

    align-items:center;

    gap:12px;

}


.market-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(11,31,58,.08);

    font-size:20px;

}


.market-left h6{

    margin:0;

    color:var(--primary);

    font-weight:700;

}


.market-left small{

    color:#777;

}


.market-right{

    text-align:right;

}


.market-right strong{

    display:block;

    color:var(--primary);

    font-size:15px;

}


.market-right span{

    font-size:13px;

    font-weight:700;

}


.market-watch-item.up .market-right span{

    color:#20c997;

}


.market-watch-item.down .market-right span{

    color:#ff5b5b;

}
/* ==========================================================
   LIVE MARKET NEWS
========================================================== */

.market-news-box{
    height:650px;
    overflow-y:auto;
    background:#000;
}

.market-news-box::-webkit-scrollbar{
    width:5px;
}

.market-news-box::-webkit-scrollbar-thumb{
    background:#444;
}

.market-news-item{
    padding:18px;
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:.3s;
}

.market-news-item:hover{
    background:#111;
}

.news-icon{
    font-size:24px;
    margin-right:15px;
}

.live-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#d90429;
    color:#fff;
    padding:5px 10px;
    border-radius:30px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
}

.live-dot{
    width:8px;
    height:8px;
    background:#fff;
    border-radius:50%;
    animation:livePulse 1.2s infinite;
}

@keyframes livePulse{

    0%{
        transform:scale(.8);
        opacity:.5;
    }

    50%{
        transform:scale(1.4);
        opacity:1;
    }

    100%{
        transform:scale(.8);
        opacity:.5;
    }

}
/* ===== LIVE BADGE ===== */

.gv-live{

    display:flex;

    align-items:center;

    gap:8px;

    background:#d6001c;

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    line-height:1;

}

.gv-live-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#fff;

    animation:gvPulse 1s infinite;

}

@keyframes gvPulse{

    0%{
        transform:scale(.8);
        opacity:.5;
    }

    50%{
        transform:scale(1.5);
        opacity:1;
    }

    100%{
        transform:scale(.8);
        opacity:.5;
    }

}
/* ===== ULTRA PREMIUM NEWS ===== */

.market-news-item{

    display:flex;

    gap:10px;

    padding:10px 12px;

    border-bottom:1px solid rgba(255,255,255,.05);

    transition:.25s;

}

/* ==========================================================
   GLOBAL VAULT LIVE MARKET NEWS
========================================================== */


.market-news-box{

    height:620px;

    overflow-y:auto;

    background:#050505;

}




.market-news-item{

    display:flex;

    align-items:flex-start;

    gap:10px;

    padding:8px 12px;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.2s;

}



.market-news-item:hover{

    background:#111;

}




.news-icon{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    background:#151515;

    border-radius:50%;

}




.news-content{

    flex:1;

}




.news-title{

    color:#ffffff;

    font-size:13px;

    line-height:1.3;

    font-weight:600;

}




.news-meta{

    margin-top:3px;

    color:#00bfff;

    font-size:10px;

}




.market-news-item:nth-child(2n) .news-meta{

    color:#f5b942;

}



.market-news-item:nth-child(3n) .news-meta{

    color:#00d084;

}
/* ==========================================================
   MARKET WATCHLIST
========================================================== */

#marketWatchList{

    height:650px;

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:4px;

}

#marketWatchList::-webkit-scrollbar{

    width:4px;

}

#marketWatchList::-webkit-scrollbar-thumb{

    background:#333;

    border-radius:20px;

}

.market-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding:10px 12px;

    cursor:pointer;

    border-bottom:1px solid rgba(255,255,255,.05);

    transition:.25s;

}

.market-row:hover{

    background:#101010;

    border-left:3px solid #f5b301;

}

.market-logo{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.market-info{

    flex:1;

}

.market-symbol{

    color:#fff;

    font-size:13px;

    font-weight:600;

    line-height:1.2;

}

.market-price{

    color:#9ca3af;

    font-size:11px;

    margin-top:2px;

}

.market-change{

    font-size:11px;

    font-weight:700;

    min-width:70px;

    text-align:right;

}

.market-change.up{

    color:#22c55e;

}

.market-change.down{

    color:#ef4444;

}

#marketSearch{

    background:#111;

    border:1px solid #2a2a2a;

    color:#fff;

}

#marketSearch:focus{

    background:#111;

    color:#fff;

    border-color:#f5b301;

    box-shadow:none;

}

#marketSearch::placeholder{

    color:#666;

}
/* ==========================================================
   MOBILE RESPONSIVE FIX
========================================================== */


html,
body{

    width:100%;

    max-width:100%;

    overflow-x:hidden;

}



.container,
.container-fluid{

    max-width:100%;

}



.row{

    margin-left:0;

    margin-right:0;

}



.card{

    max-width:100%;

}



@media(max-width:768px){


    .market-news-box{

        height:auto;

        max-height:500px;

    }



    .market-watch-container,
    #marketWatch{

        height:auto;

        max-height:500px;

    }



    .tradingview-widget-container,
    #tradingview_chart{

        width:100% !important;

    }


}
/* ==========================================================
   MARKET TICKER ONE LINE FIX
========================================================== */


.market-ticker,
.market-ticker-item{

    display:flex;

    align-items:center;

    flex-wrap:nowrap;

    white-space:nowrap;

    overflow:hidden;

}



.market-ticker-item{

    min-width:max-content;

}



.market-ticker .market-info{

    display:flex;

    align-items:center;

    flex-shrink:1;

    min-width:0;

}



.market-ticker .market-price,
.market-ticker .market-change{

    flex-shrink:0;

    white-space:nowrap;

}



.market-ticker small{

    display:none;

}




@media(max-width:768px){


    .market-ticker-item{

        gap:6px;

        font-size:12px;

    }


    .market-ticker .market-change{

        margin-left:4px;

    }


}
/* ==========================================================
   TRADINGVIEW TICKER MOBILE FIX
========================================================== */


.gv-market-ticker{

    width:100%;

    overflow:hidden;

}



.gv-ticker-wrapper{

    width:100%;

    overflow:hidden;

}



.tradingview-widget-container__widget{

    width:100% !important;

}




@media(max-width:768px){

    .gv-market-ticker{

        height:38px;

    }


    .gv-ticker-wrapper{

        height:38px;

    }


}
/* ==========================================================
   GLOBAL VAULT TICKER BREATHING SPACE FIX
========================================================== */


.gv-market-ticker{

    margin-top:18px;

    margin-bottom:12px;

    height:auto;

    min-height:70px;

    overflow:hidden;

    position:relative;

}


/* Give TradingView enough vertical space */

.gv-market-ticker .tradingview-widget-container{

    min-height:70px;

    height:70px;

}



/* Mobile */

@media(max-width:768px){


    .gv-market-ticker{

        margin-top:20px;

        margin-bottom:15px;

        min-height:85px;

    }



    .gv-market-ticker .tradingview-widget-container{

        min-height:85px;

        height:85px;

    }


}
/* ==========================================================
   GLOBAL VAULT THEME CARD ENGINE
========================================================== */


.card,
.plan-card,
.stat-card,
.feature-card,
.testimonial-card,
.news-card,
.market-watch-card,
.market-news-box {


    background:var(--gv-card);

    color:var(--gv-text);

    border-color:var(--gv-border);

    transition:.3s ease;

}



/* TEXT SUPPORT */

.section-subtitle,
.hero-description,
.stat-card p,
.feature-card p,
.testimonial-message {


    color:var(--gv-muted);

}



/* ==========================================================
   NAVBAR THEME
========================================================== */

.navbar{

    background:var(--navbar-bg) !important;

    transition:background .3s;

}

.navbar-brand,
.navbar-nav .nav-link{

    color:var(--text-color) !important;

    transition:color .3s;

}

.navbar-nav .nav-link:hover{

    color:var(--secondary) !important;

}
/* ==========================================================
   GLOBAL VAULT THEME SWITCH
========================================================== */

.gv-theme-switch{

    position:relative;

    width:58px;

    height:30px;

}

.gv-theme-switch input{

    display:none;

}

.gv-theme-slider{

    position:absolute;

    inset:0;

    background:#d9d9d9;

    border-radius:30px;

    cursor:pointer;

    transition:.35s;

}

.gv-theme-slider::before{

    content:"";

    position:absolute;

    width:24px;

    height:24px;

    left:3px;

    top:3px;

    background:#ffffff;

    border-radius:50%;

    transition:.35s;

    box-shadow:0 3px 8px rgba(0,0,0,.25);

}

.gv-theme-switch input:checked + .gv-theme-slider{

    background:#0B1F3A;

}

.gv-theme-switch input:checked + .gv-theme-slider::before{

    transform:translateX(28px);

}

.gv-sun,
.gv-moon{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    font-size:12px;

    pointer-events:none;

}

.gv-sun{

    left:8px;

}

.gv-moon{

    right:8px;

}
/* ==========================================================
   FOOTER CONTACT FIX
========================================================== */

.footer-section p,
.footer-section p a{

    color:#d8d8d8 !important;

    text-decoration:none;

}

.footer-section p a:hover{

    color:#ffffff !important;

}
.footer-section hr{
    border-color:rgba(255,255,255,.15);
}

.footer-section .text-center{
    text-align:center !important;
}

.footer-section small{
    display:block;
    width:100%;
    text-align:center !important;
    color:#d8d8d8;
}
/* ==========================================================
   HERO BUTTON MOBILE SPACING FIX
   Global Vault Platform
========================================================== */

@media(max-width:768px){

    .hero-section .btn{

        display:block;

        width:100%;

        margin-bottom:15px;

    }

    .hero-section .btn:last-child{

        margin-bottom:0;

    }

}
/* ==========================================================
   GLOBAL VAULT DARK MODE BANNER FIX
   Keep background images visible in dark mode
========================================================== */


/* Hero / Banner sections with images */

body.dark-mode .hero-section.with-background,
body.dark-mode .banner-section,
body.dark-mode .page-banner,
body.dark-mode .inner-banner,
body.dark-mode .header-banner{

    background-blend-mode:soft-light;

}


/* Make banner images brighter in dark mode */

body.dark-mode .hero-section.with-background::before,
body.dark-mode .banner-section::before,
body.dark-mode .page-banner::before,
body.dark-mode .inner-banner::before,
body.dark-mode .header-banner::before{

    background:rgba(0,0,0,.35);

}


/* Keep banner text visible */

body.dark-mode .hero-section.with-background h1,
body.dark-mode .hero-section.with-background h2,
body.dark-mode .hero-section.with-background p,
body.dark-mode .banner-section h1,
body.dark-mode .banner-section h2,
body.dark-mode .banner-section p{

    color:#ffffff !important;

}
/* ==========================================================
   DARK MODE HERO BANNER FIX
   KEEP IMAGE VISIBLE
========================================================== */


body.dark-mode .hero-section.with-background{

    background:
    linear-gradient(
        rgba(11,31,58,.45),
        rgba(11,31,58,.45)
    ),
    url("../images/backgrounds/hero.jpg") !important;

    background-size:cover !important;

    background-position:center !important;

    background-repeat:no-repeat !important;

    color:#ffffff !important;

}


/* Keep hero text visible */

body.dark-mode .hero-section.with-background .hero-title,
body.dark-mode .hero-section.with-background .hero-description,
body.dark-mode .hero-section.with-background p{

    color:#ffffff !important;

}


/* Keep badge visible */

body.dark-mode .hero-section.with-background .hero-badge{

    background:rgba(212,175,55,.20);

    color:#FFD95A;

}


/* Keep image brightness close to light mode */

body.dark-mode .hero-image{

    filter:brightness(1.05);

    box-shadow:
    0 25px 60px rgba(0,0,0,.45);

}
/* ==========================================================
   HERO BANNER DARK MODE FIX
   KEEP IMAGE LOOKING LIKE LIGHT MODE
========================================================== */


body.dark-mode .hero-section.with-background{

    background:
    linear-gradient(
        rgba(11,31,58,.45),
        rgba(11,31,58,.45)
    ),
    url("../images/backgrounds/hero.jpg") !important;

    background-size:cover !important;

    background-position:center !important;

    color:#ffffff !important;

}


body.dark-mode .hero-section.with-background .hero-title{

    color:#ffffff !important;

}


body.dark-mode .hero-section.with-background .hero-description{

    color:#f1f1f1 !important;

}


body.dark-mode .hero-section.with-background .hero-badge{

    background:rgba(212,175,55,.20);

    color:#FFD95A;

}