body {
    background-image: url('../images/background.png.webp');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #1e1e1e;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e1e1e transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Page CSS */

.box-FAQ,
.box-contactUs {
    padding-top: 45px;
}

.box-Pricing h1.page-title,
.box-viewPlan h1.page-title,
.box-FAQ h1.page-title,
.box-contactUs h1.page-title,
.box-TermsConditions h1.page-title {
    color: var(--color-secondary);
    margin: 0px;
    padding: 0px;
    font-size: 30px;
    /* font-weight: 300; */
    font-weight: 200;
    letter-spacing: 4px;
    user-select: none;
    text-transform: uppercase;
}

.box-viewPlan h1.page-title {
    font-size: 30px;
    letter-spacing: 5px;
}

.box-Pricing p.page-sub-title,
.box-TermsConditions p.page-sub-title {
    color: var(--color-secondary);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 2px;
    padding: 15px 0px;
    margin: 0px;
    user-select: none;
    text-transform: uppercase;
}

.box-Purchase .plan-card {
    background: linear-gradient(228deg, rgb(30, 26, 45) 0%, rgb(22, 20, 31) 100%);
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    margin: 0 auto;
    max-width: 475px;
}

.box-Purchase .box-viewPlan .plan-card {
    max-width: auto;
    margin: 0;
}

.box-Purchase .plan-card .card-line {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0px;
}

.box-Purchase .plan-card .card-logo {
    background-image: url(../images/logo.png);
    background-position: no-repeat;
    background-size: contain;
    height: 24px;
    width: 24px;
    margin: 0 24px;
}

.box-Purchase .plan-card .card-line:before {
    background-color: var(--color-primary);
    height: 8px;
    flex: 11;
    content: '';
}

.box-Purchase .plan-card-green .card-line:before {
    background-color: var(--color-green);
}

.box-Purchase .plan-card-indigo .card-line:before {
    background-color: var(--color-indigo);
}

.box-Purchase .plan-card-blue .card-line:before {
    background-color: var(--color-blue);
}

.box-Purchase .plan-card-red .card-line:before {
    background-color: var(--color-red);
}

.box-Purchase .plan-card .plan-name {
    color: var(--color-secondary);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 2px;
    margin: 0px;
    padding: 5px 0px;
    text-transform: uppercase;
}

.box-Purchase .plan-card .plan-price {
    color: var(--color-primary);
    display: inline-block;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0px;
}

.box-Purchase .plan-card .btn-features,
.box-Purchase .plan-card .btn-buy-now,
.box-viewPlan .btn-go-back {
    color: var(--color-secondary) !important;
    display: block;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 2px 0px;
    text-align: left;
}

.box-Purchase .box-viewPlan .plan-card .btn-buy-now {
    background-color: var(--color-indigo);
    color: var(--color-primary) !important;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 12px;
    text-align: center;
    width: 100%;
}

@media screen and (max-width:991px) {
    .box-Purchase .plan-card .plan-name {
        font-size: 16px;
        letter-spacing: 1px;
    }
    .box-Purchase .plan-card .plan-price {
        font-size: 20px;
        letter-spacing: 0px;
    }
    .box-Purchase .plan-card .btn-features,
    .box-Purchase .plan-card .btn-buy-now {
        font-size: 12px;
        letter-spacing: 1px;
    }
}

@media screen and (max-width:576px) {
    .box-Purchase .plan-card .plan-name {
        font-size: 15px;
        letter-spacing: -0.5px;
    }
    .box-Purchase .plan-card .plan-price {
        font-size: 18px;
    }
}

.box-viewPlan #plan-view-card .plan-purchase-terms {
    color: var(--color-secondary);
    font-size: 9px;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 3px;
    padding: 2px 0px;
}

.box-viewPlan #plan-features .plan-feature-title {
    color: var(--color-secondary);
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 5px;
}

.box-viewPlan #plan-features P {
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 3px;
    margin: 0px;
    padding: 8px 0px;
    text-transform: uppercase;
}

.box-Login .login-link a {
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 4px;
    padding-right: 12px;
    text-transform: uppercase;
}

.box-Login .login-link a.active {
    color: var(--color-primary);
}

.box-Login form.user-form input,
.box-Protected-Pricing form.user-form input {
    border: 1px solid rgba(202, 208, 236, 0.5) !important;
    border-radius: 5px;
    height: 44px;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 8px 24px;
    text-align: center;
}

.box-Login form.user-form button {
    height: 44px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 12px 12px;
}

.box-Login .link-btn {
    border: 1px solid var(--color-discord);
    border-radius: 5px;
    display: block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 12px 8px;
    width: 100%;
}

.box-Protected-Pricing .box-title {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 5px;
}

.box-Protected-Pricing form.user-form input {
    background-image: url(../images/right.png);
    background-size: 16px;
    background-position: center right 8px;
    background-repeat: no-repeat;
}

.box-TermsConditions {
    padding-top: 30px;
}

.box-contactUs .box {
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    background-color: rgba(22, 20, 31, 0.5);
    height: 120px;
    position: relative;
}

.box-contactUs .box-blue {
    border-color: rgb(117, 143, 255);
}

.box-contactUs .box-purple {
    border-color: rgb(107, 89, 212);
}

.box-contactUs .box .box-icon {
    position: absolute;
    top: 12px;
    right: 15px;
    width: 20px;
    height: 20px;
    fill: var(--color-primary);
    color: var(--color-primary);
    transform: rotate(-135deg) translateZ(0px);
}

.box-contactUs .box .box-disk {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
    position: absolute;
    bottom: 15px;
    left: 10px;
    pointer-events: none;
}

.box-contactUs .box-blue .box-disk {
    background-color: rgb(118, 143, 255);
}

.box-contactUs .box-purple .box-disk {
    background-color: rgb(107, 89, 212);
}

.box-contactUs .box .box-text {
    position: absolute;
    bottom: 12px;
    left: 24px;
    font-size: 12px;
    letter-spacing: 3px;
    line-height: 1.2;
    font-weight: 299;
}

.box-FAQ #accordion .card,
.box-FAQ #accordion .card-header,
.box-FAQ #accordion .card-body {
    background-color: var(--color-bg-dark);
    border: transparent;
    border-radius: 5px;
}

.box-FAQ #accordion .card {
    border: 1px solid var(--color-indigo);
}

.box-FAQ #accordion .card-header {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 2px;
    padding: 15px 15px;
}

.box-FAQ #accordion .card-header:after {
    color: var(--color-primary);
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f078';
    float: right;
}

.box-FAQ #accordion .card-header[aria-expanded="true"]:after {
    content: "\f077";
}

.box-FAQ #accordion .card-body {
    padding-top: 4px;
    padding-bottom: 4px;
}

.box-FAQ #accordion .card-body p {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding: 0px;
    text-align: justify;
}

.box-TermsConditions .wrapper-TermsConditions {
    background-color: var(--color-bg-dark) !important;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 1);
}

.box-TermsConditions .info-block {
    border-bottom: 1px solid var(--color-secondary);
    margin: 0px;
    padding: 12px 0px;
}

.box-TermsConditions .info-block:last-child {
    border-bottom: none;
}

.box-TermsConditions .info-block .title h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0px;
    padding: 8px 0px;
}

.box-TermsConditions .info-block .meta {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 2px;
    text-align: justify;
}

.box-TermsConditions .info-block .meta p {
    margin: 0px;
    padding: 5px 0px;
}


/* Vinay Panchal */

.nav-pills {
    display: table;
    margin: 0 auto;
}

.nav-pills li {
    display: inline-block;
}

.area-box {
    background-color: #1f1e2f;
    border-radius: 10px;
    padding: 20px;
}


/* .area-box:hover {
    background-color: #7674fa;
}

.area-box:hover .get-start-btn {
    background-color: #8a8aff;
}

.area-box:hover .select-gb {
    border-color: #8a8aff !important;
} */

.area-box:hover .box-content ul li,
.area-box:hover .note {
    color: #fff;
}

.area-box:hover .box-content ul {
    list-style-image: url('../images/check-h.png');
}

.area-box h2 {
    color: rgba(202, 209, 237, 1.00);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}

.ab-amount {
    color: hsl(0, 0%, 100%);
    font-size: 28px;
    font-weight: 600;
}

.box-content ul {
    padding: 0;
}

.box-content ul {
    list-style-image: url('../images/check.png');
    list-style-position: inside;
}

.box-content ul li {
    color: rgba(202, 209, 237, 1.00);
    font-size: 10px;
    line-height: 2.8;
}

.note {
    color: hsl(244, 20%, 66%);
    font-size: 8px;
}

.get-start-btn {
    background-color: #8166f3;
    padding: 10px;
    display: block;
    text-align: center;
    border-radius: 5px;
    font-size: 12px;
}

.select-gb {
    border: 1px solid #57556f !important;
    border-radius: 5px;
    margin: 10px 0;
}

select {
    width: 400px;
    text-align-last: center;
    font-size: 12px;
}

option {
    color: #57556f;
    font-size: 12px;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: #262334;
    color: rgba(202, 209, 237, 1.00);
}

.nav-link {
    padding: .8rem 1.4rem;
    color: rgba(202, 209, 237, 1.00);
}

.soldOut {
    content: 'Sold Out';
}

.available {
    content: 'Buy Now';
}