/*********************************
/* Tabs Start
*********************************/
.custom__tabs {
    .nav {
        background: rgba(var(--color-white-rgb), 0.1);
        padding: 6px;
        border-radius: 100px;
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 14px;
        margin-bottom: 42px;

        li {
            .nav-link {
                font-family: var(--font-default);
                font-size: 16px;
                font-weight: var(--font-regular);
                line-height: 18.75px;
                padding: 8px 16px;
                background: transparent;
                color: var(--color-white);
                border: none;
                border-radius: 100px;
                width: 85px;
                text-transform: capitalize;
    
                &.active {
                    background: var(--color-primary);
                    color: var(--color-white);
                }
            }
        }
    }
}


/*********************************
/* Tabs End
*********************************/

/*********************************
/* Pricing Start
*********************************/
.pricing__wrapper {
    max-width: 1480px;
    margin: auto;
}

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    
    @include respond (medium) {
        grid-template-columns: repeat(3, 1fr);

    }
    @include respond (tabland) {
        grid-template-columns: repeat(2, 1fr);
    }
    @include respond (phone-sm) {
        grid-template-columns: repeat(1, 1fr);

    }
}

.pricing__item {
	padding: 36px 24px;
	border: 1px solid rgba(var(--color-primary-rgb), 0.3);
	background: transparent;
    border-radius: 8px;
	transition: var(--transition);
    text-align: left;

	.pricing {
		&__header {
            border-bottom: 1px solid rgba(var(--color-white-rgb), 0.2);
            padding-bottom: 16px;
			.title {
				font-size: 16px;
				line-height: 18.75px;
                font-weight: var(--font-regular);
				transition: var(--transition);
                text-transform: capitalize;
				margin-bottom: 19px;
                color: var(--color-white);
			}
		}
		
		&__tag {
			font-family: var(--font-roboto);
			font-size: 24px;
            line-height: 22px;
			font-weight: var(--font-semibold);
			display: inline-flex;
			align-items: center;
			position: relative;
			transition: var(--transition);
            color: var(--color-white);
            text-transform: capitalize;

            sub {
                font-size: 14px;
                line-height: 22px;
                font-weight: var(--font-regular);
            }
		}
		
		&__features {
            padding-top: 16px;

			li {
                font-family: var(--font-roboto);
                font-size: 14px;
                line-height: 20px;
                color: var(--color-white);
                font-weight:var(--font-regular);
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 12px;
				transition: var(--transition);

                
                &:last-of-type {
                    margin-bottom: 0;
                }

                &.disable {
                    i {
                        color: rgba(var(--color-white-rgb), 0.2);
                        border-color: rgba(var(--color-white-rgb), 0.2);
                        background: transparent;

                    }
                }

				i {
					font-size: 14px;
					height: 14px;
					width: 14px;
                    border: 1px solid var(--color-primary);
                    background: var(--color-primary);
                    border-radius: 50%;
					color: var(--color-heading);
					display: flex;
					align-items: center;
					justify-content: center;
					transition: var(--transition);

                    @include respond(tabport) {
                        height: 18px;
                        width: 18px;
                    }
				}
			}
		}
        &__btn {
            max-width: 196px;
            margin: 36px auto 0;

			.btn {
                font-size: 14px;
                line-height: 22px;
                border: 1px solid rgba(var(--color-primary-rgb), 0.5);
                color: var(--color-primary);
			}
		}
	}
	&.active,
	&:hover {
		background: rgba(var(--color-white-rgb), 0.1);

        .btn {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-white);
            box-shadow: 0px 30px 30px 0px rgba(var(--color-primary-rgb), 0.1);
        }
	}
}

/*********************************
/* Pricing Start End
*********************************/