@media only screen and (min-width: 0rem) {
	#hero-wrapper {
		padding: clamp(11.25rem, 23.82vw, 18.75rem) 1rem clamp(3.75rem, 7.82vw, 6.25rem);
		background-color: #1A2B4C;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}

	#hero-wrapper .craftiq-container {
		width: 100%;
		max-width: 80rem;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: clamp(4rem, 10vw, 7rem);
		position: relative;
		z-index: 2;
	}

	#hero-wrapper .craftiq-content {
		text-align: center;
		max-width: 39.375rem;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		z-index: 10;
	}

	#hero-wrapper .craftiq-topper {
		font-size: clamp(0.875rem, 1.5vw, 1rem);
		line-height: 1.2em;
		text-transform: uppercase;
		text-align: inherit;
		letter-spacing: 0.1em;
		font-weight: 700;
		color: var(--bodyTextColorWhite);
		margin-bottom: 0.25rem;
		display: block;
	}

	#hero-wrapper .craftiq-title {
		font-size: clamp(2.4375rem, 5vw, 3.8125rem);
		font-weight: 900;
		line-height: 1.2em;
		text-align: center;
		max-width: 15ch;
		margin: 0 0 1rem 0;
		color: var(--bodyTextColorWhite);
		position: relative;
	}

	#hero-wrapper .craftiq-text {
		font-size: clamp(1rem, 1.5vw, 1.25rem);
		line-height: 1.5em;
		text-align: center;
		width: 100%;
		max-width: 33.1875rem;
		margin: 0 0 clamp(1.75rem, 3.92vw, 2.5rem) 0;
		color: var(--bodyTextColorWhite);
		opacity: 0.9;
	}

	#hero-wrapper .craftiq-button-box {
		display: flex;
		justify-content: center;
		gap: 1rem;
		align-items: center;
	}

	#hero-wrapper .craftiq-picture {
		width: 100%;
		max-width: 37.5rem;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	}

	#hero-wrapper .craftiq-picture img {
		width: 100%;
		height: auto;
	}

	#hero-wrapper .craftiq-wave {
		width: 100%;
		height: auto;
		display: block;
		position: absolute;
		left: 0;
		bottom: -1px;
		z-index: 1;
	}

	#hero-wrapper .craftiq-wave path {
		width: 100%;
		height: auto;
	}

	#hero-wrapper .mobile {
		bottom: -0.4375rem;
	}

	#hero-wrapper .desktop {
		display: none;
	}

	#hero-wrapper .craftiq-dark {
		display: none;
		visibility: hidden;
		opacity: 0;
		bottom: -1.875rem;
		transition: visibility 0.3s, opacity 0.3s, bottom 0.5s;
	}

	#hero-wrapper .craftiq-dark.desktop {
		display: none;
	}
}

@media only screen and (min-width: 64rem) {
	#hero-wrapper {
		text-align: left;
		padding-bottom: 17vw;
	}

	#hero-wrapper .craftiq-container {
		flex-direction: row;
		justify-content: space-between;
	}

	#hero-wrapper .craftiq-content {
		width: 40vw;
		flex: none;
		align-items: flex-start;
	}

	#hero-wrapper .craftiq-title,
	#hero-wrapper .craftiq-text {
		text-align: left;
	}

	#hero-wrapper .craftiq-dark {
		display: none;
	}

	#hero-wrapper .craftiq-dark.desktop {
		display: block;
	}

	#hero-wrapper .desktop {
		display: block;
	}

	#hero-wrapper .mobile {
		display: none;
	}

	#hero-wrapper .craftiq-picture {
		width: 70vw;
		max-width: 58.5rem;
		position: absolute;
		top: auto;
		bottom: -6.25rem;
		right: -6.25rem;
	}
}

@media only screen and (min-width: 93.75rem) {
	#hero-wrapper {
		padding-bottom: 12.5rem;
	}

	#hero-wrapper .craftiq-picture {
		right: -9.375rem;
	}
}

@media only screen and (min-width: 0rem) {
	body.dark-mode #hero-wrapper {
		background-color: #000;
	}

	body.dark-mode #hero-wrapper:before {
		content: '';
		width: 100%;
		height: 100%;
		background: rgba(0, 16, 153, 0.3);
		background: -o-linear-gradient(305deg, rgba(0, 16, 153, 0.2) 0%, rgba(58, 217, 255, 0.2) 96%);
		background: linear-gradient(145deg, rgba(0, 16, 153, 0.2) 0%, rgba(58, 217, 255, 0.2) 96%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#001099", endColorstr="#3ad9ff", GradientType=1);
		opacity: 1;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		z-index: -1;
	}

	body.dark-mode #hero-wrapper .craftiq-title,
	body.dark-mode #hero-wrapper .craftiq-topper,
	body.dark-mode #hero-wrapper .craftiq-text,
	body.dark-mode #hero-wrapper .craftiq-number,
	body.dark-mode #hero-wrapper .craftiq-desc {
		color: var(--bodyTextColorWhite);
	}

	body.dark-mode #hero-wrapper .craftiq-wave path {
		fill: var(--dark);
	}

	body.dark-mode #hero-wrapper .craftiq-dark.mobile {
		visibility: visible;
		opacity: 1;
		bottom: -1px;
	}
}

@media only screen and (min-width: 64rem) {

	body.dark-mode #hero-wrapper .craftiq-desktop,
	body.dark-mode #hero-wrapper .mobile {
		display: none;
	}

	body.dark-mode #hero-wrapper .craftiq-dark.mobile {
		display: none;
	}

	body.dark-mode #hero-wrapper .craftiq-dark.desktop {
		visibility: visible;
		opacity: 1;
		bottom: -1px;
	}
}

@media only screen and (min-width: 0rem) {
	.universe {
		display: none;
	}

	.universe1 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
	}

	.universe2 {
		position: absolute;
		width: 100%;
		height: 70%;
		left: -20% !important;
		top: 0% !important;
		-webkit-transform: scaleY(-1);
		-ms-transform: scaleY(-1);
		transform: scaleY(-1);
	}

	.universe3 {
		position: absolute;
		width: 100%;
		height: 70%;
		left: -10% !important;
		top: 20% !important;
		-webkit-transform: scaleX(-1);
		-ms-transform: scaleX(-1);
		transform: scaleX(-1);
	}

	.shooting-star {
		position: absolute;
		right: 50%;
		top: -13.59%;
		width: 1px;
		height: 70px;
		background: #fff;
		-webkit-transform: rotate(-15deg);
		-ms-transform: rotate(-15deg);
		transform: rotate(-15deg);
		-webkit-animation: shootingStar;
		animation: shootingStar;
		-webkit-animation-duration: 9s;
		animation-duration: 9s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
	}

	.shooting-star2 {
		top: -23.59%;
		-webkit-animation: shootingStar2;
		animation: shootingStar2;
		-webkit-animation-duration: 10s;
		animation-duration: 10s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
	}

	@-webkit-keyframes shootingStar {
		0% {
			top: -13.59%;
			right: 60%;
		}

		2% {
			opacity: 0;
			top: 100%;
			right: 0%;
		}

		86% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes shootingStar {
		0% {
			top: -13.59%;
			right: 60%;
		}

		2% {
			opacity: 0;
			top: 100%;
			right: 0%;
		}

		86% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}

	@-webkit-keyframes shootingStar2 {
		0% {
			top: -23.59%;
			right: 50%;
		}

		2% {
			opacity: 0;
			top: 100%;
			right: -17%;
		}

		86% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes shootingStar2 {
		0% {
			top: -23.59%;
			right: 50%;
		}

		2% {
			opacity: 0;
			top: 100%;
			right: -17%;
		}

		86% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}

	.star {
		width: 2px;
		height: 2px;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		opacity: 0.5;
		display: block;
	}

	.star1 {
		top: 2%;
		left: 25%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 3s;
		animation-duration: 6s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.star2 {
		top: 1.3%;
		left: 48%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 2s;
		animation-duration: 4s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 0.5s;
		animation-delay: 0.5s;
	}

	.star3 {
		top: 20%;
		left: 36%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 4s;
		animation-duration: 8s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
	}

	.star4 {
		top: 17%;
		left: 5%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 4s;
		animation-duration: 7s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 0.8s;
		animation-delay: 0.8s;
	}

	.star5 {
		top: 11%;
		right: 19%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 4s;
		animation-duration: 8s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}

	.star6 {
		top: 4%;
		right: 24%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 3s;
		animation-duration: 3s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 0.9s;
		animation-delay: 0.9s;
	}

	.star7 {
		top: 3%;
		left: 29%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 5s;
		animation-duration: 5s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 1.2s;
		animation-delay: 1.2s;
	}

	.star8 {
		top: 18%;
		left: 56%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 3s;
		animation-duration: 7s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}

	.star9 {
		top: 31%;
		left: 57%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 4s;
		animation-duration: 4s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}

	.star10 {
		top: 27%;
		left: 12%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 4s;
		animation-duration: 4s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}

	.star11 {
		top: 7%;
		right: 31%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 3s;
		animation-duration: 3s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 1.4s;
		animation-delay: 1.4s;
	}

	.star12 {
		top: 35%;
		right: 12%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 4.5s;
		animation-duration: 4.5s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 1.1s;
		animation-delay: 1.1s;
	}

	.star13 {
		top: 12%;
		right: 25%;
		-webkit-animation: starFlicker;
		animation: starFlicker;
		-webkit-animation-duration: 3.3s;
		animation-duration: 3.3s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-delay: 0.7s;
		animation-delay: 0.7s;
	}

	@-webkit-keyframes starFlicker {
		0% {
			opacity: 0.2;
		}

		50% {
			opacity: 0.8;
		}

		100% {
			opacity: 0.2;
		}
	}

	@keyframes starFlicker {
		0% {
			opacity: 0.2;
		}

		50% {
			opacity: 0.8;
		}

		100% {
			opacity: 0.2;
		}
	}

	.universe2 .star:nth-child(7) {
		top: -10% !important;
	}

	.universe2 .star:nth-child(2) {
		top: -15% !important;
	}

	body.dark-mode .universe {
		display: block;
	}
}

@media only screen and (min-width: 64rem) {
	.universe1 {
		height: 50%;
		width: 100%;
		left: -18.75rem;
	}

	.universe2 {
		position: absolute;
		width: 100%;
		height: 40%;
		left: 0% !important;
		top: 30% !important;
		-webkit-transform: scaleX(-1);
		-ms-transform: scaleX(-1);
		transform: scaleX(-1);
	}

	.universe3 {
		position: absolute;
		width: 100%;
		height: 50%;
		left: 10% !important;
		top: 0% !important;
		-webkit-transform: scaleY(-1);
		-ms-transform: scaleY(-1);
		transform: scaleY(-1);
	}

	.shooting-star {
		position: absolute;
		right: 50%;
		top: -13.59%;
		width: 1px;
		height: 70px;
		background: #fff;
		-webkit-transform: rotate(-62deg);
		-ms-transform: rotate(-62deg);
		transform: rotate(-62deg);
		-webkit-animation: shootingStar;
		animation: shootingStar;
		animation-duration: 9s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
	}

	.shooting-star2 {
		top: -23.59%;
		-webkit-animation: shootingStar2;
		animation: shootingStar2;
		-webkit-animation-duration: 10s;
		animation-duration: 10s;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
	}

	@-webkit-keyframes shootingStar {
		0% {
			top: -13.59%;
			right: 60%;
		}

		2% {
			opacity: 0;
			top: 100%;
			right: 0%;
		}

		86% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes shootingStar {
		0% {
			top: -13.59%;
			right: 60%;
		}

		2% {
			opacity: 0;
			top: 100%;
			right: 0%;
		}

		86% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}

	@-webkit-keyframes shootingStar2 {
		0% {
			top: -23.59%;
			right: 50%;
		}

		2% {
			opacity: 0;
			top: 100%;
			right: -17%;
		}

		86% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes shootingStar2 {
		0% {
			top: -23.59%;
			right: 50%;
		}

		2% {
			opacity: 0;
			top: 100%;
			right: -17%;
		}

		86% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}

	.desktop-star {
		top: 20%;
		left: 20%;
	}	
}