<style>
  .navbar {
    background: linear-gradient(135deg, #8A0000 0%, #B00000 100%);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0;
  }

  .navbar.scrolled {
    background: rgba(138, 0, 0, 0.95);
    padding: 0.75rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .nav-link {
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 5px;
    transition: all 0.3s ease;
    opacity: 0.85;
  }

  .nav-link:hover, .nav-link.active {
    color: #FFC107 !important;
    opacity: 1;
    transform: translateY(-1px);
  }

  .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .navbar-toggler:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
  }

  .navbar-toggler:focus {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.2);
  }

  .navbar-toggler svg {
    width: 22px;
    height: 22px;
  }

  .navbar-toggler svg line {
    transition: all 0.3s ease;
    stroke: #fff;
  }
 
  @media (max-width: 991px) {
      .adj {
          width: 45%;
      }
      .navbar-collapse {
          background: #8A0000;
          margin-top: 1rem;
          padding: 1.5rem;
          border-radius: 15px;
          border: 1px solid rgba(255,255,255,0.1);
      }
  }

  @media (min-width: 991px) {
      .adj {
          width: 26%;
      }
  }

  .VIpgJd-ZVi9od-aZ2wEe-OiiCO.VIpgJd-ZVi9od-aZ2wEe-OiiCO-ti6hGc{
      display:none;
  }
</style>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top shadow">
  <div class="container">
    
	<a class="navbar-brand fw-bolder text-white d-flex align-items-center adj" href="index.php" style="">
        
        <?php if ($use_logo): ?>
            <img src="<?php echo $logo_path; ?>" alt="<?php echo htmlspecialchars($site_settings['site_title'] ?? 'Site Logo'); ?>" style="max-height: 38px; margin-right: 10px;">
        
        <?php else: ?>
            <i class="fa-light fa-plane-circle-check fs-3 text-white me-2"></i>
            <div class="d-flex flex-column" style="line-height: 1.1;">
                <span class="fs-5 fw-900" style="
            FONT-WEIGHT: 900;
            FONT-FAMILY: 'ABC Ginto Nord Unlicensed Trial Black';
        "><?php echo strtoupper(htmlspecialchars($site_settings['site_title'] ?? 'RELI PARCEL')); ?></span>
                <span class="fw-normal mt-n1 text-white" style="font-size: 10px; letter-spacing: 1px; font-weight: 600 !important; FONT-FAMILY: 'ABC Ginto Nord Unlicensed Trial rEGULAR';">
                   DEPENDABLE SERVICE
                </span>
            </div>
        <?php endif; ?>

	</a>
	
	<span class="d-inline d-lg-none">
        <?php include "gtranslate.php"; ?>
    </span>
	
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" class="menu-icon">
        <line x1="3" y1="5" x2="21" y2="6" class="line-1" />
        <line x1="7" y1="12" x2="18" y2="11.5" class="line-2" />
        <line x1="4" y1="18.5" x2="19" y2="18" class="line-3" />
      </svg>
    </button>


<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav ms-auto">
    <li class="nav-item">
      <a class="nav-link" href="index.php">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : '' ?>" href="about.php">About</a>
    </li>
    
	<li class="nav-item">
      <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : '' ?>" href="services.php">Services</a>
    </li>
	
    <li class="nav-item">
      <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : '' ?>" href="index.php#testimonials">Testimonials</a>
    </li>
   

   <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      More  <i class="fas fa-chevron-down"></i>
    </a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="contact.php">Contact Us</a></li>
      <li><a class="dropdown-item" href="quote.php">Request a Quote</a></li>
      
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="careers.php"><i class="bi bi-briefcase-fill me-2"></i> Careers</a></li>
      
      <li class="nav-item dropend">
        <a class="dropdown-item dropdown-toggle" href="privacy_policy.php" data-bs-toggle="dropdown">
            <i class="bi bi-file-text-fill me-2"></i> Policies & Legal
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="policy.php">Privacy Policy</a></li>
            <li><a class="dropdown-item" href="terms_and_conditions.php">Terms & Conditions</a></li>
            <li><a class="dropdown-item" href="sitemap.php">Site Map</a></li>
        </ul>
      </li>
    </ul>
</li>
    <!--<li class="nav-item">
      <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'track.php' ? 'active' : '' ?>" href="track.php">Track Pacrcel</a>
    </li> -->
    <li class="nav-item d-none d-lg-block">
    <?php include "gtranslate.php"; ?>
</li>

  </ul>
  <a href="track.php" class="btn btn-warning fw-bold text-dark rounded-pill ms-lg-3 shadow-lg btn-skew">
    <span class="btn-skew-text">TRACK PARCEL</span>
  </a>
</div>

  </div>
</nav>



<script>
    // --- Mobile Menu Toggle Icon Script (Retained) ---
    const toggler = document.querySelector('.navbar-toggler');
    const navbarCollapse = document.querySelector('#navbarNav');
    
    navbarCollapse.addEventListener('show.bs.collapse', function () {
        toggler.querySelector('.line-1').setAttribute('x1', '5');
        toggler.querySelector('.line-1').setAttribute('y1', '5');
        toggler.querySelector('.line-1').setAttribute('x2', '19');
        toggler.querySelector('.line-1').setAttribute('y2', '19');
        
        toggler.querySelector('.line-2').setAttribute('opacity', '0');
        
        toggler.querySelector('.line-3').setAttribute('x1', '5');
        toggler.querySelector('.line-3').setAttribute('y1', '19');
        toggler.querySelector('.line-3').setAttribute('x2', '19');
        toggler.querySelector('.line-3').setAttribute('y2', '5');
    });
    
    navbarCollapse.addEventListener('hide.bs.collapse', function () {
        
        toggler.querySelector('.line-1').setAttribute('x1', '3');
        toggler.querySelector('.line-1').setAttribute('y1', '5');
        toggler.querySelector('.line-1').setAttribute('x2', '21');
        toggler.querySelector('.line-1').setAttribute('y2', '6');
        
        toggler.querySelector('.line-2').setAttribute('opacity', '1');
        
        toggler.querySelector('.line-3').setAttribute('x1', '4');
        toggler.querySelector('.line-3').setAttribute('y1', '18.5');
        toggler.querySelector('.line-3').setAttribute('x2', '19');
        toggler.querySelector('.line-3').setAttribute('y2', '18');
    });

    // --- NEW: Navbar Scroll Effect ---
    window.addEventListener('scroll', function() {
        const nav = document.querySelector('.navbar');
        if (window.scrollY > 50) {
            nav.classList.add('scrolled');
        } else {
            nav.classList.remove('scrolled');
        }
    });

    // --- NEW: Nested Dropdown Hover Fix (Desktop) ---
    document.addEventListener("DOMContentLoaded", function() {
        // Only enable hover functionality on desktop (>= 992px)
        if (window.innerWidth >= 992) {
            document.querySelectorAll('.dropdown-menu .dropend').forEach(function(dropDownItem){
                
                // When hovering over the parent list item (.dropend)
                dropDownItem.addEventListener('mouseenter', function(e){
                    let menu = e.target.querySelector('.dropdown-menu');
                    // Check if a submenu exists and is currently hidden
                    if (menu && menu.classList.contains('dropdown-menu-end')) {
                        // Stop the link action
                        e.preventDefault(); 
                        // Show the submenu
                        menu.classList.add('show');
                    }
                });

                // When the mouse leaves the parent list item (.dropend)
                dropDownItem.addEventListener('mouseleave', function(e){
                    let menu = e.target.querySelector('.dropdown-menu');
                    // Hide the submenu
                    if (menu) {
                        menu.classList.remove('show');
                    }
                });
            });
        }
    });
</script>