change this codes (<?php
// ../includes/header.php
?>
<!-- Header -->
<header class="admin-header">
    <div class="container d-flex align-items-center justify-content-between">
        <!-- Logo -->
        <a href="/kaak_alia_management_system/dashboard.php" class="logo">
            <img src="/kaak_alia_management_system/assets/images/logo.png" alt="Kaak Alia Logo" class="logo-image">
        </a>
        
        <!-- Navigation Buttons -->
        <nav class="nav-buttons d-none d-md-flex">
            <a href="/kaak_alia_management_system/orders/add_order.php" class="nav-btn">
                <i class="bi bi-plus-circle-fill me-2"></i> Add New Order
            </a>
            <a href="/kaak_alia_management_system/orders/view_orders.php" class="nav-btn">
                <i class="bi bi-eye-fill me-2"></i> View Orders
            </a>
            <a href="/kaak_alia_management_system/products/manage_products.php" class="nav-btn">
                <i class="bi bi-box-seam-fill me-2"></i> Manage Products
            </a>
            <a href="/kaak_alia_management_system/users/manage_users.php" class="nav-btn">
                <i class="bi bi-people-fill me-2"></i> Manage Users
            </a>
            <a href="/kaak_alia_management_system/reports/generate_reports.php" class="nav-btn">
                <i class="bi bi-bar-chart-fill me-2"></i> Generate Reports
            </a>
        </nav>
        
        <!-- Mobile Navigation Toggle (Optional) -->
        <button class="navbar-toggler d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#mobileNav" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon" style="color: #FFFFFF;">
                <i class="bi bi-list" style="font-size: 1.5rem;"></i>
            </span>
        </button>
        
        <!-- Mobile Navigation Menu -->
        <div class="collapse navbar-collapse d-md-none" id="mobileNav">
            <nav class="nav-mobile-buttons">
                <a href="/kaak_alia_management_system/orders/add_order.php" class="nav-mobile-btn">
                    <i class="bi bi-plus-circle-fill me-2"></i> Add New Order
                </a>
                <a href="/kaak_alia_management_system/orders/view_orders.php" class="nav-mobile-btn">
                    <i class="bi bi-eye-fill me-2"></i> View Orders
                </a>
                <a href="/kaak_alia_management_system/products/manage_products.php" class="nav-mobile-btn">
                    <i class="bi bi-box-seam-fill me-2"></i> Manage Products
                </a>
                <a href="/kaak_alia_management_system/users/manage_users.php" class="nav-mobile-btn">
                    <i class="bi bi-people-fill me-2"></i> Manage Users
                </a>
                <a href="/kaak_alia_management_system/reports/generate_reports.php" class="nav-mobile-btn">
                    <i class="bi bi-bar-chart-fill me-2"></i> Generate Reports
                </a>
            </nav>
        </div>
        
        <!-- User Profile and Settings -->
        <div class="user-profile dropdown">
            <img src="/kaak_alia_management_system/assets/images/user-placeholder.png" alt="User Avatar" id="userDropdown" class="user-avatar" data-bs-toggle="dropdown" aria-expanded="false">
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                <li><a class="dropdown-item" href="/kaak_alia_management_system/users/settings.php">Account Settings</a></li>
                <li><a class="dropdown-item" href="/kaak_alia_management_system/logout.php">Logout</a></li>
            </ul>
        </div>
    </div>
</header>

<!-- Embedded Custom Styles for Header -->
<style>
    /* Header Container */
    .admin-header {
        background-color: #4F3F02;
        padding: 10px 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }

    .admin-header .logo-image {
        height: 40px;
    }

    /* Navigation Buttons */
    .nav-buttons .nav-btn {
        background: linear-gradient(45deg, #4F3F02, #D1C287);
        color: #FFFFFF;
        padding: 8px 15px;
        border-radius: 5px;
        text-decoration: none;
        margin: 0 5px;
        display: flex;
        align-items: center;
        transition: background 0.3s, transform 0.3s;
    }

    .nav-buttons .nav-btn:hover {
        background: linear-gradient(45deg, #D1C287, #4F3F02);
        transform: scale(1.05);
    }

    /* Mobile Navigation Buttons */
    .nav-mobile-buttons .nav-mobile-btn {
        background: linear-gradient(45deg, #4F3F02, #D1C287);
        color: #FFFFFF;
        padding: 10px;
        border-radius: 5px;
        text-decoration: none;
        margin: 5px 0;
        display: flex;
        align-items: center;
        transition: background 0.3s, transform 0.3s;
    }

    .nav-mobile-buttons .nav-mobile-btn:hover {
        background: linear-gradient(45deg, #D1C287, #4F3F02);
        transform: scale(1.02);
    }

    /* User Profile */
    .user-profile .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
    }

    /* Dropdown Menu */
    .dropdown-menu a.dropdown-item {
        color: #333333;
        transition: background 0.3s, color 0.3s;
    }

    .dropdown-menu a.dropdown-item:hover {
        background-color: #D1C287;
        color: #000000;
    }
</style>) and mkae it cool design and make the classes name are different and unique and important, and (https://kaakalia.longevacare.com/) and not kaak_alia_management_system, and make it clear and i want the header doesn't effect with other elements