<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>
<div class="top-header">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="left-top">
<a href="mailto:info@trushair.com"><i class="fa-solid fa-envelope"></i>info@trushair.com </a>
</div>
</div>
<div class="col-lg-6">
<div class="right-top">
<a href="#" class="login">Log In</a>
<a href="#" class="yellow-btn">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" id="ChangeToggle">
<span class="navbar-toggler-icon" id="navbar-hamburger"></span>
<div id="navbar-close" class="hidden">
<span class="close_ic"><i class="fa-solid fa-xmark"></i></span>
</div>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#">Investment Property</a></li>
<li class="nav-item"><a class="nav-link" href="#">How it work </a></li>
<li class="nav-item"><a class="nav-link" href="#">Premium Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">contact us</a></li>
<li class="nav-item"><a class="nav-link" href="#">log in</a></li>
<li class="nav-item"><a class="nav-link" href="#">sign up</a></li>
</ul>
</div>
<!-- navbar-collapse.// -->
</div>
<!-- container-fluid.// -->
</nav>
</header>
/* ==========================================================================
Global Styles
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sen:wght@400;700;800&display=swap');
article,
aside,
details,
video,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
display: block;
}
html,
body {
width: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: #000;
height: 100%;
font-family: 'Barlow', sans-serif;
font-family: 'Sen', sans-serif;
}
ul li {
margin: 0;
padding: 0;
}
ul {
padding: 0;
margin: 0;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
text-indent: 1px;
text-overflow: "";
}
select::-ms-expand {
display: none;
}
p {
padding: 0;
margin: 0;
font-family: 'Barlow', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 30px;
text-transform: capitalize;
color: #545454;
}
a {
outline: none;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
color: #132953;
}
ul,
ol {
list-style: none;
list-style-image: none;
padding: 0;
margin: 0;
}
select,
input,
button,
a {
outline: none;
}
button:focus {
border: 0;
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: bold;
font-family: 'Barlow', sans-serif;
}
h1 {
font-family: 'Sen', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 60px;
text-transform: capitalize;
}
h2 {
font-family: 'Sen', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 44px;
line-height: 60px;
text-transform: capitalize;
color: #000000;
}
h3 {
font-family: 'Sen', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 22px;
line-height: 26px;
color: #000000;
}
a:hover {
color: #DBBE5F;
}
img {
width: 100%;
}
.py100 {
padding-top: 100px;
padding-bottom: 100px;
}
.pt100 {
padding-top: 100px;
}
.pb100 {
padding-bottom: 100px;
}
.main-bt {
background: linear-gradient(95.58deg, rgba(248, 194, 72, 0.76) 5.52%, rgba(248, 221, 109, 0.83) 58.17%);
border-radius: 5px;
font-family: 'Barlow', sans-serif;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: #000000;
padding: 20px 48px;
display: inline-block;
margin-top: 20px;
text-decoration: none;
text-transform: uppercase;
}
a.main-bt:hover {
background: #000;
color: #fff;
}
/*===================navbar header css====================*/
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.navbar .has-megamenu {
position: static !important;
}
.navbar .megamenu {
left: 0;
right: 0;
width: 100%;
margin-top: 0;
}
}
/* ============ desktop view .end// ============ */
/* ============ mobile view ============ */
@media(max-width: 991px) {
.navbar.fixed-top .navbar-collapse,
.navbar.sticky-top .navbar-collapse {
overflow-y: auto;
max-height: 90vh;
margin-top: 10px;
}
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
background: #fff;
transition: ease-in-out 0.5s;
border: none;
box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}
.navbar-expand-lg .navbar-collapse {
display: flex !important;
flex-basis: auto;
justify-content: end;
}
}
nav.navbar {
padding: 0;
display: flex;
align-items: center;
}
.mega-one ul li a {
text-decoration: none;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-nav li:last-child,
.navbar-nav li:nth-last-child(2) {
display: none;
}
