*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* animations start*/

@keyframes fade-in {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}

@keyframes fade-out {
0% {
  opacity: 1;
}
100% {
  opacity: 0;
}
}

@keyframes slide-up {
0% {
  transform: translateY(100%);
}
100% {
  transform: translateY(0%);
}
}

@keyframes slide-down {
0% {
  transform: translateY(-50%);
}
100% {
  transform: translateY(0%);
}
}

/* animations end */

#title-container{
  text-align: center;
}

#title{
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 65px;
  color: white;
  margin: 2% 0;
}

#faq{
  background-color: #121112;
  color: white;
  margin: 4% 0 3% 0;
  font-family: 'Roboto', sans-serif;
}

#faq-container{
  min-width: 276px;
  width: 50%;

  margin: 0 auto;

  /* background-color: #353535; */
  padding: 1%;
  border-radius: 5px;
}

.question{
  border-radius: 5px;
  /* background-color: #454545; */
  padding: 0;
  /* margin: 5px 0; */
  margin: 15px 0;
  
}

.question-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  cursor:pointer;
  /* padding: 1%; */
}

.question-title{
  color: white;
  font-weight: 500;
  /* font-size: 18px; */
  font-size: clamp(1rem, 1vw + 0.1rem, 2rem);
  margin: 0;
}

/* arrow start */
.icon-arrow
{
  transition: 0.5s ease-in-out;
  /* min-width: 24px; */
  /* min-width: 36px; */
  max-width: 36px;
  height: auto; 
}

.icon-arrow-flip{
  rotate: 180deg;
}
/* arrow end */

.answer{
  height: 0;
  overflow: hidden;
  transition: 0.5s ease-out; 
  padding: 0 1%;
}

.answer > hr{
  margin: 0 0.9%;
  padding: 0;
  border-top: 1px solid white;
}

.answer > p{
  color: rgb(218, 218, 218);
  margin: 0;
  padding: 1% 1% 1.5% 1%;
  word-wrap: break-word;
  font-size: clamp(0.8rem, 0.9vw + 0.1rem, 1.5rem);
}

.answer-show{
  animation: fade-in 1s forwards;
  display: block;
}

.url{
text-decoration: none;
color: pink;
}


@media only screen and (max-width: 767px) {
  #faq{
    margin: 6% 0 3% 0;
  }

}

@media only screen and (max-width: 1024px){
  .icon-arrow
  {
    min-width: 24px;
    max-width: 24px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
}

@media only screen and (min-width: 1024px) and (max-width: 1200px){
}

@media only screen and (min-width: 1201px) and (max-width: 1399px) {
}

@media only screen and (min-width: 1400px) {

}