@import "../../../../assets/scss/mixin";
.g5plus-pricing-table-ctn{
    .pricing-table-item{
        .box-pricing-item{
            display: inline-block;
            text-align: center;
            @include transition03();
            margin: 30px 0;
            width: 100%;
            height: 100%;
            .pricing-name h4{
                padding: 20px;
                font-weight: 600;
                font-size: 18px;
                color: var(--g5-text-color-medium);
                line-height: normal;
                text-transform: uppercase;
                margin-bottom: 0;
            }

            .pricing-price{
                background-color: rgba(var(--g5-border-color-dark-r), var(--g5-border-color-dark-g), var(--g5-border-color-dark-b), 0.5);
                color: var(--g5-text-color-medium);
                padding: 25px 20px 20px;
                margin: 0;
                display: block;
                font-size: 48px;
                font-weight: 300;
                @include transition(all 0.3s);
                span{
                    font-size: 18px;
                }
            }

            .pricing-features{
                ul{
                    padding: 0;
                    li{
                        font-weight: 400;
                        list-style: none;
                        border-top: 1px solid var(--g5-border-color-dark);
                        font-size: 14px;
                        padding: 18px 10px;
                        &:first-child{
                            border-top: none;
                        }
                        &:last-child{
                            border-bottom: 1px solid var(--g5-border-color-dark);
                        }
                    }
                }
            }

            .pricing-action{
                padding: 20px 0;
                @include transition(all 0.3s);
                a{
                    font-weight: bold;
                    border: 2px solid var(--g5-text-color-medium);
                    @include border-radius(3px);
                }
            }
            &:hover,
            &.pricing-select{
                margin: 15px 0;
                -webkit-box-shadow:  0 0 15px rgba(0,0,0,0.5);
                -moz-box-shadow:  0 0 15px rgba(0,0,0,0.5);
                box-shadow:  0 0 15px rgba(0,0,0,0.5);
                .pricing-price{
                    padding: 40px 20px 35px;
                }
                .pricing-action a{
                    border-color: var(--g5-color-accent);
                    color: var(--g5-color-accent);
                }
                .pricing-action a:hover{
                    border-color: var(--g5-color-accent);
                    background: var(--g5-color-accent);
                    color: #fff;
                }
            }
            &.pricing-select{
                border:1px solid var(--g5-color-accent) !important;
                .pricing-price{
                    background: var(--g5-color-accent);
                    color: #fff;
                }
            }
        }
    }
    
    &.style1{
        .pricing-table-item{
            padding: 0 !important;
            .box-pricing-item{
                border:1px solid var(--g5-border-color-dark);
            }
        }

        .g5plus-slick-slider{
            margin: 0;
        }
        .slick-slide{
            padding: 0;
        }
    }

    &.style2{
        margin-left: -15px;
        margin-right: -15px;
        .pricing-table-item{
            .box-pricing-item{
                border: 1px solid var(--g5-border-color-dark);
            }
        }
        .g5plus-slick-slider{
            margin-right: 0;
            margin-left: 0;
            .slick-prev{
                left: 0;
                @include transition(all 0.3s);
            }
            .slick-next{
                right: 0;
                @include transition(all 0.3s);
            }
            &:hover{
                .slick-prev{
                    left: 45px;
                }
                .slick-next{
                    right: 45px;
                }
            }
        }
    }

    .g5plus-slick-slider{
        .pricing-select{
            box-shadow: none !important;
        }
    }
}

@media (max-width: 1199px) and (min-width: 992px){
    .g5plus-pricing-table-ctn{
        &.style1
        {
            .g5plus-slick-slider{
                margin-right: 1px !important;
            }
        }
    }
}
@media (max-width: 991px){
    .g5plus-pricing-table-ctn{
        &.style1 .g5plus-slick-slider{
            margin-right: 0 !important;
        }
    }
}