:root {
	--theme-color: #661FFE;
	--title-color: #040642;
	--body-color: #737588;
	--smoke-color: #F0F0F4;
	--smoke-color2: #F7F8FA;
	--black-color: #000000;
	--gray-color: #bdbdbd;
	--white-color: #ffffff;
	--light-color: #72849B;
	--yellow-color: #FFB539;
	--success-color: #28a745;
	--error-color: #dc3545;
	--border-color: #E0E0E0;
	--title-font: "Trebuchet MS", Arial, Helvetica, sans-serif;
	--body-font: "Trebuchet MS", Arial, Helvetica, sans-serif;
	--icon-font: "Font Awesome 6 Pro";
	--main-container: 1220px;
	--container-gutters: 24px;
	--section-space-mobile: 80px;
	--section-title-space: 60px;
	--ripple-ani-duration: 5s;
	--main-color-one:#DD131A;
}
.icon-btn {
	display: inline-block;
	width: var(--btn-size, 56px);
	height: var(--btn-size, 56px);
	line-height: var(--btn-size, 56px);
	font-size: var(--btn-font-size, 16px);
	background-color: var(--icon-bg, #fff);
	color: var(--title-color);
	text-align: center;
	border-radius: 50%;
	border: none;
	-webkit-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out
}

.icon-btn:hover {
	background-color: var(--theme-color);
	color: var(--white-color)
}

.play-btn {
	display: inline-block;
	position: relative;
	z-index: 1
}

.play-btn>i {
	display: inline-block;
	width: var(--icon-size, 60px);
	height: var(--icon-size, 60px);
	line-height: var(--icon-size, 60px);
	text-align: center;
	background-color: var(--theme-color);
	color: var(--white-color);
	font-size: var(--icon-font-size, 1.1em);
	border-radius: 50%;
	z-index: 1;
	-webkit-transition: all ease 0.4s;
	transition: all ease 0.4s
}

.play-btn>i.fa-play {
	padding-right: 0.18em
}

.play-btn:after,
.play-btn:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: var(--theme-color);
	z-index: -1;
	border-radius: 50%;
	-webkit-transition: all ease 0.4s;
	transition: all ease 0.4s
}

.play-btn:after {
	-webkit-animation-delay: 2s;
	animation-delay: 2s
}

.play-btn:hover:after,
.play-btn:hover::before,
.play-btn:hover i {
	background-color: var(--title-color);
	color: var(--white-color)
}

.play-btn.style2:before,
.play-btn.style2:after {
	background-color: transparent;
	border: 1px solid var(--white-color)
}

.play-btn.style3>i {
	background-color: var(--theme-color);
	color: var(--white-color);
	font-size: 20px
}

.play-btn.style3:before,
.play-btn.style3:after {
	background-color: var(--white-color)
}

.play-btn.style3:hover>i {
	background-color: var(--white-color);
	color: var(--theme-color)
}

.ripple-animation,
.play-btn:after,
.play-btn:before {
	-webkit-animation-duration: var(--ripple-ani-duration);
	animation-duration: var(--ripple-ani-duration);
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: ripple;
	animation-name: ripple
}

@-webkit-keyframes ripple {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0
	}

	30% {
		opacity: 0.4
	}

	100% {
		-webkit-transform: scale(1.8);
		transform: scale(1.8);
		opacity: 0
	}
}

@keyframes ripple {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0
	}

	30% {
		opacity: 0.4
	}

	100% {
		-webkit-transform: scale(1.8);
		transform: scale(1.8);
		opacity: 0
	}
}

.movingX {
	-webkit-animation: movingX 8s linear infinite;
	animation: movingX 8s linear infinite
}

@-webkit-keyframes movingX {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	50% {
		-webkit-transform: translateX(50px);
		transform: translateX(50px)
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes movingX {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	50% {
		-webkit-transform: translateX(50px);
		transform: translateX(50px)
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

.moving {
	-webkit-animation: moving 8s linear infinite;
	animation: moving 8s linear infinite
}

@-webkit-keyframes moving {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	50% {
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px)
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes moving {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	50% {
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px)
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

.jump {
	-webkit-animation: jumpAni 7s linear infinite;
	animation: jumpAni 7s linear infinite
}

@-webkit-keyframes jumpAni {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	40% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px)
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes jumpAni {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	40% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px)
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}




.skill-area {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 40px;
	padding: 40px 0 40px 40px;
	border-radius: 20px 0 0 20px;
	position: relative;
	z-index: 2;
	margin-top: -170px
}

.skill-area .bg-shape {
	width: 1230px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: inherit;
	box-shadow: 0px 8px 30px rgba(4, 6, 66, 0.08);
	background-color: var(--white-color);
	background-size: auto;
	background-position: right center;
	z-index: -1
}

.skill-area .skill-img {
	margin-bottom: 20px
}

.skill-area .skill-img img {
	border-radius: 10px
}

.skill-area .skill-left {
	max-width: 200px
}

.skill-area .skill-right {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1
}

.progress {
	position: relative;
	height: 8px;
	background-color: var(--border-color);
	overflow: visible;
	border-radius: 99px
}

.progress-bar {
	background-color: var(--theme-color);
	border-radius: inherit;
	position: relative;
	overflow: visible
}

.progress-bar:after {
	content: '';
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0;
	right: 0;
	margin: -7px -7px 0 0;
	background-color: var(--smoke-color);
	border: 4px solid var(--theme-color);
	border-radius: 99px
}

.skill-feature {
	margin-bottom: 35px
}

.skill-feature:last-child {
	margin-bottom: 0 !important
}

.skill-feature_title,
.skill-feature .progress-value {
	margin-top: -0.3em;
	font-size: 16px;
	margin-bottom: 12px;
	color: var(--title-color)
}

.skill-feature .progress-value {
	margin-bottom: 0;
	position: absolute;
	top: -35px;
	right: 0
}

@media (max-width: 1299px) {
	.skill-area {
		margin-top: -125px
	}
}

@media (max-width: 1199px) {
	.skill-area {
		margin-top: 35px;
		padding: 40px;
		border-radius: 20px
	}

	.skill-area .bg-shape {
		width: 100%
	}

	.why-shape1 {
		margin-top: 10px;
		margin-bottom: -120px
	}

	.video-box1 {
		max-height: 600px
	}
}

@media (max-width: 767px) {
	.skill-area {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column
	}

	.skill-area .skill-left {
		max-width: 100%;
		width: 100%
	}

	.skill-area .skill-right {
		width: 100%
	}
}

@media (max-width: 575px) {
	.skill-area {
		padding: 40px 15px
	}

	.info-media {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		text-align: center
	}
}

.video-box2 {
	position: relative;
	border-radius: 10px;
	overflow: hidden
}

.video-box2>img {
	width: 100%
}

.video-box2:after {
	content: '';
	height: 91px;
	width: 200px;
	border-radius: 999px;
	position: absolute;
	bottom: 0;
	left: -54px;
	background-color: var(--white-color);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	z-index: 2
}

.video-box2 .play-btn {
	position: absolute;
	bottom: 53px;
	left: 53px;
	z-index: 4
}

.feature-circle {
	text-align: center
}

.feature-circle-wrap {
	display: grid;
	grid-template-columns: auto auto auto;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 60px
}