.details {
    --padding: 10px;
    border: 1px solid #ffffff3b;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin: 8px 0;
}
.details + .details { margin-top: 15px; }

.details__title {
    --width: 15px;
    --height: 2px;
    --radius: 1px;
    --color: currentColor;
    margin: 0;
    padding: var(--padding) calc(var(--width) * 2) var(--padding) var(--padding);
    cursor: pointer;
    transition: all .2s ease-in-out;
    position: relative;
    color: white;
    font-style: normal;
    font-size: 18px;
}
.details__title:before,
.details__title:after {
    content: '';
    display: block;
    width: var(--width);
    height: var(--height);
    background-color: var(--color);
    position: absolute;
    border-radius: var(--radius);
    top: calc(50% - (var(--height) / 2));
    right: calc(var(--width) / 2);
    transition: all .2s ease-in-out;
}
.details__title:after { rotate: 90deg; }
.details__container[open] .details__title:before { rotate: 45deg; }
.details__container[open] .details__title:after { rotate: 135deg; }
.details__container[open] .details__title { background-color: #f3f3f300; }
.details__summary::marker { content: ''; }

.details__desc {
    display: grid;
    grid-template-rows: 0fr;
    transition: all .2s ease-in-out;
    overflow: hidden;
    padding-inline: var(--padding);
    pointer-events: none;
}
.details__container[open] + .details__desc {
    grid-template-rows: 1fr;
    padding-block: var(--padding);
}
.details__desc-inner {
    min-height: 0;
    color: #d3d3d3;
}

.section-faq { padding: 10px 0 40px; }

.heading-faq { margin-bottom: 1rem; }
.heading-faq h3 {
    text-align: center;
    font-size: 35px;
    font-weight: 700;
    color: white;
}
.heading-faq h3 span { color: #f4001a; }

.container-faq {
    background: url(https://www.ultrashieldx.com/assets/images/product/clear-ppf/benefits.jpg);
    padding: 70px !important;
    border-radius: 10px;
    background-position: center;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
}

@media(max-width:997px) {
    .heading-faq h2 { font-size: 29px; }
    .details__title { font-size: 15px; padding: 20px 15px; }
}
@media(max-width:500px) {
    .heading-faq h2 { font-size: 24px; }
    .heading-faq h3 { font-size: 30px; }
    .container-faq { padding: 60px 20px !important; }
    .details__title { font-size: 16px; }
}