/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f4f7f6;
    color: #333;
}

/* Header Section */
header {
    background-color: #1e293b;
    color: white;
    padding: 20px;
    text-align: center;
}

header h1 {
    font-size: 24px;
    margin-bottom: 5px;
}

header p {
    font-size: 14px;
    color: #cbd5e1;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Section Title */
h2.section-title {
    margin-bottom: 20px;
    color: #1e293b;
    border-left: 5px solid #3b82f6;
    padding-left: 10px;
}

/* Categories Section */
.categories {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.category-btn {
    background-color: #ffffff;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    color: #475569;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.category-btn:hover, .category-btn.active {
    background-color: #3b82f6;
    color: white;
}

/* Apps Grid */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

/* App Card */
.app-card {
    background: white;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    color: #333;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.app-card img {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    object-fit: cover;
    margin-bottom: 10px;
}

.app-card h3 {
    font-size: 16px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-tag {
    font-size: 11px;
    background-color: #e2e8f0;
    color: #475569;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
}

/* --- Download Page Styles --- */
.detail-container {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.detail-logo {
    width: 150px;
    height: 150px;
    border-radius: 28px;
    object-fit: cover;
}

.detail-info {
    flex: 1;
    min-width: 250px;
}

.detail-info h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.meta-info {
    margin-bottom: 20px;
    color: #64748b;
    font-size: 14px;
}

/* Download Button */
.download-btn {
    display: inline-block;
    background-color: #10b981; /* Green Color for Download */
    color: white;
    padding: 15px 35px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
    transition: 0.3s;
}

.download-btn:hover {
    background-color: #059669;
    transform: scale(1.02);
}

.description {
    margin-top: 30px;
    line-height: 1.6;
    color: #475569;
}

/* --- Menu Button & Sidebar Styles --- */
.menu-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #3b82f6;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    z-index: 100;
    transition: 0.3s;
}

.menu-btn:hover {
    background-color: #2563eb;
    transform: scale(1.05);
}

/* Sidebar Panel */
.sidebar {
    position: fixed;
    top: 0;
    right: -300px; /* Shuru me ye chhupa rahega */
    width: 300px;
    height: 100%;
    background-color: #1e293b;
    color: white;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3);
    transition: right 0.4s ease-in-out; /* Smooth slide animation */
    z-index: 1000;
    padding: 30px 20px;
}

.sidebar.open {
    right: 0; /* Click karne par samne aayega */
}

.close-sidebar {
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: 24px;
    cursor: pointer;
    float: right;
}

.sidebar-content {
    margin-top: 50px;
}

.sidebar-content h3 {
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-size: 18px;
}

.sidebar-content p {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* Social Media Links Container */
.social-links a {
    display: flex;
    align-items: center; /* Image aur text ko ek line me vertical center karega */
    gap: 12px; /* Logo aur naam ke beech ka gap */
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    background: #334155;
    margin-bottom: 12px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s;
}

.social-links a:hover {
    background: #3b82f6;
    padding-left: 20px;
}

/* GIF Logo Style */
.social-links img {
    width: 24px; /* GIF ka size perfect set karne ke liye */
    height: 24px;
    object-fit: contain;
}

/* --- Search Bar Styles --- */
.search-container {
    margin: 20px auto;
    width: 100%;
    max-width: 600px; /* Search bar ki width set karne ke liye */
}

#appSearch {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 30px; /* Pure round corner look ke liye */
    outline: none;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: 0.3s ease;
}

/* Jab user search bar par click karega toh blue border aayega */
#appSearch:focus {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* --- Download Actions Wrapper --- */
.download-action-area {
    display: flex;
    align-items: center; /* Button aur rating ko vertically ek line me layega */
    gap: 20px;          /* Button aur rating ke beech ka gap */
    flex-wrap: wrap;    /* Mobile screen par automatic niche shift hone ke liye */
    margin-top: 20px;
}

/* Rating Box Style */
.app-rating-box {
    display: flex;
    align-items: center;
    background-color: #f8fafc; /* Light gray background */
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Star Color (Golden) */
.rating-stars {
    color: #fbbf24; /* Premium Yellow/Gold Color */
    font-size: 18px;
    margin-right: 8px;
    letter-spacing: 2px;
}

/* Rating Number Text */
.rating-number {
    font-size: 16px;
    font-weight: bold;
    color: #334155;
}

.rating-count {
    font-size: 12px;
    color: #64748b;
    margin-left: 5px;
}

.sticky-ad {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* --- AdBlocker Popup Warning --- */
.adblock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.98); /* Dark blur background taaki peeche ka kuch na dikhe */
    z-index: 999999; /* Sabse upar rahega */
    display: none; /* By default chhupa rahega */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.adblock-box {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.adblock-box h2 {
    color: #ef4444; /* Red Warning Color */
    font-size: 24px;
    margin-bottom: 15px;
}

.adblock-box p {
    color: #475569;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.adblock-btn {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
}

.adblock-btn:hover {
    background-color: #2563eb;
    transform: scale(1.05);
}

/* --- UPGRADED ZOOM-RESISTANT APP SLIDER --- */
.slider-section {
    margin: 30px 0;
    padding: 0 10px;
    position: relative;
}

.slider-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Horizontal Scroll Area (Mouse Scroll Enabled) */
.apps-slider {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 15px 5px;
    width: 100%;
    /* Standard shift scrolling with shift + mouse-wheel default */
}

/* Hide Default Scrollbar for Clean Look */
.apps-slider::-webkit-scrollbar {
    display: none;
}
.apps-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.slider-card {
    background: #1e293b;
    min-width: 150px;
    max-width: 150px;
    border-radius: 16px;
    padding: 12px 10px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;

    /* 🎯 ULTRA FIX: BLUE SELECTION GLITCH REMOVER */
    -webkit-user-select: none; /* Safari aur Chrome ke liye */
    -moz-user-select: none;    /* Firefox ke liye */
    -ms-user-select: none;     /* IE/Edge ke liye */
    user-select: none;         /* Standard standard browsers ke liye */
}

/* 🎯 IMAGES KO BHI DRAG-HIGHLIGHT HONE SE ROKNE KE LIYE */
.slider-card img {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    object-fit: cover;
    margin-bottom: 8px;
    pointer-events: none; /* Isse mouse se photo select ya drag nahi hogi */
}

.slider-card h3 {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.slider-card .app-tag {
    font-size: 11px;
    color: #94a3b8;
}

/* 🎯 NAVIGATION BUTTONS (HAMESHA VISIBLE RAHENGE ZOOM PAR BHI) */
.slide-btn {
    position: absolute;
    background: #1e293b;
    color: #0099ff; 
    border: 1px solid rgba(0, 153, 255, 0.4);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 100; /* High index to stay on top always */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

.slide-btn:hover {
    background: #0099ff;
    color: #fff;
    box-shadow: 0 0 15px #0099ff;
}

/* Button placements outside the grid to look premium */
.prev-btn { left: -10px; }
.next-btn { right: -10px; }

/* 🚨 ZOOM HIDE FIX: Mobile par display hidden hata kar opacity control ki hai taaki zoom par bache rhein */
@media (max-width: 480px) {
    .slide-btn { display: none !important; } /* Sirf asali chhote phones par hi hide hoga */
    .slider-card { min-width: 130px; max-width: 130px; }
    .slider-card img { width: 70px; height: 70px; }
}

/* 🎯 SUPER UNIVERSAL GHOST-DRAG REMOVER */
.apps-slider, 
.apps-slider *, 
.slider-container, 
.slider-section * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    
    /* 👇 YEH LINE US FLOATING LINK PARCHAAI KO BLOCK KAREGI */
    -webkit-user-drag: none !important;
    /* 🍏 YEH LINE US FLOATING LINK PARCHAAI KO BLOCK KAREGI */
    -webkit-user-drag: none !important;
    overflow: hidden;
}

/* 📱 SMARTPHONE NATURAL SWIPE CONTROL */
.apps-slider {
    display: flex;
    overflow-x: auto !important; /* Phone me finger swipe automatic on karega */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch !important; /* iPhone/Android native fluid animation */
    scrollbar-width: none; /* Firefox scrollbar hide */
}

/* Chrome, Safari aur Opera ke liye scrollbar hide look */
.apps-slider::-webkit-scrollbar {
    display: none !important;
}

.slider-card {
    scroll-snap-align: start;
    user-select: none;
    -webkit-user-drag: none;
}

.apps-slider {
    display: flex;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    cursor: pointer; /* Desktop par normal state me select hand dikhega */
}

.apps-slider::-webkit-scrollbar {
    display: none !important;
}

/* ======================================================== */
/* 🌗 DYNAMIC THEME ENGINE (LIGHT MODE vs DARK MODE)        */
/* ======================================================== */

/* 🟢 TOGGLE BUTTON UI ANIMATION EFFECTS */
input:checked + .slider-toggle {
    background-color: #1e293b !important;
    border: 1px solid #334155;
}

input:checked + .slider-toggle .toggle-ball {
    transform: translateX(22px);
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

/* 🛑 1. PURE DARK THEME OVERRIDES (Jab checkbox ON hoga tab ye active hoga) */
body.dark-theme {
    background-color: #0b0f19 !important;
    color: #e2e8f0 !important;
    background-image: none !important;
}

body.dark-theme header, 
body.dark-theme .navbar, 
body.dark-theme .top-nav, 
body.dark-theme .header-container {
    background: linear-gradient(135deg, #111827, #0f172a) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme #appSearch, 
body.dark-theme .search-container input, 
body.dark-theme .search-box {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme .filter-btn, 
body.dark-theme .category-tab, 
body.dark-theme .filter-menu button {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border: 1px solid #334155 !important;
}

body.dark-theme .filter-btn.active, 
body.dark-theme .filter-btn:hover, 
body.dark-theme .category-tab.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
}

body.dark-theme .app-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme .app-card:hover {
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(59, 130, 246, 0.2) !important;
}

body.dark-theme .app-card h3, 
body.dark-theme .app-card .app-title {
    color: #ffffff !important;
}

body.dark-theme .app-card p, 
body.dark-theme .app-card .app-meta, 
body.dark-theme .app-card span {
    color: #94a3b8 !important;
}

body.dark-theme .detail-container, 
body.dark-theme .download-action-area, 
body.dark-theme .app-details-box {
    background-color: #111827 !important;
    border: 1px solid #1e293b !important;
}

body.dark-theme .app-rating-box, 
body.dark-theme .rating-container {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* ======================================================== */
/* 🔄 AUTOMATIC INFINITE LOOP SLIDER STYLES                 */
/* ======================================================== */

.auto-slider-container {
    overflow: hidden;
    width: 100%;
    padding: 10px 0;
    position: relative;
    margin: 25px 0;
}

/* Isme pure horizontal content ki flex track setup hai */
.auto-slider-track {
    display: flex;
    width: max-content;
    gap: 20px;
    /* 25s matlab slider 25 seconds me ek chakkar poora karega, ise slow karne ke liye 30s ya 35s kar sakte hain */
    animation: slowScrollLoop 25s linear infinite; 
}

/* Hover karne par animation ruk jayega taaki user aaram se click kar sake */
.auto-slider-track:hover {
    animation-play-state: paused;
}

/* Chote modern pills jaise cards */
.auto-slider-card {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

body.dark-theme .auto-slider-card {
    background: #111827 !important;
}

/* Light mode me automatically gray look background le lega */
body:not(.dark-theme) .auto-slider-card {
    background: #f1f5f9 !important;
    border-color: #e2e8f0;
    color: #0f172a !important;
}

/* ======================================================== */
/* 🔥 ULTIMATE FORCE HOVER: LIGHT & DARK MODE OVERRIDE       */
/* ======================================================== */

/* 1. Body chahe light mode me ho ya dark mode me, hover par box SOLID DARK SKYBLUE hoga */
body .auto-slider-card:hover,
body.dark-theme .auto-slider-card:hover,
.auto-slider-container .auto-slider-card:hover {
    background: #0055ff !important; /* Ekdum solid aur gehra dark sky-blue */
    background-color: #0055ff !important;
    border-color: #0044cc !important;
    transform: scale(1.05) translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 85, 255, 0.5) !important;
}

/* 2. Hover hone par TEXT 100% PURE SOLID WHITE hoga aur piche glow aayega */
body .auto-slider-card:hover span,
body.dark-theme .auto-slider-card:hover span,
.auto-slider-container .auto-slider-card:hover span {
    color: #ffffff !important; /* Pure clear white text */
    font-weight: 800 !important; /* Heavy bold thickness */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 10px #00d2ff !important; /* Text ke piche heavy black aur neon shadow */
}

.auto-slider-card img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    pointer-events: none;
}

.auto-slider-card span {
    font-size: 13px;
    font-weight: 600;
}

/* 🔄 KEYFRAMES: Jo track ko smooth linear left side me sarkaeygi */
@keyframes slowScrollLoop {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Aadhe set par aate hi infinite snap hack reset ho jata hai */
    }
}

/* ======================================================== */
/* 🎬 STACKED HERO: TEXT ON TOP, APPS RUNNING BELOW         */
/* ======================================================== */

.premium-hero-header-stacked {
    position: relative;
    width: 100%;
    background: #0b0f19 !important; /* Theme core layout background */
    display: flex;
    flex-direction: column; /* Content ko line se upar-niche align karega */
    padding: 25px 0 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1;
    overflow: hidden;
}

/* 📝 Top Content Section Area */
.hero-top-text-zone {
    text-align: center;
    padding: 0 15px;
    margin-bottom: 10px; /* Apps block aur text ke beech me premium space */
    z-index: 5;
}

/* Big Ultra Bold Header Text */
.hero-brand-title {
    font-size: 55px !important; /* 👈 Size ko thoda aur bada kiya */
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    margin: 0 0 6px 0 !important;
    color: #ffffff !important;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.3) !important;
}

/* Subtext Tagline styling */
.hero-brand-tagline {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important; /* Soft premium grey-white balance */
    margin: 0 !important;
    letter-spacing: 0.5px;
}

/* 🔄 Bottom Running Track Container Wrapper */
.hero-bottom-apps-zone {
    position: relative;
    width: 100%;
    height: 75px; /* App image dimensions block container */
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 2;
}

/* Infinite Horizontal Moving Layer */
.hero-bg-animated-track {
    display: flex;
    gap: 40px;
    width: max-content;
    position: absolute;
    /* Left to right infinite scroll transition rules */
    animation: stackedTrackScrollLeftToRight 5s linear infinite;
    pointer-events: none;
}

.hero-bg-animated-track img {
    width: 55px; /* Apps ka size thoda normal kiya taaki strip clean lage */
    height: 55px;
    border-radius: 14px;
    object-fit: cover;
    opacity: 0.60 !important; /* 👈 Apps ab ekdum 85% full bright aur clear dikhenge */
    box-shadow: 0 4px 10px rgba(0, 46, 210, 0.317);
}

/* ☀️ Light Mode Theme Balance Layout Overrides */
body:not(.dark-theme) .premium-hero-header-stacked {
    background: #f8fafc !important;
}
body:not(.dark-theme) .hero-brand-title {
    color: #0051bc !important;
    text-shadow: none !important;
}
body:not(.dark-theme) .hero-brand-tagline {
    color: #0205ba !important;
}

/* 🎥 KEYFRAMES: Infinite Left to Right Linear Scroll Loop physics */
@keyframes stackedTrackScrollLeftToRight {
    0% {
        transform: translateX(-50%); /* Start from half-point overlap anchor */
    }
    100% {
        transform: translateX(0); /* Seamless continuous reset target */
    }
}

/* ======================================================== */
/* 🎬 STACKED HERO: LEFT-TO-RIGHT SCROLL WITH SMOOTH WAVE   */
/* ======================================================== */

.premium-hero-header-stacked {
    position: relative;
    width: 100%;
    background: #0b0f19 !important;
    display: flex;
    flex-direction: column;
    padding: 25px 0 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1;
    overflow: hidden;
}

.hero-top-text-zone {
    text-align: center;
    padding: 0 15px;
    margin-bottom: 25px; /* Wave bounce ke liye gap thoda badhaya */
    z-index: 5;
}

.hero-brand-title {
    font-size: 46px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    margin: 0 0 6px 0 !important;
    color: #ffffff !important;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.3) !important;
}

.hero-brand-tagline {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    letter-spacing: 0.5px;
}

.hero-bottom-apps-zone {
    position: relative;
    width: 100%;
    height: 90px; /* 👈 Height badha di taaki wave me jab icons upar uthein toh katein nahi */
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 2;
}

.hero-bg-animated-track {
    display: flex;
    gap: 30px;
    width: max-content;
    position: absolute;
    animation: stackedTrackScrollLeftToRight 8s linear infinite;
    pointer-events: none;
}

/* ⭐ WAVE ANIMATION CORE LOGIC FOR ICONS */
.hero-bg-animated-track img {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    object-fit: cover;
    opacity: 0.85 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    
    /* 🌊 Doosra animation add kiya jo wave generate karega */
    /* 3s ka matlb har 3 second me wave loop repeat hogi */
    animation: iconWaveEffect 3s ease-in-out infinite;
    
    /* 👈 Har card ke index number ke hisab se delay set hoga (Left to Right sequence) */
    animation-delay: calc(var(--i) * 0.15s); 
}

/* Light Mode Styling */
body:not(.dark-theme) .premium-hero-header-stacked {
    background: #f8fafc !important;
}
body:not(.dark-theme) .hero-brand-title {
    color: #0066ff !important;
    text-shadow: none !important;
}
body:not(.dark-theme) .hero-brand-tagline {
    color: #000759 !important;
}

/* 🎥 TRACK SCROLL ANIMATION (Left to Right Track Layer) */
@keyframes stackedTrackScrollLeftToRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* 🎥 WAVE EFFECT ANIMATION (Icons Up & Down Staggered physics) */
@keyframes iconWaveEffect {
    0%, 100% {
        transform: translateY(0); /* Normal Position */
    }
    50% {
        transform: translateY(-12px); /* 👈 Wave ke dauran app thoda sa upar uthega (Perfect Sweet Spot) */
    }
}

/* ======================================================== */
/* ✨ MAIN GRID APPS: ORIGINAL BOUNCY WAVE ANIMATION         */
/* ======================================================== */

/* 1. Base Cards Par Transition Setup (Grid & Trending Dono Ke Liye) */
.app-card, .slider-card {
    position: relative;
    overflow: hidden;
    /* Wapas wahi elastic swing style bezier curve set kar diya hai */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease !important;
    will-change: transform;
}

/* 2. Hover Karte Hi Wave Jump Effect (Thoda Sa Upar Uthega) */
.app-card:hover, .slider-card:hover {
    transform: translateY(-10px) scale(1.02) !important; /* Perfect vertical wave jump */
    border-color: #3b82f6 !important; /* Neon blue border accent */
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25), 
                0 0 30px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Image Par Se Alag Wave Bounce Effect */
.app-card:hover img, .slider-card:hover img {
    transform: scale(1.06);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4) !important;
    transition: all 0.3s ease;
}
/* 4. 🌊 SHINE WAVE EFFECT (Ise Pehle Se Zyada Bright Aur Visible Kiya Hai) */
.app-card::after, .slider-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 65%; /* 👈 Width thodi badha di taaki wave thodi chaudi aur solid dikhe */
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%,  /* 👈 Opacity ko 0.13 se badha kar 0.4 kiya taaki ekdum saaf chamke */
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
}

/* Hover Ke Dauran Light Wave Left To Right Move Karegi */
.app-card:hover::after, .slider-card:hover::after {
    animation: gridShineWave 0.75s ease-out;
}

/* 🎥 SHINE WAVE KEYFRAMES */
@keyframes gridShineWave {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}

/* 5. ⚡ INITIAL PAGE LOAD WAVE (Jab Page Khule Tab Ek Wave Aaye) */
@keyframes pageLoadGridWave {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Grid Load Wave Trigger */
.apps-grid .app-card {
    animation: pageLoadGridWave 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Har ek single card par left to right delay setup (Staggered Wave) */
.apps-grid .app-card:nth-child(1) { animation-delay: 0.1s; }
.apps-grid .app-card:nth-child(2) { animation-delay: 0.15s; }
.apps-grid .app-card:nth-child(3) { animation-delay: 0.2s; }
.apps-grid .app-card:nth-child(4) { animation-delay: 0.25s; }
.apps-grid .app-card:nth-child(5) { animation-delay: 0.3s; }
.apps-grid .app-card:nth-child(6) { animation-delay: 0.35s; }
.apps-grid .app-card:nth-child(7) { animation-delay: 0.4s; }
.apps-grid .app-card:nth-child(8) { animation-delay: 0.45s; }

/* ======================================================== */
/* 🛑 FORCE REMOVE ALL BACKGROUND PILLS / WHITE BOXES      */
/* ======================================================== */

/* 1. Dark Mode Configuration */
body.dark-theme .app-card span,
body.dark-theme .app-card p,
body.dark-theme .app-card .app-meta,
body.dark-theme .slider-card span,
body.dark-theme .slider-card p {
    background: none !important;
    background-color: transparent !important;
    color: #94a3b8 !important; /* Premium light gray text color */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 4px auto 0 auto !important;
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* 2. Light Mode Configuration */
body:not(.dark-theme) .app-card span,
body:not(.dark-theme) .app-card p,
body:not(.dark-theme) .app-card .app-meta,
body:not(.dark-theme) .slider-card span,
body:not(.dark-theme) .slider-card p {
    background: none !important;
    background-color: transparent !important;
    color: #475569 !important; /* Smooth dark gray text color */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 4px auto 0 auto !important;
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ======================================================== */
/* 🌗 TOP NAVBAR THEME TOGGLE ALIGNMENT                      */
/* ======================================================== */

.top-nav-theme-toggle {
    position: absolute;
    top: 30px; /* Upar se vertical spacing */
    right: 10px; /* 👈 Isko kam-bada karke aap Menu button ke left ya right me set kar sakte hain */
    z-index: 9999;
}

/* Base structural styles for the toggle slider */
.theme-switch {
    display: inline-block;
    height: 28px;
    position: relative;
    width: 52px;
}

.slider-toggle {
    background-color: #334155;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.4s;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toggle-icon {
    font-size: 11px;
    user-select: none;
}

.toggle-ball {
    background-color: white;
    bottom: 2px;
    height: 22px;
    left: 3px;
    position: absolute;
    transition: 0.4s;
    width: 22px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Checkbox active hone par ball ki positioning right side move hogi */
input:checked + .slider-toggle .toggle-ball {
    transform: translateX(24px);
    background-color: #3b82f6; /* Dark mode active hone par ball blue ho jayegi */
}

input:checked + .slider-toggle {
    background-color: #1e293b;
}

/* Light mode support configurations */
body:not(.dark-theme) .slider-toggle {
    background-color: #e2e8f0;
    border-color: #cbd5e1;
}
body:not(.dark-theme) .toggle-ball {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* ======================================================== */
/* 🔍 THEME-VAR SYSTEM: LIGHT & DARK SEARCH GLOW FIX        */
/* ======================================================== */

/* ☀️ 1. Jab website LIGHT mode me ho tab variables ki values */
body:not(.dark-theme) {
    --search-border-color: #0099ff; /* Sky Blue Border */
    --search-glow-color: rgba(0, 153, 255, 0.4); /* Sky Blue Glow */
    --search-bg: #ffffff;
    --search-text: #0f172a;
}

/* 🌙 2. Jab website DARK mode me switch ho tab automatic badalne wali values */
body.dark-theme {
    --search-border-color: #ffffff; /* Pure White Border */
    --search-glow-color: rgba(255, 255, 255, 0.6); /* Pure White Glow */
    --search-bg: #111827;
    --search-text: #ffffff;
}

/* 🚀 3. MAIN SEARCH ENGINE (Jo upar diye variables ko force apply karega) */
.search-container input,
.search-box,
input[type="text"].search-input,
.search-input {
    background-color: var(--search-bg) !important;
    color: var(--search-text) !important;
    border: 2px solid var(--search-border-color) !important;
    
    /* 👈 Yeh line automatic light me sky blue aur dark me white glow degi */
    box-shadow: 0 0 20px var(--search-glow-color) !important;
    
    transition: all 0.25s ease-in-out !important;
}

/* ⚡ 4. FOCUS STATE: Jab click karke type karein tab glow ko teez karne ke liye */
.search-container input:focus,
.search-box:focus,
input[type="text"].search-input:focus,
.search-input:focus {
    outline: none !important;
    border-color: var(--search-border-color) !important;
    
    /* Click karte hi theme ke hisab se glow aur teez ho jayega */
    box-shadow: 0 0 30px var(--search-glow-color), 
                inset 0 1px 4px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* ======================================================== */
/* 🎨 MULTI-COLOR THEME SYSTEM (VARIABLES & BUTTONS)        */
/* ======================================================== */

/* 1. Buttons Ki Alignment (Top Toggle Ke Paas Rakhne Ke Liye) */
.color-theme-switcher {
    position: absolute;
    top: 35px;
    right: 70px; /* 👈 Isko aap apne hisab se left-right adjust kar sakte hain */
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 9999;
}

/* Base Style For Color Dots */
.color-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-btn:hover {
    transform: scale(1.2);
}

/* Active Button Indicator (Jo theme chalu hai uspar border black/blue hoga) */
.color-btn.active {
    transform: scale(1.15);
    border-color: #00ffff !important; /* Active dot par cyan border */
}

/* Individual Dot Colors */
.btn-normal { background-color: #0099ff; }
.btn-red    { background-color: #ff3333; }
.btn-yellow { background-color: #ffcc00; }


/* ======================================================== */
/* 🚀 DYNAMIC COLOR OVERRIDES (CORE ENGINE)                 */
/* ======================================================== */

/* --- A. RED THEME ACTIVE --- */
body[data-theme-color="red"] {
    --search-border-color: #ff3333 !important;
    --search-glow-color: rgba(255, 51, 51, 0.5) !important;
}
/* Red theme me website ke baki elements (buttons, borders, icons) ko red karne ke liye */
body[data-theme-color="red"] .hero-brand-title {
    text-shadow: 0 0 30px rgba(255, 51, 51, 0.5) !important;
}
body[data-theme-color="red"] .app-card:hover,
body[data-theme-color="red"] .slider-card:hover,
body[data-theme-color="red"] .auto-slider-card:hover {
    border-color: #ff3333 !important;
    background: #ff3333 !important;
    background-color: #ff3333 !important;
    box-shadow: 0 8px 25px rgba(255, 51, 51, 0.5) !important;
}

/* --- B. YELLOW THEME ACTIVE --- */
body[data-theme-color="yellow"] {
    --search-border-color: #ffcc00 !important;
    --search-glow-color: rgba(255, 204, 0, 0.5) !important;
}
body[data-theme-color="yellow"] .hero-brand-title {
    text-shadow: 0 0 30px rgba(255, 204, 0, 0.5) !important;
}
body[data-theme-color="yellow"] .app-card:hover,
body[data-theme-color="yellow"] .slider-card:hover,
body[data-theme-color="yellow"] .auto-slider-card:hover {
    border-color: #ffcc00 !important;
    background: #ffcc00 !important;
    background-color: #ffcc00 !important;
    box-shadow: 0 8px 25px rgba(255, 204, 0, 0.5) !important;
}

/* ======================================================== */
/* 🌊 TRENDING MOD SLIDER: DYNAMIC POP-UP WAVE LOOP         */
/* ======================================================== */

/* Target precisely only the cards inside Trending Slider Container */
#trendingSlider .slider-card {
    position: relative;
    transform: translateZ(0);
    will-change: transform, box-shadow;

    /* 🔄 Automatic popup-popdown continuous loop trigger */
    animation: trendingSliderPopWave 4s ease-in-out infinite;
    /* Har card ka delayed sequence matching pointer */
    animation-delay: calc(var(--i) * 0.2s);
    
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.3s ease, 
                border-color 0.3s ease !important;
}

/* 🎥 TRENDING SLIDER KEYFRAMES: Sequential wave pop execution */
@keyframes trendingSliderPopWave {
    0%, 100% {
        transform: scale(1) translateZ(0); /* Normal position */
    }
    30% {
        transform: scale(1.07) translateY(-4px) translateZ(0); /* 👈 Wave hit active state */
        /* Dynamic neon glow color connecting with your active color switcher theme variable */
        box-shadow: 0 12px 25px var(--search-glow-color, rgba(59, 130, 246, 0.25)) !important;
    }
    60%, 80% {
        transform: scale(1) translateZ(0); /* Reset back to standard line layout */
        box-shadow: none;
    }
}

/* 🛑 TRACK HOVER PAUSE: Jab user browser me touch karega to bounce freeze ho jayega */
#trendingSlider:hover .slider-card {
    animation-play-state: paused !important; /* Continuous wave temporarily freeze */
}

/* Hover state interaction alignment matching your primary structure */
#trendingSlider .slider-card:hover {
    transform: scale(1.07) translateY(-4px) translateZ(0) !important;
    box-shadow: 0 12px 25px var(--search-glow-color, rgba(59, 130, 246, 0.35)) !important;
}

/* ======================================================== */
/* 🚀 POPULAR APPS GRID: AUTOMATIC GENTLE FLOATING LOOP     */
/* ======================================================== */

/* 1. Base Target Grid Cards (Aapke grid card ki class ke mutabik) */
.popular-apps-grid .app-card,
.popular-section .app-card,
div[class*="-grid"] .app-card {
    position: relative;
    transform: translateZ(0);
    will-change: transform, box-shadow;
    
    /* 🔄 Automatic Loop Animation Trigger */
    animation: gentleGridFloat 5s ease-in-out infinite;
    
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.3s ease, 
                border-color 0.3s ease !important;
}

/* 2. ⏳ Odd aur Even cards ke delays ko alag kiya taaki sab ek saath upar neeche na hon */
.popular-apps-grid .app-card:nth-child(even),
.popular-section .app-card:nth-child(even),
div[class*="-grid"] .app-card:nth-child(even) {
    animation-delay: 0.5s; /* Even cards thoda ruk ke float honge */
}

.popular-apps-grid .app-card:nth-child(3n),
.popular-section .app-card:nth-child(3n),
div[class*="-grid"] .app-card:nth-child(3n) {
    animation-delay: 1s; /* Hard 3rdrd card row rotation gap */
}

/* 3. 🎥 GENTLE FLOATING & PULSING KEYFRAMES */
@keyframes gentleGridFloat {
    0%, 100% {
        transform: translateY(0) translateZ(0);
        /* Default down shadow overlay */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }
    50% {
        transform: translateY(-5px) translateZ(0); /* 👈 Halka sa smoothly upar air float hoga */
        
        /* 🎨 Background me aapke current color switcher theme ka soft gradient glow pulse */
        box-shadow: 0 12px 25px var(--search-glow-color, rgba(0, 153, 255, 0.15)) !important;
    }
}

/* 4. 🛑 MOUSE HOVER: Jab user click karne ke liye mouse le jaye toh movement normal lock ho jaye */
.popular-apps-grid .app-card:hover,
.popular-section .app-card:hover,
div[class*="-grid"] .app-card:hover {
    animation-play-state: paused !important; /* Continuous floating loop breaks here */
    
    transform: scale(1.04) translateY(-6px) translateZ(0) !important; /* Hover focus state */
    box-shadow: 0 15px 30px var(--search-glow-color, rgba(0, 153, 255, 0.3)) !important;
}

/* ======================================================== */
/* 🖱️ PURE SOLID YELLOW NORMAL CURSOR (DESKTOP ONLY)         */
/* ======================================================== */

/* Sirf computer screens (Windows / Mac) par custom yellow cursor lagane ke liye */
@media (min-width: 1025px) {
    
    /* 1. Normal State: Poori website par arrow cursor Solid Yellow rahega */
    html, body, input, select, textarea {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffcc00' stroke='%23000000' stroke-width='1.2' d='M4.5 3v15.3l4.3-4.1h6.2L4.5 3z'/%3E%3C/svg%3E"), default !important;
    }

    /* 2. Hover State: Jab user kisi link, button ya app card par mouse le jaye, toh pointer hand bhi Yellow ho jaye */
    a, 
    button, 
    .slide-btn, 
    .color-btn, 
    .slider-card, 
    .auto-slider-card, 
    .app-card, 
    [onclick] {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffcc00' stroke='%23000000' stroke-width='1' d='M11.5 3a1.5 1.5 0 0 0-1.5 1.5v7.6L8.4 10.5a1.4 1.4 0 0 0-2 .1 1.4 1.4 0 0 0 .1 2l4 3.7V20a2 2 0 0 0 2 2h3.5a4.5 4.5 0 0 0 4.5-4.5V11a1.5 1.5 0 0 0-1.5-1.5 1.5 1.5 0 0 0-1.5 1.5v-1a1.5 1.5 0 0 0-3 0v-1a1.5 1.5 0 0 0-3 0V4.5A1.5 1.5 0 0 0 11.5 3z'/%3E%3C/svg%3E"), pointer !important;
    }
}

/* 🌟 SAGARMODZ NON-STOP DYNAMIC DIGITAL TICKER STYLING */
.sagar-trust-banner-container {
    width: 100%;
    padding: 0 15px;
    margin: 15px 0 25px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.sagar-trust-banner {
    background: linear-gradient(135deg, #061f10, #0d2e1b); /* Darker Digital Board Background */
    border: 2px solid #22c55e; /* Thicker Glowing Green Neon Border */
    border-radius: 12px;
    padding: 14px 20px; /* Increased padding for better visibility */
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 900px;
    width: 100%;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); /* Neon glow effect on board */
    overflow: hidden;
}

.trust-icon {
    font-size: 1.6rem; /* Bigger Icon */
    z-index: 10;
    background: #061f10;
    padding-right: 8px;
    box-shadow: 10px 0 15px #061f10; /* Blends text behind icon */
}

/* Ticker Wrapper Window */
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    display: flex;
}

/* 🔥 SEAMLESS 100% SMOOTH ANIMATION TRACK */
.ticker-track {
    display: flex;
    white-space: nowrap;
    animation: digitalBoardSeamless 12s linear infinite; /* Speed slightly increased for smooth reading */
    width: max-content;
}

/* 🎯 HIGH ATTENTION BOLD TEXT STYLE */
.trust-text {
    font-family: 'Arial Black', Impact, sans-serif; /* Super Bold Heavy Font */
    font-size: 1.15rem; /* Increased size to capture target audience */
    color: #ffffff;
    margin: 0;
    padding-right: 50px; /* Perfect space gap between text repetitions */
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

/* Neon Green Highlight for Key Keywords */
.trust-text strong {
    color: #22c55e;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(34, 197, 94, 0.6); /* Glowing Text Effect */
}

/* Non-stop loop mathematics without any pause or lag */
@keyframes digitalBoardSeamless {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); } /* Moves exactly half way to start twin cycle */
}

/* Safe interaction pause on hover */
.sagar-trust-banner:hover .ticker-track {
    animation-play-state: paused;
}

/* Mobile Devices Optimization */
@media (max-width: 600px) {
    .sagar-trust-banner {
        padding: 10px 12px;
        border-width: 1.5px;
    }
    .trust-text {
        font-size: 0.95rem; /* Perfectly scaled bold text for mobile screens */
        padding-right: 30px;
    }
    .trust-icon {
        font-size: 1.3rem;
    }
}

/* ======================================================== */
/* 🌐 SAGARMODZ FULL-SIZE SKY BLUE SEO BANNER & AUTO-SWITCH */
/* ======================================================== */
.sagarmodz-seo-mega-banner {
    width: 100%;
    background-color: #e0f2fe; /* Premium Default Sky Blue */
    color: #1e3a8a; /* Deep Blue Text for High Readability */
    padding: 50px 25px;
    box-sizing: border-box;
    border: 3px solid #bae6fd;
    border-radius: 24px; /* Premium Dashboard Box Look */
    margin: 40px auto 20px auto;
    max-width: 1240px;
    font-family: system-ui, -apple-system, sans-serif;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.15);
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

/* 🔴 AUTOMATIC RED THEME SYNC (body attribute matching) */
body[data-theme-color="red"] .sagarmodz-seo-mega-banner {
    background-color: #fef2f2 !important; /* Soft Premium Red Tint */
    border-color: #fecaca !important;
    color: #7f1d1d !important;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.15) !important;
}
body[data-theme-color="red"] .seo-main-title, 
body[data-theme-color="red"] .seo-column h3 {
    color: #dc2626 !important;
}

/* 🟡 AUTOMATIC YELLOW THEME SYNC (body attribute matching) */
body[data-theme-color="yellow"] .sagarmodz-seo-mega-banner {
    background-color: #fefce8 !important; /* Soft Premium Yellow Tint */
    border-color: #fef08a !important;
    color: #713f12 !important;
    box-shadow: 0 10px 30px rgba(234, 179, 8, 0.15) !important;
}
body[data-theme-color="yellow"] .seo-main-title, 
body[data-theme-color="yellow"] .seo-column h3 {
    color: #ca8a04 !important;
}

/* 🔵 AUTOMATIC NORMAL THEME SYNC (body attribute matching) */
body[data-theme-color="normal"] .sagarmodz-seo-mega-banner {
    background-color: #e0f2fe !important;
    border-color: #bae6fd !important;
    color: #1e3a8a !important;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.15) !important;
}
body[data-theme-color="normal"] .seo-main-title, 
body[data-theme-color="normal"] .seo-column h3 {
    color: #0369a1 !important;
}

/* --- STRUCTURED LAYOUT COMPONENTS --- */
.seo-banner-container {
    width: 100%;
}

.seo-header-badge-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.seo-pulse-icon {
    font-size: 1.8rem;
    animation: seoPulse 2s infinite;
}

.seo-main-title {
    color: #0369a1;
    font-size: 1.9rem;
    font-weight: 800;
    margin: 0;
    text-align: center;
    transition: color 0.3s ease;
}

.seo-lead-text {
    font-size: 1.05rem;
    line-height: 1.75;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 35px auto;
    color: #0f172a;
}

.seo-lead-text strong {
    color: #0284c7;
}

.seo-content-separator {
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(2, 132, 199, 0.2), transparent);
    margin: 35px 0;
}

/* --- GAPS & COLUMN GRID --- */
.seo-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px; /* Managed professional spacing gap */
}

.seo-card-inner-box {
    background: rgba(255, 255, 255, 0.65); /* Elegant translucent box overlays */
    padding: 25px;
    border-radius: 16px;
    margin-bottom: 25px; /* Perfect vertical gaps management */
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.seo-column h3 {
    color: #0284c7;
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    border-left: 4px solid currentColor;
    padding-left: 10px;
    transition: color 0.3s ease;
}

.seo-column p {
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 0;
    text-align: justify;
}

.seo-highlight-list, .seo-step-list {
    padding-left: 20px;
    margin: 15px 0 0 0;
}

.seo-highlight-list li, .seo-step-list li {
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 14px;
}

.seo-highlight-list li:last-child, .seo-step-list li:last-child {
    margin-bottom: 0;
}

.seo-highlight-list li strong {
    color: #16a34a; /* Safe green highlight for apps list elements */
}

.seo-tags-cloud {
    font-style: italic;
    color: #475569;
    font-weight: 500;
}

.seo-disclaimer-card {
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    padding: 15px 20px;
}

.seo-disclaimer-card p {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    text-align: center;
}

/* Animations */
@keyframes seoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* 📱 Responsive Mobile Adjustments */
@media (max-width: 900px) {
    .seo-grid-layout { grid-template-columns: 1fr; gap: 20px; }
    .seo-main-title { font-size: 1.4rem; }
    .sagarmodz-seo-mega-banner { padding: 30px 15px; border-radius: 16px; margin: 25px 10px; }
    .seo-card-inner-box { padding: 18px; margin-bottom: 15px; }
}

/* ==========================================================================
   📦 SAGARMODZ PREMIUM WELCOME CARD DESIGN
   ========================================================================== */
.sagar-welcome-card {
    max-width: 600px;
    margin: 30px auto;
    padding: 24px;
    background: #f8fafc; /* Premium Soft Light Background */
    border-left: 5px solid #0066ff; /* Left Side Dynamic Highlight bar */
    border-top: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 102, 255, 0.03);
    box-sizing: border-box;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Hover Pop Animation Effect */
.sagar-welcome-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 102, 255, 0.08);
    background: #ffffff;
}

/* Inside Text Styling */
.sagar-welcome-text {
    margin: 0;
    color: #334155;
    font-size: 14.5px;
    line-height: 1.8;
    font-weight: 600; /* Text Pure Bold Layer */
    font-family: 'Poppins', sans-serif;
}

/* Custom Highlight Keywords */
.sagar-welcome-text .brand-highlight {
    color: #0066ff;
    font-weight: 800;
}

.sagar-welcome-text .keyword-highlight {
    color: #0f172a;
    font-weight: 700;
}

/* 🌙 DARK MODE SYNC MATRIX */
body.dark-theme .sagar-welcome-card,
body.dark .sagar-welcome-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    border-left: 5px solid #0066ff !important; /* Retains accent color in dark mode */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme .sagar-welcome-text,
body.dark .sagar-welcome-text {
    color: #94a3b8 !important;
}

body.dark-theme .sagar-welcome-text .keyword-highlight,
body.dark .sagar-welcome-text .keyword-highlight {
    color: #f8fafc !important;
}