/* Header */
header {background:#EFEFEF;}
body.page-home header {min-height:350px;}
.logo {max-width:320px; margin:27px 50px 0 0;}
.logo img.desktop {max-width:100%; height:auto;}
.logo img.desktop {display:none;}
.logo img.mobile {height:46px; width:auto;}

header .hamburger-container {position:absolute; top:20px; right:0; display:flex; align-items:center; font-size:var(--fontSize16); letter-spacing:2px; z-index:10;}
header .hamburger > div {pointer-events:none;}
header .hamburger {overflow:visible; margin:0; padding:0; cursor:pointer; transition-timing-function:linear; transition-duration:0.15s; transition-property:opacity,filter,background-color; text-transform:none; border:0; background-color:transparent; width:48px; height:48px; display:flex; justify-content:center; align-items:center;}
header .hamburger .hamburger-box {position:relative; display:inline-block; width:35px; height:27px;}
header .hamburger .hamburger-box .hamburger-inner {transition-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-duration:75ms; top:50%; display:block; margin-top:-2px;}
header .hamburger:hover .hamburger-inner,
header .hamburger:hover .hamburger-inner:after,
header .hamburger:hover .hamburger-inner:before {background-color:var(--green);}
header .hamburger-inner,
header .hamburger-inner:after,
header .hamburger-inner:before {position:absolute; width:35px; height:4px; transition-timing-function:ease; transition-duration:0.15s; transition-property:transform; background-color:var(--mainBrandColour); border-radius:2px;}
header .hamburger-inner:before {top:-12px; transition:top 75ms ease 0.12s, opacity 75ms ease;}
header .hamburger-inner:after,
header .hamburger-inner:before {display:block; content:"";}
header .hamburger-inner:after {bottom:-12px; transition:bottom 75ms ease 0.12s, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);}
header .hamburger.hamburger-close .hamburger-inner {transition-delay:0.12s; transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transform:rotate(45deg);}
header .hamburger.hamburger-close .hamburger-inner::before {top:0; transition:top 75ms ease, opacity 75ms ease 0.12s; opacity:0;}
header .hamburger.hamburger-close .hamburger-inner::after {bottom:0; transition:bottom 75ms ease, transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; transform:rotate(-90deg);}
header .hamburger.hamburger-close:hover .hamburger-inner,
header .hamburger.hamburger-close:hover .hamburger-inner:after,
header .hamburger.hamburger-close:hover .hamburger-inner:before {background-color:var(--green);}
header .hamburger-close .hamburger-inner,
header .hamburger-close .hamburger-inner:after,
header .hamburger-close .hamburger-inner:before {background-color:var(--white);}
header .col-12 {position:relative;}
.header-margin {margin-top:-150px;}

nav ul {list-style:none; margin:0; padding:0;}
nav > ul {display:flex; gap:20px;}
nav li {position:relative;}
nav ul li a:hover, nav ul li button:hover {color:var(--green);}
nav li ul {display:none; position:absolute; top:100%; left:0; min-width:200px; padding:20px; box-shadow:0 10px 25px rgba(0,0,0,0.15); background:#e6e6e6; background:linear-gradient(0deg,rgba(230, 230, 230, 1) 1%, rgba(255, 255, 255, 1) 100%); z-index:1000; flex-direction:column; gap:20px;}
nav li ul li {display:block;}
nav li ul li a {display:block;white-space:nowrap;}
nav ul li.active a, nav ul li.active button {color:var(--green);}
nav li.open > ul {display:flex;}
nav button.dropdown {background:none; border:0; cursor:pointer; font:inherit;}
nav li:has(.active) > button.dropdown {color:var(--green);}

@media (min-width:576px) {
    .logo img.mobile {display:none;}
    .logo img.desktop {display:block;}
}

/* Desktop Nav */
@media (min-width:768px) {
    header .hamburger-container {display:none;}
    nav {margin-top:1rem;}
    nav li:hover > ul {max-height:500px; opacity:1; transform:translateY(0);}
    nav>ul {border-radius:0.6rem; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.2); background:#e6e6e6; background:linear-gradient(0deg,rgba(230, 230, 230, 1) 1%, rgba(255, 255, 255, 1) 100%); gap:0; border:1px solid #ccc;}
    nav>ul>li>a, nav>ul>li>button.dropdown {padding:10px 0 10px 0; display:block; color: var(--mainBrandColour); text-align:center;}
    nav>ul>li>button.dropdown {width:100%;}
    nav li ul {border:1px solid #ccc; border-radius:0.6rem; border-top-left-radius:0;}
    nav>ul>li {flex:1; position:relative;} 
    nav>ul>li::before,nav>ul>li::after {content:''; position:absolute; height:40px; width:1px; background:#ccc; left:0; bottom:0;}
    nav>ul>li:first-child::before {display:none;}
    nav>ul>li:last-child::after {display:none;}
    nav li ul {position:absolute; top:100%; left:0; min-width:200px; padding:20px; background:linear-gradient(0deg, rgba(230,230,230,1) 1%, rgba(255,255,255,1) 100%); box-shadow:0 10px 25px rgba(0,0,0,0.15); display:flex; flex-direction:column; gap:20px; max-height:0; opacity:0; overflow:hidden; transform:translateY(0); transition:max-height 0.3s ease, opacity 0.2s ease, transform 0.2s ease; z-index:1000;}
    /* Home */
    .banner {padding:6rem;}
    .banner::after{right:5%; transform:translateX(30%);}
}

/* Mobile Nav */
@media (max-width:767px) {
    body.nav-open header .hamburger-container {position:fixed; right:28px;}
    nav {padding-top:100px; padding-bottom:100px;}
    nav > ul {flex-direction:column;}
    nav li ul {position:relative; top:auto; left:auto; box-shadow:none; min-width:100%; display:none;}
    nav ul li a, nav ul li button {color:var(--white);}
    nav li ul {background:transparent;}
    nav li.open > ul {display:flex;}
    .nav-overlay {display:flex; flex:0 0 100%; z-index:5; width:100%; position:fixed; left:0; top:0; font-size:var(--fontSize20); height:0; transition:height 0.4s ease-out; overflow-y:scroll; background:var(--grey) url(/images/sk-icon.svg) no-repeat left 6rem; background-size:80vw auto;}
    body.nav-open .nav-overlay {height:100vh;}
}

@media (max-width:1230px) {
    nav li:last-child ul {left:auto; right:0; border-top-right-radius:0; border-top-left-radius:0.6rem;}
}