@import '../../common';

.rs-hero-slider {
	.slider-inner {
		position: relative;
		&.clip-path-css{
			clip-path: polygon(72% 0, 100% 22%, 100% 100%, 0 100%, 0 0);
			&::after{
				position: absolute;
				content: "";
				right: -20px;
				top: 37px;
				height: 1px;
				width: 150px;
				background: rgba(237, 237, 237, 0.1490196078);
				transform: rotate(43deg);
			}
		}
		&::before{
			position: absolute;
			content: '';
			right: 10px;
			top: 10px;
			width: 0;
			height: 0;
			border-bottom: 90px solid $primaryColor;
			border-right: 90px solid transparent;
		}
		.anim-init {
			animation-duration: 500ms !important;
			animation-fill-mode: both !important;
		}
		.title {
			margin-top: 0;
		}
		.btn-wrapper {
			display: inline-flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 20px;
			margin-top: 35px;
			a {
				display: inline-flex;
				gap: 8px;
				align-items: center;
				padding: 12px 34px;
				background: $primaryColor;
				color: #fff;
				border: 1px solid $primaryColor;
				&:hover {
					background: transparent;
					color: $titleColor;
				}
			}
		}
	}
}