body{
    margin:0;
    font-family: Alria, sans-serif;
}


/* Top Navbar */
.main-navbar{
    background:#262626;
    
}

.navbar-logo{
    height: 35px;
    width: auto;
    object-fit: contain;
}

.navbar-nav .nav-link{
    color:#fff;
    font-size: 14.5px;
    font-weight:600;
    margin:0 8px;
}

.navbar-nav .nav-link.active{
    color:#9cee69;
}

.navbar-nav .nav-link:hover{
    color:#9cee69;
}

/* Search Dropdown */
.dropdown-menu-custom{
    position:relative;
}

.search-dropdown{
    position:absolute;
    top:100%;
    left:0;
    background:#262626;
    list-style:none;
    min-width:170px;
    padding:8px 0;
    border-radius:8px;
    box-shadow:0 5px 15px rgba(0,0,0,.2);

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:all .3s ease;

    z-index:999;
}

.search-dropdown li a{
    display:block;
    padding:10px 16px;
    color:#fff;
    text-decoration:none;
    font-size:14.5px;
    font-weight:600;
}

.search-dropdown li a:hover{
    background:#333;
    color:#9cee69;
}

.dropdown-menu-custom:hover .search-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.login-link{
    background:transparent;
    color:#fff;
    border: transparent;
    padding:6px 16px;
    border-radius:30px;
    font-size: 14.5px;
    font-weight:600;
}

.login-link:hover{
    color:#9cee69;
    background:#ffffff26;
    border:1px solid #9cee69;
}

.signup-btn{
    background:#9cee69a5;
    border:none;
    color:#fff;
    padding:6px 16px;
    border-radius:30px;
    font-size: 14.5px;
    font-weight:600;
}

.signup-btn:hover{
    color:#9cee69;
    background-color: #fff;
}

/* Category Bar */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
}

/* Navbar */

.category-bar{

    display:flex;
    align-items:center;
    width:100%;
    height:35px;
    background:#fff;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;

}

/* Buttons */

.arrow-btn{

    width: 35px;
    height:35px;
    border:none;
    background:#9cee69;
    font-size:20px;
    color:#fff;
    cursor:pointer;
    flex-shrink:0;

}

.arrow-btn:hover{
    background:#fff;
    color: #9cee69;
}

/* Scroll Area */

.category-viewport{

    flex:1;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;

    /* Hide scrollbar */

    scrollbar-width:none;

}

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

/* Categories */

.category-wrapper{

    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    min-width:max-content;
    height:58px;

}

.category-wrapper a{

    text-decoration:none;
    color: #262626;
    font-weight:600;
    font-size:15px;
    padding:0 22px;
    position:relative;
    line-height:58px;

}

/* Divider */

.category-wrapper a:not(:last-child)::after{

    content:"›";
    position:absolute;
    right:-5px;
    color: #262626;;

}

.category-wrapper a:hover{

    color:#9cee69;

}