/* ============================================================
   1. GLOBAL LAYOUT & PROFESSIONALISM
   ============================================================ */
.themesflat-container {
    max-width: 1140px !important;
    margin: 0 auto !important;
}

.heading-section-1 {
    text-align: center;
    margin-bottom: 50px;
}

.tf-title {
    font-size: 42px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
    color: #fff;
}

.tf-section-2 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* ============================================================
   2. MODERN WIDGETS & CARDS (FAQ, CHOOSE US)
   ============================================================ */
.flat-toggle, .flat-toggle2, .box-icon-item {
    background: #161616 !important; 
    border: 1px solid #222 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: all 0.3s ease;
    margin-bottom: 15px !important;
}

.flat-toggle:hover, .box-icon-item:hover {
    border-color: #e2ff00 !important; 
    transform: translateY(-5px);
}

/* ============================================================
   3. TEAM SECTION FIXES
   ============================================================ */
.our-team-item img {
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 3px solid #161616;
}

.our-team-item:hover img {
    border-color: #e2ff00;
}

/* ============================================================
   4. BIDZ CUSTOM PRELOADER (SPINNER)
   ============================================================ */
.preload-container {
    background: #000 !important;
}

.preload-container .middle .bar {
    display: none !important;
}

.preload-container .middle {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(226, 255, 0, 0.1);
    border-top: 3px solid #e2ff00;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   5. HAMBURGER & MOBILE NAVIGATION LOGIC
   ============================================================ */

/* Desktop Navigation Centering */
@media (min-width: 992px) {
    #main-nav {
        position: absolute;
        left: 45%;
        transform: translateX(-50%);
        display: block !important;
    }
    #main-nav ul.menu {
        gap: 30px;
        display: flex;
        list-style: none;
        margin: 0;
    }
    #main-nav ul.menu > li > a {
        font-weight: 600;
        color: #fff;
    }
}

/* Mobile Specific Fixes */
@media (max-width: 991px) {
    #main-nav {
        display: none !important; /* Hide desktop menu on mobile */
    }

    .mobile-button {
        display: block !important; /* Force show hamburger */
        cursor: pointer;
        z-index: 10002;
    }

    /* Make hamburger lines white */
    .mobile-button span, 
    .mobile-button span::before, 
    .mobile-button span::after {
        background-color: #fff !important;
    }

    /* The Sidebar Drawer Container */
    .mobile-nav-wrap {
        position: fixed;
        top: 0;
        left: -300px; /* Start off-screen */
        width: 300px;
        height: 100vh;
        background: #0d0d0d !important;
        z-index: 10001;
        transition: all 0.5s ease;
        padding: 80px 20px 20px;
        visibility: hidden;
        opacity: 0;
        display: block !important;
    }

    /* State when active (Toggled via JS) */
    .mobile-nav-wrap.active {
        left: 0;
        visibility: visible;
        opacity: 1;
    }

    /* Style for mobile links inside the drawer */
    .mobile-nav-wrap ul li {
        list-style: none;
        border-bottom: 1px solid #222;
    }

    .mobile-nav-wrap ul li a {
        display: block;
        padding: 15px 0;
        color: #fff;
        font-weight: 600;
        font-size: 16px;
    }

    .mobile-nav-wrap ul li a:hover {
        color: #e2ff00;
    }
}

/* Prevent profile section from squashing the menu */
.flat-wallet {
    flex-shrink: 0;
}

/* FORCE VISIBILITY */
.mobile-nav-wrap.active {
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    z-index: 999999 !important;
}
.overlay-mobile.active {
    display: block !important;
    opacity: 1 !important;
    z-index: 999998 !important;
}
/* Prevent the 'Hi Sjmurat' section from blocking the menu button */
.admin_active {
    max-width: 150px;
    margin-right: 10px;
}

.flat-wallet {
    z-index: 10005 !important; /* Ensure this is above the background effects */
}

/* Ensure the hamburger button is on the very top layer */
.mobile-button {
    position: relative;
    z-index: 10010 !important;
    cursor: pointer !important;
    padding: 10px;
}
/* Ensure the hamburger is ALWAYS on top and clickable */
.mobile-button {
    position: relative !important;
    z-index: 999999 !important;
    cursor: pointer !important;
    display: block !important;
    min-width: 30px;
    min-height: 30px;
}

/* Push the user profile slightly left so it doesn't overlap */
.admin_active {
    margin-right: 40px !important;
}

/* --- 1. Clean Header Alignment --- */
#site-header-inner .wrap-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 90px;
}

/* --- 2. Desktop Logic (Hide Hamburger) --- */
@media (min-width: 992px) {
    .mobile-button {
        display: none !important; /* Hide hamburger on desktop */
    }
    
    .main-nav {
        display: block !important;
        margin: 0 auto; /* Centers the text menus */
    }

    .flat-wallet {
        display: flex;
        align-items: center;
        gap: 20px;
        min-width: 250px; /* Gives space for Name + Search */
        justify-content: flex-end;
    }
}

/* --- 3. Mobile Logic (Show Hamburger) --- */
@media (max-width: 991px) {
    .main-nav {
        display: none !important; /* Hide text menus on mobile */
    }

    .mobile-button {
        display: block !important; /* Show hamburger on mobile */
        margin-left: 15px;
    }

    /* Shrink logo slightly on mobile so it fits */
    #logo_header {
        max-height: 50px !important;
    }
}

/* --- 4. Fix the Search & Profile Overlap --- */
.header-search {
    display: flex;
    align-items: center;
}

.admin_active {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Prevents name from breaking into two lines */
}

/* Ensure the right-side section aligns correctly */
.flat-wallet {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 120px; /* Adjust based on name length */
}

/* On Desktop, hide the hamburger and space the menu */
@media (min-width: 992px) {
    .mobile-button {
        display: none !important;
    }
    .main-nav {
        flex: 1;
        display: flex !important;
        justify-content: center;
    }
}

/* On Mobile, hide desktop menu and show hamburger */
@media (max-width: 991px) {
    .main-nav {
        display: none !important;
    }
    .mobile-button {
        display: block !important;
    }
}