body{
	background:lightblue;
	height:2640px;
}
.section {
    position: relative;
    height: 350px;
    background: linear-gradient(to right, #0054A6, #0A1E40);
    display: flex;
    align-items: center;
    padding-left: 50px;
	padding-bottom:5rem;
    color: white;
    overflow: hidden;
}
.section {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 70%);
}


.content h1 {
    font-size: 2.5rem;
    margin: 0;
}

.content p {
    font-size: 1.2rem;
    opacity: 0.9;
}

.img{
	background-image:url("https://bsmedia.business-standard.com/_media/bs/img/article/2025-10/25/full/1761390699-0195.jpg?im=Resize,width=826,height=465,aspect=ignore");
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	clip-path:polygon(0 0, 100% 0. 100% 85%, 0 70%);
	height:45vh;
	width:56vw;
	box-shadow: 0 0 1.5rem navy;
}
.odi-n{
	counter-reset:moment-counter;
}
.title{
	font-size:clamp(2rem, 6vh, 3rem);
	color:royalblue;
}
.box{
	background:rgba(0, 0, 0, 0.1);
	width:calc(70% - 100px);
	max-width:50rem;
	margin:1.5rem;
	padding:1rem;
	border-radius:2rem;
	box-shadow: 0 0 1rem navy;
	position:relative;
	left:17%;
	margin-top:3rem;
}
.box::before{
	counter-increment:moment-counter;
	content:"Moment #"
	counter(moment-counter);
	background-color:#1E90FF;
	position:absolute;
	top:0px;
	left:15px;
	color:white;
	padding:0.5rem 1rem;
	font-weight:bold;
	border-radius:10px;
}
.pic{
	height:23vh;
	width:22vw;
	border-radius:1rem;
	float:left;
}
.text{
	color:#444;
}
.text p{
	margin:0.5rem 0 0 0;
	font-size:1rem;
	color:inherit;
}
.text h3{
	margin:0;
	font-size:1.4rem;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	color:midnightblue;
}
.text{
	margin-left:22rem;
}
.clearfix::after{
	content:"";
	display:block;
	clear:both;
}
.all{
	
}
#img{
	height:30vh;
	width:15.5rem;
	margin-left:rem;
	margin-top:1rem;
	border:1px solid black;
	
}
#best{
		counter-reset:moment-counter;
		background:#205DAC;
		height:44vh;
		margin-top:6rem;
}
#name{
	margin-left:1rem;
	padding-top:1rem;
	color:white
}
.players{
	background:#fff;
	float:left;
	max-width:19rem;
	height:20rem;
	border-radius:1rem;
	box-shadow: 0 0 1.5rem navy;
	position:relative;
	left:0%;
	margin-left:1rem;
	margin-top:0.4rem
	
}
.players::after{
	counter-increment:moment-counter;
	content:" "
	counter(moment-counter);
	background-color:#1E90FF;
	position:absolute;
	top:0px;
	left:15px;
	color:white;
	padding:0.6rem 1rem;
	font-weight:bold;
	border-radius:10px;
	box-shadow: 0 0 1.5rem navy;
}
.cap{
	padding-left:0.6rem;
}