.elementor-2886 .elementor-element.elementor-element-305504f9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--border-radius:05px 05px 20px 20px;}.elementor-2886 .elementor-element.elementor-element-305504f9:not(.elementor-motion-effects-element-type-background), .elementor-2886 .elementor-element.elementor-element-305504f9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00000038;}.elementor-2886 .elementor-element.elementor-element-305504f9.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2886 .elementor-element.elementor-element-15ed6e95{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 7px;}.elementor-2886 .elementor-element.elementor-element-15ed6e95.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){.elementor-2886 .elementor-element.elementor-element-305504f9{--width:31.662vw;}.elementor-2886 .elementor-element.elementor-element-15ed6e95{width:var( --container-widget-width, 117px );max-width:117px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:117px;--container-widget-flex-grow:0;}}@media(min-width:768px){.elementor-2886 .elementor-element.elementor-element-305504f9{--width:180px;}}/* Start custom CSS for shortcode, class: .elementor-element-15ed6e95 *//* Category Bar Container */
.header-cat-bar{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:4px !important;
    align-items:center !important;
    padding:4px !important;
}

/* Apple Style Glass Button */
.header-cat-bar .cat-item{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-width:90px !important;
    padding:7px 24px !important;

    border-radius:999px !important;

    text-decoration:none !important;
    overflow:hidden !important;
    cursor:pointer !important;

    font-size:16px !important;
    font-weight:600 !important;
    letter-spacing:0.3px !important;

    color:#ffffff !important;

    /* Apple Glass Effect */
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0.22) 0%,
        rgba(255,255,255,0.08) 100%
    ) !important;

    backdrop-filter:blur(22px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(180%) !important;

    border:1px solid rgba(255,255,255,0.18) !important;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.25),
        inset 0 -1px 1px rgba(255,255,255,0.05),
        0 6px 18px rgba(0,0,0,0.22) !important;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease !important;
}

/* Top Light Reflection */
.header-cat-bar .cat-item::before{
    content:"";
    position:absolute;
    top:1px;
    left:8%;
    width:84%;
    height:45%;

    border-radius:999px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0.45),
        rgba(255,255,255,0.05)
    );

    opacity:.9;
    pointer-events:none;
}

/* Shine Animation */
.header-cat-bar .cat-item::after{
    content:"";
    position:absolute;
    top:0;
    left:-80%;

    width:45%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.55),
        transparent
    );

    transform:skewX(-25deg);
}

/* Hover Effect */
.header-cat-bar .cat-item:hover{
    transform:translateY(-2px) scale(1.04) !important;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,0.28) 0%,
        rgba(255,255,255,0.10) 100%
    ) !important;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.35),
        0 10px 28px rgba(0,0,0,0.30) !important;
}

/* Shine Move */
.header-cat-bar .cat-item:hover::after{
    left:130%;
    transition:0.8s;
}

/* Active / Selected Button */
.header-cat-bar .cat-item.active{
    background:linear-gradient(
        180deg,
        rgba(20,20,20,0.92) 0%,
        rgba(40,40,40,0.88) 100%
    ) !important;

    color:#ffffff !important;

    border:1px solid rgba(255,255,255,0.12) !important;

    box-shadow:
        inset 0 2px 6px rgba(255,255,255,0.08),
        0 8px 24px rgba(0,0,0,0.35) !important;
}

/* Click Effect */
.header-cat-bar .cat-item:active{
    transform:scale(0.95) !important;
}


/* ===================================================
   RESPONSIVE — TABLET (≤ 1024px)
   বাটন একটার নিচে একটা
   =================================================== */
@media (max-width:1024px){
    .header-cat-bar{
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        gap:6px !important;
        padding:6px !important;
    }

    .header-cat-bar .cat-item{
        width:100% !important;
        min-width:unset !important;
        padding:6px 20px !important;
        font-size:15px !important;
    }
}

/* ===================================================
   RESPONSIVE — MOBILE (≤ 768px)
   বাটন একটার নিচে একটা
   =================================================== */
@media (max-width:768px){
    .header-cat-bar{
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        gap:6px !important;
        padding:6px 8px !important;
    }

    .header-cat-bar .cat-item{
        width:100% !important;
        min-width:unset !important;
        padding:5px 18px !important;
        font-size:14px !important;
    }

    /* টাচে হোভার শাইন বন্ধ */
    .header-cat-bar .cat-item:hover{
        transform:none !important;
    }

    .header-cat-bar .cat-item:hover::after{
        left:-80% !important;
        transition:none !important;
    }
}

/* ===================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   =================================================== */
@media (max-width:480px){
    .header-cat-bar{
        gap:5px !important;
        padding:5px 6px !important;
    }

    .header-cat-bar .cat-item{
        padding:4px 16px !important;
        font-size:13px !important;
        letter-spacing:0.2px !important;
    }

    .header-cat-bar .cat-item::before{
        height:40% !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-305504f9 */.my-hover-category:hover {
    cursor: pointer;
}/* End custom CSS */
/* Start custom CSS */.my-hover-category:hover {
    cursor: pointer;
}/* End custom CSS */