/* ==========================================================
   Pricing
========================================================== */

.pricing {
    padding: 120px 0;
    background: var(--color-background-page-dark);
}

/* ==========================================================
   Container
========================================================== */

.pricing .container{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ==========================================================
   Header
========================================================== */

.pricing-header{

    max-width:760px;

    margin-bottom:80px;

    text-align:center;

}

/* ==========================================================
   Eyebrow
========================================================== */

.pricing-eyebrow{

    display:inline-block;

    margin-bottom:18px;
    padding:8px 18px;

    border-radius:var(--radius-full);

    background:rgba(139,92,246,.12);

    color:var(--color-primary-light);

    font-size:var(--font-size-small);
    font-weight:var(--font-weight-semibold);

}

/* ==========================================================
   Title
========================================================== */

.pricing-title{

    margin-bottom:20px;

    color:var(--color-text-primary-dark);

}

/* ==========================================================
   Description
========================================================== */

.pricing-description{

    color:var(--color-text-secondary-dark);

}

/* ==========================================================
   Grid
========================================================== */

.pricing-grid{

    width:100%;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

/* ==========================================================
   Card
========================================================== */

.pricing-card{

    position:relative;

    padding:40px;

    border-radius:var(--radius-xl);

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    transition:var(--transition-normal);

}


.pricing-card:hover{

    transform:translateY(-10px);

    border-color:rgba(139,92,246,.35);

    box-shadow:0 25px 45px rgba(0,0,0,.25);

}

/* ==========================================================
   Featured Card
========================================================== */

.pricing-card-featured{

    border:2px solid var(--color-primary);

    transform:scale(1.05);

}


.pricing-card-featured:hover{

    transform:scale(1.05) translateY(-10px);

}

/* ==========================================================
   Badge
========================================================== */

.pricing-badge{

    position:absolute;

    top:-14px;
    left:50%;

    transform:translateX(-50%);

    padding:8px 18px;

    border-radius:var(--radius-full);

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-light)
    );

    color:white;

    font-size:13px;
    font-weight:600;

}

/* ==========================================================
   Header Card
========================================================== */

.pricing-card-header{

    margin-bottom:35px;

}


.pricing-card-header h3{

    margin-bottom:12px;

    color:var(--color-text-primary-dark);

}


.pricing-card-header p{

    color:var(--color-text-secondary-dark);

}

/* ==========================================================
   Price
========================================================== */

.pricing-price{

    margin-bottom:35px;

    display:flex;

    align-items:flex-end;

    gap:8px;

}


.pricing-price strong{

    font-size:58px;

    color:var(--color-text-primary-dark);

    line-height:1;

}


.pricing-currency{

    font-size:22px;

    color:var(--color-primary-light);

}


.pricing-price span{

    color:var(--color-text-secondary-dark);

}

/* ==========================================================
   Custom Price
========================================================== */

.pricing-price-custom{

    display:block;

}


.pricing-price-custom strong{

    font-size:36px;

}

/* ==========================================================
   Features
========================================================== */

.pricing-features{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:40px;

}


.pricing-features li{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--color-text-secondary-dark);

}


.pricing-features svg{

    width:18px;

    height:18px;

    color:var(--color-success);

}

/* ==========================================================
   Button
========================================================== */

.pricing-card .btn{

    width:100%;

}

/* ==========================================================
   Responsive Tablet
========================================================== */

@media(max-width:992px){

    .pricing-grid{

        grid-template-columns:1fr;

    }

    .pricing-card-featured{

        transform:none;

    }

    .pricing-card-featured:hover{

        transform:translateY(-10px);

    }

}

/* ==========================================================
   Responsive Mobile
========================================================== */

@media(max-width:768px){

    .pricing{

        padding:80px 0;

    }

    .pricing-header{

        margin-bottom:50px;

    }

}