/* FOR FAQ PAGE */

.faq-content {
  padding-top: 100px;
  padding-bottom: 50px;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1200px;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.accordion {
  background-color: var(--essence-color);
  color: var(--secondary-color);
  cursor: pointer;
  padding: 0 15px 0 20px; /* Remove the padding to control the vertical alignment */
  height: 80px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  display: flex; /* Use flexbox to center vertically */
  align-items: center; /* Center vertically */
  justify-content: space-between; /* Add space between text and the toggle icon */
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: var(--essence-color);
}

.panel {
  max-height: 0;
  overflow: hidden;
  background-color: var(--essence-color);;
  transition: max-height 0.4s ease-in-out; /* Smooth transition for max-height */
}

.panel p, .panel ul {
  margin: 0;
  padding: 10px 18px;
  text-align: justify;
  word-spacing: -1px; /* Adjust as needed */
  hyphens: auto;
  margin-left: 10px;
  margin-right: 10px;
}

.panel a {
  text-decoration: none;
  color: var(--secondary-color);
  text-align: left;
}

.panel li {
  list-style: none; /* Remove bullet points from <li> elements */
  padding-left: 0; /* Remove default padding */
  border-bottom: 0.5px solid var(--secondary-color);
  padding: 20px;
}

.panel li a {
  color: var(--secondary-color);
  transition: 0.3s;
}

.panel li a:hover{
  color: var(--tertiary-color);
}

/* Add styles for the icon */
.icon {
  display: inline-block;
  width: 40px; /* Adjust the size of the circle */
  height: 40px; /* Adjust the size of the circle */
  border: 1px solid var(--secondary-color); /* Circle outline */
  border-radius: 50%; /* Make it a circle */
  text-align: center;
  line-height: 38px; /* Vertically center the plus/minus symbol */
  margin-right: 10px; /* Add spacing between the icon and text */
  font-weight: bold; /* Make the plus/minus symbols bold */
  font-size: 20px; /* Increase font size for the plus/minus symbols */
  transition: transform 0.3s ease-in-out; /* Add transition for the transform property */
}

/* Style for the plus symbol (+) */
.accordion:not(.active) .icon::before {
  content: '+';
  color: var(--secondary-color); /* Default color */
  transition: color 0.3s; /* Add transition for color change */
}

/* Style for the plus symbol (+) on hover */
.accordion:not(.active):hover .icon::before {
  color: var(--tertiary-color); /* Pastel red color on hover */
}

/* Style for the minus symbol (-) */
.accordion.active .icon::before {
  content: '−'; /* Use the actual minus symbol (−) instead of the hyphen (-) */
  transform: rotate(90deg); /* Keep the "-" symbol horizontal */
  display: inline-block; /* Ensure the symbol stays inline */
  color: var(--secondary-color); /* Default color */
  transition: color 0.3s; /* Add transition for color change */
}

/* Style for the minus symbol (-) on hover */
.accordion.active:hover .icon::before {
  color: var(--tertiary-color); /* Pastel red color on hover */
}

/* Add the transition effect for the icon rotation */
.accordion .icon {
  transform-origin: center;
  transform: rotate(0deg); /* Initial rotation angle */
}

/* Rotate the icon when the accordion is active */
.accordion.active .icon {
  transform: rotate(90deg); /* Rotate by 90 degrees when active (change to minus) */
}