.nav-link.active span {
    color: #e73799;
}
.nav-link.active span + span {
    transform: scaleX(1);
}
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-animated {
    background: linear-gradient(-45deg, #6fba44, #e73799, #bd7042, #6fba44);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.input-highlight {
    position: relative;
    overflow: hidden;
}

.input-highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #6fba44, #e73799);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.input-highlight:focus-within::after {
    transform: translateX(0);
}

.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #6fba44, #e73799);
    z-index: 1000;
}

.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #6fba44, #e73799);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover::before {
    opacity: 0.1;
}

/* Modern Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #6fba44, #e73799);
    border-radius: 4px;
}


.hover-card-3d {
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s;
transform-style: preserve-3d;
}

.hover-card-3d:hover {
transform: translateY(-10px) rotateX(2deg) rotateY(2deg);
box-shadow: 
0 20px 40px rgba(111, 186, 68, 0.1),
0 15px 20px rgba(231, 55, 153, 0.1);
}

.hover-card-3d {
position: relative;
overflow: hidden;
}

.hover-card-3d::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(111, 186, 68, 0.1), rgba(231, 55, 153, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
}

.hover-card-3d:hover::before {
opacity: 1;
}


@keyframes float-slow {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(10px, -10px); }
}

@keyframes float-medium {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-15px, 15px); }
}

@keyframes float-fast {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, 20px); }
}

@keyframes dna {
0% { transform: translateY(0); }
100% { transform: translateY(-100px); }
}

@keyframes dna-reverse {
0% { transform: translateY(-100px); }
100% { transform: translateY(0); }
}

@keyframes scroll {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(20px); }
}

.animate-float-slow {
animation: float-slow 8s infinite ease-in-out;
}

.animate-float-medium {
animation: float-medium 6s infinite ease-in-out;
}

.animate-float-fast {
animation: float-fast 4s infinite ease-in-out;
}

.animate-dna {
animation: dna 20s infinite linear;
}

.animate-dna-reverse {
animation: dna-reverse 20s infinite linear;
}

.animate-scroll {
animation: scroll 2s infinite ease-in-out;
}