/*===========================
    16.ACHIEVEMENT css 
===========================*/






.achievement-area{
	& .achievement-counter{
		background: #3b7eff;
		border-radius: 10px;
		& i{
			font-size: 70px;
			color: $white;
			padding-top: 60px;
		}
		& span{
			font-size: 45px;
			font-weight: 700;
			color: $white;
			padding-top: 10px;
		}
		& .title{
			font-size: 18px;
			font-weight: 500;
			color: $white;
			padding-bottom: 60px;
		}
		&.item-2{
			background: #f86e03;
		}
		&.item-3{
			background: #ef5b51;
			margin-left: 30px;
			margin-right: -30px;
			position: relative;
			@media #{$lg} {
				margin-left: 0;
				margin-right: 0;
			}
			@media #{$md} {
				margin-left: 0;
				margin-right: 0;
			}
			@media #{$xs} {
				margin-left: 0;
				margin-right: 0;
			}
		}
		&.item-4{
			background: #0154f7;
			margin-left: 30px;
			margin-right: -30px;
			position: relative;
			@media #{$lg} {
				margin-left: 0;
				margin-right: 0;
			}
			@media #{$md} {
				margin-left: 0;
				margin-right: 0;
			}
			@media #{$xs} {
				margin-left: 0;
				margin-right: 0;
			}
		}
	}
	& .section-title{
		@media #{$md} {
			margin-top: 40px;
		}
		@media #{$xs} {
			margin-top: 40px;
		}
		& .title{
			@media #{$lg} {
				font-size: 36px;
			}
			& span{
				font-size: 46px;
				@media #{$lg} {
					font-size: 36px;
				}
				@media #{$xs} {
					font-size: 28px;
				}
				@media #{$sm} {
					font-size: 46px;
				}
				& span{
					color: $theme-color-3;
				}
			}
		}
		& p{
			color: #c3c3c3;
			padding-bottom: 30px;
			@media #{$lg} {
				font-size: 18px;
			}
		}
	}
	& .achievement-text{
		& p{
			color: #8a8a8a;
			font-size: 14px;
			padding-bottom: 33px;
		}
		& a{
			background: $theme-color-3;
			border-color: $theme-color-3;
			&:hover{
				background: $theme-color;
				border-color: $theme-color;
				
			}
		}
	}
}





.video-play-area{
	height: 895px;
	position: relative;
	background-attachment: fixed;
	&::before{
		position: absolute;
		content: '';
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: rgb(14, 43, 92);
		opacity: 0.749;

	}
	& .video-play-item{
		& a{
			color: $white;
			height: 80px;
			width: 80px;
			border-radius: 50%;
			text-align: center;
			line-height: 80px;
			border: 2px solid $theme-color-3;
			background: $theme-color-3;
			font-size: 20px;
			position: relative;
			&::before{
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				border: 1px solid $white;
				@include animation(ripple-white 1s linear infinite);
				border-radius: 50%;
			}
			&::after{
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				border: 1px solid $white;
				@include animation(ripple-white 1.3s linear infinite);
				border-radius: 50%;
			}

		}
		& .title{
			color: $white;
			font-size: 100px;
			font-weight: 700;
			padding-top: 65px;
			padding-bottom: 5px;
			@media #{$xs} {
				font-size: 40px;
			}
			@media #{$sm} {
				font-size: 70px;
			}
			
		}
		& span{
			font-size: 30px;
			font-weight: 500;
			color: $white;
			@media #{$xs} {
				font-size: 18px;
			}
			@media #{$sm} {
				font-size: 30px;
			}
		}
	}
}