@font-face {
    font-family: 'NunitoSans';
    font-weight: 400 800;
    font-display: swap; 
    src: url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets/fonts/NunitoSans-VariableFont_opsz_wdth_wght.ttf');
}
.quote-btn {display:none;}
.quote-btn {position: fixed; top: 64%; right: -42px; transform: rotate(270deg); z-index: 50;}
.quote-btn a {padding: 10px 22px; border-radius: 5px; font-weight:bold; background-color:#d34017;}

.topbar {padding-block: 8px;  background-color:#fbfbfb; --_c-grey: #6c6c6c; --_c-light: #efefef; }
.topbar .wrapper {display: flex; align-items: center; justify-content: space-between;}
.topbar .wrapper > a {display: flex; align-items: center; gap: 5px;}
.topbar * {color: var(--_c-grey);}
.topbar ul {display: flex; align-items: center; gap: 15px;}
.topbar li a:hover {transform: scale(1.25); transition: var(--transition);}

nav:not(.th_breadcrumnb nav) {position: sticky; top: 0; background-color: #fff; z-index: 50; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 20%); --_c-grey: #6e6e6e; --_c-light: #f7f7f7; --_c-border: #dbd9d8;}
nav .wrapper {display: flex; align-items: center; justify-content: space-between; gap: 50px; padding-block: 12px;}
nav .nav_links {display: flex; align-items: center; column-gap: 30px; margin-inline: auto;}
nav .nav_links li a:hover {color: var(--c-primary);}
nav .nav_links > li > a {font-weight: 600; display: flex; align-items: center; gap: 5px; padding-block: 10px;}
nav .nav_links > li > a:hover img {filter: var(--filter-primary);}
nav .nav_links li:has(ul) {position: relative;}
nav .nav_links li:has(ul) > a {position: relative; margin-right: 8px;}
nav .nav_links li:has(ul) > a::before {position: absolute; inset: 0 -15px 0 auto; width: 8px; height: 4px; background: no-repeat center/cover url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint//assets/images/icons/caret-down-fill.svg'); margin: auto; content: '';}
nav .nav_links li:has(ul) > a:hover::before {filter: var(--filter-primary);}
nav .nav_links ul {position: absolute; top: 42px; width: 200px; display: none; background-color: #fff; color: var(--_c-grey); z-index: 50;}
nav .nav_links li li a {width: 100%; color: var(--_c-grey); padding: 9px 10px; border-bottom: 1px solid var(--_c-border); box-shadow: 0 0 4px 0 rgba(0,0,0,15%); margin: 0;}
nav .nav_links li li a:hover {background-color: var(--_c-light);}
nav .nav_links li li a::before {right: 10px; filter: var(--filter-grey); transform: rotate(-90deg);}
nav .nav_links ul ul {top: 0; right: -100%;}
nav form {position: relative; width: 100%; max-width: 242px; margin-left: auto;}
nav form input {width: 100%; height: 50px; padding-left: 56px; border: 1px solid #e7e8e6; border-radius: 5px;}
nav form button {position: absolute; top: 6px; left: 8px; display: flex; align-items: center; justify-content: center; background-color: #f1582d; padding: 10px 11px; border-radius: 5px; border:none;}
nav form button:hover {background-color: #000;}
nav .btn__primary {width: 100%; max-width: 200px;}
nav #nav-toggle {display: none;}
nav, nav * {transition: var(--transition);}

@media only screen and (max-width: 1200px) {
nav .wrapper {gap: 20px;}
nav .nav_links {gap: 20px;}
nav .nav_links li:has(ul) > a {margin-right: 6px;}
nav .nav_links li:has(ul) > a::before {right: -12px;}
nav form {max-width: 220px;}
nav .btn__primary {max-width: 150px;}
}

@media only screen and (min-width: 992px) {
nav .nav_links li:has(ul):hover > ul {display: block;}
}

@media only screen and (max-width: 991px) {
/* Top-Bar */
.topbar {border-bottom: 1px solid var(--_c-light);}
.topbar .wrapper > a {display:none;}
/* Navbar */
nav .wrapper {justify-content: space-between; padding-block:20px;}
nav :is(.nav_links, form, .btn__primary) {display: none;}
nav .nav_links {position: absolute; top: 58px; left: 0; width: 100%; background-color: #fff; padding-inline: 15px; border-radius: 0 0 5px 5px; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 20%);}
nav .nav_links li a {width: 100%;}
nav .nav_links li:has(ul) > a {margin: 0;}
nav .nav_links li:has(ul) > a::before {right: 0;}
nav .nav_links ul {position: static; width: 100%;}
nav .nav_links li li a::before {right: 10px;}
nav .nav_links ul ul a {box-shadow: none;}
nav #nav-toggle {display: block; color: var(--c-primary);}
nav #nav-toggle:hover {color: #000;} 
}

@media only screen and (max-width: 767px) {
nav .logo {max-width: 160px;}
nav #nav-toggle svg {width: 26px;}
}

@media only screen and (max-width: 575px) {
nav .logo {max-width: 140px;}
nav #nav-toggle svg {width: 24px;}
.topbar .wrapper {center;}
.topbar ul {display:none;}
.topbar .wrapper {justify-content: center;}
.quote-btn {display:block;}
}

@media only screen and (max-width: 360px) {
nav .nav_links {padding-inline: 10px;}
nav .nav_links > li > a {padding-block: 8px;}
nav .nav_links > li > a:first-of-type img {width: 13px;}
}