.faq-image-section {
    background-color: var(--color-secondary);
    padding-block-start: clamp(50px, 15vw, 270px);
    padding-block-end: clamp(50px, 15vw, 289px);
    overflow: hidden;
}

.faq-sec-right-shape {
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 30%;
    pointer-events: none;
    background-image: url('data:image/svg+xml,<svg width="518" height="1885" viewBox="0 0 518 1885" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23filter0_f_335_232)"><ellipse cx="713" cy="942.5" rx="229" ry="458.5" fill="%23005B9B"/></g><defs><filter id="filter0_f_335_232" x="0" y="0" width="1426" height="1885" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="242" result="effect1_foregroundBlur_335_232"/></filter></defs></svg>');
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
}

.faq-image-section::before,
.faq-image-section::after {
    pointer-events: none;
    z-index: 0;
}

.faq-image-section::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -1px;
    height: 160px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-image: url('data:image/svg+xml,<svg width="1922" height="203" viewBox="0 0 1922 203" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_57996_238" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1922" height="203"><rect width="1921.27" height="202.226" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_57996_238)"><rect x="0.523438" y="0.625" width="1920" height="201" fill="white"/><path d="M1217.73 110.783L1920.52 7.625V197.625H-267.477V110.783L744.644 63.9408L1217.73 110.783Z" fill="%23005B9B" stroke=""/><path d="M619.487 109.755L0.523438 0.625V201.625H1927.52V109.755L1036.14 60.2012L619.487 109.755Z" fill="%239ED3EF" stroke=""/></g></svg>');
}

.faq-image-section::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -2px;
    height: 110px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    background-image: url('data:image/svg+xml,<svg width="1920" height="195" viewBox="0 0 1920 195" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_57996_230" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="195"><rect width="1920" height="194.094" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_57996_230)"><rect width="1920" height="194.094" fill="white"/><path d="M689.798 90.9355L-13 194.093L-13 4.09332L2175 4.09351L2175 90.9356L1162.88 137.778L689.798 90.9355Z" fill="%23005B9B"/><path d="M1324.01 91.9632L1960 201.093L1960 0.0934906L-20 0.0933175L-20 91.963L895.904 141.517L1324.01 91.9632Z" fill="%239ED3EF"/></g></svg>');
}

.faq-image-left-col {
    width: 54.4%;
}

.faq-image-right-col {
    width: 45.1%;
}

.faq-sec-small-title {
    text-transform: capitalize;
    margin-bottom: 35px;
}

.faq-question {
    font-size: var(--font-size-body);
    margin: 0;
}

.faq-toggle {
    border: none;
    color: var(--color-white);
    padding: 14px 60px 14px 23px;
    background-color: var(--color-primary);
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background-image: url('data:image/svg+xml,<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="10" width="23" height="3" fill="white"/><rect x="13" width="23" height="3" transform="rotate(90 13 0)" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 23px;
    font-weight: var(--fw-500);
}

.faq-toggle.is-active {
    background-image: url('data:image/svg+xml,<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="10" width="23" height="3" fill="white"/></svg>');
}

/* .faq-answer {
    padding: 28px 18px 20px 23px;
    display: none;
} */
.faq-answer {
    padding: 22px 18px 20px 23px;
    display: none;
}

.faq-item:not(:last-child) {
    margin-block-end: 8px;
}

.faq-image-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    align-items: start;
    padding-top: 20px;
}

.faq-image-item.is-main {
    grid-column: 1 / 8;
    grid-row: 1;
    max-width: 425px;
    width: 100%;
}

.faq-image-item.is-overlay {
    grid-column: 5 / 12;
    grid-row: 1;
    transform: translate(-17px, 143px);
    border-block-start: 22px solid var(--color-secondary);
    border-inline-start: 24px solid var(--color-secondary);
    z-index: 2;
    max-width: 431px;
}

.faq-image-item {
    overflow: hidden;
}

.faq-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(48%);
}

@media screen and (max-width:1600px) {
    .faq-image-section {
        padding-block-start: clamp(50px, 12vw, 270px);
        padding-block-end: clamp(50px, 12vw, 289px);
    }
}

@media screen and (max-width:1440px) {

    .faq-image-left-col,
    .faq-image-right-col {
        width: 50%;
    }

    .faq-sec-title {
        margin-block-end: 60px;
    }

    .faq-image-item.is-overlay {
        border-block-start: 20px solid var(--color-secondary);
        border-inline-start: 20px solid var(--color-secondary);
    }
}

@media screen and (max-width:1360px) {
    .faq-sec-title {
        margin-block-end: 50px;
    }

    .faq-sec-small-title {
        margin-bottom: 30px;
    }

    .faq-image-grid {
        padding-top: 0;
    }
}

@media screen and (max-width:1200px) {
    .faq-sec-title {
        margin-block-end: 36px;
    }
}

@media screen and (max-width:991px) {

    .faq-image-left-col,
    .faq-image-right-col {
        width: 100%;
    }

    .faq-image-section {
        padding-block-start: clamp(100px, 12vw, 270px);
        padding-block-end: clamp(160px, 12vw, 289px);
    }

    .faq-image-right-col {
        order: -1;
    }

    .faq-sec-small-title {
        margin-bottom: 26px;
    }

    .faq-image-grid {
        padding-top: 0;
        max-width: 500px;
        margin-inline: auto;
        margin-block-start: 30px;
    }

    .faq-image-item.is-overlay {
        transform: translate(0px, 60px);
        grid-column: 6 / 13;
    }

    .faq-image-section::before,
    .faq-image-section::after {
        height: 100px;
    }

}

@media screen and (max-width:768px) {
    .faq-answer {
        padding: 22px 18px 20px 20px;
    }

    .faq-image-item.is-overlay {
        border-block-start: 15px solid var(--color-secondary);
        border-inline-start: 15px solid var(--color-secondary);
    }

    .faq-image-item.is-overlay {
        transform: translate(0px, 50px);
    }
}

@media screen and (max-width:640px) {
    .faq-toggle {
        background-size: 20px;
    }
}