.infograph-main * {
    box-sizing: border-box;
}

.infograph-main {
 box-sizing: border-box;
 height: 600px;
 width: 1200px;
 margin: 0 auto;
 } 
.circle-arrow {width: 650px;height: 650px;margin: 150px auto 240px;position: relative;} 
.circle-arrow > .number { 
 height: 70px; 
 width: 70px; 
 position: absolute; 
 top: 140px; 
 left: 350px; 
 border: 4px solid #fff; 
 background: #be1f3b; 
 font-size: 46px; 
 font-weight: 900; 
 color:#fff; 
 border-radius: 100%; 
 text-align: center; 
 font-family: monospace; 
 line-height: 66px; 
 } 
.circle-arrow .number:nth-child(2) { 
 background: #76222e; 
 top: 270px; 
 left: 440px; 
 } 
.circle-arrow .number:nth-child(3) { 
 background: #153e69; 
 top: 410px; 
 left: 370px; 
 } 
.circle-arrow .number:nth-child(4) { 
 background: #4686c7; 
 top: 430px; 
 left: 220px; 
 } 
.circle-arrow .number:nth-child(5) { 
 background: #f18921; 
 top: 300px; 
 left: 120px; 
 } 
.circle-arrow .number:nth-child(6) { 
 background: #e05b26; 
 top: 150px; 
 left: 190px; 
 } 
.circle-arrow > .title { position: absolute; top: 0; left: 0; font-family: monospace; font-size: 18px; font-weight: 900; text-align: center; color: #fff; pointer-events: none; } 

.circle-arrow > .title:nth-of-type(1) { top: 100px; left: 400px; } 
.circle-arrow > .title:nth-of-type(2) { top: 270px; left: 515px; width: 110px; font-size: 16px; } 
.circle-arrow > .title:nth-of-type(3) { top: 510px; left: 370px; width: 160px; } 
.circle-arrow > .title:nth-of-type(4) { top: 510px; left: 130px; width: 150px; } 
.circle-arrow > .title:nth-of-type(5) { top: 247px; left: 34px; width: 98px; font-size: 16px; } 
.circle-arrow > .title:nth-of-type(6) { top: 94px; left: 140px; font-size: 17px; width: 120px; } 

.circle-arrow svg path#one { transform-origin: 25% 15%; } 
.circle-arrow svg path#two { transform-origin: 4% 52%; } 
.circle-arrow svg path#three { transform-origin: 33% 90%; } 
.circle-arrow svg path#four { transform-origin: 76% 86%; } 
.circle-arrow svg path#five { transform-origin: 92% 50%; } 
.circle-arrow svg path#six { transform-origin: 67% 11%; } 

.circle-arrow svg path { cursor: pointer; animation: zoomOut 0.4s 0s } 
.circle-arrow svg path:hover { /* transform: scale(1.3); */ animation: zoomIn 0.4s 0s forwards; } 
@keyframes zoomIn { 
 0% { transform: scale(1); } 
 100% { transform: scale(1.1); } 
 } 
@keyframes zoomOut { 
 0% { transform: scale(1.1); } 
 100% { transform: scale(1); } 
 } 
.circle-arrow svg .cls-2,.circle-arrow svg #use { pointer-events: none; } 

.popup-wrap {position: absolute;top: 0;left: 0;} 
.popup-wrap .popup-box {position: absolute;top: 0;left: 0;height: 80px;width: 80px;border-radius: 100%;border: 4px solid;background-image: url('./img/popup-img/1.png');background-size: cover;background-position: center;cursor: pointer;background-color: inherit;background-repeat: no-repeat; transition: all 0.3s;} 
.popup-wrap.active .popup-box {box-shadow: 0 0 4px 3px #73737378;}
.popup-wrap .popup-box:after {content: attr(data-title);position: absolute;top: 10px;right: 117%;font-size: 16px;font-family: monospace;color:#be1f3b;font-weight: 100;text-transform: capitalize;width: auto;text-align: end;} 
.popup-wrap .popup-box:before {content:"";height: 24px;width: 5px;transform: rotate(12deg);position: absolute;font-weight: bolder;bottom: -32px;left: 21px;font-size: 38px;background: #be1f3b;} 

.popup-wrap:nth-of-type(1){color:#be1f3b; background-color: #be1f3b;}

.popup-wrap:nth-of-type(1) .popup-box:nth-child(1) { top: -90px; left: 330px; } 

.popup-wrap:nth-of-type(1) .popup-box:nth-child(2) {left: 440px;top: -60px;background-image: url('./img/popup-img/2.png');} 
.popup-wrap:nth-of-type(1) .popup-box:nth-child(2):after { } 
.popup-wrap:nth-of-type(1) .popup-box:nth-child(2):before {transform: rotate(25deg);bottom: -28px;left: 11px;}

.popup-wrap:nth-of-type(1) .popup-box:nth-child(3) {top: 0px;left: 537px;background-image: url('./img/popup-img/3.png');} 
.popup-wrap:nth-of-type(1) .popup-box:nth-child(3):after {left: 112%;text-align: left;top: 14px;width: 146px;} 
.popup-wrap:nth-of-type(1) .popup-box:nth-child(3):before {transform: rotate(38deg);bottom: -21px;left: -6px;} 

.popup-wrap:nth-of-type(2) {color: #76222e; background-color: #76222e;}
.popup-wrap:nth-of-type(2) .popup-box:nth-child(1) {top: 240px;left: 660px;background-image: url('./img/popup-img/4.png');} 
.popup-wrap:nth-of-type(2) .popup-box:nth-child(1):after {left: 110%;text-align: left;width: 190px;top: 0;color: inherit;} 
.popup-wrap:nth-of-type(2) .popup-box:nth-child(1):before {transform: rotate(84deg);left: -25px;bottom: 15px;background: #76222e;} 

.popup-wrap:nth-of-type(3) {color: #153e69; background-color: #153e69;}
.popup-wrap:nth-of-type(3) .popup-box:nth-child(1) {top: 430px;left: 625px; background-image: url('./img/popup-img/5.png');}
.popup-wrap:nth-of-type(3) .popup-box:nth-child(1):after {text-align: left;color:inherit;left: 120%;width: 100px;top: 25px;}
.popup-wrap:nth-of-type(3) .popup-box:nth-child(1):before {transform: rotate(100deg);bottom: 40px;left: -24px;background-color:inherit;}

.popup-wrap:nth-of-type(3) .popup-box:nth-child(2) {top: 538px;left: 560px; background-image: url('./img/popup-img/6.png');}
.popup-wrap:nth-of-type(3) .popup-box:nth-child(2):after {text-align:left;color:inherit;left: 113%;top: 35px;}
.popup-wrap:nth-of-type(3) .popup-box:nth-child(2):before {transform: rotate(130deg);bottom: 70px;left: -10px;background-color:inherit;}

.popup-wrap:nth-of-type(3) .popup-box:nth-child(3) {top: 610px;left: 460px;background-image: url('./img/popup-img/7.png');}
.popup-wrap:nth-of-type(3) .popup-box:nth-child(3):after {text-align:left;color:inherit;width: 70px;left: 110%;top: 40px;}
.popup-wrap:nth-of-type(3) .popup-box:nth-child(3):before {transform: rotate(-40deg);bottom: 81px;left: 0px;background-color:inherit;}


.popup-wrap:nth-of-type(4){color: #4686c7; background-color: #4686c7;}
.popup-wrap:nth-of-type(4) .popup-box:nth-child(1) {top: 650px;left: 340px;background-image: url('./img/popup-img/8.png');}
.popup-wrap:nth-of-type(4) .popup-box:nth-child(1):after {text-align:left;color:inherit;top: 112%;left: -24px;width: 140px;}
.popup-wrap:nth-of-type(4) .popup-box:nth-child(1):before {transform: rotate(-20deg);bottom: 80px;left: 9px;background-color:inherit;}

.popup-wrap:nth-of-type(4) .popup-box:nth-child(2) {top: 651px;left: 219px;background-image: url('./img/popup-img/9.png');}
.popup-wrap:nth-of-type(4) .popup-box:nth-child(2):after {text-align:left;color:inherit;width: auto;top: 110%;left: -5px;}
.popup-wrap:nth-of-type(4) .popup-box:nth-child(2):before {transform: rotate(10deg);bottom: 84px;left: 47px;background-color:inherit;}

.popup-wrap:nth-of-type(4) .popup-box:nth-child(3) {top: 621px;left: 104px;background-image: url('./img/popup-img/10.png');}
.popup-wrap:nth-of-type(4) .popup-box:nth-child(3):after {text-align:left;color:inherit;top: 110%;left: -7px;}
.popup-wrap:nth-of-type(4) .popup-box:nth-child(3):before {transform: rotate(30deg);bottom: 79px;left: 70px;background-color:inherit;}


.popup-wrap:nth-of-type(4) .popup-box:nth-child(4) {top: 558px;left: 20px;background-image: url('./img/popup-img/11.png');}
.popup-wrap:nth-of-type(4) .popup-box:nth-child(4):after {text-align: center;color:inherit;width: 160px;top: 110%;left: -80px;}
.popup-wrap:nth-of-type(4) .popup-box:nth-child(4):before {transform: rotate(39deg);bottom: 68px;left: 82px;background-color:inherit;}


.popup-wrap:nth-of-type(5){color: #f18921; background-color: #f18921;}
.popup-wrap:nth-of-type(5) .popup-box:nth-child(1) {top: 420px;left: -70px;background-image: url('./img/popup-img/12.png');}
.popup-wrap:nth-of-type(5) .popup-box:nth-child(1):after {text-align: right;color:inherit;width: 140px;top: 110%;left: -60px;}
.popup-wrap:nth-of-type(5) .popup-box:nth-child(1):before {transform: rotate(80deg);bottom: 35px;left: 96px;background-color:inherit;}

.popup-wrap:nth-of-type(5) .popup-box:nth-child(2) {top: 310px;left: -94px;background-image: url('./img/popup-img/13.png');}
.popup-wrap:nth-of-type(5) .popup-box:nth-child(2):after {text-align: right;color:inherit;top: 20px;}
.popup-wrap:nth-of-type(5) .popup-box:nth-child(2):before {transform: rotate(85deg);bottom: 27px;left: 95px;background-color:inherit;}

.popup-wrap:nth-of-type(5) .popup-box:nth-child(3) {top: 210px;left: -90px;background-image: url('./img/popup-img/14.png');}
.popup-wrap:nth-of-type(5) .popup-box:nth-child(3):after {text-align: right;color:inherit;width: 160px;top: 20px;}
.popup-wrap:nth-of-type(5) .popup-box:nth-child(3):before {transform: rotate(-80deg);bottom: 14px;left: 100px;background-color:inherit;}

.popup-wrap:nth-of-type(6) {color: #e05b26; background-color: #e05b26;}
.popup-wrap:nth-of-type(6) .popup-box:nth-child(1) {top: 70px;left: -27px;background-image: url('./img/popup-img/15.png');}
.popup-wrap:nth-of-type(6) .popup-box:nth-child(1):after {text-align: right;color:inherit;width: 180px;}
.popup-wrap:nth-of-type(6) .popup-box:nth-child(1):before {transform: rotate(-60deg);bottom: -8px;left: 83px;background-color:inherit;}

.popup-wrap:nth-of-type(6) .popup-box:nth-child(2) {top: -42px;left: 92px;background-image: url('./img/popup-img/16.png');}
.popup-wrap:nth-of-type(6) .popup-box:nth-child(2):after {text-align: right;color:inherit;width: 190px;}
.popup-wrap:nth-of-type(6) .popup-box:nth-child(2):before {transform: rotate(-30deg);bottom: -27px;left: 65px;background-color:inherit;}