.desktop-menu-toggle {
        background: none;
        border: none;
        margin-right: 100px; 
        margin-left: -50px; 
        padding: 10px; 
        cursor: pointer;
        display: flex;
        align-items: center;
        outline: none;
        transition: 0.3s; 
    }

    .toggle-box {
        width: 28px;
        height: 20px;
        display: inline-block;
        position: relative;
    }

    .toggle-inner, .toggle-inner::before, .toggle-inner::after {
        width: 28px;
        height: 3px;
        background-color: #000; 
        border-radius: 4px;
        position: absolute;
        transition: all 0.3s ease-in-out;
    }

    .toggle-inner {
        top: 50%;
        transform: translateY(-50%);
    }

    .toggle-inner::before {
        content: "";
        top: -8px;
        left: 0;
    }

    .toggle-inner::after {
        content: "";
        bottom: -8px;
        left: 0;
        width: 18px; 
    }

  
    .desktop-menu-toggle:hover .toggle-inner, 
    .desktop-menu-toggle:hover .toggle-inner::before, 
    .desktop-menu-toggle:hover .toggle-inner::after {
        background-color: #007dfa; 
    }

    .desktop-menu-toggle:hover .toggle-inner::after {
        width: 28px; 
    }

 
    .brand-area {
        display: flex !important;
        align-items: center;
    }

    .brand-logo img {
        transition: all 0.4s ease;
    }

    .brand-logo:hover img {
        transform: translateY(-5px);
        filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.1));
    }

    .brand-logo {
        animation: logo-pulse 3s infinite ease-in-out;
    }

    @keyframes logo-pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.03); }
        100% { transform: scale(1); }
    }


.header-middle {
    padding-top: 0px !important; 
    padding-bottom: 0px !important;
    margin-top: -20px !important; 
}

.header-middle-wrap {
    padding: 5px 0 !important; 
}
    /* ৩. হেডার বাটন (Cart, Wishlist, etc.) */
    .header-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #000;
        margin-left: 10px;
        position: relative;
        transition: 0.3s;
    }

    .header-btn:hover {
        color: #007dfa;
    }

    .btn-icon {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        margin-bottom: 5px;
    }

    .btn-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .header-top {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-bottom: -35px !important; 
    min-height: auto !important;
}
    .header-top-left, .header-top-right {
        line-height: 1 !important;
    }

   
    .header-profile-dropdown:hover .profile-submenu {
        display: block !important;
        animation: slideDown 0.2s ease forwards;
    }
    
  
    .profile-submenu {
        top: 100% !important;
        margin-top: 0px !important; 
        border-top: 10px solid transparent; 
    }

    .profile-submenu li a:hover {
        color: #007dfa !important; 
        padding-left: 5px !important;
    }
    
    .profile-submenu li a {
        transition: all 0.2s ease;
    }

    @keyframes slideDown {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    
  
    /* ============================================================== */
    /* ১. মেইন ড্রপডাউন কন্টেইনার (Background Color) */
    /* ============================================================== */
    .drop-nav {
        background: #D93669; /* ড্রপডাউনের মূল ব্যাকগ্রাউন্ড কালার */
    }

    /* ============================================================== */
    /* ২. মেইন মেনু আইটেম সেটআপ (Alignment) */
    /* ============================================================== */
    .main-menu > li {
        float: left;
        position: relative; /* সাব-মেনু যেন ঠিক নিচে বসে */
    }

    /* মেনুর প্রথম আইটেমের বর্ডার বা স্টাইল স্পেশাল রাখতে চাইলে */
    .main-menu li:first-child {
        /* border-left: none; */
    }

    /* মেইন মেনুর লিংকগুলোর স্টাইল (Text & Padding) */
    .main-menu a {
        color: #fff;
        display: block;
        padding: 5px 15px;
        text-decoration: none;
    }

    /* ============================================================== */
    /* ৩. ড্রপডাউন এবং ফ্লাইআউট পজিশনিং (Sub-menus) */
    /* ============================================================== */
    .dropdown, .flyout {
        position: relative;
    }

    /* ড্রপডাউন এবং সাইড ড্রপডাউন ডিফল্টভাবে লুকানো থাকবে */
    .drop-nav, .flyout-nav {
        position: absolute;
        display: none;
        min-width: 200px; /* একটি স্ট্যান্ডার্ড উইডথ */
    }

    /* ড্রপডাউন লিস্টের ভেতরের আইটেম এবং বর্ডার */
    .drop-nav li {
        border-bottom: 1px solid rgba(255,255,255,.2);
        border-left: 1px solid #D93669;
    }

    /* ============================================================== */
    /* ৪. হোভার ইফেক্ট (Hover Actions) */
    /* ============================================================== */
    /* মাউস নিলে মেনু শো করা এবং উপরে নিয়ে আসা (Z-index) */
    .dropdown:hover > .drop-nav,
    .flyout:hover > .flyout-nav {
        display: block;
        z-index: 99999 !important;
    }

    /* ৫. ফ্লাইআউট (সাব-ক্যাটাগরির সাইড মেনু) পজিশন */
    .flyout-nav {
        left: 100%; /* মেইন ড্রপডাউনের ডানে দেখাবে */
        top: 0;
    }

    /* ফ্লাইআউট মেনুর ব্যাকগ্রাউন্ড কালার */
    .flyout:hover a, .flyout-nav {
        background: #2A3143;
    }

    /* ক্যাটাগরি লিংকের নির্দিষ্ট সাইজ নির্ধারণ */
    .cat-a {
        width: 230px !important;
    }