.work-area [dir=rtl] {
	direction: rtl
}

.work-area .works-wrapper {
	display: grid;
	gap: 10px;
	margin: 70px 0px;
}

.work-slider-active .swiper-slide {
	width: auto
}

.work-slider-active .swiper-wrapper {
	transition-timing-function: linear
}

.work-box {
	position: relative;
	max-width: 880px;
	background: #ededed;
}

@media only screen and (max-width: 1919px) {
	.work-box {
		max-width: 780px
	}
}

@media only screen and (max-width: 1399px) {
	.work-box {
		max-width: 680px
	}
}

@media only screen and (max-width: 1199px) {
	.work-box {
		max-width: 580px
	}
}

@media only screen and (max-width: 991px) {
	.work-box {
		max-width: 480px
	}
}

@media only screen and (max-width: 767px) {
	.work-box {
		max-width: 380px
	}
}

.work-box:hover .content {
	opacity: 1;
	visibility: visible
}

.work-box .content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	inset-inline-start: 0;
	background-color: rgba(255, 255, 255, .9);
	display: flex;
	flex-direction: column;
	justify-content: end;
	padding: 45px 45px 50px;
	opacity: 0;
	visibility: hidden;
	transition: all .5s;
	direction: ltr
}

.work-box .icon {
	position: absolute;
	inset-inline-end: 45px;
	top: 45px
}

.work-box .title {
	font-size: 26px;
    color: #16430e;
    font-weight: 600;
    margin-bottom: 0px;
}

.work-box .meta {
    font-size: 17px;
    display: inline-block;
    margin-top: 0px;
    color: #16430e;
}





.clients-area {
	background-color: var(--black)
}

.dark .clients-area {
	background-color: #1b1b1b
}

.clients-area-inner {
	padding: 55px 0;
	position: relative;
	padding-inline-start: 120px;
	margin-inline-end: calc((100vw - var(--container-max-widths))/-2)
}

@media only screen and (max-width: 1399px) {
	.clients-area-inner {
		padding: 25px 0 50px;
        padding-inline-start: 0px;
	}
}

@media only screen and (max-width: 991px) {
	.clients-area-inner {
		padding-inline-start: 0;
		margin-inline-end: 0
	}
}

.clients-area-inner .shape-1 {
	width: -moz-max-content;
	width: max-content;
	position: absolute;
	top: 0;
	inset-inline-end: 100%;
	height: 100%;
	overflow: hidden
}

@media only screen and (max-width: 991px) {
	.clients-area-inner .shape-1 {
		display: none
	}
}

.clients-area-inner .shape-1 img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.dir-rtl .clients-area-inner .shape-1 img {
	transform: rotateY(180deg)
}

.client-slider-active .swiper-slide {
	width: auto;
	text-align: center;
}

.client-slider .swiper-wrapper {
	transition-timing-function: linear
}

.client-box img {
	/*opacity: .9*/
}