/* Theme color */
      .infra-text-color {
          color: #0077B5;
          font-weight: 700;
      }

      /* FAQ Wrapper */
      .faq-wrapper {
          max-width: 900px;
          margin: auto;
      }

      /* FAQ Item Card */
      .faq-item {
          background: linear-gradient(135deg, #ffffff, #f0f4f8);
          border-radius: 15px;
          margin-bottom: 15px;
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
          overflow: hidden;
          transition: transform 0.3s, box-shadow 0.3s;
          cursor: pointer;
      }

      .faq-item:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
      }

      /* FAQ Question */
      .faq-question {
          display: flex;
          align-items: center;
          padding: 20px 25px;
          font-size: 16px;
          font-weight: 500;
          position: relative;
          transition: background 0.3s;
      }

      .faq-icon {
          font-size: 22px;
          color: #0077B5;
          margin-right: 15px;
          flex-shrink: 0;
          transition: transform 0.3s, color 0.3s;
      }

      .toggle-icon {
          margin-left: auto;
          font-size: 18px;
          color: #0077B5;
          transition: transform 0.3s, color 0.3s;
      }

      /* FAQ Answer */
      .faq-answer {
          padding: 0 25px;
          font-size: 14px;
          color: #555;
          line-height: 1.6;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.5s ease, padding 0.5s ease;
      }

      /* Active State */
      .faq-item.active .faq-answer {
          padding: 15px 25px 20px;
          max-height: 500px;
      }

      .faq-item.active .toggle-icon {
          transform: rotate(45deg);
          color: #005983;
      }

      .faq-item.active .faq-icon {
          transform: rotate(20deg);
          color: #005983;
      }