/*----------------------------------------
	31. pricing css
----------------------------------------*/
@use "../abstract" as *;

// pricing-style 
.pricing-icon {
    span {
        background: linear-gradient(180deg, #14CF93 0%, #5EE4C6 100%);
        height: 64px;
        width: 64px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
}

.pricing-item {
    display: grid;
    grid-template-columns: 19% 45% 18% 18%;
    padding: 28px 40px;
    border: 2px solid #D9D9D9;
    align-items: center;
    margin-bottom: 30px;

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

    @include transition(.3s);

    @media #{$xl} {
        grid-template-columns: 22% 38% 20% 20%;
    }

    @media #{$lg} {
        grid-template-columns: 25% 30% 20% 25%;
    }

    @media #{$sm,$md} {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 0;
    }

    @media #{$xs} {
        grid-template-columns: 1fr;
        gap: 30px 0;
    }

    @media #{$xxs,$lg,$sm} {
        padding: 28px 25px;
        ;
    }

    &:hover {
        background-color: var(--clr-theme-1);
        border-color: var(--clr-theme-1);

        .pricing-title,
        .pricing__title,
        .pricing-time {
            color: var(--clr-common-white);
        }

        .pricing-link {
            .border-btn {
                color: var(--clr-common-white);
            }
        }

        .pricing-feature-list {
            ul {
                li {
                    color: var(--clr-common-white);

                    &::after {
                        color: var(--clr-common-white);
                    }
                }
            }
        }
    }
}

.pricing-content {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pricing-title {
    font-size: 26px;
    margin-bottom: 0px;
    font-weight: 700;
}

.pricing-time {
    font-size: 18px;
}

.pricing-feature {
    ul {
        overflow: hidden;
    }
}

.pricing-feature-list {
    ul {
        li {
            list-style: none;
            padding-left: 30px;
            color: #4D4D4D;
            position: relative;
            font-size: 18px;

            &:first-child {
                margin-bottom: 10px;
            }

            &::after {
                position: absolute;
                content: "\f336";
                font-family: var(--tpl-ff-fontawesome);
                font-weight: 500;
                left: 0;
                top: 4px;
                width: 18px;
                height: 18px;
                line-height: 18px;
                text-align: center;
                font-size: 16px;
                color: #A5A5A5;
                border-radius: 50%;
            }

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

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 8px 20px;
    position: relative;
    padding-left: 75px;
    flex-wrap: wrap;

    &::before {
        position: absolute;
        content: "";
        height: 100%;
        width: 1px;
        background-color: #D9D9D9;
        top: 0;
        right: 0px;

        @media #{$xs,$sm,$md,$lg} {
            display: none;
        }
    }

    &::after {
        position: absolute;
        content: "";
        height: 100%;
        width: 1px;
        background-color: #D9D9D9;
        top: 0;
        left: 0;

        @media #{$xs,$sm,$md,$lg} {
            display: none;
        }
    }

    @media #{$xs,$sm,$md,$lg} {
        padding-left: 0;
    }
}

.pricing__title {
    font-size: 55px;
    font-weight: 500;
    margin-bottom: 0;

    @media #{$xs,$sm,$md,$lg} {
        font-size: 60px;
    }
}

.pricing-link {
    .border-btn {
        height: 55px;
        font-weight: 600;

        &:hover {
            background: var(--clr-theme-2);
            border-color: var(--clr-theme-2)
        }
    }
}

.pricing__title {
    @media #{$xxs,$lg,$xl} {
        font-size: 60px;
    }

    .doller {
        font-size: 24px;
        font-weight: 500;
    }
}