/* Immersive Ramadan Special Animations */

@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 185, 66, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(244, 185, 66, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(244, 185, 66, 0);
    }
}

@keyframes gradient-bg {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.immersive-menu-item a {
    position: relative;
    padding: 8px 15px !important;
    border-radius: 5px;
    background: linear-gradient(-45deg, #1a4a3a, #F4B942, #1a4a3a, #F4B942);
    background-size: 400% 400%;
    animation: gradient-bg 5s ease infinite, pulse-gold 2s infinite;
    color: #fff !important;
    transition: all 0.3s ease;
}

.immersive-menu-item a:hover {
    transform: scale(1.05);
    background-size: 200% 200%;
}

/* Homepage Ramadan Banner Styles */
.ramadan-banner-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #1a4a3a;
}

.ramadan-banner-content {
    position: relative;
    z-index: 2;
}

.ramadan-banner-img {
    position: relative;
    z-index: 1;
}

.ramadan-banner-img img {
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.animated-gradient-text {
    background: linear-gradient(to right, #F4B942, #fff, #F4B942);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shine 3s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}