@use '../utils' as *;

  /*
 ::::::::::::::::::::::::::
  FAQ AREA CSS
 ::::::::::::::::::::::::::
 */

 // === faq sytle 4 ===

 .faq3 {
  background-color: var(--ztc-bg-bg-6);

  .accordion-item.active {
    background-color: #113ADC;
    transition: all .4s;
    button {
      background-color: #113ADC;
      color: #fff !important;
      transition: all .4s;
    }
    .accordion-body {
      color: #ffffffb2 !important;
    }

    .accordion-button:not(.collapsed)::after {
      background-image: var(--bs-accordion-btn-active-icon);
      transform: var(--bs-accordion-btn-icon-transform);
      filter: brightness(0) invert(1);
  }

  }

  .accordion {
    border: none;
    .accordion-item {
      margin-top: 20px;
      border: none;
      border-radius: 7px;
      padding: 2px;
      border: none;

      button {
        font-size: var(--f-fs-font-fs18);
        line-height: var(--f-fs-font-fs18);
        font-weight: var(--f-fw-semibold);
        color: var(--ztc-text-text-1);
        padding: 20px;
        &:focus {
          box-shadow: none;
        }
      }

      .accordion-body {
        font-size: var(--f-fs-font-fs16);
        line-height: var(--f-fs-font-fs28);
        font-weight: var(--f-fw-regular);
        color: var(--ztc-text-pera-text-1);
        padding: 0px 16px 16px 16px;
      }
    }

    .accordion-button:not(.collapsed)::after {
      background-image: var(--bs-accordion-btn-active-icon);
      transform: var(--bs-accordion-btn-icon-transform);
      filter: brightness(0);
  }
  }

  .accordion-button:not(.collapsed) {
    color: var(--ztc-text-text-1);
    background-color: #fff;
    border: none;
    box-shadow: inset 0 calc(var(--bs-accordion-border-width)* -1) 0 var(--bs-accordion-border-color);
}

.accordion {
  --bs-accordion-color: #000;
  --bs-accordion-bg: #fff;
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: #dee2e600;
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0.375rem;
  --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-body-color%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
  --bs-accordion-btn-focus-border-color: #86b7fe;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: #0c63e4;
  --bs-accordion-active-bg: #e7f1ff;
}

 }

 // === faq sytle 4 ===

 // === faq sytle 6 ===

 .faq6 {
  .faq-area {
    .accordion-button:not(.collapsed) {
      box-shadow: none;
    }
    .accordion {
      border: none;
      border-radius: 0;
      box-shadow: none;
      .accordion-item {
        padding: 0;
        margin-top: 20px;
        border: none;
        border-radius: 4px;
        box-shadow: none;
        border: 2px solid #ec811c17;
        button {
          padding: 24px;
          border: none;
          background: none;
          border-radius: 0 !important;
          color: var(--Home-Page-3-text-Colors, #180D03);
          font-size: 18px;
          font-style: normal;
          font-weight: 600;
          line-height: 18px; /* 100% */
          &:focus {
            box-shadow: none;
          }
        }
        .accordion-body {
          padding: 0px 24px 24px 24px;
          color: var(--Home-Page-3-white-colors, #FFF);
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: 24px; /* 150% */
        }

        &.active {
          background-color: #FA6444;
          button {
            color: #fff;

            &::after {
              filter: brightness(0) invert(1);
            }
          }
        }
      }
    }
  }
  .faq-image {
    margin-left: 30px;

    @media #{$md} {
      margin-left: 0px;
      margin-top: 30px;
    }
    @media #{$xs} {
      margin-left: 0px;
      margin-top: 30px;
    }
    img {
      width: 100%;
    }
  }
 }

 // === faq sytle 6 ===

  // === faq sytle 7 ===

  .faq7 {
    .faq-area {
      .accordion-button:not(.collapsed) {
        box-shadow: none;
      }
      .accordion {
        border: none;
        border-radius: 0;
        box-shadow: none;
        .accordion-item {
          padding: 0;
          margin-top: 20px;
          border: none;
          border-radius: 4px;
          box-shadow: none;
          border: 2px solid #CFD7EF;
          button {
            padding: 24px;
            border: none;
            background: none;
            border-radius: 0 !important;
            color: var(--Home-Page-3-text-Colors, #180D03);
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px; /* 100% */
            &:focus {
              box-shadow: none;
            }
          }
          .accordion-body {
            padding: 0px 24px 24px 24px;
            color: var(--Home-Page-3-white-colors, #5C5A64);
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px; /* 150% */
          }
  
          &.active {
            button {
              color: #0c63e4;
  
              &::after {
                filter: brightness(0);
              }
            }
          }
        }
      }
    }
    .faq-image {
      margin-left: 30px;
      img {
        width: 100%;
      }
    }
   }
  
   // === faq sytle 7 ===

   /*
 ::::::::::::::::::::::::::
  FAQ AREA CSS
 ::::::::::::::::::::::::::
 */