/* FREQUENTLY ASKED QUESTIONS*/


/* BASE */
body{
  font-family: Arial, sans-serif;
  margin:0;
  background:#f4f6f9;
  line-height:1.6;
}

/* HEADER (PADCOG Brand) */
.header{
  background:#393185;
  color:white;
  padding:18px 15px;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.header h2{
  margin:0;
  font-size:20px;
}

.header p{
  margin:5px 0 0;
  font-size:13px;
  opacity:0.9;
}

/* CONTAINER */
.container{
  padding:20px;
  max-width:800px;
  margin:auto;
}

/* FAQ CARD */
.faq{
  background:white;
  margin-bottom:12px;
  border-radius:10px;
  box-shadow:0 3px 8px rgba(0,0,0,0.08);
  overflow:hidden;
  transition:all 0.2s ease;
}

.faq:hover{
  transform:translateY(-2px);
}

/* QUESTION */
.question{
  padding:15px;
  font-weight:bold;
  cursor:pointer;
  background:#eef1ff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:15px;
  transition:background 0.2s ease;
}

.question:hover{
  background:#dde3ff;
}

/* ANSWER */
.answer{
  padding:15px;
  display:none;
  border-top:1px solid #eee;
  font-size:14px;
  color:#333;
  animation:fadeIn 0.2s ease-in-out;
}

/* ICON */
.icon{
  font-size:16px;
  font-weight:bold;
  color:#393185;
  transition:transform 0.2s ease;
}

/* ACTIVE STATE */
.faq.active .answer{
  display:block;
}

.faq.active .icon{
  transform:rotate(90deg);
}

/* ANIMATION */
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

/* MOBILE OPTIMIZATION */
@media (max-width:600px){
  .question{
    font-size:14px;
    padding:13px;
  }

  .answer{
    font-size:13px;
  }

  .header h2{
    font-size:18px;
  }
}