/*===========================
    24.SERVICES ITEM css 
===========================*/

.services-item-area{
	& .section-title{
		& .title{
			font-size: 60px;
			margin-bottom: 13px;
			@media #{$xs} {
				font-size: 30px;
			}
			@media #{$sm} {
				font-size: 46px;
			}
			&::before{
				display: none;
			}

		}
			& p{
				padding: 0 22px 45px;
			}
	}
	& .single-services-item{
		position: relative;
		overflow: hidden;
		display: block;
		height: 370px;
		& .img{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			@include transition(0.5s);
		}
		& .services-overlay{
			position: absolute;
			bottom: -110px;
			left: 0;
			width: 100%;
			background-color: rgba(0, 34, 73,.7);
			padding: 20px 40px 30px;
			@include transition(0.3s);
			@media #{$lg} {
				padding: 20px 10px 30px;
			}
			@media #{$md} {
				padding: 20px 30px 30px;
			}
			@media #{$xs} {
				padding: 20px 5px 30px;
			}
			@media #{$sm} {
				padding: 20px 26px 30px;
			}
			& i{
				position: absolute;
				top: -20px;
				left: 20px;
				height: 70px;
				width: 70px;
				background: $theme-color;
				text-align: center;
				line-height: 70px;
				color: $white;
				font-size: 30px;
			}
			& p{
				color: $white;
				font-size: 14px;
				padding-top: 20px;
			}
			& .title{
				padding-left: 80px;
				color: $white;
				font-size: 20px;
				font-weight: 600;
				@media #{$lg} {
					padding-left: 90px;
				}
				@media #{$xs} {
					padding-left: 95px;
					font-size: 18px;
				}
				@media #{$sm} {
					padding-left: 80px;
					font-size: 20px;
				}
			}
		}
		&:hover{
			.img{
                transform: scale(1.2) rotate(5deg);
            }
			& .services-overlay{
				bottom: 0;
				background: rgba(0,102,255,.9);
				@media #{$sm} {
					bottom: -20px;
				}
			}
		}
	}
}