/* =====================================================================
   Main site header (site-nav.php) on lp pages
   Rules copied from root style.css / reponsive.css / my.css / new-pages.css.
   lp differences: header is position relative (not over the banner) and
   menu items, icons, logo and buttons are black instead of white.
   ===================================================================== */

.fs_20px {font-size: 20px;}

/* lp style.css has a global `a { text-transform: uppercase !important }` —
   undo it in the header so the menu is cased like the main site */
header a, .cavasoff_menu a {text-transform: none !important;}
header nav ul li a, .drop_data a {text-transform: capitalize !important;}

/************HEADER CSS*/
header {padding: 0; position: relative !important; top: 0; width: 100%; z-index: 999; background-color: #fff;}
header nav {max-width: 1770px; margin: 0 auto; padding: 10px 0px; border-radius: 100px; background: transparent; position: relative; z-index: 99;}
header ul li {list-style: none; position: relative;}
header nav ul li a {color: #000; font-weight: 500; text-transform: capitalize; font-size: 17px; padding-bottom: 20px;}
header nav ul li a:hover {color: var(--primeColor) !important;}
header ul.menu {gap: 45px;}
header a.hasDrop {position: relative; padding-right: 18px;}
header a.hasDrop:before {content: ""; background-repeat: no-repeat; background-size: contain; width: 12px; height: 12px; position: absolute; right: -2px; top: 7px; background-image: url(../../../assets/images/nav-icon.svg); filter: brightness(0);}
header .wk_search {filter: brightness(0);}

a.header-btn-one {background: transparent !important; color: #000 !important; padding: 17px 20px !important; border: 1px solid #000; border-radius: 100px; font-size: 16px; letter-spacing: -1%; line-height: 16px;}
a.header-btn-one:hover {background: var(--primeColor) !important; border-color: var(--primeColor); color: #fff !important;}
a.header-btn-two {background: #000; border-radius: 50px; padding: 17px 30px; color: #fff; font-size: 16px; font-weight: 500; line-height: 16px; letter-spacing: -2%; display: inline-flex; gap: 12px; border: 1px solid #000; transition: .5s;}
a.header-btn-two img {width: 14px; filter: brightness(0) invert(1);}
a.header-btn-two:hover {background: transparent; border: 1px solid #000; color: #000 !important;}
a.header-btn-two:hover img {filter: brightness(0);}
/************HEADER CSS*/

/************MEGA MENU CSS*/
.mega_menu {position: absolute; z-index: 9; width: 96%; top: 100px; background-color: #fff; padding: 0; left: 0; right: 0; margin: auto; border-radius: 20px; pointer-events: none; opacity: 0; transition: .5s; box-shadow: 0 10px 30px rgba(0, 0, 0, .12);}
.mega_menu .menu_row {padding: 40px; border-top: 1px solid #0000002b; margin: 0;}
.mega_menu .menu_row .col {border-left: 1px solid #0000002b; padding-left: 25px;}
.mega_menu .menu_row .col:first-child, .menu_row .col:last-child {border-left: 0; padding-left: 0;}
.mega_menu .menu_row .col ul li a {color: #000; transition: .5s;}
.mega_menu.activeMenu {opacity: 1 !important; pointer-events: all !important;}
.surface-ul ul, .outdoor-last-col ul {margin-bottom: 15px;}
.searchBox {background-color: transparent; padding: 60px; box-shadow: none;}
a.hasDrop.sreachBtn {padding: 0;}
a.hasDrop.sreachBtn:before {display: none;}
.searchForm {position: relative; width: 80%; margin: auto;}
.searchForm input {width: 100%; border-radius: 50px; border: 1px solid #0000002b !important; padding: 12px 20px; font-size: 18px; box-shadow: 0px 10px 20px 0px #0000001a; outline: none !important; background: rgba(255, 255, 255, 0.90); backdrop-filter: blur(2.6px);}
.searchForm .search__btn {position: absolute; right: 11px; height: 100%; border-radius: 50px; border: 3px solid #fff; font-size: 20px; padding: 0 70px; background-color: var(--primeColor); color: #fff;}
/************MEGA MENU CSS*/

/************HAMBURGER CSS*/
.hamBurger {width: auto; height: auto; float: right; padding: 5px 15px; cursor: pointer; margin-left: 0px; display: flex; align-items: center; border-radius: 100px; gap: 7px; font-size: 16px; font-weight: 600;}
.hamBurger .btn_lines {margin: 0; display: grid; gap: 4px; width: 20px;}
.hamBurger .btn_lines div {height: 2px; width: 100%; background-color: #000; border-radius: 100px;}
.hamBurger div:nth-child(2) {width: 14px;}
/************HAMBURGER CSS*/

/************CANVAS OFF MENU CSS*/
.cavasoff_menu {position: fixed; top: 0; height: 100vh; z-index: 1000; background-color: #fff; width: 100%; right: -100%; padding: 30px 15px 20px; display: grid; justify-content: space-between; transition: right .4s ease;}
.cavasoff_menu.is_open {right: 0;}
.closeBtn {border: none; background-color: transparent;}
.canvasoff_list {height: calc(100vh - 29vh); margin: 45px 0; overflow-y: auto; overflow-x: hidden;}
.menu__link {border: none; background-color: transparent; padding: 0; font-size: 20px; font-weight: 600; color: var(--primeColor); margin: 10px 0; display: inline-block; width: 100%; text-align: left; position: relative;}
.drop_data {display: none;}
.drop_data a {display: inline-block; width: 100%; margin: 2px 0; text-transform: capitalize; padding-left: 10px;}
.has__drop:before {content: ""; position: absolute; right: 0; background-image: url(../../../assets/images/caret-down.png); background-repeat: no-repeat; background-size: contain; width: 12px; height: 100%; background-position: center;}
.sales-btn-mobile {display: none !important;}
/************CANVAS OFF MENU CSS*/

@media (max-width: 1600px) {
	.mega_menu .menu_row {padding: 20px;}
	.mega_menu h6 {font-size: 16px;}
	header ul.menu {gap: 20px !important;}
	.mega_menu ul li a {font-size: 14px;}
	a.header-btn-one {font-size: 14px; padding: 14px 20px !important;}
	a.header-btn-two {padding: 14px 20px; font-size: 14px;}
}
@media (max-width: 1450px) {
	header nav ul li a {font-size: 15px;}
}
@media (max-width: 1366px) {
	header nav ul li a {font-size: 14px;}
}
@media (max-width: 1200px) {
	.mobile-logo-con {width: 25%;}
	.desktop-menu {width: 45%;}
	.mobile-humburger {width: 30%;}
}
@media (max-width: 1199px) {
	header {padding: 15px 20px;}
	header ul.menu {gap: 10px;}
	header nav ul li a {font-size: 13px;}
	header a.hasDrop {padding-right: 14px;}
	header a.hasDrop:before {width: 8px; height: 6px; top: 6px;}
}
@media (max-width: 1036px) {
	a.mobile-link {padding-left: 0px !important;}
	.mobile-logo-con {width: 50% !important;}
	.mobile-humburger {width: 50% !important;}
	span.hamBurger {display: block !important;}
	.desktop-menu {display: none !important;}
	.cavasoff_menu {display: flex !important; flex-direction: column !important; background-color: var(--primeColor) !important;}
	.cavasoff_menu img {filter: none;}
	.drop_data a {color: #fff !important;}
	.menu__link {font-size: 18px !important; font-weight: 500 !important; color: #fff !important;}
}
@media (max-width: 991px) {
	header {padding-bottom: 15px;}
}
@media (max-width: 767px) {
	img.logo {max-width: 113px !important;}
	header nav {padding: 15px 0;}
	header .d-flex {display: block !important;}
	a.mobile-link.menu__link {padding-left: 0px !important;}
	.menu__link {font-size: 16px !important;}
	.drop_data a {padding-left: 10px !important;}
	a.header-btn-one, a.header-btn-two {display: none !important;}
	.sales-btn-mobile {display: block !important; padding: 12px 20px !important; width: fit-content !important;}
	.searchBox {padding: 40px 0 0 0 !important;}
	.searchBox .menu_row {padding: 40px 0 0 0 !important;}
	.searchForm {width: 100%;}
	.searchForm .search__btn {font-size: 15px !important; padding: 0 25px !important;}
	.searchForm input {font-size: 15px !important;}
}