/* =========================
   GX TOOLS TICKER
========================= */

.gx-tools-ticker{

width:100%;

overflow:hidden;

background:#0f172a;

border:1px solid #1e293b;

border-radius:24px;

padding:16px 0;

margin:25px 0;

position:relative;

box-shadow:
0 10px 30px rgba(0,0,0,0.25);
}

/* TOP LIGHT EFFECT */

.gx-tools-ticker::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:1px;

background:
linear-gradient(
90deg,
transparent,
rgba(139,92,246,0.8),
transparent
);
}

/* SCROLL AREA */

.gx-tools-scroll{

display:inline-block;

white-space:nowrap;

padding-left:100%;

animation:
gxToolsTicker 30s linear infinite;
}

/* LINKS */

.gx-tools-scroll a{

display:inline-flex;
align-items:center;
justify-content:center;

margin-right:18px;

padding:12px 20px;

background:
linear-gradient(
180deg,
#172036,
#1e293b
);

color:#e2e8f0;

border:1px solid #334155;

border-radius:999px;

text-decoration:none;

font-size:15px;

font-weight:700;

font-family:'Inter',sans-serif;

transition:0.35s ease;

position:relative;

overflow:hidden;

box-shadow:
0 6px 18px rgba(0,0,0,0.18);
}

/* LIGHT GLOW */

.gx-tools-scroll a::before{
content:'';
position:absolute;
inset:0;

background:
radial-gradient(
circle at top,
rgba(139,92,246,0.22),
transparent 70%
);

opacity:0;

transition:0.35s ease;
}

/* HOVER */

.gx-tools-scroll a:hover{

transform:
translateY(-3px)
scale(1.03);

background:
linear-gradient(
135deg,
#7c3aed,
#06b6d4
);

color:#ffffff;

border-color:#8b5cf6;

box-shadow:
0 15px 35px rgba(139,92,246,0.30),
0 0 20px rgba(6,182,212,0.15);
}

.gx-tools-scroll a:hover::before{
opacity:1;
}

/* PAUSE ON HOVER */

.gx-tools-ticker:hover .gx-tools-scroll{
animation-play-state:paused;
}

/* ANIMATION */

@keyframes gxToolsTicker{

0%{
transform:translateX(0%);
}

100%{
transform:translateX(-100%);
}

}

/* MOBILE */

@media(max-width:768px){

.gx-tools-ticker{
border-radius:20px;
padding:14px 0;
}

.gx-tools-scroll a{

font-size:13px;

padding:10px 16px;

margin-right:14px;
}

}