<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Navbar with Tools Dropdown</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --theme-color: #8f184c;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding-top: 120px;
            background-color: #f8f9fa;
        }
        
        .theme-btn {
            border: 2px solid var(--theme-color);
            color: var(--theme-color);
            border-radius: 4px;
            padding: 8px 20px;
            transition: all 0.3s;
        }
        
        .theme-btn:hover {
            background-color: var(--theme-color);
            color: white;
        }
        
        .navbar-nav .nav-link {
            position: relative;
            padding: 0.5rem 1rem;
        }
        
        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background-color: var(--theme-color);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        
        .navbar-nav .nav-link:hover::after {
            width: 70%;
        }
        
        .main-logo {
            height: 50px;
        }
        
        .navbar {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            background-color: white !important;
            padding: 15px 0;
        }
        
        #header-tag-line {
            z-index: 1030;
        }
        
        #main_nav_bar {
            z-index: 1029;
        }
        
        .dropdown-menu {
            border: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 10px;
        }
        
        .dropdown-item {
            border-radius: 6px;
            padding: 8px 15px;
            transition: all 0.2s;
        }
        
        .dropdown-item:hover {
            background-color: #f8f9fa;
            color: var(--theme-color);
        }
        
        .content-section {
            padding: 40px 0;
        }
        
        .content-box {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }
        
        .demo-navbar {
            margin-top: 32px;
        }
    </style>
</head>
<body>
    <!-- Header tag line -->
    <div class="position-fixed top-0 w-100 overflow-hidden" id="header-tag-line" style="background-color: #8f184c; color: #fff; z-index: 1030;">
        <p class="m-0 text-center py-1">Ignoring Marketing Is Like Opening Business But Not Telling Anyone</p>
    </div>

    <!-- Navigation Bar -->
    <nav class="navbar px-lg-5 px-2 w-100 position-fixed demo-navbar" id="main_nav_bar" style="top: 32px; z-index: 1029;">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <img src="https://via.placeholder.com/150x50/8f184c/ffffff?text=Logo" alt="Logo" class="d-inline-block align-text-top main-logo" id="nav-main-logo">
            </a>

            <div class="d-md-flex justify-content-between w-100">
                <!-- Left-aligned navigation items -->
                <div class="d-md-block d-none">
                    <ul class="d-flex gap-5 m-0 p-0 list-unstyled text-uppercase fw-semibold text-dark align-items-center">
                        <li>
                            <a href="/" class="text-decoration-none" style="color: inherit;">Home</a>
                        </li>
                        <li>
                            <a href="/#custom-services-section" class="text-decoration-none" style="color: inherit;">Services</a>
                        </li>
                        <li>
                            <a href="/know-us" class="text-decoration-none" style="color: inherit;">Know Us</a>
                        </li>
                        <li>
                            <a href="/connect" class="text-decoration-none" style="color: inherit;">Connect</a>
                        </li>
                    </ul>
                </div>
                
                <!-- Right-aligned Tools dropdown -->
                <div class="d-md-block d-none">
                    <div class="dropdown">
                        <a class="text-decoration-none dropdown-toggle fw-semibold text-dark" href="#" role="button" id="toolsDropdown" data-bs-toggle="dropdown" aria-expanded="false" style="color: inherit;">
                            Tools
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="toolsDropdown">
                            <li><a class="dropdown-item" href="https://example.com/webcraft">Webcraft</a></li>
                            <li><a class="dropdown-item" href="#">Design Toolkit</a></li>
                            <li><a class="dropdown-item" href="#">SEO Analyzer</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">All Tools</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="d-md-none d-block">
                <button type="button" class="theme-btn bg-transparent text-theme px-3" data-bs-toggle="offcanvas"
                    href="#mainNavOffCanvas" role="button" aria-controls="mainNavOffCanvas">
                    <i class="fa-solid fa-bars-staggered fa-lg"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Mobile Offcanvas Menu -->
    <div class="offcanvas offcanvas-start" tabindex="-1" id="mainNavOffCanvas" aria-labelledby="mainNavOffCanvasLabel">
        <div class="offcanvas-header border-bottom">
            <img src="https://via.placeholder.com/150x50/8f184c/ffffff?text=Logo" alt="" height="40px">
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/">
                        <i class="fa-solid fa-house me-2"></i>
                        Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/#custom-services-section">
                        <i class="fa-solid fa-gears me-2"></i>
                        Services
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/know-us">
                        <i class="fa-solid fa-users me-2"></i>
                        Know Us
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/connect">
                        <i class="fa-solid fa-envelope me-2"></i>
                        Connect
                    </a>
                </li>
                <!-- Mobile Tools Dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa-solid fa-screwdriver-wrench me-2"></i>
                        Tools
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="https://example.com/webcraft">Webcraft</a></li>
                        <li><a class="dropdown-item" href="#">Design Toolkit</a></li>
                        <li><a class="dropdown-item" href="#">SEO Analyzer</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">All Tools</a></li>
                    </ul>
                </li>
            </ul>

            <div class="mt-4 pt-3 border-top">
                <h5 class="mb-3">
                    <span class="text-theme">Let's</span>
                    <span class="text-dark">Connect</span>
                </h5>

                <div class="d-flex flex-wrap gap-3">
                    <a href="#" class="btn btn-sm btn-outline-primary rounded-circle">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="#" class="btn btn-sm btn-outline-dark rounded-circle">
                        <i class="fab fa-x-twitter"></i>
                    </a>
                    <a href="#" class="btn btn-sm btn-outline-danger rounded-circle">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="#" class="btn btn-sm btn-outline-primary rounded-circle">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Demo Content -->
    <div class="container content-section">
        <div class="row">
            <div class="col-12">
                <div class="content-box">
                    <h2>Fixed Navbar with Tools Dropdown</h2>
                    <p>I've fixed the navbar layout to keep the navigation items properly aligned while adding the Tools dropdown to the right side.</p>
                    <p>The Tools dropdown includes "Webcraft" as requested, along with some other example tools.</p>
                    <p>For mobile view, the Tools dropdown is integrated into the offcanvas menu.</p>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="content-box">
                    <h4>Desktop View</h4>
                    <p>On larger screens, the navigation items appear horizontally on the left, with the Tools dropdown on the far right.</p>
                    <p>The dropdown is implemented using Bootstrap's dropdown component.</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="content-box">
                    <h4>Mobile View</h4>
                    <p>On smaller screens, the navigation collapses into a hamburger menu, and the Tools dropdown is included in the offcanvas sidebar.</p>
                    <p>The offcanvas menu slides in from the left when the hamburger icon is tapped.</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>