*
	{
		font-family: Arial, Helvetica, sans-serif;
        color: white;
        font-weight: bolder;
        background-color: black;

	}

h1
    {
        text-align: center;
        font-size: 32px;
        font-weight: 800;
    }

p
    {
        text-align: center;
    }

.center
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: center;
    }
  } 

/* Style for the main FAQ container */
.faq-container {
    max-width: 800px; /* Limit the width for better readability */
    margin: 50px auto; /* Center the container and add vertical spacing */
    padding: 20px;
  }
  
  /* Style for the main title */
  .faq-container h1 {
    text-align: center;
    margin-bottom: 40px;
    color: #ffffff; /* Dark blue color for the title */
  }
  
  /* Style for each FAQ item */
  .faq-item {
    border-bottom: 1px solid #ddd; /* Light gray border between items */
    overflow: hidden; /* Hide overflowing content */
  }
  
  /* Style for the question buttons */
  .faq-question {
    background-color: #6e08d5; 
    width: 100%;
    padding: 20px;
    text-align: left;
    font-size: 18px;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease; /* Smooth background transition on hover */
  }
  
  /* Hover effect for question buttons */
  .faq-question:hover {
    background-color: #d0d7de; /* Slightly darker gray on hover */
  }
  
  /* Style for the arrow icon */
  .faq-question .arrow {
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease; /* Smooth rotation transition */
  }
  
  /* Rotate the arrow when the question is active (expanded) */
  .faq-question.active .arrow {
    transform: rotate(180deg); /* Rotate arrow 180 degrees */
  }
  
  /* Style for the answer sections */
  .faq-answer {
    max-height: 0; /* Initially hide the answer */
    overflow: hidden;
    transition: max-height 0.3s ease; /* Smooth transition for expanding */
    background-color: #000000; /* White background for answers */
  }
  
  /* Style for the answer text */
  .faq-answer p {
    padding: 20px;
    font-size: 16px;
    line-height: 1.5; /* Increase line height for better readability */
    color: #ffffff; /* Slightly lighter text color for answers */
  }