.res-faqs {
  padding-top: var(--spacing_large) !important;
  padding-bottom: var(--spacing_large) !important;



  background: #fff;
  .container {

    &.block-orange {

      @media screen and (max-width: 1350px) {
        margin-left: 20px;
        margin-right: 20px;
      }

      padding: 20px;

      .faqs-left {
        display: none;
      }
      border-radius: var(--border_radius);
      background: linear-gradient(45deg, var(--res3), var(--res4));

      .faq-number {
        display: none !important;
      }

      .faqs-bottom {
        > div {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }
      }

      .faq-inner {
        border: none !important;
        background: #fff;
        padding: 20px !important;
        border-radius: 6px;

        &.active {
          background: #fff !important;
        }
      }
    }
    display: flex;
    gap: var(--spacing_medium);

    @media (max-width: 767px) {
      flex-direction: column;

      .faqs-left {
        max-width: 100% !important;
      }
    }

    .faqs-left {
      max-width: 300px;
      .btn {
        width: fit-content;
      }
    }


    .faqs-bottom {
      width: 100%;


      .faq-inner {
        border-bottom: solid 1px #c4c4c4;
        padding: 24px 0;
        transition: 0.3s ease;

        svg {
          width: 16px;
          height: 16px;
          margin: auto 0;
          fill: var(--ch-1);
          transform: rotate(45deg);
        }

        h4 {
          font-size: 19px;
        }



        .faq-inner-top {
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          gap: 24px;

          .faq-number {
            padding-right: var(--spacing_medium);
          }

          svg {
            fill: #F1221C !important;;
          }

          &:hover {
            h3 {
              color: var(--1);
            }
          }
          h3 {
            transition: 0.3s ease;
            color: var(--ch-1);
            font-size: 21px;
            font-weight: 600;
            margin: auto 0;
          }


        }

        .faq-inner-bottom {
          margin-top: 12px;
          p {
            color: var(--ch-1);
          }
        }

        &:hover {
          transition: 0.3s ease;
          cursor: pointer;
          background: hsla(0, 0%, 100%, .48);
        }
      }
    }
  }
}

main.generic {
  .cotterhill-faqs {
    .faqs-top {
      * {
        color: var(--ch-2) !important;
      }
    }

    .faq-inner {
      background: var(--ch-1) !important;
      h3 {
        color: var(--ch-7) !important;
      }

      svg {
        fill: var(--ch-3) !important;
      }

      &.active {
        border: solid 2px var(--ch-2);
      }
    }
  }
}