.navbar {
    display: flex;
    background:linear-gradient(to right, #f5ae40, #daae6b);
    align-items: center;
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

.navbar .logo {
    flex: 1;
    padding-bottom: 0;
    color: #fafafa;
    padding-left: 0.5rem;
}

h2.icon-warehouse::before {
    font-family: "fontello";
    font-weight: normal;
    content: '\e840';
    display: inline-block;
}

/* .navbar .logo:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f6e3';
    font-weight: bold;
} */

.navbar .navbarLists {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.navbar .navbarLists .navbarTop ul {
    display: flex;
    justify-content: center;
    font-size: 1.4rem;
    padding-top: 0.4rem;
    padding-bottom: 0.6rem;
}

.navbar .navbarLists .navbarTop ul a {
    font-weight: 600;
}

.navbar .navbarLists .navbarTop ul li {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    border-bottom: 0.1rem dotted #2f2d19;
    margin-left: 1rem;
}

.navbar .navbarLists .navbarTop ul li a:hover {
    color: #2f2d19;
}

.navbar .navbarLists .navbarBottom ul {
    display: flex;
    padding: 1rem;
    justify-content: space-around;
    background: #2f2d19;
    position: relative;
}

.navbar .navbarLists .navbarBottom ul::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0.2px; left: -2rem;
    width: 3rem;
    transform: skew(-20deg);
    background: #2f2d19;
}

.navbar .navbarLists .navbarBottom ul a:hover {
    color: #f5ae40;
}   

.navbar .navbarLists .navbarBottom ul li a {
    position: relative;
    transition: all 1.4s ease;
    line-height: 1.1;
}

.navbar .navbarLists .navbarBottom ul li a::after {
    content: '\005d';
    position: absolute;
    top: 0; right: -15%;
    opacity: 0;
}   

.navbar .navbarLists .navbarBottom ul li a:hover {
    padding-right: 1rem;
}

.navbar .navbarLists .navbarBottom ul li a:hover::after {
    opacity: 1; right: 0;
}

.navbar .navbarLists .navbarBottom ul li a::before {
    content: '\005b';
    position: absolute;
    top: 0; left: -15%;
    opacity: 0;
}

.navbar .navbarLists .navbarBottom ul li a:hover {
    padding-left: 1rem;
}

.navbar .navbarLists .navbarBottom ul li a:hover::before {
    left: 0; opacity: 1;
}

/* Showcase Content */

.showcaseContent {
    height: 88vh;
    background: url('./img/pexels-photo-271667.jpeg') no-repeat bottom center/cover;
    position: relative;
}

.showcaseContent .actualContent {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(218, 193, 124, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.showcaseContent .actualContent h1.lHeading {
    font-size: 5rem;
    max-width: 50rem;
    text-align: center;
    letter-spacing: 0.4rem;
    padding-bottom: 0;
    background-image: linear-gradient(to right, #4a4742, #5a5853, #6b6964, #7c7b76, #8e8d88);
    font-family: 'Old Standard TT', serif;
    text-transform: uppercase;
    -moz-background-clip: text;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}

.showcaseContent .actualContent p {
    font-size: 1rem;
    max-width: 60rem;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    color: #333333;
}

.showcaseContent .actualContent .buttons {
    padding-top: 4rem;
    text-align: center;
}

.showcaseContent .actualContent .buttons .primaryBtn {
    text-transform: uppercase;
    color: #fafafa;
    background: #2f2d19;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    display: block;
    width: 7rem;
    margin-bottom: 1rem;
}

.showcaseContent .actualContent .buttons .secondaryBtn {
    text-transform: uppercase;
    color: #fafafa;
    background: #f5ae40;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    width: 7rem;
    display: inline-block;
}

.showcaseContent .actualContent .buttons .primaryBtn:hover {
    background: #f5ae40;
    color: #2f2d19;
}


.showcaseContent .actualContent .buttons .secondaryBtn:hover {
    background: #2f2d19;
    color: #f5ae40;
}