* {box-sizing: border-box;}body {margin: 0;font-family: Arial, sans-serif;}.bubble-chart {position: relative;width: 100%;max-width: 1500px;aspect-ratio: 1500 / 750;margin: auto;}.bubble {position: absolute;border-radius: 50%;aspect-ratio: 1/1;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: #fff;}.percent-bubble {line-height: 1.2;font-weight: 700;}.label-bubble {margin-top: 6px;max-width: 75%;line-height: 1.5;}.orange-bubble {background: #f57c21;width: 26%;aspect-ratio: 1;left: 2.67%;top: 4%;}.teal-bubble {background: #4b9fa5;width: 18%;aspect-ratio: 1;left: 58%;top: 0;}.yellow-bubble {background: #3d4b8e;width: 16%;aspect-ratio: 1;left: 77%;top: 26%;}.dark-blue-bubble {background: #1a3d4f;width: 20%;aspect-ratio: 1;left: 2.67%;top: 62.67%;}.blue-bubble {background: #2b8ce2;width: 22.4%;aspect-ratio: 1;left: 31.67%;top: 8%;}.green-bubble {background: #7ad4a0;width: 22.4%;aspect-ratio: 1;left: 26.33%;top: 56%;}.pink-bubble {background: #f29099;width: 22.4%;aspect-ratio: 1;left: 53%;top: 48%;}.navy-bubble {background: #ffd400;width: 8.5%;aspect-ratio: 1;left: 78.67%;top: 65.67%;}.orange-bubble .percent-bubble {font-size: clamp(32px, 4.2vw, 48px);}.orange-bubble .label-bubble {font-size: clamp(14px, 1.6vw, 24px);}.blue-bubble .percent-bubble, .green-bubble .percent-bubble, .pink-bubble .percent-bubble {font-size: clamp(28px, 4.2vw, 42px);}.blue-bubble .label-bubble, .green-bubble .label-bubble, .pink-bubble .label-bubble {font-size: clamp(12px, 1.6vw, 17px);}.dark-blue-bubble .percent-bubble {font-size: clamp(26px, 4.2vw, 38px);}.dark-blue-bubble .label-bubble {font-size: clamp(12px, 1.6vw, 16px);}.teal-bubble .percent-bubble {font-size: clamp(24px, 4.2vw, 32px);}.teal-bubble .label-bubble {font-size: clamp(11px, 1.6vw, 16px);}.yellow-bubble .percent-bubble {font-size: clamp(20px, 3vw, 28px);}.yellow-bubble .label-bubble {font-size: clamp(11px, 1.6vw, 14px);}.navy-label-bubble .external-percent-bubble {font-size: clamp(18px, 3vw, 22px);}.navy-label-bubble.external-label-bubble {font-size: clamp(12px, 1.6vw, 16px);}.connector {position: absolute;background: none;}.connector::after {content: "";position: absolute;border-left: 8px solid #000;border-top: 5px solid transparent;border-bottom: 5px solid transparent;}.yellow-line-bubble {width: 6%;height: 13.33%;left: 85.5%;top: 26%;border-bottom: 3px solid #000;border-right: 3px solid #000;border-bottom-right-radius: 1.33vw;}.yellow-line-bubble::after {left: -5px;bottom: -1px;transform: translate(0px, 50%) rotate(180deg);border-left: clamp(6px, 0.53vw, 8px) solid #000;border-top: clamp(4px, 0.33vw, 5px) solid transparent;border-bottom: clamp(4px, 0.33vw, 5px) solid transparent;}.navy-line {width: 4%;height: 10%;left: 88%;top: 74.2%;border-right: 3px solid #000;border-top: 3px solid #000;border-top-right-radius: 1.33vw;}.navy-line::after {left: -5px;top: -1px;transform: translate(0px, -50%) rotate(180deg);border-left: clamp(6px, 0.53vw, 8px) solid #000;border-top: clamp(4px, 0.33vw, 5px) solid transparent;border-bottom: clamp(4px, 0.33vw, 5px) solid transparent;}.external-label-bubble {position: absolute;text-align: center;font-weight: 600;color: #000;line-height: 1.2;}.external-percent-bubble {font-weight: 700;margin-bottom: 4px;}.yellow-label-bubble {left: 83%;top: 5%;}.navy-label-bubble {left: 84%;top: 85%;}@media (max-width: 1400px) {.bubble-chart {aspect-ratio: 1500 / 950;}}@media (max-width: 900px) {.bubble-chart {aspect-ratio: 1500 / 1200;}.dark-blue-bubble {top: 52%;}.blue-bubble {top: 14%;}.green-bubble {top: 46%;left: 41%;}.yellow-bubble {left: 70%;top: 35.67%;}.yellow-line-bubble {top: 31.2%;left: 84%;}.yellow-label-bubble {top: 18.5%;left: 82%;}.pink-bubble {left: 21%;top: 72%;}.navy-bubble {left: 68%;top: 70%;}.navy-line {left: 77.5%;top: 75%;}.navy-label-bubble {left: 73%;top: 87%;}}@media (max-width: 768px) {.bubble-chart {aspect-ratio: auto;height: 800px;}.orange-bubble {width: 40%;left: 2%;top: 2%;}.blue-bubble {width: 32%;left: 68%;top: 12%;}.teal-bubble {width: 24%;left: 46%;top: 0;}.yellow-bubble {width: 22%;left: 30%;top: 44%;}.yellow-line-bubble {width: 4%;height: 10%;left: 47%;top: 42%;}.yellow-label-bubble {left: 43%;top: 31%;}.dark-blue-bubble {width: 28%;left: 69%;top: 47%;}.green-bubble {width: 32%;left: 3%;top: 70%;}.pink-bubble {width: 32%;left: 41%;top: 68%;}.navy-bubble {width: 8%;left: 0;top: 44%;}.navy-line {width: 5%;height: 8%;left: 9%;top: 47.5%;}.navy-label-bubble {left: 6%;top: 56%;}}@media (max-width: 525px) {.bubble-chart {height: 750px;}.orange-bubble {width: 50%;left: 0%;top: 2%;}.teal-bubble {width: 33%;left: 57%;}.blue-bubble {width: 42%;left: 58%;top: 22%;}.dark-blue-bubble {width: 37%;top: 35%;left: 3%;}.green-bubble {width: 42%;left: 39%;top: 49%;}.pink-bubble {width: 42%;left: 0%;top: 69%;}.navy-bubble {left: 51%;top: unset;bottom: 16%;}.navy-line {left: 60%;top: 81.5%;}.navy-label-bubble {left: 54%;top: 91%;}.yellow-bubble {width: 24%;left: unset;bottom: 13%;top: unset;right: 3%;}}@media (max-width: 425px) {.bubble-chart {height: 650px;}.teal-bubble {left: 58%;top: -2%;}.blue-bubble {left: 58%;}.dark-blue-bubble {top: 33%;}.blue-bubble {left: 56%;top: 20%;}.green-bubble {left: 40%;top: 46%;}.pink-bubble {top: 64%;}.yellow-bubble {width: 27%;bottom: 16%;}.navy-bubble {bottom: 17%;}.navy-line {top: 80.5%;}.navy-label-bubble {left: 52%;top: 91%;}}@media (max-width: 400px) {.bubble-chart {height: 550px;}.orange-bubble {top: -1%;}.teal-bubble {top: -5%;}.blue-bubble {top: 19%;}.green-bubble {left: 39%;}.yellow-bubble {right: 0%;bottom: 14%;}.navy-label-bubble {left: 51%;}}