@import url('https://fonts.googleapis.com/css?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200 800;1,900&display=swap');


/*carouselouselousel*/
.carousel
{
	width: 100%;
	height: 90vh;
	z-index: 1;
	margin-top: -50px;
	overflow: hidden;
	position: relative;
	margin-bottom: 100px;
}

.carousel .list .item
{
	width: 180px;
	height: 270px;
	position: absolute;
	top: 65%;
	transform: translateY(-70px);
	left: 70%;
	border-radius: 20px;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);		
	background-position: 50% 50%;
	background-size: cover;
	z-index: 100;
	transition: 1s;
}

.carousel .list .item:nth-child(1),
.carousel .list .item:nth-child(2)
{
	top: 0;
	left: 0;
	transform: translate(0,0);
	border-radius: 0;
	width: 100%;
	height: 100%;
}

.carousel .list .item:nth-child(3){
	left: 48%;
}

.carousel .list .item:nth-child(4){
	left: calc(48% + 200px);
}

.carousel .list .item:nth-child(5){
	left: calc(48% + 400px);
}

.carousel .list .item:nth-child(6){
	left: calc(48% + 600px);
}

.carousel .list .item:nth-child(n+7){
	left: calc(48% + 800px);
	opacity: 0;
}

.item .content{
	position: absolute;
	top: 50%;
	margin-left: 5%;
	transform: translateY(-50%);
	text-align: left;
	color: #fff;
	display: none;
}

.list .item:nth-child(2) .content{
	display: block;
}

.content .title{
	text-align: left;
	font-size: 80px;
	text-transform: uppercase;
	color: #1aa3ff;
	font-weight: bold;
	line-height: 1;

	opacity: 0;
	animation: animate 1s ease-in-out 0.3s 1 forwards;
}

.content .name{
	font-size: 80px;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1;
	text-shadow: 3px 4px 4px rgba(255,255,255,0.8);

	opacity: 0;
	animation: animate 1s ease-in-out 0.6s 1 forwards;
}

.content .des{
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 14px;
	margin-left: 5px;

	opacity: 0;
	animation: animate 1s ease-in-out 0.9s 1 forwards;
}

.content .btn{
	margin-left: 5px;
	opacity: 0;
	animation: animate 1s ease-in-out 1.2s 1 forwards;
}

.content .btn button{
	padding: 10px 20px;
	border: none;
	cursor: pointer;
	font-size: 10px;
	border: 2px solid #fff;
}

.content .btn button:nth-child(1){
	margin-right: 15px;
}

.content .btn button:nth-child(2){
	background: transparent;
	color: #14ff74cb;
	border: 2px solid #fff;
	transition: 0.3s;
}

.content .btn button:nth-child(2):hover{
	background-color: #14ff74cb;
	color: #fff;
	border-color: #14ff74cb;
}

@keyframes animate{

	from{
		opacity: 0;
		transform: translate(0,100px);
		filter: blur(33px);
	}
	
	to{
		opacity: 1;
		transform: translate(0);
		filter: blur(0);
	}
}

/*corousel*/

 

/*next prev arrow*/

.arrows{
	position: absolute;
	top: 70%;
	right: 52%;
	z-index: 100;
	width: 300px;
	max-width: 30%;
	display: flex;
	gap: 10px;
	align-items: center;
}

.arrows button{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #1aa3ff;
	color: #fff;
	border: none;
	outline: none;
	font-size: 16px;
	font-family: monospace;
	font-weight: bold;
	transition: .5s;
	cursor: pointer;
}

.arrows button:hover{
	background: #fff;
	color: #000;
}

/* time running */

.carousel .timeRunning{
	position: absolute;
	z-index: 1000;
	width: 0%;
	height: 4px;
	background-color: #1aa3ff;
	left: 0;
	top: 10%;
	animation: runningTime 4s linear 1 forwards;
}

@keyframes runningTime{
	from{
		width: 0%;
	}
	to{
		width: 100%;
	}
}


/* Responsive Design */

@media screen and (max-width: 999px){

	.list .item .content{
		left: 50px;
	}

	.content .title, .content .name{
		font-size: 70px;
	}

	.content .des{
		font-size: 16px;
	}

}

@media screen and (max-width: 690px){
	.list .item .content{
		top: 40%;
	}

	.content .title, .content .name{
		font-size: 45px;
	}

	.content .btn button{
		padding: 10px 15px;
		font-size: 14px;
	}
}