.trd-chart-wrapper {
    width: 600px;
    margin: 0 auto;
}

#trd-chart-container {
    position: relative;
    height: 600px;
    width: 600px;
    font-family: Poppins, sans-serif;
}

.chart {
  --g:5px; /* The gap between shapes*/
  --s:150px; /* the size*/

  height: 600px;
  width: 600px;
  position:relative;
  display:inline-block;
  overflow:hidden;
}

@media all and (max-width: 767px) {
    .trd-chart-wrapper {
        width: 390px;
    }
    #trd-chart-container {
        transform: scale(.65);transform-origin: top left;
    }
}

.panel {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:50%;
  cursor: pointer;
  transition: all 300ms linear;
  border:var(--s) solid var(--c,#c2d8da);
  clip-path:polygon(
    calc(50% + var(--g)/2) 50%, 
    calc(50% + var(--g)/2) 0%, 
    100% 0%,
    100% calc(7% - var(--g)/2),
    50% calc(50% - var(--g)/2)); 
}

.panel:nth-child(2n) {
    --c: #edf4f5;
}
.panel1 {
  transform:rotate(51.43deg);
  --c: #dceaeb;
}
.panel2 {
  transform:rotate(102.86deg);
}
.panel3 {
  transform:rotate(154.29deg);
}
.panel4 {
  transform:rotate(-51.43deg);
}
.panel5 {
  transform:rotate(-102.86deg);
}
.panel6 {
  transform:rotate(-154.29deg);
}
.panel7 {
  transform:rotate(0deg);
}

.panel.active,
.panel.hover {
    --c: #1b3664 !important;
}

.panel-content {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    text-align: center;
    pointer-events: none;
    width: 150px;
}

.panel-content1 {
    bottom: 59%;
    right: 13%;
}

.panel-content2 {
    bottom: 28%;
    right: 21%;
    width: 140px;
}

.panel-content3 {
    bottom: 12%;
    right: 50%;
}

.panel-content4 {
    bottom: 84%;
    right: 66%;
}

.panel-content5 {
    bottom: 57%;
    right: 87.5%;
    width: 130px;
}

.panel-content6 {
    bottom: 27%;
    right: 78%;
}

.panel-content7 {
    bottom: 84%;
    right: 35%;
}

.panel-content h3 {
    font-size: .875em;
    font-weight: 600;
    margin: 0;
    color: #1b3664;
    line-height: 1.3;
    transition: all 300ms linear;
}

.panel-content.active h3,
.panel-content.hover h3 {
    color: #fff;
}

.center-content {
    width: 100%;
    max-width: 200px;
    text-align: center;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: all 300ms linear;
}

.center-content.active {
    opacity: 1;
}

.center-content h3 {
    font-size: 1.125em;
    font-weight: 600;
    color: #1b3664;
    margin: 0 0 5px;
    line-height: 1.3;
    transition: all 300ms linear;
}

.center-content p {
    font-size: .875em;
    font-weight: 400;
    line-height: 1.4em;
    margin: 0;
}

.panel-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    background-size: cover;
    background-position: center;
}

.center-content1 .panel-icon {
    background-image: url('../images/ico-analytics-b.webp');
}

.center-content2 .panel-icon {
    background-image: url('../images/ico-social-b.webp');
}

.center-content3 .panel-icon {
    background-image: url('../images/ico-assets-b.webp');
}

.center-content4 .panel-icon {
    background-image: url('../images/ico-compliance-b.webp');
}

.center-content5 .panel-icon {
    background-image: url('../images/ico-security-b.webp');
}

.center-content6 .panel-icon {
    background-image: url('../images/ico-integrations-b.webp');
}

.center-content7 .panel-icon {
    background-image: url('../images/ico-domains-b.webp');
}

.panel-content1 .panel-icon {
    background-image: url('../images/ico-analytics-r.webp');
}

.panel-content2 .panel-icon {
    background-image: url('../images/ico-social-r.webp');
}

.panel-content3 .panel-icon {
    background-image: url('../images/ico-assets-r.webp');
}

.panel-content4 .panel-icon {
    background-image: url('../images/ico-compliance-r.webp');
}

.panel-content5 .panel-icon {
    background-image: url('../images/ico-security-r.webp');
}

.panel-content6 .panel-icon {
    background-image: url('../images/ico-integrations-r.webp');
}

.panel-content7 .panel-icon {
    background-image: url('../images/ico-domains-r.webp');
}

.panel-content1.active .panel-icon,
.panel-content1.hover .panel-icon {
    background-image: url('../images/ico-analytics-w.webp') !important;
}

.panel-content2.active .panel-icon,
.panel-content2.hover .panel-icon {
    background-image: url('../images/ico-social-w.webp') !important;
}

.panel-content3.active .panel-icon,
.panel-content3.hover .panel-icon  {
    background-image: url('../images/ico-assets-w.webp') !important;
}

.panel-content4.active .panel-icon,
.panel-content4.hover .panel-icon  {
    background-image: url('../images/ico-compliance-w.webp') !important;
}

.panel-content5.active .panel-icon,
.panel-content5.hover .panel-icon  {
    background-image: url('../images/ico-security-w.webp') !important;
}

.panel-content6.active .panel-icon,
.panel-content6.hover .panel-icon  {
    background-image: url('../images/ico-integrations-w.webp') !important;
}

.panel-content7.active .panel-icon,
.panel-content7.hover .panel-icon  {
    background-image: url('../images/ico-domains-w.webp') !important;
}