.sticky {background-color: var(--clr-primary); padding-block: 10px; width: 100%; position: fixed; top: -100%; z-index: 50;min-height:60px}
/* {Items} */
.sticky .items {display: flex; align-items: center; justify-content: space-between;}
/* {Logo} */
.sticky .logo img {width: 248px;}
/* {Search-Bar} */
.sticky .items :where(ul, ul li, ul li a) {display: inline-flex; align-items: center;}
.sticky ul li:last-child {padding-left: 10px;}
.sticky .search-toggle {padding-right: 10px; border-right: 1px solid #fff;}
.sticky .search-toggle button img {width: 16px; filter: var(--filter-white);}
.sticky .search-toggle form {position: relative;}
.sticky form input[type="search"] {width: 180px; padding: 6px 12px; border: none;}
.sticky form input[type="search"]::placeholder {font-size: var(--fs-400);}
.sticky form input[type="submit"] {position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; background: no-repeat center/cover url(https://www.ybyboxes.com.au/wp-content/themes/ybyboxesca/assets/images/icons/search.svg); border: none; content: '';}
/* {Contact} */
.sticky .items ul a div {padding-left: 10px;}
.sticky .items ul a div > * {display: block; color: #fff;}
.sticky .items ul a div span {font-size: var(--fs-300);}

@media only screen and (width < 767px) {
.sticky .logo img {width: 200px;}
.sticky ul li:last-child a img {display: none;}
.sticky ul li:last-child a div {padding: 0;}
}

@media only screen and (width < 575px) {
.sticky .items {justify-content: center;}
.sticky :where(.logo, .search-toggle) {display: none;}
.sticky ul li:last-child a div {text-align: center;}
.sticky ul li:last-child a div strong {font-size: var(--fs-600);}
}


/* {Top-Bar} */
header .top-bar {height:43px;background-color: var(--clr-light-100); padding-block: 8px;}
/* {Items} */
header .top-bar .items {display: flex; align-items: center; justify-content: space-between;}
/* {Timings & Social-Links} */
header .top-bar :where(.timings, .social-links) {display: inline-flex; align-items: center;}
header .top-bar :where(.timings li:nth-child(2), .social-links li:first-child) {display: inline-flex; align-items: center;}
header .top-bar :where(.timings li:first-child, .social-links li:first-child) {border-right: 1px solid #fff; padding-right: 10px; margin-right: 10px;}
header .top-bar :where(.timings span, .social-links li:first-child a) {padding-inline: 10px; font-size: var(--fs-300); color: #000;}
header .top-bar .social-links li {padding-inline: 6.5px;}
header .top-bar .social-links img {width: 18px;}
/* {Nav-Items} */
header .nav-items {padding-block: 33px; display: flex; align-items: center; justify-content: space-between;}
/* {Logo} */
header .logo img {width: 271px;}
/* {Contact-Links} */
header .contact-links {padding-top: 15px;}
header :where(.contact-links, .contact-links a) {display: flex; align-items: center;}
header .contact-links li {padding-right: 30px;}
header .contact-links li:last-child {padding: 0;}
header .contact-links a div {padding-left: 5px;}
header .contact-links a div > * {display: block;}
header .contact-links a div span {color: var(--clr-light-600); font-size: var(--fs-300);}
header .contact-links a div strong {color: var(--clr-primary);}
/* {Menu} */
header .menu {background-color: var(--clr-primary);}
/* {Menu-Bar} */
header .menu-bar {display: flex; align-items: center; justify-content: space-between;}
/* {Menu-Links} */
header .menu-links .collapse > li > a {padding: 18px 24px; width: 100%;}
header :where(.menu-links, .menu-links .collapse, .menu-links a) {display: flex; align-items: center; color: #fff; width: 100%; text-transform: uppercase;}
header .menu-links > li > a {text-transform: uppercase; font-size: var(--fs-400);}
header .menu-links .collapse > li:nth-child(2) a img {margin-right: 5px;}
/* {Dropdown} */
header .menu-links .drop-down {position: relative; background-color: var(--clr-secondary); width: 285px;}
header .menu-links .drop-down > a {color: #004f99;}
header .menu-links .drop-down a img {margin-right: 15px;}
header :where(.drop-down-menu, .sub-drop-down) {z-index:1;display: none; position: absolute; top: 55px; background-color: #fff; border: 1px solid var(--clr-light-200);}
header .drop-down:hover > .drop-down-menu, .drop-down-menu li:hover > .sub-drop-down {display: block;}

header .drop-down-menu > li {position: relative;}
header .drop-down-menu .dropdown-btn {display: flex; align-items: center; padding: 18px 10px; border-bottom: 1px solid var(--clr-light-200);}
header .drop-down-menu li a div > * {display: block; text-transform: capitalize;}
header .drop-down-menu strong {color: var(--clr-dark-500); margin-bottom: 3px;}
header .drop-down-menu span {font-size: var(--fs-300); color: #878787; line-height: 22px;}
header .drop-down-menu .dropdown-btn button {transform: rotate(90deg); margin-left: auto;}

header .sub-drop-down {top: 0; right: -200px; width: 200px; display:none;}
header .sub-drop-down > li a {padding: 18px 24px; border-bottom: 1px solid var(--clr-light-200);}
header .drop-down-icon {position: absolute; top: 40%; right: 5px; width: 20px; height: 20px; background: no-repeat center/cover url('https://www.ybyboxes.com.au/wp-content/themes/ybyboxesca/assets/images/icons/chevron-right.svg'); cursor: pointer;}
header .sub-drop-down li a {text-transform: capitalize; color: #58595b;}
/* {Collapsed} */
header .menu-links > div button {display: none; background-color: #fff; border-radius: 5px; padding: 5px;}
header .menu-links > div form {display: none;}
/* {Search-Bar} */
header .menu form {position: relative;}
header .menu form input {width: 240px; padding: 10px 38px 10px 12px; border-radius: 5px; border: 1px solid var(--clr-light-200);}
header .menu form button {position: absolute; right: 0; padding: 10px 8px;}
/* {Hover} */
header .top-bar .social-links li:hover img {filter: var(--filter-yellow);}
header :where(.drop-down:hover > .drop-down-menu, .drop-down-menu li:hover > .sub-drop-down) {display: block;}
header :where(.menu-links .collapse > li:hover > a, .sub-drop-down li:hover > a) {color: var(--clr-secondary);}
header .menu-links .collapse[aria-expanded="true"] {display: none;}
header .menu-links .drop-down-menu[aria-expanded="true"] {display: none;}
header .menu-links .sub-drop-down[aria-expanded="true"] {display: none;}
header .menu-links .collapse > li:first-child:hover > a {color: var(--clr-primary);}
header .drop-down-menu > li:hover {background-color: var(--clr-primary);} 
header .drop-down-menu > li:hover img, .drop-down-menu li a:hover:before {filter: var(--filter-white);}
header .drop-down-menu > li:hover div > * {color: #fff;}
header .menu-links .drop-down-menu a:hover {color: var(--clr-secondary);}
/* {MEDIA QUERY} */
@media only screen and (width < 1250px) {
/* (Variables) */
:root {--container: 1100px;}
/* (Modifier Classes) */
.container {padding-inline: 15px;}
.custom__btn-secondary {width: 130px;}
/* (Header) */
header .contact-links {padding: 0;}
header .contact-links li {padding-right: 15px;}
header .menu-links .drop-down {width: 250px;}
header .menu-links .collapse > li > a {padding: 12px;}
header .menu form input {width: 200px;}
header .drop-down-menu {top: 50px;}
header .drop-down-menu > li:before {display: none;}
}
@media only screen and (min-width: 991px) {
header .menu-links .drop-down:hover .drop-down-menu {
display: block;
}

header .drop-down-menu > li:hover .sub-drop-down {
display: block;
}
}
@media only screen and (width < 991px) {
/* (Variables) */
:root {--fs-xl: 30px;}
/* (Modifier Classes) */
.custom__btn-secondary {max-width: 100px;}
/* (Header) */
header .top-bar .timings li:nth-child(2) {display: none;}
header .logo img {width: 215px;}
header .menu-bar {display: block; padding-block: 6px;}
header .menu-links > div {display: flex; align-items: center; justify-content: space-between;}
header .menu-links > div > button {display: block;}
header .menu-links > div form {display: block;}
header .menu-links .collapse {flex-direction: column; align-items: flex-start; position: relative; padding-top: 12px; z-index: 20;}
header .menu-links {display: block;}
header .menu-links .drop-down {width: 100%;}
header .drop-down-menu {  display: none; width: 100%; z-index: 10; position: unset;}
header .sub-drop-down {top: 68px; right: 0; left: 0; width: 100%; z-index: 10; position: unset;}
header .drop-down-menu > li:last-child:hover {height: fit-content;}
header .menu-links > form {display: none;}
header .drop-down-menu > li:not(:last-of-type) >a:before {transform: rotate(90deg);}
}

@media only screen and (width < 767px) {
/* (Variables) */
:root {
--fs-xl: 26px;
--fs-600: 18px;
}
/* (Header) */
header .nav-items {display: block;}
header .logo {margin-bottom: 30px;}
header .logo img {margin-inline: auto; width: 250px;}
header :where(.contact-links, .contact-links a) {justify-content: center;}
}

@media only screen and (width < 575px) {
/* (Variables) */
:root {
--fs-500: 16px;
}
/* (Header) */
header .top-bar .items {justify-content: center;}
header .top-bar .timings {display: none;}
header .contact-links a div {display: none;}
}
@media only screen and (width < 475px) {
/* (Variables) */
:root {
--fs-xl: 22px;
--fs-600: 16px;
--fs-500: 15px;
--fs-400: 15px;
}
/* (Header) */
header .top-bar {padding-block: 11px;height:43px}
header .top-bar .social-links li:first-child {display: none;}
header .navigation {height: 196px;}
}