/* Change background color when the accordion item is open */
.accordion-button:not(.collapsed) {
    background-color: #007bff !important; /* Force custom background color when open */
    color: white !important; /* Ensure the text color is white when open */
    box-shadow: none !important; /* Remove the blue focus shadow Bootstrap adds by default */
  }
  
  /* Ensure background color remains consistent when button is focused (while open) */
  .accordion-button:not(.collapsed):focus {
    background-color: #c1c6cc !important; /* Same custom background color on focus */
    color: white !important; /* Text color stays white */
    box-shadow: none !important; /* Prevent focus outline or shadow from appearing */
  }
  
  /* Change background color when the accordion button is collapsed */
  .accordion-button.collapsed {
    background-color: #f8f9fa !important; /* Light color when closed */
    color: #333 !important; /* Dark text color when closed */
  }
  
  /* Optional: Customize the button's background when hovered */
  .accordion-button:not(.collapsed):hover {
    background-color: #b8babd !important; /* Darker shade when hovered while open */
    color: white !important; /* Ensure text stays white when hovered */
  }
  
  .accordion-button.collapsed:hover {
    background-color: #e2e6ea !important; /* Hover state when collapsed */
  }
  

  /* Remove the default shadow when the accordion button is focused */
.accordion-button:not(.collapsed):focus {
    background-color: #999da1 !important; /* Custom background color when open */
    color: white !important; /* Text color stays white */
    box-shadow: none !important; /* Remove the default Bootstrap shadow */
  }
  
  /* Optional: Customize the shadow on focus with your own */
  .accordion-button:not(.collapsed):focus {
    box-shadow: 0 0 10px rgba(173, 175, 177, 0.5) !important; /* Soft custom blue shadow */
  }
  
  /* Change shadow or remove on collapsed state */
  .accordion-button.collapsed:focus {
    background-color: #f8f9fa !important; /* Light color when collapsed */
    color: #333 !important; /* Text color when collapsed */
    box-shadow: none !important; /* Remove the default focus shadow */
  }
  

/* Change background color when the accordion item is open (light grey scale gradient) */
.accordion-button:not(.collapsed) {
    background: linear-gradient(to bottom, #d3d3d3, #f0f0f0) !important; /* Gradient from light grey to lighter grey */
    color: white !important; /* Ensure the text color is white when open */
    box-shadow: none !important; /* Remove the default Bootstrap focus shadow */
}

/* Ensure background color remains consistent when button is focused (while open) */
.accordion-button:not(.collapsed):focus {
    background: linear-gradient(to bottom, #b8b8b8, #e0e0e0) !important; /* Slightly darker gradient on focus */
    color: white !important; /* Text color stays white */
    box-shadow: 0 0 10px rgba(173, 175, 177, 0.5) !important; /* Soft custom shadow */
}

/* Change background color when the accordion button is collapsed */
.accordion-button.collapsed {
    background-color: #f8f9fa !important; /* Light color when collapsed */
    color: #333 !important; /* Dark text color when collapsed */
}

/* Customize the button's background when hovered while open */
.accordion-button:not(.collapsed):hover {
    background: linear-gradient(to bottom, #b0b0b0, #d8d8d8) !important; /* Darker gradient when hovered while open */
    color: white !important; /* Ensure text stays white when hovered */
}

/* Customize the button's background when hovered while collapsed */
.accordion-button.collapsed:hover {
    background-color: #e2e6ea !important; /* Hover state when collapsed */
}