*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	font-family: 'Koulen', sans-serif;
	font-family: 'Mukta Malar', sans-serif;

}

body{
	margin:0;
	padding: 0;
	list-style: none;
	text-decoration: none;

}
.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 1.3rem 10%;
	display: flex;
	justify-content: space-between;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	align-items: center;
	z-index: 100;
	box-sizing: border-box;
	transition: all .6s;
}

.header::before{
	content: '';
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: white;
	backdrop-filter: blur(50px);
	z-index: -1;
}

.logo{
	font-size: 1.2rem;
	color: black;
	text-decoration: none;
	font-weight: 700;
}

.logo img{
	width: 3.5rem;
	height: 3.5rem;
	transform: scale(1.3);
}

.nav a{
	font-size: 1.15rem;
	font-family: 'Mukta Malar', sans-serif;
	color: #000;
	text-decoration: none;
	font-weight: 500;
	margin-left: 4.5rem;
	position: relative;
	transition: all.5s ease;
}


.nav a::after{
		content: '';
		height: 3px;
		width: 0%;
		background: #000;
		position: absolute;
		left: 0;
		bottom: -11px;
		opacity: 0;
		transition: .3s ease-in-out;
	}

	.nav a:hover::after{
		width: 100%;
		opacity: 1;
}

#check{
	display: none;
}

.icons{
	position: absolute;
	right: 5%;
	font-size: 2.8rem;
	color: black;
	cursor: pointer;
	display: none;

}

/* BREAKPOINTS */
@media (max-width: 992px){
	.header{
		padding: 1.3rem 5%;
	}
}

@media (max-width: 768px){
	.icons{
		display: inline-flex;
}

#check:checked~.icons #menu-icon{
	display: none;
}

.icons #close-icon{
	display: none;
}

#check:checked~.icons #close-icon{
	display: block;
}

.nav{
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 0;
	background: white;
	box-shadow: 0.5rem 1rem rgba(0, 0, 0, .1);
	overflow: hidden;
	transition: .3s ease;
	}

	#check:checked~.nav{
		height: 100vh;
	}

	.nav a{
		display: block;
		font-size: 1.1rem;
		margin: 1.5rem 0;
		text-align: center;
		transform: translateY(10px);
		opacity: 0;
		transition: .3s ease;

	}

	#check:checked~.nav a{
		transform: translateY(0);
		opacity: 1;
		transition-delay: calc(.15s* var(--i));
	}


}

section.team {
	background-color: #ebebeb;
	width: 100%;
	height: auto;
	padding-top: 6rem;
	padding-bottom: 7rem;
}

.content-container {
	width: 95%;
	height: auto;
	justify-content: center;
}

.content-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.menu-teams {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 4rem;
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.menu-button-active a,
.menu-button a {
	width: 24rem;
	text-decoration: none;
	font-family: 'Koulen', sans-serif;
	font-size: 18px;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 8rem;
	padding-right: 8rem;
	border-radius: 2rem;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.menu-button-active a {
	color: #fff;
	background-color: #ffb303;
}

.menu-button a {
	color: #000;
	background-color: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.content-container {
	margin: auto;
	width: 90%;
	padding-top: 3rem;
}

.filter-container {
	width: 100%;
	justify-content: center;
	align-content: center;
	display: flex;
	flex-direction: column;
	

}

.filter-container-2 {
	width: 90%;
	justify-content: center;
	align-content: center;
	display: flex;
	flex-direction: column;
	

}

.filter-container-stats {
	width: 100%;
	height: 10%;
	justify-content: center;
	align-content: center;
	display: flex;
	

}

.select{
	width: 100%;
	padding: .5rem;
	margin-bottom: 1rem;
    color: #000;
	font-family: 'Koulen', sans-serif;
}

#searchInput{
	width: 90%;
	margin-bottom: 2rem;
}

option{
	font-family: 'Koulen', sans-serif;
}


.club-container {
	margin-top: 2rem;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4rem;
}

.club-box {
	width: 16rem;
	height: 16rem;
	background-color: #fff;
	position: relative;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	transition: 0.6s;
	cursor: pointer;
	opacity: 0;
	transform: translateY(15px);
	transition: 1s;
}

.club-box.hide {
	opacity: 0;
	visibility: hidden;
	position: absolute; 
	pointer-events: none; 
	transition: 0s;
  }
  
  .club-box.show {
	opacity: 1;
	visibility: visible;
	position: relative;
	pointer-events: all;
	transform: translateY(-15px);
  }


.club-box:hover {
	transform: scale(1.1);
	 box-shadow: 0 0 20px rgba(252, 119, 3, 0.8);
}

.club-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
}

@media (max-width: 996px) {
	.menu-teams {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-top: 5rem;
		margin-bottom: 5rem;
	}

	.menu-button-active a,
	.menu-button a {
		width: 12rem;
		padding-left: 4rem;
		padding-right: 4rem;
	}

	.content-container {
		margin: auto;
		width: 90%;
		padding-top: 3rem;
	}
	
	.filter-container {
		width: 100%;
		display: flex;
		
	
	}
	
	.select{
		width: 100%;
		padding: .3rem;
		margin-bottom: 1rem;
		color: #000;
	}

	.club-container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 0.8rem;
	}

	.club-box {
		width: 7rem;
		height: 7rem;
	}

	.club-box img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}



@media (max-width: 541px) {
	.menu-teams {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-top: 5rem;
		margin-bottom: 5rem;
	}

	.menu-button-active a,
	.menu-button a {
		width: 12rem;
		padding-left: 4rem;
		padding-right: 4rem;
	}

	.content-container {
		margin: auto;
		width: 90%;
		padding-top: 3rem;
	}
	
	.filter-container {
		width: 100%;
		display: flex;
		
	
	}
	
	.select{
		width: 100%;
		padding: .3rem;
		margin-bottom: 1rem;
		color: #000;
	}

	.club-container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.8rem;
	}

	.club-box {
		width: 10rem;
		height: 10rem;
	}

	.club-box img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media (max-width: 281px) {
	.menu-teams {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-top: 5rem;
		margin-bottom: 5rem;
	}

	.menu-button-active a,
	.menu-button a {
		font-size: 12px;
		width: 8rem;
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.club-container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.8rem;
	}

	.club-box {
		width: 10rem;
		height: 10rem;
	}

	.club-box img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}



.players-container {
	width: 90%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* align-items: flex-start; */
	gap: 4rem;
}

.players-box {
	width: 12rem;
	height: 17rem;
	background-color: #fff;
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	transition: 0.6s;
	cursor: pointer;
	opacity: 0;
	transform: translateY(15px);
	transition: .6s;
}

.players-box.show {
	transform: translateY(0);
	opacity: 1;
}

.players-box:hover {
	transform: scale(1.1);
}

.players-box img {
	width: 12rem;
	height: 14rem;
	object-fit: cover;
}

.player.img {
	top: 0;
	position: absolute;
}

.player-name {
	margin-bottom: 3rem;
}

.players-box p {
	font-family: 'Koulen', sans-serif;
	text-align: center;
	font-size: 18px;
}

@media (max-width: 1067px){
	.players-box {
		width: 10rem;
		height: 15rem;
		background-color: #fff;
		position: relative;
		border-radius: 1rem;
		overflow: hidden;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
		transition: 0.6s;
		cursor: pointer;
		opacity: 0;
		transform: translateY(15px);
		transition: .6s;
	}

	.players-box img {
		width: 10rem;
		height: 12rem;
		object-fit: cover;
	}
	
	.player.img {
		top: 0;
		position: absolute;
	}
	
	.player-name {
		margin-bottom: 3rem;
	}
	
	.players-box p {
		font-family: 'Koulen', sans-serif;
		text-align: center;
		font-size: 15px;
	}

}

@media (max-width: 461px){
	.players-container{
	width: 90%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 4rem;
	}

	.players-box{
		width: 8rem;
		height: 13rem;
		background-color: #fff;
		position: relative;
		border-radius: 1rem;
		overflow: hidden;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
		transition: .6s;
		cursor: pointer;
	}
	.players-box:hover{
		transform: scale(1.1);
	}

	.player.img{
		top: 0;
		position: absolute;
	}

	.players-box img{
		width: 8rem;
		height: 10rem;
	}

	.player-name{
		margin-bottom: 3rem;
	}

	.players-box p{
		font-family: 'Koulen', sans-serif;
		text-align: center;
		font-size: 12px;
	}

}

section.club-profile{
	width: 100%;
	height: auto;
	background-color: #e8e8e8;

}



.club-profile-container{
	width: 100%;
	background-color: #fff;
	height: auto;
	overflow: hidden;
	padding: 6rem;

}


.club-logo-back{
	float: right;
	width: 100%;
	position: absolute;

}

.club-logo-back  img{
	position: revert-layer;
}


.club-profile-box{
	height: auto;
	padding: 1rem;
	display: flex;
	gap: 2rem;


}


.club-logo-profile{
	background-color:  #FFF;
}

.club-logo-profile img{
	width: 16rem;
	height: 16rem;
}

.club-name-profile{
	background-color: #fff;
	margin-top: auto;
	bottom: 0;
}

.club-name-profile p{
	font-size: 72px;
	font-family: 'Koulen', sans-serif; 
	color: #000;
	font-style: italic; 
	line-height: 4rem;
	text-align: left;
}


.club-name-profile i{
	font-size: 18px;
}

@media (max-width: 821px){

			.club-profile-box{
			padding: 1rem;
			display: flex;
			gap: 2rem;


			}


			.club-logo-profile{
				background-color:  #FFF;
			}

			.club-logo-profile img{
				width: 10rem;
				height: 10rem;
			}

			.club-name-profile{
				background-color: #fff;
				bottom: 0;
			}

			.club-name-profile p{
				font-size: 36px;
				font-family: 'Koulen', sans-serif; 
				color: #595959; 
				line-height: 2rem;

			}


			.club-name-profile i{
				font-size: 12px;
			}

}

@media (max-width: 769px){

			.club-profile-box{
			padding: .5rem;
			display: flex;
			gap: 2rem;


			}
}

@media (max-width: 541px){

			.club-profile-container{
				width: 100%;
				background-color: #fff;
				height: auto;
				overflow: hidden;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
				padding: 1rem;
			}

			.club-profile-box{
			margin-top: 5rem;
			padding: 1rem;
			display: flex;
			gap: 2rem;


			}


			.club-logo-profile{
				background-color:  #FFF;
			}

			.club-logo-profile img{
				width: 6rem;
				height: 6rem;
			}

			.club-name-profile{
				background-color: #fff;
				bottom: 0;
			}

			.club-name-profile p{
				font-size: 24px;
				font-family: 'Koulen', sans-serif; 
				color: #595959; 
				line-height: 2rem;

			}


			.club-name-profile i{
				font-size: 12px;
			}

}


.club-profile-content-header{
	width: 100%;
	height: 10rem;
	background-color: #d6d4d4;
	text-align: center;
}

.club-profile-content-header h1{
	font-family: 'Koulen', sans-serif;
	font-size: 48px;
	color: #949494;
}

.club-profile-menu{
	background-color: #fff;
	display: flex;
}

.club-profile-menu-box{
	font-family: 'Kanit', sans-serif;
	width: 25%;
	height: 4rem;
	background-color: #2825b3;
	border-left: 2px solid#d6d4d4;
	color: #FFF;
	transition: .3s;
}

.club-profile-menu-box:hover{
	background-color: #e1e1e6;
	cursor: pointer;
	color: #000;
}


.club-profile-menu-box-active{
	width: 25%;
	height: 4rem;
	background-color: #e1e1e6;
	border-left: 2px solid #d6d4d4;
	color: #000;
	font-family: 'Kanit', sans-serif;

}

.club-profile-menu-box p{
	padding-top: .8rem;
	margin: auto;
	font-style: italic;
	font-weight: lighter;
	font-size: 24px;
}

.club-profile-menu-box-active p{
	padding-top: .8rem;
	margin: auto;
	font-style: italic;
	font-weight: bold;
	font-size: 24px;
}

.club-content-headline{
	font-family: 'Koulen', sans-serif;
	padding-top: .2rem; 
	font-size: 48px; 
	color: #949494;
}

@media (max-width: 1025px){

			.club-profile-content-header{
				width: 100%;
				height: 8rem;
				background-color: #d6d4d4;
				text-align: center;
			}

			.club-profile-content-header h1{
				font-family: 'Koulen', sans-serif;
				font-size: 48px;
				color: #949494;
			}

			.club-profile-menu{
				background-color: #fff;
				display: flex;
			}

			.club-profile-menu-box{
				width: 25%;
				height: 4rem;
				background-color:  #2825b3;
				border-left: 2px solid#d6d4d4;
				color: #fff;
				transition: .3s;
			}

			.club-profile-menu-box:hover{
				background-color:  #e1e1e6;
				cursor: pointer;
				color: #000;
			}


			.club-profile-menu-box-active{
				width: 25%;
				height: 4rem;
				background-color: #e1e1e6;
				border-left: 2px solid #d6d4d4;
				color: #000;

			}

			.club-profile-menu-box p{
				padding-top: 1rem;
				margin: auto;
				font-size: 18px;
			}

			.club-profile-menu-box-active p{
				padding-top: 1rem;
				margin: auto;
				font-size: 18px;
			}

			.club-content-headline{
				width: 800; 
				font-size: 36px; 
				color: #949494;
			}

}

@media (max-width: 921px){

			.club-profile-content-header{
				width: 100%;
				height: 8rem;
				background-color: #d6d4d4;
				text-align: center;
			}

			.club-profile-content-header h1{
				font-family: 'Koulen', sans-serif;
				font-size: 48px;
				color: #949494;
			}

			.club-profile-menu{
				background-color: #fff;
				display: flex;
			}

			.club-profile-menu-box{
				width: 25%;
				height: 4rem;
				background-color:  #2825b3;
				border-left: 2px solid#d6d4d4;
				color: #fff;
				transition: .3s;
			}

			.club-profile-menu-box:hover{
				background-color:  #e1e1e6;
				cursor: pointer;
				color: #000;
			}


			.club-profile-menu-box-active{
				width: 25%;
				height: 4rem;
				background-color: #e1e1e6;
				border-left: 2px solid #d6d4d4;
				color: #000;

			}

			.club-profile-menu-box p{
				padding-top: 1rem;
				margin: auto;
				font-size: 20px;
				line-height: 1.2rem;
			}

			.club-profile-menu-box-active p{
				padding-top: 1rem;
				margin: auto;
				font-size: 20px;
				line-height: 1.2rem;
			}

			.club-content-headline{
				width: 800; 
				font-size: 36px; 
				color: #949494;
			}

}

@media (max-width: 769px){

			.club-profile-content-header{
				width: 100%;
				height: 8rem;
				background-color: #d6d4d4;
				text-align: center;
			}

			.club-profile-content-header h1{
				font-family: 'Koulen', sans-serif;
				font-size: 48px;
				color: #949494;
			}

			.club-profile-menu{
				background-color: #fff;
				display: flex;
			}

			.club-profile-menu-box{
				width: 25%;
				height: 4rem;
				background-color: #2825b3;
				border-left: 2px solid#d6d4d4;
				color: #fff;
				transition: .3s;
				font-family: 'Kanit', sans-serif;
			}

			.club-profile-menu-box:hover{
				background-color:  #e1e1e6;
				cursor: pointer;
				color: #000;
			}

			.club-profile-menu-box-active{
				width: 25%;
				height: 4rem;
				background-color: #e1e1e6;
				border-left: 2px solid #d6d4d4;
				color: #000;
				font-family: 'Kanit', sans-serif;

			}

			.club-profile-menu-box p{
				padding-top: 1rem;
				margin: auto;
				font-size: 20px;
				line-height: 1rem;
			}

			.club-profile-menu-box-active p{
				padding-top: 1rem;
				margin: auto;
				font-size: 20px;
				line-height: 1rem;
			}

			.club-content-headline{
				width: 800; 
				font-size: 36px; 
				color: #949494;
			}

}

@media (max-width: 541px){

			.club-profile-content-header{
				width: 100%;
				height: 7rem;
				background-color: #d6d4d4;
				text-align: center;
			}

			.club-profile-content-header h1{
				font-family: 'Koulen', sans-serif;
				font-size: 48px;
				color: #949494;
			}

			.club-profile-menu{
				background-color: #fff;
				display: flex;
			}

			.club-profile-menu-box{
				width: 25%;
				height: 4rem;
				background-color: #2825b3;
				border-left: 2px solid#d6d4d4;
				color: #fff;
				transition: .3s;
				font-family: 'Kanit', sans-serif;
			}

			.club-profile-menu-box:hover{
				background-color: #fc7703;
				cursor: pointer;
				color: #fff;
			}


			.club-profile-menu-box-active{
				width: 25%;
				height: 4rem;
				background-color: #e1e1e6;
				border-left: 2px solid #d6d4d4;
				color: #000;
				font-family: 'Kanit', sans-serif;

			}

			.club-profile-menu-box p{
				padding-top: 1rem;
				margin: auto;
				font-size: 12px;
				line-height: 1rem;
			}

			.club-profile-menu-box-active p{
				padding-top: 1rem;
				margin: auto;
				font-size: 12px;
				line-height: 1rem;
			}

			.club-content-headline{
				width: 800; 
				font-size: 28px; 
				color: #949494;
			}

}

.club-content-container{
	width: 100%;
	height: auto;
	border: 2px solid #d6d4d4;
}

.club-content-container table{
	margin-left: 4rem;
	padding: 1rem;
	font-family: 'Mukta Malar', sans-serif;
	
}

@media (max-width: 541px){
		.club-content-container table{
		margin-left: 1rem;
		padding: 1rem;
		font-family: 'Mukta Malar', sans-serif;
	}


}


.club-pemain-container{
	display: flex;
	flex-wrap: wrap;

}
.club-pemain-box{
	width: 20%;
	height: 23rem;
	border: 1px solid #d6d4d4;
	padding: 1rem;
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
	transform: translateY(15px);
}



.club-pemain-box:hover{
	cursor: pointer;
}

.club-pemain-box.show{
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	position: relative;
	pointer-events: all;
}

.club-pemain-box.hide{
	opacity: 0;
	visibility: hidden;
	position: absolute; /* pastikan elemen tidak mengganggu layout */
	pointer-events: none; /* agar tidak mengganggu interaksi jika ada */
	transition: 0s;
}

.club-pemain-wrapper{
	display: flex;
	height: 80%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.club-pemain-foto{
	width: 	80%;
	height: 100%;
}

.club-pemain-foto img{
	width: 	100%;
	height: 100%;


}


.club-pemain-bio{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	background-color: red;
	font-family: 'Koulen', sans-serif;
}


.club-pemain-pos{
	display: flex;
	flex-direction: column;
	width: 20%;
	text-align: center;
}


.club-pemain-bio-nama{
	font-family: 'Koulen', sans-serif;
	font-size: 18px;
	background-color: #d6d4d4;
	flex-grow: 1;
	padding-left: 1rem;

}

.club-pemain-bio-no{
	font-family: 'Koulen', sans-serif;
	font-size: 38px;
	background-color:#2825b3;
	padding: .2rem;
	color: #fff;
	height: 50%;
}

.club-pemain-bio-posisi{
	font-family: 'Koulen', sans-serif;
	font-size: 38px;
	color: #fff;
	background-color: #2abce8;
	padding: .2rem;
	height: 50%;
}


@media (max-width: 1281px){
			.club-pemain-container{
				display: flex;
				flex-wrap: wrap;

			}
			.club-pemain-box{
				width: 20%;
				height: 16rem;
				border: 1px solid #d6d4d4;
				padding: 1rem;
			}

			.club-pemain-wrapper{
				display: flex;
				height: 80%;
				width: 100%;
			}

			.club-pemain-foto{
				width: 	80%;
				height: 100%;

			}

			.club-pemain-foto img{
				width: 	100%;
				height: 100%;

			}


			.club-pemain-bio{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				background-color: red;
				font-family: 'Koulen', sans-serif;
			}


			.club-pemain-pos{
				display: flex;
				flex-direction: column;
				width: 20%;
				text-align: center;
			}


			.club-pemain-bio-nama{
				font-family: 'Koulen', sans-serif;
				font-size: 18px;
				background-color: #d6d4d4;
				flex-grow: 1;
				padding-left: 1rem;

			}

			.club-pemain-bio-no{
				font-family: 'Koulen', sans-serif;
				font-size: 24px;
				background-color: #2825b3;
				padding: .2rem;
				color: #fff;
				height: 50%;
			}

			.club-pemain-bio-posisi{
				font-family: 'Koulen', sans-serif;
				font-size: 24px;
				background-color: #2abce8;
				padding: .2rem;
				height: 50%;
			}

}

@media (max-width: 1025px){


			.club-pemain-container{
				display: flex;
				flex-wrap: wrap;

			}
			.club-pemain-box{
				width: 25%;
				height: 15rem;
				border: 1px solid #d6d4d4;
				padding: 1rem;
			}

			.club-pemain-wrapper{
				display: flex;
				height: 80%;
				width: 100%;
			}

			.club-pemain-foto{
				width: 	80%;
				height: 100%;

			}

			.club-pemain-foto img{
				width: 	100%;
				height: 100%;

			}


			.club-pemain-bio{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				background-color: red;
				font-family: 'Koulen', sans-serif;
			}


			.club-pemain-pos{
				display: flex;
				flex-direction: column;
				width: 20%;
				text-align: center;
			}


			.club-pemain-bio-nama{
				font-family: 'Koulen', sans-serif;
				font-size: 22px;
				background-color: #d6d4d4;
				flex-grow: 1;
				padding-left: .5rem;

			}

			.club-pemain-bio-no{
				font-family: 'Koulen', sans-serif;
				font-size: 24px;
				background-color: #2825b3;
				padding: .2rem;
				color: #fff;
				height: 50%;
			}

			.club-pemain-bio-posisi{
				font-family: 'Koulen', sans-serif;
				font-size: 24px;
				background-color: #2abce8;
				padding: .2rem;
				height: 50%;
			}

}

@media (max-width: 915px){

			.club-pemain-container{
				display: flex;
				flex-wrap: wrap;

			}
			.club-pemain-box{
				width: 25%;
				height: 12rem;
				border: 1px solid #d6d4d4;
				padding: 1rem;
			}

			.club-pemain-wrapper{
				display: flex;
				height: 80%;
				width: 100%;
			}

			.club-pemain-foto{
				width: 	80%;
				height: 100%;

			}

			.club-pemain-foto img{
				width: 	100%;
				height: 100%;

			}


			.club-pemain-bio{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				background-color: red;
				font-family: 'Koulen', sans-serif;
			}


			.club-pemain-pos{
				display: flex;
				flex-direction: column;
				width: 20%;
				text-align: center;
			}


			.club-pemain-bio-nama{
				font-family: 'Koulen', sans-serif;
				font-size: 14px;
				background-color: #d6d4d4;
				flex-grow: 1;
				padding-left: .5rem;

			}

			.club-pemain-bio-no{
				font-family: 'Koulen', sans-serif;
				font-size: 18px;
				background-color: #2825b3;
				padding: .2rem;
				color: #fff;
				height: 50%;
			}

			.club-pemain-bio-posisi{
				font-family: 'Koulen', sans-serif;
				font-size: 18px;
				background-color: #2abce8;
				padding: .2rem;
				height: 50%;
			}

}

@media (max-width: 821px){
			.club-pemain-container{
				display: flex;
				flex-wrap: wrap;

			}
			.club-pemain-box{
				width: 33.33%;
				height: 14rem;
				border: 1px solid #d6d4d4;
				padding: 1rem;
			}

			.club-pemain-wrapper{
				display: flex;
				height: 80%;
				width: 100%;
			}

			.club-pemain-foto{
				width: 	80%;
				height: 100%;

			}

			.club-pemain-foto img{
				width: 	100%;
				height: 100%;

			}


			.club-pemain-bio{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				background-color: red;
				font-family: 'Koulen', sans-serif;
			}


			.club-pemain-pos{
				display: flex;
				flex-direction: column;
				width: 20%;
				text-align: center;
			}


			.club-pemain-bio-nama{
				font-family: 'Koulen', sans-serif;
				font-size: 18px;
				background-color: #d6d4d4;
				flex-grow: 1;
				padding-left: .5rem;

			}

			.club-pemain-bio-no{
				font-family: 'Koulen', sans-serif;
				font-size: 24px;
				background-color: #2825b3;
				padding: .2rem;
				color: #fff;
				height: 50%;
			}

			.club-pemain-bio-posisi{
				font-family: 'Koulen', sans-serif;
				font-size: 24px;
				background-color: #2abce8;
				padding: .2rem;
				height: 50%;
			}

}

@media (max-width: 769px){
			.club-pemain-container{
				display: flex;
				flex-wrap: wrap;

			}
			.club-pemain-box{
				width: 33.33%;
				height: 14rem;
				border: 1px solid #d6d4d4;
				padding: 1rem;
			}

			.club-pemain-wrapper{
				display: flex;
				height: 80%;
				width: 100%;
			}

			.club-pemain-foto{
				width: 	80%;
				height: 100%;

			}

			.club-pemain-foto img{
				width: 	100%;
				height: 100%;

			}


			.club-pemain-bio{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				background-color: red;
				font-family: 'Koulen', sans-serif;
			}


			.club-pemain-pos{
				display: flex;
				flex-direction: column;
				width: 20%;
				text-align: center;
			}


			.club-pemain-bio-nama{
				font-family: 'Koulen', sans-serif;
				font-size: 18px;
				background-color: #d6d4d4;
				flex-grow: 1;
				padding-left: .5rem;

			}

			.club-pemain-bio-no{
				font-family: 'Koulen', sans-serif;
				font-size: 22px;
				background-color: #2825b3;
				padding: .2rem;
				color: #fff;
				height: 50%;
			}

			.club-pemain-bio-posisi{
				font-family: 'Koulen', sans-serif;
				font-size: 22px;
				background-color: #2abce8;
				padding: .2rem;
				height: 50%;
			}

}

@media (max-width: 767px){
			.club-pemain-container{
				display: flex;
				flex-wrap: wrap;

			}
			.club-pemain-box{
				width: 50%;
				height: 17rem;
				border: 1px solid #d6d4d4;
				padding: 1rem;
			}

			.club-pemain-wrapper{
				display: flex;
				height: 80%;
				width: 100%;
			}

			.club-pemain-foto{
				width: 	80%;
				height: 100%;

			}

			.club-pemain-foto img{
				width: 	100%;
				height: 100%;

			}


			.club-pemain-bio{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				background-color: red;
				font-family: 'Koulen', sans-serif;
			}


			.club-pemain-pos{
				display: flex;
				flex-direction: column;
				width: 20%;
				text-align: center;
			}


			.club-pemain-bio-nama{
				font-family: 'Koulen', sans-serif;
				font-size: 16px;
				background-color: #d6d4d4;
				flex-grow: 1;
				padding-left: .5rem;

			}

			.club-pemain-bio-no{
				font-family: 'Koulen', sans-serif;
				font-size: 22px;
				background-color:#2825b3;
				padding: .2rem;
				color: #fff;
				height: 50%;
			}

			.club-pemain-bio-posisi{
				font-family: 'Koulen', sans-serif;
				font-size: 22px;
				background-color: #2abce8;
				padding: .2rem;
				height: 50%;
			}

}


@media (max-width: 541px){
	.club-pemain-container{
		display: flex;
		flex-wrap: wrap;

	}
	.club-pemain-box{
		width: 50%;
		height: 13rem;
		border: 1px solid #d6d4d4;
		padding: 1rem;
	}

	.club-pemain-wrapper{
		display: flex;
		height: 80%;
		width: 100%;
	}

	.club-pemain-foto{
		width: 	80%;
		height: 100%;

	}

	.club-pemain-foto img{
		width: 	100%;
		height: 100%;

	}


	.club-pemain-bio{
		width: 100%;
		display: flex;
		justify-content: flex-end;
		background-color: red;
		font-family: 'Koulen', sans-serif;
	}


	.club-pemain-pos{
		display: flex;
		flex-direction: column;
		width: 20%;
		text-align: center;
	}


	.club-pemain-bio-nama{
		font-family: 'Koulen', sans-serif;
		font-size: 16px;
		background-color: #d6d4d4;
		flex-grow: 1;
		padding-left: .5rem;

	}

	.club-pemain-bio-no{
		font-family: 'Koulen', sans-serif;
		font-size: 22px;
		background-color:#2825b3;
		padding: .2rem;
		color: #fff;
		height: 50%;
	}

	.club-pemain-bio-posisi{
		font-family: 'Koulen', sans-serif;
		font-size: 22px;
		background-color: #2abce8;
		padding: .2rem;
		height: 50%;
	}

}

@media (max-width: 281px){
			.club-pemain-container{
				display: flex;
				flex-wrap: wrap;

			}
			.club-pemain-box{
				width: 100%;
				height: 16rem;
				border: 1px solid #d6d4d4;
				padding: 1rem;
			}

			.club-pemain-wrapper{
				display: flex;
				height: 80%;
				width: 100%;
			}

			.club-pemain-foto{
				width: 	80%;
				height: 100%;

			}

			.club-pemain-foto img{
				width: 	100%;
				height: 100%;

			}


			.club-pemain-bio{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				background-color: red;
				font-family: 'Koulen', sans-serif;
			}


			.club-pemain-pos{
				display: flex;
				flex-direction: column;
				width: 20%;
				text-align: center;
			}


			.club-pemain-bio-nama{
				font-family: 'Koulen', sans-serif;
				font-size: 15px;
				background-color: #d6d4d4;
				flex-grow: 1;
				padding-left: .5rem;

			}

			.club-pemain-bio-no{
				font-family: 'Koulen', sans-serif;
				font-size: 22px;
				background-color: #2825b3;
				padding: .2rem;
				color: #fff;
				height: 50%;
			}

			.club-pemain-bio-posisi{
				font-family: 'Koulen', sans-serif;
				font-size: 22px;
				background-color: #2abce8;
				padding: .2rem;
				height: 50%;
			}

}

.club-jadwal-container{
	display: flex;
	padding-top: 2rem;
	padding-bottom: 2rem;
	flex-direction: column;

}

.club-jadwal-box{
	background-color: #fff;
	border: 2px solid #595757;
	overflow: hidden;
	width: 95%;
	height: 18rem;
	margin: auto;
	display: flex;
	flex-direction: column;
	transform: translateY(15px);
}

.club-jadwal-box.hide {
	opacity: 0;
	visibility: hidden;
	position: absolute; 
	pointer-events: none; 
	transition: 0s;
  }
  
  .club-jadwal-box.show {
	opacity: 1;
	visibility: visible;
	position: relative;
	pointer-events: all;
	transition: .5s;
	transform: translateY(-15px);
  }

.club-jadwal-date{
	font-family: 'Rajdhani', sans-serif;
	text-align: center;
	padding: .5rem;
	font-size: 16px;
	width: 100%;
	height: 2.5rem;
	background-color: #595757;
	color: #fff;
}

.club-jadwal-match{
	display: flex;
	justify-content: space-evenly;
	background-color: #fff;
	height: 80%;
}

.club-jadwal-score{
	width: 30%;
	height: 100%;
	display: flex;
	justify-content: center;
	padding-top: 5rem;
}

.match-home-foto img,
.match-away-foto img{
	width: 8rem;
	height: 8rem;
	margin: auto;
}

.match-home-foto{
	margin: auto;

}

.match-home-nama{
	margin-top: auto;
	margin-bottom: auto;
	text-align: left;
	width: 50%;
	font-size: 24px;

}

.match-home-nama p{
	margin: auto;
	font-size: 24px;
}

.match-away-foto{
	margin: auto;

}

.match-away-nama{
	margin-top: auto;
	margin-bottom: auto;
	text-align: right;
	width: 50%;
	font-size: 24px;

}

.match-away-nama p{
	margin: auto;
	font-size: 24px;
}

.match-home{
	width: 35%;
	height: 100%;
	display: flex;
	justify-content: center;
}



.score-home{
	width: 20%;
	height: 100%;
	font-family: 'Koulen', sans-serif;
	font-size: 38px;
	text-align: right;
}


.match-away{
	width: 35%;
	height: 100%;
	display: flex;
	justify-content: center;
}

.score-away{
	width: 20%;
	height: 100%;
	font-family: 'Koulen', sans-serif;
	font-size: 38px;
	text-align: left;
}

.score-away p{
	margin: auto;
}

.score-final{
	width: 60%;
	height: 100%;
	font-size: 38px;
	display: flex;
	justify-content: center;	
	margin: auto;
}

.score-final p{
	text-align: center;

}

.club-jadwal-match p{
	font-family: 'Koulen', sans-serif;

}

.club-jadwal-box a{
	text-align: center;
	width: 100%;

}

@media (max-width: 1025px){
			.club-jadwal-container{
					display: flex;
					padding-top: 2rem;
					padding-bottom: 2rem;
					flex-direction: column;

				}

				.club-jadwal-box{
					background-color: #fff;
					border: 2px solid #595757;
					overflow: hidden;
					width: 95%;
					height: 12rem;
					margin: auto;
					display: flex;
					flex-direction: column;
				}

				.club-jadwal-date{
					font-family: 'Rajdhani', sans-serif;
					text-align: center;
					padding: .5rem;
					font-size: 16px;
					width: 100%;
					height: 2.5rem;
					background-color: #595757;
					color: #fff;
				}

				.club-jadwal-match{
					display: flex;
					justify-content: space-evenly;
					background-color: #fff;
					height: 80%;
				}

				.club-jadwal-score{
					width: 30%;
					height: 100%;
					display: flex;
					justify-content: center;
					padding-top: 3.5rem;
				}

				.match-home-foto img,
				.match-away-foto img{
					width: 6rem;
					height: 6rem;
					margin: auto;
				}

				.match-home-foto{
					margin: auto;

				}

				.match-home-nama{
					margin-top: auto;
					margin-bottom: auto;
					text-align: left;
					width: 50%;

				}

				.match-home-nama p{
					margin: auto;
					font-size: 18px;
				}

				.match-away-foto{
					margin: auto;

				}

				.match-away-nama{
					margin-top: auto;
					margin-bottom: auto;
					text-align: right;
					width: 50%;

				}

				.match-away-nama p{
					margin: auto;
					font-size: 18px;
				}

				.match-home{
					width: 35%;
					height: 100%;
					display: flex;
					justify-content: center;
				}



				.score-home{
					width: 20%;
					height: 100%;
					font-family: 'Koulen', sans-serif;
					font-size: 28px;
					text-align: right;
				}


				.match-away{
					width: 35%;
					height: 100%;
					display: flex;
					justify-content: center;
				}

				.score-away{
					width: 20%;
					height: 100%;
					font-family: 'Koulen', sans-serif;
					font-size: 28px;
					text-align: left;
				}

				.score-away p{
					margin: auto;
				}

				.score-final{
					width: 60%;
					height: 100%;
					display: flex;
					justify-content: center;	
					margin: auto;
				}

				.score-final p{
					font-size: 24px;
					text-align: center;

				}

				.club-jadwal-match p{
					font-family: 'Koulen', sans-serif;

				}

				.club-jadwal-box a{
					text-align: center;
					width: 100%;

				}


}

@media (max-width: 821px){
			.club-jadwal-container{
					display: flex;
					padding-top: 2rem;
					padding-bottom: 2rem;
					flex-direction: column;

				}

				.club-jadwal-box{
					background-color: #fff;
					border: 2px solid #595757;
					overflow: hidden;
					width: 95%;
					height: 12rem;
					margin: auto;
					display: flex;
					flex-direction: column;
				}

				.club-jadwal-date{
					font-family: 'Rajdhani', sans-serif;
					text-align: center;
					padding: .5rem;
					font-size: 16px;
					width: 100%;
					height: 2.5rem;
					background-color: #595757;
					color: #fff;
				}

				.club-jadwal-match{
					display: flex;
					justify-content: space-evenly;
					background-color: #fff;
					height: 80%;
				}

				.club-jadwal-score{
					width: 30%;
					height: 100%;
					display: flex;
					justify-content: center;
					padding-top: 2.5rem;
				}

				.match-home-foto img,
				.match-away-foto img{
					width: 6rem;
					height: 6rem;
					margin: auto;
				}

				.match-home-foto{
					margin: auto;

				}

				.match-home-nama{
					margin-top: auto;
					margin-bottom: auto;
					text-align: left;
					width: 50%;

				}

				.match-home-nama p{
					margin: auto;
					font-size: 14px;
				}

				.match-away-foto{
					margin: auto;

				}

				.match-away-nama{
					margin-top: auto;
					margin-bottom: auto;
					text-align: right;
					width: 50%;

				}

				.match-away-nama p{
					margin: auto;
					font-size: 14px;
				}

				.match-home{
					width: 35%;
					height: 100%;
					display: flex;
					justify-content: center;
				}



				.score-home{
					width: 20%;
					height: 100%;
					font-family: 'Koulen', sans-serif;
					font-size: 20px;
					text-align: right;
				}


				.match-away{
					width: 35%;
					height: 100%;
					display: flex;
					justify-content: center;
				}

				.score-away{
					width: 20%;
					height: 100%;
					font-family: 'Koulen', sans-serif;
					font-size: 20px;
					text-align: left;
				}

				.score-away p{
					margin: auto;
				}

				.score-final{
					width: 60%;
					height: 100%;
					display: flex;
					justify-content: center;	
					margin: auto;
				}

				.score-final p{
					font-size: 20px;
					text-align: center;

				}

				.club-jadwal-match p{
					font-family: 'Koulen', sans-serif;

				}

				.club-jadwal-box a{
					text-align: center;
					width: 100%;

				}


}

@media (max-width: 561px){
	.club-jadwal-container{
			display: flex;
			padding-top: 2rem;
			padding-bottom: 2rem;
			flex-direction: column;

		}

		.club-jadwal-box{
			background-color: #fff;
			border: 2px solid #595757;
			overflow: hidden;
			width: 95%;
			height: 8rem;
			margin: auto;
			display: flex;
			flex-direction: column;
		}

		.club-jadwal-date{
			font-family: 'Rajdhani', sans-serif;
			text-align: center;
			padding: .5rem;
			font-size: 16px;
			width: 100%;
			height: 2.5rem;
			background-color: #595757;
			color: #fff;
		}

		.club-jadwal-match{
			display: flex;
			justify-content: space-evenly;
			background-color: #fff;
			height: 80%;
		}

		.club-jadwal-score{
			width: 30%;
			height: 100%;
			display: flex;
			justify-content: center;
			padding-top: 1.5rem;
		}

		.match-home-foto img,
		.match-away-foto img{
			width: 4rem;
			height: 4rem;
			margin: auto;
			padding: 4px;
		}

		.match-home-foto{
			margin: auto;

		}

		.match-home-nama{
			margin-top: auto;
			margin-bottom: auto;
			text-align: left;
			width: 50%;

		}

		.match-home-nama p{
			margin: auto;
			font-size: 10px;
			padding-left: 4px;
		}

		.match-away-foto{
			margin: auto;

		}

		.match-away-nama{
			margin-top: auto;
			margin-bottom: auto;
			text-align: right;
			width: 50%;

		}

		.match-away-nama p{
			margin: auto;
			font-size: 10px;
			padding-right: 4px;
		}

		.match-home{
			width: 35%;
			height: 100%;
			display: flex;
			justify-content: center;
		}



		.score-home{
			width: 20%;
			height: 100%;
			font-family: 'Koulen', sans-serif;
			font-size: 16px;
			text-align: right;
		}


		.match-away{
			width: 35%;
			height: 100%;
			display: flex;
			justify-content: center;
		}

		.score-away{
			width: 20%;
			height: 100%;
			font-family: 'Koulen', sans-serif;
			font-size: 16px;
			text-align: left;
		}

		.score-away p{
			margin: auto;
		}

		.score-final{
			width: 60%;
			height: 100%;
			display: flex;
			justify-content: center;	
			margin: auto;
		}

		.score-final p{
			font-size: 16px;
			text-align: center;

		}

		.club-jadwal-match p{
			font-family: 'Koulen', sans-serif;

		}

		.club-jadwal-box a{
			text-align: center;
			font-size: 10px;
			width: 100%;

		}


}


@media (max-width: 461px){
			.club-jadwal-container{
					display: flex;
					padding-top: 2rem;
					padding-bottom: 2rem;
					flex-direction: column;

				}

				.club-jadwal-box{
					background-color: #fff;
					border: 2px solid #595757;
					overflow: hidden;
					width: 95%;
					height: 8rem;
					margin: auto;
					display: flex;
					flex-direction: column;
				}

				.club-jadwal-date{
					font-family: 'Rajdhani', sans-serif;
					text-align: center;
					padding: .5rem;
					font-size: 16px;
					width: 100%;
					height: 2.5rem;
					background-color: #595757;
					color: #fff;
				}

				.club-jadwal-match{
					display: flex;
					justify-content: space-evenly;
					background-color: #fff;
					height: 80%;
				}

				.club-jadwal-score{
					width: 30%;
					height: 100%;
					display: flex;
					justify-content: center;
					padding-top: 1.5rem;
				}

				.match-home-foto img,
				.match-away-foto img{
					width: 4rem;
					height: 4rem;
					margin: auto;
					padding: 4px;
				}

				.match-home-foto{
					margin: auto;

				}

				.match-home-nama{
					margin-top: auto;
					margin-bottom: auto;
					text-align: left;
					width: 50%;

				}

				.match-home-nama p{
					margin: auto;
					font-size: 10px;
					padding-left: 4px;
				}

				.match-away-foto{
					margin: auto;

				}

				.match-away-nama{
					margin-top: auto;
					margin-bottom: auto;
					text-align: right;
					width: 50%;

				}

				.match-away-nama p{
					margin: auto;
					font-size: 10px;
					padding-right: 4px;
				}

				.match-home{
					width: 35%;
					height: 100%;
					display: flex;
					justify-content: center;
				}



				.score-home{
					width: 20%;
					height: 100%;
					font-family: 'Koulen', sans-serif;
					font-size: 15px;
					text-align: right;
				}


				.match-away{
					width: 35%;
					height: 100%;
					display: flex;
					justify-content: center;
				}

				.score-away{
					width: 20%;
					height: 100%;
					font-family: 'Koulen', sans-serif;
					font-size: 15px;
					text-align: left;
				}

				.score-away p{
					margin: auto;
				}

				.score-final{
					width: 60%;
					height: 100%;
					display: flex;
					justify-content: center;	
					margin: auto;
				}

				.score-final p{
					font-size: 14px;
					text-align: center;

				}

				.club-jadwal-match p{
					font-family: 'Koulen', sans-serif;

				}

				.club-jadwal-box a{
					text-align: center;
					font-size: 10px;
					width: 100%;

				}


}

@media (max-width: 376px){
	.club-jadwal-container{
			display: flex;
			padding-top: 2rem;
			padding-bottom: 2rem;
			flex-direction: column;

		}

		.club-jadwal-box{
			background-color: #fff;
			border: 2px solid #595757;
			overflow: hidden;
			width: 95%;
			height: 8rem;
			margin: auto;
			display: flex;
			flex-direction: column;
		}

		.club-jadwal-date{
			font-family: 'Rajdhani', sans-serif;
			text-align: center;
			padding: .5rem;
			font-size: 16px;
			width: 100%;
			height: 2.5rem;
			background-color: #595757;
			color: #fff;
		}

		.club-jadwal-match{
			display: flex;
			justify-content: space-evenly;
			background-color: #fff;
			height: 80%;
		}

		.club-jadwal-score{
			width: 30%;
			height: 100%;
			display: flex;
			justify-content: center;
			padding-top: 1.5rem;
		}

		.match-home-foto img,
		.match-away-foto img{
			width: 4rem;
			height: 4rem;
			margin: auto;
			padding: 4px;
		}

		.match-home-foto{
			margin: auto;

		}

		.match-home-nama{
			margin-top: auto;
			margin-bottom: auto;
			text-align: left;
			width: 50%;

		}

		.match-home-nama p{
			margin: auto;
			font-size: 10px;
			padding-left: 4px;
		}

		.match-away-foto{
			margin: auto;

		}

		.match-away-nama{
			margin-top: auto;
			margin-bottom: auto;
			text-align: right;
			width: 50%;

		}

		.match-away-nama p{
			margin: auto;
			font-size: 10px;
			padding-right: 4px;
		}

		.match-home{
			width: 35%;
			height: 100%;
			display: flex;
			justify-content: center;
		}



		.score-home{
			width: 20%;
			height: 100%;
			font-family: 'Koulen', sans-serif;
			font-size: 13px;
			text-align: right;
		}


		.match-away{
			width: 35%;
			height: 100%;
			display: flex;
			justify-content: center;
		}

		.score-away{
			width: 20%;
			height: 100%;
			font-family: 'Koulen', sans-serif;
			font-size: 13px;
			text-align: left;
		}

		.score-away p{
			margin: auto;
		}

		.score-final{
			width: 60%;
			height: 100%;
			display: flex;
			justify-content: center;	
			margin: auto;
		}

		.score-final p{
			font-size: 12px;
			text-align: center;

		}

		.club-jadwal-match p{
			font-family: 'Koulen', sans-serif;

		}

		.club-jadwal-box a{
			text-align: center;
			font-size: 10px;
			width: 100%;

		}


}

@media (max-width: 281px){
			.club-jadwal-container{
					display: flex;
					padding-top: 2rem;
					padding-bottom: 2rem;
					flex-direction: column;

				}

				.club-jadwal-box{
					background-color: #fff;
					border: 2px solid #595757;
					overflow: hidden;
					width: 95%;
					height: 8rem;
					margin: auto;
					display: flex;
					flex-direction: column;
				}

				.club-jadwal-date{
					font-family: 'Rajdhani', sans-serif;
					text-align: center;
					padding: .5rem;
					font-size: 12px;
					width: 100%;
					height: 2.5rem;
					background-color: #595757;
					color: #fff;
				}

				.club-jadwal-match{
					display: flex;
					justify-content: space-evenly;
					background-color: #fff;
					height: 80%;
				}

				.club-jadwal-score{
					width: 30%;
					height: 100%;
					display: flex;
					justify-content: center;
					padding-top: 1.8rem;
				}

				.match-home-foto img,
				.match-away-foto img{
					width: 3rem;
					height: 3rem;
					margin: auto;
					padding: 4px;
				}

				.match-home-foto{
					margin: auto;

				}

				.match-home-nama{
					margin-top: auto;
					margin-bottom: auto;
					text-align: left;
					width: 50%;

				}

				.match-home-nama p{
					margin: auto;
					font-size: 10px;
					padding-left: 2px;
				}

				.match-away-foto{
					margin: auto;

				}

				.match-away-nama{
					margin-top: auto;
					margin-bottom: auto;
					text-align: right;
					width: 50%;

				}

				.match-away-nama p{
					margin: auto;
					font-size: 10px;
					padding-right: 2px;
				}

				.match-home{
					width: 35%;
					height: 100%;
					display: flex;
					justify-content: center;
				}



				.score-home{
					width: 20%;
					height: 100%;
					font-family: 'Koulen', sans-serif;
					font-size: 12px;
					text-align: right;
				}


				.match-away{
					width: 35%;
					height: 100%;
					display: flex;
					justify-content: center;
				}

				.score-away{
					width: 20%;
					height: 100%;
					font-family: 'Koulen', sans-serif;
					font-size: 12px;
					text-align: left;
				}

				.score-away p{
					margin: auto;
				}

				.score-final{
					width: 60%;
					height: 100%;
					font-size: 16px;
					display: flex;
					justify-content: center;	
					margin: auto;
				}

				.score-final p{
					text-align: center;

				}

				.club-jadwal-match p{
					font-size: 12px;
					font-family: 'Koulen', sans-serif;

				}

				.club-jadwal-box a{
					text-align: center;
					font-size: 10px;
					width: 100%;

				}


}

.club-stats-container{	
	display: flex;
	justify-content: center;
	padding: 1rem;


}

.club-stats-container.hide {
	opacity: 0;
	visibility: hidden;
	position: absolute; 
	pointer-events: none; 
	transition: 0s;
  }
  
  .club-stats-container.show {
	opacity: 1;
	visibility: visible;
	position: relative;
	pointer-events: all;
	transition: .5s;
  }



.club-stats-container table{	
	border-collapse: collapse;
	margin: 25px 0;
	font-size: 1.5rem;
	min-width: 100%;

}

.table-pemain-stats{


}

.clubstatsitem{
	

}

.clubstatsitem.hide {
	opacity: 0;
	visibility: hidden;
	position: absolute; 
	pointer-events: none; 
	transition: 0s;
  }
  
  .clubstatsitem.show {
	opacity: 1;
	visibility: visible;
	position: relative;
	pointer-events: all;
	transition: .5s;
  }

.table-pemain-stats thead tr{
	background-color: #595757;
	color: #fff;
	text-align: left;
}


.club-series-stats.hide {
	opacity: 0;
	visibility: hidden;
	position: absolute; 
	pointer-events: none; 
	transition: 0s;
  }
  
  .club-series-stats.show {
	opacity: 1;
	visibility: visible;
	position: relative;
	pointer-events: all;
	transition: .5s;
  }

.table-pemain-stats .win-rate-row{
	background-color: rgba(39, 37, 179, 0.9);
	color: #fff;
}

.table-pemain-stats tbody tr{
	background-color: #e8e7e6;
	color: #000;
	border-bottom: 1px solid #fff ;
}

.table-pemain-stats tbody td{
	border-left: 1px solid #fff;
}

.table-pemain-stats th,
.table-pemain-stats td{
	padding: 12px 15px ;
	font-family: 'Rajdhani', sans-serif;
}

@media (max-width: 1281px){

			.club-stats-container{	
				display: flex;
				justify-content: center;
				padding: 1rem;


			}

			.club-stats-container table{	
				border-collapse: collapse;
				margin: 25px 0;
				font-size: 1rem;
				min-width: 100%;

			}

			.table-pemain-stats{


			}

			.table-pemain-stats thead tr{
				background-color: #595757;
				color: #fff;
				text-align: left;
			}

			.table-pemain-stats tbody tr{
				background-color: #e8e7e6;
				color: #000;
				border-bottom: 1px solid #fff ;
			}

			.table-pemain-stats tbody td{
				border-left: 1px solid #fff;
			}

			.table-pemain-stats th,
			.table-pemain-stats td{
				padding: 5px 8px ;

			}


}

@media (max-width: 821px){

			.club-stats-container{	
				display: flex;
				justify-content: center;
				padding: 1rem;


			}

			.club-stats-container table{	
				border-collapse: collapse;
				margin: 25px 0;
				font-size: 1.5rem;
				min-width: 100%;

			}

			.table-pemain-stats{


			}

			.table-pemain-stats thead tr{
				background-color: #595757;
				color: #fff;
				text-align: left;
			}

			.table-pemain-stats tbody tr{
				background-color: #e8e7e6;
				color: #000;
				border-bottom: 1px solid #fff ;
			}

			.table-pemain-stats tbody td{
				border-left: 1px solid #fff;
			}

			.table-pemain-stats th,
			.table-pemain-stats td{
				padding: 5px 8px ;

			}

			.table-pemain-stats th,
			.table-pemain-stats td{
				padding: 2px 4px ;
				width: auto;
				word-break: break-word;

			}



}

@media (max-width: 769px){

			.club-stats-container{	
				display: flex;
				justify-content: center;
				padding: 1rem;


			}

			.club-stats-container table{	
				border-collapse: collapse;
				margin: 25px 0;
				font-size: 1rem;
				min-width: 100%;

			}

			.table-pemain-stats{

			}

			.table-pemain-stats thead tr{
				background-color: #595757;
				color: #fff;
				text-align: left;
			}

			.table-pemain-stats tbody tr{
				background-color: #e8e7e6;
				color: #000;
				border-bottom: 1px solid #fff ;
			}

			.table-pemain-stats tbody td{
				border-left: 1px solid #fff;
			}

			.table-pemain-stats th,
			.table-pemain-stats td{
				padding: 2px 4px ;
				width: auto;
				word-break: break-word;

			}

}

@media (max-width: 541px){

			.club-stats-container{	
				display: flex;
				justify-content: center;
				padding: 1rem;


			}

			.club-stats-container table{	
				border-collapse: collapse;
				margin: 15px 0;
				font-size: 0.9em;
				min-width: 100%;

			}

			.table-pemain-stats{

			}

			.table-pemain-stats thead tr{
				background-color: #595757;
				color: #fff;
				text-align: left;
			}

			.table-pemain-stats tbody tr{
				background-color: #e8e7e6;
				color: #000;
				border-bottom: 1px solid #fff ;
			}

			.table-pemain-stats tbody td{
				border-left: 1px solid #fff;
			}

			.table-pemain-stats th,
			.table-pemain-stats td{
				padding: 1px 1px ;
				width: auto;
				word-break: break-word;

			}

}

@media (max-width: 421px){
			
			.club-stats-container{	
				display: flex;
				justify-content: center;
				padding: .5rem;


			}

			.club-stats-container table{	
				border-collapse: collapse;
				margin: 25px 0;
				font-size: 0.7em;
				min-width: 100%;

			}

			.table-pemain-stats{

			}

			.table-pemain-stats thead tr{
				background-color: #595757;
				color: #fff;
				text-align: left;
			}

			.table-pemain-stats tbody tr{
				background-color: #e8e7e6;
				color: #000;
				border-bottom: 1px solid #fff ;
			}

			.table-pemain-stats tbody td{
				border-left: 1px solid #fff;
			}

			.table-pemain-stats th,
			.table-pemain-stats td{
				padding: 2px 1.5px ;
				width: auto;
				word-break: break-word;

			}

}

@media (max-width: 281px){
			
			.club-stats-container{	
				display: flex;
				justify-content: center;
				padding: .5rem;


			}

			.club-stats-container table{	
				border-collapse: collapse;
				margin: 25px 0;
				font-size: 0.5em;
				min-width: 100%;

			}

			.table-pemain-stats{

			}

			.table-pemain-stats thead tr{
				background-color: #595757;
				color: #fff;
				text-align: left;
			}

			.table-pemain-stats tbody tr{
				background-color: #e8e7e6;
				color: #000;
				border-bottom: 1px solid #fff ;
			}

			.table-pemain-stats tbody td{
				border-left: 1px solid #fff;
			}

			.table-pemain-stats th,
			.table-pemain-stats td{
				padding: 2px 1.5px ;
				width: auto;
				word-break: break-word;

			}

}

 section.player-detail-page{
	width: 100%;
	height: auto;
	background-color: #fff;
	box-sizing: border-box;

}

.animated-bg-wrapper {
           	padding-top: 8rem;
			width: 100%;
			height: auto;
			padding-bottom: 7rem;
			display: flex;
			flex-direction: column;
			gap: 3rem;
			/* box-shadow: 0px 5px 8px -5px rgba(0, 0, 0, 0.3); */
			position: relative;
        }


        .animation-drop div {
            position: absolute;
            font-size: 97px;
            background-color: transparent;
            color: rgba(252, 119, 3, 0.9);
            z-index: 1;
            
        }

        .animation-drop div img{
        	width: 6rem;
        	height: 6rem;
        }

        .animation-drop div:nth-child(1) {
            top: 7%;
            left: 27%;
            animation: animate 10s linear infinite;
        }

        .animation-drop div:nth-child(2) {
            top: 70%;
            left: 50%;
            animation: animate 7s linear infinite;
        }

        .animation-drop div:nth-child(3) {
            top: 27%;
            left: 6%;
            animation: animate 9s linear infinite;
        }

        .animation-drop div:nth-child(4) {
            top: 20%;
            left: 60%;
            animation: animate 10s linear infinite;
        }

        .animation-drop div:nth-child(5) {
            top: 67%;
            left: 10%;
            animation: animate 6s linear infinite;
        }

        .animation-drop div:nth-child(6) {
            top: 75%;
            left: 80%;
            animation: animate 12s linear infinite;
        }

        .animation-drop div:nth-child(7) {
            top: 60%;
            left: 80%;
            animation: animate 15s linear infinite;
        }

        .animation-drop div:nth-child(8) {
            top: 42%;
            left: 22%;
            animation: animate 16s linear infinite;
        }

        .animation-drop div:nth-child(9) {
            top: 87%;
            left: 15%;
            animation: animate 9s linear infinite;
        }

        .animation-drop div:nth-child(10) {
            top: 20%;
            left: 80%;
            animation: animate 5s linear infinite;
        }

        .animation-drop div:nth-child(11) {
            top: 40%;
            left: 90%;
            animation: animate 5s linear infinite;
        }

        .animation-drop div:nth-child(12) {
            top: 85%;
            left: 67%;
            animation: animate 5s linear infinite;
        }

        .animation-drop div:nth-child(13) {
            top: 87%;
            left: 89%;
            animation: animate 5s linear infinite;
        }

        @keyframes animate {
            0% {
                transform: scale(0) translateY(0) rotate(0);
                opacity: 1;
            }
            100% {
                transform: scale(1.3) translateY(-90px) rotate(360deg);
                opacity: 0;
            }
        }


.player-detail-page-container{
	width: 100%;
	height: auto;
	padding: 6rem;

}

.player-detail-container{
	padding-top: 12rem;
	width: 100%;
	height: auto;
	background-color: #fff;	
	
}

.player-detail-box{
	margin: auto;
	padding: 0;
	width: 56rem;
	height: auto;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid #d1d1d1;
	border-top-right-radius: 2rem;
	border-bottom-left-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	animation: unfold 1.5s ease-in-out forwards;
	z-index: 2;
	position: relative;
	

}

@keyframes unfold {
  0% {
    transform: rotateY(0deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(-180deg);
    opacity: 1;
  }
}

.player-detail-box-header{
	width: 100%;
	height: 15%;
	background-color: #d1d1d1;
	text-align: center;
}

.player-detail-box-header p{
	padding-top: 1.2rem;
	font-family: 'Sarpanch', sans-serif;
	color: #fff;
	font-size: 24px;
	transform: rotateY(180deg);
}

.player-detail-box-header img{
	float: left;
	margin: .8rem;
	width: 3rem;
	height: 3rem;
	transform: rotateY(180deg);
}

.player-detail-content{
	transform: rotateY(180deg);
	width: 100%;
	height: 85%;
	background-color: #fff;
	display: flex;
}

.player-detail-foto{
	width: 30%;
	height: 100%;
	background-color: grey;
}

.player-detail-foto img{
	width: 100%;
	height: 100%;
}

.player-detail-data{
	width: 70%;
	height: auto;
	display: relative;
	display: flex;
	flex-direction: column;
	background-color: #fff;

}

.player-detail-bio{
	width: 100%;
	height: 60%;
	background-color: #fff;
	top: 0;
}

.namaplayer-club-wrapper{
	height: 40%;
}

.player-detail-nama{

}

.player-detail-nama p{
	margin: 1rem;
	font-size: 32px;
	word-break: break-word;
	line-height: 2rem;
}

.player-detail-club{

}

.player-detail-club p{
	font-size: 20px;
	font-weight: lighter;
	line-height: .5rem;
	margin-left: 1rem;
}

.biodata-wrapper{

	height: 60%;
	background-color: #e0dede;
	padding-bottom: 1rem;

}

.player-detail-biodata{
	background-color: #e0dede;
	border-bottom: 1px solid #Fff;
	display: flex;
	padding-left: 1rem;
	padding-top: .3rem;
	height: 33%;
	
}
.isi-biodata{
	width: 50%;
}

.player-detail-biodata div{
	font-size: 1.2rem;
}


.player-detail-stats{
	width: 100%;
	height: 40%;
	background-color: #fc7703 ;
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.player-detail-stats.hide {
	opacity: 0;
	visibility: hidden;
	position: absolute; 
	pointer-events: none; 
	transition: 0s;
  }
  
  .player-detail-stats.show {
	opacity: 1;
	visibility: visible;
	position: relative;
	pointer-events: all;
  }

.player-detail-content-charts{
	transform: rotateY(180deg);
	width: 100%;
	height: 85%;
	background-color: #fff;
	display: flex;
}

.stats-chart{
	width: 30%;
	padding: 1rem;
}

.player-detail-avgstats{
	width: 70%;
	height: auto;
	background-color: #fc7703 ;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0;
}

.total-pertandingan-capt{
	width: 100%;
	height: auto;
	background-color: #fff;
	text-align: center;
	border: 4px solid #fc7703;
	font-size: 22px;
	padding: .5rem;
}

.total-pertandingan-capt.hide {
	opacity: 0;
	visibility: hidden;
	position: absolute; 
	pointer-events: none; 
	transition: 0s;
  }
  
  .total-pertandingan-capt.show {
	opacity: 1;
	visibility: visible;
	position: relative;
	pointer-events: all;
  }

.total-pertandingan-capt p{
	font-family:'Rajdhani', sans-serif;
	color: #fc7703;
}

.stats-capt{
	width: 100%;
	text-align: center;
	font-family:'Koulen', sans-serif ;
	font-size: 18px;
	color: #fff;
} 



.player-detail-stats-points{
	padding: 1rem;
	background-color: #fff;
}


.player-detail-stats-container{
	display: flex;
	width: 100%;
	justify-content: center;
	height: 100%;
	padding-bottom: 2rem;
	gap: 2rem;
}

.player-detail-avgstats-container{
	display: flex;
	width: 100%;
	justify-content: center;
	height: 100%;
	padding-bottom: 2rem;
	gap: 2rem;
}

.player-detail-avgstats-container.hide {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	pointer-events: none; 
	transition: 0s;
  }
  
  .player-detail-avgstats-container.show {
	opacity: 1;
	position: relative;
	visibility: visible;
	pointer-events: all;
  }



.item{
	display: flex;
	flex-direction: column;
}

.item p{
	font-family: 'Sarpanch', sans-serif;
	font-size: 18px;
	font-weight: 500;
}

.player-detail-stats-points{
	background-color: transparent;
	text-align: center;
	color: #fff;
}
.player-detail-stats-points2{
	text-align: center;
	background-color: #fff;
	padding: 1.5rem;
	border-radius: 50%;
}

.player-detail-back-button{
	justify-content: center;
	margin: auto;
	transition: .8s;
	z-index: 2;
	margin-bottom: 4rem;
}

.player-detail-back-button a{
	font-family: 'Mukta Malar', sans-serif;
	font-size: 18px;
	text-decoration: none;
	padding: 1rem;
	padding-left: 4rem;
	padding-right: 4rem;
	border: 1px solid #fc7703;
	color: #fc7703;
	border-radius: 12px;
	transition: 1s;
}

@media (max-width: 1024px){
	.animation-drop div {
		position: absolute;
		font-size: 42px;
		background-color: transparent;
		color: rgba(252, 119, 3, 0.9);
		z-index: 1;
		display: none;
		
	}
	.animation-drop div img{
		display: none;
		width: 2rem;
		height: 2rem;
	}

}

@media (max-width: 915px){

			.player-detail-page-container{
				width: 100%;
				height: auto;
				padding: 6rem;

			}

			.player-detail-container{
				padding-top: 12rem;
				width: 100%;
				height: auto;
				background-color: #fff;	
				
			}

			.player-detail-box{
				margin: auto;
				width: 42rem;
				height: auto;
				background-color: #fff;
				border: 1px solid #d1d1d1;
				border-top-right-radius: 2rem;
				border-bottom-left-radius: 2rem;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
				animation: unfold 1.5s ease-in-out forwards;
				z-index: 2;
				position: relative;
				

			}

			@keyframes unfold {
			  0% {
			    transform: rotateY(0deg);
			    opacity: 0;
			  }
			  100% {
			    transform: rotateY(-180deg);
			    opacity: 1;
			  }
			}

			.player-detail-box-header{
				width: 100%;
				height: 15%;
				background-color: #d1d1d1;
				text-align: center;
			}

			.player-detail-box-header p{
				padding-top: .8rem;
				font-family: 'Sarpanch', sans-serif;
				color: #fff;
				font-size: 24px;
				transform: rotateY(180deg);
			}

			.player-detail-box-header img{
				float: left;
				margin: .8rem;
				width: 2rem;
				height: 2rem;
				transform: rotateY(180deg);
			}

			.player-detail-content{
				transform: rotateY(180deg);
				width: 100%;
				height: 85%;
				background-color: #fff;
				display: flex;
			}

			.player-detail-foto{
				width: 30%;
				height: 100%;
				background-color: grey;
			}

			.player-detail-foto img{
				width: 100%;
				height: 100%;
			}

			.player-detail-data{
				width: 70%;
				height: 100%;
				display: flex;
				flex-direction: column;
				background-color: purple;

			}

			.player-detail-bio{
				width: 100%;
				height: 60%;
				background-color: #fff;
				top: 0;
			}

			.namaplayer-club-wrapper{
				height: 40%;
			}

			.player-detail-nama{

			}

			.player-detail-nama p{
				margin: 1rem;
				font-size: 22px;
				word-break: break-word;
				line-height: .5rem;
			}

			.player-detail-club{

			}

			.player-detail-club p{
				font-size: 16px;
				font-weight: lighter;
				line-height: .2rem;
				margin-bottom: 1rem;
				margin-left: 1rem;
			}

			.biodata-wrapper{

				height: 60%;
				background-color: #e0dede;
				padding-bottom: .5rem;

			}

			.player-detail-biodata{
				background-color: #e0dede;
				border-bottom: 1px solid #Fff;
				display: flex;
				padding-left: 1rem;
				padding-top: .3rem;
				height: 33%;
				
			}
			.isi-biodata{
				width: 50%;
			}

			.player-detail-biodata div{
				font-size: .9rem;
			}


			.player-detail-stats{
				width: 100%;
				height: auto;
				background-color: #fc7703 ;
				display: flex;
				justify-content: center;
				padding-top: 1rem;

			}


			.player-detail-stats-points{
				padding: 1rem;
				background-color: #fff;
			}


			.player-detail-stats-container{

				display: flex;
				grid-template-rows: 3rem 3rem 3rem 3rem 3rem;
				grid-template-columns: 3rem 3rem 3rem 3rem 3rem;
				gap: 2rem;
			}

			.item{
				display: flex;
				flex-direction: column;
				text-align: center;
			}

			.item p{
				font-family: 'Sarpanch', sans-serif;
				text-align: center;
				font-size: .9rem;
				font-weight: 500;
			}


			.player-detail-stats-points{
				background-color: transparent;
				text-align: center;
				color: #fff;
				padding: .5rem;
			}


			.player-detail-stats-points2{
				text-align: center;
				background-color: #fff;
				padding: .5rem;
				border-radius: 50%;
			}

			.player-detail-avgstats{
				width: 70%;
				height: auto;
				background-color: #fc7703 ;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-top: 0;
			}
			
			
			.stats-capt{
				width: 100%;
				text-align: center;
				font-family:'Koulen', sans-serif ;
				font-size: 18px;
				color: #fff;
			} 

			.total-pertandingan-capt{
				width: 100%;
				height: auto;
				background-color: #fff;
				text-align: center;
				border: 3px solid #fc7703;
				font-size: 16px;
				padding: .5rem;
			}
			
			.total-pertandingan-capt p{
				font-family:'Rajdhani', sans-serif;
				color: #fc7703;
			}

			.animated-bg-wrapper {
           	padding-top: 8rem;
			width: 100%;
			height: auto;
			padding-bottom: 4rem;
			display: flex;
			flex-direction: column;
			gap: 3rem;
			box-shadow: 0px 5px 8px -5px rgba(0, 0, 0, 0.3);
			position: relative;
        }

        .animation-drop div {
            position: absolute;
            font-size: 42px;
            background-color: transparent;
            color: rgba(252, 119, 3, 0.9);
            z-index: 1;
            
        }

        .animation-drop div img{
			display: none;
        	width: 2rem;
        	height: 2rem;
        }



}

@media (max-width: 695px){


			.player-detail-container{
				padding-top: 8rem;
				width: 100%;
				height: auto;
				background-color: #fff;	
				
			}

			.player-detail-box{
				margin: auto;
				width: 20rem;
				height: auto;
				background-color: #fff;
				border: 1px solid #d1d1d1;
				border-top-right-radius: 2rem;
				border-bottom-left-radius: 2rem;
				overflow: hidden;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
				animation: unfold 1.5s ease-in-out forwards;
				z-index: 2;
				position: relative;
				

			}

			@keyframes unfold {
			  0% {
			    transform: rotateY(0deg);
			    opacity: 0;
			  }
			  100% {
			    transform: rotateY(-180deg);
			    opacity: 1;
			  }
			}

			.player-detail-box-header{
				width: 100%;
				height: 8%;
				background-color: #d1d1d1;
				text-align: center;
			}

			.player-detail-box-header p{
				padding-top: .8rem;
				font-family: 'Sarpanch', sans-serif;
				color: #fff;
				font-size: 24px;
				transform: rotateY(180deg);
			}

			.player-detail-box-header img{
				float: left;
				margin: .8rem;
				width: 2rem;
				height: 2rem;
				transform: rotateY(180deg);
			}

			.player-detail-content{
				transform: rotateY(180deg);
				width: 100%;
				height: 95%;
				background-color: #fff;
				display: flex;
				flex-direction: column;
			}

			.player-detail-foto{
				width: 100%;
				height: 50%;
				background-color: grey;
			}

			.player-detail-foto img{
				width: 100%;
				height: 100%;
			}

			.player-detail-data{
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				background-color: purple;

			}

			.player-detail-bio{
				width: 100%;
				height: 60%;
				background-color: #fff;
				top: 0;
			}

			.namaplayer-club-wrapper{
				height: 40%;
			}

			.player-detail-nama{

			}

			.player-detail-nama p{
				margin: 1rem;
				font-size: 26px;
				word-break: break-word;
				line-height: 1.5rem;
			}

			.player-detail-club{

			}

			.player-detail-club p{
				font-size: 1.2rem;
				font-weight: lighter;
				line-height: .5rem;
				margin-left: 1rem;
			}

			.biodata-wrapper{

				height: 60%;
				background-color: #e0dede;
				padding-bottom: .5rem;

			}

			.player-detail-biodata{
				background-color: #e0dede;
				border-bottom: 1px solid #Fff;
				display: flex;
				padding-left: 1rem;
				padding-top: .3rem;
				height: 33%;
				
			}
			.isi-biodata{
				width: 50%;
			}

			.player-detail-biodata div{
				font-size: .9rem;
			}


			.player-detail-stats{
				width: 100%;
				height: 40%;
				background-color: #fc7703 ;
				display: flex;
				justify-content: center;
				padding-top: 1rem;

			}


			.player-detail-stats-points{
				padding: 1rem;
				background-color: #fff;
			}


			.player-detail-stats-container{

				display: flex;
				grid-template-rows: 3rem 3rem 3rem 3rem 3rem;
				grid-template-columns: 3rem 3rem 3rem 3rem 3rem;
				gap: 1rem;
			}

			.item{
				display: flex;
				flex-direction: column;
				text-align: center;
			}

			.item p{
				font-family: 'Sarpanch', sans-serif;
				text-align: center;
				font-size: .9rem;
				font-weight: 500;
			}


			.player-detail-stats-points{
				background-color: transparent;
				text-align: center;
				color: #fff;
				padding: .5rem;
			}


			.player-detail-stats-points2{
				text-align: center;
				background-color: #fff;
				padding: .5rem;
				border-radius: 50%;
			}

			.player-detail-content-charts{
				transform: rotateY(180deg);
				width: 100%;
				height: auto;
				background-color: #fff;
				display: flex;
				flex-direction: column;
			}

			.stats-chart{
				width: 100%;
				display: flex;
				justify-content: center;
				padding: 1rem;
			}
			
			.player-detail-avgstats{
				width: 100%;
				height: auto;
				background-color: #fc7703 ;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			

			 .animation-drop div {
            position: absolute;
            font-size: 32px;
            background-color: transparent;
            color: rgba(252, 119, 3, 0.9);
            z-index: 1;
            
        }

        .animation-drop div img{
			display: none;
        	width: 1rem;
        	height: 1rem;
        }
        
        .player-detail-avgstats-container{
        	display: flex;
        	width: 100%;
        	justify-content: center;
        	height: 100%;
        	padding-bottom: 2rem;
        	gap: 1rem;
        }




}

@media (max-width: 333px){



			.player-detail-container{
				padding-top: 8rem;
				width: 100%;
				height: auto;
				background-color: #fff;	
				
			}

			.player-detail-box{
				margin: auto;
				width: 15rem;
				height: auto;
				background-color: #fff;
				border: 1px solid #d1d1d1;
				border-top-right-radius: 2rem;
				border-bottom-left-radius: 2rem;
				overflow: hidden;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
				animation: unfold 1.5s ease-in-out forwards;
				z-index: 2;
				position: relative;
				

			}

			@keyframes unfold {
			  0% {
			    transform: rotateY(0deg);
			    opacity: 0;
			  }
			  100% {
			    transform: rotateY(-180deg);
			    opacity: 1;
			  }
			}

			.player-detail-box-header{
				width: 100%;
				height: 8%;
				background-color: #d1d1d1;
				text-align: left;
			}

			.player-detail-box-header p{
				padding-top: .8rem;
				font-family: 'Sarpanch', sans-serif;
				color: #fff;
				font-size: 18px;
				transform: rotateY(180deg);
			}

			.player-detail-box-header img{
				float: left;
				margin: .8rem;
				width: 2rem;
				height: 2rem;
				transform: rotateY(180deg);
			}

			.player-detail-content{
				transform: rotateY(180deg);
				width: 100%;
				height: 95%;
				background-color: #fff;
				display: flex;
				flex-direction: column;
			}

			.player-detail-foto{
				width: 100%;
				height: 50%;
				background-color: grey;
			}

			.player-detail-foto img{
				width: 100%;
				height: 100%;
			}

			.player-detail-data{
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				background-color: purple;

			}

			.player-detail-bio{
				width: 100%;
				height: 60%;
				background-color: #fff;
				top: 0;
			}

			.namaplayer-club-wrapper{
				height: 40%;
			}

			.player-detail-nama{

			}

			.player-detail-nama p{
				margin: 1rem;
				font-size: 26px;
				word-break: break-word;
				line-height: 1.5rem;
			}

			.player-detail-club{

			}

			.player-detail-club p{
				font-size: 1.2rem;
				font-weight: lighter;
				line-height: .5rem;
				margin-left: 1rem;
			}

			.biodata-wrapper{

				height: 60%;
				background-color: #e0dede;
				padding-bottom: .5rem;

			}

			.player-detail-biodata{
				background-color: #e0dede;
				border-bottom: 1px solid #Fff;
				display: flex;
				padding-left: 1rem;
				padding-top: .3rem;
				height: 33%;
				
			}
			.isi-biodata{
				width: 50%;
			}

			.player-detail-biodata div{
				font-size: .9rem;
			}


			.player-detail-stats{
				width: 100%;
				height: 40%;
				background-color: #fc7703 ;
				display: flex;
				justify-content: center;
				padding-top: 1rem;

			}


			.player-detail-stats-points{
				padding: 1rem;
				background-color: #fff;
			}


			.player-detail-stats-container{

				display: flex;
				grid-template-rows: 2rem 2rem 2rem 2rem 2rem;
				grid-template-columns: 2rem 2rem 2rem 2rem 2rem;
				gap: 1rem;
			}

			.item{
				display: flex;
				flex-direction: column;
				text-align: center;
			}

			.item p{
				font-family: 'Sarpanch', sans-serif;
				text-align: center;
				font-size: .5rem;
				font-weight: 500;
			}


			.player-detail-stats-points{
				background-color: transparent;
				text-align: center;
				color: #fff;
				padding: .5rem;
			}


			.player-detail-stats-points2{
				text-align: center;
				background-color: #fff;
				padding: .5rem;
				border-radius: 50%;
			}

			 .animation-drop div {
            position: absolute;
            font-size: 32px;
            background-color: transparent;
            color: rgba(252, 119, 3, 0.9);
            z-index: 1;
            
        }

        .animation-drop div img{
			display: none;
        	width: 1rem;
        	height: 1rem;
        }

        .player-detail-back-button a{
				font-family: 'Mukta Malar', sans-serif;
				font-size: 18px;
				text-decoration: none;
				padding: 1rem;
				padding-left: 2rem;
				padding-right: 2rem;
				border: 1px solid #fc7703;
				color: #fc7703;
				border-radius: 12px;
				transition: 1s;
			}




}

  




.iklan-spot{
	background-color: #e8e8e8;
	width: 100%;
	height: auto;
}

.iklan-spot-container{
	display: flex;
	flex-direction: column;
}

.iklan-spot-area{
	width: 100%;
	height: auto;
	padding: 1.5rem;

}

.iklan-spot-banner{
	margin: auto;
	width: 100%;
	height: 12rem;
	background: url(../img/LOGOS.png);
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}


.iklan-spot-header{
	display: flex;
	width: 100%;
	background-color: #fff;
	height: 18rem;
	box-shadow: 0px 5px 8px -5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 281px){
		
		.iklan-spot-banner{
			margin: auto;
			width: 100%;
			height: 12rem;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		}

}





.player-detail-back-button:hover{
	transform: translateY(-.5rem);
}

.player-detail-back-button:hover a{
	background-color: #fc7703;
	color: #fff;

}

footer{
	width: 100%;
	height: auto;
	background-color: #18182b;
	background-color: #FFF;
}

.footer-container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.logo-fot{
	padding-top: 2rem;
	margin: auto;

}

.logo-fot img{
	width: 8rem;

}

.menu-fot{
	display: flex;
	justify-content: center;
	gap: 3rem;
	font-size: 22px;
}

.menu-fot a{
	font-weight: 800;
	color: #000;
	font-family: 'Mulish', sans-serif;
	font-weight: 500;
	text-decoration: none;
	padding-bottom: 1px;
	border-bottom: 1.5px solid #000;
	transition: .4s;
}

.menu-fot a:hover{
	color: #fc7208;
	border-bottom: 1.5px solid #fc7208;
}



.medsos-fot{
	margin: auto;
	color: #000;
	font-size: 32px;
}

.medsos-fot a{
	text-decoration: none;
	color: #000;
}


.bottom-line{
	border-top: 1px solid #ebebeb;
	display: flex;
	justify-content: center;
	background-color: #FFF;
	width: 100%;
	align-items: center;
	margin: auto;
	gap: 2rem;
}

.cpy-rt{
	padding-bottom: 2rem;
	padding-top: 2rem;
	background-color: #FFF;
}

.cpy-rt p{
	color: #000;
	font-size: 18px;
	font-family: 'Gantari', sans-serif;
}

.acropora-logo-fot{
	background-color: #FFF;
	justify-content: center;
}

.acropora-logo-fot p{
	font-family: 'Gantari', sans-serif;
	font-size: 12px;
	font-weight: bold;
}

.acropora-logo-fot img{
	padding-left: 1rem;
	width: 10rem;
	
}

@media (max-width: 671px){
				.footer-container{
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 1rem;
					box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
				}

				.logo-fot{
					padding-top: 2rem;
					margin: auto;

				}

				.logo-fot img{
					width: 8rem;

				}

				.menu-fot{
					display: flex;
					justify-content: center;
					gap: 1.5rem;
					font-size: 16px;
				}

				.menu-fot a{
					font-weight: 800;
					color: #000;
					font-family: 'Mulish', sans-serif;
					font-weight: 500;
					text-decoration: none;
					padding-bottom: 1px;
					border-bottom: 1.5px solid #000;
					transition: .4s;
				}

				.menu-fot a:hover{
					color: #fc7208;
					border-bottom: 1.5px solid #fc7208;
				}



				.medsos-fot{
					margin: auto;
					color: #000;
					font-size: 32px;
				}

				.bottom-line{
					border-top: 1px solid #ebebeb;
					display: flex;
					justify-content: center;
					background-color: #FFF;
					width: 100%;
					align-items: center;
					margin: auto;
					gap: 2rem;
				}

				.cpy-rt{
					padding-bottom: 2rem;
					padding-top: 2rem;
					background-color: #FFF;
				}

				.cpy-rt p{
					color: #000;
					font-size: 14px;
					font-family: 'Gantari', sans-serif;
				}

				.acropora-logo-fot{
					background-color: #FFF;
					justify-content: center;
				}

				.acropora-logo-fot p{
					font-family: 'Gantari', sans-serif;
					font-size: 12px;
					font-weight: bold;
				}

				.acropora-logo-fot img{
					padding-left: 1rem;
					width: 8rem;
					
				}
}


@media (max-width: 539px){
				.footer-container{
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 1rem;
					box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
				}

				.logo-fot{
					padding-top: 2rem;
					margin: auto;

				}

				.logo-fot img{
					width: 6rem;

				}

				.menu-fot{
					display: flex;
					justify-content: center;
					gap: 1.5rem;
					font-size: 12px;
				}

				.menu-fot a{
					font-weight: 800;
					color: #000;
					font-family: 'Mulish', sans-serif;
					font-weight: 500;
					text-decoration: none;
					padding-bottom: 1px;
					border-bottom: 1.5px solid #000;
					transition: .4s;
				}

				.menu-fot a:hover{
					color: #fc7208;
					border-bottom: 1.5px solid #fc7208;
				}


				.medsos-fot{
					margin: auto;
					color: #000;
					font-size: 24px;
				}

				.bottom-line{
					border-top: 1px solid #ebebeb;
					display: flex;
					justify-content: center;
					background-color: #FFF;
					width: 100%;
					align-items: center;
					margin: auto;
					gap: 2rem;
				}

				.cpy-rt{
					padding-bottom: 2rem;
					padding-top: 2rem;
					background-color: #FFF;
				}

				.cpy-rt p{
					color: #000;
					font-size: 8px;
					font-family: 'Gantari', sans-serif;
				}

				.acropora-logo-fot{
					background-color: #FFF;
					justify-content: center;
				}

				.acropora-logo-fot p{
					font-family: 'Gantari', sans-serif;
					font-size: 8px;
					font-weight: bold;
				}

				.acropora-logo-fot img{
					padding-left: 1rem;
					width: 7rem;
					
				}
}


@media (max-width: 300px){

				

				.footer-container{
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 1rem;
					box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
				}

				.logo-fot{
					padding-top: 2rem;
					margin: auto;

				}

				.logo-fot img{
					width: 6rem;

				}

				.menu-fot{
					display: flex;
					justify-content: center;
					gap: 1rem;
					font-size: 8px;
				}

				.menu-fot a{
					font-weight: 800;
					color: #000;
					font-family: 'Mulish', sans-serif;
					font-weight: 500;
					text-decoration: none;
					padding-bottom: 1px;
					border-bottom: 1.5px solid #000;
					transition: .4s;
				}

				.menu-fot a:hover{
					color: #fc7208;
					border-bottom: 1.5px solid #fc7208;
				}


				.medsos-fot{
					margin: auto;
					color: #000;
					font-size: 20px;
				}

				.bottom-line{
					border-top: 1px solid #ebebeb;
					display: flex;
					justify-content: center;
					background-color: #FFF;
					width: 100%;
					align-items: center;
					margin: auto;
					gap: 1rem;
				}

				.cpy-rt{
					padding-bottom: 2rem;
					padding-top: 2rem;
					background-color: #FFF;
				}

				.cpy-rt p{
					color: #000;
					font-size: 8px;
					font-family: 'Gantari', sans-serif;
				}

				.acropora-logo-fot{
					background-color: #FFF;
					justify-content: center;
				}

				.acropora-logo-fot p{
					font-family: 'Gantari', sans-serif;
					font-size: 7.5px;
					font-weight: bold;
				}

				.acropora-logo-fot img{
					padding-left: 1rem;
					width: 5rem;
					
				}
}