:root {
      --cyan: #053d7c;
      --blue: #0360c4;
      --dark: #111827;
      --muted: #737b88;
      --border: rgba(255, 255, 255, 0.8);
    }

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

    .why-wd-section {
      position: relative;
      overflow: hidden;
      padding: 80px 0 100px;

      background:
      radial-gradient(circle at 4% 48%, rgb(2 55 126 / 8%) 0, rgb(3 77 175 / 7%) 13%, transparent 30%), radial-gradient(circle at 96% 53%, rgba(75, 165, 242, 0.19) 0, rgba(75, 165, 242, 0.08) 13%, transparent 31%), #fbfcfe;
    }

    .why-wd-container {
      position: relative;
      z-index: 2;
      max-width: 1180px;
    }

    /* =====================================================
       HEADER
    ===================================================== */

    .eyebrow {
      margin-bottom: 9px;

      color: #053d7c;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* .section-title {
      margin: 0 0 22px;

      font-size: 39px;
      line-height: 1.1;
      font-weight: 400;
      letter-spacing: -1.5px;
    }

    .section-title .highlight {
      color: #1ca6c6;
    }

    .section-description {
      max-width: 940px;
      margin-bottom: 82px;

      color: #5f6672;
      font-size: 19px;
      line-height: 1.7;
      font-weight: 400;
    } */

    /* =====================================================
       CARDS
    ===================================================== */

    .wd-card {
      position: relative;
      height: 188px;
      padding: 24px 20px;

      overflow: hidden;

      border: 1px solid rgba(255, 255, 255, 0.95);
      border-radius: 9px;

      background:
        linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.92),
          rgba(246, 249, 252, 0.82)
        );

      box-shadow:
        0 12px 35px rgba(47, 80, 112, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

      transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    }

    /* First card is selected in screenshot */
    .wd-card.active {
      border: 2px solid rgb(17 24 32 / 5%);
    }

    /* =====================================================
       FLICKERING TOP EFFECT
    ===================================================== */

    /*
      Hidden glowing line at the top.
      It moves from left to right when the card is hovered.
    */

    .wd-card::before {
      content: "";

      position: absolute;
      z-index: 5;

      top: -2px;
      left: -35%;

      width: 35%;
      height: 3px;

      opacity: 0;

      border-radius: 100px;

      background: linear-gradient(
        90deg,
        transparent,
        #053d7c,
        #ffffff,
        #42b9ed,
        transparent
      );

      box-shadow:
        0 0 8px #053c7c17,
        0 0 20px rgba(44, 217, 220, 0.45);

      transform: translateX(0);
    }

    .wd-card:hover::before {
      opacity: 1;
      animation: topFlicker 1.15s ease-in-out infinite;
    }

    @keyframes topFlicker {
      0% {
        left: -35%;
        opacity: 0;
      }

      8% {
        opacity: 1;
      }

      20% {
        opacity: 0.35;
      }

      30% {
        opacity: 1;
      }

      48% {
        opacity: 0.65;
      }

      70% {
        opacity: 1;
      }

      100% {
        left: 100%;
        opacity: 0;
      }
    }

    /* =====================================================
       CARD HOVER
    ===================================================== */

    .wd-card:hover {
      transform: translateY(-8px);

      border-color: #053c7c3f;

      box-shadow:
        0 22px 45px rgb(209, 25, 34, 0.18),
        0 0 0 1px rgb(209, 25, 34, 0.6),
        0 0 24px rgb(209, 25, 34, 0.8);
    }

    /* Extra flicker around the card */
    .wd-card:hover {
      animation: cardFlicker 2.4s ease-in-out infinite;
    }

    @keyframes cardFlicker {
      0%,
      100% {
        box-shadow:
          0 22px 45px rgba(37, 91, 130, 0.12),
          0 0 0 1px rgba(42, 203, 211, 0.06);
      }

      45% {
        box-shadow:
          0 22px 45px rgba(37, 91, 130, 0.12),
          0 0 18px rgba(42, 203, 211, 0.12);
      }

      48% {
        box-shadow:
          0 22px 45px rgba(37, 91, 130, 0.15),
          0 0 7px rgba(42, 203, 211, 0.05);
      }

      52% {
        box-shadow:
          0 22px 45px rgba(37, 91, 130, 0.12),
          0 0 22px rgba(42, 203, 211, 0.15);
      }
    }

    /* =====================================================
       ICON
    ===================================================== */

    .wd-icon {
      position: relative;
      z-index: 2;

      width: 40px;
      height: 40px;

      display: flex;
      align-items: center;
      justify-content: center;

      margin-bottom: 18px;

      border-radius: 8px;

      color: #fff;
      font-size: 21px;

      background: var(--accent-color);

      box-shadow:0 4px 12px rgb(209, 25, 34, 0.18) !important;

      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    }

    .wd-card:nth-child(2) .wd-icon {
      background: #00a5dc;
    }

    .wd-card:nth-child(3) .wd-icon {
      background: #087de0;
    }

    .wd-card:hover .wd-icon {
      transform: translateY(-2px) scale(1.06);
      box-shadow:
        0 5px 18px rgba(0, 166, 220, 0.28);
    }

    /* =====================================================
       CARD TEXT
    ===================================================== */

    .card-label {
      position: relative;
      z-index: 2;

      margin-bottom: 6px;

      color: #737b86;
      font-size: 12px;
      font-weight: 500;
    }

    .card-title {
      position: relative;
      z-index: 2;

      margin: 0;

      color: #111827;
      font-size: 16px;
      line-height: 1.3;
      font-weight: 700;
    }

    .card-description {
      position: absolute;
      z-index: 2;

      left: 20px;
      bottom: 25px;

      margin: 0;

      color: #7b838e;
      font-size: 12px;
      font-weight: 400;
    }

    /* =====================================================
       DECORATIVE GRAPHICS
    ===================================================== */

    .decor {
      position: absolute;
      pointer-events: none;
      z-index: 1;
    }

    /* First card - curved rings */

    .decor-rings {
      right: -7px;
      bottom: -8px;

      width: 75px;
      height: 75px;
    }

    .decor-rings span {
      position: absolute;

      right: 0;
      bottom: 0;

      display: block;

      border:4px solid rgb(47 123 225 / 0%);
      border-right-color: transparent;
      border-bottom-color: transparent;

      border-radius: 50%;
      transform: rotate(45deg);
    }

    .decor-rings span:nth-child(1) {
      width: 75px;
      height: 75px;
    }

    .decor-rings span:nth-child(2) {
      width: 58px;
      height: 58px;

      right: -1px;
      bottom: -1px;

      border-color: rgba(66, 202, 215, 0.19);
      border-right-color: transparent;
      border-bottom-color: transparent;
    }

    .decor-rings span:nth-child(3) {
      width: 40px;
      height: 40px;

      right: -2px;
      bottom: -2px;

      border-color: rgba(82, 159, 224, 0.24);
      border-right-color: transparent;
      border-bottom-color: transparent;
    }

    .decor-rings span:nth-child(4) {
      width: 22px;
      height: 22px;

      right: -3px;
      bottom: -3px;

      border-color: rgba(145, 114, 220, 0.4);
      border-right-color: transparent;
      border-bottom-color: transparent;
    }

    /* Second card - diagonal lines */

    .decor-lines {
      right: -3px;
      bottom: 0;

      width: 52px;
      height: 60px;

      opacity: 0.55;
    }

    .decor-lines span {
      position: absolute;

      width: 29px;
      height: 3px;

      border-radius: 10px;

      transform: rotate(-54deg);
    }

    .decor-lines span:nth-child(1) {
      right: 3px;
      top: 13px;
      background: #a9dce8;
    }

    .decor-lines span:nth-child(2) {
      right: 1px;
      top: 29px;
      background: #c6b4eb;
    }

    .decor-lines span:nth-child(3) {
      right: -1px;
      top: 45px;
      background: #8fd9e7;
    }

    /* Third card - dots */

    .decor-dots {
      right: 0;
      bottom: 0;

      width: 42px;
      height: 42px;

      display: grid;
      grid-template-columns: repeat(3, 7px);
      grid-auto-rows: 7px;
      gap: 5px;

      align-content: end;
      justify-content: end;

      opacity: 0.45;
    }

    .decor-dots span {
      width: 7px;
      height: 7px;

      border-radius: 50%;

      background: #7fcde7;
    }

    .decor-dots span:nth-child(2),
    .decor-dots span:nth-child(6) {
      background: #a8c8ec;
    }

    .decor-dots span:nth-child(4) {
      background: #bba6e7;
    }

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

    @media (max-width: 991.98px) {
      .why-wd-section {
        padding: 65px 0 80px;
      }

      .section-description {
        margin-bottom: 55px;
      }

      .wd-card {
        margin-bottom: 22px;
      }
    }

    @media (max-width: 575.98px) {
      .why-wd-section {
        min-height: auto;
        padding: 50px 20px 60px;
      }

      .section-title {
        font-size: 32px;
      }

      .section-description {
        font-size: 16px;
        line-height: 1.65;
        margin-bottom: 40px;
      }

      .wd-card {
        height: 185px;
      }
    }

    /* Respect reduced-motion preferences */
    @media (prefers-reduced-motion: reduce) {
      .wd-card,
      .wd-icon,
      .wd-card::before {
        animation: none !important;
        transition: none !important;
      }
    }
    .wd-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -35%;
  width: 35%;
  height: 3px;

  opacity: 0;

  background: linear-gradient(
    90deg,
    transparent,
    #38e1df,
    #ffffff,
    #42b9ed,
    transparent
  );

  box-shadow:
    0 0 8px rgba(44, 225, 223, 0.9),
    0 0 20px rgba(44, 225, 223, 0.45);
}

.wd-card:hover::before {
  opacity: 1;
  animation: topFlicker 1.15s ease-in-out infinite;
}

@keyframes topFlicker {
  0% {
    left: -35%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  30% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 0.7;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}
.wd-icon-blurr {
        position: absolute;
    right: 10px;
    bottom: 0;
    font-size: 44px;
    opacity: .1;
    color: var(--accent-color);
}
.wd-card:hover{
  cursor: pointer;
}
.wd-card:hover .wd-icon-blurr {
    opacity: 1;
    color: #c31820;
}
p.card-description a.read-more {
    font-size: 16px;
    font-weight: 500;
    padding: 2px;
}
p.card-description a.read-more:hover{
     font-weight: 700;
    border-bottom: 1px solid;
    letter-spacing: .1px;
  transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}