| .chart-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .edu-chart { | |
| flex: 1; | |
| min-width: 300px; | |
| height: 300px; | |
| margin-bottom: 20px; | |
| position: relative; | |
| } | |
| .color-marker { | |
| display: inline-block; | |
| width: 12px; | |
| height: 12px; | |
| margin-right: 6px; | |
| border-radius: 2px; | |
| vertical-align: middle; | |
| } | |
| @media (max-width: 768px) { | |
| .chart-container { | |
| flex-direction: column; | |
| } | |
| .edu-chart { | |
| width: 100%; | |
| } | |
| } | |
| .comparison-section { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| padding: 15px; | |
| border-radius: 5px; | |
| margin: 20px 0; | |
| border-left: 4px solid #4a86e8; | |
| } | |
| /* Rest of the CSS file... */ |