﻿@keyframes open {
	from { opacity: 0; }
	to { opacity: 1; }
}

:root { --default: #3399ff; --swiper-navigation-size: unset; --swiper-navigation-sides-offset: 0; --swiper-navigation-top-offset: 12px; }
html { scroll-behavior: smooth; }
main { color: #2f2f2f; }
main [data-dialog="dialog-copilot-chat"]:after { content: ""; margin-left: 6px; font-family: "MWF-FLUENT-ICONS"; font-size: 12px; }
main [role="tooltip"] { padding: 4px 8px; border-radius: 3px; font-size: 12px; background-color: #505050; color: #ffffff; display: none; position: absolute; z-index: 999; }
main .bg-hero .card-background { position: relative; overflow: hidden; }
main .bg-hero .card-background picture { height: 240px; display: flex; justify-content: center; }
main .bg-hero .card-background picture img { width: auto; height: 100%; }
main .bg-hero .card-background:before { content: ""; width: 100%; height: 33%; bottom: 0; background-image: linear-gradient(hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.013) 8.1%, hsla(0, 0%, 100%, 0.049) 15.5%, hsla(0, 0%, 100%, 0.104) 22.5%, hsla(0, 0%, 100%, 0.175) 29%, hsla(0, 0%, 100%, 0.259) 35.3%, hsla(0, 0%, 100%, 0.352) 41.2%, hsla(0, 0%, 100%, 0.45) 47.1%, hsla(0, 0%, 100%, 0.55) 52.9%, hsla(0, 0%, 100%, 0.648) 58.8%, hsla(0, 0%, 100%, 0.741) 64.7%, hsla(0, 0%, 100%, 0.825) 71%, hsla(0, 0%, 100%, 0.896) 77.5%, hsla(0, 0%, 100%, 0.951) 84.5%, hsla(0, 0%, 100%, 0.987) 91.9%, hsl(0, 0%, 100%) 100%); position: absolute; z-index: 1; }
main .bg-hero .card-foreground { position: relative; z-index: 2; }
main .chat-table { font-size: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
main .contact { display: flex; flex-direction: column; align-items: center; }
main .contact .icon { height: 80px; margin-bottom: 12px; background-position-x: -700%; }
main .container { padding: 0 12px; }
main .dark-gray { color: #505050; }
main .h-20 { height: 20px; }
main .h-30 { height: 30px; }
main .h-40 { height: 40px; }
main .icon { aspect-ratio: 1; background-image: url("/en-gb/emea/business/get-tech-certified/images/icons.png"); background-size: 800% auto; }
main .immersive-reader { width: 32px; height: 32px; right: 0; top: 0; border: 0; border-radius: 0.2rem; background: #f2f2f2 url("https://ircdname.azureedge.net/permanent-static-resources/immersive-reader-icon.svg") no-repeat 6px 6px; background-size: 20px 20px; position: absolute; }
main .immersive-reader + h1 { padding-right: 52px; }
main .immersive-reader:hover { background-color: #e6e6e6; }
main .instructions { display: flex; gap: 24px; justify-content: center; align-items: center; }
main .instructions .voucher { display: grid; grid-template-columns: auto; flex-basis: 33%; }
main .instructions .voucher .icon { height: 80px; margin: 0 0 12px 0; background-position-x: -600%; justify-self: center; align-self: center; }
main .instructions .voucher strong { display: block; }
main .instructions header { padding-right: 24px; border-right: 1px solid #f2f2f2; flex: 1; align-self: stretch; align-content: center; }
main .link { padding-right: 24px; font-weight: 600; color: #1c5d9e; text-decoration: none; display: inline-block; position: relative; }
main .link:after { content: ""; right: 4px; top: 50%; transform: translateY(-50%); font-family: "MWF-FLUENT-ICONS"; transition: right 0.2s; position: absolute; }
main .link:hover { text-decoration: underline; }
main .link:hover:after { right: 0; }
main .mb-12 { margin-bottom: 12px; }
main .mb-24 { margin-bottom: 24px; }
main .mb-48 { margin-bottom: 48px; }
main .mb-6 { margin-bottom: 6px; }
main .rounded-xl { border-radius: 12px !important; }
main .swiper { margin: 0 -12px 24px -12px; padding: 24px 36px; }
main .swiper-button-next { width: 36px; height: calc(100% - 24px); margin: 0; outline-offset: -3px; background-color: #ffffff; color: #2f2f2f; }
main .swiper-button-next.swiper-button-disabled { opacity: 1; }
main .swiper-button-next.swiper-button-disabled:after { background-color: #ffffff; color: #e6e6e6; }
main .swiper-button-next:after { content: ""; padding: 6px; border-radius: 100px; font-family: "MWF-FLUENT-ICONS"; font-size: 16px; line-height: initial; background-color: #f2f2f2; transition: background-color 0.2s, color 0.2s; }
main .swiper-button-next:not(.swiper-button-disabled):hover:after { background-color: #e6e6e6; }
main .swiper-button-prev { width: 36px; height: calc(100% - 24px); margin: 0; outline-offset: -3px; background-color: #ffffff; color: #2f2f2f; }
main .swiper-button-prev.swiper-button-disabled { opacity: 1; }
main .swiper-button-prev.swiper-button-disabled:after { background-color: #ffffff; color: #e6e6e6; }
main .swiper-button-prev:after { content: ""; padding: 6px; border-radius: 100px; font-family: "MWF-FLUENT-ICONS"; font-size: 16px; line-height: initial; background-color: #f2f2f2; transition: background-color 0.2s, color 0.2s; }
main .swiper-button-prev:not(.swiper-button-disabled):hover:after { background-color: #e6e6e6; }
main .swiper-pagination-horizontal.swiper-pagination { bottom: 0; line-height: 8px; }
main .swiper-pagination-horizontal.swiper-pagination .swiper-pagination-bullet { background-color: #e6e6e6; opacity: 1; }
main .swiper-pagination-horizontal.swiper-pagination .swiper-pagination-bullet-active { background-color: #2f2f2f; }
main .swiper-slide { max-width: 360px; height: auto; display: flex; flex-direction: column; gap: 12px; }
main .swiper-slide .block { padding: 24px; border-radius: 12px; background-color: #f2f2f2; display: flex; flex-direction: column; flex: 1; position: relative; }
main .swiper-slide .block .background { width: calc(100% + 48px); height: 240px; margin-top: -24px; border-radius: 12px 12px 0 0; object-fit: cover; }
main .swiper-slide .block :last-child { margin-bottom: 0; }
main .swiper-slide .block button { margin-bottom: 24px; font-size: 14px; align-self: flex-start; }
main .swiper-slide .block img { margin-bottom: 24px; border-radius: 12px; align-self: center; }
main .swiper-slide .block li { padding-left: 12px; display: flex; gap: 6px; position: relative; cursor: pointer; }
main .swiper-slide .block li a { font-size: 14px; font-weight: 600; line-height: initial; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
main .swiper-slide .block li a:hover { text-decoration: underline; }
main .swiper-slide .block li:before { content: ""; width: 3px; height: 6px; left: 0; top: 50%; transform: translateY(-50%); border-radius: 100px; background-color: #d2d2d2; position: absolute; }
main .swiper-slide .block li:hover a { text-decoration: underline; }
main .swiper-slide .block li:hover span { background-color: #d2d2d2; }
main .swiper-slide .block li:hover:before { background-color: #757575; }
main .swiper-slide .block li:not(:last-child) { margin-bottom: 6px; }
main .swiper-slide .block p { margin-bottom: 24px; font-size: 14px; }
main .swiper-slide .block p a { font-weight: 600; color: #1c5d9e; text-decoration: none; }
main .swiper-slide .block p a:hover { text-decoration: underline; }
main .swiper-slide .block p.max { font-size: 16px; }
main .swiper-slide .block span { margin-left: auto; padding: 2px 8px; border-radius: 3px; font-family: "Cascadia Mono", monospace; font-size: 12px; background-color: #e6e6e6; align-content: center; white-space: nowrap; }
main .swiper-slide .block ul { margin-bottom: 24px; }
main .swiper-slide .block.block-expand-max li a { -webkit-line-clamp: 3; }
main .swiper-slide .block.block-expand-min li a { -webkit-line-clamp: 2; }
main .swiper-slide .block.block-focus { box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); }
main .swiper-slide .block.block-focus ~ .block { flex: 0; }
main .swiper-slide .block.block-further { padding-top: 36px; background-color: #fff5ed; }
main .swiper-slide .block.block-further h4 { color: #9e5d1c; }
main .swiper-slide .block.block-further li:before { background-color: #ff9933; }
main .swiper-slide .block.block-further li:hover span { background-color: #ffe2c8; }
main .swiper-slide .block.block-further li:hover:before { background-color: #9e5d1c; }
main .swiper-slide .block.block-further span { background-color: #ffecdb; color: #9e5d1c; }
main .swiper-slide .block.block-further:before { content: "Go Further"; right: 2px; top: 2px; padding: 4px 12px; border-radius: 0 10px 0 10px; font-size: 12px; font-weight: 600; background-color: #ffe2c8; color: #9e5d1c; position: absolute; }
main .swiper-slide .block.block-started { padding-top: 36px; background-color: #ecf5ff; }
main .swiper-slide .block.block-started h4 { color: #1c5d9e; }
main .swiper-slide .block.block-started li:before { background-color: #3399ff; }
main .swiper-slide .block.block-started li:hover span { background-color: #c6e2ff; }
main .swiper-slide .block.block-started li:hover:before { background-color: #1c5d9e; }
main .swiper-slide .block.block-started span { background-color: #d9ecff; color: #1c5d9e; }
main .swiper-slide .block.block-started:before { content: "Get Started"; right: 2px; top: 2px; padding: 4px 12px; border-radius: 0 10px 0 10px; font-size: 12px; font-weight: 600; background-color: #c6e2ff; color: #1c5d9e; position: absolute; }
main .swiper-slide .block:has(~ .block-focus) { flex: 0; }
main .swiper-slide .block:has(.background):before { content: ""; width: 100%; height: 60px; left: 0; top: 180px; background-image: linear-gradient(hsla(0, 0%, 95%, 0) 0%, hsla(0, 0%, 95%, 0.013) 8.1%, hsla(0, 0%, 95%, 0.049) 15.5%, hsla(0, 0%, 95%, 0.104) 22.5%, hsla(0, 0%, 95%, 0.175) 29%, hsla(0, 0%, 95%, 0.259) 35.3%, hsla(0, 0%, 95%, 0.352) 41.2%, hsla(0, 0%, 95%, 0.45) 47.1%, hsla(0, 0%, 95%, 0.55) 52.9%, hsla(0, 0%, 95%, 0.648) 58.8%, hsla(0, 0%, 95%, 0.741) 64.7%, hsla(0, 0%, 95%, 0.825) 71%, hsla(0, 0%, 95%, 0.896) 77.5%, hsla(0, 0%, 95%, 0.951) 84.5%, hsla(0, 0%, 95%, 0.987) 91.9%, hsl(0, 0%, 95%) 100%); position: absolute; z-index: 1; }
main .swiper-slide .icon { width: 120px; margin-bottom: 24px; background-position-x: -600%; align-self: center; }
main ::backdrop { background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); animation: open 0.2s; }
main a { color: #2f2f2f; }
main button { padding: 6px 12px; border: 0; border-radius: 3px; font-weight: 600; background-color: #e6e6e6; color: #2f2f2f; transition: background-color 0.2s; text-align: left; }
main button:hover { background-color: #d2d2d2; }
main dialog { width: calc(100% - 24px); max-width: 800px; padding: 24px; border: 0; border-radius: 12px; color: #2f2f2f; animation: open 0.2s; }
main dialog .close-dialog { right: 12px; top: 12px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; position: absolute; }
main dialog .close-dialog:before { content: ""; margin-left: 2px; font-family: "MWF-FLUENT-ICONS"; font-size: 12px; }
main h1 { margin: 0; font-size: 22px; }
main h1:has(+ p) { margin-bottom: 12px; }
main h2 { margin: 0; font-size: 20px; }
main h2 .icon { height: 80px; border: 12px solid #f2f2f2; border-radius: 12px; background-color: #f2f2f2; box-sizing: content-box; }
main h2:has(.icon) { display: flex; gap: 12px; align-items: center; }
main h2:has(.icon):nth-of-type(2) .icon { background-position-x: -100%; }
main h2:has(.icon):nth-of-type(3) .icon { background-position-x: -200%; }
main h2:has(.icon):nth-of-type(4) .icon { background-position-x: -300%; }
main h2:has(.icon):nth-of-type(5) .icon { background-position-x: -400%; }
main h2:has(.icon):nth-of-type(6) .icon { background-position-x: -500%; }
main h2:has(+ p) { margin-bottom: 12px; }
main h3 { margin: 0; font-size: 18px; }
main h3:has(+ p) { margin-bottom: 6px; }
main h4 { margin: 0; font-size: 16px; }
main h4:has(+ p) { margin-bottom: 6px; }
main nav { margin: 0 24px; display: grid; gap: 12px; grid-template-columns: repeat(3, min-content); justify-content: center; }
main nav .icon { width: 80px; margin-bottom: 12px; }
main nav a { padding: 12px; border-radius: 12px; font-weight: 600; background-color: #f2f2f2; transition: background-color 0.2s; text-align: center; text-decoration: none; display: flex; flex-direction: column; }
main nav a:after { content: ""; margin-top: 6px; font-family: "MWF-FLUENT-ICONS"; }
main nav a:hover { background-color: #e6e6e6; }
main nav a:nth-of-type(2) .icon { background-position-x: -100%; }
main nav a:nth-of-type(3) .icon { background-position-x: -200%; }
main nav a:nth-of-type(4) .icon { background-position-x: -300%; }
main nav a:nth-of-type(5) .icon { background-position-x: -400%; }
main nav a:nth-of-type(6) .icon { background-position-x: -500%; }
main nav p { margin: auto; font-size: 12px; }
main p { margin: 0; }
main p:has(+ p) { margin-bottom: 12px; }
main strong { font-weight: 600; }
main ul { margin: 0; padding: 0; list-style: none; }

@media screen and (min-width: 540px) {
	main .bg-hero .card-background picture { height: 320px; }
	main .contact .icon { height: 100px; }
	main .instructions .voucher .icon { height: 100px; }
	main nav { grid-template-columns: repeat(3, min-content); }
	main nav .icon { width: 100px; }
	main nav p { font-size: 14px; }
}

@media screen and (min-width: 860px) {
	#mainContent { margin-top: 48px; }
	main .bg-hero .card-background picture { height: 400px; }
	main .instructions { padding: 0 48px; }
	main .instructions .voucher { grid-template-columns: auto auto; }
	main .instructions .voucher .icon { margin: 0 12px 0 0; grid-row: span 3; }
	main .material-blur { background-color: #ffffff; }
	main dialog { padding: 48px; }
	main h1 { font-size: 28px; }
	main h2 { font-size: 24px; }
	main h3 { font-size: 20px; }
	main h4 { font-size: 18px; }
	main nav { grid-template-columns: repeat(6, min-content); }
	main p.max { font-size: 18px; }
}

@media screen and (min-width: 1084px) {
	main .container { padding: 0; }
	main .immersive-reader { right: -24px; top: -24px; }
	main .immersive-reader + h1 { padding-right: 32px; }
	main .instructions { padding: 0 96px; }
	main nav .icon { width: 120px; }
}

@media screen and (min-width: 1400px) {
	main .swiper { margin: 0 0 24px 0; padding: 24px 48px; }
	main .swiper-button-next { width: 48px; }
	main .swiper-button-next:after { padding: 8px; font-size: 18px; }
	main .swiper-button-prev { width: 48px; }
	main .swiper-button-prev:after { padding: 8px; font-size: 18px; }
	main .swiper-slide { gap: 24px; }
	main .swiper-slide .block li a { -webkit-line-clamp: 1; }
}

@media (forced-colors: active) {
	main .swiper-slide .block span { background-color: hotpink !important; }
	main a { color: currentColor !important; }
}
