*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:'Poppins',sans-serif;
}

body{

	background:#090909;
	color:#fff;

}

/******** BACKGROUND ********/

.hero{

	position:relative;
	padding:70px;
	overflow:hidden;
	background:
	linear-gradient(135deg,#111827,#0f172a,#1e293b);

}

.hero:before{

	content:"";
	position:absolute;
	width:600px;
	height:600px;
	background:#ff1744;
	filter:blur(180px);
	opacity:.18;
	left:-200px;
	top:-200px;

}

.hero:after{

	content:"";
	position:absolute;
	width:500px;
	height:500px;
	background:#2979ff;
	filter:blur(180px);
	opacity:.20;
	right:-150px;
	bottom:-150px;

}


.video-container{
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 */
    overflow:hidden;
    border-radius:18px;
}

.video-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
    border-radius:18px;
}

.container{

	max-width:1300px;
	margin:auto;
	position:relative;
	z-index:2;

}

header{

	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:70px;

}

.logo{

	font-size:34px;
	font-weight:700;

}

.logo span{

	color:#ff1744;

}

nav{

	display:flex;
	gap:35px;

}

nav a{

	text-decoration:none;
	color:#fff;
	opacity:.8;
	transition:.3s;

}

nav a:hover{

	opacity:1;
	color:#ff1744;

}

.hero-content{

	display:grid;
	grid-template-columns:1fr 520px;
	gap:60px;
	align-items:center;

}

.hero-text h1{

	font-size:58px;
	line-height:1.2;
	margin-bottom:20px;

}

.hero-text p{

	color:#bbb;
	line-height:1.8;
	margin-bottom:35px;

}



/* Trending Slider */

.trendingSwiper{

	padding:10px 5px 60px;

}

.live-badge{

	display:inline-flex;
	align-items:center;
	gap:6px;
	background:#ff1744;
	padding:4px 10px;
	border-radius:50px;
	font-size:11px;
	font-weight:600;
	margin-left:8px;
	color: #fff;

	animation:pulse 1.3s infinite;

}

.live-badge:before{

	content:"";
	width:8px;
	height:8px;
	background:#fff;
	border-radius:50%;

}

@keyframes pulse{

	0%{box-shadow:0 0 0 0 rgba(255,23,68,.7);}
	70%{box-shadow:0 0 0 12px rgba(255,23,68,0);}
	100%{box-shadow:0 0 0 0 rgba(255,23,68,0);}

}

.card{

	background:#151515;
	border-radius:22px;
	overflow:hidden;
	transition:.35s;
	height:100%;
	border:1px solid rgba(255,255,255,.06);

}

.card:hover{

	transform:translateY(-8px);
	box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.swiper-button-next,
.swiper-button-prev{

	color:#fff;

}

.swiper-pagination-bullet{

	background:#fff;
	opacity:.4;

}

.swiper-pagination-bullet-active{

	background:#ff1744;
	opacity:1;

}

.btn{

	display:inline-block;
	padding:15px 35px;
	background:#ff1744;
	border-radius:50px;
	text-decoration:none;
	color:#fff;
	font-weight:600;
	transition:.3s;

}

.btn:hover{

	transform:translateY(-3px);

}

/******** SWIPER ********/

.swiper{

	padding-bottom:40px;

}

.channel-card{

	background:rgba(255,255,255,.07);
	backdrop-filter:blur(20px);
	border-radius:25px;
	padding:20px;
	transition:.35s;
	border:1px solid rgba(255,255,255,.08);

}

.channel-card:hover{

	transform:translateY(-10px);

}

.channel-card img{

	width:100%;
	height:180px;
	object-fit:cover;
	border-radius:18px;

}

.channel-info{

	margin-top:15px;

}

.channel-info h3{

	margin-bottom:10px;

}

.live{

	display:inline-block;
	background:#ff1744;
	padding:6px 12px;
	border-radius:50px;
	font-size:13px;

}

/******** SECTION ********/

.section{

	padding:80px 70px;

}

.section-title{

	font-size:36px;
	margin-bottom:35px;

}

.grid{

	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
	gap:25px;

}

.card{

	background:#141414;
	border-radius:22px;
	overflow:hidden;
	transition:.35s;

}

.card:hover{

	transform:translateY(-8px);

}

.card img{

	width:100%;
	height:200px;
	object-fit:cover;

}

.card-body{

	padding:18px;

}

.card-body h3{

	margin-bottom:8px;
	color: #fff;
	text-decoration: none;

}

.card-body p{

	font-size:14px;
	color:#aaa;

}

footer{
    padding:40px 20px;
    text-align:center;
    color:#888;
    border-top:1px solid rgba(255,255,255,.05);
    line-height:1.8;
}

.developer{
    margin-top:10px;
    font-size:14px;
}

.developer a{
    color:#ff1744;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.developer a:hover{
    color:#fff;
}

/******** RESPONSIVE ********/

@media(max-width:900px){

	.hero{

		padding:35px;

	}

	.hero-content{

		grid-template-columns:1fr;

	}

	.hero-text{

		text-align:center;

	}

	header{

		flex-direction:column;
		gap:20px;

	}

	nav{

		flex-wrap:wrap;
		justify-content:center;

	}

	.hero-text h1{

		font-size:40px;

	}

}



@media(max-width:992px){

	.hero,
	.section{
		padding:40px 20px;
	}

	.hero-content{
		display:grid;
		grid-template-columns:minmax(0,1fr) minmax(300px,520px);
		gap:50px;
		align-items:center;
	}

	.hero-content > div{
		min-width:0;
	}

	.hero-text{

		text-align:center;

	}

	.hero-text h1{

		font-size:42px;

	}


	.mySwiper{
		width:100%;
		max-width:520px;
		margin:auto;
	}

	.swiper{
		width:100%;
	}

	header{

		flex-direction:column;
		gap:20px;

	}

	nav{

		overflow-x:auto;
		white-space:nowrap;
		width:100%;
		justify-content:flex-start;
		padding-bottom:8px;

	}

}

@media (max-width:991px){

	.hero,
	.section{
	    padding:40px 20px;
	}

	header{
		flex-direction:column;
		gap:20px;
	}

	nav{
		justify-content:center;
		flex-wrap:wrap;
		gap:20px;
	}

	.hero-content{
		grid-template-columns:1fr;
		gap:40px;
	}

	.hero-text{
		text-align:center;
	}

	.hero-text h1{
		font-size:40px;
	}

	.mySwiper{
		max-width:100%;
	}

}

@media (max-width:768px){

	.hero,
	.section{
	    padding:25px 15px;
	}

	.hero-text h1{
		font-size:30px;
	}

	.hero-text p{
		font-size:15px;
	}

	.logo{
		font-size:28px;
	}

	.btn{
		width:100%;
		text-align:center;
	}

	.channel-card img{
		height:190px;
	}

}

@media (max-width:480px){

	.hero-text h1{
		font-size:26px;
		line-height:1.3;
	}

	.hero-text p{
		font-size:14px;
	}

	nav{
		gap:15px;
	}

}