.header-pos{ //height: 120px; } .header-bottom-info{ height: 40px; background-color: var(--blackColor); width: 100%; } .meneSetting .menuIcon { color: #ffffff; } .meneSetting .menuIcon:hover { color: var(--button); } .menuXs{ display: none; } .headerFlex{ display: flex; justify-content: space-between; color: #ffffff; width: calc(100vw - 80px); margin: 0 auto; line-height: 20px; font-size: 14px; } .headerLeft{ display: flex; align-items: center; } .headerLeft a{ color: rgb(255, 255, 255); } .headerLeft a:hover{ color: var(--button); } .headerLeft i{ font-size: 18px; margin-right: 5px; } .headerLeft .icon-ic_phone{ margin-left: 30px; } .headerCenter{ position: absolute; left: 50%; transform: translate(-50%,0%); word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .headerRight{ display: flex; align-items: center; } .headerRight a { white-space: nowrap; color: rgb(255, 255, 255); margin-right: 12px; } .headerRight a:hover { color: var(--button); } .headerRight a:hover i{ color: var(--button); } .headerRight a i{ font-size: 18px; color: rgb(255, 255, 255); } .headerRight a .icon-ic_siteMap{ font-size: 16px; margin-right: 5px; margin-left: 18px; } .header-bottom-area { left: 0; top: 44px; width: 100%; z-index: 999; background-color: var(--blackColor); height: 80px; } .head_fix{ top: 0; left: 0; width: 100%; z-index: 999; position: fixed; background-color: var(--blackColor); -webkit-box-shadow: 0 2px 28px 0 rgb(0 0 0 / 9%); box-shadow: 0 2px 28px 0 rgb(0 0 0 / 9%); -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; border: none; } .logo { margin-top: 10px; padding: 0; } .logo a img{ width: 128px; height: 48px; object-fit: cover; } .main-menu ul li { display: inline-block; margin: 0 15px; position: relative; } .main-menu ul li a { color: #ffffff; display: block; font-size: 16px; line-height: 20px; padding: 30px 0; text-transform: uppercase; font-weight: 300; } .main-menu ul li .main-menu-item { padding-bottom: 8px } .main-menu ul li:hover .main-menu-item { color: var(--button); border-bottom: 1px solid var(--button); } .main-menu ul li ul li a { font-weight: 400; } .main-menu ul li ul { left: 0; top: 60px; opacity: 0; z-index: 99; border: none; width: 250px; margin-top: 0; display: block; padding: 10px 0; border-radius: 0; position: absolute; visibility: hidden; background: #ffffff; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%); box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%); } .main-menu ul li ul li { display: block; margin: 0; text-align: left; } .main-menu ul li ul li:last-child{border:0} .main-menu ul li:hover ul li a{color: #2A2B39;} .main-menu ul li:hover ul li a:hover{ color: var(--button); } .main-menu ul li ul li a { color: #2A2B39; display: block; font-size: 14px; padding: 9px 20px; position: relative; text-transform: uppercase; } .main-menu ul li:hover ul { opacity: 1; visibility: visible; } .header-bottom-area .container .row > div { position: static; } .main-menu ul li.static{position:static} .inner-container{position:relative} .main-menu ul li .mega-menu { background-color: #2A2B39; left: 0; margin: 0; opacity: 0; padding: 20px 30px; position: absolute; text-align: left; top: 130%; transition: all 0.3s ease 0s; visibility: hidden; width: 100%; z-index: 9999; } .main-menu ul li .mega-menu-2 { background-color: #2A2B39; left: -500px; margin: 0; opacity: 0; padding: 20px 30px; position: absolute; text-align: left; top: 130%; transition: all 0.3s ease 0s; visibility: hidden; width: 923px; z-index: 9999; } .main-menu ul li:hover .mega-menu{opacity:1;visibility:visible;top:100%} .main-menu ul li .mega-menu span { float: left; padding-right: 30px; width: 24.6%; } .main-menu ul li .mega-menu span a.mega-title { border-bottom: 1px solid #ccc; color: #000; font-weight: 600; text-transform: uppercase; } .main-menu ul li .mega-menu span a { color: #444; display: block; font-weight: 400; padding: 8px 0; text-transform: capitalize; } .main-menu ul li:hover .mega-menu span a{color:#444} .main-menu ul li:hover .mega-menu span a:hover{color:var(--button)} .main-menu ul li .mega-menu span.mega-menu-img { padding-right: 0; width: 26%; } .main-menu ul li .mega-menu .mega-left { float: left; width: 75%; } .main-menu ul li .mega-menu .mega-left span { width: 33.33%; } .main-menu ul li .mega-menu .mega-right { float: right; width: 25%; } .main-menu ul li .mega-menu .mega-right span { width: 100%; padding-right: 0; } .meneSetting form { position: relative; } .meneSetting form input { background: #ffffff none repeat scroll 0 0; border: 1px solid #f2f2f2; border-radius: 2px; color: #999999; font-size: 16px; height: 40px; padding-left: 10px; width: 100%; } .header-form { box-shadow: 0 1px 2px rgb(86 86 90 / 50%); background: #ffffff none repeat scroll 0 0; opacity: 0; padding: 10px; position: absolute; right: 0; top: 140%; transition: all 0.3s ease 0s; visibility: hidden; width: 350px; z-index: 2; } .header-form form { margin: 0; } .meneSetting:hover .header-form {opacity:1;top:100%;visibility:visible} .meneSetting form button { background: var(--button) none repeat scroll 0 0; border: 0 none; color: #ffffff; height: 40px; position: absolute; right: 0; top:0; transition: all 0.3s ease 0s; width: 40px; } .meneSetting form button:hover{ background:#2A2B39; } .user-meta { position: relative; } .user-meta .user-meta-title{ } .user-meta > a { color: #ffffff; display: block; font-size: 16px; line-height: 19px; padding: 5px; } .user-meta > a i{ margin-left: 5px; } .user-meta ul { background: #ffffff none repeat scroll 0 0; box-shadow: 0 1px 2px rgba(86, 86, 90, 0.5); opacity: 0; position: absolute; right: 0; text-align: right; top: 120%; transition: all 0.3s ease 0s; visibility: hidden; width: 150px; z-index: 99999; } .user-meta ul li { padding: 5px 10px; text-align: left; } .user-meta ul li a { color: #2A2B39; font-size: 14px; } .user-meta ul li a:hover{color:var(--button)} .user-meta:hover ul { padding: 10px 0px; opacity: 1; top: 100%; visibility: visible; } .header-right { transition: all 0.3s ease 0s; display: flex; justify-content: right; align-items: center; padding: 0; height: 80px; } .pad-17{ padding: 12px 0; } @media (max-width: 991px) { .marginLeft0{ margin-left: -15px; } .marginRight0{ margin-right: -15px; } .menuXs{ display: block; width: 24px; height: 24px; min-height: 24px; margin: 0; margin-right: 15px; } .navbar-toggler i{ font-size: 24px; color: #ffffff; } .dropdown{ margin-bottom: 15px; } .dropdownInput{ height: 44px; border: 1px solid #D5D5D5; color: #222222; font-size: 16px; /* font-family: Raleway-SemiBold, Raleway; */ font-weight: 600; color: #222222; line-height: 44px; display: flex; padding: 0 10px; justify-content: space-between; } .nav-item{ position: relative; border-bottom: 1px solid #D5D5D5; line-height: 24px; padding: 12px 0px; font-size: 16px; font-weight: 600; color: #222222; } .nav-item ul{ display: none; } .nav-item.open ul{ display: block; } .nav-item.open .dropdown-toggle i{ transform: rotate(180deg); } .dropdown-toggle i{ transition: 0.3s; position: absolute; right: 5px; } .nav-item ul li{ font-weight: 400; color: #212529; font-size: 14px; line-height: 20px; padding: 5px 10px; } .nav-item a{ color: #222222; } .dropdown-item{ display: block; width: 100%; padding: .25rem 1.5rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; } .navbar-collapse.in{ overflow-y: visible; } .menuXsList .navbar-nav>li{ float: none; } .menuXsList .navbar-nav{ float: none; } .headerFlex{ display: block; width: calc(100vw - 30px); } .logo{ display: flex; align-items: center; } .headerFlex .logo{ margin-top: 10px; } .headerFlex .logo img{ height: 40px; width: 100px; object-fit: cover; } .header-bottom-info{ height: 104px; text-align: center; } .headerLeft { margin-bottom: 8px; justify-content: center; } .headerRight { justify-content: center; } .headerCenter { position: relative; margin-bottom: 8px; } .header-bottom-area{ top: 104px; } .header-bottom-area { height: 60px; } .header-bottom-area .header-right{ height: 60px; } .head_fix{ top: 0; } .header-search{ position: static; } header { position: static; background: #2d2d2d none repeat scroll 0 0; /* height: 164px; */ } .header-pos{ /* height: 164px; */ } .header-search > i{ font-size: 24px; padding: 21px 5px; } .header-form { right: -15px; width: 100vw; z-index: 99; box-shadow: 0px 1px 0px 0px #d5d5d5; } }