:root{--primary-color:#E65100;--primary-gradient:linear-gradient(135deg,#FF6F00 0%,#E65100 100%);--secondary-color:#FFD700;--background-color:#FFF8E1;--surface-color:rgba(255,255,255,.9);--glass-bg:rgba(255,255,255,.7);--glass-border:rgba(255,255,255,.5);--text-color:#3E2723;--light-text:#795548;--white:#FFFFFF;--shadow-sm:0 4px 6px rgba(230,81,0,.1);--shadow-md:0 8px 15px rgba(230,81,0,.15);--shadow-lg:0 20px 25px rgba(230,81,0,.2);--transition:all .4s cubic-bezier(.165,.84,.44,1)}*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}html{height:100%;overflow-x:hidden}body{font-family:'Poppins',sans-serif;background-color:var(--background-color);width:100%;animation:scrollBackground 60s linear infinite;color:var(--text-color);line-height:1.7;overflow-x:hidden;position:relative;min-height:100vh;display:flex;flex-direction:column}main{flex:1 0 auto;width:100%}h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',serif;color:var(--primary-color)}header{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);padding:1rem 0;position:sticky;top:0;z-index:1000;transition:var(--transition)}@media(min-width:1600px){.container{max-width:1600px}body{font-size:18px}h1{font-size:5rem}h2{font-size:3.5rem}.card-title{font-size:1.8rem}.ringtone-title{font-size:1.5rem}.grid,.ringtone-list{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:50px}.cta-btn,.download-btn{padding:20px 50px;font-size:1.2rem}}@media(min-width:1024px) and (max-width:1599px){.container{max-width:1100px}}@media(max-width:1023px){.hero h1{font-size:3rem}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.ringtone-list{grid-template-columns:1fr}}.menu-toggle{display:none}@media(max-width:1200px){.nav-wrapper{justify-content:flex-start;gap:15px;padding:0 15px;position:relative}.logo{width:auto;margin-right:0}.menu-toggle{display:block;font-size:1.8rem;cursor:pointer;color:var(--text-color);padding:5px;margin-right:0;order:-1}.nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);box-shadow:0 10px 20px rgba(0,0,0,.1);padding:20px;gap:15px;z-index:9999;border-radius:0 0 20px 20px;animation:slideDown .3s ease-out;max-height:80vh;overflow-y:auto}.nav-links.active{display:flex}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.nav-links a{display:block;width:100%;text-align:center;padding:12px;font-size:1.1rem;border-radius:10px;margin:0;background:transparent;border:none;color:#333!important;font-weight:600}.nav-links a:hover{background:rgba(230,81,0,.05);color:var(--primary-color)}.hero{padding:50px 15px 70px;clip-path:polygon(0 0,100% 0,100% 92%,50% 100%,0 92%);margin-bottom:30px}.hero h1{font-size:2.2rem;line-height:1.2;margin-bottom:15px}.hero p{font-size:.95rem;max-width:100%;padding:0 10px;margin-bottom:30px}.section-title{font-size:1.8rem}.grid{grid-template-columns:repeat(2,1fr);gap:12px}.card{height:180px}.card-title{font-size:1.1rem}.ringtone-list{grid-template-columns:repeat(2,1fr);gap:12px}.ringtone-item{flex-direction:column;text-align:center;padding:12px;gap:8px;border-radius:12px}.play-btn{width:45px;height:45px;font-size:1rem;margin:0 auto}.ringtone-info{margin:0;width:100%}.ringtone-title{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.ringtone-meta{font-size:.7rem;justify-content:center}.ringtone-actions{margin:0;width:100%;justify-content:center;gap:8px}.action-btn{width:32px;height:32px;font-size:.8rem}.download-btn{padding:6px 12px;font-size:.7rem;line-height:1;min-width:auto}.popular-grid{display:grid;grid-template-columns:repeat(2,1fr)!important;gap:12px}.pop-card{flex-direction:column;padding:12px;text-align:center;margin-bottom:0}.pop-card-top{flex-direction:column;align-items:center;gap:10px}.pop-tags{justify-content:center;margin-top:5px}.pop-actions{flex-direction:column;gap:10px;width:100%;margin-top:10px}.pop-dl-btn{width:100%;text-align:center}.action-btn,.play-btn,.download-btn{min-height:48px;min-width:48px}}header.scrolled{background:rgba(255,255,255,.95);box-shadow:var(--shadow-sm);padding:.8rem 0}.container{max-width:1450px;margin:0 auto;padding:0 25px}.nav-wrapper{display:flex;justify-content:flex-start;align-items:center}.logo{font-size:1.8rem;font-weight:700;text-decoration:none;background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:12px;white-space:nowrap;margin-right:40px}.logo i{font-size:1.5rem;background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@media(min-width:1201px){.nav-links{display:flex;align-items:center;gap:5px}.nav-links a{color:var(--text-color);text-decoration:none;margin-left:0;font-weight:500;position:relative;padding:6px 8px;transition:var(--transition);white-space:nowrap;border-radius:8px;font-size:.95rem}}.nav-links a:hover{background:rgba(230,81,0,.05)}@media(min-width:1201px){.nav-links a::after{content:'';position:absolute;width:0;height:2px;bottom:0;left:0;background:var(--primary-gradient);transition:var(--transition)}.nav-links a:hover::after,.nav-links a.active::after{width:100%}}.badge{background:#ff4081;color:white;font-size:.75rem;padding:2px 6px;border-radius:12px;margin-left:5px;font-weight:600;vertical-align:middle;display:inline-block;min-width:20px;text-align:center;line-height:1.2;box-shadow:0 2px 5px rgba(233,30,99,.3)}.sub-nav{display:flex;justify-content:center;gap:15px;margin-top:15px;padding-top:15px;border-top:1px solid rgba(0,0,0,.05);flex-wrap:wrap}.sub-nav-link{font-size:.95rem;font-weight:500;color:var(--light-text);text-decoration:none;padding:5px 12px;border-radius:20px;transition:var(--transition);background:rgba(255,255,255,.5);border:1px solid transparent}.sub-nav-link:hover{background:var(--primary-gradient);color:var(--white);transform:translateY(-2px);box-shadow:0 2px 8px rgba(230,81,0,.2)}.hero{position:relative;background:var(--primary-gradient);color:var(--white);text-align:center;padding:60px 20px 120px;margin-bottom:60px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 85%,50% 100%,0 85%)}.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('https://www.transparenttextures.com/patterns/mandala-pattern.png');opacity:.1;animation:pulseBackground 10s infinite alternate}.hero-content{position:relative;z-index:10;animation:fadeInUp 1s ease-out}.hero h1{font-size:4rem;margin-bottom:20px;color:var(--white);text-shadow:0 4px 10px rgba(0,0,0,.2)}.hero p{font-size:1.3rem;max-width:700px;margin:0 auto 40px;opacity:.95;font-weight:300}.cta-btn{display:inline-block;padding:15px 40px;background:var(--white);color:var(--primary-color);border-radius:50px;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:1px;box-shadow:0 10px 20px rgba(0,0,0,.2);transition:var(--transition)}.cta-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 15px 30px rgba(0,0,0,.3);color:#BF360C}.particles span{position:absolute;bottom:-50px;background:transparent;background-image:url('../img/om.png');background-size:contain;background-repeat:no-repeat;opacity:.8;mix-blend-mode:screen;animation:rise 15s infinite ease-in;z-index:1}.particles span:nth-child(1){width:40px;height:40px;left:10%;animation-duration:8s}.particles span:nth-child(2){width:20px;height:20px;left:20%;animation-duration:12s;animation-delay:2s}.particles span:nth-child(3){width:50px;height:50px;left:35%;animation-duration:10s;animation-delay:5s}.particles span:nth-child(4){width:80px;height:80px;left:50%;animation-duration:15s;animation-delay:0s}.particles span:nth-child(5){width:35px;height:35px;left:65%;animation-duration:6s;animation-delay:1s}.particles span:nth-child(6){width:25px;height:25px;left:80%;animation-duration:9s;animation-delay:3s}.section-title{text-align:center;margin-bottom:60px;font-size:2.5rem;position:relative;padding-bottom:20px}.section-title::after{content:'ॐ';font-family:Arial,sans-serif;position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);font-size:2rem;color:var(--secondary-color);background:transparent;padding:0 10px;text-shadow:0 2px 4px rgba(0,0,0,.1)}.section-title::before{content:'';position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:200px;height:2px;background:linear-gradient(90deg,transparent 0%,var(--secondary-color) 15%,var(--secondary-color) 40%,transparent 40%,transparent 60%,var(--secondary-color) 60%,var(--secondary-color) 85%,transparent 100%)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:40px;margin-bottom:80px}.bhakti-card{background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:20px;padding:0;text-align:center;text-decoration:none;color:var(--text-color);transition:var(--transition);position:relative;overflow:hidden;box-shadow:var(--shadow-sm);z-index:1;height:300px;display:flex;flex-direction:column;justify-content:flex-end}.card-bg-image{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:top center;transition:transform .6s;z-index:1}.bhakti-card::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0) 20%,rgba(0,0,0,.8) 100%);z-index:2}.bhakti-card:hover .card-bg-image{transform:scale(1.1)}.card-content-wrapper{padding:20px;color:var(--white);transform:translateY(10px);transition:var(--transition);z-index:10;position:relative}.bhakti-card:hover .card-content-wrapper{transform:translateY(0)}.card-icon{font-size:3.5rem;margin-bottom:10px;background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:var(--transition)}.card-title{font-size:1.4rem;margin-bottom:5px;font-weight:700;color:inherit;text-shadow:0 2px 4px rgba(0,0,0,.5)}.card-subtitle{font-size:.95rem;color:rgba(255,255,255,.8)}.reveal{opacity:0;transform:translateY(30px);transition:all .8s ease-out}.reveal.active{opacity:1;transform:translateY(0)}.ringtone-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:25px;margin-bottom:40px}.ringtone-item{background:var(--white);border-radius:16px;padding:20px 25px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:20px;transition:var(--transition);border-left:5px solid transparent;position:relative;overflow:hidden;z-index:1}.ringtone-item::before{content:'';position:absolute;bottom:-20px;right:-20px;width:100px;height:100px;background-image:url('../img/om.png');background-size:contain;background-repeat:no-repeat;opacity:.12;mix-blend-mode:screen;transform:rotate(-15deg);transition:all .6s ease;z-index:-1;pointer-events:none}.ringtone-item:hover::before{opacity:.3;transform:rotate(0deg) scale(1.2)}.ringtone-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-left-color:var(--primary-color)}.play-btn{width:60px;height:60px;border-radius:50%;background:var(--primary-gradient);color:var(--white);border:none;cursor:pointer;font-size:1.4rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(230,81,0,.3);transition:var(--transition);position:relative;overflow:hidden}.play-btn::after{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);transition:transform .3s}.play-btn:hover{transform:scale(1.1);box-shadow:0 8px 20px rgba(230,81,0,.4)}.play-btn:active::after{transform:scale(2);opacity:0}.ringtone-title{font-size:1.2rem;font-weight:600;color:var(--text-color);display:block;margin-bottom:5px}.bhakti-download-btn{padding:12px 25px;background:transparent;color:var(--primary-color);border:2px solid var(--primary-color);border-radius:50px;font-weight:600;text-transform:uppercase;font-size:.9rem;letter-spacing:.5px;transition:var(--transition)}.bhakti-download-btn:hover{background:var(--primary-gradient);border-color:transparent;color:var(--white);box-shadow:0 5px 15px rgba(230,81,0,.3)}.ringtone-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.action-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:transparent;color:var(--light-text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:var(--transition)}.action-btn:hover{background:rgba(230,81,0,.1);color:var(--primary-color);border-color:var(--primary-color);transform:translateY(-2px)}.pulse-anim{animation:heartPulse .3s ease-in-out}@keyframes heartPulse{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.popular-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px;margin-bottom:80px}.pop-card{background:var(--glass-bg);backdrop-filter:blur(8px);border:1px solid var(--glass-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-sm);transition:var(--transition);position:relative}.pop-card:hover{background:rgba(255,255,255,.95);transform:translateY(-5px);box-shadow:var(--shadow-md)}.pop-card-top{display:flex;align-items:flex-start;gap:18px}.pop-play-btn{width:56px;height:56px;min-width:56px;border-radius:50%;background:var(--primary-gradient);color:var(--white);border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:var(--transition);font-size:1.4rem;box-shadow:0 4px 10px rgba(230,81,0,.3);position:relative;z-index:1}.pop-play-btn::after{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border-radius:50%;border:2px solid var(--primary-color);opacity:.6;z-index:-1;animation:pulse-ring 2s infinite}.pop-play-btn:hover{transform:scale(1.1);box-shadow:0 6px 15px rgba(230,81,0,.5)}@keyframes pulse-ring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.4);opacity:0}}.pop-info{flex:1}.pop-title{display:block;font-weight:700;font-size:1.05rem;color:var(--text-color);margin-bottom:6px;line-height:1.4}.pop-meta{font-size:.8rem;color:var(--light-text);display:flex;gap:12px;flex-wrap:wrap}.pop-tags{display:flex;gap:8px;flex-wrap:wrap}.mini-tag{border:1px solid var(--primary-color);border-radius:20px;padding:4px 12px;font-size:.75rem;color:var(--primary-color);text-decoration:none;background:rgba(255,255,255,.5);transition:var(--transition)}.mini-tag:hover{background:var(--primary-gradient);color:var(--white);border-color:transparent;transform:translateY(-2px)}.pop-actions{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px}.icon-actions{display:flex;gap:15px}.icon-btn{background:none;border:none;font-size:1.25rem;color:var(--text-color);cursor:pointer;transition:var(--transition)}.icon-btn:hover{color:var(--primary-color);transform:scale(1.15)}.pop-dl-btn{background:var(--primary-gradient);color:#fff;padding:8px 24px;border-radius:30px;text-decoration:none;font-weight:600;font-size:.85rem;transition:var(--transition);box-shadow:0 4px 10px rgba(230,81,0,.2)}.pop-dl-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(230,81,0,.4)}@keyframes pulseBackground{0%{transform:scale(1)}100%{transform:scale(1.05)}}@keyframes rise{0%{bottom:-100px;transform:translateX(0);opacity:0}50%{opacity:1}100%{bottom:100%;transform:translateX(-100px);opacity:0}}@keyframes scrollBackground{0%{background-position:0 0}100%{background-position:100% 100%}}@keyframes swing{0%{transform:rotate(5deg)}100%{transform:rotate(-5deg)}}footer{background:linear-gradient(to right,#212121,#000000);color:#bdbdbd;padding:60px 0 20px;text-align:center;position:relative;border-top:5px solid var(--primary-color);margin-top:auto}@keyframes scrollHeaderPattern{0%{background-position:0 center}100%{background-position:100% center}}@keyframes headerSheen{0%,80%{left:-150%}100%{left:150%}}.ad-layout-container{display:flex;justify-content:center;gap:30px;position:relative;max-width:1600px;margin:0 auto;flex-direction:column;align-items:center}.main-content-wrapper{flex:1;max-width:800px;width:100%}.ad-sidebar{width:300px;min-width:300px;height:250px;display:block;border-radius:8px;overflow:hidden;margin:10px 0;position:static}.ad-sidebar img{width:100%;height:100%;object-fit:cover;border-radius:8px;box-shadow:var(--shadow-sm)}.ad-sidebar.square-ad{height:250px}@media(min-width:1200px){.ad-layout-container{flex-direction:row;align-items:flex-start}.details-page-ads .ad-sidebar{height:600px;position:sticky;top:100px}.ad-sidebar.square-ad{height:250px;position:static}}@media(max-width:767px){.popular-grid{grid-template-columns:1fr;gap:20px;padding:0 10px}.pop-card{padding:15px}.ad-layout-container{flex-direction:column!important;gap:20px}.section-title{font-size:1.8rem}.ringtone-highlight{font-size:1.5rem}.ad-sidebar{max-width:100%;margin:10px auto}}@media(min-width:768px) and (max-width:1199px){.popular-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1200px){.popular-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}.footer-nav{margin:40px auto;display:flex;justify-content:center;gap:15px;flex-wrap:wrap;padding-top:25px;border-top:1px solid rgba(255,255,255,.1);max-width:800px}.footer-nav a{display:inline-block;padding:8px 20px;background-color:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:50px;color:#e0e0e0;text-decoration:none}footer{background:linear-gradient(to right,#2C1810,#1a0f0a);color:var(--white);padding:10px 0;margin-top:auto;border-top:2px solid var(--primary-color);font-size:.8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.footer-inline-content{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;width:100%;max-width:1200px;padding:0 10px}.footer-cta{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);color:var(--white);padding:4px 12px;border-radius:50px;text-decoration:none;font-weight:600;transition:var(--transition);border:1px solid rgba(255,255,255,.2);font-size:.75rem}.footer-cta:hover{background:var(--primary-color);border-color:transparent}.footer-separator{color:rgba(255,255,255,.3);font-size:.8rem}.footer-inline-content a:not(.footer-cta){color:rgba(255,255,255,.7);text-decoration:none;transition:var(--transition);font-weight:500;font-size:.8rem}.footer-inline-content a:not(.footer-cta):hover{color:var(--secondary-color)}.footer-copyright{margin-top:5px;opacity:.5;font-size:.7rem;width:100%}@media(max-width:767px){footer{padding:40px 15px 80px;text-align:center}.footer-cta{width:100%;justify-content:center;padding:14px 20px;font-size:1rem;max-width:320px}.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:0}.footer-nav a{color:rgba(255,255,255,.7);text-decoration:none;transition:var(--transition);font-weight:500;font-size:.9rem;position:relative}.footer-nav a:hover{color:var(--secondary-color)}.footer-nav a::after{content:'';position:absolute;width:0;height:1px;bottom:-2px;left:0;background:var(--secondary-color);transition:width .3s}.footer-nav a:hover::after{width:100%}.footer-copyright{margin-top:15px;opacity:.5;font-size:.8rem;width:100%}@media(max-width:767px){footer{padding:40px 15px 80px;text-align:center}.footer-cta{width:100%;justify-content:center;padding:14px 20px;font-size:1rem;max-width:320px}.footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:30px auto;padding-top:20px}.footer-nav a{padding:10px;font-size:.85rem;width:100%;text-align:center;background:rgba(255,255,255,.05)}}@keyframes rise{0%{bottom:-50px;transform:translateX(0);opacity:0}50%{opacity:.8}100%{bottom:150%;transform:translateX(-20px);opacity:0}}}.test-ad-unit{background-color:#f0f0f0;border:1px solid #d0d0d0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#666;font-family:Arial,sans-serif;font-size:14px;width:100%;height:100%;min-height:250px}.test-ad-unit.leaderboard{min-height:90px}.test-ad-unit.sidebar{min-height:600px}.test-ad-unit::after{content:'Test Ad';font-weight:bold;font-size:24px;color:#aaa}.test-ad-badge{position:absolute;top:5px;right:5px;background:#fff;border:1px solid #ccc;color:#666;font-size:10px;padding:2px 6px;border-radius:4px;font-weight:bold}.faq-section{margin-bottom:80px;max-width:800px;margin-left:auto;margin-right:auto}.faq-item{background:var(--white);border-radius:12px;margin-bottom:15px;box-shadow:var(--shadow-sm);overflow:hidden;transition:var(--transition)}.faq-question{padding:20px;background:var(--white);font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text-color)}.faq-question:hover{color:var(--primary-color)}.faq-question i{transition:transform .3s}.faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s ease-out,padding .3s ease;border-top:1px solid transparent}.faq-item.active .faq-answer{padding:20px;max-height:500px;border-top:1px solid rgba(0,0,0,.05)}.faq-item.active .faq-question i{transform:rotate(180deg)}.feedback-section{margin-bottom:80px;max-width:800px;margin-left:auto;margin-right:auto}.feedback-form{background:var(--white);padding:40px;border-radius:20px;box-shadow:var(--shadow-md)}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-color)}.form-control{width:100%;padding:12px 15px;border:2px solid #eee;border-radius:10px;font-family:inherit;font-size:1rem;transition:var(--transition)}.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(230,81,0,.1)}textarea.form-control{resize:vertical;min-height:120px}.submit-btn{background:var(--primary-gradient);color:var(--white);border:none;padding:15px 40px;border-radius:50px;font-weight:700;font-size:1rem;cursor:pointer;transition:var(--transition);width:100%}.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:40px}.review-card{background:var(--white);border-radius:12px;padding:25px;box-shadow:0 5px 20px rgba(0,0,0,.05);border-left:5px solid var(--primary-color);transition:var(--transition);position:relative;overflow:hidden}.review-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.1)}.review-header{display:flex;align-items:center;gap:15px;margin-bottom:15px}.review-avatar img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,0,0,.05)}.review-meta{display:flex;flex-direction:column}.review-name{font-size:1.1rem;font-weight:700;color:var(--text-color);margin:0}.review-sub{font-size:.85rem;color:var(--primary-color);font-weight:500}.review-stars{color:#FFC107;font-size:.9rem;margin-bottom:15px}.review-text{color:#555;font-style:italic;line-height:1.6;font-size:.95rem}
    --primary-gradient: linear-gradient(135deg, #FF6F00 0%, #E65100 100%);
    --secondary-color: #FFD700;
    /* Gold */
    --background-color: #FFF8E1;
    /* Very light cream/yellow for warmth */
    --surface-color: rgba(255, 255, 255, 0.9);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --text-color: #3E2723;
    /* Dark Brown for softer contrast */
    --light-text: #795548;
    --white: #FFFFFF;
    --shadow-sm: 0 4px 6px rgba(230, 81, 0, 0.1);
    --shadow-md: 0 8px 15px rgba(230, 81, 0, 0.15);
    --shadow-lg: 0 20px 25px rgba(230, 81, 0, 0.2);
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html {
    height: 100%;
    overflow-x: hidden;
    /* Force prevent horizontal scroll on root */
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-color);
    width: 100%;
    /* Ensure body fits width */
    animation: scrollBackground 60s linear infinite;
    color: var(--text-color);
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Ensure main content pushes footer down */
main {
    flex: 1 0 auto;
    width: 100%;
    /* Ensure it spans full width */
}

/* Hanging Bells Decoration Removed */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
}

/* Header */
header {
    background: rgba(255, 255, 255, 0.85);
    /* Glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: var(--transition);
    /* overflow: hidden; Removed to allow mobile menu dropdown */
}

/* Header Spiritual Pattern (Moving Om) */
/* Header spiritual animations removed by user request */
/*
header::before { ... }
header::after { ... }
*/

/* =========================================
   Responsive Design & Device Optimization
   ========================================= */

/* --- Large Screens / TV (4K & Ultra Wide) --- */
@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
        /* Wider layout */
    }

    body {
        font-size: 18px;
        /* Larger base text */
    }

    h1 {
        font-size: 5rem;
    }

    h2 {
        font-size: 3.5rem;
    }

    .card-title {
        font-size: 1.8rem;
    }

    .ringtone-title {
        font-size: 1.5rem;
    }

    .grid,
    .ringtone-list {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 50px;
    }

    .cta-btn,
    .download-btn {
        padding: 20px 50px;
        font-size: 1.2rem;
    }
}

/* --- Laptop & Standard Desktop (1024px - 1599px) --- */
@media (min-width: 1024px) and (max-width: 1599px) {
    .container {
        max-width: 1100px;
    }
}

/* --- Tablets (768px - 1023px) --- */
@media (max-width: 1023px) {
    .hero h1 {
        font-size: 3rem;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }

    .ringtone-list {
        grid-template-columns: 1fr;
        /* Stack ringtones on smaller tablets */
    }
}

.menu-toggle {
    display: none;
}


/* --- Mobile & Tablet Devices (< 1200px) --- */
@media (max-width: 1200px) {

    /* Header & Nav */
    /* Header & Nav */
    /* Header & Nav */
    .nav-wrapper {
        justify-content: flex-start;
        /* Aligned left as requested */
        gap: 15px;
        /* Small gap between logo and hamburger */
        padding: 0 15px;
        position: relative;
    }

    .logo {
        width: auto;
        margin-right: 0;
    }

    /* Hamburger Toggle */
    .menu-toggle {
        display: block;
        font-size: 1.8rem;
        cursor: pointer;
        color: var(--text-color);
        padding: 5px;
        margin-right: 0;
        order: -1;
        /* Move to the START (Left side) */
    }

    /* Mobile Nav Drawer */
    .nav-links {
        display: none;
        /* Hidden by default */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        padding: 20px;
        gap: 15px;
        z-index: 9999;
        /* Boosted to ensure visibility over all elements */
        border-radius: 0 0 20px 20px;
        animation: slideDown 0.3s ease-out;
        max-height: 80vh;
        /* Prevent it from going off-screen */
        overflow-y: auto;
        /* Scroll if too many items */
    }

    .nav-links.active {
        display: flex;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-links a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px;
        font-size: 1.1rem;
        border-radius: 10px;
        margin: 0;
        background: transparent;
        border: none;
        color: #333 !important;
        /* Force dark text color for visibility */
        font-weight: 600;
    }

    .nav-links a:hover {
        background: rgba(230, 81, 0, 0.05);
        color: var(--primary-color);
    }


    /* Hero */
    .hero {
        padding: 50px 15px 70px;
        /* Reduced top/side, kept bottom for clip */
        clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%);
        margin-bottom: 30px;
    }

    .hero h1 {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .hero p {
        font-size: 0.95rem;
        max-width: 100%;
        padding: 0 10px;
        margin-bottom: 30px;
    }

    /* Cards & Grid */
    .section-title {
        font-size: 1.8rem;
        /* Slightly smaller for mobile */
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns */
        gap: 12px;
        /* Tighter gap */
    }

    .card {
        height: 180px;
        /* Reduced height for 2-col aspect ratio */
    }

    .card-title {
        font-size: 1.1rem;
        /* Smaller text for compact card */
    }

    /* Ringtone List */
    .ringtone-list {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns */
        gap: 12px;
    }

    .ringtone-item {
        flex-direction: column;
        /* Stack vertically for 2-col alignment */
        text-align: center;
        padding: 12px;
        /* Small padding */
        gap: 8px;
        /* Tighter gap */
        border-radius: 12px;
    }

    .play-btn {
        width: 45px;
        /* Smaller play button */
        height: 45px;
        font-size: 1rem;
        margin: 0 auto;
        /* Center it */
    }

    .ringtone-info {
        margin: 0;
        width: 100%;
    }

    .ringtone-title {
        font-size: 0.85rem;
        /* Smaller title */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px;
    }

    .ringtone-meta {
        font-size: 0.7rem;
        justify-content: center;
    }

    .ringtone-actions {
        margin: 0;
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .action-btn {
        width: 32px;
        /* Smaller icon buttons */
        height: 32px;
        font-size: 0.8rem;
    }

    /* Modify Download Button for Mobile Grid */
    .download-btn {
        padding: 6px 12px;
        font-size: 0.7rem;
        line-height: 1;
        min-width: auto;
    }

    /* Popular Grid Mobile Fix */
    .popular-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .pop-card {
        flex-direction: column;
        padding: 12px;
        text-align: center;
        margin-bottom: 0;
        /* Remove bottom margin in grid */
    }

    .pop-card-top {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .pop-tags {
        justify-content: center;
        margin-top: 5px;
    }

    .pop-actions {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: 10px;
    }

    .pop-dl-btn {
        width: 100%;
        text-align: center;
    }

    /* Touch Optimization */
    .action-btn,
    .play-btn,
    .download-btn {
        min-height: 48px;
        /* Recommended touch target size */
        min-width: 48px;
    }
}

header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-sm);
    padding: 0.8rem 0;
}

.container {
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 25px;
}

.nav-wrapper {
    display: flex;
    justify-content: flex-start;
    /* Move everything to left to prevent overflow */
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    /* Prevent text wrapping */
    margin-right: 40px;
}

.logo i {
    font-size: 1.5rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* --- Desktop Nav (min-width: 1201px) --- */
@media (min-width: 1201px) {
    .nav-links {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .nav-links a {
        color: var(--text-color);
        text-decoration: none;
        margin-left: 0;
        font-weight: 500;
        position: relative;
        padding: 6px 8px;
        transition: var(--transition);
        white-space: nowrap;
        border-radius: 8px;
        font-size: 0.95rem;
    }
}

.nav-links a:hover {
    background: rgba(230, 81, 0, 0.05);
}

@media (min-width: 1201px) {
    .nav-links a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 0;
        background: var(--primary-gradient);
        transition: var(--transition);
    }

    .nav-links a:hover::after,
    .nav-links a.active::after {
        width: 100%;
    }
}

/* Nav Badge */
.badge {
    background: #ff4081;
    /* Pinkish red */
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 12px;
    margin-left: 5px;
    font-weight: 600;
    vertical-align: middle;
    display: inline-block;
    min-width: 20px;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 2px 5px rgba(233, 30, 99, 0.3);
}

/* Sub Navigation (Spiritual Types) */
.sub-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
}

.sub-nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--light-text);
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 20px;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid transparent;
}

.sub-nav-link:hover {
    background: var(--primary-gradient);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(230, 81, 0, 0.2);
}

/* Hero Section */
.hero {
    position: relative;
    background: var(--primary-gradient);
    color: var(--white);
    text-align: center;
    padding: 60px 20px 120px;
    margin-bottom: 60px;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://www.transparenttextures.com/patterns/mandala-pattern.png');
    /* Subtle texture */
    opacity: 0.1;
    animation: pulseBackground 10s infinite alternate;
}

.hero-content {
    position: relative;
    z-index: 10;
    animation: fadeInUp 1s ease-out;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    color: var(--white);
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.hero p {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 0 auto 40px;
    opacity: 0.95;
    font-weight: 300;
}

.cta-btn {
    display: inline-block;
    padding: 15px 40px;
    background: var(--white);
    color: var(--primary-color);
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.cta-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    color: #BF360C;
}

/* Floating Om Particles */
.particles span {
    position: absolute;
    bottom: -50px;
    background: transparent;
    background-image: url('../img/om.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    mix-blend-mode: screen;
    /* Hides black background */
    animation: rise 15s infinite ease-in;
    z-index: 1;
}

.particles span:nth-child(1) {
    width: 40px;
    height: 40px;
    left: 10%;
    animation-duration: 8s;
}

.particles span:nth-child(2) {
    width: 20px;
    height: 20px;
    left: 20%;
    animation-duration: 12s;
    animation-delay: 2s;
}

.particles span:nth-child(3) {
    width: 50px;
    height: 50px;
    left: 35%;
    animation-duration: 10s;
    animation-delay: 5s;
}

.particles span:nth-child(4) {
    width: 80px;
    height: 80px;
    left: 50%;
    animation-duration: 15s;
    animation-delay: 0s;
}

.particles span:nth-child(5) {
    width: 35px;
    height: 35px;
    left: 65%;
    animation-duration: 6s;
    animation-delay: 1s;
}

.particles span:nth-child(6) {
    width: 25px;
    height: 25px;
    left: 80%;
    animation-duration: 9s;
    animation-delay: 3s;
}

/* Grid & Cards - Glassmorphism */
.section-title {
    text-align: center;
    margin-bottom: 60px;
    font-size: 2.5rem;
    position: relative;
    padding-bottom: 20px;
}

.section-title::after {
    content: 'ॐ';
    font-family: 'Arial', sans-serif;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--secondary-color);
    background: transparent;
    /* Transparent background */
    padding: 0 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    /* Increased width */
    height: 2px;
    /* Create a gap in the center using gradient */
    background: linear-gradient(90deg,
            transparent 0%,
            var(--secondary-color) 15%,
            var(--secondary-color) 40%,
            transparent 40%,
            transparent 60%,
            var(--secondary-color) 60%,
            var(--secondary-color) 85%,
            transparent 100%);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 80px;
}

/* Renamed to prevent conflict with wallpaper cards */
.bhakti-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 0;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    z-index: 1;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* New classes for Card Images */
.card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
    transition: transform 0.6s;
    z-index: 1;
    /* Image at bottom */
}

.bhakti-card::after {
    /* Overlay gradient */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
    /* Overlay above image */
}

.bhakti-card:hover .card-bg-image {
    transform: scale(1.1);
}

.card-content-wrapper {
    padding: 20px;
    color: var(--white);
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 10;
    /* Content on top of everything */
    position: relative;
}

.bhakti-card:hover .card-content-wrapper {
    transform: translateY(0);
}

.card-icon {
    font-size: 3.5rem;
    margin-bottom: 10px;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: var(--transition);
}

/* Override text colors for card content inside image cards */
.card-title {
    font-size: 1.4rem;
    margin-bottom: 5px;
    font-weight: 700;
    color: inherit;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Animations using Classes (triggered by JS) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Ringtone List */
.ringtone-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    /* Creates 2 columns on desktop */
    gap: 25px;
    margin-bottom: 40px;
}

.ringtone-item {
    background: var(--white);
    border-radius: 16px;
    padding: 20px 25px;
    /* margin-bottom: 25px;  Removed relative to Grid Gap */
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 20px;
    /* Reduced gap slightly for compact fit */
    transition: var(--transition);
    border-left: 5px solid transparent;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Spiritual Om Watermark */
.ringtone-item::before {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background-image: url('../img/om.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.12;
    mix-blend-mode: screen;
    /* Hides black background */
    transform: rotate(-15deg);
    transition: all 0.6s ease;
    z-index: -1;
    pointer-events: none;
}

.ringtone-item:hover::before {
    opacity: 0.3;
    transform: rotate(0deg) scale(1.2);
}

.ringtone-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--primary-color);
}

.play-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: var(--white);
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(230, 81, 0, 0.3);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.play-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    transition: transform 0.3s;
}

.play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(230, 81, 0, 0.4);
}

.play-btn:active::after {
    transform: scale(2);
    opacity: 0;
}

.ringtone-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    display: block;
    margin-bottom: 5px;
}

.bhakti-download-btn {
    padding: 12px 25px;
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    /* Pill shape */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: var(--transition);
}

.bhakti-download-btn:hover {
    background: var(--primary-gradient);
    border-color: transparent;
    color: var(--white);
    box-shadow: 0 5px 15px rgba(230, 81, 0, 0.3);
}

/* Action Buttons (Fav & Share) */
.ringtone-actions {
    margin-left: auto;
    /* Push to right */
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    color: var(--light-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition);
}

.action-btn:hover {
    background: rgba(230, 81, 0, 0.1);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Pulse Animation for Heart */
.pulse-anim {
    animation: heartPulse 0.3s ease-in-out;
}

@keyframes heartPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   NEW POPULAR CARD DESIGN (Shared)
   ========================================= */
.popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.pop-card {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
}

.pop-card:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.pop-card-top {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.pop-play-btn {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: var(--white);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.4rem;
    box-shadow: 0 4px 10px rgba(230, 81, 0, 0.3);
    position: relative;
    /* For pseudo-element */
    z-index: 1;
}

.pop-play-btn::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    opacity: 0.6;
    z-index: -1;
    animation: pulse-ring 2s infinite;
}

.pop-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(230, 81, 0, 0.5);
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.pop-info {
    flex: 1;
}

.pop-title {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-color);
    margin-bottom: 6px;
    line-height: 1.4;
}

.pop-meta {
    font-size: 0.8rem;
    color: var(--light-text);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pop-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mini-tag {
    border: 1px solid var(--primary-color);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.75rem;
    color: var(--primary-color);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.5);
    transition: var(--transition);
}

.mini-tag:hover {
    background: var(--primary-gradient);
    color: var(--white);
    border-color: transparent;
    transform: translateY(-2px);
}

.pop-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
}

.icon-actions {
    display: flex;
    gap: 15px;
}

.icon-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-color);
    cursor: pointer;
    transition: var(--transition);
}

.icon-btn:hover {
    color: var(--primary-color);
    transform: scale(1.15);
}

.pop-dl-btn {
    background: var(--primary-gradient);
    color: #fff;
    padding: 8px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transition);
    box-shadow: 0 4px 10px rgba(230, 81, 0, 0.2);
}

.pop-dl-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 81, 0, 0.4);
}

@keyframes pulseBackground {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

@keyframes rise {
    0% {
        bottom: -100px;
        transform: translateX(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        bottom: 100%;
        /* Move to top of container/screen */
        transform: translateX(-100px);
        opacity: 0;
    }
}

@keyframes scrollBackground {
    0% {
        background-position: 0 0;
    }

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

@keyframes swing {
    0% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

/* Footer */
footer {
    background: linear-gradient(to right, #212121, #000000);
    color: #bdbdbd;
    padding: 60px 0 20px;
    text-align: center;
    position: relative;
    border-top: 5px solid var(--primary-color);
    margin-top: auto;
    /* Ensure stickiness in flex container */
}

@keyframes scrollHeaderPattern {
    0% {
        background-position: 0 center;
    }

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

@keyframes headerSheen {

    0%,
    80% {
        left: -150%;
    }

    /* Pause for most of the time */
    100% {
        left: 150%;
    }
}

/* =========================================
   Ad Layout System
   ========================================= */
.ad-layout-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    /* Default: Mobile Column Layout */
    flex-direction: column;
    align-items: center;
}

.main-content-wrapper {
    flex: 1;
    max-width: 800px;
    width: 100%;
}

.ad-sidebar {
    width: 300px;
    /* Standard Width */
    min-width: 300px;
    height: 250px;
    /* Default Mobile Height */
    display: block;
    /* Always visible */
    border-radius: 8px;
    overflow: hidden;
    margin: 10px 0;
}

/* Remove sticky on mobile */
.ad-sidebar {
    position: static;
}

.ad-sidebar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.ad-sidebar.square-ad {
    height: 250px;
}

/* Desktop / TV / Laptop Layout */
@media (min-width: 1200px) {
    .ad-layout-container {
        flex-direction: row;
        /* Side by side */
        align-items: flex-start;
        /* Default alignment */
    }

    /* Restore sticky sidebars for detail view */
    .details-page-ads .ad-sidebar {
        height: 600px;
        position: sticky;
        top: 100px;
    }

    /* Ensure square ads remain square */
    .ad-sidebar.square-ad {
        height: 250px;
        position: static;
        /* Header ads don't stick */
    }
}

/* =========================================
   Global Responsive Refinements
   ========================================= */

/* --- Mobile Devices (< 768px) --- */
@media (max-width: 767px) {

    /* Better Grid implementation for mobile */
    .popular-grid {
        grid-template-columns: 1fr;
        /* Force single column */
        gap: 20px;
        padding: 0 10px;
    }

    .pop-card {
        padding: 15px;
        /* Reduce padding */
    }

    /* Ad Header Specifics for Mobile */
    .ad-layout-container {
        flex-direction: column !important;
        /* Force stack */
        gap: 20px;
    }

    /* Adjust Title Sizes */
    .section-title {
        font-size: 1.8rem;
    }

    .ringtone-highlight {
        font-size: 1.5rem;
    }

    /* Ensure ads don't overflow */
    .ad-sidebar {
        max-width: 100%;
        margin: 10px auto;
    }
}

/* --- Tablets (768px - 1199px) --- */
@media (min-width: 768px) and (max-width: 1199px) {
    .popular-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns */
    }
}

/* --- Laptops & Desktops (1200px +) --- */
@media (min-width: 1200px) {

    /* Ensure popular grid uses available space effectively */
    .popular-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Footer Navigation - Professional Pill Style */
.footer-nav {
    margin: 40px auto;
    display: flex;
    justify-content: center;
    gap: 15px;
    /* Reduced gap */
    flex-wrap: wrap;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Visible on dark bg */
    max-width: 800px;
}

.footer-nav a {
    display: inline-block;
    padding: 8px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    /* Subtle dark mode bg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: #e0e0e0;
    /* Light grey text */
    text-decoration: none;
}

/* --- Footer --- */
footer {
    background: linear-gradient(to right, #2C1810, #1a0f0a);
    color: var(--white);
    padding: 10px 0;
    /* Ultra compact */
    margin-top: auto;
    border-top: 2px solid var(--primary-color);
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Container for inline layout */
.footer-inline-content {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping on very small screens if needed, closely packed */
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
}

.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
}

.footer-cta:hover {
    background: var(--primary-color);
    border-color: transparent;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}

.footer-inline-content a:not(.footer-cta) {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
    font-size: 0.8rem;
}

.footer-inline-content a:not(.footer-cta):hover {
    color: var(--secondary-color);
}

.footer-copyright {
    margin-top: 5px;
    opacity: 0.5;
    font-size: 0.7rem;
    width: 100%;
}

/* --- Mobile Footer Optimization --- */
@media (max-width: 767px) {
    footer {
        padding: 40px 15px 80px;
        /* Extra bottom padding for mobile browsers */
        text-align: center;
    }

    .footer-cta {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 1rem;
        max-width: 320px;
        /* Don't be too wide */
    }

    .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin: 0;
    }

    .footer-nav a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        transition: var(--transition);
        font-weight: 500;
        font-size: 0.9rem;
        position: relative;
    }

    .footer-nav a:hover {
        color: var(--secondary-color);
    }

    .footer-nav a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        bottom: -2px;
        left: 0;
        background: var(--secondary-color);
        transition: width 0.3s;
    }

    .footer-nav a:hover::after {
        width: 100%;
    }

    .footer-copyright {
        margin-top: 15px;
        opacity: 0.5;
        font-size: 0.8rem;
        width: 100%;
    }

    /* --- Mobile Footer Optimization --- */
    @media (max-width: 767px) {
        footer {
            padding: 40px 15px 80px;
            /* Extra bottom padding for mobile browsers */
            text-align: center;
        }

        .footer-cta {
            width: 100%;
            justify-content: center;
            padding: 14px 20px;
            font-size: 1rem;
            max-width: 320px;
            /* Don't be too wide */
        }

        .footer-nav {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* 2 Column Grid */
            gap: 10px;
            margin: 30px auto;
            padding-top: 20px;
        }

        .footer-nav a {
            padding: 10px;
            font-size: 0.85rem;
            width: 100%;
            text-align: center;
            background: rgba(255, 255, 255, 0.05);
            /* Slightly clearer background */
        }
    }

    @keyframes rise {
        0% {
            bottom: -50px;
            transform: translateX(0);
            opacity: 0;
        }

        50% {
            opacity: 0.8;
        }

        100% {
            bottom: 150%;
            transform: translateX(-20px);
            opacity: 0;
        }
    }

    /* Google AdSense Test Unit Styling */
    .test-ad-unit {
        background-color: #f0f0f0;
        border: 1px solid #d0d0d0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        color: #666;
        font-family: Arial, sans-serif;
        font-size: 14px;
        width: 100%;
        height: 100%;
        min-height: 250px;
        /* Default min height */
    }

    .test-ad-unit.leaderboard {
        min-height: 90px;
    }

    .test-ad-unit.sidebar {
        min-height: 600px;
    }

    .test-ad-unit::after {
        content: 'Test Ad';
        font-weight: bold;
        font-size: 24px;
        color: #aaa;
    }

    .test-ad-badge {
        position: absolute;
        top: 5px;
        right: 5px;
        background: #fff;
        border: 1px solid #ccc;
        color: #666;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: bold;
    }

    /* --- FAQ Section --- */
    .faq-section {
        margin-bottom: 80px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .faq-item {
        background: var(--white);
        border-radius: 12px;
        margin-bottom: 15px;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        transition: var(--transition);
    }

    .faq-question {
        padding: 20px;
        background: var(--white);
        font-weight: 600;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--text-color);
    }

    .faq-question:hover {
        color: var(--primary-color);
    }

    .faq-question i {
        transition: transform 0.3s;
    }

    .faq-answer {
        padding: 0 20px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease;
        border-top: 1px solid transparent;
    }

    .faq-item.active .faq-answer {
        padding: 20px;
        max-height: 500px;
        /* Arbitrary large height */
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .faq-item.active .faq-question i {
        transform: rotate(180deg);
    }

    /* --- Feedback Section --- */
    .feedback-section {
        margin-bottom: 80px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .feedback-form {
        background: var(--white);
        padding: 40px;
        border-radius: 20px;
        box-shadow: var(--shadow-md);
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: var(--text-color);
    }

    .form-control {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid #eee;
        border-radius: 10px;
        font-family: inherit;
        font-size: 1rem;
        transition: var(--transition);
    }

    .form-control:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(230, 81, 0, 0.1);
    }

    textarea.form-control {
        resize: vertical;
        min-height: 120px;
    }

    .submit-btn {
        background: var(--primary-gradient);
        color: var(--white);
        border: none;
        padding: 15px 40px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 1rem;
        cursor: pointer;
        transition: var(--transition);
        width: 100%;
    }

    /* --- Reviews / Testimonials Section --- */
    .reviews-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        margin-top: 40px;
    }

    .review-card {
        background: var(--white);
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        border-left: 5px solid var(--primary-color);
        /* The specific left border requested */
        transition: var(--transition);
        position: relative;
        overflow: hidden;
    }

    .review-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .review-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
    }

    .review-avatar img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(0, 0, 0, 0.05);
    }

    .review-meta {
        display: flex;
        flex-direction: column;
    }

    .review-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-color);
        margin: 0;
    }

    .review-sub {
        font-size: 0.85rem;
        color: var(--primary-color);
        font-weight: 500;
    }

    .review-stars {
        color: #FFC107;
        /* Gold Star Color */
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .review-text {
        color: #555;
        font-style: italic;
        line-height: 1.6;
        font-size: 0.95rem;
    }
}