.about-banner {
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

.about-banner .banner-video-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  filter: blur(10px) brightness(0.7);
  -webkit-filter: blur(10px) brightness(0.7);
}

.about-banner .banner-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-banner .banner-svg-wrapper {
	width: 95%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center;
}

.about-banner .banner-svg-wrapper svg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  opacity: 0.7;
    filter: blur(clamp(3px, 0.4vw, 6px)) brightness(10);
	-webkit-filter: blur(clamp(3px, 0.4vw, 6px)) brightness(10);
    mix-blend-mode: plus-lighter;
}

.about-introduction .text-banner-wrapper {
	position: relative;
	min-height: 100dvh;
	display: flex;
	align-items: center;
}

.about-introduction .text-banner .floating-assets {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

.about-introduction .text-banner .floating-assets img {
	position: absolute;
}

.about-introduction .text-banner .text-container {
	margin-top: clamp(20px, 3vw, 50px);
}

.about-introduction .text-banner .text-container p {
	margin-bottom: 1em;
}

.about-introduction .text-banner .floating-assets img:first-child {
	width: clamp(80px, 12.5vw, 300px);
	object-fit: contain;
    top: 5%;
    right: 5%;
    transform: rotate(-20deg);
	animation: floatUpAbout 4s ease-in-out infinite;
}

.about-introduction .text-banner .floating-assets img:nth-child(2) {
	bottom: 5%;
    left: 3%;
    transform: rotate(-25deg);
    width: clamp(100px, 11vw, 300px);
	object-fit: contain;
	animation: floatDownAbout 4s ease-in-out infinite;
}

.about-introduction .text-banner .animate-text {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.about-introduction .text-banner .animate-text span{
	margin: 0 0.1em;
	opacity: 0;
	transform: scale(0);
	text-transform: uppercase;
}

@media screen and (orientation: landscape) {
	.about-introduction .text-banner .floating-assets img:first-child {
		top: 35%;
	}
	
	.about-introduction .text-banner .floating-assets img:nth-child(2) {
		bottom: 15%;
	}
}

@media screen and (min-width: 750px) {
	
	.about-introduction .text-banner .floating-assets img:nth-child(2) {
		width: clamp(120px, 10vw, 300px);
	}
	
	.about-introduction .text-banner .text-container {
		padding: 0 5%;
	}
}

@media screen and (min-width: 750px) {
	
	.about-introduction .text-banner .center-wrapper {
		width: 71%;
	}
	
}

.mascots-section {
	position: relative;
	height: 100dvh;
}

.mascots-section .mascots-heading,
.mascots-section .mascot-text {
	text-align: center;
}

.mascots-section .about-mascot-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mascots-section .mascot-info-container {
	position: relative;
}

.mascots-section .mascot-info-container .mascot-name {
	margin-bottom: 0.5em;
}

.mascots-section .mascot-info-container .mascot-item {
	position: absolute;
}

.mascots-section .floating-assets-container,
.mascots-section .floating-assets-container .floating-assets-inner-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.mascots-section .floating-assets-container .floating-asset {
	position: absolute;
	object-fit: contain;
}

.mascots-section .mascot1-floating-assets .floating-asset:first-child {
	top: 15%;
    left: 5%;
    width: clamp(80px, 10vw, 230px);
    transform: rotate(-20deg);
}

.mascots-section .mascot1-floating-assets .floating-asset:nth-child(2) {
	top: 20%;
    left: 80%;
    width: clamp(60px, 6vw, 180px);
}

.mascots-section .mascot1-floating-assets .floating-asset:nth-child(3) {
	top: 85%;
    left: 60%;
    width: clamp(90px, 8vw, 180px);
    transform: rotate(20deg);
}

.mascots-section .mascot2-floating-assets .floating-asset:first-child {
	top: 15%;
    left: 8%;
    width: clamp(60px, 6vw, 150px);
    transform: rotate(-28deg);
}

.mascots-section .mascot2-floating-assets .floating-asset:nth-child(2) {
	top: 80%;
    left: 50%;
    width: clamp(100px, 11vw, 230px);
    transform: rotate(-75deg);
}

.mascots-section .mascot2-floating-assets .floating-asset:nth-child(3) {
	top: 25%;
    left: 75%;
    width: clamp(50px, 6vw, 120px);
    transform: rotate(15deg);
}

.mascots-section .mascot3-floating-assets .floating-asset:first-child {
	top: 15%;
    left: 8%;
    width: clamp(60px, 8vw, 200px);
    transform: rotate(-10deg);
}

.mascots-section .mascot3-floating-assets .floating-asset:nth-child(2) {
	top: 20%;
    left: 75%;
    width: clamp(70px, 7vw, 200px);
}

.mascots-section .mascot3-floating-assets .floating-asset:nth-child(3) {
	top: 80%;
    left: 55%;
    width: clamp(120px, 13vw, 270px);
    transform: rotate(20deg);
}

@media screen and (min-width: 750px) {
	.mascots-section .mascot1-floating-assets .floating-asset:first-child {
		top: 18%;
		left: 27%;
	}

	.mascots-section .mascot1-floating-assets .floating-asset:nth-child(2) {
		top: 30%;
		left: 64%
	}

	.mascots-section .mascot1-floating-assets .floating-asset:nth-child(3) {
		top: 70%;
		left: 80%;
	}

	.mascots-section .mascot2-floating-assets .floating-asset:first-child {
		top: 18%;
		left: 30%;
	}

	.mascots-section .mascot2-floating-assets .floating-asset:nth-child(2) {
		top: 65%;
		left: 60%;
	}

	.mascots-section .mascot2-floating-assets .floating-asset:nth-child(3) {
		top: 30%;
		left: 80%;
	}

	.mascots-section .mascot3-floating-assets .floating-asset:first-child {
		top: 25%;
		left: 27%;
	}

	.mascots-section .mascot3-floating-assets .floating-asset:nth-child(2) {
		top: 28%;
		left: 64%;
	}

	.mascots-section .mascot3-floating-assets .floating-asset:nth-child(3) {
		top: 65%;
		left: 70%;
	}
}

.mascots-section .mascot-gif-container {
	position: relative;
	width: 80%;
	max-height: 30vh;
	aspect-ratio: 1/1;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10%;
}

.mascots-section .mascot-gif-container .mascot {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media screen and (min-width: 750px) {
	.mascots-section .mascots-section-inner {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	
	.mascots-section .mascots-section-inner .mascots-container {
		width: 100%;
	}
	
	.mascots-section .mascots-heading,
	.mascots-section .mascot-text {
		text-align: left;
	}

	.mascots-section .mascot-gif-container {
		width: 30vw;
		max-width: 900px;
		max-height: unset;
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		transform: translate(0, -50%);
	}
	
	.mascots-section .split-item {
		width: 31%;
	}
}

.about-wah-gradient-section {
	position: relative;
}

.about-wah-gradient-section .about-wah-gradient-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.behind-wah {
	position: relative;
	z-index: 2;
	overflow: hidden;
	height: 100dvh;
}

.behind-wah .background-texture {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translate(0, -50%);
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

.behind-wah .mascot-wrapper img.mascot-body {
	position: relative;
	z-index: 3;
}

.behind-wah .mascot-wrapper-wawa svg.mascot-pupils {
    top: 39.5%;
    left: 41.5%;
    width: 33%;
}

.behind-wah #svg-stage {
  display: block;
  width: 100%;
  height: auto;
}

.behind-wah .mascot-wrapper {
	width: 9.5vw;
	min-width: 100px;
	position: absolute;
	bottom: 5%;
	left: clamp(15px, 2.5%, 80px);
	z-index: 2;
}

.behind-wah .mascot-wrapper.mascot-wrapper-wawa{
	width: 12vw;
	min-width: 100px;
}

@media screen and (min-width: 750px) {
	.behind-wah .background-texture {
		width: 60%;
	}
	
	.behind-wah .mascot-wrapper {
		bottom: 10%;
	}
}

@media screen and (min-width: 390px) {
	.behind-wah .mascot-wrapper.mascot-wrapper-wawa {
		min-width: 120px;
	}
}

@media screen and (min-width: 750px) {
	.behind-wah .mascot-wrapper {
		bottom: clamp(40px, 2vw, 50px);
	}
}

.behind-wah .heading {
	margin-top: 0;
}

.behind-wah .floating-asset-wrapper {
	position: absolute;
	right: 5%;
	width: clamp(80px, 15vw, 350px);
	animation: floatUp 4s ease-in-out infinite;
}

.behind-wah .behind-wah-items {
	padding: 0 5%;
	padding-top: clamp(30px, 5vw, 150px);
	position: relative;
	overflow: hidden;
}

.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-title {
	font-family: "Obviously Narrow", sans-serif;
    display: inline;
}

.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-title:after {
	content: "";
	display: inline-block;
    width: clamp(20px, 1.5vw, 40px);
    height: clamp(20px, 1.5vw, 40px);
    background-image: url(../images/arrow-top-right-blue.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: translate(0);
    margin-left: clamp(10px, 1vw, 20px);
    transition: transform 0.5s ease;
	vertical-align: middle;
}

.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-title:hover:after {
	transform: translate(20%, -20%);
}

.behind-wah .behind-wah-items .behind-wah-item {
	margin-bottom: clamp(20px, 1.5em, 30px);
}

.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-inner {
	background-color: rgba(255,255,255,0.28);
	backdrop-filter: blur(23px);
	-webkit-backdrop-filter: blur(23px);
	box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.16);
	border-radius: clamp(10px, 1vw, 25px);
	padding: clamp(15px, 1.5vw, 30px);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-inner .logo-wrapper {
	width: 45%;
    flex-shrink: 0;
	padding-top: 15px;
	display: flex;
}

.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-inner .logo-wrapper img {
	width: 100%;
	max-height: 25vw;
	object-fit: contain;
}

.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-inner .text-container {
	width: 100%;
}

.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-inner .text-container .role {
	margin-bottom: 0;
}

@media screen and (min-width: 750px) {
	.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-inner {
		width: 48%;
	}
	
	.behind-wah .behind-wah-items .behind-wah-item {
		display: flex;
	}
	
	.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-inner .text-container {
		padding-left: 5%;
		width: 70%;
	}
	
	.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-inner .logo-wrapper {
		width: 24%;
		height: 60%;
		justify-content: center;
		align-items: center;
		padding-top: 0;
	}
	
	.behind-wah .behind-wah-items .behind-wah-item .behind-wah-item-inner .logo-wrapper img {
		height: 100%;
		width: auto;
		max-height: unset;
		object-fit: contain;
	}
}

section.section.about-sponsors {
	margin-top: clamp(80px, 7.5vw, 150px);
	padding-bottom: clamp(80px, 8vw, 200px);
	position: relative;
	z-index: 2;
}

.collaborate .form-wrapper {
	margin-top: clamp(25px, 3.5vw, 50px);
}

.collaborate .form-wrapper .form-field-flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.collaborate .form-wrapper .form-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: clamp(5px, 1vw, 25px) 0;
	width: 100%;
}

.collaborate .form-wrapper .form-field.form-field-message {
	align-items: flex-start;
}

.collaborate .form-wrapper .form-field p {
	margin: 5px 0;
}

.collaborate .form-wrapper .form-field .input {
	width: 100%;
}

.collaborate .form-wrapper .form-field .input p,
.collaborate .form-wrapper .form-field .input p input {
	width: 100%;
}

.collaborate .form-wrapper .form-field input,
.collaborate .form-wrapper .form-field textarea {
	border: 1px solid #CCCCCC;
	border-radius: clamp(5px, 0.6vw, 10px);
	padding: 10px;
}

.collaborate .radio-field .wpcf7-radio {
	display: flex;
	gap: clamp(10px, 0.75vw, 25px);
	flex-wrap: wrap;
}

.collaborate .radio-field .wpcf7-radio .wpcf7-list-item label {
  display: block;
  padding: clamp(5px, 0.6vw, 10px) clamp(10px, 1.2vw, 20px);
  border: 1px solid #1C2BAD;
  border-radius: clamp(20px, 5vw, 50px);;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #fff;
}

.collaborate .radio-field .wpcf7-radio .wpcf7-list-item input[type="radio"] {
  display: none;
}

.collaborate .radio-field .wpcf7-radio .wpcf7-list-item {
	margin-left: 0;
}

.collaborate .radio-field .wpcf7-radio .wpcf7-list-item-label {
  display: block;
  line-height: 1.4;
	transition: color 0.5s ease;
}

.collaborate .radio-field .wpcf7-radio .wpcf7-list-item label:hover {
  background-color: #1C2BAD;
}

.collaborate .radio-field .wpcf7-radio .wpcf7-list-item label:hover .wpcf7-list-item-label {
  color: #fff;
}

.collaborate .radio-field .wpcf7-radio .wpcf7-list-item label:has(input[type="radio"]:checked) {
	background-color: #1C2BAD;
}
.collaborate .radio-field .wpcf7-radio .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label {
  color: #fff;
}

.collaborate .form-wrapper .form-submit button {
	display: flex;
	align-items: center;
	padding-top: clamp(10px, 0.5vw, 10px);
	cursor: pointer;
}

.collaborate .form-wrapper .form-submit button:hover {
	border-color: #F7004B;
}

.collaborate .form-wrapper .form-submit button img {
	filter: grayscale(1) brightness(9);
	-webkit-filter: grayscale(1) brightness(9);
	transition: filter 0.5s ease, -webkit-filter 0.5s ease;
}

.collaborate .form-wrapper .form-submit button:hover img {
	filter: none;
	-webkit-filter: none;
}

.collaborate .form-wrapper .form-submit button .button-text {
	display: flex;
    padding-bottom: 0.2em;
    margin-left: 0.5em;
}

@media screen and (min-width: 750px) {
	.collaborate .center-wrapper .text-container {
		width: 45%;
		margin: 0 auto;
	}
	
	.collaborate .form-wrapper .form-field-flex .form-field-half {
		width: 48%;
	}
	
	.collaborate .form-wrapper .form-field.form-field-half > p {
		width: 25%;
	}
	
	.collaborate .form-wrapper .form-field.form-field-half .input {
		width: 72%;
	}
	
	.collaborate .form-wrapper .form-field-full p {
		width: 12%;
	}
	
	.collaborate .form-wrapper .form-field-full .input {
		width: 86%;
	}
	
	.collaborate .form-wrapper .form-field-full .input p {
		width: 100%;
	}
}

@media screen and (min-width: 1024px) {
	.collaborate .form-wrapper {
		padding: 0 10%;
	}
}

.collaborate .form-wrapper .wpcf7 form .wpcf7-response-output {
	border: none;
    text-align: center;
    border-color: transparent;
    margin-left: 0;
    margin-right: 0;
}