.header-title{
    font-family: TitleFont;
}

.question-title{
    font-family: "Roboto", serif;
    font-size:1em;
}

.answer-text{
    font-size:1.5em;
}

.custom-accordion-button {
    background-color: transparent; /* transparent background */
    color: #fff;                   /* white text */
    border: none;                  /* remove default borders */
    border-bottom: 1px solid var(--crimson); /* olive bottom line */
    padding: 1rem;
    transition: background-color 0.3s, transform 0.3s;
    border-radius: 0 !important;   /* remove rounded corners */
}
  
/* Custom arrow: white arrow on the far right */
.custom-accordion-button::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: auto; /* push arrow to far right */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 11.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E");
    background-size: 1rem;
    background-repeat: no-repeat;
    transition: transform 0.3s;
}
  
/* Hover state: #3E404D with 0.3 opacity */
.custom-accordion-button:hover {
    background-color: rgba(62, 64, 77, 0.3); /* #3E404D with 0.3 opacity */
}
  
/* Active state: #3E404D with 0.5 opacity */
.custom-accordion-button:not(.collapsed) {
    background-color: rgba(62, 64, 77, 0.5); /* #3E404D with 0.5 opacity */
    color: #fff !important; /* Ensuring text stays white when expanded */
}

/* Ensure arrow stays white when collapsed or not collapsed */
.custom-accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 11.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E") !important;
}

/* Added to ensure consistent spacing in accordion bodies */
.accordion-body {
    padding: 2rem;
    /* margin: 2rem; */
}

/* Fixing additional issues */
.accordion-item {
    background-color: transparent !important;
}

.accordion-button {
    border-radius: 0 !important;
}

.accordion-collapse {
    background-color: #212529; /* Match the bg-dark color */
}

/* Prevent Bootstrap from changing arrow color */
.accordion-button::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 11.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E") !important;
}

/* Ensure collapse background is dark */
.accordion-collapse, .accordion-body {
    background-color: #212529 !important; /* Ensure dark background */
}