.faq {
    max-width:760px;
    display:flex;
    flex-direction:column;
    font-family:'FFMarkBook';
    font-style:normal;
    font-stretch:normal;
    box-sizing:content-box;
    margin:120px auto;
    }

 .faq-react {
    max-width:760px;
    display:flex;
    flex-direction:column;
    font-family:'FFMarkBook';
    font-style:normal;
    font-stretch:normal;
    box-sizing:content-box;
    margin: 0px auto;
    }   

 .faq-react ul {
    list-style-position: inside;
    padding: 16px 16px 0px;
    color: #666;
    font-size: 18px;
    line-height: 27px;
    max-width: 90%;
}   

.faq-react li {
    margin: 10px 0px;
}
  

.faq-react summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-right: 1.5rem; /* adjust as needed */
  position: relative;
}

.faq-react summary {
    max-width: 100%;
}

/* Remove default triangle (some browsers) */
.faq-react summary::-webkit-details-marker {
  display: none;
}

.faq-react .faq-list {
    padding-left: 50px;
}

/* Add custom chevron via ::after */
.faq-react summary::after {
  content: "";
  background-image: url('https://www.wurl.com/wp-content/uploads/2023/07/chevron.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 16px;  /* Adjust size as needed */
  height: 16px;
  position: absolute;
  right: 0px;
  top: 28px;
  transform: translateY(-50%) rotate(180deg);
  pointer-events: none;
}

details[open] summary::after {
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}


/* React */


.faq-intro {
    background:linear-gradient(180deg,#FFF 0%,#F5F5F8 100%),#FFF;
    }
.faq-intro-group {
    padding:80px 120px;
    margin:96px 0 0 0;
    }
.faq h1 {
    font-family:'FFMarkHeavy';
    font-size:60px;
    font-style:normal;
    line-height:69px;
    letter-spacing:-1.2px;
    font-stretch:normal;
    }
.faq h2 {
    font-family:'FFMarkBold';
    font-size:32px;
    font-style:normal;
    font-stretch:normal;
    line-height:40px;
    color:#000;
    }
.faq .container {
    margin:0 auto;
    width:100%;
    max-width:1440px;
    position:relative;
    padding:0;
    }
.faq-title, .faq-react summary {
    font-family:'FFMarkMedium';
    font-size:21px;
    font-style:normal;
    font-stretch:normal;
    font-weight:400;
    line-height:28px;
    display:flex;
    justify-content:space-between;
    cursor:pointer;
    align-items:flex-start;
    padding:24px 0 0 0;
    }
.faq-divider-purple,
.faq-divider-blue,
.faq-divider-green,
.faq-divider-red,
.faq-divider-magenta {
    height:4px;
    align-self:stretch;
    margin:32px 0 0 0;
    }
.faq-divider-purple {
    background:linear-gradient(90deg,#004BFF 0%,#991BB0 73.46%);
    }
.faq-divider-blue {
    background:linear-gradient(90deg,#004BFF 0%,#00A0BE 73.46%);
    }
.faq-divider-green {
    background: linear-gradient(183deg, #00AA5A -79.88%, #4BB694 80.9%);
    }
.faq-divider-red {
    background:linear-gradient(90deg,#991BB0 0%,#FF1755 73.46%);
    }
.faq-divider-magenta {
    background:linear-gradient(90deg,#A700B6 0%,#E82BE7 72.82%);
    }
.faq-title-logo {
    width:32px;
    height:32px;
    }
.faq-title-logo-special {
    width:40px;
    height:40px;
    }
.faq-title-wrapper {
    display:flex;
    align-items:center;
    gap:24px;
    }
.faq ul {
    padding:0;
    margin:0;
    }
.faq .container p, .faq-react p {
    color:#666;
    font-size:18px;
    font-style:normal;
    font-weight:400;
    line-height:27px;
    font-family:'FFMarkBook';
    max-width:90%;
    padding-top:16px;
    }
.faq-react strong {
    font-family: 'FFMarkBold';
}
.faq-react a {
        color:#666;
        text-decoration: underline;
}

.faq .container p a {
    color:#666;
    font-size:18px;
    font-style:normal;
    font-weight:400;
    line-height:27px;
    font-family:'FFMarkBook';
    max-width:90%;
    }
.faq details  {
    font-size:1rem;
    width:100%;
    background:#fff;
    border-radius:0;
    position:relative;
    margin:0;
    border-bottom:1px solid #DCDCDC;
    padding-bottom:24px;
    }

.faq-react .bd-icon-faq {
    max-height: 32px;
    width: auto;
    height: 100%;    
}    

.faq-react h3 {
    display: flex;
    gap: 24px;
    align-items: center;
}


.faq-react details {
    width: 100%;
    border-radius: 0;
    position: relative;
    margin: 0;
    border-bottom: 1px solid #DCDCDC;
    padding-bottom: 24px;
}

 .faq-react-border {
    border-bottom:1px solid #DCDCDC;
    padding-bottom:24px;
    margin: 0px auto;
    }
.faq-react .the-title {
    max-width: 95%;
}

details .summary-title {
    user-select:none;
    }
.faq .summary-content {
    cursor:default;
    padding:0;
    font-weight:300;
    line-height:1.5;
    }
.faq summary {
    list-style:none;
    padding:0;
    }
.faq .summary-chevron-up svg {
    opacity:0.5;
    }
.faq .summary-up,
.faq .summary-down {
    pointer-events:none;
    position:absolute;
    top:0;
    right:1em;
    background:#fff;
    }
.faq svg {
    display:block;
    }
.faq summary::-webkit-details-marker {
    display:none;
    }
.faq-pre-footer .large-padding-line {
    border-bottom:0!important;
    }
.faq-question {
    display:inline-block;
    max-width:90%;
    }
.faq-icon {
    width:16px;
    height:16px;
    background-size:contain;
    background-repeat:no-repeat;
    content:url('/wp-content/uploads/2023/07/chevron.svg');
    transform:rotate(180deg);
    }
details[open] .faq-icon {
    content:url('/wp-content/uploads/2023/07/chevron.svg');
    transform:rotate(0deg);
    }
.faq-pre-footer {
    width:100%;
    }
    @media (max-width:1200px) {
.faq  {
    margin:80px auto;
    padding:0 80px;
    }
.faq-react {
    margin: 0px auto;
    padding:0 80px;
}    
.faq-title-wrapper {
    gap:16px;
    }
.faq-intro-group {
    margin:0;
    padding:160px 48px 80px;
    }
.faq h1 {
    font-size:46px;
    line-height:53px;
    }
.faq h2 {
    font-size:24px;
    line-height:30px;
    }
.faq-title-logo-special {
    width:32px;
    height:29px;
    }
    }
    @media (max-width:781px) {
.faq-divider-purple,
.faq-divider-blue,
.faq-divider-green,
.faq-divider-red {
    margin:24px 0 0 0;
    }
.faq-title-logo-special {
    width:26px;
    height:24px;
    }
.faq-title-logo {
    width:24px;
    height:24px;
    }
.faq  {
    padding:0 32px;
    margin:80px auto;
    }
.faq-react {
    padding:0 32px;
    margin:80px auto;
    }

.faq li {
    padding:0;
    font-size:18px;
    line-height:27px;
    }
.faq .container p,
.faq .container p a {
    font-size:16px;
    line-height:22px;
    }
.faq h1 {
    font-size:32px;
    line-height:37px;
    }
.faq h2 {
    font-size:21px!important;
    line-height:28px!important;
    }
.faq-intro-group {
    margin:0;
    padding:160px 32px 80px;
    }


.faq-title, .faq-react summary {
    font-size: 18px;
    line-height: 27px;
}

.faq-react p {
    font-size: 16px;
    line-height: 22px;
}

    }
/* Get in touch module */

   .get-in-touch-wrapper {
      display: flex;
      flex-direction: column;
      align-content: center;
      align-items: center;
   }
   .get-in-touch {
      border-radius: 20px;
      padding: 96px 56px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      gap: 16px;
      max-width: 1200px;
      box-sizing: border-box;
      width: 100%;
      background-image: url(/wp-content/uploads/2024/10/img_home_cta.png); 
      background-color: var(--Blue-blue-500, #150056); 
      background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat; 
      text-align: center;
   }
   .get-in-touch-column {
      flex: 1;
   }
   .get-in-touch h2 {
      font-size: 36px!important;
      font-style: normal!important;
      font-weight: unset!important;
      line-height: 45px!important;
      color: #fff!important;
      font-family: 'FFMarkHeavy'!important;
      text-align: center!important;
      margin: auto!important;
   }
   .get-in-touch p {
      font-size: 18px;
      font-style: normal;
      line-height: 27px;
      color: #fff;
   }
   .get-in-touch-button {
      background-color: #5EE3B9;
      padding: 12px 16px;
      font-size: 16px;
      font-style: normal;
      line-height: 24px;
      color: #000;
      text-decoration: none;
      border-radius: 4px;
      display: inline-block;
      margin-top: 16px;
      font-family: 'FFMarkBold';
   }
   @media only screen and (max-width: 1200px) {
      .get-in-touch h2 {
         font-size: 36px!important;
         line-height: 45px!important;
      }
      .get-in-touch {
         padding: 80px 48px;
      }
   }
   @media only screen and (max-width: 781px) {
      .get-in-touch h2 {
         font-size: 24px!important;
         line-height: 32px!important;
      }
      .get-in-touch {
         padding: 64px 32px;
      }
      .get-in-touch-button {
         margin-top: 8px;
      }
      .get-in-touch p {
         font-size: 16px;
         line-height: 22px;
      }
   }