/* Default Design */
.faq-container-main.default .accr{padding: 10px;}
.faq-container-main.default .accr { list-style-type: none; padding-bottom: 10px;}
.faq-container-main.default .jhk-faq-title { font-size: 20px; margin: 0; font-weight: 400; color: #000; width: 100%;}
.faq-container-main.default .jhk-faq-content { display: none; margin-top: 10px; color: #000; padding: 10px; font-size: 15px; }
.faq-container-main.default .plus-minus-toggle { cursor: pointer; height: 4px; position: relative; width: 18px; &:before,&:after{ background: #888; content: ''; height: 3px; left: 0; position: absolute; top: 0; width: 17px; transition: transform 500ms ease; } &:after { transform-origin: center; } &.collapsed { &:after { transform: rotate(90deg); } &:before { transform: rotate(180deg); } }}
.faq-container-main.default .title-toggle-main { background-color: #f2f2f2; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #d9d9d9;}
/******************/

/* Design One */
.faq-container-main.vibrant-color .faq-contents-main{margin-bottom: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);}
.faq-container-main.vibrant-color .faq-contents-main .jhk-faq-title-main{display: flex; align-items: center; font-size: 20px;}
.faq-container-main.vibrant-color .faq-contents-main .jhk-faq-title-main .jhk-faq-title-number{width: 10%; text-align: center; color: #fff; padding: 10px; margin: 0;}
.faq-container-main.vibrant-color .faq-contents-main .jhk-faq-title-main .jhk-faq-title{width: 100%; padding: 10px; color: #fff; margin: 0;}
.faq-container-main.vibrant-color .faq-contents-main .jhk-faq-content{padding: 10px;}
.faq-container-main.vibrant-color .faq-contents-main .jhk-faq-content-main{display: flex; padding: 10px; align-items: center;}
.faq-container-main.vibrant-color .faq-contents-main .jhk-faq-content-main .jhk-faq-content-image{padding: 10px; max-height: 300px; max-width: 300px;}
/******************/

/* Design Two */
.faq-container-main.subtle-tones .faq-contents-main{margin-bottom: 20px;}
.faq-container-main.subtle-tones .faq-contents-main .jhk-faq-title-main{display: flex; align-items: center; padding: 5px 15px; font-weight: 600; width: 80%; margin: 0px 20px; background-color: #ffd236; border-radius: 0px 22px 22px 0px; position: relative; z-index: 2;}
.faq-container-main.subtle-tones .faq-contents-main .jhk-faq-title-main .jhk-faq-title-number{font-size: 25px; width: 7%; text-align: center;}
.faq-container-main.subtle-tones .faq-contents-main .jhk-faq-title-main .jhk-faq-title{font-size: 16px; width: 100%;}
.faq-container-main.subtle-tones .faq-contents-main .jhk-faq-content-main{position: relative; z-index: 1; background-color: #e3f8f3; margin-top: -15px; padding: 30px 15px; width: 90%; display: flex;}
.faq-container-main.subtle-tones .faq-contents-main .jhk-faq-content-main .jhk-faq-ans{font-weight: 600; width: 10%; text-align: center; font-size: 25px; color: #1d317d;}
.faq-container-main.subtle-tones .faq-contents-main .jhk-faq-content-main .jhk-faq-content{width: 100%;}
/******************/

/* Design Three */
.faq-container-main.simple .faq-contents-main{margin-bottom: 30px;}
.faq-container-main.simple .faq-contents-main .jhk-faq-title-main{display: flex; align-items: center; font-weight: 600; }
.faq-container-main.simple .faq-contents-main .jhk-faq-title-main .jhk-faq-title-number{font-size: 18px; background-color: #453ab2; color: #fff; padding: 10px; width: 10%; text-align: center;}
.faq-container-main.simple .faq-contents-main .jhk-faq-title-main .jhk-faq-title{font-size: 18px; width: 100%; background-color: #c8c5f0; margin: 0px 0px 0px 10px; padding: 10px;}
.faq-container-main.simple .faq-contents-main .jhk-faq-content-main{background-color: #c8c5f0; margin-top: 10px; padding: 15px;}

/******************/

/* Responsive */
@media (max-width: 767px){
    .faq-container-main.default .jhk-faq-title{font-size: 16px;}
    .faq-container-main.default .jhk-faq-content{font-size: 14px;}
    
    .faq-container-main.simple .jhk-faq-title-main .jhk-faq-title{font-size: 16px;}
    .faq-container-main.simple .jhk-faq-title-main .jhk-faq-title-number{font-size: 16px; width: 8%;} 
    .faq-container-main.simple .jhk-faq-content-main{font-size: 14px;}

    .faq-container-main.subtle-tones .jhk-faq-title-main .jhk-faq-title-number{font-size: 20px;}
    .faq-container-main.subtle-tones .jhk-faq-content-main .jhk-faq-ans{font-size: 20px;}
    .faq-container-main.subtle-tones .jhk-faq-content-main .jhk-faq-content{font-size: 14px;}

    .faq-container-main.vibrant-color .jhk-faq-title-main .jhk-faq-title{font-size: 16px;}
    .faq-container-main.vibrant-color .jhk-faq-title-main .jhk-faq-title-number{font-size: 16px; width: 8%;}
    .faq-container-main.vibrant-color .jhk-faq-content{font-size: 14px; padding: 7px;} 
    
}

@media (max-width: 575px){
       
    .faq-container-main.simple .faq-contents-main{margin-bottom: 15px; align-items: unset;}
    .faq-container-main.simple .jhk-faq-title-main .jhk-faq-title{margin: 0px 0px 0px 5px; padding: 8px; line-height: normal;}
    .faq-container-main.simple .jhk-faq-title-main .jhk-faq-title-number{padding: 8px; width: auto; line-height: normal;}

    .faq-container-main.subtle-tones .jhk-faq-title-main .jhk-faq-title{line-height: normal;}
    .faq-container-main.subtle-tones .jhk-faq-title-main{width: 100%; margin: auto; padding: 5px 10px; align-items: flex-start;}
    .faq-container-main.subtle-tones .jhk-faq-content-main{padding: 30px 10px;}
    .faq-container-main.subtle-tones .jhk-faq-title-main .jhk-faq-title-number{width: auto; margin-right: 7px; line-height: 1;}
    .faq-container-main.subtle-tones .jhk-faq-content-main .jhk-faq-ans{ width: auto; margin-right: 10px;}
    
    .faq-container-main.vibrant-color .jhk-faq-title-main {align-items: unset;}
    .faq-container-main.vibrant-color .jhk-faq-title-main .jhk-faq-title-number{width: auto; line-height: normal;}
    .faq-container-main.vibrant-color .jhk-faq-title-main .jhk-faq-title{line-height: normal;}
    
}
/******************/