/**
 * Circular Diagram (Pixel-Perfect Static) Styles
 */

/* Remove Elementor editor highlighting/outlines */
.elementor-editor-active .edge-grap-widget *,
.edge-grap-widget * {
    outline: none !important;
    font-family: "Inter", sans-serif;
}

.edge-grap-widget .center-core,
.edge-grap-widget .center-logo {
    border: none !important;
}

/* .edge-grap-widget .user-badge {
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
} */

.edge-grap-widget {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.edge-circular-diagram {
    position: relative;
    width: 660px;
    height: 660px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-circles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.circle {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
}

.circle-outer {
    /* outer ring slightly outside outer badge radius (260) -> radius 300 */
    width: 600px;
    height: 600px;
    border: 1px solid rgba(139, 92, 246, 0.20);
}

.circle-mid {
    /* midway between inner (185) and outer (260) radii -> radius ~205 */
    width: 410px;
    height: 410px;
    border: 1px solid rgba(139, 92, 246, 0.16);
}

.circle-inner {
    /* inner ring below inner badge radius (185) -> radius 120 */
    width: 240px;
    height: 240px;
    border: 1px solid rgba(139, 92, 246, 0.14);
}

/* Center layered core */
.center-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 210px;
    height: 210px;
    outline: none !important;
    border: none !important;
}

.core-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.core-layer.layer-1 {
    display: none;
}

.core-layer.layer-2 {
    width: 150px;
    height: 150px;
    background: #EDD0FF75;
    animation: coreRingOuter 6.5s ease-in-out infinite;
    will-change: transform, opacity;
}

.core-layer.layer-3 {
    width: 110px;
    height: 110px;
    background: #EDD0FF;
    animation: coreRingInner 6.5s ease-in-out infinite;
    animation-delay: 1.2s;
    will-change: transform, opacity;
}

.center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    /* background: linear-gradient(140deg, #6d35e8 0%, #7e3ff1 55%, #8b5cf6 100%); */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 20px rgba(109, 53, 232, 0.35);
    outline: none !important;
    animation: coreLogoBreathe 7s ease-in-out infinite;
    will-change: transform, box-shadow;
}

.center-logo .logo-text {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.center-logo .logo-image {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

/* Orbit dots */
.orbit-dots {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.orbit-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    width: 23px;
    height: 23px;
    opacity: 1;

}

.orbit-dot-purple {
    background: linear-gradient(180deg, #D253FF 0%, #E5A1FF 100%);

}

.orbit-dot-purple2 {
    background: linear-gradient(180deg, #D253FF 0%, #E5A1FF 100%);

}

.orbit-dot-green {
    background: #10b981;
}

.orbit-dot-orange {
    background: linear-gradient(148.87deg, #FFDB97 5.54%, #CC8E1B 128.08%);
}

.orbit-dot-red {
    background: linear-gradient(148.87deg, #FFAC97 5.54%, #CC1B1B 128.08%);
}

.orbit-dot-blue {
    background: linear-gradient(147.24deg, #97E0FF -23.03%, #1075FF 125.49%);
}

.orbit-dot-blue2 {
    background: linear-gradient(318.51deg, #FF37DF -110.05%, #6E00FF 93.64%);

}

/* Orbit dot positions - angle 10°, radius 165px */
.orbit-dot-1 {
    transform: translate(28.6px, -163.5px);
    margin-top: -51px;
    margin-left: -36px;
}

/* angle 75°, radius 330px */
.orbit-dot-2 {
    transform: translate(318.9px, -85.4px);
    margin-left: -56px;
    margin-top: -52px;
}

/* angle 85°, radius 110px */
.orbit-dot-3 {
    transform: translate(109.6px, -9.6px);
    margin-top: -48px;
    margin-left: -11px;
}

/* angle 135°, radius 260px */
.orbit-dot-4 {
    transform: translate(183.8px, 183.8px);
    margin-top: -3px;
    margin-left: 32px;
}

/* angle 195°, radius 145px */
.orbit-dot-5 {
    transform: translate(-37.6px, 140px);
    margin-top: 33px;
    margin-left: -59px;
}

/* angle 235°, radius 155px */
.orbit-dot-6 {
    transform: translate(-308.9px, 23.4px);
}

/* angle 305°, radius 115px */
.orbit-dot-7 {
    transform: translate(66.2px, 94.9px);
}

/* angle 335°, radius 330px */
.orbit-dot-8 {
    /* transform: translate(-138.7px, -299.1px); */
    transform: translate(-227.7px, -220.1px)
}

/* Badges container */
.user-badges-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

/* White pill badges */
.user-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 13px 16px;
    border-radius: 91px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.85);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 6;
    outline: none !important;
    transform: translate(calc(var(--translate-x, 0px) - 50%),
            calc(var(--translate-y, 0px) - 50%));
}

.user-badge:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translate(calc(var(--translate-x, 0px) - 50%),
            calc(var(--translate-y, 0px) - 50%)) scale(1.025);
}

/* Gradient border using mask */
.user-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.user-badge.badge-purple::before {
    background: linear-gradient(90deg,
            rgba(139, 92, 246, 0.22),
            rgba(139, 92, 246, 0.05));
}

.user-badge.badge-blue::before {
    background: linear-gradient(90deg,
            rgba(59, 130, 246, 0.22),
            rgba(59, 130, 246, 0.05));
}

.user-badge.badge-green::before {
    background: linear-gradient(90deg,
            rgba(16, 185, 129, 0.22),
            rgba(16, 185, 129, 0.05));
}

.user-badge.badge-orange::before {
    background: linear-gradient(90deg,
            rgba(245, 158, 11, 0.22),
            rgba(245, 158, 11, 0.05));
}

.user-badge.badge-pink::before {
    background: linear-gradient(90deg,
            rgba(236, 72, 153, 0.22),
            rgba(236, 72, 153, 0.05));
}

.user-badge.badge-brown::before {
    background: linear-gradient(90deg,
            rgba(168, 85, 31, 0.22),
            rgba(168, 85, 31, 0.05));
}

/* Short moving border segment (outside) */
/* .user-badge:nth-child(2) {
    overflow: visible;
}

.user-badge:nth-child(2)::after {
    content: "";
    position: absolute;
    inset: 0;              
    border-radius: inherit;
    padding: 2px;         
    background:
        conic-gradient(from var(--seg-angle),
        #FF27B7 0deg 8deg,
            #FF27B7 8deg 60deg,
            transparent 60deg 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: badgeSegSpinReverse 6s linear infinite;
    pointer-events: none;
    will-change: --seg-angle;
    filter: drop-shadow(0 0 4px rgba(255,39,183,0.55));
    z-index: 9;
} */

/* Enable overflow for additional animated badges */
.user-badge:nth-child(1),
.user-badge:nth-child(2),
.user-badge:nth-child(3),
.user-badge:nth-child(4),
.user-badge:nth-child(5),
.user-badge:nth-child(6),
.user-badge:nth-child(7),
.user-badge:nth-child(8) {
    overflow: visible;
}

/* Spinning arc (reverse) for other badges */
.user-badge:nth-child(1)::after,
.user-badge:nth-child(2)::after ,
.user-badge:nth-child(3)::after,
.user-badge:nth-child(4)::after,
.user-badge:nth-child(5)::after,
.user-badge:nth-child(6)::after,
.user-badge:nth-child(7)::after,
.user-badge:nth-child(8)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: badgeSegSpinReverse 6s linear infinite;
    pointer-events: none;
    will-change: --seg-angle;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.25));
    z-index: 9;
}

/* Individual arc colors (adjust as desired) */
.user-badge:nth-child(1)::after {
    background: conic-gradient(from var(--seg-angle),
        #C327FF 0deg 10deg,
        #C327FF 10deg 65deg,
        transparent 65deg 360deg);
    filter: drop-shadow(0 0 4px rgba(139,92,246,0.55));
}
.user-badge:nth-child(2)::after {
    background:
        conic-gradient(from var(--seg-angle),
            #FF27B7 0deg 8deg,
            #FF27B7 8deg 60deg,
            transparent 60deg 360deg);
        filter: drop-shadow(0 0 4px rgba(255,39,183,0.55));
}
.user-badge:nth-child(3)::after {
    background: conic-gradient(from var(--seg-angle),
        #279EFF 0deg 10deg,
        #279EFF 10deg 65deg,
        transparent 65deg 360deg);
    filter: drop-shadow(0 0 4px rgba(59,130,246,0.55));
}
.user-badge:nth-child(4)::after {
    background: conic-gradient(from var(--seg-angle),
        #FFAC27 0deg 10deg,
        #FFAC27 10deg 65deg,
        transparent 65deg 360deg);
    filter: drop-shadow(0 0 4px rgba(16,185,129,0.55));
}
.user-badge:nth-child(5)::after {
    background: conic-gradient(from var(--seg-angle),
    #A358FF 0deg 10deg,
    #A358FF 10deg 65deg,
        transparent 65deg 360deg);
    filter: drop-shadow(0 0 4px rgba(245,158,11,0.55));
}
.user-badge:nth-child(6)::after {
    background: conic-gradient(from var(--seg-angle),
    #EB6C55 0deg 10deg,
    #EB6C55 10deg 65deg,
        transparent 65deg 360deg);
    filter: drop-shadow(0 0 4px rgba(212,119,6,0.55));
}
.user-badge:nth-child(7)::after {
    background: conic-gradient(from var(--seg-angle),
    #2FCE9BFD 0deg 10deg,
      #2FCE9BFD 10deg 65deg,
        transparent 65deg 360deg);
    filter: drop-shadow(0 0 4px rgba(236,72,153,0.55));
}
.user-badge:nth-child(8)::after {
    background: conic-gradient(from var(--seg-angle),
    #7A95FFFD 0deg 10deg,
    #7A95FFFD 10deg 65deg,
        transparent 65deg 360deg);
    filter: drop-shadow(0 0 4px rgba(109,53,232,0.55));
}

/* Fallbacks for browsers without conic-gradient support */
@supports not (background: conic-gradient(from 0deg, red, transparent)) {
    .user-badge:nth-child(1)::after {
        background: linear-gradient(90deg, #C327FF 0 25%, #C327FF 25% 60%, transparent 60% 100%);
    }
    .user-badge:nth-child(2)::after {
        background: linear-gradient(90deg, #FF7AED 0 20%, #FF27B7 20% 55%, transparent 55% 100%);
    }
    .user-badge:nth-child(3)::after {
        background: linear-gradient(90deg, #279EFF 0 25%, #279EFF 25% 60%, transparent 60% 100%);
    }
    .user-badge:nth-child(4)::after {
        background: linear-gradient(90deg, #FFAC27 0 25%, #FFAC27 25% 60%, transparent 60% 100%);
    }
    .user-badge:nth-child(5)::after {
        background: linear-gradient(90deg, #A358FF 0 25%, #A358FF 25% 60%, transparent 60% 100%);
    }
    .user-badge:nth-child(6)::after {
        background: linear-gradient(90deg, #EB6C55 0 25%, #EB6C55 25% 60%, transparent 60% 100%);
    }
    .user-badge:nth-child(7)::after {
        background: linear-gradient(90deg, #2FCE9BFD 0 25%, #2FCE9BFD 25% 60%, transparent 60% 100%);
    }
    .user-badge:nth-child(8)::after {
        background: linear-gradient(90deg, #7A95FFFD 0 25%, #7A95FFFD 25% 60%, transparent 60% 100%);
    }

    @keyframes badgeSegSpinFallback {
        to { transform: rotate(360deg); }
    }
    @keyframes badgeSegSpinFallbackReverse {
        to { transform: rotate(-360deg); }
    }
}

/* Subtle tinted backgrounds */
.user-badge.badge-purple {
    background: linear-gradient(291.94deg, #FFFFFF 45.68%, #EAAEFF 186.81%);
}

.user-badge.badge-blue {
    background: linear-gradient(145deg, #f2f8ff 0%, #ffffff 55%);
}

.user-badge.badge-green {
    background: linear-gradient(145deg, #f2fffa 0%, #ffffff 55%);
}

.user-badge.badge-orange {
    background: linear-gradient(145deg, #fff9f1 0%, #ffffff 55%);
}

.user-badge.badge-pink {
    background: linear-gradient(145deg, #fff2fa 0%, #ffffff 55%);
}

.user-badge.badge-brown {
    background: linear-gradient(145deg, #f9f1ea 0%, #ffffff 55%);
}

/* Dot */
.badge-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.user-badge.badge-purple .badge-color-dot {
    background: #8b5cf6;
}

.user-badge.badge-blue .badge-color-dot {
    background: #3b82f6;
}

.user-badge.badge-green .badge-color-dot {
    background: #10b981;
}

.user-badge.badge-orange .badge-color-dot {
    background: #f59e0b;
}

.user-badge.badge-pink .badge-color-dot {
    background: #ec4899;
}

.user-badge.badge-brown .badge-color-dot {
    background: #b45309;
}

.badge-text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Accessibility */
.user-badge:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.user-badge[role="button"] {
    cursor: pointer;
}

/* Entrance animation */
.user-badge {
    opacity: 0;
    animation: badgeFade 0.6s ease forwards;
}

.user-badge:nth-child(1) {
    animation-delay: 0.05s;
     transform: translateX(-65px) translateY(-330px) !important;

}

.user-badge:nth-child(2) {
    animation-delay: 0.1s;
    transform: translateX(-332px) translateY(-113.448637px) !important;

}

.user-badge:nth-child(3) {
    animation-delay: 0.15s;
    /*margin-left: 66px;*/
    transform: translateX(76px) translateY(-197.448637px) !important;
}

.user-badge:nth-child(4) {
    animation-delay: 0.2s;
    transform: translateX(173.706197px) translateY(-10.632953px) !important;
/*    margin-top: 20px;
    margin-left: -26px;*/
}

.user-badge:nth-child(5) {
    animation-delay: 0.25s;
    transform: translateX(-232.353861px) translateY(22.675562640063px) !important;

  /*  margin-top: 94px;
    margin-left: -22px;*/
}

.user-badge:nth-child(6) {
    animation-delay: 0.3s;
    transform: translateX(-290.705627px) translateY(169.70562748477px) !important;
    /*margin-left: -110px;
    margin-top: 18px;*/
}

.user-badge:nth-child(7) {
    animation-delay: 0.35s;
    transform: translateX(70.596491px) translateY(129.658345px) !important;

  /*  margin-top: 54px;
    margin-left: 26px;*/

}

.user-badge:nth-child(8) {
    animation-delay: 0.4s;
    transform: translateX(-98.285494px) translateY(280px) !important;
   /* margin-left: -97px;
    margin-top: 57px;*/
   
}

@keyframes badgeFade {
    from {
        opacity: 0;
        filter: blur(2px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* Gradient flow animation */
@keyframes badgeBorderFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Spin the short segment around perimeter */
@keyframes badgeSegSpin {
    to { --seg-angle: 360deg; }
}

@keyframes badgeSegSpinReverse {
    to { --seg-angle: -360deg; }
}

/* Fallback for browsers without @property (rotate container) */
/* @supports not (background: conic-gradient(from 0deg, red, transparent)) {
    .user-badge:nth-child(2)::after {
        background: linear-gradient(90deg, #FF7AED 0 20%, #FF27B7 20% 55%, transparent 55% 100%);
        animation: badgeSegSpinFallbackReverse 6s linear infinite;
        transform-origin: 50% 50%;
    }
    @keyframes badgeSegSpinFallback {
        to { transform: rotate(360deg); }
    }
    @keyframes badgeSegSpinFallbackReverse {
        to { transform: rotate(-360deg); }
    }
} */

/* Register angle custom property for smooth animation (Chrome/Safari) */
@property --seg-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Keyframes for center-core pulse */
@keyframes coreRingOuter {
    0% {
        transform: translate(-50%, -50%) scale(.88);
        opacity: .55;
    }
    30% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: .85;
    }
    55% {
        transform: translate(-50%, -50%) scale(1.18);
        opacity: .40;
    }
    80% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: .70;
    }
    100% {
        transform: translate(-50%, -50%) scale(.88);
        opacity: .55;
    }
}
@keyframes coreRingInner {
    0%,100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .95;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: .75;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.02);
        opacity: .85;
    }
}
@keyframes coreLogoBreathe {
    0%,100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 6px 20px rgba(109,53,232,.35);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.04);
        box-shadow: 0 10px 28px rgba(109,53,232,.45);
    }
}
/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .core-layer.layer-2,
    .core-layer.layer-3,
    .center-logo {
        animation: none !important;
    }
}

/* Responsive */
@media (max-width: 1024px) {

    /* scale rings proportionally */
    .edge-circular-diagram {
        width: 560px;
        height: 560px;
    }

    .circle-outer {
        width: 540px;
        height: 540px;
    }

    .circle-mid {
        width: 370px;
        height: 370px;
    }

    .circle-inner {
        width: 225px;
        height: 225px;
    }
    /*  */
    .user-badge:nth-child(1) {
        transform: translateX(-65px) translateY(-291px) !important   
    }
    .user-badge:nth-child(2) {
        transform: translateX(-307px) translateY(-113.448637px) !important;
    }
    .user-badge:nth-child(3) {
        transform: translateX(76px) translateY(-176.448637px) !important;
    }
    .user-badge:nth-child(4) {
        transform: translateX(139.706197px) translateY(-10.632953px) !important;
    }
    .user-badge:nth-child(5) {
        transform: translateX(-220.353861px) translateY(22.675562640063px) !important;
    }
    .user-badge:nth-child(6) {
        transform: translateX(-261.705627px) translateY(169.70562748477px) !important;
    }
    .user-badge:nth-child(7) {
        transform: translateX(45.596491px) translateY(129.658345px) !important;
    }
    .user-badge:nth-child(8) {
        transform: translateX(-98.285494px) translateY(253px) !important;
    }
    /*  */
    .orbit-dot-1 {
        transform: translate(28.6px, -144.5px);
    }
    .orbit-dot-2 {
        transform: translate(287.9px, -76.4px);
    }
    .orbit-dot-3 {
        transform: translate(100.6px, -9.6px);
    }
    .orbit-dot-4 {
        transform: translate(125.8px, 199.8px);
    }
    .orbit-dot-5 {
        transform: translate(-37.6px, 118px);

    }.orbit-dot-6 {
        transform: translate(-280.9px, 10.4px);
    }
    .orbit-dot-8 {
        transform: translate(-216.7px, -185.1px)
    }

}
@media (max-width: 800px) {
    .user-badge:nth-child(4) {
        transform: translateX(117.706197px) translateY(-10.632953px) !important;
    }
}
@media (max-width: 768px) {
    .edge-grap-widget {
        /* padding: 40px 15px; */
        padding: 15px;
        min-height: 520px;
    }

    .edge-circular-diagram {
        width: 460px;
        height: 460px;
    }

    .circle-outer {
        width: 440px;
        height: 440px;
    }

    .circle-mid {
        width: 320px;
        height: 320px;
    }

    .circle-inner {
        width: 200px;
        height: 200px;
    }

    .user-badge {
        min-width: 103px;
        padding: 10px 20px;
        font-size: 12px;
    }

    .center-logo {
        width: 80px;
        height: 80px;
    }

    .center-logo .logo-text {
        font-size: 26px;
    }
    /*  */
    .user-badge:nth-child(1) {
        transform: translateX(-65px) translateY(-246px) !important;     
    }
    .user-badge:nth-child(2) {
        transform: translateX(-271px) translateY(-103.448637px) !important
    }
    .user-badge:nth-child(3) {
        transform: translateX(28px) translateY(-165.448637px) !important;
        }
    .user-badge:nth-child(4) {
        transform: translateX(74.706197px) translateY(-10.632953px) !important
    }
    .user-badge:nth-child(5) {
        transform: translateX(-208.353861px) translateY(19.675563px) !important
    }
    .user-badge:nth-child(6) {
        transform: translateX(-225.705627px) translateY(139.705627px) !important
    }
    .user-badge:nth-child(7) {
        transform: translateX(27.596491px) translateY(103.658345px) !important
    }
    .user-badge:nth-child(8) {
        transform: translateX(-84.285494px) translateY(202px) !important;
    }

    /*  */
    .orbit-dot-1 {
        transform: translate(18.6px, -119.5px);
    }
    .orbit-dot-2 {
        transform: translate(241.9px, -55.4px);
    }
    .orbit-dot-3 {
        transform: translate(82.6px, -17.6px);
    }
    .orbit-dot-4 {
        transform: translate(75.8px, 176.8px);
    }
    .orbit-dot-5 {
        transform: translate(-47.6px, 82px);

    }.orbit-dot-6 {
        transform: translate(-230.9px, -16.6px);
    }
    .orbit-dot-8 {
        transform: translate(-160.7px, -174.1px);
    }
}
/*  */
@media (max-width: 680px) {
    .edge-circular-diagram{
        height: auto !important;
    }
    .user-badge {
        /* max-width: 142px; */
        text-align: center;
    }
    .badge-text{
        white-space: wrap;
        font-size: 11px;
    }
    .user-badge:nth-child(2) {
        transform:translateX(-224px) translateY(-103.448637px) !important;
        max-width: 120px;
    }
    .user-badge:nth-child(4) {
        transform: translateX(97.706197px) translateY(-11.632953px) !important;
        max-width: 120px;
    }
}
/*  */
@media (max-width: 545px) {
    .edge-grap-widget {
        padding: 15px;
        min-height: 338px;
    }

    .center-logo .logo-image {
        width: 50%;
    }
    .center-logo {
        width: 20% !important;
        height: 20% !important;
    }
    .core-layer.layer-3 {
        width: 40%;
        height: 40%;
    }
    .core-layer.layer-2 {
        width: 35%;
        height: 35%;
    }
    .circle-outer {
        /* width: 400px;
        height: 400px; */
        width: 250px;
        height: 250px;
    }
    .circle-mid {
        width: 200px;
        height: 200px;
    }
    .circle-inner {
        width: 130px;
        height: 130px;
    }

    .orbit-dot{
        width: 10px;
        height: 10px;
    }
    .user-badge {
        min-width: 20px !important;
    }
    .badge-text {
        font-size: 8px !important;
        white-space: nowrap;
    }
    .user-badge:nth-child(1) {
        transform: translateX(-53px) translateY(-149px) !important
    }
    .user-badge:nth-child(2) {
       /* max-width: 148px; */
        transform: translateX(-120px) translateY(-81.448637px) !important
    }
    .user-badge:nth-child(3) {
        transform: translateX(29px) translateY(-92.448637px) !important
    }
    .user-badge:nth-child(4) {
        transform: translateX(16.706197px) translateY(36.367047px) !important
    }
    .user-badge:nth-child(5) {
        transform: translateX(-135.353861px) translateY(-22.324437px) !important
    }
    .user-badge:nth-child(6) {
        transform: translateX(-130.705627px) translateY(64.705627px) !important
    }
    .user-badge:nth-child(7) {
        transform: translateX(-0.403509px) translateY(75.658345px) !important
    }
    .user-badge:nth-child(8) {
        transform: translateX(-81.285494px) translateY(108px) !important
    }
    .orbit-dot-1 {
        transform: translate(20.6px, -52.5px);

    }
    .orbit-dot-2 {
        transform: translate(175.9px, 30.4px)
    }
    .orbit-dot-3 {
        transform: translate(50.6px, -4.6px);
    }
    .orbit-dot-4 {
        transform: translate(-4.2px, 116.8px)
        /* translate(29.8px, 103.8px) */
    }
    .orbit-dot-5 {
        transform:translate(14.6px, 54px);
         /* translate(0.6px, 46px) */

    }.orbit-dot-6 {
        transform: translate(-119.7px, 46.1px)
    }
    .orbit-dot-8 {
        transform: translate(-78.9px, -105.6px)
    }
}
/*  */
/* @media (max-width: 480px) {
    .edge-grap-widget {
        padding: 30px 10px;
        min-height: 440px;
    }

    .edge-circular-diagram {
        width: 360px;
        height: 360px;
    }

    .circle-outer {
        width: 340px;
        height: 340px;
    }

    .circle-mid {
        width: 250px;
        height: 250px;
    }

    .circle-inner {
        width: 160px;
        height: 160px;
    }

    .user-badge {
        min-width: 120px;
        padding: 8px 16px;
        font-size: 11px;
        gap: 8px;
    }

    .badge-text {
        font-size: 11px;
    }

    .center-logo {
        width: 70px;
        height: 70px;
    }

    .center-logo .logo-text {
        font-size: 24px;
    }
} */

@media print {
    .edge-grap-widget {
        background: #fff !important;
        box-shadow: none !important;
    }

    .center-core,
    .background-circles {
        opacity: 0.7;
    }
}