.service-details__contact-sub-title,
.services-one__icon span,
.services-one__single:hover .services-one__text,
.services-one__single:hover .services-one__title a {
	color: var(--crank-white)
}

.services-one__single:hover .services-one__icon-shape-1,
.services-one__single:hover .services-one__icon-shape-2 {
	opacity: 0
}

.services-four,
.services-one,
.services-page,
.services-three {
	position: relative;
	display: block;
	padding: 120px 0 0;
	z-index: 1
}

.services-one__inner {
	position: relative;
	display: block;
	background-color: var(--crank-white);
	max-width: 1710px;
	width: 100%;
	margin: 0 auto;
	padding: 120px 15px 90px;
	border-radius: 60px
}

.services-one__single {
	position: relative;
	display: block;
	border: 2px solid var(--crank-black);
	border-radius: 20px;
	text-align: center;
	padding: 30px 30px 25px;
	margin-bottom: 30px;
	overflow: hidden;
	-webkit-transition: .5s;
	transition: .5s;
	z-index: 1;
	box-shadow: 0 0 10px 0;
	border: 2px solid transparent;
	background-color: #0f3846 !important
}

.services-one__single:hover {
	border: 2px solid transparent;
	transform: translateY(-10px)
}

.services-one__single:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--crank-black);
	border-radius: 17px;
	transition: transform .5s;
	transition: transform .5s, -webkit-transform .5s;
	transform-origin: bottom right;
	-webkit-transform: scale(1, 0);
	transform: scale(1, 0);
	z-index: -1
}

.services-one__single:hover:before {
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	transform-origin: top center
}

.services-one__single-shape-1,
.services-one__single-shape-2 {
	position: absolute;
	filter: blur(102.476px);
	transform: matrix(0, 1, 1, 0, 0, 0) scale(0);
	opacity: .5;
	-webkit-transition: .5s;
	z-index: -1
}

.services-one__single-shape-1 {
	top: 0;
	left: -514px;
	width: 790px;
	height: 417.6px;
	background: red;
	transition: .5s
}

.services-one__single:hover .services-one__single-shape-1 {
	transform: matrix(0, 1, 1, 0, 0, 0) scale(1);
	transition-delay: 0.4s
}

.services-one__single-shape-2 {
	top: -300px;
	right: -100px;
	width: 484px;
	height: 390px;
	background: #063fff;
	transition: .5s
}

.services-one__single:hover .services-one__single-shape-2 {
	transform: matrix(0, 1, 1, 0, 0, 0) scale(1);
	transition-delay: 0.6s
}

.services-one__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	width: 100px;
	margin: 0 auto;
	background-color: var(--crank-black);
	border-radius: 50%;
	border: 1px solid transparent;
	overflow: hidden;
	-webkit-transition: .5s;
	transition: .5s;
	z-index: 1
}

.services-one__single:hover .services-one__icon {
	border: 1px solid var(--crank-white);
	background-color: transparent
}

.services-one__icon span {
	position: relative;
	display: inline-block;
	font-size: 50px;
	-webkit-transition: .9s;
	-o-transition: .9s;
	transition: .9s
}

.services-one__icon-shape-1,
.services-one__icon-shape-2 {
	position: absolute;
	filter: blur(24.9942px);
	transform: rotate(-90deg);
	opacity: .5;
	-webkit-transition: .5s;
	z-index: -1
}

.services-one__single:hover .services-one__icon span {
	color: var(--crank-white);
	transform: scale(1.02) translateX(2px)
}

.services-one__icon-shape-1 {
	width: 192px;
	height: 101px;
	background: red;
	left: -130px;
	top: 10px;
	transition: .5s
}

.services-one__icon-shape-2 {
	width: 118px;
	height: 95px;
	right: -25px;
	top: 90px;
	background: #063fff;
	transition: .5s
}

.services-four__icon,
.services-four__single,
.services-two__single {
	background-color: var(--crank-white)
}

.services-one__title {
	font-size: 24px;
	font-weight: 600;
	line-height: 34px;
	margin-top: 17px;
	margin-bottom: 22px
}

.services-one__title a {
	color: #fff;
	font-size: 16px;
	text-decoration: none
}

.services-two__icon span,
.services-two__title a {
	color: var(--crank-black)
}

.services-three__title a:hover,
.services-two__title a:hover {
	color: var(--crank-base)
}

.services-one__text {
	-webkit-transition: .5s;
	transition: .5s
}

.services-two {
	position: relative;
	display: block;
	padding: 120px 0 90px;
	z-index: 1
}

.services-two__single {
	position: relative;
	display: block;
	border: 1px solid var(--crank-bdr-color);
	border-radius: 20px;
	padding: 52px 40px 39px;
	margin-bottom: 30px
}

.services-two__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 34px;
	text-transform: capitalize;
	margin-bottom: 28px
}

.services-four__title,
.services-three__title {
	font-size: 24px;
	line-height: 30px;
	font-weight: 600
}

.services-two__icon {
	position: absolute;
	top: 40px;
	right: 40px
}

.services-two__icon span {
	position: relative;
	display: inline-block;
	font-size: 60px;
	transition: .5s linear 0.1s;
	transform: scale(1)
}

.services-two__single:hover .services-two__icon span {
	transform: scale(.9)
}

.services-two__img {
	position: relative;
	display: block;
	margin-top: 50px
}

.services-two__img img {
	width: 100%
}

.services-three__single {
	position: relative;
	display: block;
	border: 1px solid var(--crank-bdr-color);
	padding: 35px 30px 28px;
	border-radius: 20px;
	margin-bottom: 30px;
	-webkit-transition: .5s;
	transition: .5s;
	z-index: 1
}

.services-three__single:hover {
	border: 1px solid var(--crank-base);
	transform: translateY(-10px)
}

.services-three__icon {
	position: relative;
	display: flex;
	align-items: center
}

.services-three__icon span {
	position: relative;
	display: inline-block;
	font-size: 65px;
	color: var(--crank-gray);
	-webkit-transition: .5s linear 0.1s;
	transition: .5s linear 0.1s
}

.service-details__img,
.service-details__left,
.service-details__right,
.service-details__service-list,
.service-details__service-list li,
.services-four__bottom,
.services-four__single,
.services-four__top,
.services-three__read-more {
	display: block;
	position: relative
}

.services-three__single:hover .services-three__icon span {
	transform: scale(.9);
	color: var(--crank-base)
}

.services-three__title {
	margin-top: 29px;
	margin-bottom: 31px
}

.services-three__title a {
	color: var(--crank-black)
}

.services-three__read-more a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--crank-black);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px
}

.service-details__contact-icon:hover span,
.service-details__contact-number:hover,
.services-four__icon span,
.services-four__title a:hover,
.services-three__read-more a span,
.services-three__read-more a:hover {
	color: var(--crank-base)
}

.services-three__read-more a span {
	font-size: 18px
}

.services-four__single {
	padding: 30px 30px 63px;
	border-radius: 20px;
	margin-bottom: 30px;
	z-index: 1
}

.services-four__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	width: 100px;
	border-radius: 50%;
	box-shadow: 0 0 60px rgba(0, 0, 0, .05);
	z-index: 1
}

.services-four__icon::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	background-color: var(--crank-base);
	transform: scaleX(.7) rotateX(20deg);
	opacity: 0;
	transition: .4s linear;
	z-index: -1
}

.services-four__single:hover .services-four__icon::before {
	transform: scaleX(1) rotateX(0);
	transition: .4s linear;
	opacity: 1
}

.services-four__icon span {
	position: relative;
	display: inline-block;
	font-size: 50px;
	transition: .5s linear 0.1s;
	transform: scale(1)
}

.services-four__single:hover .services-four__icon span {
	transform: scale(.9);
	color: var(--crank-white)
}

.services-four__title {
	margin-top: 23px;
	margin-bottom: 21px
}

.service-details__bottom-points li+li,
.service-details__service-list li+li {
	margin-top: 20px
}

.services-four__title a {
	color: var(--crank-black)
}

.services-four__bottom>.row {
	justify-content: center
}

.service-details {
	position: relative;
	display: block;
	padding: 120px 0;
	z-index: 1
}

.service-details__title-1 {
	font-size: 45px;
	font-weight: 600;
	line-height: 55px;
	text-transform: capitalize
}

.service-details__text-1,
.service-details__text-3 {
	margin-top: 20px;
	margin-bottom: 30px
}

.service-details__img img {
	width: 100%;
	border-radius: 20px
}

.service-details__title-2 {
	font-size: 21px;
	font-weight: 600;
	line-height: 31px;
	text-transform: capitalize;
	margin-top: 29px;
	margin-bottom: 18px
}

.service-details__single {
	position: relative;
	display: block;
	background-color: #f4f4f4;
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 30px
}

.service-details__contact-icon:hover,
.service-details__icon,
.service-details__service-list-box {
	background-color: var(--crank-white)
}

.service-details__icon-and-title {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px
}

.service-details__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 65px;
	height: 65px;
	border-radius: 50%
}

.service-details__icon span {
	position: relative;
	display: inline-block;
	font-size: 40px;
	color: var(--crank-black)
}

.service-details__single-title {
	font-size: 24px;
	font-weight: 600;
	line-height: 34px;
	position: relative;
	display: block;
	flex: 1
}

.service-details__single p {
	margin-top: 21px
}

.service-details__service-list-box {
	position: relative;
	display: block;
	box-shadow: 0 0 60px rgba(0, 0, 0, .05);
	border-radius: 20px;
	padding: 38px 40px 40px
}

.service-details__service-title {
	font-size: 24px;
	font-weight: 600;
	line-height: 34px;
	text-transform: capitalize;
	margin-bottom: 28px
}

.service-details__service-list li a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #f4f4f4;
	color: var(--crank-gray);
	padding: 11px 29px 12px;
	border: 1px solid #f4f4f4;
	border-radius: 25px
}

.service-details__service-list li.active a,
.service-details__service-list li:hover a {
	border: 1px solid var(--crank-base);
	background-color: var(--crank-white)
}

.service-details__bottom-img img,
.service-details__bottom-img-two img {
	width: 100%;
	border-radius: 10px
}

.service-details__contact-box {
	position: relative;
	display: block;
	background-color: var(--crank-black);
	border-radius: 20px;
	text-align: center;
	padding: 60px 30px 58px;
	overflow: hidden;
	margin-top: 40px;
	z-index: 1
}

.service-details__contact-box-bg,
.service-details__contact-box-bg-shape {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: -1
}

.service-details__contact-box-bg {
	opacity: .1
}

.service-details__contact-box-bg-shape {
	opacity: .5
}

.service-details__contact-title {
	font-size: 36px;
	font-weight: 500;
	line-height: 40px;
	color: var(--crank-white)
}

.service-details__contact-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	background-color: var(--crank-base);
	border-radius: 50%;
	margin: 22px auto 20px;
	webkit-transition: all 500ms ease;
	transition: .5s
}

.service-details__bottom,
.service-details__bottom-img,
.service-details__bottom-img-two,
.service-details__bottom-left,
.service-details__bottom-right {
	display: block;
	position: relative
}

.service-details__contact-icon span {
	position: relative;
	display: inline-block;
	font-size: 24px;
	color: var(--crank-white);
	webkit-transition: all 500ms ease;
	transition: .5s
}

.service-details__contact-number {
	font-size: 24px;
	font-weight: 600;
	line-height: 34px;
	font-family: var(--crank-font-two);
	color: var(--crank-white);
	margin-top: 18px;
	position: relative;
	display: block
}

.service-details__bottom {
	margin-top: 40px
}

.service-details__bottom-title {
	font-size: 24px;
	line-height: 34px;
	font-weight: 600;
	margin-top: 28px;
	margin-bottom: 18px
}

.service-details__bottom-right {
	margin-top: 30px
}

.service-details__bottom-points-box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 25px
}

.service-details__bottom-points {
	position: relative;
	display: block;
	margin-bottom: 60px
}

.service-details__bottom-points li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px
}

.service-details__bottom-points li .icon {
	position: relative;
	display: inline-block
}

.service-details__bottom-points li .icon span {
	position: relative;
	display: inline-block;
	font-size: 14px;
	color: var(--crank-base)
}

.services-five .services-two__single {
	background-color: #f4f4f4
}

.services-page .services-one__single {
	border: none;
	background-color: #f4f4f4
}

.services-carousel-page {
	position: relative;
	display: block;
	padding: 120px 0 170px
}

.services-carousel-page .services-one__single {
	margin-bottom: 0
}