/* product details faqs */

.faqs .faqs-wrapper, .faqs .quections-wrapper {
    border-radius: 24px;
    background-color: #fff;
    padding: 22px;
    margin-bottom: 20px;
    border: 1px solid #F3F3F3;
}
.faqs .title-wrapper {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}
.faq-icon svg {
    vertical-align: bottom; 
}
.faq-icon svg path {
    fill: #1A1A1A;
}
h4.qa_title {
    font-size: 18px;
    font-weight: 600;
    padding-left: 5px;
}
.faqs .title-wrapper h2.title {
    width: 100%;
    margin: 7px 0 18px;
    font-size: 22px;
    font-weight: 600;
    color: var(--green);
    line-height: 28px;
}
/* .faqs .title {
    color: #174E76;
    -webkit-font-smoothing: antialiased;
} */
.faqs .faqs-form input {
    width: 100%;
    border-radius: 12px;
    outline: 0;
    font-size: 16px;
    border: 1px solid #CED5D9;
    padding: 10px 15px;
    height: 44px;
    font-weight: 400;
}
.faqs .faqs-form input::placeholder {
    color: #878D99;
}
.faqs .btn.question-btn {
    margin-top: 12px;
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
}
.faqs .quections-wrapper .sub-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
}
.faqs .quections-wrapper .quection-answer-block {
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 6px;
    padding-top: 18px;
}
.faqs .quections-wrapper .block {
    display: flex;
    gap: 10px;
}
.faqs .quections-wrapper .block span.q, 
.faqs .quections-wrapper .block span.a,
.faqs .quections-wrapper .quection.block p,
.faqs .quections-wrapper .answer.block p {
    font-size: 16px;
    font-weight: 500;
} 
.faqs .quections-wrapper .block span.q, .faqs .quections-wrapper .block span.a {
    display: block;
    text-transform: uppercase;
}
.faqs .quections-wrapper .answer.block * {
    color: #878D99;
}
.faqs .seprate.view-btn {
    text-align: center;
    margin-top: 10px;
}
.highlight {
    background-color: #FFFD01;
    color: black;
}
/* faqs popup  */
.faqs-popup {
    display: none;
    opacity: 0;
    visibility: hidden;
}
.faqs-popup.faq-popup-active {
    display: block;
    opacity: 1;
    visibility: visible;
}
.faqs-popup .row {
    width: 100%;
    display: block;
}
.faqs-popup .help-block {
    text-align: left;
}
.faqs-popup .btn-wrapper {
    text-align: left;
}
.faqs-popup textarea {
    width: 100%;
}
/* seprate faq */

.faqs-list .faqs-list-wrapper {
    background-color: #fff;
    padding: 0 22px;
    margin-top: 30px;
    margin-bottom: 20px;
    border: 1px solid #F3F3F3;
    border-radius: 24px;
}
.faqs-list .product-block-title {
    color: #1A1A1A;
    padding-bottom: 7px;
    font-size: 18px;
}
.faqs-list .product-img-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: 15px;
}
.faqs-list .product-content {
    width: calc(100% - 410px);
    padding: 22px;
    margin-left: 10px;
    border-left: 1px solid #F3F3F3;
}
.faqs-list .product-img-content .faq-product-img {
    min-width: 154px;
    display: block;
    position: relative;
    padding-bottom: 180px;
}
.faqs-list .product-img-content .faq-product-img img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    margin-inline: auto;
    max-width: 100%;
    object-fit: contain;
}
.faqs-list .product-title {
    padding-bottom: 14px;
    width: 100%;
    font-size: 22px;
    font-weight: 600;
    color: var(--green);
    line-height: 28px;
}
.faqs-list .faqs-form {
    max-width: 920px;
}
.faqs-list .search-input-icon {
    position: relative;
    display: flex;
}
.faqs-list .search-input-icon button {
    padding: 0;
    background: no-repeat;
    border: 0;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -44px;
    cursor: pointer;
    background-image: url(/assets/img/search-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
    filter: invert(0.6);
}
.faqs-list .faqs-product-buttons {
    min-width: 134px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faqs-product-buttons .button {
    border: none;
    width: 100%;
    border-radius: 3px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    text-decoration: none;
    padding: 12px;
    transition: 0.3s all;
}
.faqs-product-buttons .view-btn:hover {
    background-color: var(--blue);
}
.faqs-product-buttons .view-btn {
    background-color: #689769;
    color: #fff;
}
.faqs-product-buttons .enquire-btn {
    background-color: #e5e5e5;
    color: #3D3D3D;
}
.faqs-product-buttons .enquire-btn:hover {
    background-color: #d7d7d7;
}
.faqs-product-buttons .view-icon, .faqs-product-buttons .enquire-icon {
    display: block;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
    min-height: 20px;
    min-width: 20px;
}
.faqs-product-buttons .view-icon {
    background-image: url(/assets/img/view-white.svg);
}
.faqs-product-buttons .enquire-icon {
    background-image: url(/assets/img/inquiry.svg);
}
.faqs-list .popup-btn.btn {
    margin-top: 0;
}
.faqs-list .popup-btn.btn:hover {
    background-color: #103d5e;
}
.product-directory-details .faqs .container {
    padding: 0;
}
.faqs .quections-wrapper {
    margin: 0;
}
.quection.block * {
    font-weight: 600 !important;
}
.faqs .quections-wrapper .quection.block p {
    margin-bottom: 0;
}
.quection.block {
    margin-bottom: 8px;
}
.faqs.product-directory-list {
    margin-top: 70px;
}
.overlay-input-text label {
    display: none;
}
.faqs-product-buttons .btn {
    margin: 0 !important;
}
.faqs-product-buttons .btn svg {
    width: 24px;
}
.faqs-product-buttons .btn svg path, .faqs-product-buttons .btn svg circle {
    stroke: #fff;
}
.faqs-product-buttons .btn:hover svg path, .faqs-product-buttons .btn:hover svg circle {
    stroke: var(--green);
}
.faqs-product-buttons .btn.secondary svg path {
    stroke: var(--green);
}
.faqs-product-buttons .btn.secondary:hover svg path {
    stroke: #fff;
}
.faqs-product-buttons .btn.secondary:hover {
    background: #2AA466;
    color: #fff;
}
.faqs-list.faqs .quections-wrapper .quection-answer-block:first-child {
    padding-top: 0;
}
/* new dr */

@media only screen and (max-width: 1023px) {
    .faqs .title-wrapper h2.title {
        font-size: 20px;
        margin: 5px 0 15px;
    }
    .faq-icon svg {
        width: 30px;
        height: 30px;
    }
    h4.qa_title {
        font-size: 17px;
        font-weight: 600;
        padding-left: 5px;
    }
    .faqs .quections-wrapper .sub-title {
        font-size: 20px;
    }
    .faqs .quections-wrapper .block {
        display: flex;
        gap: 6px;
    }
    .faqs .quections-wrapper .block span.q, .faqs .quections-wrapper .block span.a, .faqs .quections-wrapper .quection.block p, .faqs .quections-wrapper .answer.block p {
        font-size: 15px;
        line-height: 24px;
    }
}

@media only screen and (max-width: 991px) {
    .faqs-list .product-img-content .faq-product-img {
        min-width: 120px;
        padding-bottom: 120px;
    }
    .faqs-list .product-content {
        width: calc(100% - 365px);
    }
}
@media only screen and (max-width: 767px) {
    .faqs-popup .popup {
        width: 90%;
    }
    .faqs .quections-wrapper .block {
        gap: 8px;
    }
    .faqs .quections-wrapper .quection-answer-block {
        padding-top: 12px;
    }
    .faqs-list .product-img-content .faq-product-img {
        display: none;
    }
    .faqs-list .product-content {
        border: 0;
        padding: 0;
        width: calc(100% - 180px);
        margin: 0 20px 0 0;
    }
    .faqs-list .product-title {
        font-size: 20px;
    }
    .product-directory-list .title {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .product-directory-list .quections-wrapper .sub-title {
        font-size: 20px;
    }
    .faqs .btn.question-btn {
        padding: 0 15px;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
    }
    .faqs .faqs-form input {
        font-size: 15px;
        padding: 6px 15px;
        height: 40px;
    }
    .product-directory-list .faqs-wrapper, .product-directory-list .quections-wrapper {
        padding: 20px;
    }
    .faqs .title-wrapper h2.title {
        font-size: 20px;
    }
    h4.qa_title {
        font-size: 16px;
        padding-left: 3px;
    }
    .faqs-list .faqs-list-wrapper, .faqs .quections-wrapper {
        padding: 20px;
    }
    .faqs-list .product-img-content {
        gap: 0;
    }
    .faqs-list .faqs-product-buttons {
        min-width: 160px;
    }
}
@media only screen and (max-width: 540px) {
    .faqs .faqs-form input {
        height: 42px;
        padding: 0 12px 0 12px;
    }   
    .faqs-list .product-content {
        padding-right: 0;
        padding-bottom: 12px;
        width: 100%;
        margin: 0;
    }
    .faqs-list .faqs-form {
        max-width: 100%;
    }
    .faqs-list .product-img-content {
        flex-direction: column;
    }
    .faqs-list .faqs-product-buttons {
        flex-direction: row;
        min-width: 100%;
    }
    .faqs-product-buttons .button {
        padding-left: 8px;
        padding-right: 8px;
    }
    .faqs-product-buttons .view-icon, .faqs-product-buttons .enquire-icon {
        min-height: 16px;
        min-width: 16px;
    }
    .faqs-product-buttons .enquire-icon {
        background-size: 14px;
    }
}
@media only screen and (max-width: 479px) {
    .faqs .faq-icon svg {
        height: 26px;
        width: 26px;
    }
    .faqs .title-wrapper {
        gap: 8px;
    }
    .faqs .faq-icon {
        padding-top: 6px;
    }
    /* product directory list faqs */
    .product-directory-list .title {
        font-size: 22px;
    }
    .quection.block {
        margin-bottom: 5px;
    }
    .faqs .btn.question-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}
@media only screen and (max-width: 425px) {
    .faqs-list .faqs-product-buttons {
        gap: 8px;
    }
    .faqs-product-buttons .button {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
@media only screen and (max-width: 400px) {
    .faqs-list .faqs-product-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 374px) {
    .comment-wrapper .container {
        padding: 18px;
    }
    .comment-wrapper .faqs-wrapper, .comment-wrapper .faqs .quections-wrapper {
        padding: 20px;
    }
    .comment-wrapper .faqs-wrapper {
        margin-bottom: 18px;
    }
    .related .product-heading {
        font-size: 22px;
    }
    .related-products-section .slick-arrow {
        height: 42px;
        width: 42px;
        border-radius: 8px;
    }
    .related-products-section .slick-arrow.slick-prev {
        right: 70px;
    }
    .product-heading-slider-arrows {
        margin-bottom: 0;
    }
}