/* Hero Section Styles */

/* Hero Mesh Gradient Background */
.hero-mesh-gradient {
    position: relative;
    background: linear-gradient(135deg, #001D24 0%, #001D24 25%, #001D24 50%, #001D24 75%, #213C42 100%);
    background-size: 400% 400%;
    animation: meshGradientAnimation 15s ease infinite;
}

.hero-mesh-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 205, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 205, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 205, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

@keyframes meshGradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Particles.js container */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Hero Title with gradient */
.hero-title {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Button */
.hero-button {
    box-shadow: 0 0 20px rgba(0, 205, 255, 0.4);
    transition: all 0.3s ease;
}

.hero-button:hover {
    box-shadow: 0 0 30px rgba(0, 205, 255, 0.6);
}