/* ====================================
GOOGLE FONT
==================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');



/* ====================================
GLOBAL CSS
==================================== */

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

body {
    font-family: 'Poppins', sans-serif;
    background: #fff;
}



/* ====================================
TOP BAR
==================================== */

.top-bar {
    width: 100%;
    background: #FE8D26;
    color: #fff;
    text-align: center;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
}



/* ====================================
MAIN HEADER
==================================== */

.main-header {
    width: 100%;
    height: 85px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    border-bottom: 1px solid #eee;
    position: relative;
}



/* ====================================
LOGO
==================================== */

.logo img {
    width: 200px;
    object-fit: contain;
}



/* ====================================
NAVBAR
==================================== */

.navbar {
    display: flex;
    align-items: center;
    gap: 45px;
}

.navbar a {
    text-decoration: none;
    color: #222;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s;
}

.navbar a:hover {
    color: #FE8D26;
}



/* ====================================
HEADER ICONS
==================================== */

.header-icons {
    display: flex;
    align-items: center;
    gap: 22px;
}

.header-icons a,
.icon-btn {
    text-decoration: none;
    color: #222;
    font-size: 20px;
    border: none;
    background: none;
    cursor: pointer;
    transition: 0.3s;
}

.header-icons a:hover,
.icon-btn:hover {
    color: #FE8D26;
}



/* ====================================
MENU BUTTON
==================================== */

.menu-btn {
    display: none;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 22px;
}



/* ====================================
SEARCH POPUP
==================================== */

.search-popup {
    width: 100%;
    background: #fff;
    padding: 0 7%;
    border-bottom: 1px solid #eee;

    max-height: 0;
    overflow: hidden;

    opacity: 0;

    transition:
        max-height 0.5s ease,
        opacity 0.4s ease,
        padding 0.4s ease;
}



.search-popup.active {

    max-height: 120px;

    opacity: 1;

    padding: 25px 7%;

}

.search-box {
    width: 100%;
    max-width: 700px;
    margin: auto;
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
}

.search-box input {
    width: 100%;
    height: 60px;
    border: none;
    outline: none;
    padding: 0 25px;
    font-size: 16px;
}

.search-box button {
    width: 70px;
    height: 60px;
    border: none;
    background: #FE8D26;
    color: #fff;
    cursor: pointer;
}



/* ====================================
ANNOUNCEMENT STRIP
==================================== */

.announcement-strip {
    width: 100%;
    overflow: hidden;
    background: #111;
    color: #fff;
    padding: 14px 0;
}

.announcement-track {

    display: flex;

    align-items: center;

    gap: 50px;

    width: max-content;

    animation: scrollLoop 18s linear infinite;

}

.announcement-track span {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}



@keyframes scrollLoop {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}



/* ====================================
HERO
==================================== */

.hero-section {
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
}


/* ====================================
RESPONSIVE
==================================== */

@media(max-width:992px) {

    .navbar {
        position: absolute;
        top: 85px;
        right: 0;
        width: 280px;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 30px;
        gap: 25px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        display: none;
    }

    .navbar.active {
        display: flex;
        border-radius: 15px;
    }

    .menu-btn {
        display: block;
    }

}



@media(max-width:768px) {

    .main-header {
        padding: 0 5%;
    }

    .header-icons {
        gap: 16px;
    }

    .logo img {
        width: 170px;
    }

}








.buyer-avatar{
    width:40px !important;
    height:40px !important;

    border-radius:50% !important;
    background:#6c5ce7;

    color:#ffffff !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:18px;
    font-weight:700;
    text-transform:uppercase;

    text-decoration:none;

    overflow:hidden;

    flex-shrink:0;

    padding:0 !important;
    margin:0;

    line-height:1;
}