.dc-faqs {
    background-color: #E6F2FF;
    /* background-image: url(https://www.tenet.ua/images/gpon/bg_gpon_faqs.svg); */
    background-image: url(/web/img/bg_faqs.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 2.8rem 0;
}
.dc-faqs > svg {
  position: absolute;
    left: 0;
    top: 0; 
}

.dc-faqs .content-text  {
    line-height: 1.6rem;
}
.dc-faqs h2{
    margin-top: 0;
}
.dc-faqs h3 {
    font-size: 25px;
    margin: 0;
}
.dc-faqs img {
    max-width: none;
}
.dc-faqs .join {
    max-width: 720px;
    margin: 2rem 0;
}
.collapse:not(.collapse-open):not(.collapse-close)>input[type=checkbox],
.collapse:not(.collapse-open):not(.collapse-close)>input[type=radio]:not(:checked),
.collapse:not(.collapse-open):not(.collapse-close)>.collapse-title {
    cursor: pointer;
    line-height: 1.75rem;
}
.join {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--rounded-btn, .5rem);
}
.join.join-vertical {
    flex-direction: column;
}
.join.join-vertical>:where(*:not(:first-child)) {
    margin-left: 0;
    margin-right: 0;
    margin-top: -1px;
}
:where(.collapse>input[type=checkbox]), :where(.collapse>input[type=radio]) {
    z-index: 1;
}
.w-full {
    width: 100%;
}
.dc-faqs .collapse-title.text-xl.font-medium {
    font-size: 22px;
    padding-left: 0;
    text-align: left;
}
.collapse:not(td):not(tr):not(colgroup) {
    visibility: visible;
}
.collapse-title, .collapse>input[type=checkbox], .collapse>input[type=radio], .collapse-content {
    grid-column-start: 1;
    grid-row-start: 1;
}
.collapse-content {
    text-align: left;
    visibility: hidden;
    grid-column-start: 1;
    grid-row-start: 2;
    min-height: 0;
    transition: visibility .1s;
    transition: padding .1s ease-out, background-color .1s ease-out;
    padding-left: 0;
    padding-right: 0;
    cursor: unset;
}
.border {
    border-width: 1px;
}
.dc-faqs .u-border-2.u-border-blue.u-btn-1{
    border-width: 0;
}

.dc-faqs input{
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

.dc-faqs .collapse {
    display: grid;
    overflow: hidden;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows .1s ease-in-out;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 6px;
    padding: 15px 20px;
    margin-bottom: 10px;
}
.dc-faqs .flex-row-gpon {
    display: flex;

}
.dc-faqs .collapse:last-child{
    margin-bottom: 0;
}
.dc-faqs .collapse:not(.collapse-close):has(>input[type=checkbox]:checked),
.dc-faqs .collapse:not(.collapse-close):has(>input[type=radio]:checked) {
    grid-template-rows: auto 1fr;
    z-index: 1;
}

.dc-faqs .content-text h3{
margin: 0 !important;
}
.dc-faqs .content-text p:first-child {
    margin-top: 0;
}
.dc-faqs .content-text p:last-child {
    margin-bottom: 0;
}
.dc-faqs .collapse>input[type=checkbox], .dc-faqs .collapse>input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0;
}
.collapse[open]>.collapse-content, .collapse-open>.collapse-content, .collapse:focus:not(.collapse-close)>.collapse-content, .collapse:not(.collapse-close)>input[type=checkbox]:checked~.collapse-content, .collapse:not(.collapse-close)>input[type=radio]:checked~.collapse-content {
    visibility: visible;
    min-height: fit-content;
}
.collapse:not(.collapse-close):has(>input[type=checkbox]:checked), .collapse:not(.collapse-close):has(>input[type=radio]:checked) {
    grid-template-rows: auto 1fr;
}
.collapse[open]>:where(.collapse-content), .collapse-open>:where(.collapse-content), .collapse:focus:not(.collapse-close)>:where(.collapse-content), .collapse:not(.collapse-close)>:where(input[type=checkbox]:checked~.collapse-content), .collapse:not(.collapse-close)>:where(input[type=radio]:checked~.collapse-content) {
    padding-bottom: 1rem;
    transition: padding .1s ease-out, background-color .1s ease-out;
}
.dc-faqs .collapse-title {
    position: relative;
}
.dc-faqs .collapse-title, :where(.collapse>input[type=checkbox]), :where(.collapse>input[type=radio]) {
    width: 100%;
    padding: 0;
    /* padding-inline-end: 1rem; */
    min-height: 1.75rem;
    transition: background-color .1s ease-out;
}
.dc-faqs .collapse[open]>:where(.collapse-content),
.dc-faqs .collapse-open>:where(.collapse-content),
.dc-faqs .collapse:focus:not(.collapse-close)>:where(.collapse-content),
.dc-faqs .collapse:not(.collapse-close)>:where(input[type=checkbox]:checked~.collapse-content),
.dc-faqs .collapse:not(.collapse-close)>:where(input[type=radio]:checked~.collapse-content) {
    padding-top: 1rem;
    padding-bottom: 0;
    padding-left: 0;
    transition: padding .1s ease-out, min-height .1s ease-out, background-color .1s ease-out;
}

.dc-faqs .collapse[open].collapse-arrow>.collapse-title:after, 
.dc-faqs .collapse-open.collapse-arrow>.collapse-title:after, 
.dc-faqs .collapse-arrow:focus:not(.collapse-close)>.collapse-title:after, 
.dc-faqs .collapse-arrow:not(.collapse-close)>input[type=checkbox]:checked~.collapse-title:after, 
.dc-faqs .collapse-arrow:not(.collapse-close)>input[type=radio]:checked~.collapse-title:after {
    transform: rotate(225deg);
    top: 0.3rem;
}
.dc-faqs .collapse-arrow>.collapse-title:after {
    position: absolute;
    display: block;
    height: .94rem;
    width: .94rem;
    transform: rotate(45deg);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(0,0,.2,1);
    transition-duration: .15s;
    transition-duration: .2s;
    top: 0;
    inset-inline-end: .6rem;
    content: "";
    transform-origin: 75% 75%;
    box-shadow: 3px 3px #aaa;
    pointer-events: none;
}

.video-play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    display: flex;
    height: 78px;
    width: 78px;
    border-color: transparent;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    --tw-bg-opacity: 1;
    background-color: rgb(0 130 255 / var(--tw-bg-opacity));
    animation: shadow-pulse 1.5s infinite;
}
.video-play-btn svg {
    height: 1.5rem;
    width: 1.25rem;
    fill: #fff;
    --tw-text-opacity: 1;
    color: rgb(0 123 255 / var(--tw-text-opacity));
}
.video-play-btn:after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    --tw-content: "";
    content: var(--tw-content);
    animation: shadow-pulse-2 1.4s infinite;
}
@keyframes shadow-pulse {
    0% {
        box-shadow: 0 0 #0066D3b3
    }

    70% {
        box-shadow: 0 0 0 35px #0066D300
    }

    to {
        box-shadow: 0 0 #0066D300
    }
}
@keyframes shadow-pulse-2 {
    0% {
        box-shadow: 0 0 #0066D3b3
    }

    70% {
        box-shadow: 0 0 0 20px #0066D300
    }

    to {
        box-shadow: 0 0 #0066D300
    }
}


@media (max-width: 1180px)  {
    .dc-faqs .join {
        width: 88vw;
    }
}

@media (max-width: 1068px) {
    .dc-faqs .join {
        width: 600px;
    }
    .dc-faqs .flex-row-gpon {
        flex-direction: column;
        align-items: center;
    }
    .dc-faqs .content-text {
        max-width: max-content;
    }
    .dc-faqs .collapse>input[type=radio],
    .collapse-title.text-xl.font-medium {
        max-width: inherit;
    }
    .u-gpon-promo-consent .imagePromo, .u-gpon-promo-consent .u-video-contain.u-video-1 {
        position: relative;
        margin: 2rem 0 1rem 0;
        top: auto;
        flex: auto;
    }
}

@media (max-width: 768px) {

    .dc-faqs .collapse,
    .dc-faqs .collapse>input[type=radio], .collapse-title.text-xl.font-medium,
    .content-text {
        max-width: 600px;
    }
}
@media (max-width: 767px) {
    .dc-faqs .collapse,
    .dc-faqs .collapse>input[type=radio], .collapse-title.text-xl.font-medium, .dc-faqs .u-video video,
    .content-text, .u-gpon-promo-consent .imagePromo, .u-gpon-promo-consent .u-video-contain.u-video-1,
    .dc-faqs .join {
        max-width: 540px;
        width: 100%;
    }
    .dc-faqs .join {
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 575px) {
    .dc-faqs .collapse-title.text-xl.font-medium {
        font-size: 1.1rem;
        padding-right: 2rem;
    }
    .dc-faqs .collapse, .dc-faqs .collapse>input[type=radio], .collapse-title.text-xl.font-medium, .dc-faqs .u-video video, .content-text, .u-gpon-promo-consent .imagePromo, .u-gpon-promo-consent .u-video-contain.u-video-1, .dc-faqs .join {
        max-width: 87vw;
    }
    .dc-faqs img,
    .dc-faqs .u-video video,
    .u-gpon-promo-consent .imagePromo{
        height: 60vw;
    }
    .dc-faqs h2{
        padding-left: 1rem;
        padding-right: 1rem;
    }
}