.complaint-catalog{
	padding: 45px 70px 30px;
	background: var(--light-blue-color);
	box-shadow: var(--shadow-inset);
	border-radius: var(--border-radius-xl);
	margin-bottom: 40px;
	position: relative;
	overflow: hidden;
}

.complaint-catalog:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
	pointer-events: none;
}
.complaint-catalog__container {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.complaint-catalog__col{
	width: 50%;
	padding: 0 15px 30px;
}
.complaint-write {
	padding: 32px 60px 35px 80px;
	background: var(--gradient-primary);
	box-shadow: var(--shadow-card);
	border-radius: var(--border-radius-lg);
	color: #fff;
	position: relative;
	overflow: hidden;
	transition: all var(--transition-normal);
}

.complaint-write:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
	pointer-events: none;
}

.complaint-write:hover {
	transform: translateY(-2px);
	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
}
.complaint-write.opened{
	border-radius: 10px 10px 0 0;
}
.complaint-write__title {
	font-weight: 700;
	font-size: 21px;
	line-height: 30px;
	position: relative;
	margin-bottom: 13px;
}
.complaint-write__title:before{
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.15 0.75H7.85C7.525 0.75 7.2 0.8875 6.975 1.1125L1.1125 6.975C0.8875 7.2 0.75 7.525 0.75 7.85V16.1375C0.75 16.475 0.8875 16.7875 1.1125 17.025L6.9625 22.875C7.2 23.1125 7.525 23.25 7.85 23.25H16.1375C16.475 23.25 16.7875 23.1125 17.025 22.8875L22.875 17.0375C23.1125 16.8 23.2375 16.4875 23.2375 16.15V7.85C23.2375 7.5125 23.1 7.2 22.875 6.9625L17.025 1.1125C16.8 0.8875 16.475 0.75 16.15 0.75ZM11.999 18.625C11.099 18.625 10.374 17.9 10.374 17C10.374 16.1 11.099 15.375 11.999 15.375C12.899 15.375 13.624 16.1 13.624 17C13.624 17.9 12.899 18.625 11.999 18.625ZM12 13.25C11.3125 13.25 10.75 12.6875 10.75 12V7C10.75 6.3125 11.3125 5.75 12 5.75C12.6875 5.75 13.25 6.3125 13.25 7V12C13.25 12.6875 12.6875 13.25 12 13.25Z' fill='%2340C5BD'/%3E%3C/svg%3E%0A") no-repeat 0 0 / 100% auto;
	position: absolute;
	top: 3px;
	left: -47px;
}
.complaint-write__text {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 24px;
}
.complaint-write__btn {
	margin-right: 20px;
}
.complaint-write__btn span{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	background: var(--gradient-success);
	box-shadow: var(--shadow-button);
	border-radius: var(--border-radius-md);
	cursor: pointer;
	font-weight: 700;
	font-size: var(--font-size-lg);
	line-height: 1.2;
	text-align: center;
	color: #fff;
	transition: all var(--transition-normal);
	position: relative;
	overflow: hidden;
}

.complaint-write__btn span:before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left var(--transition-slow);
}

.complaint-write__btn span:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
}

.complaint-write__btn span:hover:before {
	left: 100%;
}
.opened .complaint-write__btn span {
    background: #46DAD1;
}
.complaint-write__btn span i{
	display: block;
	transform: rotate(90deg);
	margin-left: 18px;
}
.complaint-write.opened .complaint-write__btn span i{
	transform: rotate(-90deg);
}
.complaint-write__btn span svg{
	fill: #092928;
}
.complaint-catalog__form{
	display: none;
	padding: 30px 30px 25px;
	background: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0px 50px 30px rgba(0, 0, 0, 0.05), 0px 30px 30px rgba(0, 0, 0, 0.03), 0px 10px 15px rgba(0, 0, 0, 0.02);
	margin: 10px 0 -10px;
}
.complaint-best {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px 20px;
	background: rgba(231, 234, 236, 0.5);
	border: 2px solid #fff;
	backdrop-filter: blur(10px);
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
}
.complaint-best__title {
	padding: 13px 20px 17px;
	background: rgba(255,255,255,0.7);
	font-weight: 700;
	font-size: 37px;
	line-height: 30px;
	text-align: center;
	color: var(--blue-title-color);
	margin: 0 -20px 27px;
}
.complaint-best__title span{
	background: linear-gradient(90deg, #0F2027 0%, #203A43 50%, #2C5364 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.complaint-best__text {
	font-size: 24px;
	line-height: 20px;
	text-align: center;
	color: #616E77;
	margin-bottom: 28px;
}
.complaint-best__btn span{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 300px;
	height: 55px;
	background: #F7C71B;
	box-shadow: 0px 5px 10px rgba(73, 64, 29, 0.3);
	border-radius: 5px;
	cursor: pointer;
	font-weight: 600;
	font-size: 18px;
	line-height: 20px;
	text-align: center;
	color: #092928;
	text-decoration: none;

}
.complaint-best__btn span i{
	display: block;
	line-height: 0;
	margin-left: 16px;
}
.complaint-best__btn span svg{
	fill: #092928;
}
.complaint-item {
	position: relative;
}
.complaint-item__link{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.complaint-item__inner{
	padding: 25px 30px 19px;
	background: #fff;
	box-shadow: 0px 50px 30px rgba(0, 0, 0, 0.05), 0px 30px 30px rgba(0, 0, 0, 0.03), 0px 10px 15px rgba(0, 0, 0, 0.02);
	border-radius: 10px;
	position: relative;
}
.complaint-item__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0.01%, #F1F1F1 100.47%);
	border-left: 2px solid #CF4633;
	padding: 5px 30px 6px 28px;
	margin: 0 -30px 8px;
}
.complaint-item__info{
	display: flex;
	align-items: baseline;
	min-width: 0;
}
.complaint-item__number{
	font-family: 'Tomorrow';
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #CF4633;
	margin-right: 16px;
	flex-shrink: 0;
}
.complaint-item__title{
	flex: 1;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.complaint-item__title a{
	text-decoration: none;
}
.complaint-item__date {
	display: flex;
	align-items: center;
	font-family: 'Tomorrow';
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	text-align: right;
	color: #616E77;
	flex-shrink: 0;
	margin: 1px 0 0 30px;
}
.complaint-item__date i{
	display: inline-block;
	line-height: 0;
	margin: 0 10px 1px 0;
}
.complaint-item__date svg{
	fill: rgba(97,110,119,0.4);
}
.complaint-item__content {
	height: 158px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: 0 0 0 2px;
}
.complaint-item__content:after{
	content: '';
	display: block;
	height: 50px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	position: absolute;
	top: 110px;
	left: 0;
	right: 0;
}
.complaint-item__text {
	flex-grow: 1;
	font-size: 15px;
	line-height: 25px;
}
.complaint-item__image {
	flex-shrink: 0;
	margin: 5px 0px 0 20px;
	position: relative;
	z-index: 1;
}
.complaint-item__image a{
	display: block;
	width: 115px;
	height: 115px;
	position: relative;
	overflow: hidden;
}
.complaint-item__image a:not(:first-child){
	display: none;
}
.complaint-item__image a:before{
	content: '';
	display: block;
	background: linear-gradient(90deg, #0F2027 0%, #203A43 50%, #2C5364 100%);
	opacity: 0.4;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}
.complaint-item__image span{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(67, 123, 148, 0.7);
	backdrop-filter: blur(3px);
	font-family: 'Tomorrow';
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	color: #fff;
	position: absolute;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
	pointer-events: none;
}
.complaint-item__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;
}
.pagination{
	padding: 10px 0 0;
}
.send-complaint-title{
    font-size: 20px;
    position: relative;
    color: #34a09f;
    font-weight: 500;
    text-align: center;
}



/* Responsive
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 1310px){
	.complaint-catalog{
		padding: 45px 30px 30px;
	}

}
@media only screen and (max-width: 1229px){
	.complaint-write {
		padding: 28px 40px 30px 60px;
	}
}
@media only screen and (max-width: 992px){
	.complaint-catalog{
		padding: 15px 15px 10px;
		margin: 0 -15px 5px;
		border-radius: 0;
	}
	/* .complaint-catalog__container {
		width: 382px;
		max-width: 100%;
		margin: 0 auto;
	} */
	/* .complaint-catalog__col{
		width: 100%;
		padding: 0 0 15px;
	} */
	/* .complaint-catalog__container{
		width: 100%;
	} */
	.complaint-catalog__col{
		width: 100%;
	}
	.complaint-catalog__col_a{
		width: 50%;
	}
	.complaint-write {
		padding: 15px 20px 20px;
		text-align: center;
		clip-path: polygon(calc(50% - 6px) 0, 0 0, 0 100%, 100% 100%, 100% 0, calc(50% + 6px) 0, 50% 7px);
	}
	.complaint-write__title{
		font-size: 22px;
		line-height: 25px;
		margin-bottom: 11px;
	}
	.complaint-write__title:before{
		display: none;
	}
	.complaint-write__text{
		margin-bottom: 14px;
	}
	.complaint-write__btn{
		margin: 0;
	}
	.complaint-write__btn span{
		height: 50px;
		font-size: 19px;
	}
	.complaint-write__btn span i{
		width: 10px;
		margin-left: 15px;
	}
	.complaint-catalog__form {
		display: none;
		padding: 15px;
		background: #fff;
		border-radius: 0 0 10px 10px;
		box-shadow: 0px 50px 30px rgba(0, 0, 0, 0.05), 0px 30px 30px rgba(0, 0, 0, 0.03), 0px 10px 15px rgba(0, 0, 0, 0.02);
		margin: 0;
	}
	.complaint-best {
		padding: 18px 20px 14px;
	}
	.complaint-best__title{
		padding: 9px 20px 11px;
		font-size: 25px;
		line-height: 30px;
		margin: 0 -20px 15px;
	}
	.complaint-best__content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 -2px;
	}
	.complaint-best__text{
		font-size: 17px;
		line-height: 20px;
		text-align: left;
		margin: 0 20px 0 0;
	}
	.complaint-best__btn{
		flex-shrink: 0;
	}
	.complaint-best__btn span{
		width: 183px;
		min-width: 0;
		height: 44px;
		font-size: 16px;
		line-height: 20px;
	}
	.complaint-best__btn span i{
		margin-left: 10px;
		width: 8px;
	}
	.page-title {
	    font-size: 32px;
	}
}
@media only screen and (max-width: 805px){
	.complaint-catalog__col_a{
		width: 100%;
	}
}
@media only screen and (max-width: 450px){
	.complaint-item:before{
		content: '';
		display: block;
		height: 70px;
		border-radius: 0 0 10px 10px;
		background: linear-gradient(104.12deg, rgba(255, 255, 255, 0.48) 10.05%, rgba(255, 255, 255, 0.126) 89.95%);
		box-shadow: 0px 0px 50px -25px rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(100px);
		position: absolute;
		left: 15px;
		right: 15px;
		bottom: -5px;
	}
	.complaint-item__inner{
		padding: 15px 15px 19px;
	}
	.complaint-item__title{
		font-size: 26px;
		line-height: 30px;
		text-align: center;
		padding: 16px 15px 19px;
		margin: 0 -15px 15px;
	}
	.complaint-item__container{
		width: 500px;
		max-width: 100%;
		margin: 0 auto;
	}
	.complaint-item__item {
		padding: 15px 15px 14px;
		margin-bottom: 15px;
	}
	.complaint-item__head{
		background: none;
		padding: 2px 15px 4px 13px;
		margin: 0 -15px 7px;
		border: none;
		position: relative;
	}
	.complaint-item__head:before{
		content: '';
		display: block;
		width: 2px;
		height: 40px;
		background: #CF4633;
		position: absolute;
		top: -2px;
		left: 0;
	}
	.complaint-item__info{
		display: block;
	}
	.complaint-item__number{
		display: inline;
		font-size: 20px;
		line-height: 30px;
	}
	.complaint-item__title{
		display: inline;
		font-size: 22px;
		line-height: 30px;
		white-space: normal;
	}
	.complaint-item__date{
		display: none;
	}
	.complaint-item__content{
		height: auto;
		flex-direction: column-reverse;
		padding: 0;
		overflow: visible;
	}
	.complaint-item__content:after{
		top: auto;
		bottom: 0;
	}
	.complaint-item__image{
		width: calc(100% + 4px);
		margin: 0 -2px 8px;
	}
	.complaint-item__image a{
		width: 100%;
		height: 171px;
	}
	.complaint-item__text{
		height: 129px;
		overflow: hidden;
		position: relative;
	}
	.complaint-item__content:not(.opened) .project-complaint__text:after{
		content: '';
		display: block;
		height: 50px;
		background: linear-gradient(to bottom, rgba(245,247,249,0) 0%,rgba(245,247,249,1) 100%);
		position: absolute;
		top: 100px;
		left: 0;
		right: 0;
	}
	.complaint-item__more i{
		margin-left: 10px;
	}
}
@media only screen and (max-width: 411px){
	.complaint-catalog .page-title {
		font-size: 30px;
	}
	.complaint-catalog__container{
		max-width: calc(100% + 30px);
		margin: 0 -15px;
	}
	.complaint-write__title{
		font-size: 20px;
	}
	.complaint-write__btn span{
		height: 45px;
		font-size: 18px;
	}
	.complaint-write__btn span i{
		margin-left: 10px;
	}
	.complaint-best__title {
		padding: 9px 15px 11px;
		font-size: 23px;
	}
	.complaint-best__text{
		font-size: 16px;
		line-height: 20px;
	}
	.complaint-best__btn span{
		height: 40px;
		font-size: 15px;
	}
	.complaint-item__inner{
		padding: 15px;
	}
	.complaint-item__head{
		margin: 0 -15px 3px;
	}
	.complaint-item__number{
		margin-right: 10px;
	}
	.complaint-item__title{
		font-size: 20px;
	}
	.complaint-item__image a{
		height: 158px;
	}
}
@media only screen and (max-width: 383px){
	.complaint-catalog .page-title {
		padding: 8px 15px 12px;
		font-size: 28px;
	}
	.complaint-write {
		padding: 16px 15px 20px;
	}
	.complaint-write__title{
		font-size: 18px;
		margin-bottom: 9px;
	}
	.complaint-write__text{
		font-size: 14px;
		line-height: 20px;
		margin-bottom: 15px;
	}
	.complaint-write__btn span {
		height: 40px;
		font-size: 17px;
	}
	.complaint-best__title {
		padding: 9px 10px 11px;
		font-size: 22px;
	}
	.complaint-best__content{
		margin: 0 -7px;
	}
	.complaint-best__text{
		margin: 0 15px 0 0;
	}
	.complaint-best__btn span{
		width: 170px;
	}
	.complaint-item__image a{
		height: 144px;
	}
	.complaint-item__image{
		margin-bottom: 0;
	}
	
}
@media only screen and (max-width: 359px){
	.complaint-catalog .page-title {
		padding: 8px 10px 12px;
		font-size: 26px;
	}
	.complaint-catalog__container{
		max-width: calc(100%  + 40px);
		margin: 0 -20px;
	}
	.complaint-write__btn span{
		font-size: 15px;
	}
	.complaint-write__btn span i{
		margin-left: 15px;
	}
	.complaint-best__title{
		padding: 9px 10px 11px;
		font-size: 20px;
	}
	.complaint-best__btn span{
		width: 140px;
	}
	.complaint-item__head{
		padding: 2px 10px 4px;
		margin: 0 -10px 3px;
	}
	.complaint-item__number {
		margin-right: 6px;
	}
	.complaint-item__title {
		font-size: 18px;
	}
	.complaint-item__inner {
		padding: 15px 10px;
	}
	.complaint-item__image{
		margin-bottom: 8px;
	}
	.complaint-item__image a{
		height: 137px;
	}
	.complaint-item__text {
		height: 148px;
	}
	
}