*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    

    /* Uses content-grid from main.css */
    .faq-section.content-grid {
      padding-block: 80px;
    }

    /* ── Desktop layout ── */
    .faq-outer {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      min-height: 540px;
      align-items: stretch;
    }

    .faq-img-col {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      z-index: 1;
    }
    .faq-img-col img,
    .faq-img-col svg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .faq-panel-col {
      position: relative;
      z-index: 2;
      margin-left: -60px;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .faq-panel-border {
      background: #fff;
      border-radius: 20px;
      padding: 10px;
      height: 100%;
      box-sizing: border-box;
    }

    .faq-panel {
     background: url(../assets/images/img/fbg.png) #1971a5 !important;
      padding: 48px 44px;
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      height: 100%;
      box-sizing: border-box;
    }

    .hex-bg {
      position: absolute;
      top: 8px;
      right: 8px;
      opacity: 0.13;
      pointer-events: none;
    }
.tag-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    padding: 8px 25px 8px 20px;
    margin-bottom: 14px;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);

    /* remove old styles */
    border-radius: 0;
}
   
    .tag-line span {
      color: #ffff;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.04em;
    }
    .tag-line::before {
      content: "//";
      color: #fff;
      font-size: 14px;
      font-weight: 700;
    }

    .faq-title {
      font-size: 24px;
      font-weight: 700;
      color: #fff;
      margin: 0 0 12px;
      line-height: 1.25;
    }

    .faq-desc {
      font-size: 16px;
      color: rgba(255,255,255,0.72);
      line-height: 1.65;
      margin: 0 0 24px;
    }

    /* ── Accordion ── */
    .accordion-list { display: flex; flex-direction: column; gap: 12px; }

    .acc-item { border-radius: 10px; background: #fff; overflow: hidden; }

    .acc-header {
      display: flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      padding: 0 14px 0 0;
      transition: background 300ms;
    }
    .acc-item.open .acc-header {
      background: linear-gradient(135deg, #e17416 0, #f97809 100%);
      border-radius: 10px 10px 0 0;
    }

    .acc-num {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
     background: linear-gradient(135deg, #e17416 0, #f97809 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      position: relative;
      margin: 8px 0 8px 8px;
      transition: background 300ms;
    }
    .acc-item.open .acc-num { background: #fff; }
    .acc-num::after {
      content: "";
      position: absolute;
      right: -9px;
      top: 50%;
      transform: translateY(-50%);
      border-style: solid;
      border-width: 9px 0 9px 9px;
      border-color: transparent transparent transparent #2478a9;
    }
    .acc-item.open .acc-num::after {
      border-color: transparent transparent transparent #f28b21fa;
    }

    .acc-title {
      flex: 1;
      font-size: 16px;
      font-weight: 600;
      color: #131111;
      padding: 13px 10px;
      line-height: 1.35;
    }

    .acc-icon { width: 18px; height: 18px; position: relative; flex-shrink: 0; }
    .acc-icon::before,
    .acc-icon::after {
      content: "";
      position: absolute;
      background: #f28b21fa;
      transition: all 300ms;
    }
    .acc-icon::before { width: 2px; height: 14px; top: 2px; left: 8px; }
    .acc-icon::after  { width: 14px; height: 2px; top: 8px; left: 2px; }
    .acc-item.open .acc-icon::before { opacity: 0; }
    .acc-item.open .acc-icon::after  { background: #2478a9; }

    .acc-body { display: none; padding: 12px 14px 14px; align-items: center; gap: 12px; }
    .acc-item.open .acc-body { display: flex; }

    .acc-thumb {
      width: 62px;
      height: 62px;
      flex-shrink: 0;
      border-radius: 6px;
      overflow: hidden;
      background: #f28b21fa;
    }
    .acc-thumb img {
      width: 62px;
      height: 62px;
      object-fit: cover;
      display: block;
    }

    .acc-body p { font-size: 14px; color: #444; line-height: 1.6; margin: 0; }

    .acc-item.open .acc-title {
  color: #fff;
}

.acc-item.open .acc-num {
  background: #fff;
  color: #000;
}

    /* ── Tablet & Mobile: stacked layout ── */
    @media (max-width: 991px) {
      .faq-section.content-grid { padding-block: 24px; }

      .faq-outer {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-height: unset;
      }

      .faq-img-col {
        width: 100%;
        /* height: 320px; */
        border-radius: 20px;
        overflow: hidden;
        flex-shrink: 0;
      }

      .faq-panel-col { margin: 0; z-index: 1; }

      .faq-panel-border { border-radius: 20px; padding: 8px; height: auto; }
      .faq-panel { border-radius: 14px; padding: 36px 28px; height: auto; }

      .faq-title { font-size: 24px; }
      .faq-desc  { font-size: 14px; margin-bottom: 20px; }
      .hex-bg    { width: 110px; height: 110px; }
    }

    /* ── Small mobile adjustments ── */
    @media (max-width: 767px) {
      /* .faq-img-col { height: 280px; } */
      .faq-panel { padding: 28px 20px; }
        .acc-thumb { display: none; }
    }

    @media (max-width: 480px) {
      /* .faq-img-col { height: 220px; } */
      .faq-panel   { padding: 22px 16px; }
      .faq-title   { font-size: 21px; }
      .faq-desc    { font-size: 12px; }
      .acc-num     { width: 42px; height: 42px; font-size: 14px; margin: 6px 0 6px 6px; }
      .acc-num::after { right: -7px; border-width: 7px 0 7px 7px; }
      .acc-title   { font-size: 16px; padding: 11px 8px; }
      .acc-body    { gap: 10px; padding: 10px 12px 12px 10px; }
      .acc-thumb   { width: 52px; height: 52px; }
      .acc-thumb img { width: 52px; height: 52px; }
      .acc-body p  { font-size: 14px; }
    }