:root { 
            --gold: #FFD700; 
            --gold-glow: rgba(255, 215, 0, 0.4);
            --border: rgba(255, 255, 255, 0.1); 
            --drop-bg: #0a0a0a; 
        }
        
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        body { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; background: #010409; color: #fff; overflow-x: hidden; }

        header { 
            background: rgba(0,0,0,0.95); 
            backdrop-filter: blur(15px); 
            height: 80px; 
            display: flex; 
            align-items: center; 
            position: sticky; 
            top: 0; 
            z-index: 9999; 
            border-bottom: 1px solid var(--border); 
        }

        .navbar-container { 
            width: 95%; 
            max-width: 1600px; 
            margin: 0 auto; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
        }
        
        .logo-box { display: flex; align-items: center; gap: 15px; }
        .logo-text { font-weight: 800; font-size: 22px; text-transform: uppercase; color: #fff; cursor: pointer; white-space: nowrap; }
        .logo-text span { color: var(--gold); }

        /* --- Desktop Nav-Links --- */
          /* --- Desktop Nav-Links (Normal Font Size) --- */
        .nav-links { display: flex; list-style: none; margin: 0; padding: 0; }
        .nav-item { position: relative; padding: 25px 12px; }
        .nav-item > a { 
            color: #fff; 
            text-decoration: none; 
            font-size: 15px; /* Font size normal kora holo */
            font-weight: 600; 
            text-transform: uppercase; 
            display: flex; 
            align-items: center; 
            gap: 5px; 
            transition: 0.3s;
        }
        .nav-item:hover > a { color: var(--gold); }

        /* Desktop Dropdowns */
        .dropdown-box { position: absolute; top: 100%; left: 0; background: var(--drop-bg); min-width: 240px; border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: 0 0 12px 12px; visibility: hidden; opacity: 0; transform: translateY(10px); transition: 0.3s; padding: 10px 0; z-index: 100; box-shadow: 0 15px 40px rgba(0,0,0,0.8); }
        .nav-item:hover .dropdown-box { visibility: visible; opacity: 1; transform: translateY(0); }
        .dropdown-box li { list-style: none; position: relative; }
        .dropdown-box a { color: #eee; padding: 12px 20px; display: flex; justify-content: space-between; text-decoration: none; font-size: 13px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.03); }
        .dropdown-box li:hover > a { background: var(--gold); color: #000; }

        /* Sub-dropdown Side opening */
        .sub-dropdown { position: absolute; left: 100%; top: -5px; background: #111; min-width: 240px; border: 1px solid var(--border); border-radius: 8px; visibility: hidden; opacity: 0; transform: translateX(10px); transition: 0.3s; padding: 10px 0; }
        .dropdown-box li:hover .sub-dropdown { visibility: visible; opacity: 1; transform: translateX(0); }


        /* --- Action Buttons --- */
        .header-action-area { display: flex; align-items: center; gap: 10px; }
        .premium-icon-btn { 
            min-width: 42px; height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: center; 
            gap: 8px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); 
            transition: all 0.3s; position: relative; text-decoration: none; color: #fff; font-size: 13px; font-weight: 600;
        }
        .premium-icon-btn:hover { transform: translateY(-3px); border-color: var(--gold); background: rgba(255, 255, 255, 0.1); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

        .cart-badge-red {
            position: absolute; top: -5px; right: -5px; background: #ff0000; color: #fff; font-size: 10px;
            width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-weight: 800; border: 1.5px solid #000; animation: badgePulse 2s infinite;
        }

        @keyframes badgePulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
            70% { box-shadow: 0 0 0 8px rgba(255, 0, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
        }

        /* --- Burger Menu --- */
        .custom-burger {
            display: none; flex-direction: column; justify-content: space-between; width: 25px; height: 18px;
            cursor: pointer; background: transparent; border: none; padding: 0; z-index: 10002;
        }
        .custom-burger span { display: block; width: 100%; height: 3px; background: #fff; border-radius: 4px; transition: 0.3s; }
        .custom-burger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); background: var(--gold); }
        .custom-burger.active span:nth-child(2) { opacity: 0; }
        .custom-burger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); background: var(--gold); }

        /* --- Mobile Sidebar --- */
/* --- Optimized Side Nav with Luxury Hover --- */
.side-nav { 
    position: fixed; 
    top: 0; 
    left: -320px; 
    width: 300px; 
    height: 100vh; 
    background: #1a1a1a; 
    z-index: 10001; 
    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
    padding: 30px; 
    border-right: 1px solid var(--border); 
    overflow-y: auto; 
}

.side-nav.active { left: 0; }

.side-nav a { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 14px 10px; /* সামান্য প্যাডিং বাড়ানো হলো হোভারের সুবিধার জন্য */
    color: #fff; 
    text-decoration: none; 
    font-weight: 00; 
    border-bottom: 1px solid #111; 
    font-size: 14px; 
    transition: all 0.3s ease; /* ট্রানজিশন যোগ করা হলো */
    position: relative;
}

/* --- মেইন মেনু হোভার ইফেক্ট --- */
.side-nav a:hover {
    color: var(--gold); /* টেক্সট গোল্ডেন হবে */
    background: rgba(255, 215, 0, 0.05); /* হালকা গোল্ডেন আভা ব্যাকগ্রাউন্ডে */
    padding-left: 20px; /* হোভার করলে লেখা সামান্য ডানে সরবে */
}

/* অ্যারো আইকন থাকলে সেটি ঘোরার এনিমেশন */
/* মাউস হোভার করলে ব্যাকগ্রাউন্ড গোল্ড এবং টেক্সট ব্ল্যাক হবে */
.side-nav a:hover {
    background: var(--gold) !important; /* ব্যাকগ্রাউন্ড গোল্ডেন */
    color: #1a1a1a  !important;             /* টেক্সট কালো */
    padding-left: 20px;                 /* সামান্য ডানে সরবে */
}

/* হোভার করলে আইকনের রঙও কালো হয়ে যাবে */
.side-nav a:hover .arrow-icon,
.side-nav a:hover i {
    color: #1a1a1a !important;
    transform: translateX(5px);
}

/* সাব-মেনু হোভার ফিক্স */
.sub-menu-mobile a:hover, .child-menu-mobile a:hover {
    background: var(--gold) !important;
    color: #1a1a1a !important;
    padding-left: 15px;
}

/* মোবাইল সাব-মেনু স্টাইল */
.sub-menu-mobile, .child-menu-mobile { 
    display: none; 
    list-style: none; 
    padding-left: 15px; 
    border-left: 1px solid var(--gold); 
    margin: 5px 0; 
}

.sub-menu-mobile a, .child-menu-mobile a {
    font-size: 13px; 
    padding: 10px 10px;
    border-bottom: none; /* সাব মেনুতে বর্ডার দরকার নেই */
}


.has-dropdown.active > .sub-menu-mobile, 
.has-child-dropdown.active > .child-menu-mobile { 
    display: block; 
}

        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 10000; display: none; backdrop-filter: blur(5px); }

        @media (max-width: 1100px) {
            .nav-links, .login-text-btn { display: none; }
            .custom-burger { display: flex; }
            .logo-text { font-size: 18px; }
        }
    
/* Category result page: hide all home-only sections */
body.category-mode .main-hero-slider,
body.category-mode .category-shortcuts,
body.category-mode .search-section,
body.category-mode .adv-sw-section,
body.category-mode #custom-slider-section,
body.category-mode .trophy-section,
body.category-mode .main-swiper,
body.category-mode .home-only-section{
    display:none!important;
}
body.category-mode .category-product-page{display:block!important;}

@media (max-width:768px){
.logo-box,.logo,.logo-text,.logo-main,.logo-sub{display:none!important;}
.category-shortcuts,.cat-shortcut-grid,.shortcut-grid,.category-icons-section{display:none!important;}
.category-page-title,.category-title,h1.page-title{
font-size:38px!important;
line-height:1!important;
white-space:nowrap!important;
}
.pc-grid,.products-grid{
grid-template-columns:1fr!important;
display:grid!important;
}
.pc-card,.product-card{
width:100%!important;
max-width:100%!important;
}
}

/* ===== Original inline style block separator ===== */

/* মাউস স্ক্রল আরও স্মুথ করতে এটি যোগ করুন */
html {
    scroll-behavior: smooth;
}

/* টেক্সট সিলেকশন কালার গোল্ডেন করতে */
::selection {
    background: #FFD700;
    color: #000;
}

/* পুরো পেজের স্ক্রলবার হাইড করার জন্য */
html, body {
    scrollbar-width: none; /* Firefox-এর জন্য */
    -ms-overflow-style: none; /* Internet Explorer এবং Edge-এর জন্য */
}

/* Chrome, Safari এবং Opera-এর জন্য */
body::-webkit-scrollbar {
    display: none;
}


/* --- HALL OF FAME (TROPHIES) STYLES --- */
.trophy-section { 
    padding: 80px 0; 
    background: radial-gradient(circle at center, #151515 0%, #000 100%); 
    border-top: 1px solid #222; 
    overflow: hidden; 
    position: relative; 
}

/* Track Animation (Infinite Loop) */
.tr-track { 
    display: flex; 
    width: max-content; 
    animation: scrollTr 25s linear infinite; 
    padding: 20px 0; 
}

.tr-track:hover { 
    animation-play-state: paused; /* মাউস নিলে থামবে */
}

@keyframes scrollTr { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

/* Card Design (Glassmorphism) */
.trophy-card { 
    width: 240px; 
    height: 320px; 
    margin: 0 25px; 
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.08); 
    border-radius: 20px; 
    backdrop-filter: blur(10px); 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-end; 
    position: relative; 
    flex-shrink: 0; 
    transition: 0.1s; 
}

/* Glow Effect */
.t-glow { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: radial-gradient(circle, var(--gold-dim) 0%, transparent 70%); 
    opacity: 0; 
    transition: 0.5s; 
    pointer-events: none; 
}

.trophy-card:hover .t-glow { 
    opacity: 1; 
}

/* Image & Text Styling */
.trophy-card img { 
    width: 100%; 
    height: 180px; 
    object-fit: contain; 
    position: absolute; 
    top: 30px; 
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.5)); 
    transition: 0.5s; 
}

.trophy-card:hover img { 
    transform: scale(1.15) translateY(-10px); /* 3D Pop Effect */
}

.t-text { 
    text-align: center; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    width: 100%; 
    padding-top: 15px; 
    margin-top: auto; 
    position: relative; 
    z-index: 2; 
}











/* অতিরিক্ত পোস্টগুলো শুরুতে লুকিয়ে রাখার জন্য */
.hidden-post { 
    display: none !important; 
}

/* বাটন কন্টেইনারের গ্যাপ কমানো */
.view-more-container {
    text-align: center;
    margin-top: 10px !important; /* ২০ বা ৪০ থেকে কমিয়ে ১০ করুন */
    margin-bottom: 1px;
    width: 100%;
}



/* গ্রিডের নিচের দিকের গ্যাপ কমানো */
.pc-grid {
    display: grid;
    /* ৩টি বা ৪টি কার্ডের জন্য এটি আদর্শ */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 20px;
    justify-content: center;
}


/* টাইটেল এবং বাটন এর মাঝের স্পেস কমানো */
.pc-card .info {
    padding: 12px !important; /* ভেতরের খালি জায়গা কমানো হয়েছে */
}

.pc-card .title {
    margin-bottom: 5px !important;
    font-size: 16px;
}





/* বাটন কন্টেইনারের মার্জিন এবং নিচের ডিভাইডারের গ্যাপ কমানো */
.view-more-container {
    text-align: center;
    margin-top: 10px; 
    margin-bottom: 0px !important; /* নিচের দিকের গ্যাপ দূর করবে */
    width: 100%;
}

/* নিচের বর্ডারের গ্যাপ কমানো */
hr {
    border: 0;
    border-top: 1px solid #222;
    margin: 20px 0 !important; /* ৪০ থেকে কমিয়ে ২০ করা হয়েছে */
}



/* ভিউ মোর বাটনের প্রফেশনাল ডিজাইন */
.btn-view-more {
    background: transparent;
    color: #FFD700; /* গোল্ডেন কালার */
    border: 1px solid #FFD700;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}

.btn-view-more:hover {
    background: #FFD700;
    color: #000;
}




/* পিসি বিল্ড বাটনের নিচের গ্যাপ বাড়ানোর জন্য */
#pc-btn-box {
    margin-bottom: 25px !important; /* আপনার প্রয়োজন অনুযায়ী এই পিক্সেল বাড়াতে বা কমাতে পারেন */
}

/* নিচের সেকশন (Premium Software) এর ওপরের গ্যাপ বাড়ানোর জন্য */
.adv-sw-section {
    padding-top: 100px !important; /* এটি ব্যবহার করলে সেকশন দুটির মাঝে অনেকখানি পরিষ্কার ফাঁকা জায়গা তৈরি হবে */
}









/* --- ADVANCED 3D SLIDER STYLES --- */
.adv-sw-section {
    padding: 80px 0;
    background: #050505;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
        url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); /* Texture */
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    overflow: hidden;
    position: relative;
}

/* Titles */
.adv-subtitle { color: var(--gold); letter-spacing: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; display: block; margin-bottom: 5px; opacity: 0.8; }
.adv-title { color: #fff; font-size: 40px; font-weight: 900; margin: 0 0 40px; text-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }

/* Track Wrapper (Side Fades) */
.adv-track-wrapper {
    position: relative;
    width: 100%;
    padding: 30px 0 60px; /* Bottom padding for reflection */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Moving Track */
.adv-track {
    display: flex;
    width: max-content;
    gap: 30px;
    animation: advScroll 40s linear infinite;
    padding-left: 20px;
}

.adv-track:hover {
    animation-play-state: paused; /* Hover করলে থামবে */
}

@keyframes advScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-33.33%); } /* 3 sets data, so moves 1/3 */
}

/* --- THE 3D CARD --- */
.adv-card {
    width: 280px;
    height: 330px; /* আগে 380px ছিল, কমিয়ে 330px করা হলো */
    position: relative;
    flex-shrink: 0;
    perspective: 1000px;
    cursor: pointer;
    -webkit-box-reflect: below 15px linear-gradient(transparent, transparent 60%, rgba(0,0,0,0.4));
}

.adv-content {
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(15px); /* Frosted Glass */
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* Hover Effects */
.adv-card:hover .adv-content {
    transform: translateY(-15px) scale(1.05);
    border-color: var(--gold);
    box-shadow: 0 20px 50px rgba(255, 215, 0, 0.15), inset 0 0 20px rgba(255, 215, 0, 0.05);
}

/* Image Area */
.img-holder {
    width: 100%;
    height: 200px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    border: 1px solid #333;
}

.img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.adv-card:hover .img-holder img {
    transform: scale(1.1);
}

/* Content Area */
.info-holder {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 15px;
    text-align: center;
}

.info-holder h4 {
    color: #fff;
    margin: 0;
    font-size: 16px;
    font-weight: 00;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Advanced Button */
.adv-btn {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 12px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.adv-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent);
    transition: 0.5s;
}

.adv-card:hover .adv-btn::before {
    left: 100%;
}

.adv-card:hover .adv-btn {
    background: var(--gold);
    color: #000;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}






/* ৪. অ্যানিমেটেড হোয়াটসঅ্যাপ ফ্লোটিং বাটন */
.wa-float { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    z-index: 999; 
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.wa-bubble {
    background: #fff; 
    color: #000; 
    padding: 8px 15px; 
    border-radius: 20px 20px 5px 20px;
    font-size: 13px; 
    font-weight: 700; 
    margin-bottom: 15px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: bounce 2s infinite; /* বাবলটি হালকা লাফালাফি করবে */
}

.wa-btn {
    width: 65px; 
    height: 65px; 
    background: #25D366; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 32px; 
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
    position: relative;
    transition: 0.3s;
}

/* বাটনের চারপাশে পালস অ্যানিমেশন */
.wa-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #25D366;
    border-radius: 50%;
    z-index: -1;
    animation: waPulse 2s infinite;
}

/* অ্যানিমেশন কি-ফ্রেম */
@keyframes waPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* হোভার করলে বাটনটি বড় হবে */
.wa-btn:hover {
    transform: scale(1.1);
    background: #20b358;
}





/* --- Ultra Modern Service Hours Style --- */
.hours-day {
    color: var(--gold);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.schedule-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.schedule-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s ease;
}

.schedule-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateX(5px);
}

.schedule-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.fa-sun { color: #FFD700; filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3)); }
.fa-moon { color: #87CEEB; filter: drop-shadow(0 0 5px rgba(135, 206, 235, 0.3)); }

.schedule-item span {
    color: #eee;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}




/* ব্র্যান্ড টাইটেল এবং টেক্সটের গ্যাপ কমানোর সমাধান */
.brand-large {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    
    /* হেডিংয়ের নিচের গ্যাপ কমাতে এটি ব্যবহার করুন */
    margin-bottom: 5px !important; 
    
    line-height: 1.1 !important;
    display: block !important;
}
/* INDIA অংশটি গোল্ডেন করার জন্য */
.brand-large span {
    color: var(--gold) !important;
}

.brand-text {
    /* টেক্সটের ওপরের গ্যাপ কমাতে এটি ব্যবহার করুন */
    margin-top: 0px !important; 
    
    color: #888 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    max-width: 280px;
}

        :root { --bg:#0d0d0d; --card:#141414; --text:#fff; --gold:#FFD700; --green:#2DB742; --blue-btn: #3498db; }
        body { font-family: 'Montserrat', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-bottom:0; overflow-x: hidden; }
        a { text-decoration: none; color: inherit; transition: 0.3s; }
        ul { list-style: none; padding: 0; margin: 0; }
        * { box-sizing: border-box; }

        /* Header & Nav */
        header { background: #000; border-bottom: 1px solid #222; position: sticky; top: 0; z-index: 1000; box-shadow: 0 5px 20px rgba(0,0,0,0.8); height: 80px; display: flex; align-items: center; }
        .container-fluid { width: 96%; max-width: 1600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }





/* --- Ultra Pro Luxury Logo Style --- */
.logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    user-select: none;
    padding: 5px 10px;
    white-space: nowrap; /* লেখা যাতে ভেঙে নিচে না যায় */
}

/* মেইন টেক্সট - মেটালিক গোল্ড ইফেক্ট */
.logo-main {
    background: linear-gradient(to bottom, 
        #ffffff 0%, 
        #FFD700 20%, 
        #b8860b 50%, 
        #FFD700 80%, 
        #ffffff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 2px rgba(184, 134, 11, 0.5));
    position: relative;
    letter-spacing: 0px;
    animation: metallic-shine 3s linear infinite;
}

/* "INDIA" টেক্সট - মডার্ন গ্লাস কাট লুক */
.logo-sub {
    color: #ffffff;
    font-weight: 300; 
    letter-spacing: 2px; 
    font-size: 26px;
    margin-left: 5px;
    padding-left: 10px;
    position: relative;
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
}

/* মাঝখানের স্টাইলিশ ডিভাইডার লাইন */
.logo-sub::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, #FFD700, transparent);
}

/* শাইন এনিমেশন ও হোভার ইফেক্ট আগের মতোই থাকবে... */
.logo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    transition: 0.6s;
}

/* হোভার করলে রিয়েলিস্টিক অ্যানিমেশন */
.logo:hover {
    transform: translateY(-2px);
    letter-spacing: 2px;
}

.logo:hover::after {
    left: 150%;
    transition: 0.8s ease-in-out;
}

.logo:hover .logo-main {
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

/* মেটালিক রিফ্লেকশন অ্যানিমেশন */
@keyframes metallic-shine {
    to { background-position: 200% center; }
}

/* --- মোবাইলের জন্য ১০০% পারফেক্ট ফিক্স (এক লাইনে রাখার জন্য) --- */
@media (max-width: 768px) {
    .logo { 
        font-size: 16px; /* মোবাইলে এক লাইনে আটানোর জন্য সাইজ একটু কমানো হলো */
        padding: 0px 0;
        display: flex !important;
        flex-direction: row !important; /* নিশ্চিত করবে যাতে পাশাপাশি থাকে */
        justify-content: flex-start;
        align-items: center;
    }

    .logo-main {
        font-size: 16px !important;
        letter-spacing: 0px;
    }

    .logo-sub { 
        font-size: 15px !important; /* INDIA লেখাটির সাইজ */
        letter-spacing: 2px !important; /* মোবাইলে গ্যাপ একটু কমানো হলো */
        margin-left: 0px !important; 
        padding-left: px !important;
        display: flex !important;
    }

    .logo-sub::before { 
        height: 18px !important; /* ডিভাইডার লাইন ছোট করা হলো */
        width: 1.5px !important;
    }
}

@keyframes metallic-shine {
    to { background-position: 200% center; }
}



        
/* --- PRO LEVEL NAVIGATION UPGRADE --- */
.nav-menu { 
    display: flex; 
    align-items: center; 
    gap: 30px; /* স্পেসিং একটু বাড়ানো হয়েছে লাক্সারি লুকের জন্য */
}

.menu-item { 
    position: relative; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    perspective: 1000px; /* 3D ইফেক্টের জন্য */
}

.menu-link { 
    color: rgba(255, 255, 255, 0.7); 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: 12px 5px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    letter-spacing: 1.5px; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

/* মাউস নিলে টেক্সট কালার এবং শ্যাডো ইফেক্ট */
.menu-link:hover { 
    color: var(--gold); 
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    transform: translateY(-2px); /* হালকা উপরে উঠবে */
}

/* --- Animated Underline (The Pro Touch) --- */
.menu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transition: width 0.4s ease;
    box-shadow: 0 0 10px var(--gold);
}

.menu-link:hover::after {
    width: 100%;
}

/* ড্রপডাউন থাকলে ছোট অ্যারো আইকন এনিমেশন */
.menu-link i {
    font-size: 10px;
    transition: 0.3s ease;
    opacity: 0.6;
}

.menu-item:hover .menu-link i {
    transform: rotate(180deg);
    color: var(--gold);
    opacity: 1;
}

/* ড্রপডাউন মেনু প্রিমিয়াম লুক (যদি ব্যবহার করেন) */
.dropdown {
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    padding: 15px 0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.menu-item:hover .dropdown {
    transform: translateY(10px);
    opacity: 1;
    visibility: visible;
}
        


/* মোবাইলে নির্দিষ্ট সেকশনগুলো হাইড করার জন্য */
@media (max-width: 768px) {
    .trophy-section, 
    #custom-slider-section { 
    display: none !important; 
    }
}






        .dropdown { position: absolute; top: 40px; left: 0; background: #1a1a1a; min-width: 220px; display: none; flex-direction: column; box-shadow: 0 5px 15px rgba(0,0,0,0.5); border-top: 2px solid var(--gold); z-index: 9999; }
        .menu-item:hover .dropdown { display: flex; }
        .dropdown li { position: relative; border-bottom: 1px solid #333; }
        .dropdown a { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; color: #ccc; font-size: 11px; text-transform: uppercase; font-weight: 600; }
        .dropdown a:hover { background: #222; color: var(--gold); padding-left: 20px; }
        .submenu { position: absolute; top: 0; left: 100%; background: #1a1a1a; min-width: 220px; display: none; box-shadow: 0 5px 15px rgba(0,0,0,0.5); border-left: 1px solid #333; }
        .dropdown li:hover > .submenu { display: flex; flex-direction: column; }

        /* 🔥 NEW HEADER CONTACT STYLE (LIKE SCREENSHOT) 🔥 */
        .header-contact { display: flex; align-items: center; gap: 25px; }
        .contact-box { display: flex; align-items: center; gap: 10px; }
        .icon-box { font-size: 32px; color: #ccc; display: flex; align-items: center; }
        .contact-text { display: flex; flex-direction: column; line-height: 1.3; }
        .c-label { color: var(--gold); font-size: 13px; font-weight: 700; }
        .c-value { color: #fff; font-size: 14px; font-weight: 600; font-family: sans-serif; letter-spacing: 0.5px; }
        .divider { width: 1px; height: 35px; background: #444; }

        /* Slider */
        .slider-wrapper { width: 100%; height: 450px; overflow: hidden; position: relative; margin-bottom: 20px; border-bottom: 1px solid #222; }
        .slides-track { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease-in-out; }
        .slide { min-width: 100%; height: 100%; background-size: cover; background-position: center; }

        /* Search Bar */
        .search-section { text-align: center; margin: 0 auto 30px; padding: 0 20px; }
        .search-box { 
            position: relative; max-width: 600px; margin: 0 auto; 
            background: #1a1a1a; border: 1px solid #333; 
            border-radius: 50px; padding: 5px 20px; display: flex; align-items: center;
            transition: 0.3s;
        }
        .search-box:focus-within { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
        .search-box input { width: 100%; background: transparent; border: none; color: #fff; padding: 10px; font-size: 14px; outline: none; }
        .search-box i { color: #666; font-size: 16px; margin-right: 10px; }

        /* Product Grid */
        .container { width: 94%; max-width: 1300px; margin: 0 auto; }
        .pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-top: 30px; padding-bottom: 60px; }
        
        .pc-card { background: var(--card); border: 1px solid #222; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: all 0.3s ease; cursor: pointer; text-decoration: none; color: inherit; }
        .pc-card:hover { border-color: #444; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        
        .video-thumb { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; }
        .video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition:0.3s; }
        .pc-card:hover .video-thumb img { transform: scale(1.05); }

        .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 45px; color: var(--gold); opacity: 0.9; text-shadow: 0 0 15px rgba(0,0,0,0.8); transition: 0.3s; pointer-events: none; }
        .pc-card:hover .play-icon { transform: translate(-50%, -50%) scale(1.1); color: #fff; }

        .info { padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        
        /* Premium Label */
        .cat-tag { 
            display: inline-flex; align-items: center; gap: 5px;
            background: rgba(255, 215, 0, 0.1); color: var(--gold); 
            font-size: 10px; text-transform: uppercase; letter-spacing: 1px; 
            margin-bottom: 12px; font-weight: 800; padding: 4px 10px; 
            border-radius: 50px; border: 1px solid rgba(255, 215, 0, 0.2);
            width: fit-content;
        }
        .cat-tag i { font-size: 10px; }

        .title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.4; margin-bottom: 10px; min-height: 44px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        
        .price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
        .old-price { text-decoration: line-through; color: #777; font-size: 14px; font-weight: 500; font-family: sans-serif; }
        .new-price { color: var(--gold); font-size: 20px; font-weight: 800; font-family: 'Montserrat', sans-serif; }
        .discount-badge { background: #e74c3c; color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 800; }

        /* Buttons */
        .btn-common {
            display: flex; align-items: center; justify-content: center;
            padding: 14px; border-radius: 8px; font-weight: 800;
            font-size: 13px; text-transform: uppercase; gap: 8px; width: 100%;
            margin-top: auto; letter-spacing: 0.5px; border: none; transition: 0.3s;
        }
        .btn-product-buy { background: var(--gold); color: #000; }
        .btn-product-buy:hover { background: #fff; transform: translateY(-2px); }

        .btn-pc-inquiry { background: var(--green); color: #fff; }
        .btn-pc-inquiry:hover { background: #25a33a; transform: translateY(-2px); }

        /* Footer */
/* --- Updated Footer Style for Perfect Alignment --- */
footer { 
    background: #050505; 
    border-top: 1px solid #222; 
    padding: 80px 0 30px; 
    margin-top: 50px; 
}

.footer-grid { 
    display: grid; 
    /* কলামের চওড়া কন্টেন্ট অনুযায়ী নির্দিষ্ট করা হয়েছে */
    grid-template-columns: 1.5fr 1fr 1.3fr 1fr; 
    gap: 30px; 
    margin-bottom: 40px; 
    align-items: start; /* সব কলাম ওপর থেকে সমানভাবে শুরু হবে */
}

.footer-col h4 { 
    color: var(--gold); 
    margin-bottom: 25px; 
    font-size: 14px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-col p { 
    color: #888; 
    font-size: 13.5px; 
    line-height: 1.8; 
    margin-bottom: 15px; 
}

/* কুইক লিঙ্ক অ্যালাইনমেন্ট */
.footer-col a { 
    color: #bbb; 
    font-size: 13.5px; 
    line-height: 2.2; 
    display: flex; 
    align-items: center;
    gap: 8px;
    transition: 0.3s; 
    cursor: pointer; 
    text-decoration: none;
}

.footer-col a:hover { 
    color: var(--gold); 
    padding-left: 8px; 
}

/* সার্ভিস আওয়ার্স কার্ড স্টাইল (আপনার ছবির মতো) */
.schedule-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 10px;
    
    /* ল্যান্থ কমানোর জন্য নিচের লাইনটি যোগ করুন */
    width: fit-content; /* অথবা width: 220px; দিতে পারেন */
    min-width: 200px;  /* যাতে খুব বেশি ছোট না হয়ে যায় */
}
.schedule-item span {
    color: #eee;
    font-size: 13px;
    font-weight: 700;
}

/* সোশ্যাল আইকন স্টাইল */
.footer-icons { margin-top: 20px; display: flex; gap: 15px; }
.footer-icons i { 
    font-size: 18px; 
    color: #fff; 
    transition: 0.3s; 
}
.footer-icons i:hover { 
    color: var(--gold); 
    transform: translateY(-3px); 
}



/* --- Professional Small Copyright Style --- */
.copyright {
    text-align: center;
    margin-top: 50px; /* ফুটার কলাম থেকে দূরত্ব */
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* ওপরের হালকা বর্ডার */
}

.copyright p {
    font-size: 14px !important; /* ফন্ট অনেক ছোট এবং ক্লিন রাখার জন্য */
    color: #555 !important; /* হালকা ধূসর রঙ */
    letter-spacing: 1.2px; /* অক্ষরগুলোর মাঝে ফাঁকা জায়গা প্রিমিয়াম ফিল দেয় */
    text-transform: none; /* সব বড় হাতের অক্ষর */
    font-weight: 500;
    line-height: 1.8;
    margin: 0;
font-family: 'Poppins', sans-serif;
}

/* মাউস নিলে হালকা উজ্জ্বল হবে */
.copyright p:hover {
    color: #888 !important;
    transition: 0.3s ease;
}



@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* মোবাইলে সব এক লাইনে চলে আসবে */
        text-align: left;
        padding-left: 20px;
    }
}




.cat-shortcut-card {
    cursor: pointer; 
    background: #111; 
    padding: 22px 10px; 
    border-radius: 20px; 
    border: 1px solid #333; 
    width: 125px;
    transition: all 0.3s ease;
}

.cat-shortcut-card:hover {
    border-color: var(--gold);
    transform: translateY(-8px); /* ওপরের দিকে হালকা মুভ করবে */
    background: #181818;
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.1);
}

.cat-shortcut-card i {
    font-size: 30px; 
    color: var(--gold);
    margin-bottom: 10px;
    display: block;
}

.cat-shortcut-card p {
    font-size: 11px; 
    font-weight: 800;
    margin: 0;
    color: #fff;
    letter-spacing: 0.5px;
}








.partner-track-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* অ্যানিমেশন লজিক */
.partner-track {
    display: flex;
    width: max-content;
    gap: 80px;
    animation: partnerScroll 25s linear infinite;
}

.partner-logo {
    height: 45px;
    filter: grayscale(1) brightness(0.6);
    transition: 0.4s;
}

.partner-logo:hover {
    filter: grayscale(0) brightness(1); /* মাউস নিলে অরিজিনাল কালার আসবে */
    transform: scale(1.1);
}

@keyframes partnerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* অর্ধেক পথে গেলে নিরবচ্ছিন্ন লুপ হবে */
}









/* পিসি কার্ড এবং ভিডিও থাম্বনেইল হোভার ইফেক্ট */
.pc-card { 
    background: var(--card); 
    border: 1px solid #222; 
    border-radius: 12px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* স্মুথ এনিমেশন */
    cursor: pointer; 
    position: relative;
}

.pc-card:hover { 
    border-color: var(--gold); 
    transform: translateY(-10px) scale(1.02); /* কার্ডটি উপরে উঠবে এবং বড় হবে */
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 20px rgba(255, 215, 0, 0.1); 
}

.video-thumb { 
    position: relative; 
    width: 100%; 
    aspect-ratio: 16/9; 
    overflow: hidden; 
    background: #000; 
}

.video-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 1; 
    transition: 0.6s ease; /* জুম এনিমেশন টাইম */
}

/* মাউস নিলে ছবির জুম এবং ব্রাইটনেস ইফেক্ট */
.pc-card:hover .video-thumb img { 
    transform: scale(1.15); 
    opacity: 1;
    filter: brightness(1.1);
}

/* প্লে আইকন এনিমেশন */
.play-icon { 
position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) scale(0.8); /* শুরুতে একটু ছোট থাকবে */
    font-size: 50px; 
    color: var(--gold); 
    opacity: 0; /* পুরোপুরি ইনভিজিবল */
    transition: all 0.4s ease; /* স্মুথ এনিমেশন */
    z-index: 2;
    pointer-events: none;
}

.pc-card:hover .play-icon { 
    opacity: 1;
    color: #fff;
    transform: translate(-50%, -50%) scale(1.2);
    text-shadow: 0 0 20px var(--gold);
}





.t-text h4 {
    color: #fff !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #fff, #aaa); /* গ্রেডিয়েন্ট টেক্সট */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
    margin-bottom: 3px !important;
}

.trophy-card:hover .t-text h4 {
    color: var(--gold) !important;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    transform: translateY(-2px);
}

.t-text small {
    color: #555 !important;
    border-top: 1px solid #222;
    padding-top: 5px;
    display: block;
    width: 60%;
    margin: 5px auto 0;
}


/* --- Huhu Picture Style (Upgraded for Hover) --- */
.view-now-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1); /* হুবহু ছবির সাইজ */
    
    /* Picturesque Gradient & Shadow */
    background: linear-gradient(135deg, rgba(85, 75, 75, 0.9), rgba(70, 60, 60, 0.95)); /* ছবির মতো ডার্ক ব্রাউনিশ গ্রেডিয়েন্ট */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* ছবির মতো গভীর শ্যাডো */
    
    color: #fff;
    padding: 16px 40px; /* ছবিতে প্যাডিং একটু বেশি মনে হচ্ছে, সেটি অ্যাডজাস্ট করা হয়েছে */
    border-radius: 8px; /* ছবির মতো আধুনিক রাউন্ডেড কর্নার */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 10;
    
    /* Typography based on picture */
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: right; /* টেক্সট ছবির মতো ডান দিকে অ্যালাইন */
    
    /* Ultra-Thin Picture Border */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* আইকন এবং টেক্সট অ্যালাইনমেন্ট ছবির মতো ঠিক করা */
.view-now-icon .view-now-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 'VIEW NOW' দুই লাইনে আসবে ছবির মতো */
}

.view-now-icon i {
    font-size: 20px; /* ছবির আইকন একটু বড় */
    margin-right: -5px; /* আইকন এবং টেক্সট এর মধ্যে স্পেস ঠিক করা */
    opacity: 0.9;
}

/* কার্ড হোভার করলে ছবির মতো বাটন আসবে */
.pc-card.post-item:hover .view-now-icon {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
}

/* থাম্বনেইল ব্লার ছবির মতোই থাকবে */
.pc-card.post-item:hover .video-thumb img {
    filter: brightness(0.4) blur(6px);
    transform: scale(1.08);
}

/* মাউস বাটনের ওপর নিলে গোল্ডেন গ্রেডিয়েন্ট আসবে (কালো হবে না) */
.view-now-icon:hover {
    background: linear-gradient(135deg, #ffd700, #b8860b); /* রিভার্স গোল্ডেন গ্রেডিয়েন্ট */
    color: #000; /* টেক্সট কালো হবে যাতে গোল্ডের ওপর ফুটে ওঠে */
    border-color: #fff;
    letter-spacing: 3px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5); /* গোল্ডেন গ্লো */
}

/* গোল্ডের ওপর আইকন কালো দেখাবে */
.view-now-icon:hover i {
    color: #000;
    opacity: 1;
}



/* ড্রপডাউন আইটেমের বেসিক স্টাইল */
.dropdown li a {
    font-size: 12px !important;    /* ফন্ট সাইজ বড় করা হয়েছে */
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}

/* হোভার করলে টেক্সট কালার এবং ব্যাকগ্রাউন্ড ইফেক্ট */
.dropdown li:hover > a {
    color: #000 !important; /* টেক্সট কালো হবে যাতে গোল্ডেন ব্যাকগ্রাউন্ডে ফুটে ওঠে */
    padding-left: 25px !important; /* টেক্সট হালকা ডানে সরবে */
}

/* গোল্ডেন ব্যাকগ্রাউন্ড স্লাইডিং এনিমেশন */
.dropdown li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #ffec8b);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: -1;
}

.dropdown li:hover > a::before {
    left: 0;
}

/* বাম পাশে ছোট একটি বর্ডার লাইন */
.dropdown li a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: #fff;
    transition: 0.3s;
}

.dropdown li:hover > a::after {
    height: 70%;
}

/* সাবমেনু আসার সময় হালকা এনিমেশন */
.submenu {
    transform: translateX(10px);
    opacity: 0;
    transition: all 0.4s ease;
}

.dropdown li:hover > .submenu {
    transform: translateX(0);
    opacity: 1;
}




@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; text-align: left; }
    .footer-col { align-items: flex-start; }
}

        /* MODAL STYLES */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 9999; backdrop-filter: blur(8px); justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
        .modal-overlay.active { display: flex; opacity: 1; }
        
        .modal-box { background: #181818; border: 1px solid #333; width: 90%; max-width: 900px; padding: 30px; border-radius: 20px; position: relative; transform: translateY(-20px); transition: transform 0.3s ease; box-shadow: 0 25px 50px rgba(0,0,0,0.6); color: #ddd; max-height: 90vh; overflow-y: auto; }
        .modal-overlay.active .modal-box { transform: translateY(0); }
        
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid #333; padding-bottom: 15px; }
        .modal-title { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
        .close-btn { background: none; border: none; color: #666; font-size: 28px; cursor: pointer; transition: 0.3s; line-height: 1; }
        .close-btn:hover { color: var(--gold); transform: rotate(90deg); }
        
        .modal-content h4 { color: var(--gold); margin-top: 20px; margin-bottom: 10px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
        .modal-content p { font-size: 14px; line-height: 1.8; color: #aaa; margin-bottom: 15px; }
        
        /* About Us List */
        .service-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 15px; }
        .service-list li { font-size: 13px; color: #ccc; line-height: 1.5; display: flex; align-items: start; gap: 10px; background: rgba(255,255,255,0.03); padding: 10px; border-radius: 8px; border: 1px solid #222; }
        .service-list li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--green); font-size: 12px; margin-top: 3px; }
        @media(min-width: 768px) { .service-list { grid-template-columns: 1fr 1fr; } }

        /* Contact Layout (Side by Side) */
        .contact-layout { display: flex; flex-direction: column; gap: 30px; }
        @media(min-width: 768px) { .contact-layout { flex-direction: row; } }
        
        .contact-col { flex: 1; min-width: 0; }
        
        /* Contact Form (Dark Theme) */
        .contact-form-container { margin-top: 10px; }
        .form-group { margin-bottom: 15px; position: relative; }
        .form-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #666; font-size: 14px; }
        .pro-input {
            width: 100%; background: #252525; border: 1px solid #333; 
            padding: 14px 14px 14px 45px; border-radius: 30px; color: #fff; font-size: 14px; outline: none; transition: 0.3s;
        }
        .pro-input:focus { border-color: var(--blue-btn); background: #2a2a2a; }
        .pro-textarea { 
            width: 100%; background: #252525; border: 1px solid #333; 
            padding: 15px; border-radius: 15px; color: #fff; font-size: 14px; outline: none; height: 100px; resize: none; margin-bottom: 15px;
        }
        .pro-textarea:focus { border-color: var(--blue-btn); }
        
        /* WhatsApp Button (Bottom of form) */
        .wa-chat-btn {
            background: #25D366; color: white; width: 100%; padding: 14px; border-radius: 30px;
            text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 14px;
            margin-top: 5px; transition: 0.3s; box-shadow: 0 5px 15px rgba(37,211,102,0.2);
        }
        .wa-chat-btn:hover { background: #20bd5a; transform: translateY(-2px); }
        .wa-chat-btn i { font-size: 18px; }

        @media(max-width: 1250px) { .nav-menu, .header-contact { display: none; } .logo { margin: 0 auto; } .slider-wrapper { height: 200px; } }





.title-badge {
    background: linear-gradient(135deg, #FFD700 0%, #b8860b 100%);
    color: #000;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    border: 1px solid rgba(255,255,255,0.2);
    text-transform: uppercase;
    animation: shine 3s infinite;
}

.title-badge i {
    font-size: 14px;
}

@keyframes shine {
    0% { opacity: 0.9; }
    50% { opacity: 1; transform: scale(1.02); }
    100% { opacity: 0.9; }
}

/* মোবাইল ডিভাইসে চাইলে এটি ছোট রাখতে পারেন বা হাইড করতে পারেন */
@media (max-width: 480px) {
    .title-badge {
        font-size: 10px;
        padding: 4px 10px;
    }
}



.cart-btn-premium {
    background: #1a1a1a;
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #fff;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    transition: 0.3s;
}

/* শপিং কার্ড আইকন এবং ব্যাজ */
.cart-icon-container {
    position: relative;
    display: flex;
    align-items: center;
}

.cart-icon-container i {
    color: #FFD700;
    font-size: 16px;
}

/* লাল গোল ব্যাজ (সংখ্যা) */
.cart-badge-red {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ff0000;
    color: #fff;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    border: 2px solid #1a1a1a;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

/* অটোমেটিক পালস অ্যানিমেশন (কাঁপবে) */
@keyframes cart-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.animated-pulse {
    animation: cart-pulse 3s infinite ease-in-out;
}

/* সাদা আলোর রেখা (Shine Effect) */
.shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-25deg);
    animation: shine-loop 4s infinite;
}

@keyframes shine-loop {
    0% { left: -100%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

.cart-btn-premium:hover {
    border-color: #FFD700;
    background: #222;
}



/* --- Professional HOME Button Style --- */
.home-btn-premium {
    background: rgba(255, 255, 255, 0.03); /* আল্ট্রা গ্লাস লুক */
    border: 1px solid rgba(0, 212, 255, 0.2); /* হালকা নীল বর্ডার */
    color: #ffffff;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* হোম আইকন স্টাইল */
.home-btn-premium i {
    color: #00d4ff; /* ব্রাইট সায়ান/নীল কালার */
    font-size: 15px;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
    transition: transform 0.3s ease;
}

/* হোভার ইফেক্ট */
.home-btn-premium:hover {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.6);
    color: #00d4ff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.15);
}

.home-btn-premium:hover i {
    transform: scale(1.2); /* হোভার করলে আইকন একটু বড় হবে */
}

/* অটোমেটিক শাইন অ্যানিমেশন */
.home-btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transition: 0.6s;
}

.home-btn-premium:hover::before {
    left: 100%;
}

/* মোবাইল রেসপন্সিভ */
@media (max-width: 480px) {
    .home-btn-premium {
        padding: 10px 14px;
    }
    .home-btn-premium span {
        display: none; /* মোবাইলে শুধু আইকন দেখাবে */
    }
}



.header-contact {
    display: flex;
    align-items: center;
    /* Ekhane gap value change koro */
    gap: 15px; /* Gap komate hole 5px koro, barate hole 15px ba 20px koro */
}


/* --- UI/UX SIDEBAR STYLES --- */
.side-nav {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    z-index: 10001;
    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow-y: auto;
    scrollbar-width: none;
}
.side-nav::-webkit-scrollbar { display: none; }

.side-nav.active { left: 0; }

.side-header {
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #111;
}

.side-header span {
    color: #FFD700;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.side-content { padding: 20px 15px; }

/* Home Button Style */
.side-home-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 215, 0, 0.08);
    color: #fff;
    padding: 16px;
    border-radius: 12px;
    font-weight: 700;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    text-decoration: none;
    transition: 0.3s;
}

/* Menu Item & Link */
.side-menu-item {
    border-bottom: 1px solid #151515;
    margin-bottom: 2px;
}

.side-menu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
}

.side-menu-link:hover { color: #FFD700; }

.side-menu-link i.fa-chevron-down {
    font-size: 12px;
    transition: 0.3s;
    opacity: 0.7;
}

/* Submenu Styling */
.side-submenu {
    display: none;
    background: #080808;
    padding: 5px 0 15px 20px;
}

.side-submenu li a {
    display: block;
    padding: 12px;
    color: #888;
    font-size: 13px;
    text-decoration: none;
    border-left: 1px solid #222;
    transition: 0.3s;
}

.side-submenu li a:hover { background: #222; color: var(--gold); padding-left: 20px; }

/* Sidebar ডিফল্ট অবস্থায় বামে লুকানো থাকবে */
.side-nav {
    position: fixed;
    top: 0;
    left: -300px; /* এটি নিশ্চিত করুন */
    width: 300px;
    height: 100vh;
    z-index: 10001;
    transition: 0.4s ease;
}

/* যখন JavaScript দিয়ে 'active' ক্লাস যোগ হবে তখন এটি শো করবে */
.side-nav.active {
    left: 0 !important;
}

/* Overlay ব্যাকগ্রাউন্ড */
.overlay-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    display: none; /* শুরুতে বন্ধ থাকবে */
}

.overlay-bg.active {
    display: block !important;
}


.premium-icon-btn { 
    min-width: 42px; /* Changed from width */
    height: 42px; 
    padding: 0 10px; /* Adds space for text labels */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; /* Adds space between icon and text */
    border-radius: 12px; 
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.1); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappier feel */
    position: relative; 
    text-decoration: none; /* Removes underline from links */
    color: #fff;
    font-size: 14px;
}

.premium-icon-btn:hover { 
    transform: translateY(-5px); 
    border-color: var(--gold); 
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 
                0 0 15px var(--gold-glow),
                inset 0 0 10px rgba(255, 255, 255, 0.05); /* Inner glow */
}


.cart-badge-red {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(135deg, #ff0000, #c40000); /* Gradient for depth */
    color: #fff;
    font-size: 11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1.5px solid rgba(255, 255, 255, 0.3); /* Subtle glass border */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Outer neon glow */
}

@keyframes badgePulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.cart-badge-red {
    animation: badgePulse 2s infinite; /* Always pulsing softly */
}


       :root {
            --neon-cyan: #00f2ff;
        }

        body { 
            background: #010409; 
            margin: 0; 
            padding: 0;
            overflow-x: hidden;
        }

        .slider-wrapper {
            padding-top: 0;
            margin-top: 0;
            display: flex;
            justify-content: center;
            perspective: 1200px;
        }

        .main-swiper {
            width: 100%;
            max-width: 1200px;
            padding-top: 30px !important;
            padding-bottom: 120px !important;
        }

        .swiper-slide {
            width: 450px;
            height: 280px;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* কার্ডের নতুন ক্লাস: my-card */
        .my-card {
            width: 100%;
            height: 100%;
            border-radius: 15px; 
            overflow: hidden;
            border: 1.5px solid rgba(0, 242, 255, 0.2);
            cursor: pointer;
            background: #000;
            position: relative;
            -webkit-box-reflect: below 5px linear-gradient(transparent, transparent, rgba(0,0,0,0.2));
        }

        .my-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .swiper-slide-active {
            transform: scale(1.1) translateZ(50px);
            z-index: 10;
        }

        .swiper-slide:not(.swiper-slide-active) {
            opacity: 0.4;
            filter: blur(2px);
        }

        /* নেভিগেশন বাটন কাস্টমাইজেশন */
        .swiper-button-next, .swiper-button-prev {
            color: var(--neon-cyan) !important;
        }

        .swiper-pagination-bullet-active {
            background: var(--neon-cyan) !important;
            width: 30px;
            border-radius: 5px;
        }

/* ===== Original inline style block separator ===== */

/* ফিক্সড হাইট কন্টেইনার যাতে অন্য এলিমেন্টে সমস্যা না হয় */
        #custom-slider-section {
            position: relative;
            width: 100%;
            min-height: 600px;
            background: #010409;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', sans-serif;
        }

        .bg-blur-layer {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 1;
            filter: blur(80px) brightness(0.2);
            pointer-events: none;
        }
        .bg-blur-layer img {
            width: 100%; height: 100%; object-fit: cover;
            transition: opacity 1s ease-in-out;
        }

        .slider-container {
            position: relative;
            z-index: 5;
            width: 100%;
            max-width: 1200px;
        }

        .swiper {
            width: 100%;
            padding-top: 50px !important;
            padding-bottom: 120px !important; /* রিফ্লেকশনের জায়গা */
        }

        .swiper-slide {
            width: 450px;
            height: 280px;
            transition: 0.6s;
        }

        /* মোবাইল ফ্রেন্ডলি সাইজ */
        @media (max-width: 768px) {
            .swiper-slide { width: 300px; height: 190px; }
            #custom-slider-section { min-height: 450px; }
        }

        .card-inner {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            overflow: hidden;
            border: 1.5px solid rgba(0, 242, 255, 0.3);
            background: #000;
            -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, rgba(0,0,0,0.2));
        }

        .card-inner img {
            width: 100%; height: 100%; object-fit: cover;
            display: block;
        }

        .swiper-slide-active { transform: scale(1.1); z-index: 10; }
        .swiper-slide:not(.swiper-slide-active) { opacity: 0.4; filter: blur(2px); }

        /* কাউন্টার এবং বাটন প্যানেল */
        .controls-ui {
            margin-top: -40px;
            display: flex;
            align-items: center;
            gap: 40px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            padding: 10px 30px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 10;
        }

        .btn-nav {
            cursor: pointer; color: #fff; font-size: 11px;
            letter-spacing: 2px; text-transform: uppercase; opacity: 0.6;
            transition: 0.3s;
        }
        .btn-nav:hover { opacity: 1; color: #00f2ff; }

        .counter-text { font-family: monospace; font-size: 18px; color: #00f2ff; }


header {
    height: 80px;
    display: flex;
    align-items: center;
    background: #000;
    border-bottom: 1px solid #222;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.container-fluid {
    width: 95%; /* কন্টেইনারের উইডথ একটু কমালে দুই পাশে অটো গ্যাপ তৈরি হবে */
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* দুই পাশে ২০ পিক্সেল সেফটি গ্যাপ */
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 15px; /* মেনু আইটেমগুলোর মাঝের দূরত্ব */
    flex-grow: 1;
    justify-content: center; /* মেনুটিকে একদম মাঝখানে রাখবে */
}

.logo {
    margin-left: 10px; /* লোগোটিকে বার আইকন থেকে সামান্য দূরে সরাবে */
    display: flex;
    align-items: center;
    gap: 7px; /* বার আইকন এবং টেক্সট লোগোর মাঝের গ্যাপ */
}

.header-contact {
    display: flex;
    align-items: center;
    gap: 10px; /* আইকনগুলোর মাঝের গ্যাপ */
    min-width: 220px;
    justify-content: flex-end;
}

.premium-icon-btn {
    height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 12px;
}

@media (max-width: 768px) {
    header {
        height: 70px; /* মোবাইলের জন্য হেডারের হাইট কিছুটা কমানো */
    }

    .container-fluid {
        display: flex;
        justify-content: space-between; /* লোগো বামে এবং আইকন ডানে রাখবে */
        align-items: center;
        padding: 0 15px;
        width: 100%;
    }

    /* লোগো এবং বার আইকন বাম পাশে রাখা */
    .logo-section {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-menu-btn {
        display: block !important;
        font-size: 25px;
        color: #fff;
        cursor: pointer;
    }

    .logo {
        font-size: 18px !important;
        min-width: auto;
    }

    /* ডেস্কটপ মেনু মোবাইলে হাইড করা */
    .nav-menu {
        display: none !important;
    }

    /* ডানদিকের আইকনগুলো মোবাইলের জন্য ছোট করা */
    .header-contact {
        display: flex !important;
        gap: 8px;
        min-width: auto;
    }

    .premium-icon-btn {
        height: 35px;
        width: 35px; /* গোল বা ছোট আইকন লুকের জন্য */
        padding: 0;
        justify-content: center;
        border-radius: 8px;
    }

    .premium-icon-btn span {
        display: none; /* মোবাইলে Login লেখা হাইড করে শুধু আইকন দেখাবে */
    }
}




/* --- Desktop & Mobile Consistent Menu Button Only --- */

.mobile-menu-btn {
    display: flex !important; /* সব ডিভাইসে বাটনটি দেখাবে */
    align-items: center !important;
    justify-content: center !important;
    font-size: 25px !important; /* ডেস্কটপ এবং মোবাইলে আইকনের সাইজ হুবহু একই থাকবে */
    color: #fff !important;
    cursor: pointer !important;
    min-width: 45px !important; /* ক্লিকের সুবিধার জন্য একটি ফিক্সড এরিয়া */
    height: 45px !important;
    transition: 0.3s ease;
}

/* হোভার করলে হালকা ইফেক্ট (ঐচ্ছিক) */
.mobile-menu-btn:hover {
    color: var(--gold) !important;
    transform: scale(1.1);
}

/* মোবাইল মিডিয়া কোয়েরিতে অটো-রিসাইজ বন্ধ করা */
@media (max-width: 768px) {
    .mobile-menu-btn {
        font-size: 25px !important; /* মোবাইলেও আইকনটি ছোট হবে না */
        min-width: 45px !important;
        height: 45px !important;
    }
}





<style>
    /* Professional Dark Mode Overlay */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(10, 10, 10, 0.85); /* Deep Dark Overlay */
        backdrop-filter: blur(12px); /* Premium Blur Effect */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    /* Premium Dark Modal Box */
    .modal-box {
        background: #121212; /* Deep Black/Grey */
        width: 90%;
        max-width: 800px;
        border-radius: 20px;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 123, 255, 0.1);
        overflow: hidden;
        animation: premiumSpring 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle Border */
    }

    @keyframes premiumSpring {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    /* Glassy Header */
    .modal-header {
        background: rgba(255, 255, 255, 0.03);
        padding: 25px 35px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-title {
        font-family: 'Poppins', 'Segoe UI', sans-serif;
        font-size: 1.4rem;
        font-weight: 600;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 2px;
        background: linear-gradient(90deg, #007bff, #00d4ff); /* Modern Gradient Title */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .close-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 24px;
        color: #888;
        cursor: pointer;
        width: 45px;
        height: 45px;
        border-radius: 12px;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-btn:hover {
        background: #ff4757;
        color: white;
        transform: rotate(180deg);
        box-shadow: 0 0 15px rgba(255, 71, 87, 0.4);
    }

    /* Dark Content with Modern Typography */
    .modal-content {
        padding: 35px;
        max-height: 550px;
        overflow-y: auto;
        background: #121212;
        scrollbar-width: thin;
        scrollbar-color: #007bff #1e1e1e;
    }

    /* Premium Neon Scrollbar */
    .modal-content::-webkit-scrollbar {
        width: 6px;
    }
    .modal-content::-webkit-scrollbar-track {
        background: #1e1e1e;
    }
    .modal-content::-webkit-scrollbar-thumb {
        background: linear-gradient(#007bff, #00d4ff);
        border-radius: 20px;
    }

    /* Paragraph Card Styling - Dark Theme */
    .modal-content p {
        font-family: 'Segoe UI', Roboto, sans-serif;
        font-size: 14.5px;
        line-height: 1.9;
        color: #b0b0b0; /* Soft Grey for Readability */
        margin-bottom: 20px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.03);
        border-left: 4px solid #007bff; /* Neon Blue Accent */
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    /* Pro-Level Hover Interaction */
    .modal-content p:hover {
        background: rgba(0, 123, 255, 0.05);
        border-left: 4px solid #00d4ff;
        color: #ffffff;
        transform: translateX(8px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    /* Highlighted text in Dark Mode */
    strong {
        color: #00d4ff; /* Neon highlight */
        font-weight: 600;
    }

    /* Footer / Accept Section (Optional but Pro) */
    .modal-footer {
        padding: 20px 35px;
        background: rgba(255, 255, 255, 0.02);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        text-align: right;
    }
    
    
    .nav-item > a i,
.menu-link i,
.nav-links i,
.fa-home,
.fa-palette,
.fa-compact-disc,
.fa-microchip {
    color: #FFD700 !important;
    text-shadow: 0 0 10px rgba(255,215,0,.45);
}

.nav-item:hover > a i,
.menu-link:hover i {
    color: #ffea80 !important;
    text-shadow: 0 0 15px rgba(255,215,0,.8);
}

/* ===== Original inline style block separator ===== */

/* কন্টাক্ট কার্ড স্টাইল */
    .contact-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 10px;
    }

    .info-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 15px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 15px;
        transition: 0.3s;
    }

    .info-card:hover {
        background: rgba(0, 123, 255, 0.1);
        border-color: #007bff;
        transform: translateX(5px);
    }

    .info-card i {
        font-size: 20px;
        color: #00d4ff;
        min-width: 30px;
    }

    .info-text strong {
        display: block;
        color: #00d4ff;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .info-text span {
        color: #fff;
        font-size: 13px;
        font-weight: 500;
    }
    
    .main-hero-slider { 
    width: 100%; 
    height: 450px; 
    overflow: hidden; 
    position: relative; 
    margin-bottom: 20px; 
    border-bottom: 1px solid #222; 
}

@media (max-width: 768px) {
    .main-hero-slider {
        height: 160px; /* মোবাইলের জন্য উচ্চতা কমিয়ে ২০০ পিক্সেল করা হয়েছে */
        margin-bottom: 10px;
    }
    
    .slide {
        background-size: cover;
        background-position: center;
    }
}


/* গ্রিড কন্টেইনার ফিক্স */
.pc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 20px;
    padding: 20px 0;
}

/* মেইন কার্ড ডিজাইন */
.pc-card.post-item {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column; /* সবকিছু লম্বালম্বিভাবে এক কার্ডে থাকবে */
    height: 100%;
    text-decoration: none;
    transition: 0.3s;
}

.pc-card.post-item:hover {
    border-color: #FFD700;
}

/* ইমেজ এরিয়া */
.video-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}

.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* টাইটেল এবং প্রাইস */
.info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.info .title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.new-price { color: #FFD700; font-size: 22px; font-weight: 800; }
.old-price { color: #666; text-decoration: line-through; font-size: 14px; }

/* বাটন গ্রুপ ফিক্স */
.btn-group {
    display: flex;
    gap: 8px;
    margin-top: auto; /* বাটন কার্ডের একদম নিচে রাখবে */
}

/* --- Global Gold Variable --- */
:root {
    --gold: #FFD700;
}

/* ============================================================
   ১. কার্ট বাটন (LIQUID FILL & SPIN EFFECT)
   ============================================================ */
.btn-cart {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #252525 !important;
    border: 1px solid #333 !important;
    color: var(--gold) !important;
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease;
}

/* মাউস নিলে হালকা গ্লো এবং বড় হবে */
.btn-cart:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    transform: scale(1.08);
}

/* আইকন ৩৬০ ডিগ্রি ঘুরবে */
.btn-cart i {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.btn-cart:hover i {
    color: #000 !important;
    transform: rotate(360deg);
}

/* লিকুইড সার্কেল ফিল এনিমেশন */
.btn-cart::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--gold);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: -1;
}

.btn-cart:hover::before {
    width: 300%;
    height: 300%;
}


/* ============================================================
   ২. বাই নাও বাটন (ADVANCED SLIDE FILL & SHINE)
   ============================================================ */
.btn-buy {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: var(--gold);
    color: #000 !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    flex-grow: 1;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s ease;
}

/* হোভার করলে টেক্সট কালার পরিবর্তন */
.btn-buy:hover {
    color: var(--gold) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* আইকন এনিমেশন */
.btn-buy i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-buy:hover i {
    transform: translateX(5px);
}

/* বাম থেকে ডানে গোল্ডেন ফিল স্লাইড */
.btn-buy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #252525 !important; /* এখানে সেমিকোলন ফিক্স করা হয়েছে */
    transition: left 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.btn-buy:hover::before {
    left: 0;
}

/* ===== Original inline style block separator ===== */

/* === INDEX (4) STYLE MENU BAR RESTORE === */
header{height:78px!important;position:sticky!important;top:0!important;z-index:9999!important;background:rgba(0,0,0,.88)!important;backdrop-filter:blur(16px)!important;border-bottom:1px solid rgba(255,255,255,.10)!important;box-shadow:0 10px 35px rgba(0,0,0,.45)!important;display:block!important;}
.navbar{height:78px!important;width:94%!important;max-width:1500px!important;margin:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;}
.logo{font-size:24px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.5px!important;display:flex!important;align-items:center!important;gap:10px!important;color:#fff!important;text-decoration:none!important;white-space:nowrap!important;}
.logo .logo-text span{color:var(--gold)!important;}
.sli-logo-round{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#facc15,#b8860b);color:#000;display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:0 0 20px rgba(255,215,0,.25);font-size:12px;}
.sli-logo-round i{font-size:12px;color:#000!important}.sli-logo-round b{font-size:11px;color:#000!important;}
.nav-links{display:flex!important;align-items:stretch!important;gap:4px!important;list-style:none!important;margin:0!important;padding:0!important;height:78px!important;flex:1!important;justify-content:center!important;}
.nav-links>li{height:78px!important;display:flex!important;align-items:center!important;position:relative!important;}
.nav-links>li>a{height:78px!important;display:flex!important;align-items:center!important;gap:7px!important;padding:0 13px!important;font-size:13px!important;font-weight:900!important;text-transform:uppercase!important;color:#f5f5f4!important;letter-spacing:.015em!important;position:relative!important;text-decoration:none!important;transition:.22s ease!important;}
.nav-links>li>a:after{content:""!important;position:absolute!important;left:12px!important;right:12px!important;bottom:0!important;height:3px!important;background:linear-gradient(90deg,#facc15,#f59e0b,#fde68a)!important;transform:scaleX(0)!important;transform-origin:center!important;transition:.22s ease!important;border-radius:50px 50px 0 0!important;box-shadow:0 -6px 18px rgba(250,204,21,.35)!important;}
.nav-links>li:hover>a,.nav-links>li:focus-within>a{color:#fde68a!important;background:linear-gradient(180deg,rgba(250,204,21,.09),rgba(250,204,21,.02))!important;}
.nav-links>li:hover>a:after,.nav-links>li:focus-within>a:after{transform:scaleX(1)!important;}
.has-sub>a i:last-child{font-size:10px!important;color:#facc15!important;transition:.22s ease!important;}.has-sub:hover>a i:last-child{transform:rotate(180deg)!important;}
.sub-menu{position:absolute!important;top:78px!important;left:0!important;width:282px!important;padding:10px!important;background:linear-gradient(180deg,rgba(24,24,27,.98),rgba(10,10,10,.99))!important;border:1px solid rgba(250,204,21,.20)!important;border-top:3px solid #facc15!important;border-radius:0 0 18px 18px!important;box-shadow:0 28px 80px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06)!important;backdrop-filter:blur(18px)!important;opacity:0!important;visibility:hidden!important;transform:translateY(14px)!important;transition:.23s ease!important;z-index:10000!important;}
.has-sub:hover>.sub-menu,.has-sub:focus-within>.sub-menu{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;}
.sub-item{position:relative!important;display:block!important;border-radius:12px!important;margin:3px 0!important;}
.sub-item>a{position:relative!important;min-height:45px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:0 13px 0 14px!important;color:#f4f4f5!important;font-size:13px!important;font-weight:850!important;text-transform:uppercase!important;letter-spacing:.01em!important;border-radius:12px!important;background:transparent!important;white-space:nowrap!important;text-decoration:none!important;transition:.18s ease!important;}
.sub-item>a:before{content:""!important;width:28px!important;height:28px!important;border-radius:10px!important;background:linear-gradient(135deg,rgba(250,204,21,.20),rgba(245,158,11,.08))!important;border:1px solid rgba(250,204,21,.18)!important;flex:0 0 auto!important;}
.sub-item:hover>a,.sub-item:focus-within>a{background:linear-gradient(90deg,#facc15,#f59e0b)!important;color:#050505!important;transform:translateX(2px)!important;box-shadow:0 10px 24px rgba(245,158,11,.18)!important;}
.child-menu{position:absolute!important;left:calc(100% + 10px)!important;top:-10px!important;width:306px!important;padding:10px!important;background:linear-gradient(180deg,rgba(20,20,20,.99),rgba(9,9,9,.99))!important;border:1px solid rgba(250,204,21,.18)!important;border-left:3px solid #facc15!important;border-radius:18px!important;box-shadow:0 30px 85px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06)!important;opacity:0!important;visibility:hidden!important;transform:translateX(14px)!important;transition:.23s ease!important;z-index:10001!important;}
.sub-item:hover>.child-menu,.sub-item:focus-within>.child-menu{opacity:1!important;visibility:visible!important;transform:translateX(0)!important;}
.child-menu a{min-height:44px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:0 13px!important;color:#e5e7eb!important;font-size:13px!important;font-weight:800!important;text-transform:uppercase!important;border-radius:12px!important;background:transparent!important;white-space:nowrap!important;text-decoration:none!important;transition:.18s ease!important;}
.child-menu a:hover{background:rgba(250,204,21,.12)!important;color:#fde68a!important;box-shadow:inset 3px 0 0 #facc15!important;}
.header-actions{display:flex!important;gap:10px!important;align-items:center!important;}
.header-search{height:42px;width:220px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);border-radius:12px;display:flex;align-items:center;gap:8px;padding:0 12px;}
.header-search input{width:100%;background:transparent;border:0;outline:0;color:#fff;font-size:13px;}.header-search i{color:#facc15;}
.icon-btn{height:42px!important;padding:0 14px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(255,255,255,.06)!important;border-radius:12px!important;display:flex!important;align-items:center!important;gap:8px!important;font-size:13px!important;font-weight:700!important;color:#fff!important;text-decoration:none!important;transition:.3s!important;position:relative!important;}.icon-btn:hover{border-color:var(--gold)!important;color:var(--gold)!important;}
.burger{display:none;height:42px;width:42px;border:1px solid rgba(255,255,255,.10);background:#111;color:#fff;border-radius:12px;font-size:18px;}
.side-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.side-brand{font-weight:900;color:#fff;text-transform:uppercase}.side-subtitle{font-size:11px;color:#facc15;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}.side-close{height:38px;width:38px;border:1px solid rgba(255,255,255,.12);background:#0b0b0b;color:#fff;border-radius:12px}.side-menu-list{display:flex;flex-direction:column;gap:8px}.side-link,.side-cat-main,.side-sub-main,.side-view-all,.side-child-link{width:100%;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:13px 14px!important;border-radius:13px!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(255,255,255,.04)!important;color:#fff!important;text-decoration:none!important;font-size:13px!important;font-weight:800!important;text-transform:uppercase!important}.side-cat-main,.side-sub-main{cursor:pointer}.side-link:hover,.side-cat-main:hover,.side-sub-main:hover,.side-view-all:hover,.side-child-link:hover{background:linear-gradient(90deg,#facc15,#f59e0b)!important;color:#050505!important}.side-submenu,.side-childmenu{display:none;padding:8px 0 8px 12px;border-left:1px solid rgba(250,204,21,.45);margin:8px 0 8px 8px}.side-sub-block,.side-cat-block{display:block}.side-view-all,.side-child-link{font-size:12px!important;padding:11px 12px!important}
@media(max-width:1150px){.nav-links{display:none!important}.burger{display:block!important}.header-search{width:180px}.side-nav{left:-330px!important}.side-nav.active{left:0!important}}
@media(max-width:768px){.logo .logo-text{font-size:16px!important}.sli-logo-round{width:36px;height:36px}.header-search{display:none}.icon-btn span{display:none}.navbar{width:96%!important}.side-nav{width:310px!important}}

/* ===== Original inline style block separator ===== */

/* ===== INDEX (4) TOTAL HEADER SAME STYLE FORCE ===== */
header{
    height:78px!important;position:sticky!important;top:0!important;z-index:9999!important;
    background:rgba(0,0,0,.88)!important;backdrop-filter:blur(16px)!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;box-shadow:0 10px 35px rgba(0,0,0,.45)!important;
    display:block!important;
}
.navbar{height:78px!important;width:94%!important;max-width:1500px!important;margin:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;}
.logo{display:flex!important;align-items:center!important;gap:10px!important;font-family:'Plus Jakarta Sans',Arial,sans-serif!important;font-size:24px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.5px!important;color:#fff!important;text-decoration:none!important;white-space:nowrap!important;padding:0!important;margin:0!important;max-width:none!important;}
.logo:hover{transform:none!important;letter-spacing:.5px!important}.logo:after{display:none!important}.logo span{color:inherit!important}.logo .logo-text{display:inline-flex!important;align-items:center!important;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;filter:none!important;animation:none!important;font-size:24px!important;font-weight:900!important;letter-spacing:.5px!important;max-width:none!important;}
.logo .logo-text span{color:#FFD700!important;-webkit-text-fill-color:#FFD700!important;}
.sli-logo-round{width:44px!important;height:44px!important;min-width:44px!important;border-radius:16px!important;background:linear-gradient(135deg,#fff7bf,#f7c948 45%,#f59e0b)!important;color:#050505!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative!important;box-shadow:0 0 0 7px rgba(247,201,72,.08),0 14px 32px rgba(247,201,72,.20)!important;overflow:hidden!important;}
.sli-logo-round i{font-size:12px!important;position:absolute!important;top:7px!important;left:50%!important;transform:translateX(-50%)!important;color:#050505!important}.sli-logo-round b{font-size:13px!important;font-weight:950!important;margin-top:12px!important;color:#050505!important;line-height:1!important}
.nav-links{display:flex!important;align-items:stretch!important;gap:4px!important;height:78px!important;list-style:none!important;margin:0!important;padding:0!important;}
.nav-links>li{height:78px!important;display:flex!important;align-items:center!important;position:relative!important;padding:0!important;margin:0!important;}
.nav-links>li>a{height:78px!important;display:flex!important;align-items:center!important;gap:7px!important;padding:0 13px!important;color:#f5f5f4!important;font-size:13px!important;font-weight:850!important;letter-spacing:.015em!important;text-transform:uppercase!important;text-decoration:none!important;position:relative!important;overflow:hidden!important;background:transparent!important;border:0!important;}
.nav-links>li>a:before{content:""!important;position:absolute!important;inset:12px 4px!important;border-radius:16px!important;background:linear-gradient(135deg,rgba(250,204,21,.16),rgba(255,255,255,.03))!important;border:1px solid rgba(250,204,21,.12)!important;opacity:0!important;transform:scale(.92)!important;transition:.22s ease!important;z-index:-1!important;}
.nav-links>li:hover>a:before,.nav-links>li:focus-within>a:before{opacity:1!important;transform:scale(1)!important;}
.nav-links>li>a:after{content:""!important;position:absolute!important;left:14px!important;right:14px!important;bottom:0!important;height:2px!important;background:linear-gradient(90deg,transparent,#facc15,#f59e0b,#facc15,transparent)!important;transform:scaleX(0)!important;transform-origin:center!important;transition:.22s ease!important;border-radius:50px 50px 0 0!important;box-shadow:0 0 20px rgba(250,204,21,.55)!important;}
.nav-links>li:hover>a,.nav-links>li:focus-within>a{color:#facc15!important;background:transparent!important;text-shadow:none!important;transform:none!important;}
.nav-links>li:hover>a:after,.nav-links>li:focus-within>a:after{transform:scaleX(1)!important}.has-sub>a i.fa-chevron-down{font-size:10px!important;color:#facc15!important;transition:.22s ease!important}.has-sub:hover>a i.fa-chevron-down{transform:rotate(180deg)!important}.menu-icon-home{color:#facc15!important}
.sub-menu{position:absolute!important;top:72px!important;left:0!important;width:300px!important;padding:12px!important;background:radial-gradient(circle at 15% 0%,rgba(250,204,21,.13),transparent 34%),linear-gradient(180deg,rgba(18,18,18,.98),rgba(3,3,3,.99))!important;border:1px solid rgba(250,204,21,.24)!important;border-top:1px solid rgba(250,204,21,.35)!important;border-radius:20px!important;box-shadow:0 32px 90px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.08)!important;opacity:0!important;visibility:hidden!important;transform:translateY(18px) scale(.98)!important;transition:.23s ease!important;z-index:10000!important;backdrop-filter:blur(18px)!important;display:block!important;}
.has-sub:hover>.sub-menu,.has-sub:focus-within>.sub-menu{opacity:1!important;visibility:visible!important;transform:translateY(0) scale(1)!important;}
.sub-menu:before{content:""!important;position:absolute!important;top:-8px!important;left:34px!important;width:14px!important;height:14px!important;background:#111!important;border-left:1px solid rgba(250,204,21,.28)!important;border-top:1px solid rgba(250,204,21,.28)!important;transform:rotate(45deg)!important;border-radius:3px!important;z-index:1!important;}
.sub-item{position:relative!important;display:block!important;margin:3px 0!important;border-radius:14px!important;padding:0!important;}
.sub-item>a{position:relative!important;min-height:48px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:0 12px!important;border-radius:14px!important;color:#f7f7f7!important;font-size:13px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.01em!important;background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.015))!important;border:1px solid rgba(255,255,255,.055)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;white-space:nowrap!important;text-decoration:none!important;transition:.18s ease!important;}
.sub-item>a:before{content:"\f07b"!important;font-family:"Font Awesome 6 Free"!important;font-weight:900!important;width:34px!important;height:34px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;color:#facc15!important;background:linear-gradient(135deg,rgba(250,204,21,.20),rgba(245,158,11,.08))!important;border:1px solid rgba(250,204,21,.18)!important;border-radius:12px!important;flex:0 0 auto!important;}
.sub-item:hover>a,.sub-item:focus-within>a{background:linear-gradient(90deg,#facc15,#f59e0b)!important;color:#050505!important;transform:translateX(2px)!important;box-shadow:0 10px 24px rgba(245,158,11,.18)!important;}
.sub-item:hover>a:before{color:#050505!important;background:rgba(5,5,5,.13)!important}.sub-item>a i{font-size:11px!important;margin-left:auto!important;color:inherit!important;}
.child-menu{position:absolute!important;left:calc(100% + 10px)!important;top:-10px!important;width:306px!important;padding:10px!important;background:linear-gradient(180deg,rgba(20,20,20,.99),rgba(9,9,9,.99))!important;border:1px solid rgba(250,204,21,.18)!important;border-left:3px solid #facc15!important;border-radius:18px!important;box-shadow:0 30px 85px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.06)!important;backdrop-filter:blur(18px)!important;opacity:0!important;visibility:hidden!important;transform:translateX(14px)!important;transition:.23s ease!important;z-index:10001!important;display:block!important;}
.sub-item:hover>.child-menu,.sub-item:focus-within>.child-menu{opacity:1!important;visibility:visible!important;transform:translateX(0)!important}.child-menu:before{content:""!important;position:absolute!important;left:-9px!important;top:30px!important;width:15px!important;height:15px!important;background:#facc15!important;transform:rotate(45deg)!important;border-radius:3px!important;box-shadow:0 0 18px rgba(250,204,21,.45)!important;}
.child-menu a{min-height:44px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:0 13px!important;color:#e5e7eb!important;font-size:13px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.01em!important;border-radius:12px!important;border-bottom:0!important;background:transparent!important;white-space:nowrap!important;transition:.18s ease!important;text-decoration:none!important;}
.child-menu a:before{content:""!important;width:24px!important;height:24px!important;border-radius:9px!important;background:rgba(250,204,21,.10)!important;border:1px solid rgba(250,204,21,.16)!important;flex:0 0 auto!important}.child-menu a:hover{background:rgba(250,204,21,.12)!important;color:#fde68a!important;padding-left:16px!important;box-shadow:inset 3px 0 0 #facc15!important}.child-menu a i{font-size:10px!important;color:#facc15!important;}
.header-actions{display:flex!important;gap:10px!important;align-items:center!important;margin:0!important}.header-search,.icon-btn,.burger{height:42px!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035))!important;border:1px solid rgba(255,255,255,.11)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;color:#fff!important}.header-search{width:285px!important;display:flex!important;align-items:center!important;gap:8px!important;padding:0 14px!important}.header-search i{color:#9ca3af!important;font-size:13px!important}.header-search input{width:100%!important;background:transparent!important;border:0!important;outline:0!important;color:#fff!important;font-size:13px!important;font-weight:750!important;padding:0!important}.header-search:focus-within{border-color:rgba(247,201,72,.62)!important;box-shadow:0 0 0 5px rgba(247,201,72,.10),inset 0 1px 0 rgba(255,255,255,.10)!important}.icon-btn{padding:0 14px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-size:13px!important;font-weight:800!important;text-transform:none!important;text-decoration:none!important}.icon-btn:hover{transform:translateY(-1px)!important;border-color:rgba(245,200,76,.42)!important;box-shadow:0 14px 32px rgba(0,0,0,.25),0 0 0 4px rgba(245,200,76,.08)!important;color:#FFD700!important}.burger{display:none!important;width:42px!important;min-width:42px!important;padding:0!important;align-items:center!important;justify-content:center!important;font-size:18px!important;cursor:pointer!important}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75)!important;z-index:9998!important;backdrop-filter:blur(5px)!important}.overlay.active{display:block!important}.side-nav{position:fixed!important;top:0!important;left:-330px!important;width:310px!important;height:100vh!important;z-index:9999!important;padding:22px!important;transition:.35s!important;border-right:1px solid rgba(255,255,255,.10)!important;overflow-y:auto!important;background:radial-gradient(circle at 20% 0%,rgba(247,201,72,.16),transparent 32%),linear-gradient(180deg,#111114,#050506)!important}.side-nav.active{left:0!important}.side-panel-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding-bottom:18px!important;margin-bottom:14px!important;border-bottom:1px solid rgba(247,201,72,.18)!important}.side-brand{font-size:20px!important;font-weight:950!important;color:#fff!important}.side-subtitle{font-size:11px!important;color:#f7c948!important;text-transform:uppercase!important;letter-spacing:.14em!important;margin-top:4px!important}.side-close{width:38px!important;height:38px!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.06)!important;color:#fff!important}.side-menu-list{display:flex!important;flex-direction:column!important;gap:8px!important}.side-link,.side-cat-main,.side-sub-main,.side-child-link,.side-view-all{width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:13px 12px!important;border-radius:18px!important;background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.10)!important;color:#f4f4f5!important;text-decoration:none!important;font-size:13px!important;font-weight:850!important;text-transform:uppercase!important;line-height:1.2!important}.side-cat-main,.side-sub-main{cursor:pointer!important;text-align:left!important}.side-cat-block.open>.side-cat-main,.side-sub-block.open>.side-sub-main{background:linear-gradient(135deg,#fff1a8,#f7c948,#f59e0b)!important;color:#050505!important}.side-submenu,.side-childmenu{display:none!important;flex-direction:column!important;gap:7px!important;margin:8px 0 8px 12px!important;padding-left:10px!important;border-left:1px solid rgba(247,201,72,.28)!important}.side-cat-block.open>.side-submenu,.side-sub-block.open>.side-childmenu{display:flex!important}.side-sub-main,.side-child-link,.side-view-all{font-size:12px!important;padding:11px 10px!important}.side-view-all{color:#f7c948!important}
@media(max-width:1200px){.nav-links>li>a{padding:0 8px!important;font-size:11px!important}.header-search{width:220px!important}}
@media(max-width:1050px){header,.navbar{height:70px!important}.nav-links{display:none!important}.header-search{display:none!important}.burger{display:inline-flex!important}.navbar{width:94%!important}.logo .logo-text{font-size:18px!important}.sli-logo-round{width:42px!important;height:42px!important;min-width:42px!important}}
@media(max-width:768px){header,.navbar{height:64px!important}.navbar{width:94%!important}.logo{font-size:13px!important;max-width:calc(100vw - 118px)!important}.logo .logo-text{font-size:18px!important;max-width:172px!important;overflow:hidden!important;text-overflow:ellipsis!important}.sli-logo-round{width:38px!important;height:38px!important;min-width:38px!important}.icon-btn,.burger{width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;border-radius:14px!important}.icon-btn span{display:none!important}}

@media (max-width: 768px) {
    .logo-box{
        align-items: center !important;
    }

    .logo .logo-text{
        font-size: 18px !important;
        max-width: 172px !important;
        transform: translateY(5px) !important;
    }
}
@media(max-width:360px){.logo .logo-text{max-width:130px!important}}

/* ===== Original inline style block separator ===== */

/* ===== Category Result Page Like User 2nd Screenshot ===== */
body{background:radial-gradient(circle at top left,rgba(247,201,72,.08),transparent 28%),#050505!important;}
.category-product-page{width:94%!important;max-width:1500px!important;margin:0 auto!important;padding:54px 0 26px!important;}
.category-page-head{
    width:100%!important;
    border-radius:28px!important;
    background:linear-gradient(135deg,rgba(247,201,72,.075),rgba(255,255,255,.028))!important;
    border:1px solid rgba(247,201,72,.24)!important;
    box-shadow:0 28px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06)!important;
    padding:34px 36px 30px!important;
    margin:18px 0 32px!important;
    text-align:left!important;
}
.category-page-head h1{
    font-size:clamp(34px,4.2vw,56px)!important;
    line-height:1.02!important;
    font-weight:950!important;
    color:#FFD93D!important;
    text-transform:uppercase!important;
    letter-spacing:-.055em!important;
    margin:0 0 14px!important;
    text-shadow:0 0 28px rgba(247,201,72,.18)!important;
}
.category-page-head p{color:#fff!important;font-weight:950!important;margin:0 0 18px!important;text-transform:uppercase!important;letter-spacing:.16em!important;font-size:13px!important;}
.category-gold-line{width:100%!important;height:2px!important;border-radius:999px!important;background:linear-gradient(90deg,#f7c948,rgba(247,201,72,.65),transparent)!important;margin:16px 0 26px!important;box-shadow:0 0 20px rgba(247,201,72,.32)!important;}
.back-home-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-height:48px!important;padding:0 24px!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;border:1px solid rgba(247,201,72,.30)!important;color:#f7c948!important;font-size:13px!important;font-weight:950!important;text-transform:uppercase!important;box-shadow:0 14px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06)!important;}
.back-home-btn:hover{background:linear-gradient(135deg,#fff1a8,#f7c948,#f59e0b)!important;color:#050505!important;}
.category-product-page .grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important;margin-top:0!important;align-items:stretch!important;}
.card.product-card{background:linear-gradient(180deg,#1a1a1a,#0b0b0b)!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:22px!important;overflow:hidden!important;box-shadow:0 16px 38px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04)!important;transition:.35s!important;display:flex!important;flex-direction:column!important;}
.card.product-card:hover{transform:translateY(-8px)!important;border-color:rgba(247,201,72,.55)!important;box-shadow:0 26px 65px rgba(0,0,0,.62),0 0 0 1px rgba(247,201,72,.12)!important;}
.card.product-card .product-view-link{display:block!important;}
.thumb-wrap{position:relative!important;aspect-ratio:16/10!important;overflow:hidden!important;background:#000!important;border-bottom:1px solid rgba(255,255,255,.06)!important;margin:14px 14px 0!important;border-radius:16px!important;}
.thumb-wrap img{width:100%!important;height:100%!important;object-fit:cover!important;transition:.45s!important;display:block!important;}
.card.product-card:hover .thumb-wrap img{filter:brightness(.66) saturate(1.1)!important;transform:scale(1.06)!important;}
.view-now{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%) scale(.92)!important;opacity:0!important;transition:.35s!important;background:linear-gradient(135deg,#fff1a8,#f7c948,#f59e0b)!important;color:#070707!important;border:0!important;border-radius:999px!important;padding:12px 22px!important;font-size:11px!important;font-weight:950!important;white-space:nowrap!important;box-shadow:0 16px 36px rgba(245,158,11,.28)!important;}
.card.product-card:hover .view-now{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important;}
.product-card .info{padding:14px 18px 20px!important;display:flex!important;flex-direction:column!important;flex:1!important;}
.product-card .cat-tag{display:inline-flex!important;align-items:center!important;gap:7px!important;color:#f7c948!important;background:rgba(247,201,72,.12)!important;border:1px solid rgba(247,201,72,.28)!important;border-radius:999px!important;padding:6px 10px!important;font-size:9px!important;font-weight:950!important;text-transform:uppercase!important;margin:0 0 10px!important;width:max-content!important;max-width:100%!important;}
.product-card .title{display:block!important;color:#fff!important;font-size:15px!important;font-weight:950!important;line-height:1.38!important;min-height:42px!important;margin-bottom:9px!important;text-transform:uppercase!important;}
.product-card .price-row{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;margin:0 0 14px!important;}
.product-card .old-price{order:0;text-decoration:line-through!important;color:#8a8a8a!important;font-size:13px!important;font-weight:700!important;}
.product-card .new-price{order:1;color:#f7c948!important;font-size:24px!important;font-weight:950!important;text-shadow:0 0 18px rgba(247,201,72,.18)!important;}
.product-card .discount-badge{order:2;border-radius:999px!important;padding:4px 8px!important;background:rgba(247,201,72,.12)!important;color:#fff1a8!important;border:1px solid rgba(247,201,72,.28)!important;font-size:9px!important;font-weight:950!important;}
.product-action-row{display:grid!important;grid-template-columns:1fr 48px!important;gap:10px!important;align-items:center!important;margin-top:auto!important;}
.product-action-row .btn{display:flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-height:48px!important;border-radius:999px!important;background:linear-gradient(135deg,#fff1a8,#f7c948 48%,#f59e0b)!important;color:#050505!important;font-size:12px!important;font-weight:950!important;text-transform:uppercase!important;box-shadow:0 15px 30px rgba(245,158,11,.20),inset 0 1px 0 rgba(255,255,255,.33)!important;text-decoration:none!important;}
.product-action-row .add-cart-btn{width:48px!important;padding:0!important;background:rgba(247,201,72,.10)!important;color:#f7c948!important;border:1px solid rgba(247,201,72,.32)!important;box-shadow:none!important;}
.product-hidden-more{display:none!important;}
body.category-mode .category-product-page .product-card:not(.product-hidden-more){display:flex!important;}
.view-more-post-wrap{text-align:center!important;margin:30px 0 0!important;}
.view-more-post-btn{border:0!important;border-radius:999px!important;padding:14px 28px!important;background:linear-gradient(135deg,#fff1a8,#f7c948,#f59e0b)!important;color:#050505!important;font-weight:950!important;text-transform:uppercase!important;cursor:pointer!important;box-shadow:0 15px 30px rgba(245,158,11,.22)!important;}
@media(max-width:1200px){.category-product-page .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media(max-width:768px){.category-product-page{width:94%!important;padding-top:22px!important}.category-page-head{padding:22px!important;border-radius:22px!important;margin:14px 0 22px!important}.category-page-head h1{font-size:28px!important}.category-page-head p{font-size:11px!important}.category-product-page .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.thumb-wrap{margin:10px 10px 0!important;aspect-ratio:1/1!important}.product-card .info{padding:10px!important}.product-card .cat-tag{font-size:8px!important;padding:5px 8px!important}.product-card .title{font-size:12px!important;min-height:36px!important}.product-card .new-price{font-size:17px!important}.product-card .old-price{font-size:11px!important}.product-action-row{grid-template-columns:1fr 38px!important;gap:7px!important}.product-action-row .btn{height:38px!important;min-height:38px!important;font-size:10px!important;padding:8px!important}.product-action-row .add-cart-btn{width:38px!important}.view-now{display:none!important}}

/* ===== Original inline style block separator ===== */

/* Header menu icons full golden */
.nav-links i,
.nav-item > a i,
.menu-link i,
.header-actions i,
.icon-btn i,
.fa-home,
.fa-palette,
.fa-compact-disc,
.fa-microchip{
    color:#FFD700 !important;
    text-shadow:0 0 10px rgba(255,215,0,.45) !important;
}
.nav-links a:hover i,
.nav-item > a:hover i,
.menu-link:hover i{
    color:#ffef8a !important;
    text-shadow:0 0 16px rgba(255,215,0,.85) !important;
}

/* Category page compact top like screenshot */
body.category-mode{
    background:#050505 !important;
}
body.category-mode header{
    margin-bottom:0 !important;
}
body.category-mode .category-product-page{
    width:96% !important;
    max-width:1720px !important;
    margin:0 auto !important;
    padding:0 0 28px 0 !important;
}
body.category-mode .category-page-head{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 0 22px 0 !important;
    padding:0 0 0 0 !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    text-align:left !important;
    display:block !important;
    position:relative !important;
}
body.category-mode .category-page-head::before,
body.category-mode .category-page-head::after{
    content:none !important;
    display:none !important;
}
body.category-mode .category-page-head h1{
    margin:0 0 8px 0 !important;
    padding:0 !important;
    font-size:clamp(52px,6.8vw,92px) !important;
    line-height:.88 !important;
    font-weight:950 !important;
    letter-spacing:-.065em !important;
    color:#ffffff !important;
    text-transform:uppercase !important;
    text-shadow:none !important;
}
body.category-mode .category-page-head p{
    margin:0 0 7px 0 !important;
    padding:0 !important;
    color:#f4f4f5 !important;
    font-size:13px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
}
body.category-mode .category-gold-line{
    display:block !important;
    width:100% !important;
    height:1px !important;
    margin:0 0 16px 0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(90deg,#f7c948 0%,rgba(247,201,72,.65) 55%,rgba(247,201,72,.10) 100%) !important;
    box-shadow:none !important;
}
body.category-mode .back-home-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    min-height:44px !important;
    padding:0 22px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#fff1a8,#f7c948,#f59e0b) !important;
    border:0 !important;
    color:#050505 !important;
    font-size:13px !important;
    font-weight:950 !important;
    text-transform:uppercase !important;
    box-shadow:0 12px 28px rgba(245,158,11,.22) !important;
    text-decoration:none !important;
}
body.category-mode .back-home-btn i{
    color:#050505 !important;
    text-shadow:none !important;
}
body.category-mode .back-home-btn:hover{
    transform:translateY(-1px) !important;
    filter:brightness(1.04) !important;
}

/* Keep product grid close to header */
body.category-mode .category-product-page .grid{
    margin-top:24px !important;
}

@media(max-width:768px){
    body.category-mode .category-product-page{
        width:94% !important;
        padding-top:0 !important;
    }
    body.category-mode .category-page-head{
        margin:0 0 14px 0 !important;
        padding:0 !important;
    }
    body.category-mode .category-page-head h1{
        font-size:34px !important;
        line-height:.95 !important;
        letter-spacing:-.04em !important;
    }
    body.category-mode .category-page-head p{
        font-size:10px !important;
        letter-spacing:.12em !important;
    }
    body.category-mode .back-home-btn{
        min-height:38px !important;
        padding:0 16px !important;
        font-size:11px !important;
    }
    body.category-mode .category-product-page .grid{
        margin-top:16px !important;
    }
}

/* ===== Original inline style block separator ===== */

/* ===== SLI MOBILE CATEGORY RESPONSIVE FINAL FIX ===== */
@media (max-width: 768px){
    body.category-mode .category-product-page{
        width:94% !important;
        max-width:520px !important;
        margin:0 auto !important;
        padding-top:18px !important;
    }
    body.category-mode .category-product-page .grid,
    body.category-mode .pc-grid,
    .category-product-page .grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:20px !important;
        width:100% !important;
        margin-top:18px !important;
    }
    body.category-mode .card.product-card,
    body.category-mode .product-card,
    body.category-mode .pc-card.post-item{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        border-radius:12px !important;
        padding:12px !important;
        display:flex !important;
    }
    body.category-mode .thumb-wrap{
        margin:0 0 16px 0 !important;
        aspect-ratio:16/9 !important;
        border-radius:8px !important;
    }
    body.category-mode .thumb-wrap img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
    }
    body.category-mode .product-card .info{
        padding:0 6px 10px !important;
    }
    body.category-mode .product-card .title{
        font-size:17px !important;
        line-height:1.35 !important;
        min-height:auto !important;
        margin:12px 0 16px !important;
    }
    body.category-mode .product-card .cat-tag{
        font-size:10px !important;
        padding:7px 10px !important;
        border-radius:8px !important;
    }
    body.category-mode .product-card .new-price{
        font-size:26px !important;
    }
    body.category-mode .product-card .old-price{
        font-size:13px !important;
    }
    body.category-mode .product-action-row{
        grid-template-columns:48px 1fr !important;
        gap:8px !important;
        align-items:center !important;
    }
    body.category-mode .product-action-row .btn{
        height:46px !important;
        min-height:46px !important;
        font-size:13px !important;
        border-radius:8px !important;
    }
    body.category-mode .product-action-row .add-cart-btn{
        width:48px !important;
        height:46px !important;
        order:1 !important;
    }
    body.category-mode .product-action-row .buy-btn,
    body.category-mode .product-action-row .btn:not(.add-cart-btn){
        order:2 !important;
    }
    .side-menu-list > a[href="#products"],
    .side-menu-list > a[href="#software"]{
        display:none !important;
    }
}

/* ===== Original inline style block separator ===== */

/* SLI FREE QR BUTTON START */
/* Header order fix: Search | Login | Cart | Free QR */
.header-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    flex-wrap:nowrap!important;
}
.header-search{
    order:1!important;
    width:260px!important;
    max-width:260px!important;
    flex:0 0 260px!important;
}
.header-actions a[href*="login"],
.header-actions a[href*="Login"]{
    order:2!important;
}
.header-actions a[href*="cart"],
.header-actions a[href*="Cart"]{
    order:3!important;
}
.header-actions .free-qr-btn{
    order:4!important;
}
.free-qr-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    height:42px!important;
    padding:0 15px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,0.05)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,0.16)!important;
    font-size:13px!important;
    font-weight:800!important;
    white-space:nowrap!important;
    text-decoration:none!important;
    box-shadow:0 8px 24px rgba(0,0,0,.45)!important;
    min-width:auto!important;
}
.free-qr-btn i{color:#FFD700!important;}
.free-qr-btn span{color:#fff!important;}
.free-qr-btn:hover{
    border-color:#FFD700!important;
    background:rgba(255,215,0,.10)!important;
}
@media(max-width:1100px){
    .header-actions{gap:6px!important;}
    .header-search{
        width:145px!important;
        max-width:145px!important;
        flex:0 0 145px!important;
    }
    .premium-icon-btn,
    .free-qr-btn{
        height:36px!important;
        padding:0 8px!important;
        gap:5px!important;
        font-size:10.5px!important;
        border-radius:10px!important;
        min-width:auto!important;
    }
    .premium-icon-btn span,
    .free-qr-btn span{
        display:inline!important;
        font-size:10.5px!important;
    }
}
@media(max-width:520px){
    .header-search{
        width:92px!important;
        max-width:92px!important;
        flex:0 0 92px!important;
    }
    .premium-icon-btn,
    .free-qr-btn{
        padding:0 6px!important;
        font-size:10px!important;
    }
    .premium-icon-btn span,
    .free-qr-btn span{font-size:10px!important;}
}
/* SLI FREE QR BUTTON END */

/* ===== Original inline style block separator ===== */

@media(max-width:768px){
.logo-box{display:flex!important;align-items:center!important;gap:10px!important}
.logo-box img,.logo-box .logo-icon{width:58px!important;height:58px!important;flex:0 0 58px}
.logo-text{display:flex!important;flex-direction:column!important;line-height:.9!important}
.logo-main{font-size:13px!important;font-weight:900!important;color:#fff!important}
.logo-sub{font-size:13px!important;font-weight:900!important;color:#ffd54a!important;margin:0!important;padding:0!important}
.logo-sub:before{display:block!important;content:'';width:2px;height:34px;background:#d4a72c;position:absolute;left:-8px;top:50%;transform:translateY(-50%)}
.logo{display:none!important}
}

/* ===== Original inline style block separator ===== */

/* MOBILE HEADER PIXEL FIX - Like Reference Image */
@media (max-width:768px){

    header{
        height:72px!important;
        min-height:72px!important;
        padding:0!important;
        background:#000!important;
        border-bottom:1px solid rgba(255,255,255,.10)!important;
    }

    .container-fluid,
    .navbar-container{
        width:100%!important;
        max-width:100%!important;
        height:72px!important;
        padding:0 18px!important;
        margin:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:10px!important;
        flex-wrap:nowrap!important;
        overflow:visible!important;
    }

    .logo-box{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:10px!important;
        flex:1 1 auto!important;
        min-width:0!important;
        max-width:220px!important;
        overflow:visible!important;
        visibility:visible!important;
        opacity:1!important;
    }

    .logo-box img,
    .logo-box .logo-img,
    .logo-box .site-logo{
        width:54px!important;
        height:54px!important;
        min-width:54px!important;
        object-fit:contain!important;
        display:block!important;
    }

    .logo,
    .logo-text{
        display:flex!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        justify-content:center!important;
        white-space:nowrap!important;
        flex-wrap:nowrap!important;
        overflow:visible!important;
        visibility:visible!important;
        opacity:1!important;
        width:auto!important;
        max-width:150px!important;
        min-width:120px!important;
        padding:0!important;
        margin:0!important;
        line-height:.92!important;
        gap:0!important;
        letter-spacing:0!important;
        transform:none!important;
    }

    .logo-main,
    .logo-text .logo-main{
        display:block!important;
        white-space:nowrap!important;
        font-size:20px!important;
        line-height:.95!important;
        font-weight:900!important;
        letter-spacing:-.8px!important;
        color:#fff!important;
        margin:0!important;
        padding:0!important;
        -webkit-text-fill-color:#fff!important;
        background:none!important;
        text-shadow:0 0 2px rgba(255,255,255,.55)!important;
        filter:none!important;
    }

    .logo-sub,
    .logo-text .logo-sub{
        display:block!important;
        white-space:nowrap!important;
        font-size:20px!important;
        line-height:.95!important;
        font-weight:900!important;
        letter-spacing:-.8px!important;
        color:#FFD700!important;
        margin:0!important;
        padding:0!important;
        -webkit-text-fill-color:#FFD700!important;
        background:none!important;
        text-shadow:0 0 2px rgba(255,215,0,.55)!important;
        filter:none!important;
    }

    .logo-sub::before,
    .logo::after,
    .logo-text::after{
        display:none!important;
        content:none!important;
    }

    .nav-menu,
    .nav-links,
    .header-search{
        display:none!important;
    }

    .header-actions,
    .header-action-area{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-end!important;
        gap:8px!important;
        flex:0 0 auto!important;
        flex-wrap:nowrap!important;
        min-width:max-content!important;
        margin-left:auto!important;
    }

    .custom-burger,
    .premium-icon-btn,
    .free-qr-btn{
        width:47px!important;
        min-width:47px!important;
        max-width:47px!important;
        height:47px!important;
        padding:0!important;
        border-radius:14px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:0!important;
        background:rgba(255,255,255,.055)!important;
        border:1px solid rgba(255,255,255,.16)!important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.45)!important;
    }

    .custom-burger span{
        width:20px!important;
        height:3px!important;
        background:#FFD700!important;
        border-radius:4px!important;
        box-shadow:0 0 7px rgba(255,215,0,.45)!important;
    }

    .premium-icon-btn span,
    .free-qr-btn span{
        display:none!important;
        visibility:hidden!important;
        opacity:0!important;
        width:0!important;
        max-width:0!important;
        overflow:hidden!important;
        margin:0!important;
        padding:0!important;
    }

    .premium-icon-btn i,
    .free-qr-btn i{
        font-size:17px!important;
        color:#FFD700!important;
        margin:0!important;
        line-height:1!important;
        text-shadow:0 0 7px rgba(255,215,0,.45)!important;
    }
}

@media (max-width:430px){
    .container-fluid,
    .navbar-container{
        padding:0 13px!important;
        gap:8px!important;
    }
    .logo-box{
        gap:8px!important;
        max-width:205px!important;
    }
    .logo-box img,
    .logo-box .logo-img,
    .logo-box .site-logo{
        width:50px!important;
        height:50px!important;
        min-width:50px!important;
    }
    .logo,
    .logo-text{
        min-width:112px!important;
        max-width:135px!important;
    }
    .logo-main,
    .logo-sub{
        font-size:18px!important;
    }
    .header-actions,
    .header-action-area{
        gap:6px!important;
    }
    .custom-burger,
    .premium-icon-btn,
    .free-qr-btn{
        width:43px!important;
        min-width:43px!important;
        max-width:43px!important;
        height:43px!important;
        border-radius:13px!important;
    }
}

@media (max-width:380px){
    .container-fluid,
    .navbar-container{
        padding:0 10px!important;
        gap:5px!important;
    }
    .logo-box{
        gap:6px!important;
        max-width:180px!important;
    }
    .logo-box img,
    .logo-box .logo-img,
    .logo-box .site-logo{
        width:46px!important;
        height:46px!important;
        min-width:46px!important;
    }
    .logo,
    .logo-text{
        min-width:98px!important;
        max-width:118px!important;
    }
    .logo-main,
    .logo-sub{
        font-size:16px!important;
        letter-spacing:-.7px!important;
    }
    .header-actions,
    .header-action-area{
        gap:5px!important;
    }
    .custom-burger,
    .premium-icon-btn,
    .free-qr-btn{
        width:39px!important;
        min-width:39px!important;
        max-width:39px!important;
        height:39px!important;
        border-radius:12px!important;
    }
}

/* ===== Original inline style block separator ===== */

@media(max-width:768px){
.sli-logo-round,.logo-round,.logo-icon{display:none!important;}
.container-fluid,.navbar-container{display:flex!important;align-items:center!important;justify-content:space-between!important}
.custom-burger{order:3!important;margin-left:10px!important;display:flex!important;}
.logo-box{order:2!important;display:flex!important;align-items:center!important;gap:8px!important;flex:1!important}
.logo-box img,.logo-box .site-logo,.logo-box .logo-img{display:none!important;}
.logo,.logo-text{display:flex!important;flex-direction:column!important}
.logo-main{font-size:20px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
.logo-sub{font-size:20px!important;color:#FFD700!important;-webkit-text-fill-color:#FFD700!important;background:none!important}
.logo-sub:before{display:none!important}
}

/* ===== Original inline style block separator ===== */

/* FINAL PREMIUM SIDE GAP FIX */
/* MORE PREMIUM SIDE GAP */
body.category-mode .container{
    width:79% !important;
    max-width:1600px !important;
    margin:0 auto !important;
    padding:0 !important;
}

body.category-mode .category-page-head{
    margin-top:22px !important;
}

body.category-mode .category-page-head h1{
    font-size:clamp(42px,4.6vw,62px) !important;
}

/* Product card gap premium */
body.category-mode .pc-grid{
    gap:22px !important;
}