.work-cards{
  background-color: #eefafb;
  padding-top: 100px;
  padding-bottom: 90px;
  z-index: 4 !important;
  position: relative;

  .card {
    position: relative !important;
    width: 25% !important;
    height: 100% !important;
    background-color: #000 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: end !important;
    padding: 12px !important;
    gap: 12px !important;
    border-radius: 8px !important;
  }
  
  .card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    left: -8px !important;
    margin: auto !important;
    border-radius: 10px !important;
    background: linear-gradient(0deg, #e81cff 0%, #40c9ff 100% ) !important;
    z-index: -10 !important;
    pointer-events: none !important;
    /* transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; */
  }
  
  .card::after {
    content: "" !important;
    z-index: -1 !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(0deg, #fc00ff 0%, #00dbde 100% ) !important;
    /* transform: translate3d(0, 0, 0) scale(0.95) !important; */
    /* filter: blur(20px) !important; */
  }
  
  .heading {
    font-size: 20px !important;
    text-transform: capitalize !important;
    font-weight: 700 !important;
  }
  
  .card p:not(.heading) {
    font-size: 14px !important;
  }
  
  .card p:last-child {
    color: #e81cff !important;
    font-weight: 600 !important;
  }
  
  .card:hover::after {
    filter: blur(30px) !important;
  }
  
  .card:hover::before {
    /* transform: rotate(-90deg) scaleX(1.1) scaleY(1.1) !important; */
  }
      
  .card {
      --white: hsl(0, 0%, 100%) !important;
      --black: hsl(240, 15%, 9%) !important;
      --paragraph: hsl(0, 0%, 83%) !important;
      --line: hsl(240, 9%, 17%) !important;
      --primary: hsl(189, 92%, 58%) !important;
  
      position: relative !important;
  
      display: flex !important;
      /* flex-direction: column !important;
      gap: 1rem !important; */
  
      padding: 1rem !important;
      width: 19rem !important;
      background-color: hsla(240, 15%, 9%, 1) !important;
      background-image: radial-gradient(
          at 88% 40%,
          hsla(240, 15%, 9%, 1) 0px,
          transparent 85%
      ),
      radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
      radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
      radial-gradient(at 0% 64%, hsl(189, 99%, 26%) 0px, transparent 85%),
      radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),
      radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%) !important;
  
      border-radius: 1rem !important;
      box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset !important;
  }
  
  .card .card__border {
      overflow: hidden !important;
      pointer-events: none !important;
  
      position: absolute !important;
      z-index: -10 !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
  
      width: calc(100% + 2px) !important;
      height: calc(100% + 2px) !important;
  
  
      border-radius: 1rem !important;
  }
  
  .card .card__border::before {
      content: "" !important;
      pointer-events: none !important;
  
      position: fixed !important;
      z-index: 200 !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%), rotate(0deg) !important;
      transform-origin: left !important;
  
      width: 200% !important;
      height: 10rem !important;
      background-image: linear-gradient(
      0deg,
      hsla(0, 0%, 100%, 0) 0%,
      hsl(189, 100%, 50%) 40%,
      hsl(189, 100%, 50%) 60%,
      hsla(0, 0%, 40%, 0) 100%
      ) !important;
  
      animation: rotate 8s linear infinite !important;
  }
  
  @keyframes rotate {
      to {
      transform: rotate(360deg) !important;
      }
  }
  
  .card .card_title__container .card_title {
      font-size: 1rem !important;
      color: var(--white) !important;
  }
  
  .card .card_title__container .card_paragraph {
      margin-top: 0.25rem !important;
      width: 65% !important;
  
      font-size: 0.5rem !important;
      color: var(--paragraph) !important;
  }
  
  .card .line {
      width: 100% !important;
      height: 0.1rem !important;
      background-color: var(--line) !important;
  
      border: none !important;
  }
  
  .card .card_title__container {
    text-align: center;
    }
  .card .card__list {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.5rem !important;
      padding-left: 10px;
      height: 152px !important;
  }
  
  .card .card__list .card__list_item {
      display: flex !important;
      align-items: center !important;
      gap: 0.5rem !important;
      cursor: none;
  }
  
  .card .card__list .card__list_item .check {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
  
      width: 1rem !important;
      height: 1rem !important;
      background-color: var(--primary) !important;
  
      border-radius: 50% !important;
  }
  
  .card .card__list .card__list_item .check .check_svg {
      width: 0.75rem !important;
      height: 0.75rem !important;
  
      fill: var(--black) !important;
  }
  
  .card .card__list .card__list_item .list_text {
      font-size: 0.75rem !important;
      color: var(--white) !important;
  }                
  
  .card .card__list .card__list_item a {
    cursor: default;
  }

  .list_text:hover{
    text-decoration: underline;
    text-decoration-color: rgb(255, 255, 255);
    cursor: pointer;
  }

  .card .top-section {
    height: 150px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    /* background: linear-gradient(45deg, rgb(4, 159, 187) 0%, rgb(80, 246, 255) 100%); */
    position: relative;
    z-index: 1;
  }
}