/* FAQ SECTION */

.faq-section{
  padding:80px 20px;
  background: transparent !important;
  width: 100%;
}

.faq-container{
  max-width:900px;
  width: 100%;
  margin:0 auto;
}

.faq-item{
  background:#fff;
  margin-bottom:20px;
  border-radius:0px;
  overflow:hidden;
  transition:0.4s ease;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.faq-item:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.faq-question{
  padding:20px;
  font-weight:600;
  cursor:pointer;
  position:relative;
  font-family: "Prosto One";
}

.faq-question::after{
  content:"+";
  position:absolute;
  right:20px;
  font-size:20px;
  transition:0.3s ease;
}

.faq-item.active .faq-question::after{
  content:"-";
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  padding:0 20px;
  transition:0.4s ease;
  color:#555;
  font-family: "Jost";
}

.faq-item.active .faq-answer{
  max-height:1000px; /* Increased from 300px to prevent text cutoff */
  padding:20px;
}
.faq-question{
  padding:20px;
  font-weight:600;
  cursor:pointer;
  position:relative;
  transition:all 0.3s ease;
}

/* 🔥 Hover Effect */
.faq-question:hover{
  background:#2f373b;        /* Dark grey background */
  color:#fff;                /* White text */
  padding-left:30px;         /* Slight move effect */
}

/* Smooth + icon transition */
.faq-question::after{
  content:"+";
  position:absolute;
  right:20px;
  font-size:20px;
  transition:all 0.3s ease;
}

/* Change + color on hover */
.faq-question:hover::after{
  color:#fff;
}

/* When Active (opened) */
.faq-item.active .faq-question{
  background:#2f373b;
  color:#fff;
}

.faq-item.active .faq-question::after{
  content:"-";
}
@media(max-width:768px){
  .faq-section{
    padding:60px 20px;
  }
}

@media(max-width:480px){
  .faq-section{
    padding:40px 15px;
  }
}