.main {padding-block: 50px; background-color: var(--_c-light); --_c-light: #f2f2f2; --_fs-2xl: calc(var(--fs-2xl) + 16px);}
.main .title {text-align: center; margin-bottom: 20px;}
.main .title > :first-child {font-size: var(--_fs-2xl); font-weight: 700;}
.main ul {width: fit-content; display: flex; align-items: center; gap: 12px; margin-inline: auto;}
.main li {line-height: 1;}
.main li:first-of-type {position: relative;}
.main li:first-of-type::before {position: absolute; inset: 0 -6px 0 auto; width: 1px; height: 100%; background-color: #000; content: '';}
.main li a {font-weight: 600; line-height: 1;}
.main li a:hover {color: var(--c-primary);}

.faq {padding-block: 80px; --_c-gray: #757575;}
.faq .head {text-align: center; margin-bottom: 50px;}
.faq .head > :first-child {display: block; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 600; line-height: 1; color: var(--_c-gray); margin-bottom: 12px;}
.faq .head > :nth-child(2) {max-width: 520px; font-size: calc(var(--fs-lg, 30px) + 2px); font-weight: 800; line-height: 1.4; margin-inline: auto;}
.faq .wrapper {position: relative;}
.faq .accordions {position: absolute; top: 100px; right: 0; width: 100%; max-width: 60%; background-color: #fff; padding: 25px; margin: auto; max-height:596px; box-shadow:0 0 5px rgba(0,0,0,0.3); 
border-radius:10px 0 0 10px; }
.faq .accordion button {position: relative; width: 100%; font-weight: 700; line-height: 1.3; text-align: left; color: #000; padding: 16px 20px;}
.faq .accordion button::before {position: absolute; inset: 0; width: 6px; height: 11px; background: no-repeat center/cover url(https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets_new/images/accordian-tick.svg); margin-block: auto; content: '';}
.faq .accordion button:hover {color: var(--c-primary);}
.faq .accordion .panel {padding-inline: 20px;}
.faq .accordion .panel[aria-hidden="true"] {display: none;}
.faq .accordion .panel * {color: var(--_c-gray);}
.faq .btn__primary {width: 170px; font-size: calc(var(--fs-base, 16px) + 2px); line-height: 1.3; background-color: #000; color: #fff; margin: 40px 0 0 auto;}
.faq .accordion .panel p {margin-bottom: 10px;}
.faq .accordion .panel a {display: inline-block; color: var(--c-primary); text-decoration: underline;}
.faq .accordion .panel :where(ul, ol) {padding-left: 16px; margin-bottom: 10px;}
.faq .accordion .panel ul li {list-style: disc;}
.faq .accordion .panel ol li {list-style: decimal;}
.faq .accordion .panel li {line-height: 1.5;}
.faq .accordion .panel > :last-child {margin-bottom: 0;}
.faq .btn__primary:hover {background-color: var(--c-primary);}
	
@media only screen and (max-width: 1200px) {
/* FAQ */
.faq .image {max-width: 600px;}
.faq .accordions {max-width: 55%;}
}

@media only screen and (max-width: 991px) {
/* FAQ */
.faq {padding-block: 50px;}
.faq .wrapper {max-width: 90%; margin-inline: auto;}
.faq .image {max-width: 100%;}
.faq .accordions {position: static; max-width: 100%; padding: 12px 0; box-shadow:8px 0 12px rgba(0,0,0,0.1)}
.faq .accordion button {padding: 12px 16px;}
.faq .accordion .panel {padding-inline: 16px;}

}


@media only screen and (max-width: 575px) {
/* FAQ */
.faq {padding-block: 30px;}
.faq .head {margin-bottom: 20px;}
.faq .head > :first-child {margin-bottom: 6px;}
.faq .head > :nth-child(2) {line-height: 1.3;}
.faq .wrapper {max-width: 100%;}
.faq .accordion .panel p {margin-bottom: 7px;}
.faq .accordion .panel :is(ul, ol) {margin-bottom: 7px;}
.faq .btn__primary {max-width: 120px; font-size: var(--fs-base, 16px); padding-block: 10px; margin-top: 30px;}
}

@media only screen and (max-width: 475px) {
/* FAQ */
.faq .accordion button {padding-block: 10px;}
}