.elementor-200 .elementor-element.elementor-element-e348fde{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-66efc52 */.elementor-200 .elementor-element.elementor-element-66efc52{
width:100%;
margin:0;
padding:0;
display:block;
font-family:Arial,sans-serif;
}

/* Header */
.subonix-header{
display:flex;
align-items:center;
justify-content:space-between;
background:#4b4b4b;
height:58px;
padding:0 15px;
}

.header-left{
display:flex;
align-items:center;
gap:15px;
}

.menu-btn{
font-size:28px;
color:#fff;
cursor:pointer;
}

.logo img{
height:34px;
display:block;
}

.header-right{
display:flex;
align-items:center;
gap:15px;
}

.login-btn{
font-size:26px;
text-decoration:none;
color:#fff;
}

/* Desktop Search */
.desktop-search{
flex:1;
display:flex;
justify-content:center;
padding:0 20px;
}

.desktop-search input{
width:260px;
height:34px;
border:none;
border-radius:3px;
padding:0 10px;
outline:none;
}

/* Category */
.category-bar{
display:flex;
overflow-x:auto;
white-space:nowrap;
background:#f2f2f2;
scrollbar-width:none;
}

.category-bar::-webkit-scrollbar{
display:none;
}

.category-bar a{
display:inline-block;
padding:14px 18px;
text-decoration:none;
font-size:14px;
font-weight:700;
color:#444;
flex-shrink:0;
}

.category-bar a:hover{
color:#79b92d;
}

.mobile-search{
display:none;
}

/* Slide Menu */
.side-menu{
position:fixed;
top:0;
left:-320px;
width:300px;
height:100%;
background:#fff;
z-index:99999;
transition:.35s;
overflow-y:auto;
padding:20px;
box-shadow:3px 0 12px rgba(0,0,0,.25);
}

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

.close-btn{
font-size:28px;
cursor:pointer;
margin-bottom:20px;
}

.side-menu a{
display:block;
padding:12px 0;
text-decoration:none;
color:#333;
border-bottom:1px solid #eee;
}

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

.desktop-search{
display:none;
}

.mobile-search{
display:inline-block;
position:sticky;
right:0;
background:#f2f2f2;
}

.logo img{
height:28px;
}

.subonix-header{
height:54px;
}

.category-bar a{
padding:12px 15px;
}

}

/* Desktop */
@media(min-width:769px){

.mobile-search{
display:none;
}

}
/* Overlay */

.menu-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:9998;
}

.menu-overlay.active{
opacity:1;
visibility:visible;
}

/* Smooth Menu */

.side-menu{
transition:left .35s ease;
}
/* Hamburger Animation */
.hamburger{
    width:28px;
    height:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
}

.hamburger span{
    width:100%;
    height:3px;
    background:#fff;
    border-radius:5px;
    transition:.35s;
}

.hamburger.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}
/* ===== Style Category Slider ===== */

.category-bar{
    display:flex;
    align-items:center;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    background:#fff;
    border-top:1px solid #ececec;
    border-bottom:1px solid #ececec;
}

.category-bar::-webkit-scrollbar{
    display:none;
}

.category-bar a{
    flex:0 0 auto;
    display:inline-block;
    padding:14px 18px;
    color:#444;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
}

.category-bar a:hover{
    color:#d40000;
}

/* Search icon always right */
.mobile-search{
    position:sticky;
    right:0;
    background:#fff;
    padding:14px 18px;
    margin-left:auto;
    box-shadow:-8px 0 10px #fff;
    z-index:10;
}
/* ===== Desktop Header ===== */
@media(min-width:769px){

.subonix-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 20px;
    background:#4f4f4f;
}

.header-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.logo img{
    height:34px;
}

.desktop-search{
    display:block;
    margin-left:20px;
}

.desktop-search input{
    width:180px;
    height:28px;
    border:1px solid #999;
    border-radius:2px;
    padding:0 10px;
    font-size:13px;
}

.header-right{
    display:flex;
    align-items:center;
    gap:15px;
}

.login-btn{
    color:#fff;
    font-size:22px;
    text-decoration:none;
}

.category-bar{
    overflow-x:auto;
    white-space:nowrap;
    flex-wrap:nowrap;
}

.category-bar a{
    display:inline-block;
    padding:12px 18px;
    font-size:13px;
}

}
/* Side Menu Header */

.menu-header{
    text-align:center;
    padding:15px 0 20px;
    border-bottom:1px solid #eee;
    margin-bottom:15px;
}

.menu-header img{
    height:38px;
    width:auto;
}
/* Professional Login */

.login-btn{
display:flex;
align-items:center;
gap:6px;
padding:7px 12px;
background:#69b317;
color:#fff;
border-radius:4px;
text-decoration:none;
font-size:14px;
font-weight:600;
transition:.3s;
}

.login-btn:hover{
background:#5aa10f;
}

.login-btn span:first-child{
font-size:18px;
}

@media(max-width:768px){

.login-text{
display:none;
}

.login-btn{
padding:0;
background:transparent;
color:#fff;
}

}
/* Search Popup */

.search-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.65);
display:none;
justify-content:center;
align-items:flex-start;
padding-top:70px;
z-index:99999;
}

.search-popup.active{
display:flex;
}

.search-box{
background:#fff;
width:92%;
max-width:600px;
padding:12px;
border-radius:6px;
display:flex;
align-items:center;
gap:10px;
}

.search-box form{
display:flex;
flex:1;
}

.search-box input{
flex:1;
height:42px;
border:1px solid #ddd;
padding:0 12px;
font-size:15px;
}

.search-box button{
width:55px;
background:#d50000;
border:none;
color:#fff;
font-size:18px;
cursor:pointer;
}

.close-search{
font-size:26px;
cursor:pointer;
font-weight:bold;
}/* End custom CSS */