/*===============================
    36.SOLUTION css 
================================*/


.solution-area{
	& .solution-overlay{
		background-color: rgba(16, 16, 40,.8);
		padding-bottom: 355px;
		& .solution-content{
			border: 10px solid rgba(255, 255, 255,0.15);
			padding: 40px  70px 50px;
			margin-right: 70px;
			@media #{$md} {
				margin-right: 0;
			}
			@media #{$xs} {
				margin-right: 0;
				padding: 50px 20px;
			}
			@media #{$sm} {
				margin-right: 0;
				padding: 40px  70px 50px;
			}
			& .title{
				font-size: 55px;
				color: $white;
				line-height: 65px;
                @media #{$lg} {
                    font-size: 40px;
                    line-height: 50px;
                }
                @media #{$xs} {
                    font-size: 30px;
                    line-height: 40px;
                }
                @media #{$sm} {
                    font-size: 36px;
                    line-height: 46px;
                }
			}
			& p{
				font-size: 15px;
				color: $white;
				padding-top: 20px;
			}
		}
	}
}

.solution-play{
	@media #{$md} {
		text-align: left !important;
		margin-top: 40px;
	}
	@media #{$xs} {
		text-align: center !important;
		margin-top: 40px;
		margin-right: 0;
	}
	@media #{$sm} {
		text-align: left !important;
		margin-top: 40px;
	}
	& a{
		height: 80px;
		width: 80px;
		background: $white;
		color: $theme-color;
		text-align: center;
		line-height: 80px;
		border-radius: 50%;
		position: relative;
		z-index: 5;
		&::before{
			position: absolute;
			content: '';
			height: 100%;
			width: 100%;
			border-radius: 50%;
			border: 1px solid $white;
			top: 0;
			left: 0;
			z-index: -1;
			@include animation(play-btn-1 1.8s linear infinite);
		}
		&::after{
			position: absolute;
			content: '';
			height: 100%;
			width: 100%;
			border-radius: 50%;
			border: 1px solid $white;
			top: 0;
			left: 0;
			z-index: -1;
			@include animation(play-btn-2 1.5s linear infinite);
		}
	}
}