.elementor-8380 .elementor-element.elementor-element-2fd79af{--display:flex;}/* Start custom CSS for html, class: .elementor-element-8153d51 */```css
@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');

:root {
    --green: #245b4a;
    --green-dark: #12382d;
    --green-light: #e9f1ed;

    --cream: #faf7ef;
    --cream-dark: #eee8d9;

    --gold: #b28a45;
    --terracotta: #b76b4b;

    --brown: #5b4539;

    --text: #29322e;
    --muted: #707a75;

    --white: #ffffff;

    --border: #e1e4df;

    --shadow:
        0 18px 50px rgba(30, 55, 44, .11);
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    background: #e4e2dc;
    color: var(--text);
    font-family: "Hind Siliguri", sans-serif;
    line-height: 1.85;
}


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

.ebook {
    max-width: 1100px;
    margin: 40px auto;
}


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

.page {
    position: relative;
    min-height: 1450px;
    padding: 105px 100px;
    margin-bottom: 25px;

    background: var(--white);

    overflow: hidden;

    box-shadow: var(--shadow);

    page-break-after: always;
}

.page::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    border-radius: 50%;

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

    background:
        rgba(36, 91, 74, .035);
}

.page::after {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    border-radius: 50%;

    left: -100px;
    bottom: -90px;

    background:
        rgba(178, 138, 69, .035);
}


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

h1,
h2,
h3 {
    font-family:
        "Noto Serif Bengali",
        serif;

    color: var(--green-dark);
}

h1 {
    font-size: 58px;
    line-height: 1.28;
}

h2 {
    font-size: 42px;
    line-height: 1.4;
    margin-bottom: 32px;
}

h3 {
    font-size: 23px;
    margin-bottom: 10px;
}

p {
    font-size: 19px;
    margin-bottom: 22px;
}

.lead {
    font-size: 24px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--green-dark);
}

.center {
    text-align: center;
}

.eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--gold);

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

    letter-spacing: 2px;
}

.page-number {
    position: absolute;

    right: 65px;
    top: 45px;

    color: var(--gold);

    font-size: 14px;
    font-weight: 700;
}


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

.cover-page {
    padding: 0;

    min-height: 1450px;

    display: flex;

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

    text-align: center;

    color: white;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.09),
            transparent 25%
        ),

        radial-gradient(
            circle at 80% 80%,
            rgba(183,107,75,.16),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #102f26,
            #245b4a 58%,
            #173d31
        );
}

.cover-page::before,
.cover-page::after {
    display: none;
}

.cover-pattern {
    position: absolute;

    width: 700px;
    height: 700px;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 80px rgba(255,255,255,.018),
        0 0 0 160px rgba(255,255,255,.012);
}

.cover-content {
    position: relative;
    z-index: 2;

    max-width: 800px;
}

.brand-label {
    margin-bottom: 38px;

    color: #d9bd7b;

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

    letter-spacing: 4px;
}

.cover-icon {
    font-size: 78px;

    margin-bottom: 22px;
}

.cover-page h1 {
    color: white;
    font-size: 62px;
}

.cover-page h1 span {
    color: #d9bd7b;
}

.cover-subtitle {
    margin-top: 30px;

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

    font-size: 24px;
}

.cover-line {
    width: 90px;
    height: 2px;

    margin: 40px auto;

    background: var(--gold);
}

.author {
    color: white;
    font-size: 18px;
}

.copyright {
    color: rgba(255,255,255,.62);
    font-size: 13px;
}


/* =====================================================
   BOXES
===================================================== */

.insight-box {
    padding: 30px 35px;

    margin: 35px 0;

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

    border-radius:
        0 18px 18px 0;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #f8f3e6
        );
}

.insight-box p {
    margin-bottom: 0;
}

.quote-box {
    margin-top: 35px;

    padding: 32px;

    border-radius: 24px;

    text-align: center;

    background:
        var(--green-light);

    color: var(--green-dark);

    font-family:
        "Noto Serif Bengali";

    font-size: 25px;
}


/* =====================================================
   TRANSFORMATION
===================================================== */

.transformation {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin: 50px 0;
}

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

    border-radius: 18px;

    background: #f6f8f5;

    text-align: center;

    font-weight: 600;
}

.transform-box span {
    display: block;

    color: var(--gold);

    margin-bottom: 5px;
}

.transform-box.highlight {
    background:
        var(--green);

    color: white;
}

.transform-arrow {
    color: var(--gold);
    font-size: 30px;
}


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

.grid-2 {
    display: grid;

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

    gap: 22px;

    margin-top: 35px;
}

.problem-card {
    padding: 30px;

    border-radius: 22px;

    background: #f8faf8;

    border:
        1px solid #e2e8e4;
}

.problem-card span {
    color: var(--gold);

    font-weight: 700;

    font-size: 16px;
}


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

.product-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 35px;
}

.product-grid > div {
    min-height: 190px;

    padding: 25px;

    border-radius: 20px;

    background: #f7faf8;

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

.product-grid span {
    font-size: 35px;

    display: block;

    margin-bottom: 12px;
}

.product-grid p {
    font-size: 16px;
}


/* =====================================================
   MEMORY CARD
===================================================== */

.memory-card {
    display: flex;

    align-items: center;

    gap: 30px;

    padding: 40px;

    margin: 40px 0;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #fff8ee,
            #f7f1e7
        );
}

.memory-icon {
    width: 90px;
    height: 90px;

    display: flex;

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

    border-radius: 50%;

    background: white;

    font-size: 40px;

    flex-shrink: 0;
}


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

.cta-page {
    min-height: 720px;

    margin-bottom: 25px;

    padding: 90px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    color: white;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.08),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #12382d,
            #245b4a
        );

    page-break-after: always;
}

.cta-page h2 {
    color: white;

    font-size: 48px;
}

.cta-page p {
    max-width: 700px;

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

.cta-icon {
    font-size: 70px;

    margin-bottom: 28px;
}

.cta-button {
    display: inline-flex;

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

    min-width: 210px;

    padding: 17px 38px;

    margin-top: 20px;

    border-radius: 60px;

    background:
        linear-gradient(
            135deg,
            #dec17a,
            #b28a45
        );

    color: #20382d;

    text-decoration: none;

    font-size: 20px;
    font-weight: 700;

    box-shadow:
        0 15px 35px rgba(0,0,0,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

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

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

.cta-button.large {
    min-width: 260px;

    font-size: 23px;
}


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

.persona-grid {
    display: grid;

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

    gap: 25px;

    margin-top: 35px;
}

.persona {
    padding: 35px;

    border-radius: 24px;

    background: #f7faf8;
}

.persona-icon {
    font-size: 45px;

    margin-bottom: 15px;
}


/* =====================================================
   SOURCE GRID
===================================================== */

.source-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}

.source-grid > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;

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


/* =====================================================
   CAMPAIGN
===================================================== */

.campaign-flow {
    display: flex;

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

    flex-wrap: wrap;

    gap: 12px;

    margin: 50px 0;
}

.campaign-flow > div {
    padding: 22px;

    min-width: 150px;

    border-radius: 18px;

    background: var(--green-light);

    text-align: center;
}

.campaign-flow strong,
.campaign-flow small {
    display: block;
}

.campaign-flow small {
    color: var(--muted);
}


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

table {
    width: 100%;

    border-collapse: collapse;

    margin: 35px 0;

    font-size: 17px;
}

th {
    padding: 17px;

    background:
        var(--green);

    color: white;

    text-align: left;
}

td {
    padding: 16px;

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

tr:nth-child(even) {
    background: #fafbf9;
}

.highlight-row {
    background: #edf6f0 !important;

    font-weight: 700;
}


/* =====================================================
   PROCESS
===================================================== */

.process-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 40px;
}

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

    border-radius: 20px;

    background: #f7faf8;
}

.process-grid span {
    display: block;

    color: var(--gold);

    font-weight: 700;

    margin-bottom: 12px;
}


/* =====================================================
   DESIGN PRINCIPLES
===================================================== */

.design-principles {
    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}

.design-principles > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;
}

.design-principles strong {
    color: var(--gold);

    font-size: 25px;
}


/* =====================================================
   STORY CARD
===================================================== */

.story-card {
    display: grid;

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

    align-items: center;

    gap: 20px;

    padding: 35px;

    margin: 45px 0;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #f7faf8,
            #fffaf1
        );
}

.story-number {
    width: 55px;
    height: 55px;

    display: flex;

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

    border-radius: 50%;

    background: var(--green);

    color: white;

    font-weight: 700;
}

.story-arrow {
    color: var(--gold);

    font-size: 30px;

    text-align: center;
}


/* =====================================================
   POSITIONING
===================================================== */

.positioning {
    height: 520px;

    position: relative;

    margin: 50px 0;

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

    border-bottom:
        2px solid var(--green);

    background:
        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(36,91,74,.10) 50%,
            transparent 50.2%
        ),

        linear-gradient(
            0deg,
            transparent 49.8%,
            rgba(36,91,74,.10) 50%,
            transparent 50.2%
        );
}

.position-axis.horizontal,
.position-axis.vertical {
    display: none;
}

.axis {
    position: absolute;

    color: var(--muted);

    font-size: 14px;
}

.axis.left {
    left: 0;
    bottom: -35px;
}

.axis.right {
    right: 0;
    bottom: -35px;
}

.axis.top {
    top: -35px;
    left: 50%;
}

.axis.bottom {
    bottom: 10px;
    left: -70px;
}

.position-dot {
    position: absolute;

    padding: 12px 18px;

    border-radius: 50px;

    background: white;

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

    font-size: 14px;
}

.position-dot.mass {
    left: 20%;
    bottom: 25%;
}

.position-dot.handmade {
    left: 45%;
    top: 35%;
}

.position-dot.premium {
    right: 15%;
    top: 18%;

    background: var(--green);

    color: white;
}


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

.pricing-stack {
    display: flex;

    flex-wrap: wrap;

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

    gap: 12px;

    margin: 55px 0;
}

.pricing-stack > div {
    padding: 25px;

    min-width: 130px;

    border-radius: 20px;

    background: #f7faf8;

    text-align: center;
}

.pricing-stack span {
    display: block;

    font-size: 30px;

    color: var(--gold);
}

.pricing-stack strong,
.pricing-stack small {
    display: block;
}

.price-result {
    background:
        var(--green) !important;

    color: white;
}


/* =====================================================
   LADDER
===================================================== */

.ladder {
    display: flex;

    flex-direction: column;

    gap: 15px;

    margin: 45px auto;

    max-width: 750px;
}

.ladder-item {
    padding: 20px 30px;

    border-radius: 16px;

    background: var(--green-light);
}

.ladder-item span {
    display: inline-flex;

    width: 35px;
    height: 35px;

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

    border-radius: 50%;

    background: var(--green);

    color: white;

    margin-right: 12px;
}

.ladder-item strong,
.ladder-item small {
    margin-right: 12px;
}


/* =====================================================
   CUSTOM FLOW
===================================================== */

.custom-flow {
    display: grid;

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

    gap: 12px;

    margin: 45px 0;
}

.custom-flow > div {
    padding: 25px;

    border-radius: 18px;

    background: #f7faf8;

    text-align: center;
}

.custom-flow span {
    display: block;

    color: var(--gold);

    font-weight: 700;

    margin-bottom: 8px;
}


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

.content-engine {
    display: flex;

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

    gap: 20px;

    margin: 50px 0;
}

.content-engine > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;

    text-align: center;
}

.content-engine > div:nth-child(even) {
    padding: 0;

    background: transparent;

    color: var(--gold);

    font-size: 30px;
}


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

.content-pillars {
    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}

.content-pillars > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;

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


/* =====================================================
   CREATOR TYPES
===================================================== */

.creator-types {
    display: grid;

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

    gap: 20px;

    margin: 40px 0;
}

.creator-types > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;
}

.creator-types span {
    font-size: 40px;

    display: block;

    margin-bottom: 10px;
}


/* =====================================================
   CHANNEL
===================================================== */

.channel-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}

.channel-grid > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;
}

.channel-grid strong {
    color: var(--gold);

    font-size: 20px;
}


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

.packaging-box {
    display: grid;

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

    gap: 18px;

    margin: 45px 0;
}

.package-element {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;

    text-align: center;
}

.package-element span {
    display: block;

    font-size: 38px;

    margin-bottom: 12px;
}


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

.pros-cons {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;

    margin-top: 40px;
}

.pros,
.cons {
    padding: 35px;

    border-radius: 25px;
}

.pros {
    background: #edf7f0;
}

.cons {
    background: #fff3e9;
}

.pros h3 {
    color: var(--green);
}

.cons h3 {
    color: var(--terracotta);
}

.pros li,
.cons li {
    margin: 12px 0;
}


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

.operation-flow {
    display: grid;

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

    gap: 18px;

    margin: 45px 0;
}

.operation-flow > div {
    padding: 25px;

    border-radius: 18px;

    background: #f7faf8;

    text-align: center;
}

.operation-flow span {
    display: block;

    color: var(--gold);

    font-weight: 700;
}


/* =====================================================
   INVENTORY
===================================================== */

.inventory-grid {
    display: grid;

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

    gap: 20px;

    margin: 45px 0;
}

.inventory-grid > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;
}

.inventory-grid strong {
    color: var(--gold);

    font-size: 28px;
}


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

.retention-flow {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    margin: 45px 0;
}

.retention-flow div {
    min-width: 300px;

    padding: 16px;

    border-radius: 50px;

    background: var(--green);

    color: white;

    text-align: center;
}

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

    font-size: 25px;
}


/* =====================================================
   CORPORATE
===================================================== */

.corporate-grid {
    display: grid;

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

    gap: 20px;

    margin: 45px 0;
}

.corporate-grid > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;
}

.corporate-grid span {
    display: block;

    font-size: 40px;

    margin-bottom: 10px;
}


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

.roadmap {
    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}

.roadmap > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;
}

.roadmap span {
    color: var(--gold);

    font-weight: 700;
}


/* =====================================================
   METRICS
===================================================== */

.metric-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}

.metric-grid > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;
}

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

    font-size: 21px;
}


/* =====================================================
   ECOSYSTEM
===================================================== */

.ecosystem {
    display: flex;

    flex-wrap: wrap;

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

    gap: 15px;

    margin: 60px 0;
}

.ecosystem div {
    padding: 20px 25px;

    border-radius: 50px;

    background: var(--green-light);

    color: var(--green-dark);

    font-weight: 600;
}

.ecosystem span {
    color: var(--gold);

    font-size: 25px;
}


/* =====================================================
   BIG NUMBER
===================================================== */

.big-number {
    width: 180px;
    height: 180px;

    display: flex;

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

    margin: 45px auto;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--green),
            #4f8c74
        );

    color: white;

    font-size: 90px;

    font-weight: 700;

    box-shadow:
        0 25px 50px rgba(36,91,74,.25);
}

.three-pillars {
    display: grid;

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

    gap: 20px;

    margin: 45px 0;
}

.three-pillars > div {
    padding: 30px;

    border-radius: 20px;

    background: #f7faf8;

    text-align: center;
}

.three-pillars strong {
    color: var(--gold);
}


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

.launch-checklist {
    columns: 2;

    column-gap: 60px;

    margin-top: 35px;
}

.launch-checklist li {
    break-inside: avoid;

    margin-bottom: 12px;
}


/* =====================================================
   FINAL PAGE
===================================================== */

.final-page {
    min-height: 1450px;

    display: flex;

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

    padding: 100px;

    text-align: center;

    color: white;

    background:
        radial-gradient(
            circle at 50% 50%,
            #356d59,
            #102f26 65%
        );

    page-break-after: auto;
}

.final-page::before,
.final-page::after {
    display: none;
}

.final-content {
    position: relative;

    max-width: 800px;
}

.final-icon {
    font-size: 85px;

    margin-bottom: 30px;
}

.final-page h1 {
    color: white;

    font-size: 60px;

    margin-bottom: 30px;
}

.final-page p {
    color: rgba(255,255,255,.85);

    font-size: 21px;
}

.final-cta {
    margin-top: 50px;
}

.final-cta p {
    font-size: 23px;
}

.final-page .copyright {
    margin-top: 80px;

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

    font-size: 13px;
}


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

@media (max-width: 850px) {

    .ebook {
        margin: 0;
    }

    .page,
    .cover-page,
    .cta-page,
    .final-page {
        min-height: auto;

        padding:
            70px 25px;

        margin-bottom: 0;
    }

    h1,
    .cover-page h1,
    .final-page h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 32px;
    }

    p {
        font-size: 17px;
    }

    .lead {
        font-size: 21px;
    }

    .grid-2,
    .product-grid,
    .persona-grid,
    .source-grid,
    .process-grid,
    .design-principles,
    .content-pillars,
    .creator-types,
    .channel-grid,
    .pros-cons,
    .inventory-grid,
    .corporate-grid,
    .roadmap,
    .metric-grid,
    .three-pillars {
        grid-template-columns: 1fr;
    }

    .custom-flow {
        grid-template-columns: 1fr;
    }

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

    .operation-flow {
        grid-template-columns: 1fr;
    }

    .story-card {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .story-number {
        margin: auto;
    }

    .story-arrow {
        transform: rotate(90deg);
    }

    .content-engine {
        flex-direction: column;
    }

    .transformation {
        flex-direction: column;
    }

    .transform-arrow {
        transform: rotate(90deg);
    }

    .launch-checklist {
        columns: 1;
    }

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

    .pricing-stack > div {
        width: 100%;
    }

    .positioning {
        height: 400px;
    }

}


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

@media print {

    body {
        background: white;
    }

    .ebook {
        max-width: none;

        margin: 0;
    }

    .page,
    .cta-page,
    .final-page {
        margin: 0;

        box-shadow: none;

        break-after: page;
    }

    .cta-button {
        color: #20382d;
    }

}
```/* End custom CSS */