/* Import Poppins font from Google Fonts with all available weights and styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Base styles: Reset default margins/padding and set global font */
html,
body {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Header section: Complex multi-layered design with overlapping panels */
.header{
    position: relative;
    width: 100%;
    
    /* CSS variables for responsive design and easy maintenance */
    --right-wedge: 32%;
    --left-gap: clamp(28px, 3.6vw, 48px);           
    --left-pad-x: clamp(16px, 3vw, 32px);           
    --right-tri-w: clamp(60px, 8vw, 140px);         

    /* Variables for the middle horizontal bar positioning */
    --bar-left-edge: 38%;
    --bar-right-offset: calc(var(--right-wedge) / 2);
    --bar-height: clamp(8px, 1vw, 12px);

    min-height: clamp(130px, 16vw, 220px);
    padding-bottom: var(--left-gap);
    overflow: visible;
    background: transparent;
    color: inherit;
}

/* Horizontal blue bar across the header using ::before pseudo-element */
.header::before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--bar-left-edge);
    right: var(--bar-right-offset);
    height: var(--bar-height);
    background: #03033f;
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
}

/* Decorative triangle shape using ::after pseudo-element and clip-path */
.header::after{
    content: "";
    position: absolute;
    right: calc(var(--right-wedge) - 4px);
    bottom: 0;
    width: var(--right-tri-w);
    height: clamp(24px, 4vw, 60px);
    background: #02022b;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 0;
    pointer-events: none;
}

/* Left header panel: Orange background with angled right edge using clip-path */
.header-bg-left{
    position: absolute;
    inset: 0 auto var(--left-gap) 0;
    width: 80%;
    background: #ffd4b3;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); /* Creates angled right edge */
    z-index: 1;
    display: flex;
    align-items: center;
    padding: clamp(10px, 2vw, 20px)
             clamp(28px, 6vw, 72px)
             clamp(10px, 2vw, 20px)
             var(--left-pad-x);
    color: #142038;
    border-bottom: rgb(223, 145, 0) solid 10px;
}

/* Right header panel: Dark blue background with angled left edge using clip-path */
.header-bg-right{
    position: absolute;
    inset: 0 0 0 auto;
    width: var(--right-wedge);
    background: #03033f;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); /* Creates angled left edge */
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding: clamp(10px, 2vw, 20px)
             clamp(16px, 3vw, 32px)
             clamp(10px, 2vw, 20px)
             clamp(28px, 6vw, 72px);
    color: #ffffff;
}

/* Header typography: Responsive font sizes using clamp for scalability */
.header h1, .header h2{ margin: 0; line-height: 1.1; }
.header h1{ font-weight: 800; font-size: clamp(18px, 3.6vw, 38px); }
.header h2{ font-weight: 700; letter-spacing: .2px; font-size: clamp(18px, 3.2vw, 28px); color: #ffffff; }

/* Introduction text: Positioned below header with calculated positioning */
.header .intro-note{
    position: absolute;
    top: calc(100% - 4em);
    left: var(--left-pad-x);
    right: calc(var(--right-wedge) + var(--right-tri-w) + 24px);
    z-index: 10;
    font-size: clamp(12px, 1.4vw, 14px);
    line-height: 1.5;
    color: #2c3e50;
    max-width: 800px;
}

/* Responsive design: Adjust header panels for small screens */
@media (max-width: 520px){
    .header-bg-left{ width: 72%; }
    .header-bg-right{ width: 54%; }
    .header{ min-height: 180px; }
}

/* Main content grid: 2-column layout with 5 rows using CSS Grid */
.main-body {
    display: grid;
    min-height: calc(100vh - 260px);
    width: 100%;
    margin: 1.5rem 0 0 0;
    padding: 0 8px 8px 8px;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    grid-template-rows: minmax(auto, max-content) minmax(auto, max-content) minmax(auto, max-content) minmax(auto, max-content) auto;
    gap: 8px;
}

/* Grid item positioning: Remove default margins for proper alignment */
.item5, .item6 {
    margin-bottom: 0;
}

/* Team Management section: Full-width spanning all columns in the last row */
.single-cell-row {
    grid-column: 1 / -1;
    grid-row: 5;
    background-color: #ffd4b3;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 999;
    margin-top: 0;
}

/* Grid item positioning: Explicit placement of each section in the grid layout */

/* Row 1: Company Brief (left) and Service Offerings (right) */
.item1 {
    grid-column: 1;
    grid-row: 1;
}

.item2 {
    grid-column: 2;
    grid-row: 1;
}

/* Row 2: Financial Review (left) and Key Achievements (right) */
.item3 {
    grid-column: 1;
    grid-row: 2;
}

.item4 {
    grid-column: 2;
    grid-row: 2;
}

/* Row 3 & 4: Split left column with Growth Strategies and Future Accomplishments */
.item5 {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: fit-content;
    align-self: start;
}

.item5-future {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: fit-content;
    align-self: start;
}

/* Revenue section: Spans multiple rows on the right */
.item6 {
    grid-column: 2;
    grid-row: 3 / 5; /* Spans rows 3 and 4 */
    height: fit-content;
    align-self: start;
}

/* Section headings: Consistent styling for all h2 elements */
h2 {
    padding: 3px 6px;
    margin: 0;
    color: rgb(0, 0, 71);
    line-height: 1.2;
}

/* Base item styling: Flexbox containers with consistent appearance */
.item {
    display: flex;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    height: 100%;
    width: 100%;
    align-self: stretch;
}

/* Second row items: Orange background for Financial Review and Key Achievements */
.item3, .item4 {
    background-color: #ffd4b3;
}

/* Future accomplishments styling: Match the base item appearance */
.item5-future {
    display: flex;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    height: 100%;
    width: 100%;
    align-self: stretch;
}

/* First row layout: Column direction with equal heights using flexbox stretch */
.item1, .item2 {
    height: 100%;
    align-self: stretch;
}

.item1, .item2{
    flex-direction: column;
    height: 100%;
    align-self: stretch;
}

/* Flexbox content distribution: Make direct children expand to fill available space */
.item1 > *, .item2 > *, .item3 > *, .item4 > *, .item5 > *, .item6 > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.item5-future > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Content sizing overrides: Natural sizing for third row items to minimize whitespace */
.item5 > *, .item5-future > *, .item6 > * {
    flex: 0 1 auto;
    justify-content: flex-start;
    min-height: 0;
    margin: 0;
    padding: 0;
}

/* First row content sizing: Natural sizing to prevent excessive spacing */
.item1 > *, .item2 > * {
    flex: 0 1 auto;
    justify-content: flex-start;
    min-height: 0;
}

/* Service offerings layout: Horizontal arrangement of graph and legend */
.graph-and-text-container {
    flex-direction: row !important;
    flex: 1 !important;
}

/* Key achievements layout: Vertical stacking with reduced spacing */
.item.item4 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Horizontal rule styling: Two-line decorative element using CSS Grid */
.hr {
    position: relative;
    display: grid;
    grid-template-columns: 3fr 1fr;
    margin-right: 6px;
    margin-top: 1px;
    margin-bottom: 3px;
}

/* HR components: Different heights for visual hierarchy */
.small-line {
    height: 3px;
    background-color: rgba(0, 0, 139, 0.466);
    width: 100%;
}
.large-line {
    position: relative; 
    height: 8px;
    background-color: rgba(0, 0, 139, 0.479);
    width: 100%;
    bottom: 3px;
}

/* Text content styling: Consistent spacing and typography for paragraphs */
.paragraph, .paragraph2{
    margin: 4px 0px;
    padding-left: 6px;
    line-height: 1.3;
}
/* Donut chart: Created using conic-gradient for pie chart visualization */
.conic-graph {
    position: relative;
    width: 180px;
    height: 180px;
    margin-left: 5px;
    flex-shrink: 0;
    background: conic-gradient(
        darkblue 0% 25%, 
        rgb(49, 46, 221) 25% 50%, 
        rgb(101, 160, 175) 50% 60%, 
        rgb(255, 81, 0) 60% 65%, 
        rgb(255, 154, 71) 65% 100%
    );
    border-radius: 50%;
}

/* Donut chart center: Creates hollow center using ::before pseudo-element */
.conic-graph::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
/* Graph and legend container: Horizontal flexbox layout for donut chart and legend */
.graph-and-text-container{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px;
    margin: 0px 5px;
    width: 100%;
    flex-wrap: nowrap !important;
}

/* Chart segment labels: Positioned absolutely over the donut chart segments */
.segments{
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: bold;
}

/* Individual segment positioning: Precise placement for each percentage label */
.segment1{
    position: absolute;
    left: 70%;
    top: 20%;
}

.segment2{
    position: absolute;
    left: 70%;
    top: 70%;
}

.segment3{
    position: absolute;
    left: 32%;
    top: 81%;
}

.segment4{
    position: absolute;
    left: 15%;
    top: 73%;
}

.segment5{
    position: absolute;
    left: 15%;
    top: 25%;
}
/* Services legend container: Vertical flexbox for the chart legend */
.services-text-container{
    display: flex !important;
    flex-direction: column !important; 
    justify-content: flex-start !important;
    flex: 1 !important;
    min-width: 200px !important;
    height: auto !important;
}

/* Legend item layout: Horizontal arrangement of bullet and text */
.leg{
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    white-space: nowrap !important;
    margin: 2px 0 !important;
}
/* Legend heading styling: Services text above the legend items */
.text-graph-heading {
    margin-bottom: 5px;
}

.text-graph-heading h2 {
    margin: 0;
    padding: 2px 0;
    font-size: 18px;
}

/* Legend container: Vertical arrangement of all legend items */
.legend-donut-graph {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}
/* Legend bullet points: Colored squares matching chart segments */
.bullet-colored{
    width: 15px;
    height: 15px;
    background-color:rgb(0, 0, 71)
}

.bullet-colored-1 {
    width: 15px;
    height: 15px;
    background-color: darkblue;
}

.bullet-colored-2 {
    width: 15px;
    height: 15px;
    background-color: rgb(49, 46, 221);
}

.bullet-colored-3 {
    width: 15px;
    height: 15px;
    background-color: rgb(101, 160, 175);
}

.bullet-colored-4 {
    width: 15px;
    height: 15px;
    background-color: rgb(255, 81, 0);
}

.bullet-colored-5 {
    width: 15px;
    height: 15px;
    background-color: rgb(250, 133, 37);
}

/* Financial review main container: Full height flexbox container */
.financial-review-main-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Financial review heading: Orange colored heading text */
.fr-heading-text h2{
    color: rgba(255, 68, 0, 0.9);
    width: 231px
}

/* Financial review heading layout: Horizontal arrangement with decorative lines */
.fr-heading-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Decorative lines: Orange accent lines flanking the headings */
.fr-line1 {
    width: 100%;
    height: 3px;
    background-color: rgba(255, 68, 0, 0.534);
}

/* Achievements heading: Similar styling to financial review */
.Ach-heading-text h2{
    color: rgba(255, 68, 0, 0.9);
    width: 338px;
}
/* Basic financial chart layout: Flexbox column with even spacing */
.financial-chart {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
    flex: 1;
    gap: 20px;
}

/* Chart group layout: Horizontal arrangement of bracket, label, and bars */
.chart-group {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px;
    flex: 1;
}

/* Year bracket section: Container for bracket and year label */
.year-bracket-section {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 80px;
    flex-shrink: 0;
}

/* Bracket styling: Visual grouping indicator using borders */
.group-bracket {
    width: 20px;
    height: 80px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.group-bracket .bracket-line {
    width: 18px;
    height: 2px;
    background-color: #333;
}

.group-bracket .bracket-line.top {
    align-self: flex-start;
}

.group-bracket .bracket-line.bottom {
    align-self: flex-start;
}

.group-bracket .bracket-curve {
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 80px;
    border-left: 2px solid #333;
    border-radius: 12px 0 0 12px;
}

/* Vertical year labels: Rotated text using CSS transforms */
.year-label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    width: 25px;
    text-align: center;
    transform: rotate(180deg);
}

/* Bar container: Vertical stacking of individual bar rows */
.bars-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Bar row layout: Horizontal arrangement of label, bar, and value */
.bar-row {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

/* Percentage labels: Right-aligned labels for bar values */
.percentage-label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    min-width: 35px;
    text-align: right;
}

/* Bar styling: Animated bars with color coding */
.bar {
    height: 28px;
    transition: width 0.3s ease;
    position: relative;
}

.bar-orange {
    background-color: #f97316;
}

.bar-grey {
    background-color: #9ca3af;
}

.bar-dark-grey {
    background-color: #4b5563;
}

.bar-sky-blue {
    background-color: #60a5fa;
}

/* Value labels: Left-aligned text showing actual values */
.value-label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    min-width: 60px;
    text-align: left;
}

/* Enhanced financial chart: Grouped layout with background styling */
.financial-chart-grouped {
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
    flex: 1;
    gap: 25px;
    background-color: #f5f1eb;
}

/* Alternative chart group styles: Similar to basic chart but with enhanced styling */
.chart-group-new {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px;
    flex: 1;
}

.year-bracket-section-new {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 80px;
    flex-shrink: 0;
}

.group-bracket-new {
    width: 20px;
    height: 60px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.group-bracket-new .bracket-line-new {
    width: 18px;
    height: 2px;
    background-color: #333;
}

.group-bracket-new .bracket-line-new.top {
    align-self: flex-start;
}

.group-bracket-new .bracket-line-new.bottom {
    align-self: flex-start;
}

.group-bracket-new .bracket-curve-new {
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 60px;
    border-left: 2px solid #333;
    border-radius: 12px 0 0 12px;
}

.year-label-vertical {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    width: 25px;
    text-align: center;
    transform: rotate(180deg);
}

.bars-group-new {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bar-row-new {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.bar-new {
    height: 24px;
    transition: width 0.3s ease;
    position: relative;
    border-radius: 2px;
    flex: 1;
    max-width: 200px;
}

/* Final financial chart: Main layout with vertical labels and chart groups */
.financial-chart-final {
    display: flex;
    gap: 15px;
    padding: 15px;
    background-color: #ffd4b3;
    height: 100%;
    flex: 1;
}

/* Vertical labels section: Rotated text labels for chart categories */
.vertical-labels-section {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 80px;
    align-items: flex-end;
    padding-right: 10px;
}

.vertical-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: bold;
    color: #666;
    text-align: center;
    white-space: nowrap;
}

/* Chart groups container: Vertical stacking of chart groups */
.chart-groups-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 1;
    gap: 15px;
}

.chart-group-final {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
}

/* Final chart bracket styling: Compact bracket design for chart grouping */
.year-bracket-final {
    width: 20px;
    height: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bracket-line-final {
    width: 18px;
    height: 2px;
    background-color: #333;
}

.bracket-line-final.top {
    align-self: flex-start;
}

.bracket-line-final.bottom {
    align-self: flex-start;
}

.bracket-curve-final {
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 50px;
    border-left: 2px solid #333;
    border-radius: 8px 0 0 8px;
}

/* Final chart year labels: Vertical rotated year text */
.year-label-final {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    min-width: 35px;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* Final chart bars: Container and individual bar styling with precise widths */
.bars-container-final {
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex: 1;
}

.bar-row-final {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 22px;
}

.bar-final {
    height: 20px;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Specific bar colors and widths: Data-driven styling for precise representation */
.bar-orange-final {
    background-color: #D97742;
    width: 200px;
}

.bar-grey-final {
    background-color: #B8B8BC;
    width: 195px;
}

.bar-dark-grey-final {
    background-color: #5A6B7D;
    width: 120px;
}

.bar-light-grey-final {
    background-color: #C8C8CC;
    width: 140px;
}

.bar-blue-final {
    background-color: #4A90E2;
    width: 60px;
}

.bar-grey2-final {
    background-color: #B8B8BC;
    width: 70px;
}

.value-final {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    min-width: 50px;
}

/* Additional styling: Value labels for grouped charts */
.value-label-grouped {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    min-width: 80px;
    text-align: left;
    flex-shrink: 0;
}

/* Item 3 layout: Column direction for financial review section */
.item3 {
    display: flex;
    flex-direction: column;
}

/* Section containers: Consistent styling for growth strategies, revenue, and accomplishments */
.growth-strategies, .revenue-projects, .future-accomplishments {
    padding: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0;
    justify-content: space-between;
}

/* Content containers: Flexbox layout for all major content areas */
.para-brief, .para-message-from-cm, .graph-and-text-container, .donut-graphs-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3px;
    margin: 0;
}

/* First row section headings: Minimal spacing for service offerings and chairman message */
.service-offerings-heading, .message-from-CM {
    padding: 0;
    margin: 0;
    flex: 0 1 auto;
}

.para-brief, .para-message-from-cm {
    padding: 0;
    margin: 0;
    flex: 0 1 auto;
}

/* List styling: Bullet points for strategies and accomplishments */
.strategy-content ul, .accomplishments-content ul {
    list-style-type: disc;
    padding-left: 15px;
    margin: 5px 0;
    flex: 1;
}

.strategy-content li, .accomplishments-content li {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.3;
}

/* Basic revenue chart: Simple layout for revenue visualization */
.revenue-chart {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.revenue-bar-container {
    background-color: white;
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.revenue-bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.revenue-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.revenue-bar {
    width: 15px;
    margin: 0 2px;
}

/* Revenue bar colors: Different colors for data categorization */
.blue-revenue {
    background-color: #1e3a8a;
}

.orange-revenue {
    background-color: #f97316;
}

.light-blue-revenue {
    background-color: #60a5fa;
}

.quarter-label {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

/* Advanced revenue chart: Complex chart with Y-axis scale and grid background */
.revenue-chart-new {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: #f0f0f0;
}

.y-axis-label {
    font-size: 12px;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Chart container: Grid background with axis styling */
.chart-container-new {
    display: flex;
    gap: 15px;
    flex: 1;
    align-items: flex-end;
    position: relative;
    background-image: linear-gradient(to bottom, #d0d0d0 1px, transparent 1px);
    background-size: 100% 28.57px;
    background-position: 0 0;
    border-left: 2px solid #666;
    border-bottom: 2px solid #666;
    padding-bottom: 0;
}

/* Y-axis scale: Vertical number scale from 0-7 */
.y-axis-scale {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    height: 200px;
    padding-right: 10px;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

.scale-number {
    font-size: 11px;
    color: #666;
    font-weight: bold;
    line-height: 1;
}

/* Bar chart area: Main area containing the revenue bars */
.bars-area-new {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    height: 200px;
    flex: 1;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    position: relative;
    z-index: 2;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Revenue bar groups: Container for related bars with labels */
.bar-group-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.bars-set-new {
    display: flex;
    gap: 40px;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

/* Revenue bars: Individual bars with data-driven heights */
.bar-new-revenue {
    width: 25px;
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
    flex-shrink: 0;
}

/* Bar height calculations: Data-driven heights aligned to grid scale */
.bar-new-revenue[data-height="4"] {
    height: 114.28px;
}

.bar-new-revenue[data-height="5"] {
    height: 142.85px;
}

.bar-new-revenue[data-height="6.5"] {
    height: 185.71px;
}

.bar-new-revenue[data-height="4.5"] {
    height: 128.57px;
}

.bar-new-revenue[data-height="6"] {
    height: 171.43px;
}

/* Bar color scheme: Dark blue and orange for data differentiation */
.bar-dark-blue-new {
    background-color: #1e3a8a;
}

.bar-orange-new {
    background-color: #f97316;
}

/* Chart labels: X-axis and descriptive labels */
.x-label-new {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

.revenue-label-new {
    font-size: 11px;
    color: #666;
    text-align: center;
    margin-top: 2px;
}

/* Key achievements donut graphs: 2x2 grid layout for achievement visualization */
.donut-graphs-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 8px;
    margin: 0 0;
    margin-bottom: 8px;
}

/* Individual graph items: Centered layout for each achievement metric */
.graph-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.graph-item h3 {
    font-size: 16px;
    color: rgb(0, 0, 71);
    margin: 0;
}

/* Achievement donut graphs: Different percentages using conic-gradient */
.graph1 {
    background: conic-gradient(
        rgb(255, 81, 0) 0% 15%,
        lightgray 10% 100%
    );
}

.graph2 {
    background: conic-gradient(
        rgb(255, 81, 0) 0% 10%,
        lightgray 10% 100%
    );
}

.graph3 {
    background: conic-gradient(
        rgb(255, 81, 0) 0% 7%,
        lightgray 7% 100%
    );
}

.graph4 {
    background: conic-gradient(
        rgb(255, 81, 0) 0% 5%,
        lightgray 5% 100%
    );
}

/* Team management section: Full-width layout for team member display */
.team-management {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2px;
}

/* Team management heading: Orange styled heading matching other sections */
.tm-heading-text h2{
    color: rgba(255, 68, 0, 0.9);
    width: 250px;
}

/* Team grid: Horizontal flexbox layout for team member cards */
.team-grid {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    flex: 1;
    overflow: hidden;
    flex-wrap: nowrap;
}

/* Individual team member cards: Vertical layout with photo and details */
.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    flex: 1;
    max-width: 150px;
}

/* Team member photos: Square format with black border */
.photo-placeholder {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 0;
    display: block;
    flex-shrink: 0;
    border: 2px solid #000;
}

/* Team member names: Bold black text with overflow handling */
.name {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Team member designations: Smaller text for job titles */
.designation {
    font-size: 12px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}