:root {
  --dark: #15222F;
  --grey: #F8F8F8;
  --orange: #F47B20;
  --font-small: 14px;
}

html { overflow-y: scroll; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth;}

body {font-family: "Be Vietnam Pro", sans-serif!important; color: var(--dark); background: #fff;}

h1 {font-weight: 600; color: var(--dark);}
h2 {font-weight: 600; color: var(--dark);}
h3 {font-weight: 600; font-size: 1.8vw; color: var(--dark);}
h4 {font-weight: 600; font-size: 1.4vw; color: var(--dark);}
h5, header h5, .contact-modal h5, .contact-block h5, .category-banner h5 {font-size: 1.1vw; font-weight: 500; color: var(--orange); margin-bottom: 10px;}
h6 {font-size: 18px; color: var(--orange);font-weight: 600; margin-bottom: 10px;}

a {transition: 0.3s;}
a:hover {color: var(--orange);}

strong {font-weight: 700;}

header {position: sticky; z-index: 999; top: -50px;}
header ul {list-style: none; margin: 0; text-align: left;}
header li {padding: 0; display: block;}
header .wrapper {width: 90%; max-width: 90%; margin: 0 auto; position: inherit;}

.hamburger {flex-direction: column; width: 25px; cursor: pointer; padding: 0px; position: relative; margin: 0!important; display: none;}
.hamburger span { background: var(--orange); border-radius: 5px; height: 4px; margin: 3px 0; transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.hamburger span:nth-of-type(1) { width: 50%; }
.hamburger span:nth-of-type(2) { width: 100%; }
.hamburger span:nth-of-type(3) { width: 75%; }
.hamburger.active span:nth-of-type(1) { transform-origin: bottom; transform: rotateZ(45deg) translate(4px, 2px); }
.hamburger.active span:nth-of-type(2) { transform-origin: top; transform: rotateZ(-45deg); }
.hamburger.active span:nth-of-type(3) { transform-origin: bottom; width: 50%; transform: translate(11px, -6px) rotateZ(45deg);}

.no-scroll {max-height: 100dvh; overflow: hidden;}

.mobile-nav {background: var(--dark); height: 100dvh; opacity: 1; top: 0px; left: 0px; transform: none; margin-top: 0px; border: 0; position: fixed; z-index: -1; max-height:0vh; padding: 0px; box-sizing: border-box; overflow: hidden; width: 100vw; max-width:100%; transition:0.5s;}
.mobile-nav.active {max-height: 100dvh;}

.mobile-nav .nav-wrapper {padding: 70px 20px 25px; overflow: scroll; height: 100%; box-sizing: border-box;}

.mobile-nav .nav-wrapper > ul {list-style: none; margin: 0;}
.mobile-nav .nav-wrapper > ul li {}
.mobile-nav .nav-wrapper > ul li span, .mobile-nav .nav-wrapper > ul li a {display: inline-block; cursor: pointer; padding: 0 !important; margin-bottom: 15px; font-size: 16px !important; position: relative;}
.mobile-nav .nav-wrapper > ul a, .mobile-nav p a {display: block;}
.mobile-nav .nav-wrapper > ul li span::after {content: ""; display: block; position: absolute; background: var(--orange); right: -20px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: 0.3s; mask-repeat: no-repeat; mask-size: contain; mask-position: center; mask-image:url('/img/arrow-small.svg'); width: 12px; height: 6px;}
.mobile-nav .nav-wrapper > ul .parent.active span::after {transform: translateY(-50%) rotate(90deg);}
.mobile-nav .nav-wrapper > ul ul {margin: 0; list-style: none;}
.mobile-nav .nav-wrapper > ul ul li a {font-size: 14px !important; padding-left: 15px!important; margin-bottom: 10px;}
.mobile-nav .nav-wrapper > ul ul li a::before {content: ''; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 8px; height: 1px; background: var(--orange);}
.mobile-nav .nav-wrapper > ul ul li:last-child a {margin-bottom: 20px;}

.mobile-nav .nav-wrapper > a {font-size: 16px; color: #000; display: inline-block; cursor: pointer; position: relative;}

.mobile-nav .nav-wrapper > ul > li > span + ul {height: auto; max-height: 0; overflow: hidden; transition: 0.3s;}

.mobile-nav .nav-wrapper > ul > li.active > span {color: var(--orange);}
.mobile-nav .nav-wrapper > ul > li.active > span + ul {max-height: 1000px;}

.mobile-nav .nav-wrapper .cart {padding-left: 25px!important}
.mobile-nav .nav-wrapper .quote span {margin: 0;}
.mobile-nav .nav-wrapper .quote span::after {display: none;}

.first-nav, .third-nav {display: none;}

.header-top {background: #fff;}
.header-top a, .header-bottom a {font-size: 15px; transition: 0.3s; color: #15222F;}
.header-top a:hover, .header-bottom a:hover {color: var(--orange)!important;}

.header-top .menu-left {display: flex;}
.header-top .menu-left a {font-weight: 600; padding: 15px 25px; line-height: 20px; position: relative;}
.header-top .menu-left a::before {content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: var(--orange); mask-size: contain; mask-position: center; mask-repeat: no-repeat;}
.header-top .menu-left a.login::before {mask-image: url('/img/account-icon.svg');}
.header-top .menu-left a.phone::before {mask-image: url('/img/phone-icon.svg');}

.header-top .menu-right {display: block; width: auto;}
.header-top .menu-right ul {display: flex; justify-content: flex-end;}
.header-top .menu-right ul li a {padding: 15px 7px; display: inline-block; line-height: 20px; font-size: 15px; transition: 0.3s; color: #15222F;}
.header-top .menu-right ul li:last-child {padding-right: 0;}

.header-bottom {background: var(--dark); color: #fff;}
.header-bottom .left {display: flex; align-items: center;}
.header-bottom .left > ul {display: flex; gap: 10px; position: inherit; text-align: left;}
.header-bottom .left > ul > li > a, .header-bottom .left > ul > li > span {font-weight: 500; display: block; padding: 30px 20px; font-size: 20px; color: #fff; position: relative; line-height: 25px;}
.header-bottom .left > ul > li > a::after, .header-bottom .left > ul > li > span::after {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%) rotate(0deg); right: 0; width: 10px; height: 6px; background: #fff; mask-image:url('/img/arrow-small.svg');mask-size: contain; mask-position: center; mask-repeat: no-repeat; transition: 0.3s;}
.header-bottom .left > ul > li > a:hover::after,.header-bottom .left > ul > li > span:hover::after {background: var(--orange); transform: translateY(-50%) rotate(90deg);}

.header-bottom .right {float: none!important;}
.header-bottom .right .minicart {display: flex; justify-content: flex-end; align-items:center;}
.header-bottom .right .minicart a {font-weight: 500; font-size: 16px; line-height: 20px; padding: 32px 15px; position: relative; color: #fff;}
.header-bottom .right .minicart a.cart {padding-left: 25px; margin: 0;}
.header-bottom .right .minicart a.cart::before {content: ''; display: block; position: absolute; top: 49%; transform: translateY(-50%) rotate(0deg); left: 0; width: 15px; height: 16px; background: var(--orange); mask-image:url('/img/cart-icon.svg'); mask-size: contain; mask-position: center; mask-repeat: no-repeat; transition: 0.3s;}
.header-bottom .right .minicart a span {margin-left: 2px; color: var(--orange); margin-bottom: 0!important}
.header-bottom .right .minicart a span::after {display: none;}

.button {display: inline-block; color: #fff; font-weight: 600; font-size: var(--font-small); border-radius: 30px; background: var(--orange); padding: 15px 20px; line-height: 14px; transition: 0.3s; cursor: pointer; outline: 0; font-family: inherit; box-sizing: border-box; border: 1px solid var(--orange); position: relative; text-transform: none; letter-spacing: 0;}
.button:hover {background: var(--dark); color: #fff; border: 1px solid var(--dark);}

.button.dark {background: var(--dark); border: 1px solid var(--dark);}
.button.dark:hover {background: var(--orange); border: 1px solid var(--orange);}

.button.outline {background: #15222F00; border: 1px solid var(--orange); color: var(--dark);}
.button.outline:hover {color: #fff; background: var(--dark); border: 1px solid var(--dark);}

.dark-bg .button:hover {background: #fff; border: 1px solid #fff; color: var(--orange);}
.header-bottom .right .button {border-radius: 30px; padding: 15px 20px;margin-left: 20px; padding-right: 45px;}
.header-bottom .right .button::after {content: ''; display: block; position: absolute; top: 49%; transform: translateY(-50%) rotate(0deg); right: 15px; width: 20px; height: 20px; background: #fff; mask-image:url('/img/search.svg'); mask-size: contain; mask-position: center; mask-repeat: no-repeat; transition: 0.3s;}
.header-bottom .right .button:hover {background: #fff; color: var(--dark)!important; border: 1px solid #fff;}
.header-bottom .right .button:hover::after {background: #000;}

.button.small {border-radius: 11px; padding: 12px 20px; position: relative;}
.button.small.sale {background: #B5EB6E; border: 1px solid #B5EB6E; padding-left: 40px; color: var(--dark);}
.button.small.sale::after {content: ''; display: block; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: var(--dark); width: 18px; height: 18px; mask-size:contain; mask-repeat:no-repeat; mask-position: center; mask-image:url('/img/sale-icon.svg'); transition: 0.3s;}
.button.small.popular {background: #A4DDE8; border: 1px solid #A4DDE8; padding-left: 40px; color: var(--dark);}
.button.small.popular::after {content: ''; display: block; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: var(--dark); width: 18px; height: 16px; mask-size:contain; mask-repeat:no-repeat; mask-position: center; mask-image:url('/img/star-icon.svg'); transition: 0.3s;}

.button.small:hover, .product-item:hover .button.small {background: var(--dark); border: 1px solid var(--dark); color: #fff!important;}
.button.small:hover::after, .product-item:hover .button.small::after {background: #fff;}


.menu-right ul li a:hover {background: none;}

.header-bottom .logo {display: block; width: 200px; padding: 20px 0; margin-right: 2vw;}
header figure img {width: 100%; height: 100%; object-fit: cover;}
header img {width: auto; height: auto;}

.header-bottom .right .minicart.mobile {display: none;}

.parent:hover + .dropdown-menu, .dropdown-menu:hover {max-height: 1000px; padding-top: 15px; }

.dropdown-menu {position: absolute; width: 90%; left: 50%; transform: translateX(-50%); padding-top: 0px; overflow: hidden; max-height: 0px; height: auto; transition: 0.3s;}

.dropdown-wrapper {background: #F7F7F7; border-radius: 10px; box-sizing: border-box; border: 1px solid #BDC6D1; display: grid; grid-template-columns: 430px 1fr; padding: 20px; grid-gap: 50px;}
.dropdown-wrapper ul {flex-direction: column;}
.dropdown-wrapper ul li a {color: var(--dark); padding: 0;}

.dropdown-wrapper .grid {display: grid; grid-template-columns: 1fr 1fr;}
.dropdown-wrapper .grid article {padding: 2vw;}
.dropdown-wrapper .grid article h3 {font-weight: 600; font-size: 1.5vw; color: var(--orange); margin-bottom: 1vw; transition: 0.3s;}
.dropdown-wrapper .grid article a h3:hover {color: var(--dark);}
.dropdown-wrapper .grid ul {}
.dropdown-wrapper .grid ul li a {font-size: 18px; font-weight: 600; display: block; margin-bottom: 15px;}

.dropdown-wrapper .grid .grid {box-sizing: border-box; border: 1px solid #BDC6D1; padding: 0; border-radius: 5px; overflow: hidden;}
.dropdown-wrapper .grid .grid article {padding: 30px; background: #fff;display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.dropdown-wrapper .grid .grid article p {color: var(--dark); margin-bottom: 15px; line-height: 1.5;}
.dropdown-wrapper .grid .grid article .button {color: #fff;}
.dropdown-wrapper .grid .grid figure {height: 100%; width: 100%; overflow: hidden;}

.menu-left-item a, .menu-left-item span {display: grid; box-sizing: border-box; grid-template-columns: 57px 1fr 50px; align-items: center; grid-gap: 20px; padding: 10px!important; border: 1px solid #DBDCDD; border-radius: 10px; background: #fff; transition: 0.3s; margin-bottom: 10px; position: relative;}
.menu-left-item a figure {width: 57px; display: block; height: 57px; border-radius: 5px; overflow: hidden;}
.menu-left-item a::before, .menu-left-item span::before {content: ''; display: block; box-sizing: border-box; border-radius: 50vw; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; background: #F8F8F8; border: 1px solid #E1E3E4; height: 50px; width: 50px; transition: 0.3s; cursor: pointer;}
.menu-left-item a::after, .menu-left-item span::after {content: ''; display: block; position: absolute; top: 50%; right: 28px; transform:translateY(-50%) rotate(270deg); width: 12px; height: 6px; background: #330428; mask-size: contain; mask-position: center; mask-image: url('/img/arrow-small.svg'); mask-repeat: no-repeat; transition: 0.3s;}
.menu-left-item a p, .menu-left-item span p {font-size: 18px; font-weight: 600; transition: 0.3s; color: var(--dark)}
.menu-left-item a p:only-child, .menu-left-item span p:only-child {grid-column: span 2; margin: 10px 0 10px 10px;}
.menu-left-item:last-child a, .menu-left-item:last-child span {margin-bottom: 0;}

.menu-left-item a:hover, .menu-left-item span:hover {background: var(--orange);}
.menu-left-item a:hover p, .menu-left-item span:hover p {color: #fff;}
.menu-left-item a:hover::before, .menu-left-item span:hover::before {background: var(--dark); border: 1px solid var(--dark);}
.menu-left-item a:hover::after, .menu-left-item span:hover::after {background: #fff;}

.menu-right-panel {display: none;}
.menu-right-panel.active { display: block; }

.menu-right-panel ul {display: grid; grid-template-columns: repeat(3,1fr); text-align: left; grid-gap: 15px 1vw;}
.menu-right-panel ul li a {display: inline-block; border-bottom: 1px solid var(--dark);}
.menu-right-panel ul li a:hover {border-bottom: 1px solid var(--orange);}

.menu-right-panel .heading {box-sizing: border-box; border-top: 1px solid #BDC6D1; border-bottom: 1px solid #BDC6D1; padding: 16px 0; margin-bottom: 30px;}
.menu-right-panel .heading p {font-size: 22px; font-weight: 600; color: var(--dark);}
.menu-right-panel .heading .button-row {gap: 10px;}

/* POPUP FORM */

.contact-modal {position: fixed; top: 0; right: 0; width: 100%; height: 100dvh; background: #0005; backdrop-filter: blur(0px); max-width: 0%; transition: 0.2s; z-index: 99999; overflow: hidden;}
.contact-modal.open {max-width: 100%; backdrop-filter: blur(10px);}

.contact-wrapper {background: #fff; box-sizing: border-box; padding: 2vw 2vw; position: absolute; top: 1vw; right: 1vw; border-radius: 10px; width: 600px;}
.contact-wrapper h3 {margin-bottom: 2vw; padding-bottom: 1.5vw; border-bottom: 1px solid #E1E3E4; color: var(--dark); font-family: "Be Vietnam Pro",sans-serif;
  line-height: 1.3; font-weight: 600;}

.grecaptcha-badge {display: none;}

#pop_form {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
#pop_form label {display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; font-family: 'Montserrat';}
#pop_form input {margin: 0; font-size: 15px; line-height: 20px; padding: 15px 30px 15px 15px; text-indent: 0; box-sizing: border-box; border: 1px solid #A7AEB5; border-radius: 5px; width: 100%; transition: 0.4s; font-family: inherit;}
#pop_form textarea {font-size: 15px; border: 1px solid #A7AEB5; border-radius: 5px; margin: 0; height: 140px; padding: 15px 35px 15px 15px; box-sizing: border-box; resize: none; text-indent: 0; width: 100%; transition: 0.3s; font-family: inherit;}
#pop_form .textarea {grid-column: span 2;}

#pop_form .form-field {position: relative;}
#pop_form .form-field::before {content: ''; display: block; background: #fff; width: 10px; height: 10px; position: absolute; right: 15px; top: 60px; transition: 0.5s ease; opacity: 0; mask-image:url('/img/cart-tick.svg'); mask-size:contain; mask-repeat:no-repeat; mask-position: center; z-index: 1;}
#pop_form .form-field::after {content: ''; display: block; background: #2dd284; width: 20px; height: 20px; position: absolute; right: 10px; top: 55px; border-radius: 50vw; transition: 0.5s ease; opacity: 0;}
#pop_form .form-field.valid-input::before {top: 45px; opacity: 1; transition-delay: 0.3s;}
#pop_form .form-field.valid-input::after {top: 40px; opacity: 1; transition-delay: 0.3s;}

#pop_form .form-field.invalid-input::after {top: 40px; opacity: 1; transition-delay: 0.3s; background: url('/img/warning-orange.svg') no-repeat center/contain; border-radius: 0;}

#pop_form .active-focus input, #pop_form .active-focus textarea {border: 1px solid var(--orange);}

.search-wrapper {position: absolute; background: #F8F8F8; z-index: -1; margin-top: 134px; top: 0; left: 0; width: 100%; height: auto; max-height: 0; overflow: hidden; transition: 0.3s; box-sizing: border-box; border: 1px solid #E7E8E9; border-top: 0; box-shadow: 0 0 0 #0005; border-radius: 0 0 10px 10px;}
.search-wrapper.active {max-height: 1000px; box-shadow: 0 0 30px #0005;}

.search-wrapper .wrapper {position: relative;}

.search-wrapper #search_form {padding: 2vw 0;}
.search-wrapper .product-suggestions {position: relative; width: auto !important; box-shadow: none; top: auto; background: none;}
.search-wrapper .product-suggestions .flex-row {align-items: flex-start;}
.search-wrapper .product-suggestions .custom-navigation {margin-bottom: 1vw;}
.search-wrapper h5 strong {font-weight: 500;}

.custom-navigation {display: flex; gap: 10px;}
.custom-prev, .custom-next {display: block; box-sizing: border-box; border-radius: 50vw; position: relative; background: #F8F8F8; border: 1px solid #E1E3E4; height: 50px; width: 50px;transition: 0.3s; cursor: pointer; left: auto; top: auto; transform: none;}
.custom-prev::after, .custom-next::after {content: ''; display: block; position: absolute; top: 50%; left: 52%; transform: translate(-50%,-50%) rotate(90deg); width: 12px; height: 6px; background: #330428; mask-size:contain; mask-position: center; mask-image:url('/img/arrow-small.svg'); mask-repeat: no-repeat; transition: 0.3s;}
.custom-next::after {transform: translate(-50%,-50%) rotate(270deg);}
.custom-prev::after {left: 48%;}

.custom-prev:hover, .custom-next:hover {background: var(--dark); border: 1px solid var(--dark);}
.custom-prev:hover::after, .custom-next:hover::after {background: #fff;}

.title-search {display: block; padding: 0;}
.title-search h5 {font-size: 1.1vw; font-weight: 500; color: var(--orange); margin-bottom: 10px;}

.suggestionSwiper {padding-left: 5%!important;}
.suggestionSwiper::before {content: ''; display: block; position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg,rgb(248, 248, 248) 0%,rgb(248, 248, 248) 90%,rgba(248, 248, 248,0) 100%); width: 5%; z-index: 9;}
.suggestionSwiper .swiper-slide {border: 1px solid #E7E8E9; border-radius: 10px; overflow: hidden; background: #F8F8F8; transition: 0.3s; margin-top: 10px; margin-bottom: 0; box-sizing: border-box; margin-bottom: 2vw;}
.suggestionSwiper .swiper-slide article {box-sizing: border-box; padding: 30px; transition: 0.3s;}
.suggestionSwiper .swiper-slide article p {font-size: 16px; font-weight: 700; color: var(--dark); min-height: 41px;}
.suggestionSwiper .swiper-slide figure {position: relative; height: 0; padding-bottom: 60%; background: #fff; width: 100%;}
.suggestionSwiper .swiper-slide figure .link-icon {position: absolute; top: 20px; left: 20px; z-index: 1;}
.suggestionSwiper .swiper-slide figure img {position: absolute; width: 80%; height: 80%; object-fit: contain; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.suggestionSwiper .swiper-slide:hover {margin-top: 0px; margin-bottom: 10px; background: #F47B2020; border: 1px solid var(--orange);}
.suggestionSwiper .swiper-slide:hover figure .link-icon { background: var(--orange); border: 1px solid var(--orange);}
.suggestionSwiper .swiper-slide:hover figure .link-icon::after {background: #fff;}

.product-rows {padding: 0;}

.search-wrapper .form-field {position: relative; width: 40vw; margin: auto;}
.search-wrapper .form-field .search-button {position: absolute; z-index: 2; width: 20px; height: 20px; display: block; right: 10px; top: 50%; transform: translateY(-50%); padding: 0; background: var(--orange); mask-image:url('/img/search.svg'); mask-size:contain; mask-repeat:no-repeat; mask-position: center;}
.search-wrapper input {margin: 0; font-size: 15px; line-height: 20px; padding: 20px 30px 20px 15px; text-indent: 0; box-sizing: border-box; border: 1px solid #A7AEB5; border-radius: 5px; transition: 0.4s; font-family: inherit; width: 100%;}

.contact-modal #systemMessage p {width: 100%; margin: 0; display: block; margin-bottom: 1vw; margin-top: 0; background: #FFF0E5; color: #F47B21; border: 1px solid #F47B21!important; border-radius: 5px; padding: 20px 20px 20px 55px; box-sizing: border-box; position: relative; font-size: 13px; font-weight: 600;}
.contact-modal #systemMessage p::before {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 20px; width: 18px; height: 18px; background: url('/img/warning-white.svg') no-repeat center/contain;}

.close-icon {padding: 25px; background: #F8F8F8; box-sizing: border-box; border-radius: 50vw; border: 1px solid #E1E3E4; right: 15px; top: 15px; position: absolute; z-index: 9999; overflow: hidden; transition: 0.5s; transform: rotate(180deg); cursor: pointer; left: auto;}
.close-icon::before {content: ''; position: absolute; width: 2px; height: 30px; background: #330428; transform: rotate(45deg); top: 10px; transition: 0.5s;}
.close-icon::after {content: ''; position: absolute; width: 2px; height: 30px; background: #330428; transform: rotate(-45deg); top: 10px; transition: 0.5s;}

.close-icon:hover {}
.close-icon:hover::before {transform: rotate(-135deg) !important;}
.close-icon:hover::after {transform: rotate(-225deg)!important;}

.search-wrapper .close-icon {top: 50px;}

.contact-button {position: fixed; bottom: 15vw; right: 0; writing-mode: sideways-lr; color: #fff; z-index: 999; padding: 20px 7px 20px 10px; background: var(--orange); border-radius: 10px 0 0 10px; transition: 0.3s; cursor: pointer; font-weight:600}
.contact-button:hover {background: var(--dark); padding: 20px 25px 20px 10px;}

.contact-button.open {right: -50px;}

/* FOOTER */

footer {background: none; color: var(--dark)}
footer ul {margin: 0; list-style: none;}
footer ul li {border-bottom: 1px solid #E1E3E4; padding: 10px 0; margin: 0;}
footer ul li a {display: block; font-size: 15px; position: relative; color: var(--dark)!important; font-weight: normal; line-height: 1.4; font-family: inherit;}
footer ul li a::after {content: ''; display: block; position: absolute; top: 55%; right:0px;  transform: translateY(-50%) rotate(270deg); width: 8px; height: 6px; background: var(--orange); mask-size:contain; mask-position: center; mask-image:url('/img/arrow-small.svg'); mask-repeat: no-repeat; transition: 0.3s;}
footer ul li h4 {font-size: 19px; font-weight: 600; margin-bottom: 10px; font-family: inherit; text-transform: capitalize; color: var(--dark); line-height: 1.4;}
footer ul li:first-child {border-bottom: 0; padding-top: 0;}

footer ul li a:hover {color: var(--orange)!important;}

footer .grid-4 {grid-gap: 30px; margin: 3vw auto; width: 85%; max-width: 100%; grid-template-columns: repeat(3,1fr)}

footer .copyright {margin-bottom: 2vw; gap: 5vw; align-items: flex-end; flex-wrap: nowrap; max-width: 85%; border: 0;}
footer .copyright a {opacity: 1;}
footer .copyright p {font-size: 12px; display: block; line-height: 1.6; max-width: 1060px;}
footer .copyright p a {display: inline-block; border-bottom: 1px solid var(--dark); color: var(--dark); opacity: 1; transition: 0.3s;}
footer .copyright p a:hover {border-bottom: 1px solid var(--orange)!important; color: var(--orange)!important}
footer .copyright p:last-child {margin-bottom: 0;}

footer .socials {display: flex; gap: 10px;}
footer .social-link {width: 54px; height: 54px; background: var(--dark); transition: 0.3s; display: block; position: relative; border-radius: 50vw; transition: 0.3s;}
footer .social-link::after {content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; background: #fff; mask-size: contain; mask-position: center; mask-repeat: no-repeat;}

footer .social-link.facebook::after {mask-image:url('/img/facebook.svg');}
footer .social-link.linkedin::after {mask-image:url('/img/linkedin-new.svg');}
footer .social-link.youtube::after {mask-image:url('/img/youtube-new.svg');}
footer .social-link.email::after {mask-image:url('/img/email-new.svg');}

footer .social-link:hover {background: var(--orange);}

@media screen and (max-width: 1650px) {

  :root {
    --font-small: 14px;
  }

  .header-top a, .header-bottom a {font-size: 13px;}

  .header-bottom .left ul li a {font-size: 16px;}
  .header-bottom .right .minicart a {font-size: 14px;}

  .menu-left-item a p {font-size: 16px;}
  .menu-left-item a::before {width: 40px; height: 40px; right: 15px;}

  .dropdown-wrapper {grid-template-columns: 400px 1fr;}
  .dropdown-wrapper ul li a, .product-banner .key-features li {font-size: var(--font-small)!important;}

  .button, .info-content-wrapper .info-grid article .text-link, .home-banner article .button-row a, .testimonials .highlight span {font-size: var(--font-small);}
  .button {padding: 18px 30px}

  .product-banner .panel h2, .product-banner .panel h3 {font-size: var(--font-small);}
  .product-banner .panel p, .product-banner .panel li {font-size: 12px;}
  .product-banner .key-features li {padding-left: 30px;}
  .product-banner .key-features li::before {width: 15px; height: 15px;}
  .product-banner .key-features li.warranty::before {width: 16px; height: 16px;}

  .product-banner .button.dark {padding: 20px;}

  .menu-right-panel .heading p {font-size: 18px;}

}
@media screen and (max-width: 1400px) {

    footer ul li h4 {font-size: 16px; margin-bottom: 5px;}
    footer ul li a {font-size: 13px;}
    footer .copyright p {font-size: 11px;}
    footer .social-link { width: 44px; height: 44px; }
    footer .social-link::after {width: 15px; height: 15px;}

    header .button.small {font-size: 12px !important; padding: 10px 15px; border-radius: 8px;}

    .search-wrapper #search_form {padding: 30px 0;}

    .search-wrapper .close-icon { top: 34px;}

}
@media screen and (max-width: 1300px) {

  header .wrapper {width: 95%; max-width: 95%;}

  h5, header h5, .contact-modal h5, .contact-block h5, .category-banner h5 {font-size: 13px; margin-bottom: 5px!important;}

}

@media screen and (max-width: 1200px) {

  :root{
    --font-small: 12px;
  }

}

@media screen and (max-width: 1024px) {

  .header-bottom .logo {width: 150px; margin-right: 15px;}

  .header-bottom .left ul {gap: 5px;}
  .header-bottom .left ul li a {font-size: 14px;}

  .header-bottom .right .button { margin-left: 10px;}

  footer .grid-4 {grid-template-columns: repeat(2,1fr); margin: 30px auto;}
  footer ul li h4 {margin-bottom: 0;}

}
@media screen and (max-width: 900px) {

  header {top: 0; padding: 0!important}

  .search-wrapper {display: none;}

  .hamburger {display: flex;}

  .header-top {display: none;}

  .header-bottom .flex-row {display: flex;}
  .header-bottom .logo {box-sizing: border-box; height: 65px; padding: 20px 0px 15px;}
  .header-bottom .right .minicart.mobile {display: flex;}
  .header-bottom .left ul, .header-bottom .right .minicart {display: none;}

  .button, .info-content-wrapper .info-grid article .text-link, .home-banner article .button-row a, .testimonials .highlight span { font-size: 12px; }
  .button { padding: 16px 25px; }

    .button {padding: 13px 25px; line-height: 17px;}

  header .wrapper {max-width: 95%; padding: 0;}

  footer .grid-4 {grid-template-columns: 1fr;}

  footer .copyright {margin-bottom: 20px; gap: 20px; flex-wrap: wrap;}
  footer .copyright article {width: 100%; order: 2;}
  footer .copyright p {text-align: center;}

  footer .socials {width: 100%; justify-content: center;}

}

@media screen and (min-width: 768px) and (max-width: 1099px) {
  .header-top {
    display: block !important;
  }
  header .wrapper {
    padding:0;
  }
}