<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 ---------->
<script src="https://kit.fontawesome.com/f5d05f7ae0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://pixner.net/deskoto/main/assets/css/all.min.css">
<link rel="stylesheet" href="http://pixner.net/deskoto/main/assets/css/animate.css">
<link rel="stylesheet" href="http://pixner.net/deskoto/main/assets/css/nice-select.css">
<link rel="stylesheet" href="http://pixner.net/deskoto/main/assets/css/owl.min.css">
<link rel="stylesheet" href="http://pixner.net/deskoto/main/assets/css/magnific-popup.css">
<link rel="stylesheet" href="http://pixner.net/deskoto/main/assets/css/flaticon.css">
<link rel="stylesheet" href="http://pixner.net/deskoto/main/assets/assets/css/main.css">
<script src="http://pixner.net/deskoto/main/assets/js/modernizr-3.6.0.min.js"></script>
<script src="http://pixner.net/deskoto/main/assets/js/plugins.js"></script>
<script src="http://pixner.net/deskoto/main/assets/js/wow.min.js"></script>
<script src="http://pixner.net/deskoto/main/assets/js/waypoints.js"></script>
<script src="http://pixner.net/deskoto/main/assets/js/nice-select.js"></script>
<script src="http://pixner.net/deskoto/main/assets/js/owl.min.js"></script>
<script src="http://pixner.net/deskoto/main/assets/js/magnific-popup.min.js"></script>
<script src="http://pixner.net/deskoto/main/assets/js/main.js"></script>
<header class="header-section active">
<div class="container">
<div class="header-wrapper">
<div class="logo-area">
<div class="logo">
<a href="index.html">
<img src="http://pixner.net/deskoto/main/assets/images/logo/logo.png" alt="logo">
</a></div>
<div class="support">
<a href="#0">Help Center</a>
</div></div>
<ul class="menu">
<li class="menu-item-has-children">
<a href="#">Home</a>
<ul class="submenu">
<li><a href="index.html">Home One</a></li>
<li><a href="index-2.html">Home Two</a></li>
<li><a href="index-3.html">Home Three</a></li>
<li><a href="index-4.html">Home Four</a></li>
<li><a href="index-5.html">Home Five</a></li>
<li><a href="index-6.html">Home Six</a></li>
</ul></li>
<li class="menu-item-has-children">
<a href="#0">Changelog</a>
<ul class="submenu">
<li><a href="changelog.html">Changelog</a></li>
<li><a href="changelog-2.html">Changelog Single</a></li>
</ul></li>
<li class="menu-item-has-children">
<a href="#0">Pages</a>
<ul class="submenu">
<li><a href="about.html">About</a></li>
<li><a href="category-1.html">Category</a></li>
<li><a href="category-2.html">Category Single</a></li>
<li><a href="knowledge-based.html">Knowledge Based</a></li>
<li><a href="knowledge-based-single.html">Knowledge Based Single</a></li>
<li><a href="faq.html">Faqs</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="404.html">404 Error</a></li>
</ul></li>
<li class="d-md-none text-center">
<a href="#0" class="m-0 header-button">Submit a Request</a>
</li></ul>
<div class="header-bar d-lg-none">
<span></span>
<span></span>
<span></span>
</div>
<div class="header-right">
<a href="#0" class="header-button d-none d-md-inline-block">Submit a Request</a>
</div></div></div>
</header>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {font-size: 20px;color: #504c89;line-height: 28px;font-family: 'Poppins', sans-serif;}
.header-section .header-wrapper, .header-section .header-wrapper .logo-area{display:flex;flex-wrap:wrap;}
ul {margin: 0;padding: 0;}
ul li {list-style: none;padding: 5px 0;}
/*Header Section Starts Here*/
.header-section {width: 100%;position: fixed;z-index: 999;top: 5px;-webkit-transition: all ease 0.3s;-moz-transition: all ease 0.3s;transition: all ease 0.3s;padding: 15px 0;color: #0c0026;}
.header-section .header-wrapper {justify-content: space-between;align-items: center;}
.header-section .header-wrapper .logo-area {width: 340px;align-items: center;}
.header-section .header-wrapper .logo-area .logo {width: 177px;margin-right: 20px;}
.header-section .header-wrapper .logo-area .logo a {display: block;}
.header-section .header-wrapper .logo-area .logo a img {width: 100%;}
.header-section .header-wrapper .logo-area .support {padding-left: 20px;border-left: 1px solid #8854e9;font-size: 18px;font-weight: 600;}
.header-section .header-wrapper .logo-area .support a {color: #ffffff;}
@media (max-width: 575px) {
.header-section .header-wrapper .logo-area {width: calc(100% - 40px);}
}
@media screen and (max-width: 575px) and (max-width: 450px) {
.header-section .header-wrapper .logo-area .logo {max-width: 177px;width: calc(60% - 20px);margin-right: 20px;}
.header-section .header-wrapper .logo-area .support {width: 40%;font-size: 12px;padding-left: 10px;}
}
@media (min-width: 992px) {
.header-section .header-wrapper .menu {display: flex;flex-wrap: wrap;justify-content: flex-end;margin-left: auto;margin-right: 15px;}
.header-section .header-wrapper .menu li {padding: 5px;position: relative;}
.header-section .header-wrapper .menu li a {font-weight: 600;text-transform: capitalize;color: #ffffff;padding: 7px 18px;font-size: 18px;}
.header-section .header-wrapper .menu li .submenu {min-width: 200px;background-color: rgba(89, 0, 255, 0.95);box-shadow: 0 0 5px rgba(136, 136, 136, 0.1);display: block;position: absolute;top: 100%;left: 0;-webkit-transform: scaleY(0);-ms-transform: scaleY(0);transform: scaleY(0);transform-origin: top;z-index: 999;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
.header-section .header-wrapper .menu li .submenu li {padding: 0;}
.header-section .header-wrapper .menu li .submenu li a {text-transform: capitalize;font-size: 16px;line-height: 24px;display: flex;justify-content: space-between;padding: 6px 15px;color: #ffffff;width: 100%;font-weight: 400;border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.header-section .header-wrapper .menu li .submenu li a:hover {color: #5900ff;padding-left: 20px;background: #ffffff;}
.header-section .header-wrapper .menu li .submenu li:first-child > a {border-top: 1px solid rgba(255, 255, 255, 0.2);}
.header-section .header-wrapper .menu li .submenu li:last-child > a {border: none;}
.header-section .header-wrapper .menu li .submenu li .submenu {left: 100%;top: 0;-webkit-transform: scaleX(0);-ms-transform: scaleX(0);transform: scaleX(0);transform-origin: left;}
.header-section .header-wrapper .menu li .submenu li:hover > .submenu {-webkit-transform: scaleX(1);-ms-transform: scaleX(1);transform: scaleX(1);}
.header-section .header-wrapper .menu li:hover > .submenu {opacity: 1;visibility: visible;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);display: block !important;}
}
@media (min-width: 992px) and (max-width: 1199px) {
.header-section .header-wrapper .menu {margin-right: 10px;}
.header-section .header-wrapper .menu li a {padding: 5px;font-size: 14px;}
.header-section .header-wrapper .menu li .submenu {min-width: 180px;}
.header-section .header-wrapper .menu li .submenu li a {font-size: 14px;padding: 6px 20px;}
}
@media (max-width: 991px) {
.header-section .header-wrapper .menu {position: absolute;top: 100%;left: 0;width: 100%;max-height: calc(100vh - 130px);z-index: 9;background-color: rgba(89, 0, 255, 0.95);overflow-y: auto;-webkit-transition: all ease 0.3s;-moz-transition: all ease 0.3s;transition: all ease 0.3s;-webkit-transform: scaleY(0);-ms-transform: scaleY(0);transform: scaleY(0);transform-origin: top;}
.header-section .header-wrapper .menu li {width: 100%;padding: 0;}
.header-section .header-wrapper .menu li a {padding: 5px 10px;display: flex;align-items: center;border-top: 1px solid rgba(255, 255, 255, 0.3);font-weight: 500;text-transform: capitalize;justify-content: space-between;color: #ffffff;font-size: 18px;}
.header-section .header-wrapper .menu li a:hover {background: white;color: #5900ff;}
.header-section .header-wrapper .menu li a.header-button {display: inline-flex;padding: 10px 50px;background: #ffffff;border: none;color: #0c0026;margin-bottom: 15px !important;margin-top: 15px !important;}
.header-section .header-wrapper .menu li .submenu {display: none;padding-left: 20px;}
.header-section .header-wrapper .menu li .submenu li a {font-size: 16px;}
.header-section .header-wrapper .menu > li:last-child {border-top: 1px solid rgba(255, 255, 255, 0.3);}
.header-section .header-wrapper .menu.active {-webkit-transform: scaleY(1);-ms-transform: scaleY(1);transform: scaleY(1);}
}
.header-section .header-wrapper .select-bar {border: none;background-color: transparent;}
.header-section .header-wrapper .select-bar::after {border-color: #665cb2;width: 8px;height: 8px;}
.header-section .header-wrapper .select-bar .current {color: #ffffff;text-transform: uppercase;}
.header-section .header-wrapper .header-button {font-size: 18px;font-weight: 600;text-transform: capitalize;padding: 18px 36px 16px;background: #ffffff;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;color: #36088a;}
.header-section .header-wrapper .header-button:hover {background: #ffffff;color: #5900ff;}
@media (max-width: 1199px) {
.header-section .header-wrapper .header-button {margin-left: 12px;padding: 12px 25px 10px;}
}
@media (max-width: 991px) and (min-width: 768px) {
.header-section .header-wrapper .header-button {margin-left: 30px;}
}
.header-section.active {background: #5900ff;top: 0;}
@media (max-width: 991px) {
.header-section.active {background: #5900ff;}
}
.header-section .header-right {align-items: center;}
.menu-item-has-children > a::after {content: "\f0d7";font-weight: 600;font-family: "Font Awesome 5 Free";margin-left: 5px;font-size: 14px;}
/*Header Bar Starts*/
.header-bar {position: relative;cursor: pointer;width: 25px;height: 20px;margin-left: auto;margin-right: 30px;}
.header-bar span {position: absolute;display: inline-block;height: 3px;width: 100%;-webkit-transition: all ease 0.3s;-moz-transition: all ease 0.3s;transition: all ease 0.3s;background-color: #ffffff;left: 0;}
.header-bar span:first-child {top: 0;}
.header-bar span:nth-child(2) {top: 52%;transform: translateY(-65%);}
.header-bar span:last-child {bottom: 0;}
.header-bar.active span:first-child {-webkit-transform: rotate(45deg) translate(3px, 9px);-ms-transform: rotate(45deg) translate(3px, 9px);transform: rotate(45deg) translate(3px, 9px);}
.header-bar.active span:nth-child(2) {opacity: 0;}
.header-bar.active span:last-child {-webkit-transform: rotate(-45deg) translate(3px, -9px);-ms-transform: rotate(-45deg) translate(3px, -9px);transform: rotate(-45deg) translate(3px, -9px);}
@media (max-width: 575px) {
.header-bar {margin-right: 15px;width: 15px;height: 16px;}
.header-bar span {height: 2px;width: 20px;}
.header-bar.active span:first-child {-webkit-transform: rotate(45deg) translate(4px, 6px);-ms-transform: rotate(45deg) translate(4px, 6px);transform: rotate(45deg) translate(4px, 6px);}
.header-bar.active span:nth-child(2) {opacity: 0;}
.header-bar.active span:last-child {-webkit-transform: rotate(-45deg) translate(4px, -6px);-ms-transform: rotate(-45deg) translate(4px, -6px);transform: rotate(-45deg) translate(4px, -6px);}
}
