/*----------------------------------------*/
/*  Service Style 1
/*----------------------------------------*/

.service-area {
    padding-top: 40px;
}
.single-service {
    position: relative;
    max-width: 350px;
    margin: 15px auto;
    border: 1px solid #ebebeb;
    padding: 25px;
    z-index: 1;
    .ss-icon {
        position: relative;
        display: inline-block;
        height: 70px;
        width: 70px;
        background-color: $elementsColor;
        text-align: center;
        border-radius: 50%;
        padding-top: 20px;
        margin-bottom: 15px;
        i {
            color: $primaryColor;
            font-size: 36px;
            line-height: 36px;
        }
    }
    .ss-text {
        position: relative;
        h4 {
            font-size: 20px;
            letter-spacing: 0px;
            color: $secondaryColor;
            font-weight: 500;
            text-transform: uppercase;
            line-height: 30px;
            margin-bottom: 15px;
            @include transition(all,.5s,ease);
        }
        p {
            font-size: 16px;
            letter-spacing: 0px;
            color: $secondaryColor;
            font-weight: 400;
            line-height: 24px;
            margin-bottom: 15px;
            @include transition(all,.5s,ease);
        }
        a {
            display: inline-block;
            font-size: 16px;
            line-height: 20px;
            letter-spacing: 0px;
            color: $secondaryColor;
            font-weight: 400;
            border-bottom: 1px solid #737382;
            &:hover {
                color: $elementsColor;
            }
        }
    }
    .ssfb-img {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 0px;
        width: 0px;
        opacity: 0;
        @include transition(all,.5s,ease);
        z-index: -1;
        img {
            height: 100%;
            width: 100%;
        }
    }
    &:hover{
        .ssfb-img {
            opacity: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            &:after {
                position: absolute;
                content: '';
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                background-color: rgba(67, 67, 91, .60);
                z-index: 1;
            }
        }
        .ss-text {
            h4 {
                color: $primaryColor;
            }
            p {
                color: $primaryColor;
            }
            a {
                color: $primaryColor;
                border-color: $primaryColor;
                &:hover {
                    color: $elementsColor;
                    border-color: $elementsColor;
                }
            }
        }
    }
}

.sspV1 {}


/*------------- Service Style 1 END -------------*/





/*----------------------------------------*/
/*  Service Style 2
/*----------------------------------------*/
.service2-area {
    position: relative;
    margin-top: -140px;
    padding-bottom: 80px;
}
.service2-carousel {
    position: relative;
    .owl-dots {
        display: none;
    }
    .owl-nav {
        position: absolute;
        width: 100%;
        top: 40%;
        left: 0;
        z-index: -1;
        [class*=owl-] {
            background-color: transparent;
            color: #363641;
            border: 1px solid #363641;
            width: 40px;
            height: 40px;
            text-align: center;
            border-radius: 50%;
            font-size: 25px;
        }
        .owl-prev {
            float: left;
            margin-left: -50px;
        }
        .owl-next {
            float: right;
            margin-right: -50px;
        }
        
    }
}

.sspV2 {
    position: relative;
    max-width: 370px;
    margin: 15px auto;
    border: 1px solid #17171d;
    background-color: #17171d;
    transition: .5s ease;
    .ss-icon {
        background-color: $elementsColor;
        border-radius: 10px;
        @include transition(all,.5s,ease);
        i {
            color: $primaryColor;
            @include transition(all,.5s,ease);
        }
    }
    .ss-text {
        position: relative;
        h4 {
            color: $elementsColor;
            @include transition(all,.5s,ease);
        }
        p {
            // color: #6d6d7e;
            color: $primaryColor;
            @include transition(all,.5s,ease);
        }
        a {
            color: $elementsColor;
            border-color: $elementsColor;
            @include transition(all,.5s,ease);
            &:hover {
                color: $primaryColor;
            }
        }
    }
    .ssfb-img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        @include transition(all,.5s,ease);
        z-index: -1;
        img {
            height: 100%;
            width: 100%;
        }
    }
    &:hover{
        background-color: $elementsColor;
        border-color: $elementsColor;
        .ssfb-img {
            opacity: 1;
            &:after {
                position: absolute;
                content: '';
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                background-color: rgba(67, 67, 91, .60);
                z-index: 1;
            }
        }
        .ss-text {
            a {
                &:hover {
                    color: $primaryColor;
                    border-color: $primaryColor;
                }
            }
        }


        .ss-icon {
            background-color: $primaryColor;
            transform: scaleX(-1);
            i {
                color: $elementsColor;
            }
        }
    }
}

/*------------- Service Style 2 END -------------*/


/*----------------------------------------*/
/*  Service Style 3
/*----------------------------------------*/
.sspV3 {
    max-width: 380px;
    margin: 0 auto;
    border-color: #424242;
    @include transition(all,.5s,ease);
    .ss-icon {
        border: 1px solid $secondaryColor;
        border-radius: 5px;
        background-color: transparent;
        @include transition(all,.5s,ease);
        i {
            color: $secondaryColor;
            @include transition(all,.5s,ease);
        }
    }
    &:hover {
        background-color: $elementsColor;
        border-color: $elementsColor;
        z-index: 2;
        .ss-icon {
            border-color: $primaryColor;
            background-color: $primaryColor;
            i {

                color: $elementsColor;
            }
        }
    }
    .ss-text {
        a{
            &:hover {
                color: #fff !important;
                border-color: #ffffff !important;
            }
        }
    }
}

/*------------- Service Style 3 END -------------*/

/*----------------------------------------*/
/*  Service Style 4
/*----------------------------------------*/
.sspV4 {
    max-width: 380px;
    margin: 0 auto;
    border-color: #424242;
    @include transition(all,.5s,ease);
    background-color: #202020;
    .ss-icon {
        border: 1px solid $secondaryColor;
        border-radius: 5px;
        background-color: transparent;
        @include transition(all,.5s,ease);
        i {
            color: $primaryColor;
            @include transition(all,.5s,ease);
        }
    }    
    .ss-text {
        h4 {
            color: $primaryColor;
        }
        p {
            color: $primaryColor;
        }
        a {
            color: $primaryColor;
        }
    }
    &:hover {
        background-color: #202020;
        border-color: $elementsColor;
        z-index: 2;
        .ss-icon {
            border-color: $elementsColor;
            background-color: #202020;
            i {
                color: $elementsColor;
            }
        }
        .ss-text {
            h4 {
                color: $elementsColor;
            }
            a {
                color: $elementsColor;
                border-color: $elementsColor;
            }
        }
    }
}

.sspV4-ca {
    background-color: transparent;
    border: 1px solid transparent;
    text-align: center;
    &:hover {
        background-color: transparent;
        border: 1px solid transparent;
    }
}



/*------------- Service Style 4 END -------------*/



/*----------------------------------------*/
/*  Service Style 5
/*----------------------------------------*/
.single-service-thumbnail-V1 {
    position: relative;
    max-width: 380px;
    margin: 25px auto;
    @include transition(all,.5s,ease);
    .sstv-img {
        position: relative;
        margin-bottom: 20px;
        overflow: hidden;
        img {
            transition: .5s ease;
        }
    }
    .sstv-text {
        h4 {
            color: $primaryColor;
            font-size: 20px;
            line-height: 24px;
            letter-spacing: 0px;
            font-weight: 500;
            text-transform: uppercase;
            margin: 15px auto;
            @include transition(all,.5s,ease);
        }
        a {
            color: $primaryColor;
            font-size: 16px;
            letter-spacing: 0px;
            line-height: 24px;
            border-bottom: 1px solid $primaryColor;
            i {
                margin-left: 10px;
            }
        }
        p {
            font-size: 16px;
            letter-spacing: 0px;
            color: $primaryColor;
            line-height: 24px;
            margin: 15px auto;
            @include transition(all,.5s,ease);
        }
    }
    &:hover {
        z-index: 2;
        .sstv-text {
            h4 {
                color: $elementsColor;
            }
            a {
                color: $elementsColor;
                border-color: $elementsColor;
            }
            p {
                color: $primaryColor;
            }
        }
        .sstv-img {
            img {
                transform: scale(1.1);
            }
        }
    }
}

.sstv-2 {
    .sstv-text {
        position: absolute;
        width: calc(100% - 50px);
        height: calc(100% - 50px);
        left: 25px;
        top: 25px;
        background-color: rgba(26, 26, 26, .80);
        text-align: center;
        padding: 50px 10px;
        p {
            color: $primaryColor;
        }
    }
    .sstv-img {
        overflow: hidden;
        img {
            transition: .5s ease;
        }
    }
}

.sstv2-hover {
    .sstv-text {
        @include transition(all,.5s,ease);
        opacity: 0;
    }
    &:hover {
        .sstv-text {
            opacity: 1;
        } 
        .sstv-img {
            img {
                transform: scale(1.1);
            }
        }
    }
}
/*------------- Service Style 5 END -------------*/







/*----------------------------------------*/
/*  Service Details Style 1
/*----------------------------------------*/

.service-details-area {
    position: relative;
    padding-bottom: 0px;
}
.service-details-content {
	position: relative;
}
.sdc-text-img {
	position: relative;
	max-width: 540px;
	margin: 40px auto;
	p {
		font-size: 15px;
		line-height: 22px;
        // color: #6d6d7e;
        color: $primaryColor;
		letter-spacing: 0px;
		margin: 20px auto;
	}
	h4 {
		
        font-size: 26px;
        line-height: 40px;
        color: $primaryColor;
        font-weight: 600;
        letter-spacing: 0px;
        margin-bottom: 15px;
	}
	.sdci {
		text-align: center;
		position: relative;
		margin-top: 40px;
		img {
			max-width: 210px;
			margin: 0 auto;
		}
	}
}
.sdc-img {
	position: relative;
    margin: 40px auto 120px;
}


/*------------- Service Details Style 1 END -------------*/
.exclusive-service-area {
    .section-titleV1 {
        padding-top: 0px;
        margin-top: 0px;
        margin-bottom: 30px;
    }
    padding: 120px 0px;
}