.calligraphy-topics-wheel-container{--primary-color:#26ff00!important;--secondary-color:#26ff00!important;--accent-color:#00f521!important;--dark-color:#30502c!important;--light-color:#ecf0f1!important;--text-color:#333!important;--card-bg-color:#fff!important;--card-gradient-start:#26ff00!important;--card-gradient-end:#1fd100!important;--card-gradient-opacity:.05!important;--card-hover-gradient-opacity:.2!important;--card-pattern-opacity:.05!important;--card-hover-pattern-opacity:.3!important;--card-gradient:linear-gradient(135deg,var(--card-gradient-start),var(--card-gradient-end))!important;--circle-size:500px;--item-size:70px;--inner-circle-size:65%;--popup-width:160px;--popup-height:100px;--english-font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;--arabic-font-family:"Amiri",serif;--english-font-size:12px;--arabic-font-size:16px;--heading-font-weight:bold;--animation-type:fade;--animation-duration:300ms;--animation-delay:50ms;--hover-scale:1.05;--shadow:0 10px 20px rgba(0,0,0,.1);--gradient:linear-gradient(135deg,var(--primary-color),var(--secondary-color))!important}.container{max-width:1200px;margin:0 auto;padding:2rem;position:relative}.section-title{text-align:center;margin-bottom:3rem;font-family:"Amiri",serif;font-size:2.5rem;color:var(--dark-color);position:relative;text-shadow:1px 1px 3px rgba(0,0,0,.1)}.section-title::after{content:"";display:block;width:120px;height:4px;background:var(--gradient);margin:10px auto;border-radius:2px;box-shadow:0 2px 5px rgba(0,0,0,.1)}.two-column-layout{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin:2rem 0;gap:2rem}.wheel-column{flex:1;display:flex;justify-content:center;align-items:center;margin-top:40px}.details-column{flex:1;display:flex;justify-content:center;align-items:center}.details-box{width:100%;max-width:500px;background:rgba(255,255,255,.95);border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.1),inset 0 0 20px rgba(255,255,255,.7);padding:2rem;position:relative;overflow:hidden;min-height:400px;transition:all .5s ease}.details-box::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(240,249,255,.8),rgba(255,255,255,.95));z-index:-1}.details-box::after{content:"";position:absolute;width:120%;height:120%;top:-10%;left:-10%;background:conic-gradient(from 0deg,rgba(58,213,123,.05),rgba(0,255,210,.05),rgba(58,213,123,.05),rgba(0,255,210,.05),rgba(58,213,123,.05));border-radius:50%;z-index:-1;animation:rotateGradient 20s linear infinite}.details-content{position:relative;z-index:1;text-align:center}.details-content h2{font-family:"Amiri",serif;font-size:2rem;color:var(--primary-color)!important;margin-bottom:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.details-content p{font-size:1.1rem;color:var(--text-color);margin-bottom:1.5rem}.calligraphy-container{position:relative;display:flex;justify-content:center;align-items:center;margin:0 auto;perspective:1000px}.inner-circle{position:absolute;width:var(--inner-circle-size);height:var(--inner-circle-size);border-radius:50%;background:rgba(255,255,255,.95);box-shadow:inset 0 0 30px rgba(0,0,0,.03),0 0 20px rgba(255,255,255,.7);z-index:1;backdrop-filter:blur(5px);transition:all .5s ease;overflow:hidden;background-image:linear-gradient(to bottom,rgba(240,249,255,.8),rgba(255,255,255,.95));display:flex;justify-content:center;align-items:center}.inner-circle::before{content:"";position:absolute;top:-10%;left:-10%;right:-10%;bottom:-10%;background:radial-gradient(circle,rgba(255,255,255,.8) 0%,rgba(255,255,255,.2) 70%);opacity:.7;z-index:-1}.inner-circle::after{content:"";position:absolute;width:120%;height:120%;top:-10%;left:-10%;background:conic-gradient(from 0deg,rgba(58,213,123,.05),rgba(0,255,210,.05),rgba(58,213,123,.05),rgba(0,255,210,.05),rgba(58,213,123,.05));border-radius:50%;z-index:-1;animation:rotateGradient 20s linear infinite}.topic-item{position:absolute;width:var(--item-size);height:var(--item-size);transform-origin:center;z-index:2;transition:transform .5s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;filter:drop-shadow(0 5px 10px rgba(0,0,0,.1))}.topic-item{transform:rotate(var(--rotation)) translate(calc(var(--circle-size) / 2 - var(--item-size) / 2))}.topic-content{width:100%;height:100%;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;background:rgba(255,255,255,.95)!important;color:var(--dark-color)!important;border-radius:50%;box-shadow:0 5px 15px rgba(0,0,0,.1),inset 0 0 10px rgba(255,255,255,.5);padding:6px 3px!important;transition:all .4s cubic-bezier(.175,.885,.32,1.275);transition:transform .4s cubic-bezier(.175,.885,.32,1.275),opacity .5s ease;position:relative;overflow:hidden;transform-style:preserve-3d;backface-visibility:hidden;transform:rotate(calc(-1 * var(--rotation)))!important;will-change:transform;opacity:1;gap:0px!important;box-sizing:border-box!important}.topic-item .topic-content::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.8);pointer-events:none;z-index:2}.english-text{font-family:var(--english-font-family);font-size:10px!important;color:var(--dark-color)!important;text-shadow:none!important;text-align:center!important;margin:0 auto!important;margin-top:-2px!important;padding:0!important;transition:all .3s ease;position:relative;width:100%!important;letter-spacing:normal;line-height:1!important;font-weight:600!important;display:block!important;white-space:nowrap!important;overflow:visible!important;transform:translateY(0)!important}.icon{font-size:1.8rem;color:var(--primary-color);margin-bottom:.5rem;transition:all .3s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.connecting-line{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}.topic-popup{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}.topic-item.active .topic-content{background:linear-gradient(135deg,#26ff00,#1fd100)!important;transform:rotate(calc(-1 * var(--rotation))) scale(1.15);box-shadow:0 15px 30px rgba(0,0,0,.15),inset 0 0 20px rgba(255,255,255,.5);animation:pulse 2s infinite;border:none!important}.topic-item.active .topic-content::before{opacity:0}.topic-item.active .topic-content::after{opacity:.4}.topic-item.active .arabic-text{color:#000!important;text-shadow:0 1px 2px rgba(255,255,255,.7);transform:translateY(0)!important;font-weight:700}.topic-item.active .english-text{color:#000!important;text-shadow:0 1px 2px rgba(255,255,255,.7);transform:translateY(0)!important;font-weight:700}.topic-item.active .arabic-text::first-letter{color:var(--primary-color)!important}.topic-item[data-topic=Prayer] .topic-content{border:2px solid var(--primary-color)!important}.topic-item[data-topic=Prayer].active .topic-content{background:var(--gradient)!important}.topic-item[data-topic=Prayer] .icon i{color:var(--primary-color)!important}.topics-circle.rotating{transition:transform 1s cubic-bezier(.215,.61,.355,1)}.topic-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:60%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:3;text-align:center;border-radius:50%;overflow:hidden;perspective:1000px}.display-content{padding:1rem;max-width:90%;transform-style:preserve-3d;transition:all .4s ease;display:flex;flex-direction:column;align-items:center;justify-content:center}.display-content h2{font-family:"Amiri",serif;font-size:1.8rem;color:var(--dark-color);margin-bottom:.5rem;transform:translateZ(20px);text-shadow:0 1px 3px rgba(0,0,0,.1);display:none}.display-content p{color:var(--text-color);margin-bottom:1rem;transform:translateZ(15px);font-size:.9rem}.calligraphy-decoration{width:120px;margin:0 auto;transform:translateZ(5px)}.path-navigation{position:relative;margin-top:4rem;height:120px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.05))}.path-marker{fill:#12f330;filter:drop-shadow(0 0 8px rgba(243,156,18,.6));transition:cx .8s cubic-bezier(.175,.885,.32,1.275),cy .8s cubic-bezier(.175,.885,.32,1.275)}.path-labels{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between}.path-labels span{position:absolute;transform:translateX(-50%);font-size:.9rem;color:var(--dark-color);cursor:pointer;padding:5px 10px;border-radius:15px;transition:all .3s ease;background-color:rgba(255,255,255,.9);box-shadow:0 2px 5px rgba(0,0,0,.05);backdrop-filter:blur(2px)}.path-labels span:hover{background-color:rgba(255,255,255,.9);color:var(--primary-color);transform:translateX(-50%) translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1)}.path-labels span[data-position="0"]{left:0;top:70px}.path-labels span[data-position="0.125"]{left:12.5%;top:40px}.path-labels span[data-position="0.25"]{left:25%;top:20px}.path-labels span[data-position="0.375"]{left:37.5%;top:30px}.path-labels span[data-position="0.5"]{left:50%;top:50px}.path-labels span[data-position="0.625"]{left:62.5%;top:30px}.path-labels span[data-position="0.75"]{left:75%;top:20px}.path-labels span[data-position="0.875"]{left:87.5%;top:40px}.quote{position:relative;padding:1.5rem 2rem;margin:1.5rem 0;background:rgba(255,255,255,.7);border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.05);text-align:left}.quote i{position:absolute;font-size:1.5rem;color:var(--primary-color)!important;opacity:.3}.quote i.fa-quote-left{top:1rem;left:1rem}.quote i.fa-quote-right{bottom:1rem;right:1rem}.quote p{font-family:"Amiri",serif;font-style:italic;font-size:1.1rem;line-height:1.6;margin:0;color:var(--dark-color)}.explore-btn{display:inline-block;padding:.8rem 1.5rem;background:var(--gradient);color:white;border:none;border-radius:30px;font-family:"Amiri",serif;font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,.1);transition:all .3s ease;text-decoration:none;margin-top:1.5rem}.explore-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.15)}.explore-btn:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(0,0,0,.1)}@media (max-width:1100px){.calligraphy-topics-wheel-container{--circle-size:400px!important;--item-size:60px!important}.calligraphy-topics-wheel-container .two-column-layout{flex-direction:column!important;align-items:center!important}.calligraphy-topics-wheel-container .wheel-column,.calligraphy-topics-wheel-container .details-column{flex:none!important;width:100%!important}.calligraphy-topics-wheel-container .details-box{margin-top:2rem!important;max-width:100%!important}.calligraphy-topics-wheel-container .arabic-text{font-size:13px!important}.calligraphy-topics-wheel-container .english-text{font-size:10px!important}}@media (max-width:768px){.calligraphy-topics-wheel-container{--circle-size:300px!important;--item-size:47px!important}.calligraphy-topics-wheel-container .section-title{font-size:1.7rem!important}.calligraphy-topics-wheel-container .details-content h2{font-size:1.5rem!important}.calligraphy-topics-wheel-container .two-column-layout{display:flex!important;flex-direction:column!important;align-items:center!important;gap:2rem!important}.calligraphy-topics-wheel-container .wheel-column{width:100%!important;display:flex!important;justify-content:center!important;float:none!important;clear:both!important;margin-bottom:1.5rem!important}.calligraphy-topics-wheel-container .details-column{width:100%!important;float:none!important;clear:both!important;margin-top:1.5rem!important}.calligraphy-topics-wheel-container .details-box{margin-top:0!important;min-height:300px!important;width:90%!important;margin-left:auto!important;margin-right:auto!important}}@media (max-width:576px){.calligraphy-topics-wheel-container{--circle-size:200px!important;--item-size:32px!important}.calligraphy-topics-wheel-container .container{padding:1rem!important}.calligraphy-topics-wheel-container .two-column-layout{gap:1.5rem!important}.calligraphy-topics-wheel-container .wheel-column{margin-bottom:1rem!important}.calligraphy-topics-wheel-container .details-column{margin-top:1rem!important}.calligraphy-topics-wheel-container .details-box{padding:1.5rem!important;min-height:350px!important;margin-top:0!important;width:100%!important}.calligraphy-topics-wheel-container .section-title{font-size:1.8rem!important;margin-bottom:1.5rem!important}.calligraphy-topics-wheel-container .details-content h2{font-size:1.6rem!important}}@media (max-width:480px){.calligraphy-topics-wheel-container{--circle-size:200px!important;--item-size:33px!important}.calligraphy-topics-wheel-container .arabic-text{font-size:10px!important}.calligraphy-topics-wheel-container .english-text{font-size:8px!important}.calligraphy-topics-wheel-container .topic-content{padding:2px!important}.calligraphy-topics-wheel-container .wheel-column{display:flex!important;justify-content:center!important;width:100%!important;margin-bottom:1rem!important}.calligraphy-topics-wheel-container .details-column{width:95%!important;margin:1rem auto 0!important;margin-top:1rem!important}.calligraphy-topics-wheel-container .two-column-layout{gap:1rem!important}.calligraphy-topics-wheel-container .details-box{padding:1.2rem!important;min-height:300px!important;width:95%!important}}@media (max-width:380px){.calligraphy-topics-wheel-container{--circle-size:180px!important;--item-size:30px!important}.calligraphy-topics-wheel-container .arabic-text{font-size:8px!important}.calligraphy-topics-wheel-container .english-text{font-size:7px!important}}.topic-item:hover .topic-content,.topic-item.active .topic-content,.topic-item .topic-content{transform:rotate(calc(-1 * var(--rotation)))}.topics-circle.rotating .topic-content,[class*=mousemove] .topic-content,[class*=mouseleave] .topic-content,[class*=wheel] .topic-content{transform:rotate(calc(-1 * var(--rotation)))}@media (min-width:1400px){.english-text{letter-spacing:normal;margin-top:0;line-height:1;font-weight:600}.topic-content{gap:0;padding:5px}.two-column-layout{max-width:1300px;margin:0 auto}}.topic-item[data-topic=Prayer] .arabic-text::first-letter{color:var(--primary-color)!important}.topic-item[data-topic=Prayer].active .arabic-text::first-letter{color:var(--primary-color)!important}.inner-circle .explore-btn{font-family:"Amiri",serif;font-size:1.2rem;padding:1.2rem 2.4rem;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:white;border:none;border:2px solid rgba(255,255,255,.3);box-shadow:0 8px 25px rgba(0,0,0,.2),inset 0 1px 3px rgba(255,255,255,.5);transform:translateZ(0);position:relative;border-radius:50px;letter-spacing:.5px;font-weight:700;transition:all .3s cubic-bezier(.175,.885,.32,1.275);text-shadow:0 1px 2px rgba(0,0,0,.2);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem}.arabic-small{font-family:"Amiri",serif;font-size:1.4rem;line-height:0;font-weight:700;margin-bottom:.1rem}.inner-circle .explore-btn i{font-size:1.2rem;margin-top:.4rem;animation:pulse-light 2s infinite}.inner-circle .explore-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 30px rgba(0,0,0,.3),inset 0 1px 5px rgba(255,255,255,.7)}.inner-circle .explore-btn:active{transform:translateY(0) scale(1);box-shadow:0 5px 15px rgba(0,0,0,.2),inset 0 1px 2px rgba(255,255,255,.4)}@media (max-width:576px){.inner-circle .explore-btn{padding:.8rem 1.6rem;font-size:1rem}.arabic-small{font-size:1.2rem}.inner-circle .explore-btn i{font-size:1rem}}@media (max-width:480px){.inner-circle .explore-btn{padding:.7rem 1.4rem;font-size:.9rem}.arabic-small{font-size:1.1rem}}@media (max-width:380px){.inner-circle .explore-btn{padding:.6rem 1.2rem;font-size:.8rem}.arabic-small{font-size:1rem}.inner-circle .explore-btn i{font-size:.9rem}}.topic-item:hover .topic-content,.topic-item.active .topic-content,.topic-item .topic-content{transform:rotate(calc(-1 * var(--rotation)))}.topics-circle.rotating .topic-content,[class*=mousemove] .topic-content,[class*=mouseleave] .topic-content,[class*=wheel] .topic-content{transform:rotate(calc(-1 * var(--rotation)))}.calligraphy-topics-wheel-container .topic-item.active .topic-content{background:linear-gradient(135deg,#26ff00,#1fd100)!important;transform:rotate(calc(-1 * var(--rotation))) scale(1.15);box-shadow:0 15px 30px rgba(0,0,0,.15),inset 0 0 20px rgba(255,255,255,.5);animation:pulse 2s infinite;border:none!important}.calligraphy-topics-wheel-container .topic-item{transition:transform .5s cubic-bezier(.175,.885,.32,1.275)}.calligraphy-topics-wheel-container .topics-circle.rotating{transition:transform 1s cubic-bezier(.215,.61,.355,1)}@media (max-width:1100px){.calligraphy-topics-wheel-container{--circle-size:400px!important;--item-size:60px!important}}.calligraphy-topics-wheel-container .topic-item:hover{transform:scale(var(--hover-scale)) translateX(calc(var(--item-size) * .1))}.calligraphy-topics-wheel-container .inner-circle .explore-btn:hover{transform:translateY(-3px) scale(1.05)}.calligraphy-topics-wheel-container .inner-circle .explore-btn:active{transform:translateY(0) scale(1)}.topic-content{transform:rotate(calc(-1 * var(--rotation)))}.prayer-first-letter-green::first-letter{color:var(--primary-color)!important}.calligraphy-topics-wheel-container .details-content h2{color:var(--primary-color)!important}.calligraphy-topics-wheel-container .section-title::after{background:var(--gradient)!important}.calligraphy-topics-wheel-container .topics-circle{box-shadow:var(--shadow),inset 0 0 30px rgba(255,255,255,.8),0 0 30px rgba(71,213,58,.2)!important}.calligraphy-topics-wheel-container .arabic-text::first-letter{color:var(--primary-color)!important}.calligraphy-topics-wheel-container .icon{color:var(--primary-color)!important}.calligraphy-topics-wheel-container .topic-item.active .topic-content{background:linear-gradient(135deg,#26ff00,#1fd100)!important}.calligraphy-topics-wheel-container .quote i{color:var(--primary-color)!important}.calligraphy-topics-wheel-container .hadith-count{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color))!important}.calligraphy-topics-wheel-container .explore-btn{background:var(--gradient)!important}.calligraphy-topics-wheel-container .inner-circle .explore-btn{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color))!important}.calligraphy-topics-wheel-container .topic-item[data-topic=Prayer] .topic-content{border:2px solid var(--primary-color)!important}.calligraphy-topics-wheel-container .topic-item[data-topic=Prayer].active .topic-content{background:var(--gradient)!important}.calligraphy-topics-wheel-container .topic-item[data-topic=Prayer] .icon i{color:var(--primary-color)!important}