<!-- Header Start -->
<header class="sticky-top">
  <!-- Topbar -->
  <div class="bg-dark text-light py-2 px-3 d-none d-md-block">
    <div class="container-fluid d-flex justify-content-between align-items-center">
      <!-- Phones -->
      <div class="d-flex gap-3 small">
        <span>+01023863459</span>
        <span>+01023864765</span>
        <span>+01023864968</span>
        <span>+01009922651</span>
      </div>
      <!-- Social -->
      <div class="d-flex gap-2">
        <a class="text-white" href="#"><i class="fab fa-facebook-f"></i></a>
        <a class="text-white" href="#"><i class="fab fa-twitter"></i></a>
        <a class="text-white" href="#"><i class="fab fa-linkedin-in"></i></a>
        <a class="text-white" href="#"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-light  container-navbar px-3" >
    <div class="container-fluid">
      <!-- Logo -->
      <a href="#" class="navbar-brand mb-3">
        <img src="{{ asset('images/logo.png') }}" alt="Logo" width="80">
      </a>

      <!-- Toggle -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
        <span class="navbar-toggler-icon custom-link"></span>
      </button>

      <!-- Links -->
      <div class="collapse navbar-collapse " id="navbarCollapse">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0 gap-lg-3 text-center text-lg-start">
          <li class="nav-item"><a href="{{ route('home') }}" class="nav-link active custom-link ">Home</a></li>
          <li class="nav-item"><a href="{{ route('about') }}" class="nav-link custom-link">About</a></li>
          <li class="nav-item">
                <div class="nav-item dropdown">
                    <b class="nav-link cursor-pointer dropdown-toggle custom-link" data-bs-toggle="dropdown">Schools</b>
                    <div class="dropdown-menu bg-light m-0">
                        <a href="{{ route('american') }}" class="dropdown-item ">American School</a>
                        <a href="{{ route('british') }}" class="dropdown-item">British  School</a>
                        <a href="{{ route('international') }}" class="dropdown-item">International School</a>
                    </div>
                    </li>
          <li class="nav-item"><a href="{{ route('fasilities') }}" class="nav-link custom-link">Facilities</a></li>
          <li class="nav-item"><a href="{{ route('careers') }}" class="nav-link custom-link">Career</a></li>
             <li class="nav-item">
                <div class="nav-item dropdown">
                    <b class="nav-link cursor-pointer dropdown-toggle custom-link" data-bs-toggle="dropdown">News</b>
                    <div class="dropdown-menu bg-light m-0">
                        <a href="{{ route(name: 'news') }}" class="dropdown-item ">News</a>
                        <a href="{{ route('events') }}" class="dropdown-item">Events</a>
                    </div>
                    </li>
          <li class="nav-item"><a href="{{ route(name: 'contact') }}" class="nav-link custom-link">Contact Us</a></li>
        </ul>

        <!-- Call Us -->
          <div class="d-none d-md-inline mt-2 mt-lg-0">
                <button class="btn btn-primary px-4 py-2 rounded-pill w-100 w-lg-auto">Call Us</button>
            </div>
      </div>
    </div>
  </nav>
</header>
<!-- Header End -->
