/* {{{ FAQ }}} */
.faq {padding: 0 var(--mx-section) 5rem; background-color: #fff; border-radius: 0 0 var(--br-section) var(--br-section); margin: 0; overflow: hidden; transition: var(--trans-6);}
.faq .container {max-width: 1384px;}
.faq .head {text-align: center; margin-bottom: 5.5rem; transition: var(--trans-4);}
.faq .head > :first-child {font-family: var(--ff-tertiary); font-size: var(--fs-xl, 50px); margin-bottom: 20px;}
.faq .rows {display: grid; grid-template-columns: 30% 1fr; gap: 0.75rem 1.5rem; transition: var(--trans-4);}
.faq .rows:not(:last-of-type) {margin-bottom: 4.75rem;}
.faq .rows > :first-child {font-size: var(--fs-md, 25px);}
.faq form {position: relative; width: 100%; max-width: 616px; margin-inline: auto;}
.faq form input {width: 100%; font-size: var(--fs-sm, 20px); color: #000; padding: 12px 54px 12px 30px; border: 1px solid var(--_c-dark); border-radius: 100px;}
.faq form input::placeholder {color: var(--_c-dark);}
.faq form button {position: absolute; inset: -2px 10px 0 auto; height: fit-content; padding: 10px; margin-block: auto;}
.faq .accordion {border: 1px solid var(--c-dark); border-radius: 100px;}
.faq .accordion:not(:last-of-type) {margin-bottom: 1.5rem;}
.faq .accordion:has(.collapse.show) {border-radius: 30px;}
.faq .accordion button {position: relative; width: 100%; display: block; font-family: var(--ff-primary); font-size: var(--fs-sm, 18px); font-weight: 500; text-align: left; background-color: var(--_c-sky-lght); color: var(--_c-black-700); padding: 1.25rem 5.3rem 1.25rem 1.875rem; border-radius: 100px;}
.faq .accordion:has(.collapse.show) button {border-radius: 30px 30px 0 0;}
.faq .accordion button::after {position: absolute; inset: 0 1.875rem 0 auto; width: 2.25rem; height: 2.25rem; background: no-repeat center/cover url('../images/icons/down-arrow.png'); margin-block: auto; z-index: 2; content: '';}
.faq .accordion:not(:has(.collapse.show)) button:hover {border-radius: 100px; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 10%);}
.faq .accordion:has(.collapse.show) button::after {transform: rotate(180deg); transition: var(--trans-4);}
.faq .accordion .collapse {max-height: 0; display: none; padding-block: 1.5rem 2rem; margin-inline: 1.875rem 5rem; opacity: 0; visibility: hidden; transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;}
.faq .accordion .collapse.show {max-height: 100%; opacity: 1; visibility: visible; display: block;}
.faq .collapse h3 {font-size: var(--fs-sm, 18px); font-weight: 500; color: var(--c-primary-drk-900); margin-bottom: 0.75rem;}
.faq .collapse p {font-size: var(--fs-sm, 18px); color: var(--_c-black-700);}
.faq .collapse :is(p, li) strong {font-weight: 500;}
.faq .collapse p:not(:last-child) {margin-bottom: 2rem;}
.faq .collapse :is(ul, ol) {padding-left: 2rem; margin-bottom: 1rem;}
.faq .accordion.compact .collapse :is(ul, ol, p:not(:last-child)) {margin-bottom: 0.75rem;}
.faq .accordion.compact .collapse h3 {margin-bottom: 0.375rem;}
.faq .accordion.compact .collapse li:not(:last-of-type) {margin-bottom: 2px;}
.faq .collapse ul li {list-style: disc;}
.faq .collapse ol li {list-style: decimal;}
.faq .collapse li:not(:last-of-type) {margin-bottom: 0.5rem;}
.faq .collapse .indent {margin: 0 0 2rem 4rem;}
.faq .collapse .indent > h4:first-child {position: relative; font-size: var(--fs-sm, 18px); font-weight: 500; line-height: 1.3; padding-left: 1rem; margin-bottom: 0.5rem;}
.faq .collapse .indent > h4:first-child::before {content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; height: 5px; background-color: var(--c-dark); border-radius: 50%; margin-block: auto;}

.faq .collapse .installation {display: grid; grid-template-columns: 1fr; gap: 0.5rem 6.25rem; padding-left: 6%;}
.faq .collapse .installation:not(:last-child) {margin-bottom: 1.875rem;}
.faq .collapse .installation > :first-child {position: relative; font-size: var(--fs-sm, 1.125rem); font-weight: 500; line-height: 1.4; color: var(--_c-black-700); padding-left: 15px;}
.faq .collapse .installation > :first-child::before {content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; height: 6px; background-color: #000; border-radius: 50%; margin-block: auto;}
.faq .installation .device > p:not(:last-child) {margin-bottom: 2rem;}

/* PAYMENTS */
.payments {display: none;}

@media only screen and (max-width: 1200px) {
	.faq .rows {grid-template-columns: 20% 1fr;}
	.faq .rows:not(:last-of-type) {margin-bottom: 4rem;}
}

@media only screen and (max-width: 991px) {
    .faq {padding-bottom: 4rem;}
    .faq .head {margin-bottom: 3.125rem;}
	.faq .rows {grid-template-columns: 15% 1fr;}
	.faq .collapse .indent {margin-left: 3rem;}
}

@media only screen and (max-width: 767px) {
    .faq {padding-bottom: 3rem;}
	.faq .rows {grid-template-columns: 1fr;}
	.faq .rows:not(:last-of-type) {margin-bottom: 3rem;}
}

@media only screen and (max-width: 575px) {
    .faq {padding-bottom: 3rem;}
    .faq .container {padding: 0;}
    .faq .head {margin-bottom: 2.25rem;}
    .faq .head > :first-child {margin-bottom: 10px; line-height:35px; }
    .faq .rows {gap: 1.5rem;}
	.faq .rows:not(:last-of-type) {margin-bottom: 2rem;}
	.faq .rows > :first-child {line-height: 1;}
    .faq form input {padding: 0.5rem 2.75rem 0.5rem 1.5rem;}
    .faq form button img {width: 1.25rem;}
	.faq .accordion:not(:last-of-type) {margin-bottom: 1rem;}
    .faq .accordion button,
    .faq .collapse h3,
    .faq .collapse p {font-size: var(--fs-sm); line-height:28px; }
    .faq .accordion button {padding: 1rem 3.75rem 1rem 1.25rem;}
    .faq .accordion button::after {right: 1rem; width: 1.875rem; height: 1.875rem;}
    .faq .accordion .collapse {padding-block: 1rem 2.25rem;}
    .faq .accordion .collapse {margin-inline: 1rem;}
	.faq .collapse .indent {margin: 0 0 1rem 2rem;}
    .faq .collapse p:not(:last-child) {margin-bottom: 1.5rem;}
}


@media only screen and (max-width: 475px) {
	.faq .collapse .indent {margin-left: 1rem;}
}