.home-slider {
	width: 100%;
	min-height: 60vh;
	display: flex;
	align-items: flex-start;
	justify-content: center;

}

.slider {
	position: relative;
	width: 100%;
	max-width: 1360px;
	height: 420px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .25);
	background: #071124
}

.slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: .7s ease
}

.slide.active {
	opacity: 1
}

.slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.slide:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, .25), rgba(0, 0, 0, .05))
}

.content {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 8%;
	transform: translateY(-50%);
	color: #fff;
	max-width: 460px
}

.content h1 {
	font-size: 48px;
	line-height: 1.05;
	margin-bottom: 16px
}

.content h1 span {
	color: #f8b21a
}

.content p {
	font-size: 17px;
	line-height: 1.6;
	margin-bottom: 24px
}

.arrow {
	position: absolute;
	z-index: 5;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: rgba(0, 0, 0, .35);
	color: white;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 30px;
	cursor: pointer
}

.arrow:hover {
	background: #f8b21a;
	color: #061126
}

.prev {
	left: 18px
}

.next {
	right: 18px
}

.dots {
	position: absolute;
	z-index: 5;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px
}

.dots button {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .55);
	cursor: pointer
}

.dots button.active {
	background: #fff;
	width: 26px;
	border-radius: 20px
}

@media(max-width:768px) {
	.home-slider {
		padding: 0
	}

	.slider {
		height: 50vh;
		border-radius: 0;

	}

	.home-slider {
		min-height: 50vh !important;
	}

	.content {
		left: 7%;
		right: 7%;
		max-width: none
	}

	.content h1 {
		font-size: 34px
	}

	.content p {
		font-size: 15px
	}

	.arrow {
		width: 38px;
		height: 38px;
		font-size: 24px
	}

	.prev {
		left: 10px
	}

	.next {
		right: 10px
	}
}

@media(max-width:480px) {
	.content h1 {
		font-size: 29px
	}

	.content p {
		font-size: 14px
	}

	.btn {
		padding: 11px 18px;
		font-size: 13px
	}

	.dots {
		bottom: 16px
	}
}