/*==================================================
Theme Variables
==================================================*/

:root {

    --pd-primary: #3b6f1e;
    --pd-primary-dark: #2f5918;

    --pd-text: #222222;
    --pd-light: #ffffff;
    --pd-border: #e8e8e8;

    --pd-container: 1280px;

}

a {

    text-decoration: none;

    color: inherit;

}

/*==================================================
Common
==================================================*/

body {

    font-family: 'Poppins', sans-serif;

    color: var(--pd-text);

}

/*==================================================
DEFAULT PAGE
==================================================*/

.jp-page {

    padding: 60px 0;

    background: #f8f5ee;

    min-height: 500px;

}

.pd-container {

    width: 100%;

    max-width: var(--pd-container);

    margin: auto;

    padding-left: 15px;

    padding-right: 15px;

    box-sizing: border-box;

}

/*======================================
HEADER
======================================*/
.pd-header {

    position: sticky;

    top: 0;

    left: 0;

    background: #fff;

    z-index: 9999;

    transition: .3s;

    border-bottom: 1px solid #efefef;

}

.pd-header.scrolled {

    box-shadow: 0 10px 35px rgba(0, 0, 0, .08);

}

.pd-header-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: 84px;

}

/*==========================
Logo
==========================*/

.pd-logo {

    display: flex;

    align-items: center;

    min-width: 220px;




}

.pd-logo a {

    display: flex;

    align-items: center;

    text-decoration: none;

    color: var(--pd-primary);

}

.pd-logo img {

    max-height: 58px;

    width: auto;

    display: block;

}



/*==================================================
Navigation
==================================================*/

.pd-navigation {

    flex: 1;

    display: flex;

    justify-content: center;

}

.pd-menu {

    display: flex;

    align-items: center;

    gap: 34px;

    margin: 0;

    padding: 0;

}

.pd-menu li {

    list-style: none;

    position: relative;

}

.pd-menu>li>a {

    display: block;

    padding: 32px 0;

    color: #262626;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .2px;

    transition: .30s;

    text-decoration: none;

}

.pd-menu>li>a:hover {

    color: var(--pd-primary);


}

.current-menu-item>a {

    color: var(--pd-primary);

}

.current-menu-item>a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 18px;

    width: 100%;

    height: 3px;

    border-radius: 30px;

    background: var(--pd-primary);

}

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

.pd-call-btn {

    min-width: 170px;

    display: flex;

    justify-content: flex-end;

}

.pd-call-btn a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 20px;

    background: var(--pd-primary);

    color: #fff;

    border-radius: 50px;

    transition: .3s;

    font-weight: 600;

}

.pd-call-btn a:hover {

    background: var(--pd-primary-dark);

}

.pd-phone-icon {

    width: 38px;

    height: 38px;

    border-radius: 50%;

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

    display: flex;

    justify-content: center;

    align-items: center;

}

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

.pd-menu-toggle {

    display: none;

    background: none;

    border: none;

    font-size: 34px;

    cursor: pointer;

}

/*==========================
Overlay
==========================*/

.pd-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .45);

    visibility: hidden;

    opacity: 0;

    transition: .30s;

    z-index: 9998;

}

.pd-overlay.active {

    visibility: visible;

    opacity: 1;

}

/*==========================
Mobile Drawer
==========================*/

.pd-mobile-menu {

    position: fixed;

    right: -320px;

    top: 0;

    width: 300px;

    height: 100vh;

    background: #ffffff;

    z-index: 99999;

    transition: .35s;

    padding: 25px;

    overflow: auto;

}

.pd-mobile-menu.active {

    right: 0;

}

.pd-close-menu {

    background: none;

    border: none;

    font-size: 28px;

    margin-bottom: 30px;

}

.pd-mobile-nav {

    margin: 0;

    padding: 0;

}

.pd-mobile-nav li {

    list-style: none;

    margin-bottom: 18px;

}

.pd-mobile-nav li a {

    font-size: 18px;

    font-weight: 600;

    color: #333;

}

body.pd-menu-open {

    overflow: hidden;

}

/*=========================================================
HERO SECTION
=========================================================*/

.pd-hero {

    position: relative;
    min-height: calc(140vh - 84px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #F8F5EE;

}

/*=========================================================
Hero Background Artwork
=========================================================*/

.pd-hero-artwork {

    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;

}

.pd-hero-image {

    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;

}

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

.pd-hero .pd-container {

    position: relative;
    z-index: 5;

}

/*=========================================================
Content Width
=========================================================*/

.pd-hero-grid {

    max-width: 560px;
    min-height: calc(100vh - 84px);

    display: flex;
    align-items: center;

}

/*=========================================================
Hero Content
=========================================================*/

.pd-hero-content {

    width: 100%;

}

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

.pd-badge {

    display: inline-flex;
    align-items: center;

    padding: 10px 22px;

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

    border-radius: 40px;

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

    color: var(--pd-primary);

    margin-bottom: 28px;

    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);

}

/*=========================================================
Heading
=========================================================*/

.pd-title {

    font-size: 64px;
    line-height: 1.05;
    font-weight: 800;

    color: #202020;

    margin-bottom: 20px;

}

.pd-title span {

    color: var(--pd-primary);

}

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

.pd-description {

    font-size: 18px;
    line-height: 1.8;

    color: #5d5d5d;

    margin-bottom: 35px;

}

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

.pd-feature-icons {

    display: grid;

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

    gap: 15px;

    margin-bottom: 40px;

}

.pd-feature-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    background: #ffffff;

    border-radius: 12px;

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

    transition: .30s;

}

.pd-feature-item:hover {

    transform: translateY(-4px);

}

.pd-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #EEF6E8;

    font-size: 20px;

}

.pd-feature-item span:last-child {

    font-size: 15px;

    font-weight: 600;

}

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

.pd-price-box {

    display: flex;

    gap: 18px;

    margin-bottom: 35px;

}

.pd-mrp,

.pd-offer {

    flex: 1;

    padding: 18px;

    border-radius: 12px;

    text-align: center;

    transition: .30s;

}

.pd-mrp {

    background: #5D3922;

    color: #fff;

}

.pd-offer {

    background: var(--pd-primary);

    color: #fff;

}

.pd-mrp:hover,

.pd-offer:hover {

    transform: translateY(-5px);

}

.pd-price-box small {

    display: block;

    font-size: 12px;

    text-transform: uppercase;

    margin-bottom: 5px;

    opacity: .8;

}

.pd-price-box span {

    font-size: 34px;

    font-weight: 700;

}

.pd-mrp span {

    text-decoration: line-through;

}

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

.pd-buy-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 18px 38px;

    background: var(--pd-primary);

    color: #fff;

    border-radius: 50px;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: .3px;

    transition: .35s;

    box-shadow: 0 10px 30px rgba(59, 111, 30, .25);

}

.pd-buy-btn:hover {

    color: #fff;

    background: var(--pd-primary-dark);

    transform: translateY(-3px);

}

/*=========================================================
Desktop Large
=========================================================*/

@media(max-width:1200px) {

    .pd-title {

        font-size: 56px;

    }

}

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

@media(max-width:991px) {

    .pd-hero {

        min-height: auto;

        padding: 90px 0;

    }

    .pd-hero-grid {

        max-width: 100%;

        min-height: auto;

    }

    .pd-hero-artwork {

        opacity: .18;

    }

    .pd-title {

        font-size: 48px;

    }

}

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

@media(max-width:767px) {

    .pd-hero {

        padding: 70px 0;

    }

    .pd-title {

        font-size: 38px;

    }

    .pd-description {

        font-size: 16px;

    }

    .pd-feature-icons {

        grid-template-columns: 1fr;

    }

    .pd-price-box {

        flex-direction: column;

    }

    .pd-buy-btn {

        width: 100%;

        justify-content: center;

    }

}

/*==================================================
TRUST STRIP
==================================================*/

.pd-trust-strip {

    background: #2f5f19;

    padding: 14px 0;

}

.pd-trust-grid {

    display: grid;

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

    gap: 25px;

}

.pd-trust-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    color: #fff;

    font-size: 15px;

    font-weight: 500;

    text-align: center;

}

.pd-trust-item span {

    line-height: 1.4;

}

/*==================================================
WHY CHOOSE
==================================================*/

.pd-why-choose {

    padding: 100px 0;

    background: #FCFAF5;

}

.pd-section-heading {

    max-width: 720px;

    margin: 0 auto 60px;

    text-align: center;

}

.pd-section-badge {

    display: inline-block;

    padding: 8px 18px;

    background: #EEF6E8;

    color: var(--pd-primary);

    border-radius: 40px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 18px;

}

.pd-section-heading h2 {

    font-size: 42px;

    font-weight: 700;

    margin-bottom: 18px;

    color: #222;

}

.pd-section-heading p {

    font-size: 17px;

    line-height: 1.8;

    color: #666;

}

.pd-why-grid {

    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 60px;

    align-items: center;

}

.pd-why-image {

    text-align: center;

}

.pd-why-image img {

    max-width: 100%;

    height: auto;

}

.pd-why-features {

    display: grid;

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

    gap: 22px;

}

.pd-feature-card {

    display: flex;

    gap: 18px;

    align-items: flex-start;

    padding: 24px;

    background: #fff;

    border-radius: 16px;

    border: 1px solid #ECE6DA;

    transition: .35s;

}

.pd-feature-card:hover {

    transform: translateY(-6px);

    border-color: var(--pd-primary);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);

}

.pd-feature-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #EEF6E8;

    font-size: 26px;

    flex-shrink: 0;

}

.pd-feature-card h3 {

    font-size: 20px;

    margin-bottom: 8px;

    color: #222;

}

.pd-feature-card p {

    font-size: 15px;

    line-height: 1.7;

    color: #666;

}

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

.pd-benefits {

    padding: 100px 0;

    background: #ffffff;

}

.pd-benefits-grid {

    display: grid;

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

    gap: 30px;

}

.pd-benefit-card {

    background: #FCFAF5;

    border: 1px solid #ECE6DA;

    border-radius: 18px;

    padding: 35px 30px;

    text-align: center;

    transition: .35s;

}

.pd-benefit-card:hover {

    transform: translateY(-8px);

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

    border-color: var(--pd-primary);

}

.pd-benefit-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 25px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #EEF6E8;

    font-size: 36px;

    transition: .35s;

}

.pd-benefit-card:hover .pd-benefit-icon {

    background: var(--pd-primary);

    color: #ffffff;

}

.pd-benefit-card h3 {

    font-size: 22px;

    font-weight: 700;

    margin-bottom: 15px;

    color: #222;

}

.pd-benefit-card p {

    font-size: 15px;

    line-height: 1.8;

    color: #666;

}

/*==================================================
ABOUT
==================================================*/

.pd-about {

    padding: 100px 0;

    background: #F8F5EE;

}

.pd-about-grid {

    display: grid;

    grid-template-columns: 1fr 520px;

    gap: 70px;

    align-items: center;

}

.pd-about-content h2 {

    font-size: 42px;

    font-weight: 700;

    color: #222;

    margin: 20px 0;

    line-height: 1.25;

}

.pd-about-content p {

    font-size: 16px;

    line-height: 1.9;

    color: #666;

    margin-bottom: 22px;

}

.pd-about-points {

    display: grid;

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

    gap: 18px;

    margin-top: 35px;

}

.pd-about-point {

    background: #ffffff;

    border: 1px solid #ECE6DA;

    border-radius: 12px;

    padding: 16px 18px;

    font-weight: 600;

    transition: .3s;

}

.pd-about-point:hover {

    border-color: var(--pd-primary);

    transform: translateY(-4px);

}

.pd-about-image {

    text-align: center;

}

.pd-about-image img {

    max-width: 100%;

    height: auto;

    border-radius: 20px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

}

/*==================================================
FULL WIDTH OFFER STRIP
==================================================*/

.pd-offer-strip {

    width: 100%;

    background: #f6f2ea;

    padding: 0;

}

.pd-offer-strip-inner {

    background: #ffffff;

    padding: 18px 0;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);

}

.pd-offer-row {

    display: grid;

    grid-template-columns: 2fr 180px 260px 170px;

    align-items: center;

}

/*------------------------
LEFT
------------------------*/

.pd-offer-left {

    display: flex;

    align-items: center;

    gap: 30px;

}

.pd-offer-sticker {

    width: 120px;

    height: 90px;

    background: #d62828;

    color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    font-weight: 700;

    font-size: 20px;

    border-radius: 10px;

    transform: rotate(-6deg);

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

}

.pd-offer-left h2 {

    font-size: 42px;

    font-weight: 700;

    color: #222;

}

/*------------------------
MRP
------------------------*/

.pd-offer-mrp {

    text-align: center;

}

.pd-offer-mrp small {

    display: block;

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 8px;

}

.pd-offer-mrp span {

    font-size: 46px;

    font-weight: 700;

    color: #222;

    text-decoration: line-through;

}

/*------------------------
Offer Price
------------------------*/

.pd-offer-price {

    background: #2f5f19;

    color: #fff;

    text-align: left;

    padding: 28px 20px;

    margin-right: -30px;

    clip-path: polygon(0% 0, 70% 0, 100% 100%, 0% 100%, 0 50%)
}

.pd-offer-price small {

    display: block;

    margin-bottom: 10px;

    font-size: 15px;

}

.pd-offer-price span {

    font-size: 52px;

    font-weight: 800;

}

/*------------------------
Discount
------------------------*/

.pd-offer-discount {

    background: #f7c948;

    text-align: center;

    padding: 28px 10px;

    clip-path: polygon(25% 0, 100% 0, 100% 100%, 25% 100%, 0 50%);

    margin-left: -70px;

}

.pd-offer-discount strong {

    display: block;

    font-size: 48px;

    line-height: 1;

    color: #222;

}

.pd-offer-discount span {

    display: block;

    margin-top: 8px;

    font-weight: 600;

    color: #222;

}

/*==================================================
OFFER BANNER
==================================================

.pd-offer-banner {

    padding: 100px 0;

    background: linear-gradient(135deg, #3B6F1E, #244812);

}

.pd-offer-wrapper {

    border-radius: 30px;

    padding: 70px;

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

    backdrop-filter: blur(10px);

    text-align: center;

    color: #fff;

}

.pd-offer-tag {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 50px;

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

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 20px;

}

.pd-offer-wrapper h2 {

    font-size: 52px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 25px;

}

.pd-offer-wrapper h2 span {

    color: #FFD86B;

}

.pd-offer-wrapper p {

    max-width: 720px;

    margin: 0 auto 35px;

    font-size: 18px;

    line-height: 1.8;

    opacity: .95;

}

.pd-offer-price {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    margin-bottom: 40px;

}

.pd-old-price {

    text-decoration: line-through;

    font-size: 32px;

    opacity: .7;

}

.pd-new-price {

    font-size: 56px;

    font-weight: 800;

    color: #FFD86B;

}

.pd-save {

    background: #FFD86B;

    color: #222;

    padding: 8px 18px;

    border-radius: 50px;

    font-weight: 700;

}

.pd-offer-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.pd-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 36px;

    border: 2px solid rgba(255, 255, 255, .3);

    color: #fff;

    border-radius: 50px;

    font-weight: 600;

    transition: .3s;

}

.pd-secondary-btn:hover {

    background: #fff;

    color: #222;

}

*/
/*==================================================
HOW TO USE
==================================================*/

.pd-how-to-use {

    padding: 100px 0;

    background: #F8F5EE;

}

.pd-how-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 60px;

}

.pd-step-card {

    position: relative;

    background: #ffffff;

    border: 1px solid #ECE6DA;

    border-radius: 18px;

    padding: 35px 25px;

    text-align: center;

    transition: .35s;

}

.pd-step-card:hover {

    transform: translateY(-8px);

    border-color: var(--pd-primary);

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

}

.pd-step-number {

    position: absolute;

    top: 20px;

    right: 20px;

    font-size: 42px;

    font-weight: 800;

    color: #E8E2D5;

    line-height: 1;

}

.pd-step-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #EEF6E8;

    font-size: 34px;

}

.pd-step-card h3 {

    font-size: 22px;

    margin-bottom: 15px;

    color: #222;

}

.pd-step-card p {

    font-size: 15px;

    line-height: 1.8;

    color: #666;

}

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

.pd-footer-cta {

    padding: 100px 0;

    background: linear-gradient(135deg, #2F5F19, #19350D);

}

.pd-footer-cta-wrapper {

    max-width: 900px;

    margin: auto;

    text-align: center;

    color: #ffffff;

}

.pd-footer-badge {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 50px;

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

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 20px;

}

.pd-footer-cta h2 {

    font-size: 52px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 25px;

}

.pd-footer-cta h2 span {

    color: #FFD86B;

}

.pd-footer-cta p {

    max-width: 700px;

    margin: 0 auto 35px;

    font-size: 18px;

    line-height: 1.8;

    opacity: .95;

}

.pd-footer-price {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    margin-bottom: 35px;

}

.pd-footer-old-price {

    font-size: 30px;

    text-decoration: line-through;

    opacity: .6;

}

.pd-footer-new-price {

    font-size: 56px;

    font-weight: 800;

    color: #FFD86B;

}

.pd-footer-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

    margin-bottom: 35px;

}

.pd-footer-call {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 36px;

    border-radius: 50px;

    border: 2px solid rgba(255, 255, 255, .35);

    color: #ffffff;

    font-weight: 600;

    transition: .3s;

}

.pd-footer-call:hover {

    background: #ffffff;

    color: #222222;

}

.pd-footer-note {

    font-size: 15px;

    color: rgba(255, 255, 255, .85);

    line-height: 1.8;

}

/*==================================================
FOOTER
==================================================*/

.pd-footer {

    background: #1E1E1E;

    color: #ffffff;

    padding: 80px 0 25px;

}

.pd-footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 50px;

    margin-bottom: 60px;

}

.pd-footer-logo img {

    max-height: 60px;

    margin-bottom: 20px;

}

.pd-footer-col p {

    color: #bdbdbd;

    line-height: 1.9;

}

.pd-footer-col h3 {

    font-size: 20px;

    margin-bottom: 22px;

}

.pd-footer-col ul {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.pd-footer-col ul li a {

    color: #bdbdbd;

    transition: .3s;

}

.pd-footer-col ul li a:hover {

    color: #ffffff;

    padding-left: 6px;

}

.pd-contact-list li {

    color: #bdbdbd;

}

.pd-social {

    display: flex;

    gap: 12px;

    margin-top: 25px;

}

.pd-social a {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #333;

    color: #fff;

    transition: .3s;

}

.pd-social a:hover {

    background: var(--pd-primary);

}

.pd-footer-bottom {

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

    padding-top: 25px;

    text-align: center;

    color: #999;

}