.faq {
   display: flex;
   flex-direction: column;
   gap: 30px;
}

@media (max-width: 767px) {
   .faq {
      gap: 15px;
   }
}

.faq-list {
   display: flex;
   flex-direction: column;
   gap: 15px;
}

@media (max-width: 991px) {
   .faq-list {
      gap: 10px;
   }
}

.faq-list__elem {
   cursor: pointer;
}

.faq-list__elem:not(:last-of-type) {
   padding-bottom: 15px;
   border-bottom: 1px solid #0000001a;
}

@media (max-width: 991px) {
   .faq-list__elem:not(:last-of-type) {
      padding-bottom: 10px;
   }
}

.faq-list__elem * {
   margin: 0 !important;
}

@media (min-width: 1200px) {
   .faq-list__elem:hover:not(.active) .faq-list__title::before {
      opacity: 1;
   }
}

.faq-list__elem.active .faq-list__title::after {
   transform: rotate(90deg);
}

.faq-list__title {
   position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 24px;
}

.faq-list__title::after {
   content: "";
   position: relative;
   display: block;
   flex-shrink: 0;
   margin-left: auto;
   width: 30px;
   height: 30px;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 28L24.5 21L17.5 14' stroke='%23060F32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   transition: all 0.2s ease-in-out;
   z-index: 1;
}

.faq-list__title p {
   margin-right: 10px;
}

.faq-list__title p:first-child {
   font-size: 24px;
}

@media (max-width: 767px) {
   .faq-list__title p:first-child {
      font-size: 22px;
   }
}

.faq-list__text {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s linear;
}

.faq-list__text p {
   font-size: 16px;
   padding-top: 10px;
}