/* Banner 2 - Green/Teal/Cyan Theme */

.fizzy-banner-2 {
    position: relative;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.8) 0%, rgba(6, 182, 212, 0.5) 50%, rgba(139, 92, 246, 0.5) 100%);
    padding: 3rem 2rem;
    margin: 4rem auto;
    width: 50vw;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.fizzy-banner-2::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
    animation: gridPulse 20s linear infinite;
    pointer-events: none;
}

.fizzy-banner-2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        rgba(0, 0, 0, 0.35),
        radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(6, 182, 212, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(139, 92, 246, 0.3) 0%, transparent 50%);
    animation: colorPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@media (max-width: 768px) {
    .fizzy-banner-2 {
        width:90vw;
        padding: 2rem 1rem;
        margin: 2rem auto;
    }
}

/* Tablet: Wider banners */
@media (min-width: 769px) and (max-width: 1024px) {
    .fizzy-banner-2 {
        width: 80vw;
    }
}

/* Desktop: Even wider banners */
@media (min-width: 1025px) {
    .fizzy-banner-2 {
        width: 65vw;
    }
}