body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.outer-circle {
    position: absolute;
    width: 75%;
    height: 75%;
    top: 11%;
    left: -24%;
    border: 8px solid #FF6600;  /* Slightly darker orange for better contrast */
    border-radius: 50%;
    box-shadow: 0 0 0 3px #000000;  /* Black outline for definition */
    background: radial-gradient(circle at center,
        #FFD700 0%,     /* Gold */
        #FFA500 30%,    /* Orange */
        #FF4500 60%,    /* Deep orange */
        #FF0000 85%,    /* Red */
        #000000 98%     /* Black edge */
    );
    z-index: -1;
}

/* Inner flower container */
.inner-flower-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 2%;
}

/* Overlay Patterns Group - Main container for all overlay patterns */
.overlay-patterns {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 27%;
}

/* Pattern Group - Container for both color groups */
.pattern-group {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translate(0, 0); /* Use this to move both patterns together */
}

/* Orange Pattern Group */
.orange-pattern-group {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Red Pattern Group */
.red-pattern-group {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -9%;  /* Relative offset from orange pattern */
}

.gradient-layer {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: -20%;
}er {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.pookkalam {
    position: relative;
    width: min(500px, 90vw);
    height: min(500px, 90vw);
    border-radius: 100%;
    overflow: visible;
}

/* Background fill that stays behind all elements */
.pookkalam::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        #000000 0%,    /* Black center */
        #000000 30%,   /* Black extends */
        transparent 30.5%,
        transparent 45%,
        #006400 45.5%, /* Dark green */
        #003300 65%,   /* Darker green */
        transparent 65.5%,
        transparent 75%,
        #8B0000 75.5%, /* Dark red */
        #FF0000 85%,   /* Bright red */
        transparent 85.5%
    );
    z-index: -2;
}

.pookkalam-group {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate(35%, 0); /* You can adjust these values to move the entire pookkalam */
}


.border-pattern {
    position: absolute;
    width: 200%;
    height: 100%;
    border-radius: 100%;
}



/* Border units positioned around the circle */
.border-unit:nth-child(1) { transform: rotate(15deg) translateX(250px); }
.border-unit:nth-child(2) { transform: rotate(30deg) translateX(250px); }
.border-unit:nth-child(3) { transform: rotate(45deg) translateX(250px); }
.border-unit:nth-child(4) { transform: rotate(60deg) translateX(250px); }
.border-unit:nth-child(5) { transform: rotate(75deg) translateX(250px); }
.border-unit:nth-child(6) { transform: rotate(90deg) translateX(250px); }
.border-unit:nth-child(7) { transform: rotate(105deg) translateX(250px); }
.border-unit:nth-child(8) { transform: rotate(120deg) translateX(250px); }
.border-unit:nth-child(9) { transform: rotate(135deg) translateX(250px); }
.border-unit:nth-child(10) { transform: rotate(150deg) translateX(250px); }
.border-unit:nth-child(11) { transform: rotate(165deg) translateX(250px); }
.border-unit:nth-child(12) { transform: rotate(180deg) translateX(250px); }
.border-unit:nth-child(13) { transform: rotate(195deg) translateX(250px); }
.border-unit:nth-child(14) { transform: rotate(210deg) translateX(250px); }
.border-unit:nth-child(15) { transform: rotate(225deg) translateX(250px); }
.border-unit:nth-child(16) { transform: rotate(240deg) translateX(250px); }
.border-unit:nth-child(17) { transform: rotate(255deg) translateX(250px); }
.border-unit:nth-child(18) { transform: rotate(270deg) translateX(250px); }
.border-unit:nth-child(19) { transform: rotate(285deg) translateX(250px); }
.border-unit:nth-child(20) { transform: rotate(300deg) translateX(250px); }
.border-unit:nth-child(21) { transform: rotate(315deg) translateX(250px); }
.border-unit:nth-child(22) { transform: rotate(330deg) translateX(250px); }
.border-unit:nth-child(23) { transform: rotate(345deg) translateX(250px); }
.border-unit:nth-child(24) { transform: rotate(360deg) translateX(250px); }

.outer-circle {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 14%;
    left: -23%;
    border: 5px solid #000000;  /* Bright orange from the reference */
    border-radius: 50%;
    background: radial-gradient(circle at center, transparent 98%, #000000 98%);
}

.main-pattern {
    position: absolute;
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
}

.petal-set {
    position: absolute;
    width: 100%;
    height: 100%;
}

.center-circles {
    position: absolute;
    top: 50%;
    left: -15%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
}

.center-circle {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.center-circle.large {
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center,
        #006400,  /* Dark green */
        #004d00   /* Darker green */
    );
    border: 2px solid #003300;
}

.center-circle.small {
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center,
        #DC143C,  /* Crimson */
        #8B0000   /* Dark red */
    );
    border: 2px solid #800000;
}

.petal {
    position: absolute;
    width: 80px;
    height: 140px;
    border: none;
    background: linear-gradient(45deg,
        #000000,  /* Black */
        #006400,  /* Dark green */
        #008000   /* Green */
    );
    border-radius: 50% 50% 30% 30%;
    transform-origin: bottom center;
    bottom: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.petal:nth-child(1) { transform: rotate(0deg) translateY(-20px); }
.petal:nth-child(2) { transform: rotate(45deg) translateY(-20px); }
.petal:nth-child(3) { transform: rotate(90deg) translateY(-20px); }
.petal:nth-child(4) { transform: rotate(135deg) translateY(-20px); }
.petal:nth-child(5) { transform: rotate(180deg) translateY(-20px); }
.petal:nth-child(6) { transform: rotate(225deg) translateY(-20px); }
.petal:nth-child(7) { transform: rotate(270deg) translateY(-20px); }
.petal:nth-child(8) { transform: rotate(315deg) translateY(-20px); }

/* Design layers from first pookkalam */
.design-layers {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
}

.gradient-layer {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: -20%;
}

.gradient-layer .petal-set {
    position: absolute;
    width: 100%;
    height: 100%;
}

.gradient-petal {
    position: absolute;
    width: 60px;
    height: 120px;
    background: linear-gradient(45deg, 
        #FF4500,  /* Deep orange */
        #FFA500,  /* Orange */
        #FFD700,  /* Yellow */
        #FFFFFF   /* White */
    );
    border-radius: 50% 50% 30% 30%;
    transform-origin: bottom center;
    bottom: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.gradient-layer .petal-set .gradient-petal:nth-child(1) { transform: rotate(0deg) translateY(-15px); }
.gradient-layer .petal-set .gradient-petal:nth-child(2) { transform: rotate(45deg) translateY(-15px); }
.gradient-layer .petal-set .gradient-petal:nth-child(3) { transform: rotate(90deg) translateY(-15px); }
.gradient-layer .petal-set .gradient-petal:nth-child(4) { transform: rotate(135deg) translateY(-15px); }
.gradient-layer .petal-set .gradient-petal:nth-child(5) { transform: rotate(180deg) translateY(-15px); }
.gradient-layer .petal-set .gradient-petal:nth-child(6) { transform: rotate(225deg) translateY(-15px); }
.gradient-layer .petal-set .gradient-petal:nth-child(7) { transform: rotate(270deg) translateY(-15px); }
.gradient-layer .petal-set .gradient-petal:nth-child(8) { transform: rotate(315deg) translateY(-15px); }

.accent-layer {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: -10%;
}

.accent-layer .petal-set {
    position: absolute;
    width: 100%;
    height: 100%;
}

.accent-petal {
    position: absolute;
    width: 40px;
    height: 80px;
    background: linear-gradient(45deg,
        #8B0000,  /* Dark red */
        #FF0000,  /* Bright red */
        #DC143C   /* Crimson */
    );
    border-radius: 50% 50% 30% 30%;
    transform-origin: bottom center;
    bottom: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.accent-layer .petal-set .accent-petal:nth-child(1) { transform: rotate(0deg) translateY(-10px); }
.accent-layer .petal-set .accent-petal:nth-child(2) { transform: rotate(45deg) translateY(-10px); }
.accent-layer .petal-set .accent-petal:nth-child(3) { transform: rotate(90deg) translateY(-10px); }
.accent-layer .petal-set .accent-petal:nth-child(4) { transform: rotate(135deg) translateY(-10px); }
.accent-layer .petal-set .accent-petal:nth-child(5) { transform: rotate(180deg) translateY(-10px); }
.accent-layer .petal-set .accent-petal:nth-child(6) { transform: rotate(225deg) translateY(-10px); }
.accent-layer .petal-set .accent-petal:nth-child(7) { transform: rotate(270deg) translateY(-10px); }
.accent-layer .petal-set .accent-petal:nth-child(8) { transform: rotate(315deg) translateY(-10px); }