/* =========================================================
BASKIT PRICING PAGE
========================================================= */

.pricing-hero {
padding: 100px 20px 90px;
background: linear-gradient(135deg, #f5fff9 0%, #ffffff 60%);
text-align: center;
}

.pricing-hero-content {
max-width: 850px;
margin: 0 auto;
}
.price-hero-content {

    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}
.price-hero-content p{text-align: center;max-width:100%}

.pricing-hero h1 {
margin: 18px 0 20px;
font-size: clamp(42px, 6vw, 70px);
line-height: 1.08;
font-weight: 800;
color: #111;
}

.pricing-hero h1 span {
color: rgb(0, 152, 70);
}

.pricing-hero p {
max-width: 680px;
margin: 0 auto;
font-size: 18px;
line-height: 1.7;
color: #666;
}
.renewal-charge {
margin-top: -15px;
margin-bottom: 12px;
font-size: 14px;
color: #333;
}

.renewal-charge strong {
color: rgb(0, 152, 70);
}

.tax-note {
margin: 0 !important;
font-size: 12px !important;
line-height: 1.5 !important;
color: #777 !important;
text-align:center;
margin-top: 38px !important;
}
.pricing-hero-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 35px;
}

/* =========================================================
PRICING SECTION
========================================================= */

.pricing-section {
padding: 100px 20px;
background: #fff;
}

.section-heading {
max-width: 750px;
margin: 0 auto 55px;
text-align: center;
}


.section-heading h2 {
margin: 12px 0 15px;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.15;
color: #111;
}

.section-heading p {
margin: 0;
font-size: 16px;
line-height: 1.7;
color: #666;
}

/* =========================================================
PRICING GRID
========================================================= */

.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
max-width: 1180px;
margin: 0 auto;
align-items: stretch;
}

.pricing-card {
position: relative;
padding: 38px 32px;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 20px;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
}

.pricing-card.featured {
border: 2px solid rgb(0, 152, 70);
transform: translateY(-10px);
box-shadow: 0 18px 45px rgba(0, 152, 70, 0.14);
}

.popular-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
padding: 7px 18px;
border-radius: 30px;
background: rgb(0, 152, 70);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
white-space: nowrap;
}

.plan-label {
display: inline-block;
margin-bottom: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
color: rgb(0, 152, 70);
}

.pricing-card h3 {
margin: 0 0 12px;
font-size: 25px;
color: #111;
}

.pricing-card-top > p {
min-height: 72px;
margin: 0;
font-size: 14px;
line-height: 1.65;
color: #666;
}

.price {
display: flex;
align-items: baseline;
margin: 28px 0;
}

.price-symbol {
margin-right: 3px;
font-size: 20px;
font-weight: 700;
color: #111;
}

.price-value {
font-size: 42px;
line-height: 1;
font-weight: 800;
color: #111;
}

.price-period {
margin-left: 5px;
font-size: 13px;
color: #777;
}

.custom-price .price-value {
font-size: 32px;
}

/* =========================================================
PLAN BUTTON
========================================================= */

.plan-btn {
width: 100%;
padding: 14px 20px;
border: 1px solid rgb(0, 152, 70);
border-radius: 8px;
background: #fff;
color: rgb(0, 152, 70);
font-size: 14px;
font-weight: 700;
text-align: center;
text-decoration: none;
transition: all 0.25s ease;
}

.plan-btn:hover {
background: rgb(0, 152, 70);
color: #fff;
}

.featured .plan-btn {
background: rgb(0, 152, 70);
color: #fff;
}

.featured .plan-btn:hover {
background: #007d3a;
}

/* =========================================================
FEATURES
========================================================= */

.plan-features {
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid #eee;
}

.plan-features h4 {
margin: 0 0 18px;
font-size: 14px;
color: #222;
}

.plan-features ul {
margin: 0;
padding: 0;
list-style: none;
}

.plan-features li {
position: relative;
margin-bottom: 13px;
padding-left: 26px;
font-size: 14px;
line-height: 1.45;
color: #555;
}

.plan-features li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: rgb(0, 152, 70);
font-weight: 800;
}

/* =========================================================
BENEFITS
========================================================= */

.pricing-benefits {
padding: 100px 20px;
background: #f7faf8;
}

.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1180px;
margin: 0 auto;
}

.benefit-card {
padding: 30px 25px;
background: #fff;
border-radius: 16px;
border: 1px solid #e8e8e8;
}

.benefit-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
border-radius: 50%;
background: #eaf8f0;
color: rgb(0, 152, 70);
font-size: 18px;
font-weight: 800;
}

.benefit-card h3 {
margin: 0 0 10px;
font-size: 18px;
color: #111;
}

.benefit-card p {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: #666;
}

/* =========================================================
CTA
========================================================= */

.pricing-cta {
padding: 90px 20px;
background: #fff;
}

.pricing-cta-box {
max-width: 1100px;
margin: 0 auto;
padding: 70px 40px;
border-radius: 25px;
background: rgb(0, 152, 70);
text-align: center;
}

.pricing-cta-box h2 span {
    display: block;
    color: #d9f7e5;
}

.pricing-cta-box h2 {
margin: 14px 0;
font-size: clamp(32px, 5vw, 48px);
color: #fff;
}

.pricing-cta-box p {
max-width: 650px;
margin: 0 auto 30px;
color: #e9fff1;
font-size: 16px;
line-height: 1.7;
}

.pricing-cta-box .primary-btn {
background: #fff;
color: rgb(0, 152, 70);
}

.pricing-cta-box .primary-btn:hover {
background: #f1f1f1;
}

.not_included::before {
    content: "✕"!important;
    display: inline-block;
    margin-right: 8px;
    color: #e74c3c !important ;
    font-weight: 700;
    font-size: 14px;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1000px) {


.pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
}

.pricing-card.featured {
    transform: none;
}

.benefits-grid {
    grid-template-columns: repeat(2, 1fr);
}


}

@media (max-width: 700px) {


.pricing-hero {
    padding: 70px 20px;
}

.pricing-hero h1 {
    font-size: 42px;
}

.pricing-hero p {
    font-size: 16px;
}

.pricing-hero-buttons {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-section,
.pricing-benefits {
    padding: 70px 20px;
}

.pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
}

.pricing-card {
    padding: 32px 25px;
}

.pricing-card-top > p {
    min-height: auto;
}

.benefits-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
}

.pricing-cta {
    padding: 60px 20px;
}

.pricing-cta-box {
    padding: 50px 25px;
}


}

@media (max-width: 480px) {


.pricing-hero h1 {
    font-size: 36px;
}

.section-heading h2 {
    font-size: 32px;
}

.price-value {
    font-size: 36px;
}

.custom-price .price-value {
    font-size: 28px;
}


}
.pricing-grid-five {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    align-items: stretch;
}

/* First 3 cards */
.pricing-grid-five .pricing-card:nth-child(1),
.pricing-grid-five .pricing-card:nth-child(2),
.pricing-grid-five .pricing-card:nth-child(3) {
    grid-column: span 2;
}

/* 4th card centered below */
.pricing-grid-five .pricing-card:nth-child(4) {
    grid-column: 3 / span 2;
}
@media (max-width: 1000px) {
.pricing-grid-five {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .pricing-grid-five .pricing-card:nth-child(1),
    .pricing-grid-five .pricing-card:nth-child(2),
    .pricing-grid-five .pricing-card:nth-child(3),
    .pricing-grid-five .pricing-card:nth-child(4) {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
.pricing-grid-five {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .pricing-grid-five .pricing-card {
        grid-column: auto !important;
    }
}