﻿.diya-container {
    position: fixed;
    bottom: 20px; /* Position it in the bottom corner */
    left: 20px;
    z-index: 10000;
    transform: scale(0.8); /* Adjust size */
}

/* The Base of the Diya (Pot) */
.diya-base {
    width: 60px;
    height: 30px;
    background: #a0522d; /* Brown/Clay color */
    border-radius: 0 0 30px 30px;
    position: relative;
}

/* The Wick and Flame */
.diya-flame {
    width: 10px;
    height: 15px;
    background: #ffcc00; /* Yellow */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: absolute;
    top: -10px;
    left: 25px;
    /* Create the soft glow effect */
    box-shadow: 0 0 5px #ffcc00, 0 0 10px #ff9900, 0 0 15px rgba(255, 153, 0, 0.7);
    /* Apply the flickering animation */
    animation: diyaFlicker 1.5s infinite alternate;
}

/* The Flickering Keyframes */
@keyframes diyaFlicker {
    0% {
        opacity: 0.9;
        transform: scaleY(1);
        box-shadow: 0 0 5px #ffcc00, 0 0 12px #ff9900, 0 0 20px rgba(255, 153, 0, 0.7);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.1);
        box-shadow: 0 0 4px #ffcc00, 0 0 8px #ff9900, 0 0 15px rgba(255, 153, 0, 0.5);
    }
    100% {
        opacity: 0.95;
        transform: scaleY(1.05);
        box-shadow: 0 0 6px #ffcc00, 0 0 10px #ff9900, 0 0 18px rgba(255, 153, 0, 0.6);
    }
}