:root {
            --pr: #1F441A;
            --sc: #EBE4D4;
            --dark-green: #1F441A;
            --gold: #F6D763;
            --glass: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);

        }
        
.sc{
    color: var(--gold);
}
        .bg{
            background-color: #EBE4D4;
        }

    .fs-7{
        font-size: 0.8rem !important;
    }
        .text-pr{
            color: var(--pr);
        }
        .text-pr2{
            color: var(--gold);
        }
        .bg-pr{
            background: linear-gradient(135deg, #1F441A, #1F441A) !important;
        }
        .bg-warning{
            background-color: var(--gold) !important;
        }
        body {
            background-color: var(--dark-green);
            color: #ffffff;
            font-family: 'Plus Jakarta Sans', sans-serif;
            overflow-x: hidden;
        }

        h1, h2, .serif-font {
            font-family: 'Playfair Display', serif;
        }

        .about-hero {
        position: relative;
        min-height: 90vh;
        background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.7)), 
                    url('https://images.unsplash.com/photo-1556910103-1c02745aae4d?q=80&w=2000') center/cover no-repeat;
        display: flex;
        align-items: center;
        padding: 120px 0;
    }

    .est-badge {
        background-color: var(--gold);
        color: var(--pr);
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: 800;
        font-size: 0.9rem;
        letter-spacing: 2px;
        display: inline-block;
        margin-bottom: 25px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .about-hero h1 {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        line-height: 1.1;
        margin-bottom: 20px;
        color: #fff;
    }

    .tagline-heritage {
        color: var(--sc);
        font-size: 1.25rem;
        font-weight: 300;
        max-width: 600px;
        margin-bottom: 40px;
        border-left: 3px solid var(--gold);
        padding-left: 20px;
    }

    /* Founder Contact Card */
    .founder-card {
        background: var(--glass);
        backdrop-filter: blur(15px);
        border: 1px solid var(--glass-border);
        border-radius: 24px;
        padding: 35px;
        position: relative;
        overflow: hidden;
    }

    .founder-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: radial-gradient(circle, rgba(246, 215, 99, 0.15) 0%, transparent 70%);
    }

    .founder-info h5 {
        color: var(--gold);
        letter-spacing: 1px;
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

    .founder-info h3 {
        font-family: 'Playfair Display', serif;
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .contact-link {
        display: flex;
        align-items: center;
        color: var(--sc);
        text-decoration: none;
        margin-bottom: 15px;
        transition: 0.3s;
    }

    .contact-link i {
        background: var(--gold);
        color: var(--pr);
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
    }

    .contact-link:hover {
        color: var(--gold);
        transform: translateX(5px);
    }

    .year-floating-badge {
        position: absolute;
        bottom: -30px;
        right: 10%;
        background: var(--sc);
        color: var(--pr);
        padding: 40px;
        border-radius: 50%;
        text-align: center;
        width: 180px;
        height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        border: 8px solid var(--pr);
    }

    .year-floating-badge span {
        font-weight: 900;
        font-size: 1.8rem;
        line-height: 1;
    }

    .year-floating-badge small {
        text-transform: uppercase;
        font-size: 0.65rem;
        letter-spacing: 1px;
    }

     
    hr{
        height: 5px; background-color: var(--pr); border: none;
    }

    /* --- Story Page Global Styles --- */
    .story-container {
        background-color: var(--sc);
        color: var(--pr);
        overflow-x: hidden;
    }

    .section-spacing {
        padding: 100px 0;
    }

    .story-heading-main {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        color: var(--pr);
        margin-bottom: 30px;
        position: relative;
    }
 
    .body-copy {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #333;
        margin-bottom: 25px;
    }

    /* --- Quote Boxes --- */
    .founder-quote {
        background: var(--pr);
        color: #fff;
        padding: 50px;
        border-radius: 40px;
        position: relative;
        margin: 60px 0;
        box-shadow: 0 20px 40px rgba(31, 68, 26, 0.15);
    }

    .founder-quote i {
        font-size: 3rem;
        color: var(--gold);
        opacity: 0.3;
        position: absolute;
        top: 20px;
        left: 20px;
    }

    .quote-text {
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 1.2rem;
        position: relative;
        z-index: 1;
    }

    /* --- Stat Grid --- */
    .stat-box {
        background: #fff;
        padding: 40px;
        border-radius: 24px;
        text-align: center;
        border-bottom: 5px solid var(--gold);
        height: 100%;
        transition: 0.3s;
    }
 
    .stat-number {
        font-size: 3.5rem;
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        display: block;
        color: var(--pr);
    }
     

    .stat-label {
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 800;
        font-size: 0.8rem;
    }

    /* --- Image Styling --- */
    .story-img {
        border-radius: 30px;
        box-shadow: 0 30px 60px rgba(0,0,0,0.1);
        width: 100%;
        object-fit: cover;
    }

    .corporate-logo-grid span {
        background: #fff;
        color: var(--pr);
        padding: 10px 20px;
        border-radius: 50px;
        font-weight: 700;
        border: 1px solid var(--pr);
        margin: 5px;
        display: inline-block;
    }

    /* Pillar Grid */
    .pillar-wrapper {
        background-color: var(--sc);
        padding-bottom: 100px;
    }

    .pillar-card-v2 {
        background: #fff;
        border: 1px solid rgba(31, 68, 26, 0.1);
        border-radius: 20px;
        padding: 40px;
        height: 100%;
        transition: 0.3s ease;
    }

    .pillar-card-v2:hover {
        border-color: var(--gold);
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    }

    .pillar-icon-circle {
        width: 50px;
        height: 50px;
        background: var(--pr);
        color: var(--gold);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        font-weight: 800;
    }

    /* --- Journey Slider Styles --- */
    .journey-slider-section {
        background-color: var(--pr);
        padding: 100px 0;
        color: #ffffff;
    }

    .carousel-item {
        min-height: 400px;
    }

    .journey-slide-content {
        max-width: 800px;
        margin: 0 auto;
        padding: 60px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
    }

    .slide-year {
        font-family: 'Playfair Display', serif;
        font-size: 4rem;
        color: var(--gold);
        font-weight: 800;
        line-height: 1;
        margin-bottom: 10px;
        display: block;
    }

    .slide-title {
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 700;
        margin-bottom: 25px;
        color: var(--sc);
    }

    .slide-text {
        font-size: 1.15rem;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.9);
    }

    /* Custom Carousel Indicators */
    .carousel-indicators [button] {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--gold);
    }

    /* --- Fixed Review Text Colors --- */
    .review-card {
        background: #ffffff !important; /* Force white background */
        border-radius: 20px;
        padding: 30px;
        height: 100%;
        border: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    .review-text {
        color: #2c3e50 !important; /* Deep charcoal - very visible */
        font-style: italic;
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 20px;
        display: block;
    }

    .reviewer-name {
        color: var(--pr) !important;
        font-weight: 800;
        margin-bottom: 0;
    }

    .reviewer-meta {
        color: #666 !important;
        font-size: 0.8rem;
    }





    
        /* Specific font size for mobile as per system preference */
        @media (max-width: 768px) {
            .fs-7 { font-size: 0.85rem !important; }
        }

        .hero-container {
            padding: 100px 0;
        }

        .content-box {
            max-width: 500px;
        }
        .content-box h1{
             font-size: clamp(3rem, 6vw, 4.5rem);
        line-height: 1.1;
        margin-bottom: 20px; 
        }

        .heading {
            font-weight: 800;
            font-size: clamp(2.5rem, 5vw, 3.8rem);
            line-height: 1.1;
            margin-bottom: 24px;
            color: var(--dark-green);
        }

        .sub-text {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 35px;
            opacity: 0.9;
        }

        .btn-order {
            background-color: var(--gold); /* Using the orange from the image for the CTA */
            color: rgb(0, 0, 0);
            padding: 14px 35px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 10px 20px rgba(239, 108, 53, 0.2);
            transition: transform 0.3s ease;
        }

        .btn-order:hover {
            transform: translateY(-3px);
            color: white;
        }

        /* Image Stacking Logic */
        .image-stack {
            position: relative;
            padding-right: 40px;
        }

        .img-main {
            max-width: 75%;
            height: 500px;
            object-fit: cover;
            border-radius: 20px;
            position: relative;
            z-index: 2;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            transform: rotate(-2deg);
        }

        .img-back {
            width: 60%;
            height: 500px;
            object-fit: cover;
            border-radius: 20px;
            position: absolute;
            top: 20px;
            right: 0;
            z-index: 1;
            opacity: 0.6;
            transform: rotate(4deg);
        }

        .floating-badge {
            position: absolute;
            bottom: -10px;
            left: -40px;
            z-index: 3;
            width: 100px;
            animation: rotate-slow 10s linear infinite;
        }

        @keyframes rotate-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .brand-icon {
            width: 40px;
            margin-bottom: 20px;
        }

        
        .showcase-wrapper { padding: 100px 0; }

        /* Gallery Layout */
        .gallery-stack {
            position: relative;
            height: 420px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 40px 0;
        }

        .gallery-item {
            width: 210px;
            height: 300px;
            object-fit: cover;
            border-radius: 30px;
            position: absolute;
            box-shadow: 0 20px 40px rgba(31, 68, 26, 0.15);
            border: 5px solid #fff;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .layer-bottom-left { transform: translateX(-130px) rotate(-12deg); z-index: 1; }
        .layer-top-center { transform: translateY(-15px) rotate(0deg); z-index: 3; width: 230px; height: 330px; }
        .layer-bottom-right { transform: translateX(130px) rotate(12deg); z-index: 1; }

        .gallery-stack:hover .layer-bottom-left { transform: translateX(-180px) rotate(-20deg); }
        .gallery-stack:hover .layer-bottom-right { transform: translateX(180px) rotate(20deg); }

        /* Trait Layout */
        .trait-container {
            display: flex;
            flex-direction: column;
            gap: 4rem;
        }

        .trait-icon-box {
            width: 55px;
            height: 55px;
            background-color: var(--accent-orange);
            color: #000000;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            font-weight: bold;
        }

        .trait-indicator {
            width: 50px;
            height: auto;
            margin-bottom: 8px;
            opacity: 0.8;
        }

        .trait-description {
            font-size: 0.9rem;
            line-height: 1.6;
            max-width: 220px;
            margin: 0 auto;
            color: var(--dark-green);
            opacity: 0.85;
        }

        .brand-heading { font-weight: 800; color: var(--dark-green); line-height: 1.2; }

        
        .impact-section { padding: 100px 0; }

        .impact-title {
            font-weight: 800;
            font-size: 2.5rem;
            margin-bottom: 50px;
            color: var(--dark-green);
        }

        /* Flower Shape Image Frame */
        .portrait-frame {
            background-color: #ffffff;
            border-radius: 30px;
            padding: 40px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 450px;
        }

        .flower-mask {
            width: 320px;
            height: 320px;
            object-fit: cover;
            /* Modern CSS clip-path for flower/blob shape */
            clip-path: polygon(50% 0%, 61% 5%, 72% 0%, 80% 9%, 91% 5%, 95% 15%, 100% 23%, 95% 33%, 99% 44%, 92% 52%, 97% 63%, 89% 71%, 91% 82%, 80% 86%, 75% 97%, 64% 93%, 53% 100%, 41% 94%, 30% 98%, 22% 88%, 11% 91%, 7% 80%, 0% 74%, 5% 63%, 1% 53%, 7% 43%, 3% 32%, 11% 24%, 9% 12%, 21% 10%, 25% 0%, 37% 5%);
            transition: transform 0.5s ease;
        }

        .portrait-frame:hover .flower-mask {
            transform: scale(1.05) rotate(5deg);
        }

        /* Bio Card Styling */
        .bio-card {
            background-color: #ffffff;
            border-radius: 30px;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .bio-body {
            padding: 50px;
            flex-grow: 1;
            text-align: center;
        }

        .bio-name {
            font-weight: 800;
            font-size: 2rem;
            margin-bottom: 20px;
            color: #2D3192; /* Slightly deeper blue for contrast as seen in image */
        }

        .bio-divider {
            width: 60px;
            height: 2px;
            background: rgba(0,0,0,0.1);
            margin: 0 auto 25px;
        }

        .bio-text {
            font-size: 0.95rem;
            line-height: 1.8;
            opacity: 0.8;
            color: #333;
        }

        .bio-footer {
            background: rgba(255,255,255,0.3);
            padding: 20px;
            border-top: 1px solid rgba(0,0,0,0.05);
        }

        .signature {
            font-family: 'Dancing Script', crossorigin;
            font-size: 1.8rem;
            color: #2D3192;
            margin: 0;
        }

        @media (max-width: 991px) {
            .impact-title { font-size: 2rem; }
            .portrait-frame { margin-bottom: 30px; }
        }

        
        @media (max-width: 768px) {

                .img-main {
            max-width: 75%;
            height: 350px;
            object-fit: cover;
            border-radius: 20px;
            position: relative;
            z-index: 2;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            transform: rotate(-2deg);
        }

        .img-back {
            width: 80%;
            height: 350px;
            object-fit: cover;
            border-radius: 20px;
            position: absolute;
            top: 20px;
            right: 0;
            z-index: 1;
            opacity: 0.6;
            transform: rotate(4deg);
        }
        }

        
        .tree-container {
            position: relative;
            padding: 100px 0;
        }

        /* The Main Trunk */
        .tree-container::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, var(--pr) 0%, var(--gold) 50%, var(--pr) 100%);
            transform: translateX(-50%);
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(246, 215, 99, 0.2);
        }

        .branch-item {
            position: relative;
            margin-bottom: 80px;
            width: 100%;
        }

        /* Branch Connector */
        .branch-line {
            position: absolute;
            top: 45px;
            height: 1px;
            background: var(--gold);
            opacity: 0.5;
            z-index: 0;
        }

        .trunk-node {
            width: 14px;
            height: 14px;
            background: var(--gold);
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 38px;
            transform: translateX(-50%);
            z-index: 3;
            box-shadow: 0 0 12px var(--gold);
        }

        /* Card Design */
        .growth-card {
            background: var(--glass);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            padding: 30px;
            transition: all 0.4s ease;
            position: relative;
            z-index: 2;
        }

        .growth-card:hover {
            border-color: var(--gold);
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.08);
        }

        .year-label {
            color: var(--gold);
            font-weight: 900;
            font-size: 1.8rem;
            letter-spacing: -1px;
            display: block;
            margin-bottom: 5px;
        }

        .event-title {
            font-weight: 700;
            color: #fff;
            margin-bottom: 15px;
            font-size: 1.25rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .description {
            color: rgba(235, 228, 212, 0.8);
            line-height: 1.6;
            font-size: 0.95rem;
            margin: 0;
        }

        /* Directional Logic */
        .branch-left .growth-card { margin-right: 60px; text-align: right; }
        .branch-left .branch-line { right: 50%; width: 80px; }

        .branch-right .growth-card { margin-left: 60px; text-align: left; }
        .branch-right .branch-line { left: 50%; width: 80px; }

        @media (max-width: 768px) {
            .tree-container::before { left: 20px; }
            .trunk-node { left: 20px; }
            .branch-left .branch-line, .branch-right .branch-line { left: 20px; width: 40px; }
            .branch-left .growth-card, .branch-right .growth-card { 
                margin-left: 50px; 
                margin-right: 0;
                text-align: left; 
            }
        }


        /* 1. Custom Smooth Scrollbar for the Tree Container */
.tree-container::-webkit-scrollbar {
    width: 6px;
}

.tree-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.tree-container::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--gold);
}

/* 2. Hide scrollbar for IE, Edge and Firefox */
.tree-container {
    scrollbar-width: thin;
    scrollbar-color: var(--gold) rgba(255, 255, 255, 0.05);
    scroll-behavior: smooth; /* Smooth jumps */
    padding-right: 15px; /* Prevent content jumping when scrollbar appears */
}

/* 3. Reveal Animation on Scroll */
.branch-item { 
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.branch-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 4. Active Node Glow */
.trunk-node.active {
    background: #fff;
    scale: 1.5;
    box-shadow: 0 0 20px var(--gold);
}




new


        .tree-container2 {
            position: relative;
            padding: 100px 0;
        }

        /* The Main Trunk */
 




        
        @media (max-width: 768px) {
            .tree-container2::before { left: 20px; }
   
        }


        /* 1. Custom Smooth Scrollbar for the Tree Container */
.tree-container2::-webkit-scrollbar {
    width: 6px;
}

.tree-container2::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.tree-container2::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--gold);
}