body {
      font-family: "Oswald", "Mukta", sans-serif;
      background: #f8fafc;
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    .faq-section {
      text-align: center;
      padding: 60px 80px;
    }

    .faq-section h2 {
      font-size: 3rem;
      font-weight: 800;
      color: #0d172a;
      margin-bottom: 40px;
    }

    /* Previous Code
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
*/

    /* .faq-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
} */


    .faq-card {
      background: #fff;
      border-radius: 15px;
      padding: 35px 20px;
      font-size: 1.1rem;
      font-weight: 600;
      color: #0f172a;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
      position: relative;
      transition: all 0.3s ease;
      width: 95%;
    }

    .faq-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    }



    /* Responsive */
    @media (max-width: 992px) {
      .faq-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .faq-card {
        width: 95%;
      }
    }

    @media (max-width: 600px) {
      .faq-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .faq-section {
        padding: 60px 80px 60px 50px;
      }
    }


    .faq-card .icon {
      display: flex;
      align-items: center !important;
      justify-content: center;
      background: #fff;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin: 0 auto 15px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    }

    .faq-card .icon i {
      align-self: center;
      font-size: 26px;
    }

    /*icon colors*/
    .i-blue {
      color: oklch(48.8% .243 264.376);
    }

    .i-pink {
      color: oklch(51.8% .253 323.949);
    }

    .i-orange {
      color: oklch(55.3% .195 38.402);
    }

    .i-indigo {
      color: oklch(45.7% .24 277.023);
    }

    .i-green {
      color: oklch(53.2% .157 131.589);
    }

    .i-slate {
      color: oklch(37.2% .044 257.287);
    }

    .i-cyan {
      color: oklch(52% .105 223.128);
    }

    .i-embreld {
      color: oklch(50.8% .118 165.612);
    }

    .i-purple {
      color: oklch(45.9% .208 306.391);
    }


    /* Pastel Background Colors */
    .peach {
      background-color: #fff5ec;
    }

    .pink {
      background-color: #f9ecff;
    }

    .blue {
      background-color: #eaf4ff;
    }

    .violet {
      background-color: #eef0ff;
    }

    .green {
      background-color: #f4ffe9;
    }

    .gray {
      background-color: #f3f6f7;
    }

    .cyan {
      background-color: #e8fbff;
    }

    .mint {
      background-color: #e9fff8;
    }

    .yellow {
      background-color: #fff9ed;
    }

    .purple {
      background-color: #f6f0ff;
    }

    .teal {
      background-color: #ecfcff;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .faq-section h2 {
        font-size: 1.6rem;
      }

      .faq-card {
        padding: 25px 15px;
      }

      .faq-card .icon {
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 22px;
      }
    }

    .faq-row {
      display: grid;
      gap: 3rem;
    }

    .row-1 {
      grid-template-columns: repeat(3, 1fr);
      margin: 40px 90px ;
    }

    .row-2 {
      grid-template-columns: repeat(4, 1fr);
      margin-top: 2.5rem;
    }

    .row-3 {
      grid-template-columns: repeat(4, 1fr);
      margin-top: 2.5rem;
    }


    /* Responsive */
    @media (max-width: 1024px) {
      .row-1 {
        grid-template-columns: repeat(2, 1fr);
        margin: 40px 0px !important;
      }

      .row-2,
      .row-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {

      .row-1,
      .row-2,
      .row-3 {
        grid-template-columns: 1fr;
      }

      .card {
        padding: 1.5rem 1rem;
      }
    }