/* Animated Background with Moving Particles */
.header-section {
    position: relative;
    overflow: hidden;
}

/* Floating particles animation */
.header-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(255,255,255,0.2), transparent),
        radial-gradient(2px 2px at 240px 90px, rgba(255,255,255,0.3), transparent);
    background-repeat: repeat;
    background-size: 300px 200px;
    animation: particleFloat 25s linear infinite;
    z-index: 1;
}

/* Additional particle layer */
.header-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(1px 1px at 50px 100px, rgba(255,255,255,0.2), transparent),
        radial-gradient(2px 2px at 100px 50px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 150px 120px, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 200px 20px, rgba(255,255,255,0.2), transparent);
    background-repeat: repeat;
    background-size: 250px 150px;
    animation: particleFloat 30s linear infinite reverse;
    z-index: 1;
}

.header-section .container {
    position: relative;
    z-index: 3;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
    25% {
        transform: translateY(-50px) translateX(30px);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-100px) translateX(-20px);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-150px) translateX(40px);
        opacity: 0.4;
    }
    100% {
        transform: translateY(-200px) translateX(10px);
        opacity: 0.2;
    }
}

/* Subtle background movement */
.header-section {
    background-image: url(Background.jpg);
    background-size: 110% 110%;
    background-position: center;
    animation: backgroundMove 40s ease-in-out infinite;
}

@keyframes backgroundMove {
    0%, 100% {
        background-position: center center;
    }
    25% {
        background-position: 60% 40%;
    }
    50% {
        background-position: 40% 60%;
    }
    75% {
        background-position: 70% 30%;
    }
}