/* FAQ section style */
.home-esteem {
  padding: 5.208vw 3.125vw;
}

.home-esteem-cust {
  padding: 0  3.125vw 3.125vw;
}

.faq-section-wrapper{
  background-color: #F7F6F6 !important;
}

.faq_cont_wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.FAQ_Title {
  font-family: "Cherston", sans-serif;
  font-size: 2.75rem;
    line-height: 3.25rem;
  text-align: center;
}
/* .faq_btn {
  border: 1px solid #333f49;
} */
/* .faq_btn_border{
  border: 1px solid #333f49;
} */

.faq-btn {
    outline: none !important;
    box-shadow: none !important;
    border: none;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* THE FIX FOR THE BLUE COLOR */
    -webkit-tap-highlight-color: transparent;
}

/* Ensure no outline appears on focus for mobile/chrome */
.faq-btn:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.faq_question {
    line-height: 1.6rem;
    font-family: "Centrale", sans-serif;
    width: 96%;
    margin-right: 8px;
    font-size: 1.5rem !important;
    font-weight: 600;
}

.faq_answer {
    font-family: "Centrale", sans-serif;
    font-size: 1.2rem; /* approx 16px */
    line-height: 1.6rem;
    font-weight: 400 !important;
    background-color: #ffffff;
    /* border: 1px solid #333f49 !important; */
}

.btn-bg {
  background-color: #FFFFFF;
}
/* The Hover state with a deeper, visible shadow */
.shadow-custom:hover {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* outline focus elimination */
/* ===== REMOVE ALL BUTTON FOCUS / OUTLINE ===== */

.faq-btn,
.faq-btn:focus,
.faq-btn:focus-visible,
.faq-btn:active {
  outline: none !important;
  box-shadow: none !important;
  border: none;
}



/* 1. The Container (The Grid Hack) */
.faq-content {
    display: grid;
    grid-template-rows: 0fr; /* Start at 0 fraction of height */
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Standard 'Decelerate' easing */
    background-color: #ffffff;
}

/* 2. The Inner Wrapper (Essential for smooth padding) */
.faq-content-inner {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0.4s;
}

/* 3. The Active State */
.faq-item.active .faq-content {
    grid-template-rows: 1fr; /* Expand to full natural height */
}

.faq-item.active .faq-content-inner {
    visibility: visible;
}

/* 4. The Icon Rotation */
.faq-btn .icon {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.faq-item.active .icon {
    transform: rotate(45deg); /* Rotates + into a clean 'x' or close symbol */
}

.faq-bg-cust {
   background-color: #e8e8e8 !important;
}

/* faq style for project detail  */
/* Ensure the wrapper doesn't clip the animation */
.faq-section-wrapper-project-detail {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* Ensure children are visible by default so GSAP can take over */
.faq-item {
    will-change: transform, opacity;
}




/* mobile responsive */

@media (max-width: 1024px) {
      .home-esteem {
        padding: 70px 15px;
      }
      .home-esteem-cust {
  padding: 0  15px 70px;
}
  .faq_question  {
    font-size: 1.3rem !important;
  }
  .faq_answer {
    font-size: 1.1rem !important;
  }
}



@media (max-width: 768px) {
  .popup__close {
    top: -15px;
  }
  /* faq mobile style */
  .faq_cont_wrapper {
    gap: 12px !important;
  }
	    .faq_question {
          font-size: 1.2rem !important;
          line-height: 4.708vw !important;
    }

    .faq_answer {
        font-size: 1rem !important;
        line-height: 4.708vw !important;
    }
    .FAQ_Title {
        font-size: 5.60vw !important;
        line-height: 7.125vw !important;
    }
}

/* maxwidth 516 */
@media (max-width: 576px) {
      .home-esteem {
        padding: 0 15px 30px;
    }
  .faq_question {
    line-height: 6.708vw !important;
  }

  .faq_answer {
    font-size: 1rem !important;
    line-height: 7.0vw !important;
  }
}