/*--------------------------------------------------------------
  16. Pricing
----------------------------------------------------------------*/
.cs_pricing_table.cs_style_1 {
  display: flex;
  flex-direction: column;
  align-items: center;

  .cs_pricing_info_wrapper {
    width: 100%;
    min-height: 630px;
    filter: drop-shadow(0px 10px 50px rgba(0, 0, 0, 0.08));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 190px 40px 0px;
    margin-top: -150px;
    position: relative;
    transition: all 0.4s ease-in-out;


    @media (max-width:1199px) {
      background-color: var(--white-color);
      border-radius: 40px;
      border: 2px solid transparent;
    }

    svg {

      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%) scale(1);
      transition: all 0.4s ease;

      @media (max-width:1400px) {
        transform: translateX(-50%) scale(0.9);
      }

      @media (max-width:1199px) {
        display: none;
      }

      &:nth-child(2) {
        color: var(--accent-color);
        opacity: 0;
      }
    }
  }

  .cs_pricing_head {
    width: 255px;
    height: 255px;
    border: 15px solid var(--border-color);
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
  }

  .cs_pricing_head_inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 15px solid var(--gray-color);
  }

  .cs_pricing_head_subtitle {
    transition: all 0.4s ease-in-out;
  }

  .cs_pricing_plan {
    position: relative;
    z-index: 1;
  }

  .cs_pricing_feature_list {
    margin-bottom: 34px;
    position: relative;
    z-index: 1;

    li {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 9px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    span {
      width: 16px;
      height: 16px;
      font-size: 10px;
      font-family: 'Font Awesome 6 Free';
      margin-right: 9px;
      border: 1px solid var(--body-color);

      &.cs_accent_bg {
        border: none;
      }
    }
  }

  .cs_pricing_btn {
    padding: 12px 30px;
    border: 1px solid var(--heading-color);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease-in-out;

    &:hover {
      letter-spacing: 1px;
    }
  }

  &:hover,
  &.active {
    .cs_pricing_head {
      border-color: var(--accent-color);
    }

    .cs_pricing_info_wrapper {
      border-color: var(--accent-color);

      svg {
        &:nth-child(1) {
          opacity: 0;
        }

        &:nth-child(2) {
          opacity: 1;
        }
      }
    }

    .cs_pricing_btn {
      background-color: var(--accent-color);
      border-color: var(--white-color);
      color: var(--white-color);
    }
  }
}