/* Start custom CSS for html, class: .elementor-1254 .elementor-element.elementor-element-051551e */
/*==========================================================
  TABANI GROUPE — FAQ PAGE
  Depends on the brand tokens in tabani-hero-section.css
  (--tg-navy, --tg-navy-deep, --tg-accent, --tg-slate-soft,
  fonts, .tg-eyebrow, .tg-btn, .tg-container, --tg-radius,
  --tg-shadow-lg). Load that file first.
==========================================================*/

/*=====================================
FAQ HERO BANNER
======================================*/

.tg-faq-hero{
  position:relative;
  min-height:320px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.tg-faq-hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.tg-faq-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(18,32,63,.94) 0%, rgba(18,32,63,.82) 45%, rgba(18,32,63,.45) 100%);
  z-index:1;
}
.tg-faq-hero__overlay{
  position:relative;
  z-index:2;
  padding:70px 0;
  width:100%;
}
.tg-faq-hero__overlay h1{
  font-family:var(--tg-font-head);
  font-weight:800;
  font-size:clamp(30px, 4vw, 44px);
  color:var(--tg-white);
  margin:0 0 16px;
  letter-spacing:-.4px;
}
.tg-faq-hero__overlay p{
  font-family:var(--tg-font-body);
  color:rgba(255,255,255,.8);
  font-size:16px;
  line-height:1.75;
  max-width:56ch;
  margin:0;
}

/*=====================================
SECTION SHELL
======================================*/

.tg-faq{
  padding:70px 0 100px;
  background:var(--tg-white);
}

/*=====================================
JUMP NAV
======================================*/

.tg-faq-jumpnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:20px;
  background:var(--tg-slate-soft);
  border-radius:14px;
  margin-bottom:56px;
}
.tg-faq-chip{
  font-family:var(--tg-font-body);
  font-weight:600;
  font-size:13.5px;
  color:var(--tg-navy);
  background:var(--tg-white);
  border:1px solid #E1E5EC;
  padding:9px 16px;
  border-radius:30px;
  text-decoration:none;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.tg-faq-chip:hover{
  background:var(--tg-navy);
  color:var(--tg-white);
  border-color:var(--tg-navy);
}

/*=====================================
CATEGORY BLOCK
======================================*/

.tg-faq-category{
  scroll-margin-top:24px;
  margin-bottom:60px;
}
.tg-faq-category:last-of-type{
  margin-bottom:0;
}
.tg-faq-category__head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:2px solid var(--tg-slate-soft);
}
.tg-faq-category__icon{
  flex:none;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tg-navy);
  color:var(--tg-white);
  border-radius:12px;
}
.tg-faq-category__icon svg{
  width:20px;
  height:20px;
}
.tg-faq-category__head h2{
  font-family:var(--tg-font-head);
  font-weight:700;
  font-size:22px;
  color:var(--tg-navy-deep);
  margin:0;
}

/*=====================================
ACCORDION (native <details>/<summary>)
======================================*/

.tg-faq-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tg-faq-item{
  border:1px solid #E7E9EE;
  border-radius:12px;
  overflow:hidden;
  background:var(--tg-white);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.tg-faq-item[open]{
  border-color:rgba(27,46,90,.2);
  box-shadow:0 12px 28px -18px rgba(18,32,63,.25);
}

.tg-faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  font-family:var(--tg-font-head);
  font-weight:700;
  font-size:15.5px;
  color:var(--tg-navy-deep);
}
.tg-faq-item summary::-webkit-details-marker{
  display:none;
}
.tg-faq-item summary:hover{
  background:var(--tg-slate-soft);
}

.tg-faq-chevron{
  flex:none;
  width:18px;
  height:18px;
  color:var(--tg-navy);
  transition:transform .3s ease;
}
.tg-faq-item[open] .tg-faq-chevron{
  transform:rotate(180deg);
}

.tg-faq-answer{
  padding:0 22px 20px;
}
.tg-faq-answer p{
  font-family:var(--tg-font-body);
  font-size:14.5px;
  line-height:1.8;
  color:var(--tg-ink-muted);
  margin:0;
  max-width:70ch;
}

/*=====================================
PHOTO BREAK PANELS
======================================*/

.tg-faq-photo-break{
  position:relative;
  border-radius:var(--tg-radius);
  overflow:hidden;
  box-shadow:var(--tg-shadow-lg);
  margin:60px 0;
  min-height:220px;
  display:flex;
  align-items:flex-end;
}
.tg-faq-photo-break img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.tg-faq-photo-break::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(18,32,63,.85) 0%, rgba(18,32,63,.15) 60%, transparent 100%);
  z-index:1;
}
.tg-faq-photo-break p{
  position:relative;
  z-index:2;
  font-family:var(--tg-font-head);
  font-weight:700;
  font-size:18px;
  color:var(--tg-white);
  margin:0;
  padding:26px 30px;
}

/*=====================================
CLOSING CTA
======================================*/

.tg-faq-cta{
  text-align:center;
  background:var(--tg-slate-soft);
  border-radius:var(--tg-radius);
  padding:56px 32px;
  margin-top:60px;
}
.tg-faq-cta h2{
  font-family:var(--tg-font-head);
  font-weight:800;
  font-size:clamp(24px, 3vw, 30px);
  color:var(--tg-navy-deep);
  margin:0 0 14px;
}
.tg-faq-cta p{
  font-family:var(--tg-font-body);
  color:var(--tg-ink-muted);
  font-size:15.5px;
  max-width:52ch;
  margin:0 auto 30px;
  line-height:1.75;
}
.tg-faq-cta__actions{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

/*=====================================
RESPONSIVE
======================================*/

@media (max-width:640px){
  .tg-faq-hero__overlay{ padding:52px 0; }
  .tg-faq{ padding:50px 0 70px; }
  .tg-faq-jumpnav{ margin-bottom:40px; }
  .tg-faq-category{ margin-bottom:44px; }
  .tg-faq-item summary{ padding:16px 18px; font-size:14.5px; }
  .tg-faq-answer{ padding:0 18px 18px; }
  .tg-faq-cta{ padding:40px 22px; }
  .tg-faq-cta__actions .tg-btn{ width:100%; justify-content:center; }
}
/* End custom CSS */
/* Start custom CSS for e-flexbox, class: .elementor-1254 .elementor-element.elementor-element-458544c */
/* End custom CSS */