.serviceListOuterWrap {
    width: 100%;
    position: relative;
	display: flex;
	justify-content: center;

	@media all and (max-width: 1000px) {
		width: ~"calc(100% + 50px)";
		margin: 0 -25px;
	}

}

.serviceList {
    z-index: 5;
	color: var(--text_color);
	width: 100%;
	flex: 0 0 100%;

	.darkBg & {
		color: #fff;
	}

	&, .swiper-wrapper {
		display: flex;
		justify-content: space-between;
		width: 100%;

		@media all and (max-width: 900px) {
			justify-content: flex-start;
		}
	}

	&.swiper {
		@media all and (max-width: 900px) {
			padding-bottom: 56px;
		}
	}

    &__item {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        outline: 0 !important;
        margin-bottom: 0;
		flex: 1 1 33.333333%;
		max-width: 405px;
		padding: 0 25px;

		@media all and (max-width: 900px) {
			flex: 0 0 100%;
			max-width: 100%;
		}
    }

	&__inner {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		@media all and (max-width: 900px) {
			max-width: 480px;
			margin: 0 auto;
		}
	}

	&__info {
		max-width: 100%;
		display: flex;
		flex-direction: column;
	}

	&__imageWrap {
		position: relative;
		line-height: 16px;
		width: 124px;
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	&__image {
		width: 100%;
		height: 100%;
		object-fit: contain;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);

	}

	&__title {
		width: 100%;
		.headingStyle(h2);
		margin: 19px 0 0;
		color: inherit;
		position: relative;

		@media @flyout {
			.rems(24);
			line-height: 32px;
		}

	}

	&__description {
		margin: 5px 0 0;
		.rems(17);
		line-height: 26px;
		color: inherit;

		p {
			margin: 0;
			font-size: inherit;
			line-height: inherit;
			color: inherit;
			font-weight: inherit;
		}
	}
}

.serviceBanner {
    position: relative;
    width: 100%;
    background: var(--light_color);
    padding: 80px 0;
    text-align: center;
    z-index: 2;
    max-width: 100%;
    margin: 0 auto;
	overflow: hidden;

	@media @flyout {
		padding: 48px 0;
	}

    &.hideButton {

        padding-bottom: 124px;

        .buttonWrap {
            display: none;
        }
    }

    &.darkBg {
        background: var(--primary_color);
    }


	.wrapper {
		position: relative;
		z-index: 1;
	}

	a {
		text-decoration: none;
	}

	.buttonWrap {
		padding: 49px 0 0;
		margin-bottom: 0;

		@media all and (max-width: 800px) {
			padding: 36px 0 0;
		}

		@media @mobile {
			padding: 16px 0 0;
		}

		.button {
			margin: 0;
			width: auto;

			@media @mobile {
				min-width: 0;
				width: 100%;
			}
		}
	}
}

