/*--------------------------------
    #Pricing Tables
---------------------------------*/
.pricing {
    .price-table {
        display       : flex;
        flex-direction: column;

        @media #{$maxTablet} {
            max-width: 370px;
            margin   : 0 auto;
        }

        .pricing-panel {
            background-color: var(--global--color-white);
            padding         : 44px 50px 42px;
            border-radius   : 8px;
            box-shadow      : 0px 5px 83px 0px rgba(40, 40, 40, 0.11);
            display         : flex;
            flex-direction  : column;
            justify-content : space-between;
            flex-grow       : 1;

            @media #{$noteBook} {
                padding-right: 25px;
                padding-left : 25px;
            }

            @media #{$maxTablet} {
                text-align: center;
                max-width : 370px;
                margin    : 0 auto 30px;
            }

            @media #{$maxSmall} {
                padding-left : 25px;
                padding-right: 25px;
            }

            .pricing-body {
                .pricing-heading {
                    margin-bottom: 40px;

                    .pricing-title {
                        font-family   : var(--global--font-heading);
                        font-size     : 18px;
                        font-weight   : 700px;
                        line-height   : 26px;
                        color         : var(--global--color-secondary);
                        margin-bottom : 0px;
                        position      : relative;
                        text-transform: capitalize;
                        transition    : 300ms ease-in-out;
                    }

                    .pricing-desc {
                        font-family  : var(--global--font-body);
                        font-size    : 14px;
                        font-weight  : 400;
                        color        : var(--global--color-body);
                        line-height  : 26px;
                        margin-bottom: 0px;
                    }
                }

                .pricing-list {
                    p {
                        font-size    : 14px;
                        line-height  : 24px;
                        color        : var(--global--color-body);
                        margin-bottom: 20px;
                    }
                }

                .pricing-price {
                    margin-bottom: 34px;

                    p {
                        padding-top  : 55px;
                        margin-bottom: 29px;
                        font-family  : var(--global--font-heading);
                        font-weight  : 400;
                        color        : var(--global--color-secondary);
                        display      : flex;
                        align-items  : baseline;
                        line-height  : 30px;
                        position     : relative;

                        &::before {
                            content         : '';
                            position        : absolute;
                            top             : 0;
                            left            : 0;
                            height          : 2px;
                            width           : 100%;
                            background-color: #eaeaea;
                        }

                        @media screen and(max-width:991.98px) {
                            justify-content: center;
                        }

                        span {
                            &::before {
                                content: '/';
                            }

                            &:first-of-type {
                                &::before {
                                    content: unset;
                                }
                            }
                        }

                        .currency {
                            font-size: 50px;
                        }

                        .time {
                            font-size: 14px;
                        }
                    }

                    .btn {
                        width        : 100%;
                        height       : 65px;
                        color        : var(--global--color-white);
                        padding-right: 20px;
                        transition   : 0.5s ease-in-out;

                        &:hover {
                            background-color: var(--global--color-primary);
                        }

                        i {
                            width           : 28px;
                            height          : 28px;
                            background-color: var(--global--color-white);
                            display         : flex;
                            justify-content : center;
                            align-items     : center;
                            color           : var(--global--color-heading);
                            border-radius   : 50%;
                            transition      : 0.5s ease-in-out;

                            &::before {
                                font-size: 14px;
                            }
                        }

                        &::before {
                            content: unset;
                        }

                        &:hover {
                            i {
                                transform: translateX(5px);
                            }
                        }
                    }
                }
            }

            &.active {
                position: relative;

                &::before {
                    content         : '';
                    display         : block;
                    width           : 46px;
                    height          : 20px;
                    background-image: url('../images/icons/high-light.png');
                    position        : absolute;
                    top             : 30px;
                    right           : -2px;
                }

                &::after {
                    content         : '';
                    position        : absolute;
                    bottom          : 0;
                    left            : 50%;
                    background-color: var(--global--color-primary);
                    transform       : translateX(-50%);
                    height          : 4px;
                    width           : calc(100% - 100px);

                    @media #{$noteBook} {
                        width: calc(100% - 50px);
                    }
                }

                .pricing-price {
                    .btn {
                        background-color: var(--global--color-primary);

                        &:hover {
                            background-color: var(--global--color-heading);
                        }
                    }
                }
            }
        }
    }

    .more-prices {
        text-align: center;
        margin-top: 0px;

        @media #{$minLarge} {
            margin-top: 32px;
        }

        p {
            font-family: var(--global--font-body);
            font-weight: 700;
            font-size  : 15px;
            color      : var(--global--color-body);

            a {
                position      : relative;
                font-weight   : 700;
                color         : var(--global--color-heading);
                transition    : 0.3s ease-in-out;
                text-transform: capitalize;
                padding-bottom: 6px;

                &:hover {
                    &::before {
                        width: calc(100% - 20%);
                    }
                }

                &::before {
                    content         : '';
                    transition      : 0.3s ease-in-out;
                    position        : absolute;
                    bottom          : 0;
                    left            : 50%;
                    transform       : translateX(-50%);
                    width           : 100%;
                    height          : 2px;
                    background-color: var(--global--color-primary);
                }
            }
        }
    }

    &.pricing-1 {
        padding-top   : 130px;
        padding-bottom: 100px;

        @media #{$maxTablet} {
            padding-top   : 70px;
            padding-bottom: 70px;
        }
    }
}