/* Modular background styles using SVG pattern */
.bg-pattern {
    position: relative;
    overflow: hidden;
}

.bg-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/back-g.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15; /* Slightly increased opacity */
    pointer-events: none; /* Ensures the background doesn't interfere with clicks */
    z-index: -1;
    animation: slowMove 30s infinite alternate; /* Subtle animation effect */
}

/* Additional background classes can be added here */
.bg-gradient-blue {
    background: linear-gradient(145deg, #1a6ba2 0%, #2980b9 40%, #3498db 100%);
    position: relative;
}

.bg-gradient-blue::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(52, 152, 219, 0.4), transparent 70%),
                radial-gradient(circle at bottom left, rgba(41, 128, 185, 0.4), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

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