.home{ header.header.header-v2 { max-width: 1170px; margin: 0 auto; position: absolute; left: 0; right: 0; border-radius: 20px; padding: 10px 0; margin-top: 26px; box-shadow: 0 0 30px 5px #00000026; background: transparent; .navbar{ background-color: #fff; padding: 10px 15px; border-radius: 20px; } } } header.header.header-v2{ a.btn { margin-top: 9px; @include mq(991){ right: 69px; } } } // Header v4 Start .header-4 { padding: 0 !important; ul { margin: 0; } .navbar { padding: 0 !important; } .flyout-canvas-toggler { font-size: 30px; color: #fff; display: flex; align-items: center; justify-content: center; height: 107px; width: 107px; margin-left: 30px; background: $darkmid-clr; &:hover { // background: $primary-clr; color: #000; } @include mq(1085) { display: none; } } .logo { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; position: relative; padding: 0px 10px; height: 107px; background-color: $darkmid-clr; position: relative; @include mq(575) { height: 80px; } &::after { content: ""; display: block; width: 40px; height: 100%; background-color: $darkmid-clr; position: absolute; right: -19px; top: 0; transform: skew(19deg); z-index: -1; transition: .3s; } } .container-fluid { padding-left: 0; } .btn{ @include mq (991){ margin-top: 24px !important; } @include mq (575){ margin-top: 11px !important; } } .phone-num { img { width: 30px; margin-right: 10px; } p { margin-bottom: 0; line-height: 25px } &:nth-of-type(2) { display: none; } &:nth-of-type(3) { display: none; } @include mq (991) { display: none; } } } .phone-num { position: relative; padding-right: 40px; display: flex; align-items: center; i { font-size: 30px; color: $darkmid-clr; padding-right: 15px; } @include mq(1085) { padding-right: 15px; } @include mq(991) { margin: 10px; padding-left: 60px; } } // Header v5 Start .header-5 { background: transparent !important; padding: 0 !important; .middle-bar { border-bottom: 1px solid #ddd; } .container{ position: relative; } @include mq (991) { background: $secoundery-clr !important; } ul { margin: 0; } .logo { padding: 16px 0px; } .navbar { padding: 0 !important; border-bottom: 1px solid #ddd; background: #fff; position: absolute; width: calc(100% - 30px); @include mq (991) { width: 100%; padding: 0 15px !important; left: 0; } } .btn-cta{ padding: 31px !important; min-width: 160px !important; &:hover { background: $secoundery-clr; } @include mq (991) { padding: 15px 25px !important; margin-top: 15px !important; right: 70px !important; } } .topbar { @include mq (991) { display: none; } } .topbar-inner { p { margin-bottom: 0; } ul{ li{ display: inline-block; } } .topinfo a { padding: 0; margin: 4px 10px !important; } .topinfo{ ul{ li{ a{ padding: 0px !important; font-size: 14px !important; width: auto; height: 0; background: transparent; } } } } .socials { a { height: 30px; width: 30px; background: #fff; color: $primary-clr; display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; transition: all 300ms; &:hover { background: $darkmid-clr; color: #fff; } } } } .primary-menu ul { .dropdown-menu{ li{ a{ line-height: 1.5; } } } } .primary-menu ul > li > a { line-height: 3.2; @include mq (991) { padding: 0px 15px 0px 0px!important; line-height: 1; } &:focus { outline: none; } } .primary-menu > ul > li:not(.menu-item-has-children){ &.menu-item-home a{ font-size: 30px !important; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 76px; color: #ffffff !important; background: $darkmid-clr; line-height: 55px !important; font-weight: 400; text-align: center; transition: all 300ms; @include mq (991) { height: auto; width: auto; line-height: 1.7; display: block; text-align: center; display: none; } &:hover { background: $primary-clr; color: #fff; } } } } .middle-bar { background: #f9f9f9 !important; } .middle-inner { padding: 10px 0px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f9f9f9; .middle-cata { display: flex; align-items: center; .phone-num { @include mq (1200) { padding-right: 20px; } border-right: 1px solid $primary-clr; &:last-child{ // border-right: none; } &:nth-of-type(3) { padding-right: 0; border: none; } i { color: $primary-clr; padding-left: 40px; @include mq (1200) { padding-left: 20px; } } span { display: contents; font-size: 18px; color: $darkmid-clr; } a { font-size: 18px; color: $darkmid-clr; } img { width: 30px; margin-right: 10px; margin-left: 30px; } p { margin-bottom: 0; line-height: 25px } } } @include mq (991) { display: none; } } .search-box { position: relative; .search-btn { position: relative; height: 80px; width: 80px; display: flex; align-items: center; justify-content: center; background: $darkmid-clr; cursor: pointer; transition: all 300ms; } a { font-size: 20px; color: #fff; transition: all 300ms; } &:hover { background: $primary-clr; a { color: #fff; } } .search-popup { display: none; position: absolute; top: 100%; width: 300px; right: 100%; margin-top: 0; background: #fff; padding: 15px; box-shadow: 0 10px 15px rgba(51, 47, 59, 0.1); .search-forms { position: relative; // z-index: 999; label{ width: 100%; margin: 0; } .search-field { display: block; width: 100%; height: 50px; line-height: initial; border: 1px solid #eeeeee; color: #111111; outline: 0; padding: 17px; transition: $transition; &:focus { border-color: $primary-clr; } } } .btn{ position: absolute !important; border-radius: 3px; right: 16px; padding: 16px; top: 16px; max-width: 70px; z-index: 9; min-width: 49px !important; height: 48px; transition: $transition; &:hover{ border: none; &:before, &:after{ display: none; } } } @include mq(479) { width: 200px; padding: 10px; right: calc(100% - 60px); } } @include mq(991) { display: none; } } // Header-2 .home header.header.header-2 { width: 100%; border-radius: 0px; margin-top: 0; } .navbar-nav { @include mq(991) { margin: 0; } } .main-header.header-transparent .logo { margin-right: auto; } .logo-box .primary-menu { @include mq(991) { margin-left: 0 !important; z-index: -1; } } .primary-menu ul { @include mq(991) { margin: 0; } }