.collapsible-content__bottom{
   display: flex;
}
.collapsible-content__heading {
  margin: 0;
}
.collapsible-content__text {
  font-size: 1.6rem;
  line-height: 1.3;
  color: rgb(var(--color-foreground-secondary));
  margin-top: 0.8rem;
}
.collapsible-content__item {
  border-bottom: 0.2rem solid rgb(var(--color-border));
}
.collapsible-content__item:first-child {
  border-top: 0.2rem solid rgb(var(--color-border));
}
.collapsible-content__item:hover .collapsible-content__question {
  color: rgb(var(--color-accent));
}
.collapsible-content__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.collapsible-content__toggle-group {
  display: flex;
  align-items: center;
}
.collapsible-content__question {
  margin: 0;
  transition: var(--duration-default);
}
.collapsible-content__digit, .collapsible-content__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--color-background-card));
  flex: none;
}
.collapsible-content__digit {
  width: 3rem;
  height: 3rem;
  font-size: 1.4rem;
  font-weight: 500;
  margin-right: 0.8rem;
  color: rgb(var(--color-button));
}
@media (min-width: 750px) {
  .collapsible-content__digit {
    width: 4.7rem;
    height: 4.7rem;
    font-size: 1.6rem;
    margin-right: 1.6rem;
  }
}
.collapsible-content__icon svg {
  width: 24px;
  height: 24px;
  color: rgb(var(--color-button));
  transition: var(--duration-default);
}
.collapsible-content__answer {
  display: none;
  border-top: 0.2rem solid rgb(var(--color-border));
  padding: 2.4rem 0;
}
@media (min-width: 990px) {
  .collapsible-content__answer {
    padding: 2.4rem 6.3rem;
  }
}

.custom_faqs_section{
  background: #fff;
  padding: 40px 50px;

  @media(max-width:767px){
    padding: 20px 20px 40px;
  }

  & .collapsible-content__bottom{
    gap:30px;

    & .collapsible-content__items {
      flex:1;
      border-top: 1px solid #036;
    }

    & .button-wrapper{
      margin-top: 0;

      & button{
        color: #036;
        text-align: center;
        font-family: var(--font-button-family);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--font-button-weight);
        line-height: 18px;
        text-decoration: none;
        border-radius: 200px;
        background: #fcbf2c !important;
        border: 2px solid #fcbf2c !important;
        display: inline-flex;
        padding: 14px 20px;
        justify-content: center;
        align-items: center;
        min-width: 250px;
        margin-top: 30px;

        &:hover{
          background: #e6ae07 !important;
          border: 2px solid #e6ae07 !important;
        }

        @media(max-width:767px){
          min-width: 100%;
          margin-top: 40px;
        }

        & svg{
          display: none !important;
        }
      }
    }

    & .collapsible-content__item{
      border-bottom: 1px solid #036;

      &.active{
        & .plus{
          display: none;
        }
        & .minus{
          display: block;
        }
      }

      & .minus{
        display: none;
      }
    }

    & .collapsible-content__answer{
      border-top: 0;
      padding: 0 0 30px !important;

      & .metafield-rich_text_field{

        & ul,
        & ol{
          margin: 0 0 20px;
          padding-left: 20px;
          list-style: disc;
          display: flex;
          flex-direction: column;
          gap:8px;

          & li{
            color: #333;
            font-family: var(--font-body-family);
            font-size: 16px;
            font-style: normal;
            font-weight: var(--font-body-weight);
            line-height: 22px;
            margin: 0 0;

            & strong{
              font-family: var(--font-heading-family);
              font-weight: var(--font-heading-weight);
            }

            @media(max-width:767px){
              font-size: 14px;
              line-height: 20px;
            }
          }
        }

        & div{
          color: #333;
          font-family: var(--font-body-family);
          font-size: 14px;
          font-style: normal;
          font-weight: var(--font-body-weight);
          line-height: 18px;
          margin: 0 0 20px;

          & a{
            color: #333;
            font-family: var(--font-body-family);
            font-size: 14px;
            font-style: normal;
            font-weight: var(--font-body-weight);
            text-decoration: underline;
            word-wrap:break-word;

            &:hover{
              text-decoration: none;
            }
          }

          @media(max-width:767px){
            font-size: 12px;
            line-height: 16px;
          }
        }

        & p{
          color: #333;
          font-family: var(--font-body-family);
          font-size: 16px;
          font-style: normal;
          font-weight: var(--font-body-weight);
          line-height: 22px;
          margin: 0 0 16px;
          word-wrap:break-word;

          & strong{
            font-family: var(--font-heading-family);
            font-weight: var(--font-heading-weight);
          }

          @media(max-width:767px){
            font-size: 14px;
            line-height: 20px;
          }
        }



        & a{
          color: #036;
          font-family: var(--font-body-family);
          font-size: 16px;
          font-style: normal;
          font-weight: var(--font-body-weight);
          line-height: 22px;
          text-decoration: underline;
          
          overflow-wrap: break-word;
          word-wrap: break-word;
          -ms-word-break: break-all;
          word-break: break-all;
          word-break: break-word;

          &:hover{
            text-decoration: none;
          }

          @media(max-width:767px){
            font-size: 14px;
            line-height: 20px;
          }
        }

        & > :last-child{
          margin-bottom: 0 !important;
        }
      }

      @media(max-width:767px){
        padding: 0 0 20px !important;
      }
    }

    & .collapsible-content__item:first-child{
      border-top: 0 !important;
    }

    & .collapsible-content__toggle{
      padding:30px 0 !important;

      @media(max-width:767px){
        padding: 20px 0 !important;
      }

      & .collapsible-content__question{
        color:  #333;
        font-family: var(--font-heading-family);
        font-size: 20px;
        font-style: normal;
        font-weight: var(--font-heading-weight);
        line-height: 22px;
        margin: 0 0;

        @media(max-width:767px){
          font-size: 18px;
          line-height: 26px;
        }
      }
    }

    @media(max-width:767px){
      & .category-list {
        display: none;
      }
    }
  }

  & .collapsible-content__top{
    max-width: 705px;
    margin-bottom: 40px;
    width:100%;

    @media(max-width:767px){
      margin-bottom: 20px;
    }

    & h1{
      color: #333;
      font-family: var(--font-heading-family);
      font-size: 40px;
      font-style: normal;
      font-weight: var(--font-heading-weight);
      line-height: 42px;
      margin:0 0 20px;

      @media(max-width:767px){
        font-size: 32px;
        line-height: 34px;
      }
    }

    & .collapsible-content__text{
      margin-top:0;

      & p{
        color: #333;
        font-family: var(--font-body-family);
        font-size: 16px;
        font-style: normal;
        font-weight: var(--font-body-weight);
        line-height: 22px;
        margin: 0 0 16px;

        & strong{
          font-weight: var(--font-heading-weight);
          font-family: var(--font-heading-family);
        }

        @media(max-width:767px){
          font-size: 14px;
          line-height: 20px;
        }
      }

      & a{
        color: #333;
        font-family: var(--font-body-family);
        font-size: 16px;
        font-style: normal;
        font-weight: var(--font-body-weight);
        line-height: 22px;
        text-decoration: underline;

        &:hover{
          text-decoration: none;
        }

        @media(max-width:767px){
          font-size: 14px;
          line-height: 20px;
        }
      }

      & p:only-child,
      & p:last-child{
        margin-bottom: 0;
      }
    }
  }

  & .collapsible-content__middle{
    display: none;

    @media(max-width:767px){
      display: block;
    }

    & a{
      display: flex;
      padding: 14px 20px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      border-radius: 200px;
      border: 2px solid var(--Primary-CONTOUR-Blue, #036);
      margin: 0;
      text-align: center;
      color: #036;
      font-family: var(--font-heading-family);
      font-size: 14px;
      font-style: normal;
      font-weight: var(--font-heading-weight);
      line-height: 18px;
      text-decoration: none;
      margin-bottom: 40px;

      &:hover{
        background: #00264B;
        color: #fff;
      }
    }
  }

  & .category-list{
    display: flex;
    flex-direction: column;
    gap:15px;
    padding: 20px 20px 30px 20px;
    border-radius: 10px;
    background: rgba(38, 159, 217, 0.10);
    height: 100%;

    @media(max-width:767px){
      gap:10px;
    }

    & > a{
      display: none;
    }

    & .category_heading{
      color: #333;
      font-family: var(--font-heading-family);
      font-size: 22px;
      font-style: normal;
      font-weight: var(--font-heading-weight);
      line-height: 26px;
      margin:0 0;

      @media(max-width:767px){
        font-size: 18px;
        line-height: 22px;
      }
    }

    & .categories_list{
      display: flex;
      flex-direction: column;
      gap:15px;

      & .category_list{
        display: flex;
        align-items: center;
        gap:10px;
        cursor:pointer;

        & label{
          color: #333;
          font-family: var(--font-body-family);
          font-size: 16px;
          font-style: normal;
          font-weight: var(--font-body-weight);
          line-height: 22px;
          cursor:pointer;

          @media(max-width:767px){
            font-size: 14px;
            line-height: 20px;
          }
        }

        & input{
          margin:0;
          height: 18px;
          width: 18px;
          border:1px solid #707070;
          background: #fff;
          cursor: pointer;

          &:checked{
            accent-color: #036;
          }
        }
      }
    }
  }

  & .faq_container.active_filter{

    & .collapsible-content__bottom{
      & .category-list{
        @media(max-width:767px){
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          background: #fff;
          z-index: 99;
          display: flex;
          padding: 20px 20px 20px 20px;
          height: 100vh;
          overflow-y: auto;

          & > .category_heading{
            display: none;
          }

          & > a{
            display: flex;
            justify-content: flex-end;
            cursor: pointer;
          }
        }
      }
    }
  }
}