﻿.faq-container.container {
  width: 100%;
  max-width: 100%;
  background: #fff;
  padding: 40px 20px;
}

.faq-container .faq-row {
  border: none;
  box-shadow: none;
  border-radius: 10px;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 35px;
  margin-top: 0;
}

.faq-container .page-title-faq, .faq-container .title {
  text-align: center;
  padding: 15px 0;
  display: none;
}

  .faq-container .page-title-faq strong, .faq-container .title strong {
    color: var(--primary-color);
    font-family: Bebas Neue, sans-serif;
    font-size: clamp(42px, 3vw, 64px);
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-transform: uppercase;
  }

    .faq-container .page-title-faq strong .first-word, .faq-container .title strong .first-word {
      color: var(--black);
    }

.faq-container .faq-category {
  margin-bottom: 0;
}

  .faq-container .faq-category .faq-category-header {
    display: none;
  }

  .faq-container .faq-category .faq-items {
    max-width: 724px;
    margin: auto;
    background: #fff;
  }

    .faq-container .faq-category .faq-items .faq-item {
      padding-block: 10px;
      background: #FAFAF9;
      margin-bottom: 10px;
      border-radius: 12px;
    }

      .faq-container .faq-category .faq-items .faq-item.active {
        background: #E8F2F2;
      }

      .faq-container .faq-category .faq-items .faq-item .item-header {
        position: relative;
        background-image: none;
        background-color: unset;
        display: flex;
        padding-block: 10px;
      }

        .faq-container .faq-category .faq-items .faq-item .item-header:hover {
          cursor: pointer;
        }

        .faq-container .faq-category .faq-items .faq-item .item-header h1 {
          margin-left: 0;
          padding: 0 15px;
          min-height: 0;
          margin-bottom: 0;
          font-weight: 600;
          font-size: 16px;
          margin-right: 30px;
        }

        .faq-container .faq-category .faq-items .faq-item .item-header:before {
          content: "\e908";
          font-family: "icomoon" !important;
          font-size: 18px;
          position: absolute;
          font-weight: 400;
          right: 20px;
          top: 10px;
          transition-duration: 0.8s;
          transition-property: transform;
          color: var(--primary-color);
        }

        .faq-container .faq-category .faq-items .faq-item .item-header .image-container {
          background: var(--black);
          padding: 10px;
          align-self: center;
          border-radius: 5px;
          margin-left: 16px;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          display: none;
        }

          .faq-container .faq-category .faq-items .faq-item .item-header .image-container .image {
            background-color: var(--black);
            background-image: url(/Plugins/NopStation.Plugin.Widgets.FAQ/Contents/images/Q.svg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 10px;
          }

        .faq-container .faq-category .faq-items .faq-item .item-header.active .image-container {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          transition-duration: 5s;
          transition-property: transform;
          display: none;
        }

        .faq-container .faq-category .faq-items .faq-item .item-header.active h1 {
          color: var(--black);
        }

        .faq-container .faq-category .faq-items .faq-item .item-header.active:before {
          font-family: "icomoon" !important;
          font-size: 18px;
          position: absolute;
          right: 20px;
          top: 10px;
          transform: rotateX(-180deg);
          color: var(--primary-color);
        }

      .faq-container .faq-category .faq-items .faq-item .item-description {
        display: flex;
        padding: 0;
        align-items: center;
        margin-top: 12px;
      }

        .faq-container .faq-category .faq-items .faq-item .item-description .image-container {
          background: var(--primary-color);
          padding: 10px;
          align-self: self-start;
          border-radius: 5px;
          margin-left: 16px;
          border-top-right-radius: 0;
          border-top-left-radius: 0;
          display: none;
        }

          .faq-container .faq-category .faq-items .faq-item .item-description .image-container .image {
            background-color: var(--primary-color);
            background-image: url(/Plugins/NopStation.Plugin.Widgets.FAQ/Contents/images/A.svg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 10px;
          }

        .faq-container .faq-category .faq-items .faq-item .item-description .item-answer {
          padding: 0;
        }

          .faq-container .faq-category .faq-items .faq-item .item-description .item-answer p {
            padding: 0 15px;
            color: var(--black);
            font-size: 16px;
            margin-right: 30px;
          }
