.portfolio-details {
	padding: 8.438rem 0rem 0rem;
	@media (max-width: 1024px) {
		padding: 3.75rem 0rem 0rem;
	}
	.portfolio-warper {
		margin-top: 4.188rem;
		@media (max-width: 1024px) {
			margin-top: 1.875rem;
		}
		p {
			padding-bottom: 2.188rem;
			@media (max-width: 768px) {
				padding-bottom: 1rem;
			}
			&:last-child {
				padding-bottom: 0rem;
			}
		}
		.portfolio-image {
			img {
				filter: brightness(0.7);
			}
		}
		.portfolio-box {
			display: flex;
			justify-content: space-between;
			padding: 3.125rem 0rem 4.063rem;
			@media (max-width: 1024px) {
				padding: 1.25rem 0rem 1.25rem;
				flex-direction: column;
				.portfolio-item {
					margin-bottom: 1.25rem;
				}
			}
		}
	}
	.portfolio-list {
		i {
			font-size: 1.25rem;
			color: var(--wc-primary-color);
			margin-right: 0.813rem;
		}
	}
	.portfolio-gallery {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.25rem;
		padding-bottom: 3.125rem;
		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}
		img {
			width: 100%;
		}
	}
	.client-info-list {
		max-width: 22.438rem;
		-webkit-box-shadow: 0px 7px 55px rgb(9 16 20 / 8%);
		box-shadow: 0px 7px 55px rgb(9 16 20 / 8%);
		padding: 3.75rem 2.313rem 5.25rem 2.438rem;
		border-top: 6px solid var(--wc-primary-color);
		background: var(--pure-white-color);
		transform: translate(-15px, -188px);
		@media (max-width: 768px) {
			transform: translate(-0px, -0px);
			padding: 1.875rem;
		}
		.client-item {
			li {
				display: inline-flex;
				gap: 1.938rem;
				font-weight: 400;
				padding-bottom: 0.375rem;
				color: var(--wc-dark-gray-color);
				span {
					font-weight: 600;
					color: var(--wc-dark-gray-color);
				}
				p {
					color: var(--wc-gray-color);
				}
				&:nth-child(2) {
					padding: 2.063rem 0rem;
				}
			}
		}
	}
}

.single-page-title {
	font-size: 1.75rem;
	line-height: 2.45rem;
	padding-bottom: 0.813rem;
	font-weight: 600;
	@media (max-width: 1024px) {
		font-size: 1.563rem;
	}
}

.quotebox {
	max-width: 38.438rem;
	background-color: var(--wc-dark-gray-color);
	margin: 0 auto;
	padding: 1.4rem 2.5rem 1.625rem 2.5rem;
	@media (max-width: 991px) {
		padding: 2rem;
		max-width: 100%;
	}
	.quote-content {
		color: var(--pure-white-color);
		font-style: italic;
		line-height: 1.625rem;
		margin-bottom: 0rem;
		padding-bottom: 0rem;
		position: relative;
		&::before {
			position: absolute;
			top: -0.875rem;
			@media (max-width: 991px) {
				top: -1.5rem;
			}
			left: -1.188rem;
			content: "\f10d";
			font-family: "FontAwesome";
			font-size: 1.375rem;
		}
		&::after {
			position: absolute;
			bottom: -0.313rem;
			right: 4.375rem;
			content: "\f10e";
			font-family: "FontAwesome";
			font-size: 1.375rem;
			@media (max-width: 1024px) {
				right: -0.313rem;
			}
		}
	}
}