/*===========================
    13.COUNTER css 
===========================*/





.counter-area{
	padding-top: 130px;
	padding-bottom: 128px;
	background: #101e3b;
	position: relative;
	&::before{
		position: absolute;
		content: '';
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: url(../images/counter-dot.png);
		opacity: .6;
	}
	& .counter-play{
		position: relative;
		@media #{$md} {
			margin-right: 0;
		}
		@media #{$xs} {
			margin-right: 0;
		}
		&::before{
			position: absolute;
			content: '';
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			background-color: rgba(16, 30, 59,.65);
		}
		& img{
			width: 100%;
		}
		& a{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			height: 50px;
			width: 50px;
			text-align: center;
			line-height: 50px;
			background: $white;
			border-radius: 50%;
			color: $theme-color-2;
			font-size: 14px;
		}

	}
	& .counter-item{
		padding-left: 120px;
		position: relative;
		@media #{$md} {
			margin-top: 30px;
		}
		@media #{$xs} {
			margin-top: 30px;
		}
		& i{
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			color: $white;
			font-size: 70px;
		}
		& .title{
			font-size: 45px;
			color: $theme-color-2;
			@media #{$lg} {
				font-size: 32px;
			}
			@media #{$xs} {
				font-size: 32px;
			}
		}
		& span{
			font-size: 18px;
			color: #91a5ce;
			font-weight: 500;
			@media #{$lg} {
				font-size: 15px;
			}
		}
	}
	&.about-counter{
		padding-top: 0;
		background-color: transparent;
		padding-bottom: 130;
		&::before{
			display: none;
		}
		& .counter-item{
			& i{
				color: $theme-color-2;
			}
			& .title{
				color: $black;
			}
			& span{
				color: $body-text;
			}
		}
	}
}