 <!-- Spinner Start -->
    <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->
<style>
    .custom-navbar {
    min-height: 100px; /* Adjust as needed */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .img-logo {
    max-height: 90px;
  }
}

@media (max-width: 768px) {
  .img-logo {
    max-height: 75px !important;
  }
}

</style>

    <!-- Topbar Start -->
    <div class="container-fluid bg-dark px-5">
        <div class="row gx-4 d-none d-lg-flex">
            <div class="col-lg-6 text-start">
                <div class="h-100 d-inline-flex align-items-center py-3 me-4">
                    <div class="btn-sm-square rounded-circle bg-primary me-2">
                        <small class="fa fa-map-marker-alt text-white"></small>
                    </div>
                    <small style="color:#fff;">Level 37, West Tower,
World Trade Centre,
Colombo 01, Sri Lanka</small>
                </div>
               
            </div>
            <div class="col-lg-6 text-end">
                <!--<div class="h-100 d-inline-flex align-items-center py-3 me-4">-->
                <!--    <div class="btn-sm-square rounded-circle bg-primary me-2">-->
                <!--        <small class="fa fa-phone-alt text-white"></small>-->
                <!--    </div>-->
                <!--    <small>+012 345 6789</small>-->
                <!--</div>-->
                <!--<div class="h-100 d-inline-flex align-items-center py-3">-->
                <!--    <div class="btn-sm-square rounded-circle bg-primary me-2">-->
                <!--        <small class="far fa-clock text-white"></small>-->
                <!--    </div>-->
                <!--    <small>Mon - Fri : 9AM - 9PM</small>-->
                <!--</div>-->
                 <div class="h-100 d-inline-flex align-items-center py-3">
                    <div class="btn-sm-square rounded-circle bg-primary me-2">
                        <small class="fa fa-envelope-open text-white"></small>
                    </div>
                    <small style="color:#fff;"><a href="mailto:info@sesecurity.lk" class="border-bottom custom-link">info@sesecurity.lk</a></small>
                </div>
            </div>
        </div>
    </div>
    <!-- Topbar End -->


    <!-- Navbar Start -->
    <!--<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top p-0 px-4 px-lg-5">-->
    <nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5 custom-navbar">
        <!--<a href="index-2.html" class="navbar-brand d-flex align-items-center">-->
        <!--    <h2 class="m-0 text-primary">Securex</h2>-->
        <!--</a>-->
        <a href="index.php" class="navbar-brand d-flex align-items-center">
    <img src="img/sc_logo_new.png" alt="Securex Logo" class="img-fluid img-logo" >
</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav ms-auto py-4 py-lg-0">
                <a href="index.php" class="nav-item nav-link active">Home</a>
                <!--<a href="about.php" class="nav-item nav-link">About</a>-->
                <!--<a href="service.php" class="nav-item nav-link">Services</a>-->
                <!--<a href="solution.php" class="nav-item nav-link">Solutions</a>-->
                <a href="#" class="nav-item nav-link">About</a>
                <a href="#" class="nav-item nav-link">Services</a>
                <a href="#" class="nav-item nav-link">Solutions</a>
                <!--<div class="nav-item dropdown">-->
                <!--    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>-->
                <!--    <div class="dropdown-menu rounded-0 rounded-bottom m-0">-->
                <!--        <a href="feature.html" class="dropdown-item">Feature</a>-->
                <!--        <a href="quote.html" class="dropdown-item">Free Quote</a>-->
                <!--        <a href="team.html" class="dropdown-item">Our Team</a>-->
                <!--        <a href="testimonial.html" class="dropdown-item">Testimonial</a>-->
                <!--        <a href="404.html" class="dropdown-item">404 Page</a>-->
                <!--    </div>-->
                <!--</div>-->
                 <a href="#" class="nav-item nav-link">Contact</a>
                <!--<a href="contact.php" class="nav-item nav-link">Contact</a>-->
            </div>
            <div class="h-100 d-lg-inline-flex align-items-center d-none">
                <!--<a class="btn btn-square rounded-circle bg-light text-primary me-2" href="#"><i class="fab fa-facebook-f"></i></a>-->
                <!--<a class="btn btn-square rounded-circle bg-light text-primary me-2" href="#"><i class="fab fa-twitter"></i></a>-->
                <!--<a class="btn btn-square rounded-circle bg-light text-primary me-2" href="#"><i class="fab fa-linkedin-in"></i></a>-->
                <a class="btn btn-square rounded-circle bg-light text-primary me-0" href="https://instagram.com/sterling_engineering?igshid=YmMyMTA2M2Y=" target="_blank" style="font-size: 1.6rem;color: #000;"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </nav>
    <!-- Navbar End -->