/********** Template CSS **********/
:root {
    --primary: #007ffe;
    --secondary: #E93C05;
    --tertiary: #555555;
    --light: #CCE7FF;
    --dark: #011A41;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

h1,
.h1,
h2,
.h2,
.fw-bold {
    font-weight: 700 !important;
}

h3,
.h3,
h4,
.h4,
.fw-medium {
    font-weight: 600 !important;
}

h5,
.h5,
h6,
.h6,
.fw-semi-bold {
    font-weight: 500 !important;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
    font-weight: 500;
}

.btn-primary,
.btn-outline-primary:hover {
    color: var(--light);
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.fixed-top {
    transition: .5s;
}

.top-bar {
    height: 45px;
    border-bottom: 1px solid rgba(53, 94, 252, .07);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .navbar-nav .nav-link {
    padding: 25px 15px;
    color: var(--tertiary);
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        margin-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, .07);
        background: #FFFFFF;
    }

    .navbar .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: start;
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 3rem;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--primary);
    border: 10px solid var(--primary);
}

.carousel-control-prev-icon {
    border-radius: 0 3rem 3rem 0;
}

.carousel-control-next-icon {
    border-radius: 3rem 0 0 3rem;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    padding-top: 12rem;
    padding-bottom: 6rem;
    background: url(../img/header.jpg) top left no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-weight: 500;
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--tertiary);
}


/*** Service ***/
.service .nav .nav-link {
    transition: .5s;
}

.service .nav .nav-link.active {
    border-color: var(--primary) !important;
    background: var(--primary);
}

.service .nav .nav-link.active h5 {
    color: #FFFFFF !important;
}

.service .nav .nav-link.active h5 i {
    color: #FFFFFF !important;
}


/*** Project ***/
.project-item,
.project-item .project-img {
    position: relative;
}

.project-item .project-img a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    opacity: 0;
    transition: .5s;
}

.project-item:hover .project-img a {
    opacity: 1;
}

.project-item .project-title {
    position: absolute;
    top: 3rem;
    right: 0;
    bottom: 0;
    left: 3rem;
    border: 1px solid var(--light);
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    padding: 18px;
    z-index: -1;
    transition: .5s;
}

.project-item:hover .project-title {
    background: var(--primary);
    border-color: var(--primary);
}

.project-item .project-title h4 {
    transition: .5s;
}

.project-item:hover .project-title h4 {
    color: #FFFFFF;
}

.project-carousel .owl-nav {
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

.project-carousel .owl-nav .owl-prev,
.project-carousel .owl-nav .owl-next {
    margin: 0 12px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: var(--light);
    border-radius: 45px;
    font-size: 22px;
    transition: .5s;
}

.project-carousel .owl-nav .owl-prev:hover,
.project-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    color: var(--light);
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--light);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.copyright {
    color: var(--light);
    background: #000B1C;
}

.copyright a {
    color: var(--light);
}

.copyright a:hover {
    color: var(--primary);
}

.market-3d-scene{position:relative;width:100%;height:600px;background:linear-gradient(135deg,#000 0%,#0a1628 50%,#000b1c 100%);border-radius:20px;overflow:hidden;perspective:1200px}
.bar{position:absolute;bottom:0;width:60px;background:linear-gradient(180deg,#fbbf24 0%,#10b981 100%);border-radius:8px 8px 0 0;box-shadow:0 0 30px rgba(251,191,36,.4),inset 0 2px 20px rgba(255,255,255,.3);transform-style:preserve-3d;animation:riseBar 3s ease-out infinite}
.bar::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,.2));border-radius:8px 8px 0 0}
.bar-1{left:8%;height:180px;animation-delay:0s}
.bar-2{left:20%;height:240px;animation-delay:.3s}
.bar-3{left:32%;height:320px;animation-delay:.6s}
.bar-4{left:48%;height:280px;animation-delay:.9s}
.bar-5{left:64%;height:380px;animation-delay:1.2s}
.bar-6{left:80%;height:420px;animation-delay:1.5s}
.chart-line{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none}
.growth-path{stroke-dasharray:2000;stroke-dashoffset:2000;animation:drawLine 4s ease-out forwards;filter:drop-shadow(0 0 8px rgba(16,185,129,.6))}
.light-streak{position:absolute;width:3px;height:120px;background:linear-gradient(180deg,transparent,rgba(251,191,36,.8),transparent);border-radius:50%;animation:streakMove 2.5s ease-in-out infinite;filter:blur(2px)}
.streak-1{left:15%;animation-delay:0s}
.streak-2{left:45%;animation-delay:.8s}
.streak-3{left:75%;animation-delay:1.6s}
@keyframes riseBar{0%,100%{transform:translateY(20px) rotateX(5deg)}50%{transform:translateY(0) rotateX(5deg)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes streakMove{0%{top:-120px;opacity:0}50%{opacity:1}100%{top:100%;opacity:0}}
@media(max-width:768px){.market-3d-scene{height:500px}.bar{width:45px}}

.holo-market{position:relative;width:100%;height:600px;background:linear-gradient(135deg,#0a0e27 0%,#1a1f3a 100%);border-radius:20px;overflow:hidden;perspective:1000px}
.node{position:absolute;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.3),transparent);border:2px solid #06b6d4;box-shadow:0 0 40px rgba(6,182,212,.6),inset 0 0 20px rgba(6,182,212,.3);animation:pulse 3s ease-in-out infinite}
.node::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:#06b6d4;border-radius:50%;box-shadow:0 0 15px #06b6d4}
.n1{top:20%;left:15%;animation-delay:0s}
.n2{top:15%;left:45%;animation-delay:.5s}
.n3{top:18%;right:15%;animation-delay:1s}
.n4{bottom:25%;left:25%;animation-delay:1.5s}
.n5{bottom:22%;right:20%;animation-delay:2s}
.connections{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.conn{stroke:#06b6d4;stroke-width:2;stroke-dasharray:300;stroke-dashoffset:300;animation:drawConn 4s ease-out infinite;filter:drop-shadow(0 0 8px rgba(6,182,212,.8))}
.c1{animation-delay:0s}
.c2{animation-delay:.3s}
.c3{animation-delay:.6s}
.c4{animation-delay:.9s}
.c5{animation-delay:1.2s}
.holo-chart{position:absolute;width:120px;height:80px;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.4);border-radius:8px;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(6,182,212,.2);animation:float 4s ease-in-out infinite;z-index:2}
.holo-chart.c1{top:25%;left:10%;animation-delay:0s}
.holo-chart.c2{bottom:20%;right:15%;animation-delay:1s}
.arrow{position:absolute;font-size:48px;color:#10b981;text-shadow:0 0 20px rgba(16,185,129,.8);animation:arrowMove 2s ease-in-out infinite;z-index:3}
.a1{top:30%;right:25%;animation-delay:0s}
.a2{top:50%;left:20%;animation-delay:.7s}
.a3{bottom:35%;right:35%;animation-delay:1.4s}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.15);opacity:1}}
@keyframes drawConn{0%{stroke-dashoffset:300}40%{stroke-dashoffset:0}100%{stroke-dashoffset:-300}}
@keyframes float{0%,100%{transform:translateY(0) rotateX(5deg)}50%{transform:translateY(-15px) rotateX(5deg)}}
@keyframes arrowMove{0%,100%{transform:translateY(0) scale(1);opacity:.6}50%{transform:translateY(-10px) scale(1.1);opacity:1}}
@media(max-width:768px){.holo-market{height:500px}.node{width:60px;height:60px}.holo-chart{width:100px;height:65px}.arrow{font-size:36px}}

.bull-bear-scene{position:relative;width:100%;height:600px;background:radial-gradient(circle at center,#1a1a2e 0%,#0a0a14 100%);border-radius:20px;overflow:hidden;perspective:1500px}
.light-ray{position:absolute;width:200px;height:600px;background:linear-gradient(90deg,transparent,rgba(255,215,0,.15),transparent);transform:skewX(-20deg);animation:rayMove 8s ease-in-out infinite;filter:blur(20px)}
.r1{left:-100px;animation-delay:0s}
.r2{left:30%;animation-delay:2s}
.r3{right:-100px;animation-delay:4s}
.bull-figure{position:absolute;left:15%;top:50%;transform:translateY(-50%) rotateY(-15deg);width:180px;height:200px;animation:bullBreath 4s ease-in-out infinite}
.bull-body{width:140px;height:160px;background:linear-gradient(135deg,#ffd700 0%,#ffed4e 30%,#d4af37 70%,#b8860b 100%);border-radius:50% 50% 45% 45%;box-shadow:inset -20px -20px 40px rgba(0,0,0,.3),inset 20px 20px 40px rgba(255,255,255,.4),0 30px 80px rgba(255,215,0,.6);position:relative;transform-style:preserve-3d}
.bull-body::before{content:'';position:absolute;top:20%;left:10%;width:30px;height:40px;background:linear-gradient(135deg,#ffed4e,#ffd700);border-radius:50%;box-shadow:inset -5px -5px 10px rgba(0,0,0,.2)}
.bull-horn{position:absolute;width:15px;height:50px;background:linear-gradient(180deg,#ffd700,#d4af37);border-radius:50% 50% 0 0;box-shadow:inset -3px -3px 8px rgba(0,0,0,.3),0 5px 15px rgba(255,215,0,.5);transform-origin:bottom}
.h1{top:-35px;left:30px;transform:rotate(-25deg)}
.h2{top:-35px;right:30px;transform:rotate(25deg)}
.bear-figure{position:absolute;right:15%;top:50%;transform:translateY(-50%) rotateY(15deg);width:180px;height:200px;animation:bearBreath 4s ease-in-out infinite;animation-delay:.5s}
.bear-body{width:150px;height:170px;background:linear-gradient(135deg,#d4af37 0%,#ffd700 30%,#ffed4e 70%,#ffd700 100%);border-radius:45% 45% 50% 50%;box-shadow:inset 20px -20px 40px rgba(0,0,0,.3),inset -20px 20px 40px rgba(255,255,255,.4),0 30px 80px rgba(255,215,0,.6);position:relative;transform-style:preserve-3d}
.bear-body::before{content:'';position:absolute;top:25%;right:15%;width:25px;height:35px;background:linear-gradient(135deg,#ffed4e,#ffd700);border-radius:50%;box-shadow:inset 5px -5px 10px rgba(0,0,0,.2)}
.bear-claw{position:absolute;width:40px;height:12px;background:linear-gradient(90deg,#d4af37,#ffd700);border-radius:0 50% 50% 0;box-shadow:inset -3px -3px 8px rgba(0,0,0,.3),0 5px 15px rgba(255,215,0,.5)}
.c1{bottom:20px;left:20px;transform:rotate(-10deg)}
.c2{bottom:35px;left:25px;transform:rotate(5deg)}
.market-data{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:.6}
.chart-line{stroke-dasharray:1500;stroke-dashoffset:1500;animation:drawChart 6s ease-out infinite;filter:drop-shadow(0 0 10px rgba(16,185,129,.8))}
.candle{animation:candleGlow 3s ease-in-out infinite}
.candle:nth-child(3){animation-delay:.3s}
.candle:nth-child(4){animation-delay:.6s}
.candle:nth-child(5){animation-delay:.9s}
.candle:nth-child(6){animation-delay:1.2s}
.candle:nth-child(7){animation-delay:1.5s}
.glow-orb{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,.3),transparent);filter:blur(30px);animation:orbPulse 5s ease-in-out infinite}
.o1{top:20%;left:20%;animation-delay:0s}
.o2{bottom:20%;right:20%;animation-delay:2.5s}
@keyframes rayMove{0%,100%{opacity:.3;transform:skewX(-20deg) translateX(0)}50%{opacity:.6;transform:skewX(-20deg) translateX(50px)}}
@keyframes bullBreath{0%,100%{transform:translateY(-50%) rotateY(-15deg) scale(1)}50%{transform:translateY(-50%) rotateY(-15deg) scale(1.05)}}
@keyframes bearBreath{0%,100%{transform:translateY(-50%) rotateY(15deg) scale(1)}50%{transform:translateY(-50%) rotateY(15deg) scale(1.05)}}
@keyframes drawChart{0%{stroke-dashoffset:1500}60%{stroke-dashoffset:0}100%{stroke-dashoffset:-1500}}
@keyframes candleGlow{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes orbPulse{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.2);opacity:.6}}
@media(max-width:768px){.bull-bear-scene{height:500px}.bull-figure,.bear-figure{width:140px;height:160px}.bull-body{width:110px;height:130px}.bear-body{width:120px;height:140px}}

.data-network{position:relative;width:100%;height:600px;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#1a1f3a 100%);border-radius:20px;overflow:hidden;perspective:1200px;transform-style:preserve-3d}
.geo-node{position:absolute;width:50px;height:50px;background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(6,182,212,.05));border:2px solid;border-radius:8px;backdrop-filter:blur(8px);box-shadow:0 8px 32px rgba(6,182,212,.3),inset 0 0 20px rgba(6,182,212,.1);animation:nodeFloat 6s ease-in-out infinite;transform:rotateX(45deg) rotateZ(45deg);transform-style:preserve-3d}
.geo-node::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;box-shadow:0 0 20px currentColor}
.n1{top:18%;left:20%;border-color:#06b6d4;color:#06b6d4;animation-delay:0s}
.n1::before{background:#06b6d4}
.n2{top:12%;left:42%;border-color:#f97316;color:#f97316;animation-delay:.8s}
.n2::before{background:#f97316}
.n3{top:16%;right:18%;border-color:#06b6d4;color:#06b6d4;animation-delay:1.6s}
.n3::before{background:#06b6d4}
.n4{top:45%;left:25%;border-color:#a855f7;color:#a855f7;animation-delay:2.4s}
.n4::before{background:#a855f7}
.n5{top:52%;right:22%;border-color:#f97316;color:#f97316;animation-delay:3.2s}
.n5::before{background:#f97316}
.n6{bottom:18%;left:45%;border-color:#06b6d4;color:#06b6d4;animation-delay:4s}
.n6::before{background:#06b6d4}
.n7{bottom:15%;right:28%;border-color:#a855f7;color:#a855f7;animation-delay:4.8s}
.n7::before{background:#a855f7}
.network-lines{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.net-line{stroke-width:1.5;stroke-dasharray:400;stroke-dashoffset:400;animation:lineConnect 8s ease-in-out infinite;filter:drop-shadow(0 0 6px currentColor);opacity:.6}
.l1{stroke:#06b6d4;animation-delay:0s}
.l2{stroke:#f97316;animation-delay:.5s}
.l3{stroke:#a855f7;animation-delay:1s}
.l4{stroke:#06b6d4;animation-delay:1.5s}
.l5{stroke:#f97316;animation-delay:2s}
.l6{stroke:#a855f7;animation-delay:2.5s}
.l7{stroke:#06b6d4;animation-delay:3s}
@keyframes nodeFloat{0%,100%{transform:rotateX(45deg) rotateZ(45deg) translateY(0) translateZ(0);opacity:.8}25%{transform:rotateX(45deg) rotateZ(45deg) translateY(-15px) translateZ(20px);opacity:1}50%{transform:rotateX(45deg) rotateZ(45deg) translateY(-8px) translateZ(10px);opacity:.9}75%{transform:rotateX(45deg) rotateZ(45deg) translateY(-20px) translateZ(15px);opacity:1}}
@keyframes lineConnect{0%{stroke-dashoffset:400;opacity:0}20%{opacity:.6}40%{stroke-dashoffset:0;opacity:.8}60%{stroke-dashoffset:0;opacity:.6}100%{stroke-dashoffset:-400;opacity:0}}
@media(max-width:768px){.data-network{height:500px}.geo-node{width:40px;height:40px}}

.stock-wave-art{position:relative;width:100%;height:600px;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:20px;overflow:hidden;cursor:pointer;transition:transform .3s ease}
.stock-wave-art:hover{transform:scale(1.02)}
.wave-container{position:absolute;bottom:0;left:0;width:100%;height:100%}
.wave-path{transform-origin:center;transition:all .6s ease}
.w1{animation:waveFlow1 8s ease-in-out infinite}
.w2{animation:waveFlow2 10s ease-in-out infinite}
.w3{animation:waveFlow3 12s ease-in-out infinite}
.stock-wave-art:hover .w1{animation:waveFlowHover1 4s ease-in-out infinite}
.stock-wave-art:hover .w2{animation:waveFlowHover2 5s ease-in-out infinite}
.stock-wave-art:hover .w3{animation:waveFlowHover3 6s ease-in-out infinite}
.stock-elements{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}
.stock-card{position:absolute;background:rgba(255,255,255,.95);border-radius:16px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.1);backdrop-filter:blur(10px);border:2px solid rgba(13,110,253,.2);animation:cardFloat 4s ease-in-out infinite;transition:all .4s ease}
.stock-card:hover{transform:translateY(-15px) scale(1.1);box-shadow:0 20px 60px rgba(13,110,253,.3);border-color:#0d6efd}
.card-icon{font-size:36px;margin-bottom:8px;animation:iconPulse 2s ease-in-out infinite}
.card-value{font-size:20px;font-weight:700;color:#0d6efd}
.s1{top:15%;right:20%;animation-delay:0s}
.s1:hover .card-icon{animation:iconBounce .6s ease}
.s2{top:45%;right:15%;animation-delay:1s}
.s2:hover .card-icon{animation:iconBounce .6s ease}
.s3{bottom:20%;right:25%;animation-delay:2s}
.s3:hover .card-icon{animation:iconBounce .6s ease}
.floating-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#0d6efd,#0dcaf0);box-shadow:0 0 20px rgba(13,110,253,.6);animation:dotFloat 5s ease-in-out infinite}
.d1{top:25%;left:15%;animation-delay:0s}
.d2{top:35%;left:30%;animation-delay:1s;background:linear-gradient(135deg,#198754,#20c997)}
.d3{top:55%;left:20%;animation-delay:2s;background:linear-gradient(135deg,#6610f2,#d63384)}
.d4{bottom:30%;left:35%;animation-delay:3s}
.d5{bottom:40%;left:18%;animation-delay:4s;background:linear-gradient(135deg,#198754,#20c997)}
.stock-wave-art:hover .floating-dot{animation:dotFloatHover 2s ease-in-out infinite}
@keyframes waveFlow1{0%,100%{d:path('M0,300 Q150,200 300,250 T600,300 L600,600 L0,600 Z')}50%{d:path('M0,280 Q150,220 300,270 T600,320 L600,600 L0,600 Z')}}
@keyframes waveFlow2{0%,100%{d:path('M0,350 Q150,280 300,320 T600,350 L600,600 L0,600 Z')}50%{d:path('M0,330 Q150,300 300,340 T600,370 L600,600 L0,600 Z')}}
@keyframes waveFlow3{0%,100%{d:path('M0,400 Q150,340 300,380 T600,400 L600,600 L0,600 Z')}50%{d:path('M0,380 Q150,360 300,400 T600,420 L600,600 L0,600 Z')}}
@keyframes waveFlowHover1{0%,100%{d:path('M0,300 Q150,200 300,250 T600,300 L600,600 L0,600 Z')}50%{d:path('M0,250 Q150,180 300,220 T600,280 L600,600 L0,600 Z')}}
@keyframes waveFlowHover2{0%,100%{d:path('M0,350 Q150,280 300,320 T600,350 L600,600 L0,600 Z')}50%{d:path('M0,300 Q150,250 300,290 T600,330 L600,600 L0,600 Z')}}
@keyframes waveFlowHover3{0%,100%{d:path('M0,400 Q150,340 300,380 T600,400 L600,600 L0,600 Z')}50%{d:path('M0,350 Q150,310 300,350 T600,380 L600,600 L0,600 Z')}}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes iconBounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-10px)}50%{transform:translateY(0)}75%{transform:translateY(-5px)}}
@keyframes dotFloat{0%,100%{transform:translate(0,0);opacity:.6}50%{transform:translate(15px,-15px);opacity:1}}
@keyframes dotFloatHover{0%,100%{transform:translate(0,0) scale(1);opacity:.8}50%{transform:translate(25px,-25px) scale(1.5);opacity:1}}
@media(max-width:768px){.stock-wave-art{height:500px}.stock-card{padding:15px}.card-icon{font-size:28px}.card-value{font-size:16px}}

.premium-stock-sphere{position:relative;width:100%;height:600px;background:radial-gradient(circle at 40% 40%,rgba(13,110,253,.05) 0%,transparent 70%),linear-gradient(135deg,#0a0e27 0%,#1a1f3a 100%);border-radius:20px;overflow:hidden;perspective:1500px;transform-style:preserve-3d}
.sphere-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:180px;height:180px;background:radial-gradient(circle at 30% 30%,rgba(13,202,240,.4),rgba(13,110,253,.2));border-radius:50%;box-shadow:0 0 80px rgba(13,110,253,.6),inset 0 0 60px rgba(13,202,240,.3);animation:spherePulse 4s ease-in-out infinite}
.orbit-ring{position:absolute;top:50%;left:50%;border:2px solid rgba(13,110,253,.3);border-radius:50%;transform-style:preserve-3d;animation:orbitRotate 20s linear infinite}
.ring-1{width:280px;height:280px;margin:-140px 0 0 -140px;transform:rotateX(75deg) rotateY(0deg);animation-duration:15s}
.ring-2{width:380px;height:380px;margin:-190px 0 0 -190px;transform:rotateX(75deg) rotateY(60deg);animation-duration:20s;border-color:rgba(13,202,240,.3)}
.ring-3{width:480px;height:480px;margin:-240px 0 0 -240px;transform:rotateX(75deg) rotateY(120deg);animation-duration:25s;border-color:rgba(25,135,84,.3)}
.orbit-particle{position:absolute;width:16px;height:16px;background:radial-gradient(circle,#0dcaf0,#0d6efd);border-radius:50%;box-shadow:0 0 20px rgba(13,202,240,.8);animation:particleGlow 2s ease-in-out infinite}
.p1{top:0;left:50%;margin-left:-8px}
.p2{bottom:0;left:50%;margin-left:-8px;animation-delay:.5s}
.p3{top:0;left:50%;margin-left:-8px;background:radial-gradient(circle,#20c997,#198754)}
.p4{bottom:0;left:50%;margin-left:-8px;animation-delay:.7s;background:radial-gradient(circle,#20c997,#198754)}
.p5{top:0;left:50%;margin-left:-8px;background:radial-gradient(circle,#ffc107,#fd7e14)}
.p6{bottom:0;left:50%;margin-left:-8px;animation-delay:.9s;background:radial-gradient(circle,#ffc107,#fd7e14)}
.growth-chart{position:absolute;top:15%;right:8%;width:400px;height:300px;opacity:.9;animation:chartFadeIn 3s ease-in-out infinite}
.chart-path{stroke-dasharray:1200;stroke-dashoffset:1200;animation:drawPath 6s ease-out infinite}
.chart-dot{animation:dotPulse 2s ease-in-out infinite}
.chart-dot:nth-child(3){animation-delay:.2s}
.chart-dot:nth-child(4){animation-delay:.4s}
.chart-dot:nth-child(5){animation-delay:.6s}
.chart-dot:nth-child(6){animation-delay:.8s}
.chart-dot:nth-child(7){animation-delay:1s}
.floating-stat{position:absolute;background:rgba(255,255,255,.95);border-radius:50%;width:90px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 15px 50px rgba(13,110,253,.3);backdrop-filter:blur(10px);border:3px solid rgba(13,110,253,.2);animation:statFloat 5s ease-in-out infinite;transition:all .5s ease;cursor:pointer}
.floating-stat:hover{transform:scale(1.2) translateY(-10px);box-shadow:0 25px 70px rgba(13,110,253,.5);border-color:#0d6efd}
.stat-icon{font-size:32px;font-weight:700;color:#0d6efd;margin-bottom:4px}
.stat-label{font-size:11px;font-weight:600;color:#6c757d;text-transform:uppercase;letter-spacing:.5px}
.stat-1{top:20%;left:10%;animation-delay:0s}
.stat-2{top:55%;left:5%;animation-delay:1.5s}
.stat-3{bottom:15%;left:15%;animation-delay:3s}
.glow-particle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(13,202,240,.6),transparent);filter:blur(20px);animation:glowFloat 8s ease-in-out infinite}
.gp1{width:150px;height:150px;top:10%;right:15%;animation-delay:0s}
.gp2{width:120px;height:120px;top:50%;right:5%;animation-delay:2s;background:radial-gradient(circle,rgba(25,135,84,.5),transparent)}
.gp3{width:100px;height:100px;bottom:20%;right:20%;animation-delay:4s;background:radial-gradient(circle,rgba(255,193,7,.4),transparent)}
.gp4{width:130px;height:130px;bottom:10%;left:40%;animation-delay:6s;background:radial-gradient(circle,rgba(13,110,253,.5),transparent)}
.premium-stock-sphere:hover .sphere-core{animation:spherePulseHover 2s ease-in-out infinite;box-shadow:0 0 120px rgba(13,110,253,.9),inset 0 0 80px rgba(13,202,240,.5)}
.premium-stock-sphere:hover .orbit-ring{animation-duration:8s}
.premium-stock-sphere:hover .growth-chart{transform:scale(1.05);opacity:1}
@keyframes spherePulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
@keyframes spherePulseHover{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}
@keyframes orbitRotate{from{transform:rotateX(75deg) rotateZ(0deg)}to{transform:rotateX(75deg) rotateZ(360deg)}}
@keyframes particleGlow{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.4);opacity:1}}
@keyframes chartFadeIn{0%,100%{opacity:.9}50%{opacity:1}}
@keyframes drawPath{0%{stroke-dashoffset:1200}60%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.5);opacity:1}}
@keyframes statFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-25px) rotate(5deg)}}
@keyframes glowFloat{0%,100%{transform:translate(0,0) scale(1);opacity:.4}50%{transform:translate(20px,-20px) scale(1.2);opacity:.7}}
@media(max-width:768px){.premium-stock-sphere{height:500px}.sphere-core{width:140px;height:140px}.growth-chart{width:300px;height:220px;right:5%}.floating-stat{width:70px;height:70px}.stat-icon{font-size:24px}.stat-label{font-size:9px}}

.elegant-growth-art{width:100%;height:600px;transition:transform .3s ease}
.elegant-growth-art:hover{transform:scale(1.02)}
.growth-line{stroke-dasharray:1500;stroke-dashoffset:1500;animation:drawLine 3s ease-out forwards}
.growth-fill{opacity:0;animation:fadeInFill 3s ease-out .5s forwards}
.dot-pulse{animation:pulse 2s ease-in-out infinite}
.dot-pulse:nth-child(3){animation-delay:.3s}
.dot-pulse:nth-child(4){animation-delay:.6s}
.dot-pulse:nth-child(5){animation-delay:.9s}
.dot-pulse:nth-child(6){animation-delay:1.2s}
.ripple{opacity:0;animation:rippleOut 2s ease-out infinite}
.r2{animation-delay:1s}
.coin-icon{animation:floatIcon 4s ease-in-out infinite;transform-origin:center;cursor:pointer;transition:transform .3s ease}
.coin-icon:hover{animation:none;transform:translate(480px,80px) scale(1.2) rotate(360deg)}
.chart-icon{animation:floatIcon 4s ease-in-out infinite;animation-delay:1s;transform-origin:center;cursor:pointer;transition:transform .3s ease}
.chart-icon:hover{animation:none;transform:translate(320px,200px) scale(1.2) rotate(-10deg)}
.target-icon{animation:floatIcon 4s ease-in-out infinite;animation-delay:2s;transform-origin:center;cursor:pointer;transition:transform .3s ease}
.target-icon:hover{animation:none;transform:translate(170px,350px) scale(1.2) rotate(10deg)}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes fadeInFill{to{opacity:1}}
@keyframes pulse{0%,100%{r:8;opacity:.8}50%{r:12;opacity:1}}
@keyframes rippleOut{0%{r:10;opacity:1}100%{r:40;opacity:0}}
@keyframes floatIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@media(max-width:768px){.elegant-growth-art{height:500px}}

.finance-illustration{position:relative;width:100%;height:600px;display:flex;align-items:center;justify-content:center}
.phone-mockup{position:relative;width:280px;height:560px;background:linear-gradient(135deg,#1a1f3a 0%,#0f172a 100%);border-radius:40px;padding:12px;box-shadow:0 30px 80px rgba(0,0,0,.15);animation:phoneFloat 6s ease-in-out infinite;z-index:2}
.phone-screen{width:100%;height:100%;background:#fff;border-radius:32px;padding:20px;overflow:hidden;position:relative}
.screen-header{width:100%;height:6px;background:#e9ecef;border-radius:10px;margin-bottom:30px}
.balance-card{background:linear-gradient(135deg,#0d6efd 0%,#0dcaf0 100%);border-radius:20px;padding:24px;margin-bottom:20px;box-shadow:0 10px 30px rgba(13,110,253,.3);animation:cardPulse 3s ease-in-out infinite}
.balance-label{font-size:12px;color:rgba(255,255,255,.8);margin-bottom:8px;font-weight:500}
.balance-amount{font-size:32px;color:#fff;font-weight:700;margin-bottom:8px}
.balance-change{font-size:14px;color:#fff;font-weight:600;background:rgba(255,255,255,.2);display:inline-block;padding:4px 12px;border-radius:20px}
.mini-chart{width:100%;height:80px;background:#f8f9fa;border-radius:12px;padding:10px}
.chart-line-anim{stroke-dasharray:400;stroke-dashoffset:400;animation:drawChart 3s ease-out infinite}
.float-card{position:absolute;background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 10px 40px rgba(0,0,0,.1);display:flex;align-items:center;gap:12px;animation:floatCard 4s ease-in-out infinite;cursor:pointer;transition:all .3s ease;z-index:1}
.float-card:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 20px 60px rgba(13,110,253,.2)}
.card-icon{font-size:28px}
.card-text{font-size:14px;font-weight:600;color:#1a1f3a}
.card-1{top:15%;left:5%;animation-delay:0s}
.card-2{top:45%;right:5%;animation-delay:1s}
.card-3{bottom:20%;left:8%;animation-delay:2s}
.particle{position:absolute;width:8px;height:8px;background:#0d6efd;border-radius:50%;opacity:.6;animation:particleFloat 5s ease-in-out infinite}
.part-1{top:20%;right:15%;animation-delay:0s}
.part-2{top:35%;left:10%;animation-delay:1.5s;background:#0dcaf0}
.part-3{bottom:30%;right:20%;animation-delay:3s;background:#198754}
.part-4{bottom:45%;left:15%;animation-delay:4.5s;background:#ffc107}
@keyframes phoneFloat{0%,100%{transform:translateY(0) rotateY(-5deg)}50%{transform:translateY(-20px) rotateY(5deg)}}
@keyframes cardPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes drawChart{0%{stroke-dashoffset:400}60%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes particleFloat{0%,100%{transform:translate(0,0);opacity:.6}50%{transform:translate(20px,-20px);opacity:1}}
@media(max-width:768px){.finance-illustration{height:500px}.phone-mockup{width:240px;height:480px}.balance-amount{font-size:26px}.float-card{padding:12px 16px}.card-text{font-size:12px}}

.world-market-scene{position:relative;width:100%;height:600px;display:flex;align-items:center;justify-content:center;perspective:1200px}
.globe-container{position:relative;width:300px;height:300px;animation:globeFloat 8s ease-in-out infinite}
.globe{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:globeRotate 20s linear infinite}
.globe-sphere{position:absolute;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(13,110,253,.3),rgba(13,110,253,.1));border:3px solid rgba(13,110,253,.2);box-shadow:inset -30px -30px 60px rgba(13,110,253,.2),0 0 80px rgba(13,110,253,.15)}
.globe-line{position:absolute;width:100%;height:100%;border:2px solid rgba(13,110,253,.15);border-radius:50%;top:0;left:0}
.gl1{transform:rotateY(0deg)}
.gl2{transform:rotateY(45deg)}
.gl3{transform:rotateY(90deg)}
.gl4{transform:rotateX(90deg)}
.market-ticker{position:absolute;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 10px 40px rgba(0,0,0,.1);display:flex;align-items:center;gap:12px;animation:tickerFloat 4s ease-in-out infinite;cursor:pointer;transition:all .3s ease;z-index:10}
.market-ticker:hover{transform:translateY(-10px) scale(1.1);box-shadow:0 20px 60px rgba(13,110,253,.25)}
.ticker-flag{font-size:28px}
.ticker-info{display:flex;flex-direction:column}
.ticker-name{font-size:12px;font-weight:700;color:#6c757d;letter-spacing:.5px}
.ticker-value{font-size:16px;font-weight:700;color:#198754}
.t1{top:10%;right:15%;animation-delay:0s}
.t2{top:35%;left:5%;animation-delay:1s}
.t3{bottom:30%;right:10%;animation-delay:2s}
.t4{bottom:15%;left:10%;animation-delay:3s}
.data-stream{position:absolute;width:2px;height:80px;background:linear-gradient(180deg,transparent,#0d6efd,transparent);animation:streamFlow 3s ease-in-out infinite;opacity:.6}
.s1{top:20%;right:25%;animation-delay:0s}
.s2{top:50%;left:15%;animation-delay:1s}
.s3{bottom:25%;right:20%;animation-delay:2s}
.pulse-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;border:2px solid #0d6efd;border-radius:50%;opacity:0;animation:pulseExpand 4s ease-out infinite}
.pr2{animation-delay:1.3s}
.pr3{animation-delay:2.6s}
@keyframes globeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
@keyframes globeRotate{from{transform:rotateY(0deg) rotateX(10deg)}to{transform:rotateY(360deg) rotateX(10deg)}}
@keyframes tickerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes streamFlow{0%{transform:translateY(-80px);opacity:0}50%{opacity:.8}100%{transform:translateY(80px);opacity:0}}
@keyframes pulseExpand{0%{width:300px;height:300px;opacity:.6}100%{width:500px;height:500px;opacity:0}}
@media(max-width:768px){.world-market-scene{height:500px}.globe-container{width:240px;height:240px}.market-ticker{padding:10px 12px}.ticker-flag{font-size:22px}.ticker-value{font-size:14px}}

.world-market-globe{position:relative;width:100%;height:600px;display:flex;align-items:center;justify-content:center}
.globe-3d{position:relative;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e3f2fd 0%,#bbdefb 30%,#90caf9 60%,#64b5f6 100%);box-shadow:inset -40px -40px 80px rgba(0,0,0,.15),inset 20px 20px 60px rgba(255,255,255,.3),0 40px 100px rgba(13,110,253,.2);animation:globeRotate 30s linear infinite;transform-style:preserve-3d}
.globe-inner{position:absolute;width:100%;height:100%;border-radius:50%;overflow:hidden}
.continent{position:absolute;background:#42a5f5;border-radius:50%;opacity:.4}
.c1{width:80px;height:60px;top:30%;left:20%;border-radius:40% 60% 50% 50%}
.c2{width:70px;height:90px;top:40%;right:25%;border-radius:50% 40% 60% 50%}
.c3{width:60px;height:50px;bottom:35%;left:35%;border-radius:60% 50% 40% 60%}
.globe-grid{position:absolute;width:100%;height:100%;border-radius:50%}
.grid-line{position:absolute;border:1px solid rgba(255,255,255,.3)}
.h1{width:100%;height:0;top:25%;left:0;border-radius:50%}
.h2{width:100%;height:0;top:50%;left:0}
.h3{width:100%;height:0;top:75%;left:0;border-radius:50%}
.v1{width:0;height:100%;left:33%;top:0}
.v2{width:0;height:100%;left:66%;top:0}
.globe-shine{position:absolute;top:15%;left:20%;width:120px;height:120px;background:radial-gradient(circle,rgba(255,255,255,.6),transparent);border-radius:50%;filter:blur(20px)}
.stock-ticker{position:absolute;background:#fff;border-radius:12px;padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,.12);display:flex;align-items:center;gap:8px;animation:tickerBounce 3s ease-in-out infinite;cursor:pointer;transition:all .3s ease;z-index:10}
.stock-ticker:hover{transform:scale(1.15) translateY(-5px);box-shadow:0 15px 45px rgba(13,110,253,.3)}
.ticker-dot{width:8px;height:8px;background:#10b981;border-radius:50%;animation:dotPulse 2s ease-in-out infinite}
.ticker-name{font-size:11px;font-weight:700;color:#6c757d;letter-spacing:.3px}
.ticker-val{font-size:13px;font-weight:700;color:#10b981}
.t1{top:12%;right:18%;animation-delay:0s}
.t2{top:48%;left:8%;animation-delay:.8s}
.t3{bottom:25%;right:12%;animation-delay:1.6s}
.t4{bottom:18%;left:15%;animation-delay:2.4s}
.connect-line{position:absolute;width:2px;background:linear-gradient(180deg,transparent,rgba(13,110,253,.4),transparent);animation:lineFlow 3s ease-in-out infinite}
.l1{height:100px;top:20%;right:24%;transform:rotate(25deg)}
.l2{height:120px;top:45%;left:14%;transform:rotate(-20deg);animation-delay:.8s}
.l3{height:90px;bottom:28%;right:18%;transform:rotate(30deg);animation-delay:1.6s}
.l4{height:110px;bottom:22%;left:20%;transform:rotate(-25deg);animation-delay:2.4s}
@keyframes globeRotate{from{transform:rotateY(0deg) rotateX(5deg)}to{transform:rotateY(360deg) rotateX(5deg)}}
@keyframes tickerBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.4);opacity:1}}
@keyframes lineFlow{0%,100%{opacity:.3}50%{opacity:.8}}
@media(max-width:768px){.world-market-globe{height:500px}.globe-3d{width:280px;height:280px}.stock-ticker{padding:8px 12px}.ticker-name{font-size:10px}.ticker-val{font-size:12px}}

.world-market-globe{perspective:1500px}
.globe-3d{width:380px;height:380px;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 50%,#60a5fa 100%);box-shadow:inset -60px -60px 120px rgba(0,0,0,.4),inset 30px 30px 80px rgba(255,255,255,.2),0 50px 120px rgba(13,110,253,.35),0 0 0 1px rgba(255,255,255,.1);animation:globeSpin 40s linear infinite;filter:drop-shadow(0 30px 60px rgba(0,0,0,.2))}
.globe-inner{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 60%)}
.continent{background:linear-gradient(135deg,#1e40af,#2563eb);opacity:.6;box-shadow:inset -5px -5px 15px rgba(0,0,0,.3)}
.c1{width:90px;height:70px;border-radius:45% 55% 50% 50%;transform:rotate(-15deg)}
.c2{width:80px;height:100px;border-radius:50% 45% 55% 50%;transform:rotate(10deg)}
.c3{width:70px;height:60px;border-radius:55% 50% 45% 60%;transform:rotate(5deg)}
.grid-line{border:1.5px solid rgba(255,255,255,.15)}
.h1,.h2,.h3,.v1,.v2{box-shadow:0 0 10px rgba(255,255,255,.1)}
.globe-shine{width:140px;height:140px;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,rgba(255,255,255,.2) 40%,transparent 70%);filter:blur(25px);animation:shineMove 8s ease-in-out infinite}
.stock-ticker{background:linear-gradient(135deg,#fff 0%,#f8f9fa 100%);padding:12px 16px;box-shadow:0 12px 40px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05);gap:10px;animation:tickerFloat 4s ease-in-out infinite;transition:all .4s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(10px)}
.stock-ticker:hover{transform:scale(1.2) translateY(-8px) rotateZ(2deg);box-shadow:0 20px 60px rgba(13,110,253,.35),0 0 0 2px rgba(13,110,253,.3)}
.ticker-dot{width:10px;height:10px;background:linear-gradient(135deg,#10b981,#059669);animation:dotGlow 2s ease-in-out infinite;box-shadow:0 0 15px rgba(16,185,129,.6)}
.ticker-name{font-size:12px;font-weight:800;color:#1e293b;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.05)}
.ticker-val{font-size:14px;font-weight:800;text-shadow:0 1px 2px rgba(16,185,129,.2)}
.connect-line{width:3px;background:linear-gradient(180deg,transparent,rgba(13,110,253,.6),transparent);animation:lineGlow 3s ease-in-out infinite;box-shadow:0 0 15px rgba(13,110,253,.4);filter:blur(1px)}
.l1{height:110px;transform:rotate(28deg)}
.l2{height:130px;transform:rotate(-22deg)}
.l3{height:100px;transform:rotate(32deg)}
.l4{height:120px;transform:rotate(-28deg)}
@keyframes globeSpin{from{transform:rotateY(0deg) rotateX(8deg)}to{transform:rotateY(360deg) rotateX(8deg)}}
@keyframes shineMove{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-10px)}}
@keyframes tickerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes dotGlow{0%,100%{transform:scale(1);box-shadow:0 0 15px rgba(16,185,129,.6)}50%{transform:scale(1.5);box-shadow:0 0 25px rgba(16,185,129,.9)}}
@keyframes lineGlow{0%,100%{opacity:.4}50%{opacity:1}}

.world-market-globe{perspective:2000px;transform-style:preserve-3d}
.globe-3d{width:420px;height:420px;background:radial-gradient(circle at 25% 25%,#4f46e5 0%,#3730a3 35%,#1e1b4b 70%,#0f172a 100%);box-shadow:inset -80px -80px 150px rgba(0,0,0,.7),inset 40px 40px 100px rgba(139,92,246,.3),inset 0 0 80px rgba(99,102,241,.2),0 60px 150px rgba(0,0,0,.5),0 0 100px rgba(79,70,229,.3);animation:globeSpin 50s linear infinite;border:2px solid rgba(139,92,246,.2);position:relative}
.globe-3d::before{content:'';position:absolute;top:-5%;left:-5%;width:110%;height:110%;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.15),transparent 40%);border-radius:50%;filter:blur(30px);animation:atmosphereGlow 6s ease-in-out infinite}
.globe-3d::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.25),transparent 50%);border-radius:50%;mix-blend-mode:overlay}
.globe-inner{background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.2),transparent 50%)}
.continent{background:linear-gradient(135deg,#312e81 0%,#4338ca 50%,#6366f1 100%);opacity:.8;box-shadow:inset -8px -8px 20px rgba(0,0,0,.5),inset 4px 4px 15px rgba(139,92,246,.3);filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.c1{width:95px;height:75px;animation:continentShift 15s ease-in-out infinite}
.c2{width:85px;height:105px;animation:continentShift 18s ease-in-out infinite;animation-delay:2s}
.c3{width:75px;height:65px;animation:continentShift 20s ease-in-out infinite;animation-delay:4s}
.grid-line{border:2px solid rgba(139,92,246,.25);box-shadow:0 0 15px rgba(139,92,246,.2)}
.globe-shine{width:160px;height:160px;background:radial-gradient(circle,rgba(255,255,255,.7) 0%,rgba(255,255,255,.3) 30%,transparent 60%);filter:blur(35px);animation:shineMove 10s ease-in-out infinite;mix-blend-mode:overlay}
.stock-ticker{background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(248,250,252,.95) 100%);padding:14px 18px;box-shadow:0 20px 60px rgba(0,0,0,.25),0 0 0 1px rgba(139,92,246,.15),inset 0 1px 0 rgba(255,255,255,.8);gap:12px;animation:tickerFloat 5s ease-in-out infinite;border-radius:16px;border:1px solid rgba(139,92,246,.1)}
.stock-ticker::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(139,92,246,.05),transparent);border-radius:16px;opacity:0;transition:opacity .4s}
.stock-ticker:hover::before{opacity:1}
.stock-ticker:hover{transform:scale(1.25) translateY(-12px) rotateZ(3deg);box-shadow:0 30px 80px rgba(79,70,229,.4),0 0 0 3px rgba(139,92,246,.4),inset 0 1px 0 rgba(255,255,255,1)}
.ticker-dot{width:12px;height:12px;background:radial-gradient(circle,#10b981 0%,#059669 100%);animation:dotGlow 2.5s ease-in-out infinite;box-shadow:0 0 20px rgba(16,185,129,.8),inset 0 0 8px rgba(255,255,255,.5)}
.ticker-name{font-size:13px;font-weight:900;color:#0f172a;letter-spacing:.8px;text-shadow:0 1px 3px rgba(0,0,0,.1)}
.ticker-val{font-size:15px;font-weight:900;color:#10b981;text-shadow:0 2px 4px rgba(16,185,129,.3)}
.connect-line{width:4px;background:linear-gradient(180deg,transparent,rgba(139,92,246,.8),transparent);animation:lineGlow 4s ease-in-out infinite;box-shadow:0 0 20px rgba(139,92,246,.6),inset 0 0 8px rgba(255,255,255,.3);filter:blur(1.5px)}
@keyframes globeSpin{from{transform:rotateY(0deg) rotateX(12deg) rotateZ(2deg)}to{transform:rotateY(360deg) rotateX(12deg) rotateZ(2deg)}}
@keyframes atmosphereGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}
@keyframes continentShift{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(3px) translateY(-2px)}}
@keyframes shineMove{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-15px) scale(1.1)}}
@keyframes tickerFloat{0%,100%{transform:translateY(0) rotateZ(0deg)}50%{transform:translateY(-22px) rotateZ(1deg)}}
@keyframes dotGlow{0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(16,185,129,.8),inset 0 0 8px rgba(255,255,255,.5)}50%{transform:scale(1.6);box-shadow:0 0 35px rgba(16,185,129,1),inset 0 0 12px rgba(255,255,255,.8)}}
@keyframes lineGlow{0%,100%{opacity:.5;box-shadow:0 0 20px rgba(139,92,246,.6)}50%{opacity:1;box-shadow:0 0 35px rgba(139,92,246,1)}}

.world-market-globe{perspective:2500px}
.globe-3d{width:450px;height:450px;background:radial-gradient(circle at 35% 35%,#4a9eff 0%,#2563eb 25%,#1e40af 50%,#1e3a8a 75%,#0c1e47 100%);box-shadow:inset -100px -100px 200px rgba(0,0,0,.8),inset 60px 60px 120px rgba(74,158,255,.2),0 80px 180px rgba(0,0,0,.6);animation:globeSpin 60s linear infinite;border:none;overflow:visible}
.globe-3d::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:radial-gradient(ellipse at 25% 25%,rgba(255,255,255,.4) 0%,rgba(255,255,255,.15) 20%,transparent 45%);pointer-events:none;z-index:10}
.globe-3d::after{content:'';position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border-radius:50%;background:radial-gradient(circle,transparent 48%,rgba(74,158,255,.15) 49%,rgba(74,158,255,.3) 50%,transparent 51%);filter:blur(8px);animation:atmospherePulse 8s ease-in-out infinite}
.globe-inner{background:none}
.continent{background:linear-gradient(135deg,#2d5016 0%,#3d6b1f 40%,#4a7c2a 100%);opacity:.9;box-shadow:inset -10px -10px 25px rgba(0,0,0,.6),2px 2px 8px rgba(0,0,0,.4)}
.c1{width:100px;height:80px;border-radius:48% 52% 45% 55%;transform:rotate(-12deg)}
.c2{width:90px;height:110px;border-radius:52% 48% 58% 42%;transform:rotate(8deg)}
.c3{width:80px;height:70px;border-radius:55% 45% 50% 50%;transform:rotate(-5deg)}
.grid-line{border:1.5px solid rgba(255,255,255,.08);box-shadow:none}
.globe-shine{width:180px;height:180px;background:radial-gradient(circle,rgba(255,255,255,.6) 0%,rgba(255,255,255,.2) 35%,transparent 65%);filter:blur(40px);animation:shineMove 12s ease-in-out infinite;top:10%;left:15%;mix-blend-mode:screen}
.stock-ticker{background:rgba(255,255,255,.97);padding:15px 20px;box-shadow:0 25px 70px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.08);gap:14px;animation:tickerFloat 6s ease-in-out infinite;border-radius:18px;backdrop-filter:blur(20px)}
.stock-ticker:hover{transform:scale(1.3) translateY(-15px);box-shadow:0 35px 90px rgba(13,110,253,.45),0 0 0 3px rgba(13,110,253,.5)}
.ticker-dot{width:14px;height:14px;background:radial-gradient(circle,#10b981 30%,#059669 100%);animation:dotGlow 3s ease-in-out infinite;box-shadow:0 0 25px rgba(16,185,129,1),inset 0 0 10px rgba(255,255,255,.6)}
.ticker-name{font-size:14px;font-weight:900;color:#0a0a0a}
.ticker-val{font-size:16px;font-weight:900;color:#059669}
.connect-line{width:5px;background:linear-gradient(180deg,transparent,rgba(13,110,253,.9),transparent);animation:lineGlow 5s ease-in-out infinite;box-shadow:0 0 25px rgba(13,110,253,.8);filter:blur(2px)}
@keyframes globeSpin{from{transform:rotateY(0deg) rotateX(15deg)}to{transform:rotateY(360deg) rotateX(15deg)}}
@keyframes atmospherePulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes shineMove{0%,100%{transform:translate(0,0)}50%{transform:translate(25px,-20px)}}
@keyframes tickerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-25px)}}
@keyframes dotGlow{0%,100%{transform:scale(1);box-shadow:0 0 25px rgba(16,185,129,1)}50%{transform:scale(1.7);box-shadow:0 0 40px rgba(16,185,129,1)}}
@keyframes lineGlow{0%,100%{opacity:.6}50%{opacity:1}}

.premium-map-visual{position:relative;width:100%;height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.india-map{width:400px;height:500px;filter:drop-shadow(0 20px 60px rgba(13,110,253,.15));animation:mapFloat 6s ease-in-out infinite;z-index:2}
.map-outline{animation:mapPulse 4s ease-in-out infinite}
.map-dot{animation:dotPulse 2s ease-in-out infinite}
.d1{animation-delay:0s}
.d2{animation-delay:.5s}
.d3{animation-delay:1s}
.d4{animation-delay:1.5s}
.wave-container{position:absolute;bottom:0;left:0;width:100%;height:300px;z-index:1}
.wave{width:100%;height:100%}
.wave-path{animation:waveFlow 15s ease-in-out infinite}
.w1{animation-delay:0s}
.w2{animation-delay:2s}
.w3{animation-delay:4s}
.floating-badge{position:absolute;background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 8px 32px rgba(0,0,0,.08);display:flex;align-items:center;gap:12px;animation:badgeFloat 5s ease-in-out infinite;cursor:pointer;transition:all .3s ease;z-index:3}
.floating-badge:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 16px 48px rgba(13,110,253,.2)}
.badge-icon{font-size:28px}
.badge-text{font-size:14px;font-weight:700;color:#0d6efd}
.b1{top:20%;right:15%;animation-delay:0s}
.b2{top:50%;left:10%;animation-delay:1.5s}
.b3{bottom:25%;right:12%;animation-delay:3s}
@keyframes mapFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes mapPulse{0%,100%{opacity:.9}50%{opacity:1}}
@keyframes dotPulse{0%,100%{r:8;opacity:.8}50%{r:12;opacity:1}}
@keyframes waveFlow{0%{d:path('M0,150 Q300,100 600,150 T1200,150 L1200,300 L0,300 Z')}50%{d:path('M0,130 Q300,180 600,130 T1200,130 L1200,300 L0,300 Z')}100%{d:path('M0,150 Q300,100 600,150 T1200,150 L1200,300 L0,300 Z')}}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@media(max-width:768px){.premium-map-visual{height:500px}.india-map{width:320px;height:400px}.floating-badge{padding:12px 16px}.badge-icon{font-size:24px}.badge-text{font-size:12px}}

.live-candlestick-chart{position:relative;width:100%;height:600px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px}
.chart-svg{width:100%;max-width:600px;height:400px;filter:drop-shadow(0 10px 40px rgba(0,0,0,.06))}
.grid-line{opacity:.3}
.candle{cursor:pointer;transition:all .3s ease;animation:candleGrow 1.5s ease-out forwards}
.candle rect{transition:all .3s ease}
.candle line{transition:all .3s ease}
.c1{animation-delay:.1s}
.c2{animation-delay:.2s}
.c3{animation-delay:.3s}
.c4{animation-delay:.4s}
.c5{animation-delay:.5s}
.c6{animation-delay:.6s}
.c7{animation-delay:.7s}
.c8{animation-delay:.8s}
.candle:hover rect{transform:scaleY(1.1);filter:brightness(1.2)}
.candle:hover line{stroke-width:3}
.trend-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawTrend 3s ease-out 1s forwards}
.chart-stats{display:flex;gap:40px;padding:20px 30px;background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.stat-item{display:flex;flex-direction:column;gap:8px}
.stat-label{font-size:13px;font-weight:600;color:#6c757d;letter-spacing:.5px}
.stat-value{font-size:20px;font-weight:800}
.stat-value.green{color:#10b981}
.stat-value.red{color:#ef4444}
.live-candlestick-chart:hover .candle rect{animation:candlePulse 2s ease-in-out infinite}
@keyframes candleGrow{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
@keyframes drawTrend{to{stroke-dashoffset:0}}
@keyframes candlePulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.05)}}
@media(max-width:768px){.live-candlestick-chart{height:500px}.chart-svg{height:320px}.chart-stats{gap:20px;padding:15px 20px}.stat-label{font-size:11px}.stat-value{font-size:16px}}

.premium-chart-container{width:100%;max-width:800px;background:#fff;border-radius:24px;padding:30px;box-shadow:0 20px 60px rgba(0,0,0,.08);margin:0 auto;transition:all .4s ease}
.premium-chart-container:hover{box-shadow:0 30px 80px rgba(0,0,0,.12);transform:translateY(-5px)}
.chart-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px}
.chart-title h3{font-size:18px;font-weight:700;color:#1f2937;margin:0 0 12px}
.chart-value{display:flex;align-items:baseline;gap:15px}
.price{font-size:32px;font-weight:800;color:#1f2937;letter-spacing:-1px}
.change{font-size:16px;font-weight:700;padding:6px 12px;border-radius:8px}
.change.positive{color:#10b981;background:rgba(16,185,129,.1)}
.change.negative{color:#ef4444;background:rgba(239,68,68,.1)}
.chart-period{display:flex;gap:8px}
.period-btn{padding:8px 16px;border:2px solid #e5e7eb;background:#fff;border-radius:10px;font-size:13px;font-weight:700;color:#6b7280;cursor:pointer;transition:all .3s ease}
.period-btn:hover{border-color:#0d6efd;color:#0d6efd}
.period-btn.active{border-color:#0d6efd;background:#0d6efd;color:#fff}
.premium-chart{width:100%;height:300px;margin:20px 0}
.chart-area{opacity:0;animation:fadeInArea 2s ease-out .5s forwards}
.chart-line{stroke-dasharray:2000;stroke-dashoffset:2000;animation:drawLine 3s ease-out forwards}
.chart-dot{animation:dotPulse 2s ease-in-out infinite}
.chart-dot-outer{animation:ripple 2s ease-out infinite}
.chart-footer{display:flex;justify-content:space-between;padding-top:25px;border-top:2px solid #f3f4f6}
.market-stat{display:flex;flex-direction:column;gap:8px}
.stat-label{font-size:12px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px}
.stat-value{font-size:16px;font-weight:700;color:#1f2937}
.premium-chart-container:hover .chart-line{stroke-width:4;filter:drop-shadow(0 0 8px #10b981)}
.premium-chart-container:hover .chart-dot{r:8}
@keyframes fadeInArea{to{opacity:1}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes dotPulse{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes ripple{0%{r:10;opacity:1}100%{r:20;opacity:0}}
@media(max-width:768px){.premium-chart-container{padding:20px}.chart-header{flex-direction:column;gap:20px}.price{font-size:24px}.change{font-size:14px}.chart-footer{flex-wrap:wrap;gap:20px}.market-stat{flex:1 1 45%}}

.laptop-mockup{position:relative;width:100%;max-width:700px;margin:0 auto;perspective:2000px;animation:laptopFloat 6s ease-in-out infinite}
.laptop-screen{position:relative;width:100%;padding:20px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border-radius:20px 20px 0 0;box-shadow:0 30px 80px rgba(0,0,0,.3),inset 0 0 0 8px #2a2a3e;transform:rotateX(5deg);transition:all .4s ease}
.laptop-mockup:hover .laptop-screen{transform:rotateX(0deg) scale(1.02)}
.screen-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:rgba(255,255,255,.05);border-radius:12px;margin-bottom:20px;backdrop-filter:blur(10px)}}
.header-left{display:flex;align-items:center;gap:15px}
.stock-name{font-size:14px;font-weight:700;color:#9ca3af}
.stock-price{font-size:24px;font-weight:800;color:#fff}
.stock-change{font-size:14px;font-weight:700;color:#10b981;background:rgba(16,185,129,.15);padding:6px 12px;border-radius:8px}
.time-badge{font-size:11px;font-weight:800;color:#fff;background:#ef4444;padding:6px 12px;border-radius:8px;letter-spacing:1px;animation:livePulse 2s ease-in-out infinite}
.chart-display{width:100%;height:250px;margin-bottom:20px}
.chart-fill{opacity:0;animation:fadeIn 2s ease-out .5s forwards}
.chart-stroke{stroke-dasharray:2000;stroke-dashoffset:2000;animation:drawChart 3s ease-out forwards}
.chart-stats-row{display:flex;justify-content:space-around;padding:15px;background:rgba(255,255,255,.05);border-radius:12px;backdrop-filter:blur(10px)}}
.mini-stat{display:flex;flex-direction:column;gap:6px;align-items:center}
.mini-stat .label{font-size:11px;font-weight:600;color:#9ca3af;text-transform:uppercase}
.mini-stat .value{font-size:16px;font-weight:800;color:#fff}
.laptop-base{width:120%;height:20px;background:linear-gradient(135deg,#2a2a3e 0%,#1a1a2e 100%);border-radius:0 0 30px 30px;margin:-10px auto 0;box-shadow:0 10px 30px rgba(0,0,0,.2);position:relative;left:-10%}
.laptop-shadow{position:absolute;bottom:-40px;left:10%;right:10%;height:40px;background:radial-gradient(ellipse,rgba(0,0,0,.3),transparent);filter:blur(20px)}
.laptop-mockup:hover .chart-stroke{stroke-width:3.5;filter:drop-shadow(0 0 8px #0d6efd)}
@keyframes laptopFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes drawChart{to{stroke-dashoffset:0}}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.7}}
@media(max-width:768px){.laptop-mockup{max-width:100%}.laptop-screen{padding:15px}.stock-price{font-size:20px}.chart-display{height:200px}}

.chart-display .candle{opacity:0;animation:candleGrow 0.8s ease-out forwards;cursor:pointer;transition:all .3s ease}
.chart-display .candle[data-delay="0.1"]{animation-delay:.1s}
.chart-display .candle[data-delay="0.2"]{animation-delay:.2s}
.chart-display .candle[data-delay="0.3"]{animation-delay:.3s}
.chart-display .candle[data-delay="0.4"]{animation-delay:.4s}
.chart-display .candle[data-delay="0.5"]{animation-delay:.5s}
.chart-display .candle[data-delay="0.6"]{animation-delay:.6s}
.chart-display .candle[data-delay="0.7"]{animation-delay:.7s}
.chart-display .candle[data-delay="0.8"]{animation-delay:.8s}
.chart-display .candle[data-delay="0.9"]{animation-delay:.9s}
.chart-display .candle[data-delay="1.0"]{animation-delay:1s}
.chart-display .candle[data-delay="1.1"]{animation-delay:1.1s}
.chart-display .candle:hover rect{transform:scaleY(1.15);filter:brightness(1.3)}
.chart-display .candle:hover line{stroke-width:2.5}
.laptop-mockup:hover .candle rect{animation:candlePulse 2s ease-in-out infinite}
@keyframes candleGrow{from{opacity:0;transform:scaleY(0);transform-origin:bottom}to{opacity:1;transform:scaleY(1);transform-origin:bottom}}
@keyframes candlePulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.08)}}


.chart-display .candle{opacity:0;animation:candleGrow 0.8s ease-out forwards;cursor:pointer;transition:all .3s ease;transform-origin:bottom}
.chart-display .candle[data-delay="0.1"]{animation-delay:.1s}
.chart-display .candle[data-delay="0.15"]{animation-delay:.15s}
.chart-display .candle[data-delay="0.2"]{animation-delay:.2s}
.chart-display .candle[data-delay="0.25"]{animation-delay:.25s}
.chart-display .candle[data-delay="0.3"]{animation-delay:.3s}
.chart-display .candle[data-delay="0.35"]{animation-delay:.35s}
.chart-display .candle[data-delay="0.4"]{animation-delay:.4s}
.chart-display .candle[data-delay="0.45"]{animation-delay:.45s}
.chart-display .candle[data-delay="0.5"]{animation-delay:.5s}
.chart-display .candle[data-delay="0.55"]{animation-delay:.55s}
.chart-display .candle[data-delay="0.6"]{animation-delay:.6s}
.chart-display .candle[data-delay="0.65"]{animation-delay:.65s}
.chart-display .candle[data-delay="0.7"]{animation-delay:.7s}
.chart-display .candle[data-delay="0.75"]{animation-delay:.75s}
.chart-display .candle:hover rect{transform:scaleY(1.1);filter:brightness(1.2)}
.chart-display .candle:hover line{stroke-width:2}
.laptop-mockup:hover .candle rect{animation:candlePulse 2s ease-in-out infinite}
@keyframes candleGrow{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
@keyframes candlePulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.05)}}


.chart-container{position:relative;width:100%}
.chart-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:rgba(255,255,255,.03);border-radius:10px 10px 0 0;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.05)}
.chart-tools{display:flex;gap:12px}
.tool-icon{font-size:16px;opacity:.6;cursor:pointer;transition:opacity .3s}
.tool-icon:hover{opacity:1}
.chart-timeframe{display:flex;gap:8px}
.tf-btn{font-size:11px;font-weight:600;color:#9ca3af;padding:4px 10px;border-radius:6px;cursor:pointer;transition:all .3s}
.tf-btn:hover{color:#fff;background:rgba(255,255,255,.05)}
.tf-btn.active{color:#fff;background:#0d6efd}
.chart-main{position:relative;display:flex}
.chart-display{flex:1;height:250px}
.price-scale{position:absolute;right:0;top:0;bottom:0;width:60px;display:flex;flex-direction:column;justify-content:space-between;padding:10px 8px;background:rgba(255,255,255,.02);border-left:1px solid rgba(255,255,255,.05)}
.price-level{font-size:10px;font-weight:600;color:#9ca3af;text-align:right}

/* Responsive Fixes for All Pages */
@media (max-width: 1200px) {
    .hero-section {
        padding: 60px 0;
    }
    
    .hero-title {
        font-size: 2.8rem;
    }
    
    .laptop-mockup {
        max-width: 600px;
    }
}

@media (max-width: 992px) {
    .hero-section {
        padding: 40px 0;
    }
    
    .hero-title {
        font-size: 2.5rem;
        text-align: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .service-hero {
        padding: 40px 0 !important;
    }
    
    .modern-page-header {
        padding: 40px 0 !important;
    }
    
    .insurance-animation {
        height: 300px !important;
        margin-bottom: 30px;
    }
    
    .protection-shield {
        width: 250px !important;
        height: 250px !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 30px 0;
        margin-top: 100px !important;
    }
    
    .hero-title {
        font-size: 2rem;
        line-height: 1.3;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-actions .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .service-hero {
        padding: 30px 0 !important;
        margin-top: 100px !important;
    }
    
    .modern-page-header {
        padding: 30px 0 !important;
        margin-top: 100px !important;
    }
    
    .display-4 {
        font-size: 2rem !important;
    }
    
    .display-5 {
        font-size: 1.8rem !important;
    }
    
    .container-xxl {
        padding: 30px 0;
    }
    
    .sip-calculator {
        margin-top: 30px;
    }
    
    .partners-slider {
        margin: 20px 0;
    }
    
    .partner-logo {
        height: 40px;
    }
    
    .review-card {
        margin-bottom: 20px;
    }
    
    .insurance-animation {
        height: 250px !important;
    }
    
    .blog-detail img {
        height: 250px !important;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 20px 0;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .service-hero {
        padding: 20px 0 !important;
    }
    
    .modern-page-header {
        padding: 20px 0 !important;
    }
    
    .display-4 {
        font-size: 1.8rem !important;
    }
    
    .display-5 {
        font-size: 1.6rem !important;
    }
    
    .btn-lg {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .container-xxl {
        padding: 20px 0;
    }
    
    .service-item {
        margin-bottom: 20px;
    }
    
    .process-item {
        margin-bottom: 30px;
    }
    
    .insurance-item span {
        font-size: 0.5rem !important;
    }
    
    .breadcrumb {
        font-size: 0.8rem;
    }
    
    .blog-content {
        font-size: 14px;
    }
}

/* Fix for navbar on mobile */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: #fff;
        border-radius: 10px;
        margin-top: 10px;
        padding: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
}

/* Success animation responsive fixes */
@media (max-width: 768px) {
    .success-hero-animation {
        height: 450px !important;
    }
    
    .success-icon {
        font-size: 32px !important;
    }
    
    .success-circle {
        width: 140px !important;
        height: 140px !important;
    }
    
    .success-core {
        width: 50px !important;
        height: 50px !important;
    }
    
    .success-checkmark {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    .success-hero-animation {
        height: 350px !important;
    }
    
    .success-icon {
        font-size: 24px !important;
    }
    
    .success-circle {
        width: 100px !important;
        height: 100px !important;
    }
    
    .success-core {
        width: 40px !important;
        height: 40px !important;
    }
    
    .success-checkmark {
        font-size: 20px !important;
    }
    
    .bar {
        width: 12px !important;
    }
    
    .growth-bars {
        gap: 8px !important;
    }
}

/* Ensure all images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Fix for tables on mobile */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.8rem;
    }
}

/* Fix for cards on mobile */
@media (max-width: 576px) {
    .card {
        margin-bottom: 15px;
    }
    
    .card-body {
        padding: 15px;
    }
}

/* Insurance Page Specific Styles - Scoped to prevent conflicts */
.insurance-animation .protection-rings .ring {
    position: absolute !important;
    border: 2px solid rgba(40, 167, 69, 0.3) !important;
    border-radius: 50% !important;
    animation: insuranceRipple 3s ease-out infinite !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.insurance-animation .ring-1 {
    width: 80px !important;
    height: 80px !important;
    animation-delay: 0s !important;
}

.insurance-animation .ring-2 {
    width: 120px !important;
    height: 120px !important;
    animation-delay: 1s !important;
}

.insurance-animation .ring-3 {
    width: 160px !important;
    height: 160px !important;
    animation-delay: 2s !important;
}

@keyframes insuranceRipple {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Fix Insurance Page Layering */
.insurance-animation .protection-rings {
    z-index: 1 !important;
}

.insurance-animation .insurance-types {
    z-index: 10 !important;
}
/* Insurance Animation Layout Fix */
.insurance-animation {
    position: relative !important;
    overflow: hidden !important;
}

.protection-rings {
    z-index: 1 !important;
}

.insurance-types {
    z-index: 10 !important;
}

.insurance-item {
    min-width: 80px !important;
    white-space: nowrap !important;
}

.insurance-item:nth-child(1) {
    top: 15% !important;
    right: 10% !important;
}

.insurance-item:nth-child(2) {
    bottom: 20% !important;
    left: 5% !important;
}

.insurance-item:nth-child(3) {
    top: 25% !important;
    left: 10% !important;
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(0.8) !important;
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5) !important;
        opacity: 0;
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) !important; }
    50% { transform: translateY(-5px) !important; }
}

@media (max-width: 768px) {
    .insurance-animation .shield-icon {
        animation: none !important;
    }
    
    .insurance-animation .ring {
        animation: none !important;
        opacity: 0.3 !important;
    }
    
    .insurance-animation .insurance-item {
        animation: none !important;
    }
}
/* New Insurance Protection Visual */
.insurance-protection-visual {
    position: relative;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.protection-center {
    position: relative;
    width: 200px;
    height: 200px;
}

.shield-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #28a745, #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
}

.shield-core i {
    font-size: 2rem;
    color: white;
}

.protection-circles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle {
    position: absolute;
    border: 2px solid rgba(40, 167, 69, 0.2);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle-1 {
    width: 120px;
    height: 120px;
}

.circle-2 {
    width: 160px;
    height: 160px;
}

.circle-3 {
    width: 200px;
    height: 200px;
}

.insurance-cards {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ins-card {
    position: absolute;
    background: white;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
    border: 2px solid #f8f9fa;
}

.card-life {
    top: 10%;
    right: 5%;
}

.card-health {
    bottom: 15%;
    left: 0%;
}

.card-vehicle {
    top: 30%;
    left: 5%;
}

.ins-card i {
    font-size: 1.4rem;
    color: #007bff;
}

.ins-card span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .insurance-protection-visual {
        height: 280px;
    }
    
    .protection-center {
        width: 160px;
        height: 160px;
    }
    
    .shield-core {
        width: 60px;
        height: 60px;
    }
    
    .shield-core i {
        font-size: 1.5rem;
    }
    
    .circle-1 {
        width: 100px;
        height: 100px;
    }
    
    .circle-2 {
        width: 130px;
        height: 130px;
    }
    
    .circle-3 {
        width: 160px;
        height: 160px;
    }
    
    .ins-card {
        padding: 10px 12px;
        min-width: 75px;
    }
    
    .ins-card i {
        font-size: 1.2rem;
    }
    
    .ins-card span {
        font-size: 0.65rem;
    }
}

/* Insurance Protection Visual Animations */
.insurance-protection-visual .protection-center {
    animation: centerFloat 4s ease-in-out infinite;
}

.insurance-protection-visual .shield-core {
    animation: shieldPulse 3s ease-in-out infinite;
}

.insurance-protection-visual .shield-core i {
    animation: iconGlow 2s ease-in-out infinite;
}

.insurance-protection-visual .circle {
    animation: circleRipple 4s ease-out infinite;
}

.insurance-protection-visual .circle-1 {
    animation-delay: 0s;
}

.insurance-protection-visual .circle-2 {
    animation-delay: 1.3s;
}

.insurance-protection-visual .circle-3 {
    animation-delay: 2.6s;
}

.insurance-protection-visual .ins-card {
    animation: cardFloat 3s ease-in-out infinite;
    transition: all 0.3s ease;
    cursor: pointer;
}

.insurance-protection-visual .ins-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0,123,255,0.2);
    border-color: #007bff;
}

.insurance-protection-visual .card-life {
    animation-delay: 0s;
}

.insurance-protection-visual .card-health {
    animation-delay: 1s;
}

.insurance-protection-visual .card-vehicle {
    animation-delay: 2s;
}

.insurance-protection-visual .ins-card i {
    animation: iconBounce 2s ease-in-out infinite;
}

/* Animation Keyframes */
@keyframes centerFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shieldPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 12px 35px rgba(40, 167, 69, 0.5);
    }
}

@keyframes iconGlow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }
}

@keyframes circleRipple {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes iconBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Mobile Animation Adjustments */
@media (max-width: 768px) {
    .insurance-protection-visual .protection-center {
        animation: centerFloat 5s ease-in-out infinite;
    }
    
    .insurance-protection-visual .shield-core {
        animation: shieldPulse 4s ease-in-out infinite;
    }
    
    .insurance-protection-visual .circle {
        animation: circleRipple 5s ease-out infinite;
    }
    
    .insurance-protection-visual .ins-card {
        animation: cardFloat 4s ease-in-out infinite;
    }
}

.card-travel {
    bottom: 5%;
    right: 15%;
}

.card-accident {
    top: 60%;
    right: 0%;
}

.insurance-protection-visual .card-travel {
    animation-delay: 3s;
}

.insurance-protection-visual .card-accident {
    animation-delay: 4s;
}