header {position: fixed; top: 0px; width: 100%;  z-index: 999;}

header .header-wrapper {background: #24053A; color: #fff; border-radius: 0 0 40px 40px;}

header .logo {width: 270px; margin: auto;}

header .header-left {font-weight: 500;}
header .header-left, header .header-right {flex: 1;}
header .header-left > a, header .header-left p {padding: 55px 5px; display: inline-block; cursor: pointer; position: relative; margin: 0 30px; z-index: 0;}
header .header-left > a::before {content: ""; display: block; height: 2px; width: 0%; position: absolute; bottom: 50px; background: var(--orange); left: auto; right:0%; transition: 0.5s;}
header .header-left > a:hover::before {width: 100%; left: 0%; right: auto;}
header .header-left > div {display: inline-block; position: relative; z-index: 1;}
header .header-left p {padding: 30px 50px 30px 30px; margin: 0;}
header .header-left p::before {content: ""; display: block; position: absolute; width: 100%; height: 50px; border-radius: 50vw; border: 1px solid var(--orange); top: 50%; transform: translateY(-50%);left: 0px; opacity: 0;}
header .header-left .active p::before {opacity: 1; transition: 0.5s;}

header .header-right {text-align: right;}
header .header-right .bottom a {margin-right: 10px;}
header .header-right .bottom a:last-child {margin-right: 0px;}
header .header-right .bottom .flex-row .button-outline.circle::before {mask-image: url('/img/account.svg'); mask-size: contain; mask-repeat: no-repeat;}
header .header-right .bottom div {justify-content: flex-end; gap: 15px;}
header .header-right .bottom p {text-transform: capitalize;}
header .header-right .bottom.flex-row {justify-content: flex-end; gap: 15px;}

header .header-right .top {text-align: right; margin-bottom: 20px; display: flex; justify-content: flex-end;}
header .header-right .top a {padding: 0 10px; border-right: 1px solid var(--orange); font-size: 14px;}
header .header-right .top a:last-child {border:0;}

.arrow {position: absolute; width: 17px; top: 32px; right: 15px; height: 17px; transition: 0.5s;  transition-delay: 0.6s; z-index: -1;}
.arrow img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(0deg); width: 100%; transition: 0.5s;}

.active .arrow {transition-delay: 0s;}
.active .arrow img {transform: translate(-50%,-50%) rotate(180deg);}

.dropdown-container { width: 95%; margin: 0 auto; padding: 20px; box-sizing: border-box; background: var(--orange); border-radius: var(--top-left-small);}

.dropdown-wrapper { background: #fff; display: grid; grid-template-columns: 1fr 4fr 1fr; padding: 50px; grid-gap: 50px; width: 95%; margin: 0 auto; box-sizing: border-box; border-radius: var(--top-left-small);}

.dropdown {position: absolute; top: 105%; max-height: 0px; overflow: hidden; width: 100%; height: auto; max-width: 100%; border-radius: 0 30px 30px 30px; box-sizing: border-box; transition: 0.5s; opacity: 0;}
.dropdown.active {max-height: 1000px; opacity: 1;}

.dropdown::after { width: 100vw; max-width: 100%; background: #0005; backdrop-filter: blur(20px) opacity(0); content: ""; display: block; height: 0; z-index: -1; opacity: 0; transition: 0.5s ease; position: fixed; top: 0px; left: 0px;}
.dropdown.active::after { opacity: 1; height: 100dvh; backdrop-filter: blur(20px) opacity(1);}

.toggle-switch {display: flex; align-items: center; position: relative; width: 300px; height: 45px; border: 1px solid var(--orange); border-radius: 50vw; box-sizing: border-box; margin-bottom: 30px;}
.toggle-switch input[type="radio"] { display: none;}
.toggle-switch label {flex: 1; text-align: center; line-height: 40px; cursor: pointer; color: #ff6f61; z-index: 1; font-size: 16px; font-weight: 500; transition: 0.5s;}
.toggle-switch .slider { position: absolute; top: -1px; bottom: -1px; left: -1px; background-color: #ff6f61; border-radius: 50vw; transition: 0.4s ease; z-index: 0; width: 100px;}

#personal:checked ~ .slider { transform: translateX(0);}
#business:checked ~ .slider { transform: translateX(100%);}
#both:checked ~ .slider { transform: translateX(200%);}
#personal:checked + label, #business:checked + label, #both:checked + label { color: #fff;}

.categories-list ul {margin: 0px; list-style: none;}
.categories-list ul li {position: relative; box-sizing: border-box; padding-left: 50px;}
.categories-list ul li a {font-weight: 400; font-size: 16px; margin: 40px 0; display: block; transition: 0.5s; color: #24053A;}
.categories-list ul li a::before {content: ""; display: block; position: absolute; left: 0px; width: 35px; height: 30px; background: #24053A; top: 50%; transform: translateY(-50%); mask-image: url('/img/accessibility-icon.svg'); mask-repeat: no-repeat; mask-size: contain; mask-position: center; transition: 0.5s;}

.categories-list ul li a.self-development::before {mask-image: url('/img/rocket-icon.svg');}
.categories-list ul li a.health-and-safety::before {mask-image: url('/img/construction-icon.svg');}
.categories-list ul li a.hospitality::before {mask-image: url('/img/hospitality-icon.svg');}
.categories-list ul li a.business::before {mask-image: url('/img/business-icon.svg');}
.categories-list ul li a.technology::before {mask-image: url('/img/technology-icon.svg');}
.categories-list ul li a.creativity::before {mask-image: url('/img/creativity-icon.svg');}
.categories-list ul li a.education::before {mask-image: url('/img/education-icon.svg');}

.categories-list ul li a:hover {color: #ff6f61;}
.categories-list ul li a:hover::before {background: #ff6f61;}


.menuSwiper {width: 100%;}
.menuSwiper .product-item figure {height: 0!important; padding-bottom: 100%;}
.menuSwiper .product-item article .title {font-size: 25px; max-width: none;}
.menuSwiper .product-item article .price {font-size: 16px;}

.dropdown-wrapper > div:last-child {display: flex;}
.dropdown-wrapper > div:last-child article {align-self: flex-end;}
.dropdown-wrapper > div:last-child article p {font-weight: 300; font-size: 18px; max-width: 240px; line-height: 1.6; display: block; margin-bottom: 10px;}
.dropdown-wrapper > div:last-child article p strong {font-family: 'RB-Rational-Neue-Mix-Test'; font-weight: 500; font-size: 25px; line-height: 1.3;  margin-bottom: 5px; max-width: none;}
.dropdown-wrapper > div article .button-outline {margin-top: 10px; background: #fff; color: var(--orange); font-weight: 400; padding: 15px 40px;}
.dropdown-wrapper > div article .button-outline:hover {color: #fff;}


.hamburger {width: 50px; height: 25px; position: absolute; cursor: pointer; right: 20px; top: 29px; transition: 0.3s; z-index: 99999; display: none;}
.hamburger span {height: 4px; background: var(--orange); width: 100%; position: absolute; opacity: 1; transition: 0.5s; border-radius: 50px;}
.hamburger span:nth-child(1) {top: 0; width: 50%}
.hamburger span:nth-child(2) {top: 11px;}
.hamburger span:nth-child(3) {bottom: 0; width: 50%; right: 0px;}

.hamburger.active {position: fixed;}

.hamburger.active span:nth-child(2) {opacity: 0; transform: rotate(90deg); top: 15px; }
.hamburger.active span:nth-child(1) {top: 0; transform: rotate(135deg); top: 15px; width: 100%;}
.hamburger.active span:nth-child(3) {bottom: 0; transform: rotate(225deg); top: 15px; width: 100%;}

.mobile-nav {position: fixed; background: #BCB7CC90; width: 100%; top: 0; left: 0%; display: block; height: 100dvh; max-height: 0; transition: 0.5s ease; box-sizing: border-box; z-index: -1; overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(30px);}
.mobile-nav.active {max-height: 100dvh;}

.mobile-nav ul {margin: 0; list-style: none; width: 50%;}
.mobile-nav ul li {position: relative; font-size: 25px; margin-bottom: 20px; font-family: 'RB-Rational-Neue-Mix-Test'; font-weight: 500; line-height: 25px; opacity: 0; transition: 0.5s; overflow: hidden; height: 25px; transition-delay: 0.5s;}
.mobile-nav ul li a, .mobile-nav ul li p {transition: 0.5s; position: absolute; top: 100%; transition-delay: 0.5s;}

.mobile-nav.active ul li {opacity: 1;  }
.mobile-nav.active ul li a, .mobile-nav.active ul li p {top: 0;}

.nav-wrapper {padding: 125px 30px 0; position: relative; left: 0%; width: 200%; box-sizing: border-box; transition: 0.5s;}
.nav-wrapper.active {left: -100%;}

.mobile-options {position: fixed; right: -100%; width: 100%; box-sizing: border-box; padding: 0 30px; transition: 0.5s;}
.nav-wrapper.active .mobile-options {right: 0;}

.back-toggle {position: relative; font-size: 18px; margin-bottom: 20px; display: block;}
.back-toggle::before {content: ""; display: inline-block; position: relative; background: #24053A; mask-image: url('/img/nav-arrow.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; width: 15px; height: 15px; margin-right: 5px;}

.toggle-switch-mobile {display: flex; align-items: center; position: relative; width: 300px; height: 45px; border: 1px solid #24053A; border-radius: 50vw; box-sizing: border-box; margin: 0 auto 20px;}
.toggle-switch-mobile input[type="radio"] { display: none;}
.toggle-switch-mobile label {flex: 1; text-align: center; line-height: 40px; cursor: pointer; color: #24053A; z-index: 1; font-size: 16px; font-weight: 500; transition: 0.5s;}
.toggle-switch-mobile .slider-mobile { position: absolute; top: -1px; bottom: -1px; left: -1px; background-color: #24053A; border-radius: 50vw; transition: 0.4s ease; z-index: 0; width: 100px;}

.toggle-switch-mobile #personal-mobile:checked ~ .slider-mobile { transform: translateX(0); }
.toggle-switch-mobile #business-mobile:checked ~ .slider-mobile { transform: translateX(100%); }
.toggle-switch-mobile #both-mobile:checked ~ .slider-mobile { transform: translateX(200%); }

#personal-mobile:checked + label, #business-mobile:checked + label, #both-mobile:checked + label { color: #fff;}

.mobile-nav .categories-list ul {width: 100%;}
.mobile-nav .categories-list ul li {height: 30px; padding: 0;}
.mobile-nav .categories-list ul li a {margin: 0; position: absolute; line-height: 30px; width: 100%; padding-left: 50px; top: 100%; transition-delay: 0.5s;}
.nav-wrapper.active .categories-list ul li a {top: 0px;}