OwlCyberSecurity - MANAGER

Edit File: _price.scss

.price-card2 {
    padding: 40px;
    background-color: $theme-color;
    border-radius: 20px;
    position: relative;
    margin: 20px;
    z-index: 2;
    &:before {
        content: '';
        position: absolute;
        inset: -20px;
        background-color: $theme-color;
        opacity: 0.2;
        border-radius: 30px;
        z-index: -1;
    }
    &_price {
        color: $white-color;
        font-size: 48px;
        font-weight: bold;
        line-height: 1;
        .currency {
            font-size: 24px;
        }
        .duration {
            color: $white-color;
            font-size: 20px;
            font-weight: 500;
        }
    }
    &_title {
        border-bottom: 3px solid $white-color;
        max-width: fit-content;
        margin-top: -0.24em;
        margin-bottom: 20px;
        color: $white-color;
    }
    &_img {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: -1;
    }
    .available-list {
        border-top: 1px dashed $border-color;
        padding-top: 25px;
        margin-top: 25px;
        margin-bottom: 30px;
    }
    .th-btn {
        background-color: $body-color;
    }
    .available-list {
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        li {
            position: relative;
            margin-bottom: 10px;
            color: $white-color;
            padding-left: 26px;
            &:last-child {
                margin-bottom: 0;
            }
            &:before {
                content: "\f058";
                font-family: $icon-font;
                font-weight: 600;
                color: $white-color;
                font-size: 1em;
                vertical-align: text-top;
                position: absolute;
                top: 0;
                left: 0;
            }
            &.unavailable {
                opacity: 0.5;
                &:before {
                    color: $white-color;
                }
            }
        }
    }
}

@include xl {
    .price-card2_img {
        max-width: 100px;
    }
}

@include vxs {
    .price-card2 {
        padding: 40px 25px;
        margin: 15px;
        &:before {
            inset: -15px;
        }
    }
}

@media (max-width: 340px) {
    .price-card2_img {
        max-width: 70px;
    }
}