.brabic-faq-box {
     width: 100%;
 }

 .brabic-faq-topics-center {
     max-width: 1000px;
     margin: 0 auto;
     text-align: center;
 }

 .brabic-faq-title {
     text-align: center;
     align-items: center;
   --title3-font-size: 32px;
 }

 .brabic-faq-title div {
   margin: 30px 0;
   font-weight: 500;
   text-align: center;
 }

 ul,
 li {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 /* Styling FAQ buttons */
 .brabic-faq-button {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
 }

 .brabic-faq-ul {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 }

 .brabic-faq-li {
     flex: 1 1 calc(33.333% - 1rem);
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0.6rem;
 }

 /* Styling FAQ fields */
 .faq-field {
     position: relative;
     flex: 1;
     display: flex;
     justify-content: center;
 }

 .faq-field button {
     position: relative;
     padding: 10px 20px;
     background: none;
     border: none;
     cursor: pointer;
     border-radius: 0.4rem;
     border: 0.07rem solid #000;
     transition: background 0.3s, color 0.3s, border-color 0.3s;
     width: 100%;
     height: 3rem;
     /* Adjust this value as needed */
 }

 .faq-field button.brabic-selected {
     background: #000;
     color: #fff;
 }

 .li-text-lg {
     width: 100%;
     font-size: 15px;
     font-weight: 600;
     color: #000;
 }

 .brabic-faq-ul .faq-field button {
     position: relative;
 }

 /* Styling FAQ container */
 .brabic-faq-container {
     max-width: 1000px;
     margin: 0 auto;
 }

 /* Styling individual FAQ problems */
 .brabic-problem {
     margin: 25px 0;
     border-bottom: 1px solid #E6E6E6;
 }

 /* Styling FAQ problem title */
 .brabic-problem-title {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
     cursor: pointer;
 }

 .brabic-problem-title h4 {
     width: 84%;
     font-size: 16px;
     margin: 0;
     text-transform: uppercase;
     font-weight: 500;
   --title-font: var(--body-font);
 }

 /* Styling arrow icon */
 .brabic-problem-svg {
     width: 3%;
 }

 .brabic-problem-svg svg {
     width: 24px;
     height: 12px;
     padding-right: 12px;
     transition: transform 0.3s ease-in-out;
 }

 .brabic-problem-title.active .brabic-problem-svg svg {
     transform: rotateX(180deg);
 }

.brabic-faq-container-content {
  margin-top: 4%;
}

 .brabic-problem p {
     font-size: 15px;
     line-height: 18px;
     display: none;
     margin-bottom: 25px;
 }

 .brabic-problem.show p {
     display: block;
 }

 /* Hide all FAQ container contents except the first one */
 .brabic-faq-container-content {
     display: none;
 }

 .brabic-faq-container-content.active {
     display: block;
 }

 @media (max-width: 960px) {
     .brabic-faq-ul {
         justify-content: flex-start;
     }

     .brabic-faq-li {
         flex-basis: 50%;
     }

     .brabic-faq-topics-center {
         width: 96%;
         max-width: 100%;
     }

     .brabic-faq-container {
         width: 92%;
     }

     .faq-field button {
         height: 3.6rem;
         /* Adjust this value as needed */
     }

     .brabic-problem-title h4 {
         font-size: 14px;
     }

     .brabic-faq-li {
         padding: 0.4rem;
     }
 }