<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>@yield('title')</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <!-- Favicons -->
    <link href="<?= asset('assets') ?>/img/fav.png" rel="icon">
    <link href="<?= asset('assets') ?>/img/fav.png" rel="apple-touch-icon">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">


    <!-- Vendor CSS Files -->
    <link href="<?= asset('assets') ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?= asset('assets') ?>/css/swiper-bundle.min.css" rel="stylesheet">
    <link href="<?= asset('assets') ?>/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="<?= asset('assets') ?>/vendor/aos/aos.css" rel="stylesheet">
    <!-- <link href="<?= asset('assets') ?>/vendor/swiper/swiper-bundle.min.css" rel="stylesheet"> -->
    <link href="<?= asset('assets') ?>/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">

    <!-- Main CSS File -->
    <link href="<?= asset('assets') ?>/css/main.css" rel="stylesheet">

</head>

<body class="index-page">

    <header id="header" class="header sticky-top">

        <div class="topbar d-flex align-items-center dark-background">
            <div class="container d-flex justify-content-center justify-content-md-between">

                <div class="social-links d-none d-md-flex align-items-center">
                    <a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
                    <a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
                    <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
                    <a href="#" class="twitter"><i class="bi bi-youtube"></i></a>

                </div>
                <div class="contact-info d-flex align-items-center">
                    <a href="tel:04422481188">044-2248 1188</a> | <a href="tel:04422481267">044-2248 1267</a> | <a href="tel:04429546667">044-2954 6667</a> | <a href="tel:91893999970">8939999705</a>
                </div>
            </div>
        </div>
        <!-- End Top Bar -->

        <div class="branding d-flex align-items-cente">

            <div class="container position-relative d-flex align-items-center  gap-xl ">
                <a href="<?= route('/') ?>" class="logo d-flex align-items-center">
                    <img src="<?= asset('assets') ?>/img/logo.webp" alt="">
                </a>

                <nav id="navmenu" class="navmenu">
                    <ul>
                        <li><a href="<?= route('/') ?>" class="active">Home</a></li>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="services.html">Products</a></li>
                        <li><a href="projects.html">Blog</a></li>
                        <li><a href="team.html">Career</a></li>
                        <li><a href="<?= route('contact') ?>">Contact</a></li>
                    </ul>
                    <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
                </nav>

            </div>

        </div>

    </header>