/* SECTION */
.faq-header {
  text-align: center;
  margin-bottom: 40px;
}

.faq-header h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #0b0a24;
  
}

.faq-header p {
  font-size: 16px;
  color: #0b0a24;
  max-width: 600px;
  margin: auto;
  line-height: 1.6;
}

/* BACK BUTTON */
.faq-back-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  margin-bottom:30px;

  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(18px);

  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;

  text-decoration:none;
  color:#0b0a24;
  font-weight:600;
  font-size:15px;

  box-shadow:0 8px 25px rgba(0,0,0,0.08);

  transition:0.4s ease;
  position:relative;
  overflow:hidden;
}

/* SLIDE SHINE EFFECT */
.faq-back-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:100%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.5),
    transparent
  );

  transition:0.7s;
}

.faq-back-btn:hover::before{
  left:120%;
}

/* HOVER */
.faq-back-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
  background:#ff5e00;
  color:#fff;
}

/* ARROW ANIMATION */
.faq-back-btn span{
  transition:0.3s ease;
}

.faq-back-btn:hover span{
  transform:translateX(-5px);
}

/* MOBILE */
@media(max-width:768px){

  .faq-back-btn{
    padding:11px 18px;
    font-size:14px;
    margin-bottom:22px;
  }

}

.faq-section {
  padding: 140px 5% 80px;
  background: linear-gradient(135deg,#fbfbfd, #f8f9fb);
}

/* SEARCH */
.faq-search {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  padding-bottom: 20px;
}

.faq-search input {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  outline: none;
}

/* CONTAINER */
.faq-container {
  max-width: 900px;
  margin: auto;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(25px);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.faq-item {
  width: 100%;
  box-sizing: border-box;
}

/* CATEGORIES */
.faq-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
  justify-content: center;
}

/* BUTTONS */
.faq-categories button {
  padding: 13px 22px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  background: #f1f3f7;
  color: #0b0a24;
  transition: 0.3s;
  white-space: nowrap;
  font-weight: 600;
  font-size: 15px;
}

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

.faq-categories button.active {
  background: #ff5e00;
  color: #fff;
}

/* MOBILE FILTER STYLE */
@media (max-width: 768px) {

  .faq-section {
    padding: 130px 4% 70px;
  }

  .faq-container {
    padding: 24px;
    border-radius: 18px;
  }

  .faq-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .faq-categories button {
    width: 100%;
    padding: 14px 10px;
    border-radius: 14px;
    font-size: 14px;
  }

  .faq-search input {
    padding: 13px;
    font-size: 15px;
  }

  .faq-q {
    font-size: 15px;
    padding: 16px;
  }

}

/* FAQ CARD */
.faq-item {
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(15px);
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
  transition: 0.4s;
}

/* HOVER GLOW */
.faq-item:hover {
  box-shadow: 0 10px 25px #7fa0de;
}

/* QUESTION */
.faq-q {
  padding: 18px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

/* ANSWER */
.faq-a {
  max-height: 0;
  opacity: 0;
  padding: 0 18px;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  overflow: hidden;
  line-height: 1.7;
}

/* ACTIVE */
.faq-item.active .faq-a {
  max-height: 300px;
  opacity: 1;
  padding: 15px 18px;
}

/* GROUP ANIMATION */
.faq-group {
  display: none;
  animation: fadeSlide 0.5s ease;
}

.faq-group.active {
  display: block;
}

@keyframes fadeSlide {
  from {
    opacity:0;
    transform:translateY(20px);
  }

  to {
    opacity:1;
    transform:translateY(0);
  }
}

/* NO RESULT */
#noResult {
  display: none;
  text-align: center;
  margin-top: 20px;
}

/* MOBILE */
@media(max-width:768px){
  .faq-q {font-size:15px;}
  .faq-search input {padding:12px;}
}

/* HIGHLIGHT */
mark {
background: #ff8c00;
padding: 2px 4px;
border-radius: 4px;
}

/* SCROLL ANIMATION */
.hidden {
opacity: 0;
transform: translateY(30px);
}

.show {
opacity: 1;
transform: translateY(0);
transition: 0.6s ease;
}

/* RIPPLE EFFECT */
.faq-categories button {
position: relative;
overflow: hidden;
}

.ripple {
position: absolute;
width: 100px;
height: 100px;
background: rgba(255,255,255,0.5);
border-radius: 50%;
transform: scale(0);
animation: rippleAnim 0.6s linear;
}

@keyframes rippleAnim {
to {
transform: scale(4);
opacity: 0;
}
}

/* BIGGER TOUCH BUTTONS */
.faq-categories button {
padding: 14px 24px;
font-size: 15px;
}

/* SMOOTH ACCORDION */
.faq-a {
transition: max-height 0.4s ease, opacity 0.4s ease;
}

/* GLASS STRONGER */
.faq-item {
background: rgba(255,255,255,0.25);
backdrop-filter: blur(20px);
}

mark {
  background: #e1deda;
  padding: 0;
  border-radius: 2px;
}