.elementor-8136 .elementor-element.elementor-element-eccb259{--display:flex;}/* Start custom CSS for html, class: .elementor-element-56d5d72 *//* =========================================================
   BUSINESS DRIFT
   PREMIUM BANGLA EBOOK CSS
   Corporate Gifting Agency
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Noto+Serif+Bengali:wght@400;500;600;700&display=swap');


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --ink: #242424;
    --muted: #707070;

    --cream: #f7f3eb;
    --cream-dark: #ebe4d7;

    --paper: #ffffff;

    --gold: #c5a15a;
    --gold-dark: #9c7838;

    --green: #71816d;
    --green-light: #e8eee5;

    --rose: #b98579;
    --rose-light: #f5e9e5;

    --brown: #554638;
    --brown-light: #7b6a5b;

    --border: #e4ded3;

    --shadow:
        0 25px 70px rgba(54, 45, 35, 0.12);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #d9d4ca;
    color: var(--ink);
    font-family: "Hind Siliguri", sans-serif;
    font-size: 16px;
    line-height: 1.85;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    padding-left: 25px;
}


/* =========================================================
   EBOOK PAGE
   ========================================================= */

.ebook {
    width: 210mm;
    margin: 30px auto;
}

.page {
    position: relative;

    width: 210mm;
    min-height: 297mm;

    padding: 25mm 22mm;

    background: var(--paper);

    margin-bottom: 25px;

    overflow: hidden;

    box-shadow: var(--shadow);

    page-break-after: always;
}

.soft-page {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(197,161,90,.12),
            transparent 28%
        ),
        var(--paper);
}


/* =========================================================
   PAGE NUMBER
   ========================================================= */

.page-number {
    position: absolute;

    top: 14mm;
    right: 19mm;

    font-size: 11px;

    color: #aaa;

    letter-spacing: 2px;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3 {
    font-family: "Noto Serif Bengali", serif;
    line-height: 1.3;
}

h2 {
    color: var(--brown);

    font-size: 34px;

    margin-bottom: 22px;
}

h3 {
    font-size: 21px;

    margin-bottom: 8px;
}

p {
    color: #4e4e4e;

    margin-bottom: 17px;
}

.lead {
    font-size: 20px;

    line-height: 1.85;

    color: #353535;
}

.eyebrow {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--green);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   COVER
   ========================================================= */

.cover {
    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(197,161,90,.35),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #4e4236,
            #756754
        );
}

.cover::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

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

    border-radius: 50%;

    right: -170px;
    top: -160px;
}

.cover::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

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

    border-radius: 50%;

    left: -150px;
    bottom: -130px;
}

.cover-shape {
    position: absolute;

    border-radius: 50%;

    background: rgba(255,255,255,.04);
}

.shape-one {
    width: 180px;
    height: 180px;

    right: 80px;
    bottom: 100px;
}

.shape-two {
    width: 100px;
    height: 100px;

    left: 90px;
    top: 90px;
}

.cover-content {
    position: relative;

    z-index: 5;

    width: 78%;
}

.badge {
    display: inline-block;

    padding: 8px 16px;

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

    border-radius: 50px;

    font-size: 11px;

    letter-spacing: 1.5px;

    margin-bottom: 28px;
}

.cover h1 {
    color: white;

    font-size: 58px;

    line-height: 1.08;

    margin-bottom: 22px;
}

.cover-subtitle {
    color: rgba(255,255,255,.9);

    font-size: 23px;

    font-weight: 600;

    line-height: 1.6;
}

.cover-divider {
    width: 90px;

    height: 3px;

    background: var(--gold);

    margin: 28px 0;
}

.cover-description {
    color: rgba(255,255,255,.78);

    font-size: 17px;

    max-width: 480px;
}

.author-box {
    margin-top: 55px;

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.author-box strong {
    color: white;

    font-size: 15px;
}

.author-box span {
    color: rgba(255,255,255,.55);

    font-size: 11px;
}


/* =========================================================
   QUOTE
   ========================================================= */

.quote-box {
    position: relative;

    padding: 28px 35px;

    margin: 32px 0;

    background: var(--green-light);

    border-left: 5px solid var(--green);

    color: #3f493c;

    font-family: "Noto Serif Bengali", serif;

    font-size: 19px;

    line-height: 1.75;
}

.quote-box span {
    font-size: 55px;

    line-height: 0;

    vertical-align: -20px;

    margin-right: 8px;
}


/* =========================================================
   PROBLEM CARDS
   ========================================================= */

.problem-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.problem-card {
    padding: 25px;

    background: var(--rose-light);

    border: 1px solid #ead4ce;

    border-radius: 20px;
}

.problem-card > span {
    display: flex;

    width: 37px;
    height: 37px;

    align-items: center;
    justify-content: center;

    background: white;

    color: var(--rose);

    border-radius: 50%;

    font-weight: 700;

    margin-bottom: 12px;
}


/* =========================================================
   COMPARISON
   ========================================================= */

.comparison {
    display: grid;

    grid-template-columns: 1fr 70px 1fr;

    align-items: center;

    gap: 15px;

    margin: 35px 0;
}

.compare-box {
    padding: 28px;

    border-radius: 20px;

    background: var(--cream);

    border: 1px solid var(--border);
}

.compare-box.highlighted {
    background: var(--green-light);

    border-color: #cad8c5;
}

.compare-box li {
    margin-bottom: 9px;

    font-size: 14px;
}

.compare-vs {
    display: flex;

    align-items: center;
    justify-content: center;

    font-weight: 700;

    color: var(--gold);
}


/* =========================================================
   OPPORTUNITY
   ========================================================= */

.opportunity-cards {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.opportunity-cards > div {
    padding: 25px;

    background: var(--cream);

    border-radius: 18px;

    border: 1px solid var(--border);
}

.opportunity-cards strong {
    display: block;

    font-size: 19px;

    color: var(--brown);

    margin-bottom: 7px;
}

.formula-box {
    margin-top: 30px;

    padding: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

    border-radius: 20px;

    background: var(--brown);

    color: white;
}

.formula-box b {
    color: var(--gold);
}

.formula-box strong {
    color: #f0d79c;
}


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

.cta-page {
    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(113,129,109,.25),
            transparent 30%
        ),
        var(--cream);
}

.dark-cta {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(197,161,90,.2),
            transparent 30%
        ),
        var(--brown);
}

.cta-container {
    width: 85%;

    padding: 60px 50px;

    text-align: center;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #71634f,
            #71816d
        );

    color: white;

    box-shadow: 0 25px 60px rgba(55,45,35,.18);
}

.dark-cta .cta-container {
    background:
        linear-gradient(
            135deg,
            #655444,
            #453b31
        );
}

.cta-tag {
    display: inline-block;

    font-size: 11px;

    letter-spacing: 2px;

    opacity: .7;

    margin-bottom: 20px;
}

.cta-container h2 {
    color: white;

    font-size: 31px;

    margin-bottom: 20px;
}

.cta-container p {
    color: rgba(255,255,255,.8);

    max-width: 650px;

    margin: 0 auto 30px;
}

.cta-button {
    display: inline-block;

    padding: 13px 35px;

    background: white;

    color: var(--brown);

    border-radius: 50px;

    font-weight: 700;

    transition: .3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}


/* =========================================================
   SEGMENTS
   ========================================================= */

.segment-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.segment {
    padding: 23px;

    border-radius: 18px;

    background: var(--cream);

    border: 1px solid var(--border);
}

.segment span {
    display: flex;

    width: 36px;
    height: 36px;

    align-items: center;
    justify-content: center;

    background: var(--green-light);

    color: var(--green);

    border-radius: 50%;

    margin-bottom: 10px;

    font-weight: 700;
}


/* =========================================================
   PERSONA
   ========================================================= */

.persona {
    display: flex;

    align-items: center;

    gap: 20px;

    padding: 20px 22px;

    margin-bottom: 15px;

    background: var(--cream);

    border-radius: 18px;

    border: 1px solid var(--border);
}

.persona-avatar {
    flex: 0 0 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--green);

    color: white;

    border-radius: 50%;

    font-size: 11px;

    font-weight: 700;
}

.persona p {
    margin-bottom: 0;
}


/* =========================================================
   PRODUCT
   ========================================================= */

.product-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.product-grid > div {
    padding: 24px;

    border-radius: 18px;

    background: linear-gradient(
        145deg,
        #fff,
        #f6f2ea
    );

    border: 1px solid var(--border);
}


/* =========================================================
   TIP
   ========================================================= */

.tip-box {
    padding: 22px 25px;

    margin: 25px 0;

    background: var(--green-light);

    border-left: 5px solid var(--green);

    border-radius: 0 15px 15px 0;
}

.warning-box {
    padding: 22px 25px;

    margin: 25px 0;

    background: var(--rose-light);

    border-left: 5px solid var(--rose);

    border-radius: 0 15px 15px 0;
}


/* =========================================================
   CALENDAR
   ========================================================= */

.calendar-chart {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin: 30px 0;
}

.calendar-chart > div {
    padding: 24px;

    background: var(--cream);

    border-radius: 18px;

    border: 1px solid var(--border);
}

.calendar-chart strong,
.calendar-chart span {
    display: block;
}

.calendar-chart strong {
    color: var(--brown);

    font-size: 19px;
}

.calendar-chart span {
    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   PACKAGING FLOW
   ========================================================= */

.packaging-flow {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    margin: 45px 0;
}

.packaging-flow > div {
    padding: 18px 22px;

    text-align: center;

    border-radius: 18px;

    background: var(--cream);

    border: 1px solid var(--border);
}

.packaging-flow strong,
.packaging-flow span {
    display: block;
}

.packaging-flow span {
    font-size: 11px;

    color: var(--muted);
}


/* =========================================================
   BRANDING
   ========================================================= */

.branding-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.branding-grid > div {
    padding: 25px;

    background: var(--cream);

    border-radius: 18px;
}

.branding-grid span {
    display: flex;

    width: 34px;
    height: 34px;

    align-items: center;
    justify-content: center;

    background: white;

    border-radius: 50%;

    color: var(--gold-dark);

    margin-bottom: 10px;
}


/* =========================================================
   REVENUE MODEL
   ========================================================= */

.revenue-model {
    display: grid;

    gap: 15px;

    margin-top: 30px;
}

.revenue-item {
    display: flex;

    gap: 18px;

    align-items: center;

    padding: 20px;

    border-radius: 17px;

    background: var(--cream);
}

.revenue-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--brown);

    color: white;

    border-radius: 50%;
}

.revenue-item p {
    margin-bottom: 0;
}


/* =========================================================
   PACKAGE
   ========================================================= */

.package-grid {
    display: grid;

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

    gap: 18px;

    margin: 30px 0;
}

.package-card {
    padding: 28px 22px;

    border: 1px solid var(--border);

    border-radius: 20px;

    background: white;
}

.package-card.featured {
    background: var(--green-light);

    border-color: var(--green);

    transform: translateY(-8px);
}

.package-card > span {
    color: var(--green);

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 700;
}

.package-card strong {
    display: block;

    color: var(--brown);

    font-size: 22px;

    margin: 15px 0;
}

.package-card li {
    font-size: 13px;

    margin-bottom: 7px;
}


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

.pricing-formula {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    padding: 25px;

    margin: 30px 0;

    background: var(--cream);

    border-radius: 20px;
}

.pricing-formula div {
    padding: 12px 15px;

    background: white;

    border-radius: 10px;

    font-size: 13px;
}

.pricing-formula span {
    color: var(--gold-dark);

    font-weight: 700;
}


/* =========================================================
   TABLES
   ========================================================= */

.quantity-table,
.risk-table {
    margin-top: 30px;

    border: 1px solid var(--border);

    border-radius: 18px;

    overflow: hidden;
}

.quantity-row {
    display: grid;

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

    gap: 15px;

    padding: 17px 20px;

    border-bottom: 1px solid var(--border);
}

.quantity-row:last-child,
.risk-row:last-child {
    border-bottom: none;
}

.quantity-row.head,
.risk-row.head {
    background: var(--brown);

    color: white;

    font-weight: 700;
}


/* =========================================================
   SUPPLIER
   ========================================================= */

.supplier-map {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    margin: 45px 0;
}

.supplier-map > div:not(.connector) {
    padding: 22px;

    min-width: 125px;

    text-align: center;

    border-radius: 18px;

    background: var(--cream);

    border: 1px solid var(--border);
}

.supplier-map strong,
.supplier-map span {
    display: block;
}

.supplier-map span {
    font-size: 11px;

    color: var(--muted);
}

.connector {
    color: var(--gold);

    font-size: 25px;
}


/* =========================================================
   CHECKLIST
   ========================================================= */

.checklist {
    display: grid;

    gap: 12px;

    margin-top: 30px;
}

.checklist label {
    padding: 15px 20px;

    background: var(--cream);

    border-radius: 12px;

    font-size: 14px;
}


/* =========================================================
   SALES FUNNEL
   ========================================================= */

.sales-funnel {
    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 30px;
}

.funnel-step {
    width: 78%;

    padding: 22px;

    text-align: center;

    border-radius: 18px;

    background: var(--cream);

    border: 1px solid var(--border);
}

.funnel-step span {
    display: flex;

    width: 35px;
    height: 35px;

    align-items: center;
    justify-content: center;

    margin: 0 auto 8px;

    background: var(--green);

    color: white;

    border-radius: 50%;
}

.funnel-step p {
    margin-bottom: 0;

    font-size: 13px;
}

.funnel-arrow {
    padding: 8px;

    color: var(--gold);

    font-size: 22px;
}


/* =========================================================
   LEADS
   ========================================================= */

.lead-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.lead-grid > div {
    padding: 23px;

    background: var(--cream);

    border-radius: 18px;
}

.lead-grid strong {
    display: block;

    font-size: 18px;

    color: var(--brown);

    margin-bottom: 7px;
}


/* =========================================================
   PROPOSAL
   ========================================================= */

.proposal-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.proposal-list > div {
    padding: 23px;

    background: var(--cream);

    border-radius: 18px;
}

.proposal-list span {
    display: inline-flex;

    width: 35px;
    height: 35px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: white;

    color: var(--green);

    margin-bottom: 10px;
}


/* =========================================================
   REVENUE EXAMPLE
   ========================================================= */

.revenue-card {
    margin: 30px 0;

    border: 1px solid var(--border);

    border-radius: 20px;

    overflow: hidden;
}

.revenue-card > div {
    display: flex;

    justify-content: space-between;

    padding: 19px 24px;

    border-bottom: 1px solid var(--border);
}

.revenue-card .profit-row {
    background: var(--green-light);

    font-size: 18px;
}

.revenue-card strong {
    color: var(--brown);
}


/* =========================================================
   MARGIN CHART
   ========================================================= */

.margin-chart {
    margin: 35px 0;
}

.margin-row {
    margin-bottom: 20px;
}

.margin-row label {
    display: block;

    margin-bottom: 7px;

    font-weight: 600;
}

.margin-bar {
    height: 20px;

    background: var(--green);

    border-radius: 30px;

    margin-bottom: 5px;
}

.margin-bar.product {
    width: 80%;
}

.margin-bar.packaging {
    width: 38%;
}

.margin-bar.branding {
    width: 27%;
}

.margin-bar.logistics {
    width: 30%;
}

.margin-bar.profit {
    width: 22%;
    background: var(--gold);
}

.margin-row strong {
    font-size: 11px;

    color: var(--muted);
}


/* =========================================================
   OPERATION
   ========================================================= */

.operation-flow {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    flex-wrap: wrap;

    margin: 45px 0;
}

.operation-flow > div {
    width: 120px;

    padding: 18px 10px;

    text-align: center;

    border-radius: 17px;

    background: var(--cream);
}

.operation-flow strong,
.operation-flow span {
    display: block;
}

.operation-flow span {
    font-size: 10px;

    color: var(--muted);
}

.operation-flow > span {
    color: var(--gold);

    font-size: 22px;
}


/* =========================================================
   QC
   ========================================================= */

.qc-system {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.qc-system > div {
    padding: 25px;

    border-radius: 18px;

    background: var(--cream);
}

.qc-system span {
    display: flex;

    width: 35px;
    height: 35px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--green);

    color: white;

    margin-bottom: 10px;
}

.qc-system strong {
    display: block;

    margin-bottom: 5px;
}


/* =========================================================
   ANNUAL CYCLE
   ========================================================= */

.annual-cycle {
    display: grid;

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

    gap: 12px;

    margin: 35px 0;
}

.annual-cycle > div {
    padding: 22px 12px;

    text-align: center;

    border-radius: 17px;

    background: var(--cream);
}

.annual-cycle strong,
.annual-cycle span {
    display: block;
}

.annual-cycle strong {
    color: var(--green);

    font-size: 23px;
}

.annual-cycle span {
    font-size: 11px;

    color: var(--muted);
}

.strategy-box {
    padding: 25px;

    background: var(--green-light);

    border-radius: 20px;
}


/* =========================================================
   RETENTION
   ========================================================= */

.retention-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.retention-grid > div {
    padding: 23px;

    background: var(--cream);

    border-radius: 18px;
}

.retention-grid strong {
    color: var(--green);

    font-size: 22px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.content-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.content-grid > div {
    padding: 23px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 18px;
}

.content-grid span {
    display: flex;

    width: 34px;
    height: 34px;

    align-items: center;
    justify-content: center;

    background: var(--rose-light);

    color: var(--rose);

    border-radius: 50%;

    margin-bottom: 10px;
}


/* =========================================================
   PARTNER WHEEL
   ========================================================= */

.partner-wheel {
    position: relative;

    height: 430px;

    margin-top: 30px;
}

.partner-wheel .center {
    position: absolute;

    width: 130px;
    height: 130px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    background: var(--brown);

    color: white;

    border-radius: 50%;

    font-weight: 700;

    z-index: 2;
}

.partner {
    position: absolute;

    width: 105px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--green-light);

    border-radius: 50px;

    color: var(--green);

    font-size: 12px;

    font-weight: 700;
}

.p1 {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.p2 {
    top: 95px;
    right: 35px;
}

.p3 {
    bottom: 95px;
    right: 35px;
}

.p4 {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.p5 {
    bottom: 95px;
    left: 35px;
}

.p6 {
    top: 95px;
    left: 35px;
}


/* =========================================================
   CHALLENGES
   ========================================================= */

.challenge-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.challenge-grid > div {
    padding: 24px;

    background: var(--rose-light);

    border-radius: 18px;
}

.challenge-grid span {
    display: flex;

    width: 35px;
    height: 35px;

    align-items: center;
    justify-content: center;

    background: white;

    color: var(--rose);

    border-radius: 50%;

    margin-bottom: 10px;
}


/* =========================================================
   RISK TABLE
   ========================================================= */

.risk-row {
    display: grid;

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

    gap: 15px;

    padding: 17px 20px;

    border-bottom: 1px solid var(--border);
}


/* =========================================================
   PAYMENT
   ========================================================= */

.payment-flow {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 45px 0;
}

.payment-flow > div:not(:nth-child(even)) {
    padding: 25px;

    min-width: 145px;

    text-align: center;

    background: var(--cream);

    border-radius: 18px;
}

.payment-flow strong,
.payment-flow span {
    display: block;
}

.payment-flow span {
    font-size: 11px;

    color: var(--muted);
}

.payment-flow > div:nth-child(even) {
    color: var(--gold);

    font-size: 25px;
}


/* =========================================================
   LEGAL
   ========================================================= */

.legal-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.legal-grid > div {
    padding: 23px;

    background: var(--cream);

    border-radius: 18px;
}


/* =========================================================
   PROS CONS
   ========================================================= */

.pros-cons {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 30px;
}

.pros,
.cons {
    padding: 30px;

    border-radius: 22px;
}

.pros {
    background: var(--green-light);
}

.cons {
    background: var(--rose-light);
}

.pros h3 {
    color: #52624d;
}

.cons h3 {
    color: #855e52;
}

.pros li,
.cons li {
    margin-bottom: 9px;
}


/* =========================================================
   KPI
   ========================================================= */

.kpi-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.kpi-grid > div {
    padding: 23px;

    background: var(--cream);

    border-radius: 18px;
}

.kpi-grid strong {
    color: var(--brown);

    display: block;

    font-size: 18px;
}


/* =========================================================
   ROADMAP
   ========================================================= */

.roadmap {
    display: grid;

    gap: 15px;

    margin-top: 30px;
}

.roadmap > div {
    position: relative;

    padding: 20px 25px 20px 85px;

    background: var(--cream);

    border-radius: 18px;
}

.roadmap span {
    position: absolute;

    left: 20px;
    top: 20px;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--green);

    color: white;

    border-radius: 50%;

    font-size: 11px;

    text-align: center;
}


/* =========================================================
   SCALE
   ========================================================= */

.scale-path {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    margin: 50px 0;
}

.scale-path > div:not(:nth-child(even)) {
    padding: 23px 15px;

    min-width: 120px;

    text-align: center;

    border-radius: 18px;

    background: var(--cream);
}

.scale-path strong,
.scale-path span {
    display: block;
}

.scale-path span {
    font-size: 11px;

    color: var(--muted);
}

.scale-path > div:nth-child(even) {
    color: var(--gold);

    font-size: 22px;
}


/* =========================================================
   EXPANSION
   ========================================================= */

.expansion-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;
}

.expansion-grid > div {
    padding: 24px;

    background: var(--cream);

    border-radius: 18px;
}


/* =========================================================
   VISION
   ========================================================= */

.vision-statement {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

    margin: 45px 0;

    padding: 30px;

    background: var(--cream);

    border-radius: 22px;
}

.vision-statement span,
.vision-statement strong {
    display: block;

    text-align: center;
}

.vision-statement span {
    color: var(--muted);

    font-size: 11px;
}

.vision-statement strong {
    color: var(--brown);

    font-size: 17px;
}

.vision-statement b {
    color: var(--gold);

    font-size: 22px;
}


/* =========================================================
   FINAL CHECKLIST
   ========================================================= */

.final-checklist {
    display: grid;

    gap: 10px;

    margin-top: 30px;

    list-style-position: inside;
}

.final-checklist li {
    padding: 12px 18px;

    background: var(--cream);

    border-radius: 10px;
}


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

.final-cta {
    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(113,129,109,.25),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(197,161,90,.2),
            transparent 28%
        ),
        #f5f2ea;
}

.final-content {
    width: 82%;
}

.final-content h1 {
    font-size: 43px;

    color: var(--brown);

    margin: 25px 0;

    line-height: 1.35;
}

.final-line {
    width: 85px;

    height: 3px;

    background: var(--gold);

    margin: 25px auto;
}

.final-content > p {
    max-width: 650px;

    margin: 0 auto 28px;

    font-size: 18px;
}

.final-message {
    max-width: 680px;

    margin: 0 auto 32px;

    padding: 25px;

    background: white;

    border-radius: 20px;

    font-family: "Noto Serif Bengali", serif;

    font-size: 20px;

    line-height: 1.8;

    color: var(--brown);

    box-shadow:
        0 15px 40px rgba(60,50,40,.08);
}

.final-button {
    padding: 16px 48px;

    font-size: 18px;
}

.brand-footer {
    display: flex;

    flex-direction: column;

    gap: 2px;

    margin-top: 55px;
}

.brand-footer strong {
    color: var(--brown);

    font-family: "Noto Serif Bengali", serif;

    font-size: 24px;
}

.brand-footer span {
    color: #999;

    font-size: 11px;
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    body {
        background: white;
    }

    .ebook {
        width: auto;

        margin: 0;
    }

    .page {
        width: 210mm;

        min-height: 297mm;

        margin: 0;

        box-shadow: none;
    }

    .cta-button {
        color: var(--brown);
    }
}


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

@media (max-width: 900px) {

    body {
        background: white;
    }

    .ebook {
        width: 100%;

        margin: 0;
    }

    .page {
        width: 100%;

        min-height: 100vh;

        padding: 70px 28px;

        margin: 0;
    }

    .cover h1 {
        font-size: 43px;
    }

    h2 {
        font-size: 29px;
    }

    .problem-grid,
    .segment-grid,
    .product-grid,
    .opportunity-cards,
    .branding-grid,
    .lead-grid,
    .proposal-list,
    .challenge-grid,
    .legal-grid,
    .expansion-grid,
    .kpi-grid,
    .retention-grid,
    .qc-system,
    .pros-cons {
        grid-template-columns: 1fr;
    }

    .comparison {
        grid-template-columns: 1fr;

        text-align: left;
    }

    .compare-vs {
        display: none;
    }

    .package-grid {
        grid-template-columns: 1fr;
    }

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

    .quantity-row,
    .risk-row {
        grid-template-columns: 1fr;
    }

    .quantity-row.head,
    .risk-row.head {
        display: none;
    }

    .annual-cycle {
        grid-template-columns: 1fr 1fr;
    }

    .payment-flow {
        flex-direction: column;
    }

    .payment-flow > div:nth-child(even) {
        transform: rotate(90deg);
    }

    .operation-flow {
        flex-direction: column;
    }

    .operation-flow > span {
        transform: rotate(90deg);
    }

    .scale-path {
        flex-direction: column;
    }

    .scale-path > div:nth-child(even) {
        transform: rotate(90deg);
    }

    .pricing-formula {
        flex-direction: column;
    }

    .final-content {
        width: 100%;
    }

    .final-content h1 {
        font-size: 32px;
    }

    .cta-container {
        width: 100%;

        padding: 40px 25px;
    }

    .partner-wheel {
        transform: scale(.85);
    }
}/* End custom CSS */