.complaint-page {background-color: var(--c-category); padding-top: 10px;}
.complaint-page .breadcrumb a { text-decoration: unset;}
.complaint-page .breadcrumb span {color: var(--c-hover);}
.complaint-page .wrapper {display: flex; align-items: start; gap: 30px; padding-bottom: 30px;}
.complaint-page .left-col {width: 100%; max-width: 295px; flex: none; background-color: #fff; padding: 20px 32px; box-shadow: 1px 1px 2px var(--c-content-br);}
.complaint-page .left-col label {width: fit-content; display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; padding-right: 10px; margin-bottom: 10px; position: relative;}
.complaint-page .left-col label::after {width: 40px; height: 2px; background-color: var(--c-hover-lg); position: absolute; right: -45px; top: 50%; transform: translateY(-50%); content: "";}
.complaint-page .categories-optn li {list-style: none; margin-bottom: 5px;}
.complaint-page .categories-optn a {font-size: 13px; color: var(--c-card-anchor); transition: color var(--trans-3);}
.complaint-page .categories-optn a:hover {color: var(--c-hover-lg);}
.complaint-page .categories-optn > :last-child a {color: var(--c-progress);}
.complaint-page .right-col {width: 100%; padding: 20px; border: 1px solid var(--c-complaint-br);}
.complaint-page .right-col > :first-child {font-size: 22px; font-weight: 700; text-transform: capitalize; color: var(--c-card-anchor); padding-bottom: 15px; margin-bottom: 40px; position: relative;}
.complaint-page .right-col > :first-child::after { content: ""; width: 70px; height: 3px; position: absolute; bottom: 0; left: 0; background: var(--c-heading-after);}
.complaint-page form {display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 30px;}
.complaint-page form label {display: block; font-size: 13px; color: #000; margin-bottom: 8px;}
.complaint-page form input, .complaint-page form textarea {height: 36px; font-size: 13px; background-color: #fff; padding: 6px 12px; border: 1px solid var(--c-input-complaint); border-radius: 3px;}
.complaint-page form > :nth-child(5) {grid-area: 3 / 1 / 4 / 3;}
.complaint-page form > :nth-child(6) {grid-area: 4 / 1 / 5 / 3;}
.complaint-page form textarea {height: 168px;}
.complaint-page form button {width: 100%; max-width: 150px; height: 32px; grid-area: 5 / 1 / 6 / 3; font-size: 13px; color: #fff; background-color: var(--c-primary); padding: 5px 15px; border-radius: 3px; margin-inline: auto; transition: color 0.1s; }
.complaint-page form button:hover {background-color: var(--c-hover-lg);}

@media only screen and (max-width: 1200px) {
    .complaint-page .left-col {padding: 20px;}
    .complaint-page .right-col > :first-child {margin-bottom: 15px;}
    .complaint-page form {gap: 15px;}
}

@media only screen and (max-width: 992px) {
    .complaint-page .wrapper {gap: 20px;}
    .complaint-page .left-col {max-width: 240px; padding: 20px 24px;}
    .complaint-page .right-col {padding: 20px 16px;}
    .complaint-page .right-col > :first-child {font-size: 20px; margin-bottom: 30px;}
}

@media only screen and (max-width: 768px) {
    .complaint-page .wrapper {flex-direction: column; gap: 20px; padding-bottom: 20px;}
    .complaint-page .left-col {max-width: 100%; width: 100%;}
    .complaint-page .right-col > :first-child {font-size: 18px; margin-bottom: 25px;}
}

@media only screen and (max-width: 576px) {
    .complaint-page {padding-top: 0;}
    .complaint-page .left-col {padding: 16px 20px;}
    .complaint-page .left-col label {margin-bottom: 12px;}
    .complaint-page .left-col label::after {display: none;}
    .complaint-page .right-col {padding: 16px 12px;}
    .complaint-page .right-col > :first-child {font-size: 16px; margin-bottom: 20px;}
    .complaint-page form {gap: 10px;}
    .complaint-page form label {font-size: 12px;}
    .complaint-page form input, .complaint-page form textarea {font-size: 12px;}
    .complaint-page form textarea {height: 130px;}
}

@media only screen and (max-width: 480px) {
    .complaint-page .left-col {padding: 15px;}
    .complaint-page .left-col label {margin-bottom: 7px;}
    .complaint-page .categories-optn li {margin-bottom: 2px;}
    .complaint-page form {grid-template-columns: 1fr;}
    .complaint-page form label {margin-bottom: 4px;}
    .complaint-page form > :nth-child(5), .complaint-page form > :nth-child(6) {grid-area: auto;}
    .complaint-page form button {width: 100%; grid-area: auto;}
}