@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap');

:root {
	--color-yellow: #E57301;
	--color-yellow-hover: #D85B0D;
	--color-green: #1A4040;
	--color-white: #FFF;
	--color-black: #242424;
	--color-alto: #E9ECEC;
	--color-success: #97EF85;
	--color-error: #EF8585;
	--font-primary: "Schibsted Grotesk", sans-serif;
	--size-p: 1rem;
	--size-h1: 3.25rem;
	--size-h2: 2.75rem;
	--size-h3: 2.25rem;
	--size-h4: 2rem;
	--size-h5: 1.5rem;
	--size-h6: 1.25rem;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input:focus {
    outline: none;
}

html {
    overflow-x: hidden;
	font-size: 16px;
}

body {
    overflow-x: hidden;
}	

* {
    box-sizing: border-box;
	font-family: var(--font-primary);
}

.e-con > .e-con-inner {
    max-width: 1216px !important;
    padding-top: 0 !important;
}

.e-con {
    gap: 0px !important;
}

.elementor-element:not(.use-padding) {
    padding: 0 !important;
}

.container {
	max-width: 1216px;
	margin: 0 auto;
}

a {
	text-decoration: none;
}

.header {
	background-color: var(--color-white);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	border-bottom: 1px solid #E0E0E0;
	z-index: 10;
}

.header-wrapper {
	padding: 4px 60px;
    display: grid;
    align-items: center;
    gap: 20px;
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    justify-content: space-between;
}

.header-logo svg {
	width: 138px;
	height: auto;
}

.header-nav {
	display: flex;
    justify-content: center;
    align-items: center;
	height: 100%;
}

.header-nav > ul {
	display: flex;
    align-items: center;
    flex-wrap: wrap;
	height: 100%;
}

.header-nav > ul > li {
	height: 100%;
	position: relative;
}

.header-nav > ul > li > a {
	display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 16px;
	color: var(--color-green);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 120%;
	transition: .3s ease;
	position: relative;
}

.header-nav > ul > li > a:after {
	content: '';
	display: block;
	position: absolute;
	width: calc(100% - 32px);
	height: 2px;
	border-radius: 1000px;
	background-color: var(--color-yellow);
	opacity: 0;
	pointer-events: none;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
	transition: .3s ease;
}

.header-nav > ul > li > a:hover:after {
	opacity: 1;
}

.header-nav > ul > li.item-has-children:hover .menu-children {
	opacity: 1;
	visibility: visible;
	pointer-events: initial;
}

.menu-children {
	display: block;
	border-radius: 20px;
	border: 1px solid #EAEAEB;
	background: var(--color-white);
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.16);
	padding: 10px;
	position: absolute;
	top: calc(100% - 8px);
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: .5s ease;
	width: 220px;
	z-index: 5;
}

.menu-children li a {
	display: block;
    padding: 10px 12px;
    color: var(--color-black);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 140%;
	position: relative;
}

.menu-children li a:after {
	content: '';
	display: block;
	position: absolute;
	width: calc(100% - 20px);
	height: 2px;
	border-radius: 1000px;
	background-color: var(--color-yellow);
	opacity: 0;
	pointer-events: none;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	transition: .3s ease;
}

.menu-children li a:hover:after {
	opacity: 1;
}

.header-actions {
	display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

#open-accessibility-options {
	width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
	transition: .3s ease;
}

#open-accessibility-options:hover {
	cursor: pointer;
	background-color: var(--color-yellow);
}

#open-accessibility-options svg {
	width: 24px;
    height: 24px;
}

#open-accessibility-options svg path {
	transition: .3s ease;
}

#open-accessibility-options:hover svg path {
	fill: var(--color-white);
}

.open-login-popup {
	color: var(--color-green);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 120%;
}

.open-login-popup:hover {
	cursor: pointer;
}

.btn {
	padding: 13px 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: .5s ease;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 120%;
	border-radius: 1000px;
	position: relative;
	clip-path: inset(0 round 999px);
}

.btn-border-green {
	border: 2px solid var(--color-green);
	color: var(--color-green);
}

.btn-border-green:after {
	background-color: var(--color-green);
	border: 2px solid var(--color-green);
}

.btn-border-green:hover {
	color: var(--color-white);
}

.btn-orange {
	background-color: var(--color-yellow);
	border: 2px solid var(--color-yellow);
    color: var(--color-white);
}

.btn-orange:after {
	background-color: var(--color-yellow-hover);
	border: 2px solid var(--color-yellow-hover);
}

.btn span {
	position: relative;
	z-index: 2;
}

.btn:after {
	content: '';
    display: block;
    width: 120%;
    height: 120%;
    border-radius: 1000px;
    position: absolute;
    top: 100%;
    right: 100%;
	opacity: 0;
	transition: .5s ease
}

.btn:hover:after {
	top: -5px;
	right: -5px;
	opacity: 1;
}

.open-register-popup {
	padding: 13px 30px;
}

main {
	padding-top: 75px;
}

.hero-swiper-slide {
	height: 660px;
    width: 100%;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
	position: relative;
}

.hero-swiper-slide:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.hero-swiper-slide .container {
	width: 100%;
}

.hero-slide-content {
	padding-bottom: 80px;
	position: relative;
	z-index: 2;
}

.hero-slide-content-wrapper {
	max-width: 790px
}

.hero-slide-title {
	font-size: var(--size-h1);
    color: var(--color-white);
    font-weight: 700;
    line-height: 110%;
    padding-bottom: 16px;
}

.hero-slide-subtitle {
	font-size: 1.125rem;
    color: var(--color-white);
    font-weight: 500;
    line-height: 140%;
}

.hero-slide-btn-wrapper {
	padding-top: 30px;
}

.hero-slider {
	position: relative;
}

.hero-slider .hero-swiper-pagination {
	position: absolute;
    bottom: 30px;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center
}

.swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 1000px;
	background-color: rgba(255, 255, 255, 0.30);
	transition: .3s ease;
	opacity: 1;
	position: relative;
	overflow: hidden;
}

.hero-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 32px;
	opacity: 1;
}

.dot-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: var(--color-white);
	border-radius: 999px;
	transform: scaleX(0);
	transform-origin: left;
	will-change: transform;
}

.hero-swiper-pagination .swiper-pagination-bullet-active .dot-fill {
  	animation: fillBar 5s linear forwards;
}

@keyframes fillBar {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}