*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
@font-face {font-family: 'inter-regular'; src: url("/assets/fonts/inter-regular.ttf") format('truetype');}
@font-face {font-family: 'inter-medium'; src: url("/assets/fonts/inter-medium.ttf") format('truetype');}
@font-face {font-family: 'inter-bold'; src: url("/assets/fonts/inter-bold.ttf") format('truetype');}

:root {
	--col-highlight: #FFFA00;
	--col-highlight-blue: #7B90F6;
	--col-highlight-red: #DF2027;
	--col-text: #242424;
	--background: linear-gradient(180deg, #191919, #242424);
	--max-width: 960px;
}

body {display: flex; flex-direction: column; align-items: center; background: var(--background); color: white; font-family: inter-regular, arial; margin: auto; outline-color: white; min-height: 100vh;}

.flex {display: flex;} .column {flex-direction: column;}
.gap4 {gap: 4px;} .gap6 {gap: 6px;} .gap32 {gap: 32px;}
.active {font-family: inter-medium, arial; color: var(--col-highlight); border-bottom: 4px solid var(--col-highlight); margin-bottom: -4px;}
.relative {position: relative;}
a {display: block; text-decoration: none; color: white; font-size: 1rem;}
.card {transition: all ease-in-out 0.15s;}
.card:hover {outline: 1px solid var(--col-highlight); transform: scale(1.02) translateY(-2px); transition: all ease-in-out 0.15s;}
img {display: block;}
.btn {padding: .75rem 1rem; background-color: var(--col-highlight); color: var(--col-text); border: 1px solid var(--col-highlight); transition: transform ease-in-out 0.05s;}
.btn:hover {transform: scale(1.05); transition: transform ease-in-out 0.1s;}
.btn-red {display: flex; gap: 0.5rem; align-items: center; background-color: var(--col-highlight-red); color: white; font-size: 0.875rem; border-radius: 9999px; padding: 0.5rem 0.875rem; white-space: nowrap; transition: transform ease-in-out 0.1s;}
.btn-red:hover {transform: scale(1.02);}
.btn-outline {padding: .75rem 1rem; border: 1px solid var(--col-highlight); color: var(--col-highlight); transition: all ease-in-out 0.1s;}
.btn-outline:hover {background-color: var(--col-highlight); color: var(--col-text); transition: all ease-in-out 0.1s;}
.btn-more {width: fit-content; padding: 0.5rem 0.75rem; font-size: 0.75rem; border: 1px solid #404040; transition: all ease 0.2s;}
.btn-more:hover {background-color: var(--col-highlight); color: var(--col-text); border: 1px solid var(--col-highlight);}
.btn-inline {display: inline-block; color: var(--col-highlight); text-decoration: underline; padding: 0rem 0.1rem;}
.btn-inline:hover {background-color: var(--col-highlight); color: var(--col-text);}

.h-w {color: white; font-family: inter-medium, arial;}

b {font-family: inter-bold; font-weight: normal;}
h1 {font-family: inter-bold, arial; font-weight: normal; font-size: 3rem;}
h3 {font-family: inter-regular, arial; font-weight: normal; text-align: center;}
h4 {font-family: inter-regular, arial; font-weight: normal; text-align: center;}

ul {color: white; padding: 0.5rem; margin-left: 1rem;}
li {list-style-type: square; color: orange;}

#notification-banner-top {display: none; padding: 1rem; background-color: var(--col-highlight); color: var(--col-text); text-align: center; width: 100%;}

nav {position: sticky; top: 0; z-index: 1; display: flex; justify-content: center; background-color: #303030; width: 100%;}
nav > div {display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 1rem; width: 100%; max-width: var(--max-width); padding: 0.3rem 1rem; flex-wrap: nowrap;}
nav > div > div {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem;}
nav > div > div > a {position: relative; padding: 0.5rem 1rem; font-size: 0.875rem; transition: border ease-in-out 0.075s;}
nav > div > div > a:hover {border-bottom: 4px solid var(--col-highlight); color: var(--col-highlight); margin-bottom: -4px;}
#btn-hamburger {display: none;}

@media (max-width: 599px) {
	#btn-hamburger {display: block;}
	nav > div {padding: 1rem 1rem;}
	nav > div > div {display: none; position: absolute; right: 0; top: 100%; z-index: 1; gap: 1px; flex-direction: column; justify-content: flex-start; padding: 1px; text-align: right; background-color: #353535; min-width: min(14rem, 70vw);}
	nav > div > div > a {background-color: #292929; transition: none; margin-bottom: 0px; padding: 1rem}
	nav > div > div > a:hover {background-color: #303030; border-bottom: 1px solid var(--col-highlight); margin-bottom: -1px;}
}

.hero-page {position: relative; width: 100%;}
.hero-page > div {display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: auto; padding: 4rem 1rem; max-width: var(--max-width); text-align: center;}

.media-box {position: relative; width: 100%; padding: 3rem 0.75rem; min-height: 12rem;}
.max-container {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; text-align: center; gap: 0.75rem; max-width: var(--max-width); margin: auto;}

.hero {display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; max-width: var(--max-width); margin: auto; text-align: center;}
.bg-media {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.overlay {position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.95));}
.overlay-blue {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,28,70,0.85), rgba(28,28,70,0.96));}
.overlay-dim {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.75));}

.call-to-action {display: flex; gap: 0.5rem; margin-top: 1.5rem;}

.services-landing-page {position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: var(--max-width); margin: auto;}
.service-card {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.5rem 1rem; outline: 1px solid #26375B; flex: 1 1 0; min-width: 240px; text-align: center; transition: all ease-in-out 0.15s;}
.service-card > :nth-child(3) {text-align: center; font-family: inter-bold, arial; font-size: 1rem;}
.service-card > :nth-child(4) {font-size: 0.875rem; color: #dddddd;}
.service-card > :last-child {font-size: 0.75rem; padding: 0.5rem 1rem; color: var(--col-highlight); border: 1px solid var(--col-highlight); border-radius: 9999px; margin-top: 0.25rem;}
.service-card:hover > :last-child{background-color: var(--col-highlight); color: var(--col-text); transition: all ease-in-out 0.15s;}

.row-container {display: flex; justify-content: space-between; align-items: center; align-content: center; max-width: var(--max-width); margin: auto;}
.col-container {display: flex; flex-direction: column; gap: 0.375rem; max-width: var(--max-width);}

.live-event-unavailable {flex: 1; background-color: rgba(255,255,255,.1); color: white; padding: 1rem; text-align: center; margin-bottom: 3rem;}
.live-event-container {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .75rem; max-width: calc(var(--max-width) - 4rem); width: 100%;}
#watch-on-yt {margin-bottom: 3rem; margin-top: .75rem;}

.live-event {display: flex; width: 100%; outline: 1px solid #303060; transition: all ease-in-out .1s; text-align: left;}
.live-event-logo {display: flex; justify-content: center; align-items: center; align-content: center; padding: .5rem; width: fit-content; background-color: white;}
.live-event-logo > img {max-width: 7rem;}
.live-event-info {position: relative; flex: 1; display: flex; flex-direction: column; gap: 1.5rem; padding: 1rem;}
.event-date {font-size: 0.875rem; font-family: inter-medium, arial; padding: .5rem .75rem; background-color: white; color: var(--col-text); width: fit-content;}
.event-name {font-size: 1.325rem; font-family: inter-bold, arial;}
.event-location {font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem;}
.event-organizer {display: inline-flex; gap: 0.25rem; flex-wrap: wrap;}
.event-organizer > * {display: block; padding: 0.5rem 0.65rem; background: rgba(0,0,0, .5); width: fit-content; font-size: 0.75rem;}

.events-container {display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem; margin: auto; margin-top: 0.75rem; max-width: var(--max-width);}
.events-container .event-name {font-size: 1.15rem;}
.events-container .event-date {margin-bottom: 4rem;}
.event-card {position: relative; display: flex; flex-direction: column; gap: 0.25rem; justify-content: space-between; padding: 0.75rem; outline: 1px solid #282828;}

.events-container-col {display: flex; flex-direction: column; gap: 1rem; width: 100%; filter: drop-shadow(0 0.75rem 1.5rem rgba(0,0,0,.3));}
.event-card-long {position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 16rem; padding: 1rem; text-align: left; outline: 1px solid #252525;}

.partners-container {margin: auto; max-width: var(--max-width); display: flex; flex-direction: column; gap: 1rem; align-items: center;}
.slider-container {
	pointer-events: none;
	--anim-duration: 60s; --container-height: 5rem; --slide-total: 14; --width-item: 128px;
	position: relative; max-width: var(--max-width); width: 100%; height: var(--container-height); overflow: hidden;
}
.slide {
	position: absolute; left: max(calc(var(--width-item) * (var(--slide-total) - 1)), 100%); display: flex; align-items: center; justify-content: center; width: var(--width-item); height: 100%;
	animation-name: scrollLeft; animation-duration: var(--anim-duration); animation-timing-function: linear; animation-iteration-count: infinite;
}
.slide > img {max-width: 100%; max-height: 100%; padding: .5rem; transition: transform ease-in-out .1s;}
.slide.item1 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 1) * -1);}
.slide.item2 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 2) * -1);}
.slide.item3 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 3) * -1);}
.slide.item4 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 4) * -1);}
.slide.item5 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 5) * -1);}
.slide.item6 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 6) * -1);}
.slide.item7 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 7) * -1);}
.slide.item8 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 8) * -1);}
.slide.item9 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 9) * -1);}
.slide.item10 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 10) * -1);}
.slide.item11 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 11) * -1);}
.slide.item12 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 12) * -1);}
.slide.item13 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 13) * -1);}
.slide.item14 {animation-delay: calc(var(--anim-duration) / var(--slide-total) * (var(--slide-total) - 14) * -1);}
@keyframes scrollLeft {to {left: calc(var(--width-item) * -1);}}

.social-container {display: flex; gap: 0.375rem; align-items: center;}
.social-container > span {margin-right: 0.75rem;}
.social-container > a {width: 42px; aspect-ratio: 1/1; align-content: center; background-color: rgba(255,255,255,.1); border-radius: 6px; transition: all ease-in-out 0.1s;}
.social-container > a:hover {transform: scale(1.1);  background-color: #DF2027;}
.social-container > a > img {margin: auto;}

.about-container {display: flex; gap: 1rem; flex-wrap: wrap; margin: auto; max-width: var(--max-width);}
.about-container > :first-child {flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; min-width: 18rem;}
.about-container > :last-child {flex: 1; min-width: 18rem;}
.about-container video {width: 100%; display: block; outline: 1px solid #191919;}

.gallery-container {max-width: var(--max-width); margin: auto; padding: 1rem 0rem;}
.gallery-container > p {font-size: 1.375rem; font-weight: bold; margin-bottom: 0.375rem;}
.gallery-container > div {display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-top: 1rem; gap: 0.25rem;}
.gallery-container > div > a {position: relative; min-height: 8rem; background-color: #191919; outline: 1px solid #282828;}
.gallery-container > div > a:hover {outline: 1px solid white;}
.gallery-container img {position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}

.services-call-to-action {display: flex; gap: 0.5rem; margin-top: 0.75rem;}
.services-call-to-action > a {display: flex; gap: 0.5rem; align-items: center; background-color: var(--col-highlight); color: var(--col-text); border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.75rem; transition: all ease-in-out .1s;}
.services-call-to-action > a:hover {transform: scale(1.04);}

.services-container {display: flex; flex-direction: column; gap: 0.75rem; max-width: var(--max-width); margin: auto; filter: drop-shadow(0 0.75rem 1.5rem rgba(0,0,0,.3));}
.services-container p {margin-top: 0.75rem;}
.service-card-long {display: flex; gap: 1rem; background-color: #242424; outline: 1px solid #282828; padding: 1rem; text-align: left;}
.service-card-long:hover .btn-more {background-color: var(--col-highlight); color: var(--col-text); border: 1px solid var(--col-highlight);}
.service-card-long > img {max-width: 2rem; max-height: 2rem; }
.service-card-long > div {display: flex; flex-direction: column; gap: 0.75rem;}
.service-card-long > div > :first-child {color: var(--col-highlight); text-transform: uppercase; font-family: inter-bold, arial; font-size: 1.5rem;}
.service-card-long > div > :nth-child(2) {color: #909090; font-size: 0.875rem;}

.faq-container {display: flex; flex-direction: column; gap: 1px; max-width: var(--max-width); margin: auto; background-color: #303030; padding: 1px; filter: drop-shadow(0 0.75rem 1.5rem rgba(0,0,0,.3)); text-align: left;}

.faq-entry {display: flex; gap: 1rem; padding: 0.75rem; background-color: #252525;}
.faq-entry p {margin-top: 0.75rem; }
.faq-entry > img {height: 1.25rem; width: 1.25rem;}
.faq-entry > div {display: flex; flex-direction: column; font-size: 1rem; font-family: inter-medium, arial; overflow: hidden;}

.faq-description {display: grid; grid-template-rows: 0fr; font-size: 0.875rem; color: #bebebe; transition: all ease 0.15s; font-family: inter-regular, arial;}
.faq-description > div {overflow: hidden;}
.faq-description.show {grid-template-rows: 1fr; padding-top: 1rem; padding-bottom: 0.5rem;}

footer {padding: 0.75rem; width: 100%;}
footer > div {display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; align-content: center; justify-content: space-between; margin: auto; padding: 0.75rem 0rem; max-width: var(--max-width); width: 100%; text-align: center; font-size: .75rem; color: #909090; border-top: 1px solid #303030;}