/* --- Start Unique Circle Menu CSS --- */
#my-unique-circle-menu {
  /* यह आईडी कंटेनर पर लागू होती है */
  font-family: Arial, sans-serif; /* बेसिक फ़ॉन्ट, थीम इसे ओवरराइड कर सकती है */
}

/* सर्कुलर मेन्यू कंटेनर */
#my-unique-circle-menu .circle-menu-container {
    position: fixed;
    top: 10px;
    left: 85%; /* आप इसे अपनी आवश्यकतानुसार समायोजित कर सकते हैं */
    transform: translateX(-50%);
    z-index: 1000;
}

/* मेन्यू आइकॉन */
#my-unique-circle-menu .menu-toggle {
    width: 60px;
    height: 60px;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbarYqIlzfRqB0VbKZvHmwyyPtvU0Y2Nkv1izHDcL_tlX1A6d3u8KtV85jfUhqqZcsUDKds1yQDDn6p_MJbM_wec1tyUHOw50hsTHKlpVzeEfhZR_gkFsL_O4OG0zytlGbKUlJaRQPSDfx7SAqI4D6B_SnWzxSQ-lWz3ld38THUIYWdDwsXE7bBuJx7EN/s374/IMG_20250404_055208.png');
    background-size: cover;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

#my-unique-circle-menu .menu-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* सब-कैटेगरी मेन्यू */
#my-unique-circle-menu .menu-categories {
    position: absolute;
    top: 80px;
    left: -180%; /* समायोजित */
    transform: translateX(-50%) scale(0); /* प्रारंभिक स्थिति */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 310px;
    background-color: transparent;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 8px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease, visibility 0.4s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 1001;
}

#my-unique-circle-menu .menu-categories.active {
    transform: translateX(-50%) scale(1); /* सही ट्रांसफॉर्म */
    opacity: 1;
    visibility: visible;
}

/* "अपनी पसंद पर क्लिक करें" टाइटल */
#my-unique-circle-menu .menu-categories .category-title {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    color: #fff;
    border-bottom: 1px solid #555;
    display: none;
    grid-column: 1 / -1;
    animation: zoomIn 0.8s ease-out;
    background-size: 200% auto;
    transition: background-position 0.5s ease;
    cursor: pointer;
    border-radius: 30px;
    /* ग्रेडिएंट JS द्वारा लागू किया जाएगा */
}

/* Gradient Background Styles for category titles */
#my-unique-circle-menu .menu-categories .category-title.gradient-1 { background-image: linear-gradient(135deg, #e74c3c 0%, #e74c3c 10%, #e67e22 10%, #e67e22 20%, #f1c40f 20%, #f1c40f 30%, #2ecc71 30%, #2ecc71 40%, #1abc9c 40%, #1abc9c 50%, #3498db 50%, #3498db 60%, #2980b9 60%, #2980b9 70%, #9b59b6 70%, #9b59b6 80%, #e91e63 80%, #e91e63 90%, #34495e 90%, #34495e 100%); }
#my-unique-circle-menu .menu-categories .category-title.gradient-2 { background-image: linear-gradient(90deg, #3366ff, #cc3399, #ff3366, #ff6600, #ffff33); }
#my-unique-circle-menu .menu-categories .category-title.gradient-3 { background-image: linear-gradient(90deg, #00ffcc, #33ccff, #cc33ff, #ff33cc, #ff0066); }
#my-unique-circle-menu .menu-categories .category-title.gradient-4 { background-image: linear-gradient(90deg, #66ff33, #33ffcc, #3366ff, #6633ff, #cc33ff); }
#my-unique-circle-menu .menu-categories .category-title.gradient-5 { background-image: linear-gradient(90deg, #ff3300, #ff9933, #ffcc66, #ffff99, #ccffcc); }
#my-unique-circle-menu .menu-categories .category-title.gradient-6 { background-image: linear-gradient(90deg, #33ff57, #00ccff, #cc33ff, #ff5733, #ffcc00); }
#my-unique-circle-menu .menu-categories .category-title.gradient-7 { background-image: linear-gradient(90deg, #cc3399, #ff3366, #ff6600, #ffff33, #3366ff); }
#my-unique-circle-menu .menu-categories .category-title.gradient-8 { background-image: linear-gradient(90deg, #33ccff, #cc33ff, #ff33cc, #ff0066, #00ffcc); }
#my-unique-circle-menu .menu-categories .category-title.gradient-9 { background-image: linear-gradient(90deg, #6633ff, #cc33ff, #66ff33, #33ffcc, #3366ff); }
#my-unique-circle-menu .menu-categories .category-title.gradient-10 { background-image: linear-gradient(90deg, #ffcc66, #ffff99, #ccffcc, #ff3300, #ff9933); }
#my-unique-circle-menu .menu-categories .category-title.gradient-11 { background-image: linear-gradient(90deg, #33ff57, #00ccff, #cc33ff, #ff5733, #ffcc00); }
#my-unique-circle-menu .menu-categories .category-title.gradient-12 { background-image: linear-gradient(90deg, #cc3399, #ff3366, #ff6600, #ffff33, #3366ff); }

/* Gradient Animation on Hover for category titles */
#my-unique-circle-menu .menu-categories .category-title:hover {
    background-position: right center;
}

/* Keyframes वैश्विक होते हैं, इन्हें आईडी से प्रीफिक्स करने की आवश्यकता नहीं */
@keyframes zoomIn {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* कैटेगरी आइकॉन स्टाइल */
#my-unique-circle-menu .menu-categories .category {
    width: 68px;
    height: 68px;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
    font-size: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#my-unique-circle-menu .menu-categories .category img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 50%;
}

#my-unique-circle-menu .menu-categories .category:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border-color: #4caf50;
}

/* लिंक बॉक्स */
#my-unique-circle-menu .menu-links {
    position: absolute;
    top: 80px;
    left: -180%; /* समायोजित */
    transform: translateX(-50%) scale(0); /* प्रारंभिक स्थिति */
    width: 340px;
    background-color: #200000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    max-height: 400px;
    overflow-y: auto;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease, visibility 0.4s ease;
    display: none;
    z-index: 1000;
}

#my-unique-circle-menu .menu-links.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1); /* सही ट्रांसफॉर्म */
    z-index: 1002;
}

/* लिंक्स टाइटल स्टाइल (आइकन के साथ) */
#my-unique-circle-menu .menu-links .links-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    animation: fadeInUp 1s ease-in-out;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    background-color: transparent;
    overflow: hidden;
}

/* लिंक्स टाइटल के लिए एनिमेटेड बॉर्डर */
#my-unique-circle-menu .menu-links .links-title::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background-size: 400% 400%;
    z-index: -1;
    border-radius: 10px;
    animation: Gradient 5s ease infinite;
}

/* लिंक्स टाइटल बॉर्डर के लिए ग्रेडिएंट एनिमेशन (JS द्वारा लागू) */
#my-unique-circle-menu .menu-links .links-title.gradient-1::before { background-image: linear-gradient(90deg, #ff5733, #ffcc00, #33ff57, #00ccff, #cc33ff, #ff5733, #ffcc00); }
#my-unique-circle-menu .menu-links .links-title.gradient-2::before { background-image: linear-gradient(90deg, #3366ff, #cc3399, #ff3366, #ff6600, #ffff33, #3366ff, #cc3399); }
#my-unique-circle-menu .menu-links .links-title.gradient-3::before { background-image: linear-gradient(90deg, #00ffcc, #33ccff, #cc33ff, #ff33cc, #ff0066, #00ffcc, #33ccff); }
#my-unique-circle-menu .menu-links .links-title.gradient-4::before { background-image: linear-gradient(90deg, #66ff33, #33ffcc, #3366ff, #6633ff, #cc33ff, #66ff33, #33ffcc); }
#my-unique-circle-menu .menu-links .links-title.gradient-5::before { background-image: linear-gradient(90deg, #ff3300, #ff9933, #ffcc66, #ffff99, #ccffcc, #ff3300, #ff9933); }
#my-unique-circle-menu .menu-links .links-title.gradient-6::before { background-image: linear-gradient(90deg, #33ff57, #00ccff, #cc33ff, #ff5733, #ffcc00, #33ff57, #00ccff); }
#my-unique-circle-menu .menu-links .links-title.gradient-7::before { background-image: linear-gradient(90deg, #cc3399, #ff3366, #ff6600, #ffff33, #3366ff, #cc3399, #ff3366); }
#my-unique-circle-menu .menu-links .links-title.gradient-8::before { background-image: linear-gradient(90deg, #33ccff, #cc33ff, #ff33cc, #ff0066, #00ffcc, #33ccff, #cc33ff); }
#my-unique-circle-menu .menu-links .links-title.gradient-9::before { background-image: linear-gradient(90deg, #6633ff, #cc33ff, #66ff33, #33ffcc, #3366ff, #6633ff, #cc33ff); }
#my-unique-circle-menu .menu-links .links-title.gradient-10::before { background-image: linear-gradient(90deg, #ffcc66, #ffff99, #ccffcc, #ff3300, #ff9933, #ffcc66, #ffff99); }
#my-unique-circle-menu .menu-links .links-title.gradient-11::before { background-image: linear-gradient(90deg, #33ff57, #00ccff, #cc33ff, #ff5733, #ffcc00, #33ff57, #00ccff); }
#my-unique-circle-menu .menu-links .links-title.gradient-12::before { background-image: linear-gradient(90deg, #cc3399, #ff3366, #ff6600, #ffff33, #3366ff, #cc3399, #ff3366); }

/* Keyframes वैश्विक होते हैं */
@keyframes Gradient {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}
@keyframes fadeInUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* लिंक स्टाइल */
#my-unique-circle-menu .links-content a.outer-cont {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    cursor: pointer;
    position: relative;
    color: #fff;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    text-decoration: none;
    overflow: hidden;
    border: none;
    box-shadow:
        inset 0px 0px 4px rgba(255, 255, 255, 0.6),
        inset 0px 20px 25px rgba(0, 0, 0, 0.7),
        0px 4px 8px rgba(0, 0, 0, 0.5);
}

/* होवर/एक्टिव इफेक्ट्स */
 #my-unique-circle-menu .links-content a.outer-cont::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    filter: blur(0);
    z-index: -1;
    box-shadow: none;
    background: conic-gradient(#ffffff33 80deg, #ffffff66, #ffffff88, #ffffff33 280deg);
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

#my-unique-circle-menu .links-content a.outer-cont:hover {
     transform: translateY(-2px);
     box-shadow:
        inset 0px 0px 5px rgba(255, 255, 255, 0.7),
        inset 0px 25px 30px rgba(0, 0, 0, 0.8),
        0px 6px 12px rgba(0, 0, 0, 0.6);
}

#my-unique-circle-menu .links-content a.outer-cont:hover::before {
    filter: blur(10px);
    opacity: 0.6;
}

#my-unique-circle-menu .links-content a.outer-cont:active {
    transform: translateY(1px);
    box-shadow:
        inset 0px 0px 6px rgba(255, 255, 255, 0.8),
        inset 0px 30px 35px rgba(0, 0, 0, 0.9);
}
#my-unique-circle-menu .links-content a.outer-cont:active::before {
    filter: blur(5px);
    opacity: 0.8;
}

#my-unique-circle-menu .links-content a.outer-cont img {
    width: 28px;
    height: 28px;
    margin-right: 12px;
    vertical-align: middle;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

#my-unique-circle-menu .links-content a.outer-cont span {
     position: relative;
     z-index: 1;
     flex-grow: 1;
 }

#my-unique-circle-menu .links-content .links {
    display: none;
}

/* मैनुअल कलर प्रति लिंक (बैकग्राउंड) */
#my-unique-circle-menu .links-content .class-1-5 > a:nth-child(1) { background: linear-gradient(90deg, #ffc107, #ff9800, #ff5722); }
#my-unique-circle-menu .links-content .class-1-5 > a:nth-child(2) { background: linear-gradient(90deg, #4caf50, #8bc34a, #cddc39); }

#my-unique-circle-menu .links-content .class-6-8 > a:nth-child(1) { background: linear-gradient(90deg, #e91e63, #9c27b0, #673ab7); }
#my-unique-circle-menu .links-content .class-6-8 > a:nth-child(2) { background: linear-gradient(90deg, #f44336, #e53935, #d32f2f); }
#my-unique-circle-menu .links-content .class-6-8 > a:nth-child(3) { background: linear-gradient(90deg, #03a9f4, #00bcd4, #009688); }
#my-unique-circle-menu .links-content .class-6-8 > a:nth-child(4) { background: linear-gradient(90deg, #9c27b0, #ba68c8, #e1bee7); }
#my-unique-circle-menu .links-content .class-6-8 > a:nth-child(5) { background: linear-gradient(90deg, #4caf50, #8bc34a, #cddc39); }
#my-unique-circle-menu .links-content .class-6-8 > a:nth-child(6) { background: linear-gradient(90deg, #ff9800, #ffc107, #ffeb3b); }
#my-unique-circle-menu .links-content .class-6-8 > a:nth-child(7) { background: linear-gradient(90deg, #8bc34a, #cddc39, #f0f4c3); }
#my-unique-circle-menu .links-content .class-6-8 > a:nth-child(8) { background: linear-gradient(90deg, #e91e63, #9c27b0, #673ab7); }

#my-unique-circle-menu .links-content .class-9-10 > a:nth-child(1) { background: linear-gradient(90deg, #ccffcc, #8bc34a, #4caf50); }
#my-unique-circle-menu .links-content .class-9-10 > a:nth-child(2) { background: linear-gradient(90deg, #ffffcc, #ffeb3b, #ffc107); }
#my-unique-circle-menu .links-content .class-9-10 > a:nth-child(3) { background: linear-gradient(90deg, #ffcccc, #e53935, #f44336); }
#my-unique-circle-menu .links-content .class-9-10 > a:nth-child(4) { background: linear-gradient(90deg, #ccffff, #009688, #00bcd4); }
#my-unique-circle-menu .links-content .class-9-10 > a:nth-child(5) { background: linear-gradient(90deg, #ffccff, #ba68c8, #9c27b0); }
#my-unique-circle-menu .links-content .class-9-10 > a:nth-child(6) { background: linear-gradient(90deg, #cc9999, #a1887f, #795548); }
#my-unique-circle-menu .links-content .class-9-10 > a:nth-child(7) { background: linear-gradient(90deg, #ffc107, #ff9800, #ff5722); }
#my-unique-circle-menu .links-content .class-9-10 > a:nth-child(8) { background: linear-gradient(90deg, #b0c4de, #90a4ae, #607d8b); }

#my-unique-circle-menu .links-content .class-11-12 > a:nth-child(1) { background: linear-gradient(90deg, #e91e63, #9c27b0, #673ab7); }
#my-unique-circle-menu .links-content .class-11-12 > a:nth-child(2) { background: linear-gradient(90deg, #00bcd4, #03a9f4, #009688); }

#my-unique-circle-menu .links-content .competitive-exam > a:nth-child(1) { background: linear-gradient(90deg, #4caf50, #8bc34a, #cddc39); }
#my-unique-circle-menu .links-content .competitive-exam > a:nth-child(2) { background: linear-gradient(90deg, #708090, #536d7a, #37474f); }
#my-unique-circle-menu .links-content .competitive-exam > a:nth-child(3) { background: linear-gradient(90deg, #f1c40f, #f39c12, #e67e22); }

#my-unique-circle-menu .links-content .news-channel > a:nth-child(1) { background: linear-gradient(90deg, #ff9800, #ffc107, #ffeb3b); }
#my-unique-circle-menu .links-content .news-channel > a:nth-child(2) { background: linear-gradient(90deg, #3498db, #2980b9, #1f618d); }

#my-unique-circle-menu .links-content .yoga-ayurveda > a:nth-child(1) { background: linear-gradient(90deg, #00bcd4, #03a9f4, #009688); }
#my-unique-circle-menu .links-content .yoga-ayurveda > a:nth-child(2) { background: linear-gradient(90deg, #8bc34a, #cddc39, #f0f4c3); }
#my-unique-circle-menu .links-content .yoga-ayurveda > a:nth-child(3) { background: linear-gradient(90deg, #708090, #536d7a, #37474f); }

#my-unique-circle-menu .links-content .marriage-links > a:nth-child(1) { background: linear-gradient(90deg, #f44336, #e53935, #d32f2f); }
#my-unique-circle-menu .links-content .marriage-links > a:nth-child(2) { background: linear-gradient(90deg, #795548, #a1887f, #d7ccc8); }

#my-unique-circle-menu .links-content .editorial-links > a:nth-child(1) { background: linear-gradient(90deg, #9c27b0, #ba68c8, #e1bee7); }
#my-unique-circle-menu .links-content .editorial-links > a:nth-child(2) { background: linear-gradient(90deg, #607d8b, #90a4ae, #cfd8dc); }
#my-unique-circle-menu .links-content .editorial-links > a:nth-child(3) { background: linear-gradient(90deg, #2c3e50, #34495e, #2c3e50); }

#my-unique-circle-menu .links-content .government-links > a:nth-child(1) { background: linear-gradient(90deg, #b3e5fc, #81d4fa, #4fc3f7); }

#my-unique-circle-menu .links-content .astrology-links > a:nth-child(1) { background: linear-gradient(90deg, #4caf50, #8bc34a, #cddc39); }
#my-unique-circle-menu .links-content .astrology-links > a:nth-child(2) { background: linear-gradient(90deg, #f44336, #e53935, #d32f2f); }
#my-unique-circle-menu .links-content .astrology-links > a:nth-child(3) { background: linear-gradient(90deg, #00bcd4, #03a9f4, #009688); }

#my-unique-circle-menu .links-content .vaidik-links > a:nth-child(1) { background: linear-gradient(90deg, #ffeb3b, #ffc107, #ff9800); }
#my-unique-circle-menu .links-content .vaidik-links > a:nth-child(2) { background: linear-gradient(90deg, #fff9c4, #fff59d, #fff176); }

/* मेन्यू लिंक्स के लिए कस्टम स्क्रॉलबार */
#my-unique-circle-menu .menu-links::-webkit-scrollbar { width: 8px; }
#my-unique-circle-menu .menu-links::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
#my-unique-circle-menu .menu-links::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.4); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
#my-unique-circle-menu .menu-links::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.6); }
/* --- End Unique Circle Menu CSS --- */