<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<link rel="Stylesheet" href="StyleSheets/960.css" />

<title>BOT Engineering Company Ltd - Homepage</title>
<meta name="description" content="Connecting sellers to buyers.">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-glyphicons.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">

<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">

<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<script src="js/modernizr-2.6.2.min.js"></script>
</head>

<style>

/* GLOBAL */
body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
}

/* ===== NAVBAR ===== */
.custom-nav {
    position: relative;              /* FIX */
    width: 100%;
    background: #777;                /* GREY */
    padding: 15px 0;
    
}

.nav-container {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* BRAND */
.nav-brand {
    color: #fff;                     /* FIX */
    font-size: 20px;
    font-weight: 600;
}

/* MENU */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    color: #fff;                     /* FIX */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.nav-menu a:hover {
    text-decoration: underline;
}

/* ===== DROPDOWN ===== */
.dropdown-item {
    position: absolute;
    top: 28px;
    right: 0;
    min-width: 260px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.25s ease;
}

.dropdown:hover .dropdown-item {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item a {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    color: #000;
}

.dropdown-item a:hover {
    background: #f1f1f1;
}

/* ===== HERO IMAGE ===== */
./* ===== HERO IMAGE ===== */
.carousel {
    width: 100%;
    height: calc(100vh - 70px);  /* navbar height */
    overflow: hidden;
}

.carousel .item,
.carousel .item img {
    width: 100%;
    height: 100%;
}

.carousel .item img {
    object-fit: cover;   /* IMAGE COVERS */
    object-position: center;
}


/* RESPONSIVE */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 10px;
    }

    .nav-menu {
        flex-direction: column;
        align-items: center;
    }

    .dropdown-item {
        right: auto;
        left: 0;
    }
}
@media (max-width: 768px) {
    .carousel {
        height: 60vh;
    }
}


</style>

<body>

<nav class="custom-nav">
    <div class="nav-container">

        <div class="nav-brand">
            BOT Engineering Company Ltd
        </div>

        <ul class="nav-menu">
            <li><a href="#" class="active">HOMEPAGE</a></li>

            <li class="dropdown">
                <a href="#">LOGIN</a>
                <div class="dropdown-item">
                    <a href="../Login.aspx">HR MANAGER LOGIN</a>
                    <a href="../LoginMD.aspx">MD LOGIN</a>
                    <a href="../LoginManager.aspx">LINE MANAGER LOGIN</a>
                    <a href="../LoginPayroll.aspx">PAYROLL LOGIN</a>
                    <a href="../LoginPayslip.aspx">STAFF LOGIN</a>
                    <a href="../LoginProject.aspx">PROJECT LOGIN</a>
                    <a href="../LoginInternal.aspx">INTERNAL CONTROL LOGIN</a>
                    <a href="../LoginAccounts.aspx">FINANCE LOGIN</a>
                    <a href="../LoginStore.aspx">STORES LOGIN</a>
                    <a href="../LoginProcurement.aspx">PROCUREMENT LOGIN</a>
                    <a href="../LoginAsset.aspx">ADMIN MANAGER LOGIN</a>
                    <a href="../LoginSafety.aspx">SAFETY LOGIN</a>
                </div>
            </li>
        </ul>

    </div>
</nav>

<!-- HERO IMAGE -->
<div class="carousel slide" id="myCarousel" data-interval="0">
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/HumanHR.PNG" class="img-responsive" alt="HR Image">
        </div>
    </div>
</div>

<footer></footer>

<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>