@use '../../utils' as *;

.pricing-2 {

  .section {
      &__title-wrapper {
        max-width: 692px;
        margin-left: auto;
        margin-right: auto;
        @media #{$lg, $md, $sm, $xs} {
          max-width: 100%;
        }
      }

      &__title {
        font-weight: var(--rr-fw-medium);
        color: var(--rr-theme-black)
      }
  }

   &__item {
      background: var(--rr-common-white);
      box-shadow: 0px 5px 60px rgba(0, 0, 0, 0.05);
      @include border-radius(20px);
      padding: 40px;
      @extend %rr-transition-3;
     

     &.active {
       background-color: var(--rr-theme-green);

       h4, p {
         color: var(--rr-common-white) !important;
         font-weight: 400;
       }

       .rr-btn {
         border-color: var(--rr-common-white);
         background-color: var(--rr-common-white);
       }

       span {
        color: var(--rr-common-white);
        font-weight: 400;
       }

       .pricing-2__item {
         h2, h3, p, &-price, &-body ul li, &-body ul li i {
           color: var(--rr-common-white) !important;
           font-weight: 400;
         }
       }
     }

     &-top {
        display: flex;
        align-items: center;
        gap: 0px 25px;
        justify-content: space-between;
        
        @media #{$xxl, $xl, $lg, $md, $sm, $xs} {
          flex-wrap: wrap;
          gap: 0px 25px;
        }
        h4 {
            color: var(--rr-theme-black);
        }
     }

      &-price {
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--rr-theme-black);
        font-weight: var(--rr-fw-medium);

        span {
            color: var(--rr-theme-black);
        }
      }

     &-body {

       ul {
         list-style: none;

         li {
           &:not(:last-child) {
             margin-bottom: 8px;
           }

           i {
             font-style: normal;
             font-weight: 400;
             font-size: 14px;
             line-height: 14px;
             color: #02110B;
             padding-right: 14px;
           }
         }
       }
     }

     .rr-btn {
       padding-top: 18px;
       padding-bottom: 18px;
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
       border: 1px solid var(--rr-theme-black);
       background-color: #E5F9ED;

       i {
         padding-left: 10px;
       }

       .btn-wrap {
         span {
           color: var(--rr-theme-black);
           font-weight: var(--rr-fw-sbold);
         }
       }
     }
   }
}