/* CONFETTI ANIMATION */
.confetti{
	position: absolute;
	top: -100px;
    z-index: 999;
}
/* Start Animation */
.confetti:nth-child(100n+2){
	animation: animateStart 1.5s ease 1;
}
.confetti:nth-child(100n+4){
	animation: animateStart 1.4s ease 1;
}
.confetti:nth-child(1000n+0){
	animation: animateStart 1.6s ease 1;
}
@keyframes animateStart{
	0%{
		top: 100%;
		left: 50%;
		box-shadow: 0 0 5px #000;
	}
	100%{
		transform: rotate3d(1,1,1,360deg);
		top: -100px;
	}
}
/* Falling Animation */
.confetti:nth-child(100n+0){
	animation: animateThree 3.4s linear 0.5s 3;
}
.confetti:nth-child(100n+1){
	animation: animate 4s linear 3;
}
.confetti:nth-child(100n+3){
	animation: animate 4.2s linear 0.5s 3;
}
.confetti:nth-child(100n+5){
	animation: animateTwo 3s linear 0.5s 3;
}
.confetti:nth-child(100n+6){
	animation: animateTwo 2.9s linear 0.5s 3;
}
.confetti:nth-child(100n+7){
	animation: animate 2.8s linear 0.5s 3;
}
.confetti:nth-child(100n+8){
	animation: animate 2.7s linear 0.5s 3;
}
.confetti:nth-child(100n+9){
	animation: animate 2.6s linear 0.5s 3;
}
.confetti:nth-child(100n+10){
	animation: animate 2.5s linear 0.5s 3;
}
@keyframes animate{
	0%{
		top: -100px;
	}
	100%{
		transform: rotate3d(1,1,1,360deg);
		top: 100%;
	}
}
@keyframes animateTwo{
	0%{
		top: -100px;
	}
	100%{
		transform: rotate3d(0,0,1,360deg);
		top: 100%;
	}
}
@keyframes animateThree{
	0%{
		top: -100px;
	}
	100%{
		transform: rotate3d(0,1,0,360deg);
		top: 100%;
	}
}



*{
	font-family: 'Prompt', sans-serif;
}
.wrapper{
	padding: 30px 0px;
}
.sbLogo{
	width: 100%;
}
.center-align {
	display: flex;
	justify-content: center;
	align-items: center;
}
.compLogo{
	background: #fff;
	padding: 15px;
	border-radius: 20px;
}
.compName{
	margin-bottom: 0px;
    font-size: 54px;
}
.pageTitle{
	padding: 10px;
	border: 1px solid #fff;
	border-radius: 20px;
}
.winnerBtn{
	padding: 10px 20px !important;
}
.winnerBtn:hover{
	background: #000 !important;
	border: 1px solid #000 !important;
}
.winnerBtn:active,
.winnerBtn.active{
	background: #000 !important;
	border: 1px solid #000 !important;
}
.touristBag{
	position: absolute;
	bottom: 40px;
	left: 40px;
	width: 20%;
}
.airplane {
	position: absolute;
	top: 90%;
	left: -100px;
	width: 300px;
	animation: fly 10s linear infinite; /* Flight animation */
}
@keyframes fly {
	30%{
		transform: rotate(0deg);
		top: 90%;
	}
	100% {
		left: 100%; /* Move airplane across the screen */
		top: 0%;
		transform: translateY(-50%); /* Keep it vertically centered */
		transform: rotate(-35deg);
	}
}
.rope {
	background-color: #333;
	width: 2px;
	height: 30%;
	position: absolute;
	top: 0;
	right: 10%;
	transform: translateX(-50%);
}
.document {
	width: 200px;
	background-color: #fff;
	border-radius: 5px;
	position: absolute;
	right: -3%;
    top: 29%;
	animation: swing 2s ease-in-out infinite;
	transform-origin: top center;
}

@keyframes swing {
	0% {
		transform: translateX(-50%) rotate(4deg);
	}
	50% {
		transform: translateX(-50%) rotate(-4deg);
	}
	100% {
		transform: translateX(-50%) rotate(4deg);
	}
}
body {
	margin: 0;
	padding: 0;
	overflow: hidden; /* Disable scrolling */
	background: url('bg2-01.jpg') no-repeat center center fixed;
	background-size: cover; /* Cover the entire viewport */
}

body::before {
	content: "";
	background: url('rotatelight-01.png') no-repeat center center;
	background-size: cover;
	position: absolute;
	top: -500px;
	left: -1500px;
	width: 300%;
	height: 300%;
	z-index: -1;
	animation: rotateBackground 30s linear infinite; /* Rotate every 10 seconds */
}

@keyframes rotateBackground {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.content {
	text-align: center;
	padding: 100px;
	color: white;
}