@import url('../constants.css');
/* Microns-Table */
.chart-section {
    background: #ffffff;
    padding: 40px;
    position: relative;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--primary);
}

.chart-title-highlight.orange {
    color: #ff6b35;
}

.chart-title-highlight.teal {
    color: #5fb3a3;
}

.chart-icon-circle {
    width: 184px;
    height: 184px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40px;
    right: 7%;
    z-index: 2;
}

.chart-icon-circle.orange {
    background: #2c5282;
}

.chart-icon-circle.teal {
    background: #2c5282;
}

.chart-container {
    position: relative;
}

.chart-visual {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.teal-chart {
    background: linear-gradient(135deg, #5fb3a3 0%, #4a9b8f 100%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

.chart-label {
    position: absolute;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
}

/* Responsive Design */
@media screen and (max-width: 1336px) {
    .chart-section {
        padding: 30px;
    }
    
    .chart-icon-circle {
        width: 140px;
        height: 140px;
        top: 30px;
        right: 5%;
    }
}
@media screen and (max-width: 1024px) {
.chart-section {
    background: #ffffff;
    padding: 40px;
    position: relative;
    width: 600px;
    margin: 0 auto;
}

}

@media screen and (max-width: 767px) {
    .microns-wrapper {
        padding: 60px 0;
    }
    .chart-section {
        width: 300px;
        padding: 30px 20px;
    }
    
    .chart-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .chart-title {
        font-size: 20px;
    }
    
    .chart-icon-circle {
        width: 60px;
        height: 60px;
        top: 90px;
    }
}