.nav-tabs{
display:flex;
justify-content:center;
margin-bottom:2rem;
border-bottom:none;
gap:10px;
}

.coin{
position:absolute;
width:24px;
opacity:0.7;
animation:floatCoin 6s ease-in-out infinite;
}

@keyframes floatCoin{
0%{ transform:translateY(0px);}
50%{ transform:translateY(-12px);}
100%{ transform:translateY(0px);}
}
/* floating coins */

.coin{
position:absolute;
width:26px;
opacity:.8;
animation:floatCoin 6s ease-in-out infinite;
}

@keyframes floatCoin{
0%{transform:translateY(0)}
50%{transform:translateY(-12px)}
100%{transform:translateY(0)}
}

/* arrows */

.arrow{
position:absolute;
width:70px;
opacity:.35;
animation:arrowMove 5s ease-in-out infinite;
}

@keyframes arrowMove{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}

/* dashboard floating */

.dashboard{
position:absolute;
width:160px;
animation:dashboardFloat 7s ease-in-out infinite;
}

@keyframes dashboardFloat{
0%{transform:translateY(0)}
50%{transform:translateY(-15px)}
100%{transform:translateY(0)}
}

.text-primary{
color:#1f0433 !important;
margin-right:4px;
}

.nav:not(.nav-pills) .nav-link:hover,
.nav:not(.nav-pills) .nav-link:focus{
color:#ffffff;
}

.btn-primary{
background-color:#1F0433 !important;
border:none;
padding:.5rem 1.5rem;
font-size:1rem;
border-radius:25px;
transition:all .25s ease;
}

.btn-primary:hover{
background-color:#3C1C54 !important;
transform:scale(1.05);
}

.input-group-text i{
font-size:16px;
color:#1F0433;
}

.nav-tabs .nav-link{
color:#1F0433;
background:#f5f5f7;
border:none;
font-size:1.1rem;
font-weight:500;
text-transform:uppercase;
padding:10px 20px;
border-radius:25px;
transition:all .25s ease;
}

.nav-tabs .nav-link:hover{
background:#1F0433;
color:#ffffff;
}

.nav-tabs .nav-link.active{
color:#ffffff;
background-color:#1F0433;
box-shadow:0 4px 10px rgba(0,0,0,.15);
}

/* Arabic Font Support */

html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] .authentication-wrapper,
html[dir="rtl"] input,
html[dir="rtl"] button,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6{
font-family:'Tajawal',sans-serif !important;
}

/* -------------------------
   Glow behind hero
-------------------------*/
.auth-cover-bg::after{
content:"";
position:absolute;
width:800px;
height:800px;
background:radial-gradient(circle at center,
rgba(123,97,255,0.45) 0%,
rgba(123,97,255,0.25) 20%,
rgba(0,0,0,0) 60%);
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
z-index:0;
animation:heroGlow 8s ease-in-out infinite alternate;
}

/* -------------------------
   Gradient mesh background
-------------------------*/
.auth-cover-bg::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(at 20% 30%, rgba(123,97,255,0.25), transparent 50%),
radial-gradient(at 80% 40%, rgba(80,140,255,0.25), transparent 50%),
radial-gradient(at 40% 80%, rgba(255,120,180,0.20), transparent 50%);
z-index:0;
pointer-events:none;
animation:meshMove 18s ease-in-out infinite alternate;
}

@keyframes meshMove{
0%{transform:scale(1) translateY(0);}
100%{transform:scale(1.08) translateY(-20px);}
}

@keyframes heroGlow{
0%{
transform:translate(-50%,-50%) scale(1);
opacity:.7;
}
100%{
transform:translate(-50%,-50%) scale(1.15);
opacity:1;
}
}

/* -------------------------
   Floating particles
-------------------------*/
.particle{
position:absolute;
width:5px;
height:5px;
background:#7b61ff;
border-radius:50%;
opacity:.35;
animation:particleFloat 14s linear infinite;
filter:blur(0.2px);
}

@keyframes particleFloat{
0%{
transform:translateY(0px) translateX(0px);
opacity:.2;
}
50%{
transform:translateY(-40px) translateX(10px);
opacity:.5;
}
100%{
transform:translateY(0px) translateX(0px);
opacity:.2;
}
}

/* floating UI cards */

.ui-card{
position:absolute;
width:160px;
height:95px;
border-radius:14px;
background:rgba(255,255,255,0.92);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
backdrop-filter:blur(6px);
padding:12px;
display:flex;
flex-direction:column;
justify-content:center;
gap:6px;
animation:cardFloat 10s ease-in-out infinite;
}

.ui-icon{
position:absolute;
top:6px;
right:6px;
width:30px;
height:30px;
border-radius:8px;
background:rgba(107,78,255,0.15);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.ui-line{
height:8px;
background:linear-gradient(90deg,#6B4EFF,#9C8CFF);
border-radius:4px;
width:100%;
opacity:.8;
}

.ui-line.title{
height:10px;
width:70%;
background:#6B4EFF;
margin-top:14px;
}

.ui-line.small{
width:60%;
opacity:.6;
}

.ui-chart{
height:32px;
background:linear-gradient(90deg,#6B4EFF,#9C8CFF);
border-radius:6px;
width:100%;
opacity:.85;
}

/* animated mini chart line */

.ui-chart::after{
content:"";
position:absolute;
left:0;
top:0;
height:100%;
width:40%;
background:linear-gradient(90deg,#6B4EFF,#9C8CFF);
border-radius:6px;
animation:chartMove 3s ease-in-out infinite;
}

@keyframes chartMove{
0%{width:20%;}
50%{width:70%;}
100%{width:40%;}
}

/* animated commission counter */

.ui-counter{
font-size:12px;
font-weight:600;
color:#6B4EFF;
}

/* Added CSS for new hero widgets */

.ui-ticker{
font-size:11px;
font-weight:700;
color:#6B4EFF;
white-space:nowrap;
overflow:hidden;
position:relative;
height:16px;
}

.ui-ticker span{
display:inline-block;
animation:tickerSlide 12s linear infinite;
}

@keyframes tickerSlide{
0%{transform:translateX(100%);}
100%{transform:translateX(-120%);}
}

.chart-svg{
width:100%;
height:38px;
display:block;
}

.chart-line{
fill:none;
stroke:#6B4EFF;
stroke-width:3;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray:220;
stroke-dashoffset:220;
animation:drawChart 3.5s ease-in-out infinite alternate;
}

.chart-area{
fill:url(#chartGradient);
opacity:.22;
}

.chart-dot{
fill:#9C8CFF;
animation:dotPulse 1.8s ease-in-out infinite;
}

@keyframes drawChart{
0%{stroke-dashoffset:220;}
100%{stroke-dashoffset:0;}
}

@keyframes dotPulse{
0%,100%{transform:scale(1); opacity:.8;}
50%{transform:scale(1.25); opacity:1;}
}

.network-svg{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
}

.network-path{
fill:none;
stroke:url(#networkGradient);
stroke-width:2;
stroke-dasharray:8 6;
stroke-linecap:round;
animation:networkFlow 3s linear infinite;
opacity:.75;
}

@keyframes networkFlow{
0%{stroke-dashoffset:0;}
100%{stroke-dashoffset:-56;}
}

.commission-burst-coin{
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#FFD700;
box-shadow:0 0 10px rgba(255,215,0,.9);
pointer-events:none;
}

.link-dot{
position:absolute;
width:6px;
height:6px;
background:#FFD700;
border-radius:50%;
animation:linkTravel 4s linear infinite;
}

@keyframes linkTravel{
0%{transform:translate(0,0);}
50%{transform:translate(30px,-20px);}
100%{transform:translate(60px,0);}
}

.network-node{
position:absolute;
width:10px;
height:10px;
background:#6B4EFF;
border-radius:50%;
box-shadow:0 0 10px rgba(107,78,255,.6);
}

.network-line{
position:absolute;
height:2px;
background:linear-gradient(90deg,#6B4EFF,transparent);
width:80px;
opacity:.4;
}

.card1{ top:15%; left:60%; animation-delay:0s;}
.card2{ top:55%; left:75%; animation-delay:2s;}
.card3{ top:70%; left:55%; animation-delay:4s;}

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

/* animated background lines */

.bg-lines{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size:60px 60px;
animation:linesMove 30s linear infinite;
pointer-events:none;
}

@keyframes linesMove{
0%{background-position:0 0,0 0;}
100%{background-position:200px 200px,200px 200px;}
}