/* FAQ INTRO SECTION */
.faq-intro-section {
  padding:40px 20px 0px 20px;
  background:white;
}

.faq-intro-container {
  max-width: 1200px;
  margin: auto;
  color: #f3efef;
}

/* TITLE */
.faq-intro-title {
  text-align: center;
  font-size: 44px;
  font-weight: 700;
  margin-bottom: 20px;
}

.faq-intro-title span {
  display: block;
  font-size: 16px;
  margin-top: 10px;
  color:  #d78320;
  letter-spacing: 1px;
}

/* INTRO TEXT */
.faq-intro-text {
  text-align: center;
  font-size: 17px;
  line-height: 1.8;
  color: #373a3f;
}

/* CARDS */
.faq-intro-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.faq-card {
  background:white;
  border-radius: 18px;
  padding: 35px;
  border:1px solid #d78320;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px #d78320;
}

.faq-card h3 {
  margin-bottom: 18px;
  color:#373a3f;
}
.faq-card h4 {
  margin-bottom: 18px;
  color:#373a3f;
}

.faq-card ul {
  padding-left: 18px;
}

.faq-card li {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #373a3f;
}

/* HIGHLIGHT CARD */


/* FOOTER */
.faq-intro-footer {
  margin-top: 5px;
  padding: 30px 30px 30px 0px;
  border-radius: 16px;
}

.faq-intro-footer p {
  font-size: 16px;
  color: #aaa;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .faq-intro-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .faq-intro-title {
    font-size: 30px;
  }

  .faq-intro-text {
    font-size: 15px;
  }
}

.faq-card li {
  position: relative;
}




    .category-panel {
  display: none;
}

.category-panel.active {
  display: block;
}

    .tz-bg-neutral3 {
      background-color: #121212;
    }

    .tz-text-neutral5,
    .tz-text-neutral6,
    .tz-text-l,
    .tz-breadcrumb__title,
    .tz-breadcrumb__list a,
    .section-title {
      color: #e0e0e0;
    }

    .tz-breadcrumb {
      background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
      color: white;
    }

    .tz-breadcrumb__overlay {
      display: none;
    }

    /* FAQ Section */
    .faq-section {
      padding: 20px 0 20px 0;
    }

    .section-title {
      font-family: 'Teko', sans-serif;
      font-size: 2.8rem;
      font-weight: 600;
      text-align: center;
      margin-bottom: 20px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .faq-intro {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 30px;
      color: #aaa;
      font-size: 16px;
    }

    /* Search Bar */
    .faq-search {
      text-align: center;
      margin-bottom: 20px;
    }

    .faq-search input {
      max-width: 500px;
      width: 100%;
      padding: 12px 20px;
  border: 2px solid #d78320 !important;
      border-radius: 12px;
background: #fff;
      color: #223740;
      font-size: 16px;
      outline: none;
    }

    .faq-search input:focus {
      border-color: #d78320;
    }

    /* Tabs */
   /* ==============================
   FAQ TABS - BASE (ALL SCREENS)
============================== */
.faq-tabs {
  display: flex;
  flex-wrap: wrap; /* IMPORTANT */
  justify-content: center;
  gap: 12px;
  margin: 0 auto 30px;
  max-width: 1200px;
  padding: 0 10px;
}

.faq-tabs button {
  padding: 12px 22px;
  background: #d78320;
  border: none;
  color: #ddd;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  line-height: 1.3;
  white-space: normal; /* IMPORTANT for long text */
}

.faq-tabs button:hover {
  background: #223740;
  color: #fff;
}

.faq-tabs button.active {
  background: #223740;;
  color: #fff;
}

/* ==============================
   MOBILE (≤ 575px)
   1 BUTTON PER ROW
============================== */
@media (max-width: 575px) {
  .faq-tabs {
    flex-direction: column;
    align-items: stretch;
  }

  .faq-tabs button {
    width: 100%;
    font-size: 14px;
    padding: 14px 16px;
  }
}

/* ==============================
   SMALL TABLETS (576px-767px)
   2 BUTTONS PER ROW
============================== */
@media (min-width: 576px) and (max-width: 767px) {
  .faq-tabs button {
    flex: 1 1 calc(50% - 12px);
    font-size: 14px;
  }
}

/* ==============================
   TABLETS (768px-1024px)
   3 BUTTONS PER ROW
============================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .faq-tabs {
    max-width: 95%;
  }

  .faq-tabs button {
    flex: 1 1 calc(33.33% - 12px);
    min-width: 220px;
    font-size: 15px;
  }
}

/* ==============================
   LAPTOPS (1025px-1280px)
   4 BUTTONS PER ROW
============================== */
@media (min-width: 1025px) and (max-width: 1280px) {
  .faq-tabs button {
    flex: 1 1 calc(25% - 12px);
  }
}

/* ==============================
   DESKTOP (≥1281px)
   AUTO FIT CENTERED
============================== */
@media (min-width: 1281px) {
  .faq-tabs {
    justify-content: center;
  }

  .faq-tabs button {
    flex: 0 0 auto;
    font-size: 15px;
  }
}

    /* FAQ Container */
    .faq-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* FAQ Content Wrapper */
    .faq-content-wrapper {
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
    }

    /* Scrollable FAQ Content */
    .faq-scrollable-content {
      flex: 1;
      min-width: 300px;
      max-height: 78vh;
      overflow-y: auto;
      background: #e7e7e9;
      border-radius: 12px;
      padding: 20px;
      border: 1px solid #333;
      margin-bottom: 30px;
    }

    .faq-scrollable-content::-webkit-scrollbar {
      width: 8px;
    }

    .faq-scrollable-content::-webkit-scrollbar-thumb {
      background: #444;
      border-radius: 4px;
    }

    /* FAQ Item */
    .faq-item {
      margin-bottom: 16px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      background: #252525;
    }

    .faq-question {
      width: 100%;
      text-align: left;
      padding: 16px 20px;
      background: #373a3f;
      border: none;
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.3s ease;
    }

    .faq-question:hover {
      background: #444;
    }

    .faq-question .icon {
      width: 20px;
      height: 20px;
      stroke: #d78320;
      stroke-width: 2.5;
      transition: transform 0.3s ease;
    }

    .faq-item.active .faq-question .icon {
      transform: rotate(180deg);
    }

    .faq-answer {
      padding: 0 20px;
      color: #bbb;
      line-height: 1.7;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.5s ease, opacity 0.4s ease;
    }
    .faq-item {
    cursor: pointer;
}


    .faq-item.active .faq-answer {
      padding: 20px;
      max-height: 800px;
      opacity: 1;

    }

    /* Right Side Image Section */
    .faq-image-section {
      flex: 0 0 300px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .faq-image-section img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    /* Responsive */
    @media (max-width: 992px) {
      .faq-image-section {
        display: none;
      }
    }
@media (max-width: 760px) {
      .section-title {
        font-size: 2.2rem;
        margin-top:26px;
      }
    }
    @media (max-width: 768px) {
      .section-title {
        font-size: 2.2rem;
      }

      .faq-question {
        font-size: 17px;
        padding: 14px;
      }

      .faq-answer {
        font-size: 15px;
      }
    }
    /* Breadcrumb Banner Section */
    .tz-breadcrumb {
      position: relative;
      background-image: url('../images/breadcrumb/FAQ.jpg');
      background-size: cover;
      padding: 162px 0 154px;
      text-align: center;
      z-index: 1;
    }

    .tz-breadcrumb::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
background: linear-gradient(135deg, rgb(0 0 0 / 12%), rgba(10, 25, 47, 0.7));      z-index: -1;
    }
     @media (max-width: 767px) {
    .tz-breadcrumb {
       background-size: contain;
        background-position: center center;
        background-attachment: scroll;
        /* min-height: 400px; */
        /* height: auto; */
        min-height: 313px;
        background-repeat: no-repeat;   }
        .tz-header1 {
    position: fixed;
    top: -14px;
    z-index: 999;
    width: 100%;
    background-color: #fff0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.tz-breadcrumb {
    padding: 146px 0;
    padding-top: 119px;
    padding-bottom: 0px;

}
    .tz-breadcrumb__title {
        font-size: 0rem !important;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    }
    .tz-about2 {
    background: #171717;
    padding: -1.25rem 0rem 3.75rem 0rem;
}
.tz-breadcrumb__list {
    display: flex
;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin-top: 57px;
    padding: 0;
    gap: 10px;
}
.faq-section {
    padding: 0px 0;
}
.faq-tabs
 {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 30px;
    max-width: 1200px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    flex-direction: column;
}
     }

.faq-search-wrap {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.faq-search-wrap i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #d78320;
  font-size: 18px;
}

.faq-search-wrap input {
  padding-left: 48px !important; /* space for icon */
}