.elementor-38 .elementor-element.elementor-element-41418cf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-38 .elementor-element.elementor-element-41418cf:not(.elementor-motion-effects-element-type-background), .elementor-38 .elementor-element.elementor-element-41418cf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-anim-text.wpr-anim-text-type-rotate-1 b{-webkit-animation-duration:1s;animation-duration:1s;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-anim-text.wpr-anim-text-type-slide b{-webkit-animation-duration:1s;animation-duration:1s;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-anim-text.wpr-anim-text-type-zoom b{-webkit-animation-duration:1s;animation-duration:1s;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-anim-text.wpr-anim-text-type-push b{-webkit-animation-duration:1s;animation-duration:1s;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-highlighted-text svg path{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-highlighted-text svg.wpr-highlight-x path:first-child{-webkit-animation-delay:-webkit-calc(2s + 0.3s);animation-delay:calc(2s + 0.3s);}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-highlighted-text svg.wpr-highlight-double path:last-child{-webkit-animation-delay:-webkit-calc(2s + 0.3s);animation-delay:calc(2s + 0.3s);}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-highlighted-text svg.wpr-highlight-double-underline path:last-child{-webkit-animation-delay:-webkit-calc(2s + 0.3s);animation-delay:calc(2s + 0.3s);}.elementor-38 .elementor-element.elementor-element-b51d06f{padding:0px 0px 0px 0px;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-advanced-text{text-align:center;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-advanced-text a{text-align:center;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-advanced-text-preffix{color:#FFFFFF;font-family:"Raleway", Sans-serif;font-size:40px;line-height:0.1em;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-anim-text{color:#605BE5;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-highlighted-text{color:#605BE5;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-anim-text b, .elementor-38 .elementor-element.elementor-element-b51d06f .wpr-anim-text b i,.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-anim-text,.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-highlighted-text{font-family:"Raleway", Sans-serif;font-size:45px;}.elementor-38 .elementor-element.elementor-element-b51d06f .wpr-advanced-text-suffix{color:#333333;}.elementor-38 .elementor-element.elementor-element-d07fe87{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-38 .elementor-element.elementor-element-c6d7368{margin:-35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-38 .elementor-element.elementor-element-c6d7368 img{width:70px;}.elementor-38 .elementor-element.elementor-element-ef02412{width:var( --container-widget-width, 60% );max-width:60%;padding:0px 0px 0px 0px;--container-widget-width:60%;--container-widget-flex-grow:0;text-align:start;color:#FFFFFF;}.elementor-38 .elementor-element.elementor-element-ef02412.elementor-element{--align-self:center;}.elementor-38 .elementor-element.elementor-element-caeea98{--display:flex;}.elementor-38 .elementor-element.elementor-element-5ecccd8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-38 .elementor-element.elementor-element-c0cc796{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-38 .elementor-element.elementor-element-c0cc796:not(.elementor-motion-effects-element-type-background), .elementor-38 .elementor-element.elementor-element-c0cc796 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-38 .elementor-element.elementor-element-b3d5c63{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-38 .elementor-element.elementor-element-83ab7c0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-38 .elementor-element.elementor-element-83ab7c0:not(.elementor-motion-effects-element-type-background), .elementor-38 .elementor-element.elementor-element-83ab7c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-38 .elementor-element.elementor-element-dcd1450{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-38 .elementor-element.elementor-element-1a582ec{--display:flex;}.elementor-38 .elementor-element.elementor-element-ffae186{width:100%;max-width:100%;}.elementor-38 .elementor-element.elementor-element-ee13508{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-38 .elementor-element.elementor-element-ee13508:not(.elementor-motion-effects-element-type-background), .elementor-38 .elementor-element.elementor-element-ee13508 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-38 .elementor-element.elementor-element-b1b18fa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-38 .elementor-element.elementor-element-48899d0{--display:flex;}.elementor-38 .elementor-element.elementor-element-3d368f5.elementor-element{--align-self:center;}@media(min-width:768px){.elementor-38 .elementor-element.elementor-element-b1b18fa{--width:100%;}}/* Start custom CSS for image, class: .elementor-element-c6d7368 */.flash-blink {
  animation: flashEffect 1s infinite;
}

@keyframes flashEffect {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8a53d27 */<style>
        /* RESET & GLOBAL BLACK BACKGROUND */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #000000;    /* full black backdrop */
            font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
          
        }

        /* MAIN WRAPPER — forces 3 items in a row on desktop, black background, primary accents */
        .metrics-hero-wrapper {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 50px;                  /* generous spacing between circles */
            padding: 0px 24px;
            background: #000000;        /* jet black background */
            width: 100%;
            transition: all 0.2s ease;
        }

        /* individual metric card (circle container) */
        .metric-item-box {
            position: relative;
            width: 160px;
            height: 160px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;      /* prevents shrinking, ensures 3-across on desktop */
        }

        /* SVG styling — absolute overlay for circle drawings */
        .metric-item-box svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);  /* so stroke starts at top (12 o’clock) */
            overflow: visible;
        }

        /* The DASHED base ring — visible always, refined for dark background */
        .circle-base-dashed {
            fill: none;
            stroke: rgba(255, 255, 255, 0.28);   /* soft white dashes on black */
            stroke-width: 1.3;
            stroke-dasharray: 4, 5;               /* delicate dashed effect */
            opacity: 0.75;
            transition: opacity 0.4s ease, stroke 0.2s;
        }

        /* Animated solid progress line — uses primary brand color #196ee6 on hover */
        .circle-progress-line {
            fill: none;
            stroke: #196ee6;                       /* PRIMARY COLOR — brand blue */
            stroke-width: 2;
            stroke-linecap: round;                 /* polished rounded ends */
            stroke-dasharray: 503;                 /* full circumference (2*pi*80 ≈ 502.65) */
            stroke-dashoffset: 503;                /* hidden until hover */
            transition: stroke-dashoffset 0.85s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }

        /* HOVER BEHAVIOR: draws the vibrant solid circle + subtle base enhancement */
        .metric-item-box:hover .circle-progress-line {
            stroke-dashoffset: 0;                  /* reveals complete primary circle */
        }

        .metric-item-box:hover .circle-base-dashed {
            opacity: 1;
            stroke: rgba(255, 255, 255, 0.5);
        }

        /* TEXT CONTENT — high contrast on black, crisp typography */
        .metric-number-display {
            font-size: 38px;
            font-weight: 350;
            color: #ffffff;            /* pure white for maximum readability */
            margin: 0;
            line-height: 1.1;
            letter-spacing: -0.5px;
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
            transition: color 0.2s ease;
        }

        /* subtle micro-interaction: number gets a primary tint on hover */
        .metric-item-box:hover .metric-number-display {
            color: #196ee6;           /* primary color accent on hover (optional brand tie) */
        }

        .metric-label-display {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.7);   /* soft white for labels */
            margin-top: 8px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            transition: color 0.2s ease;
        }

        .metric-item-box:hover .metric-label-display {
            color: rgba(255, 255, 255, 0.95);
        }

        /* RESPONSIVE: maintain 3 items as long as possible, adjust gaps for smaller screens */
        @media (max-width: 700px) {
            .metrics-hero-wrapper {
                gap: 32px;
                padding: 40px 20px;
            }
        }

        @media (max-width: 640px) {
            .metrics-hero-wrapper {
                gap: 28px;
            }
            .metric-item-box {
                width: 160px;
                height: 160px;
            }
            .metric-number-display {
                font-size: 32px;
            }
            .metric-label-display {
                font-size: 10px;
                letter-spacing: 0.1em;
            }
        }

        /* For very narrow screens, still three-per-row? we keep flex wrap but min-width ensures 3 across
           as long as viewport > 540px. On extremely small devices ( < 540px ) it could wrap to 2.
           To preserve 3 across, we add media for smallest scenarios: but design remains intact */
        @media (max-width: 540px) {
            .metrics-hero-wrapper {
                gap: 20px;
                justify-content: center;
            }
            .metric-item-box {
                width: 140px;
                height: 140px;
            }
            .metric-number-display {
                font-size: 28px;
            }
        }

        /* Optional: remove default focus outline for better aesthetics, but keep accessibility */
        .metric-item-box:focus-visible {
            outline: 2px solid #196ee6;
            outline-offset: 6px;
            border-radius: 50%;
        }
    </style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f1096a3 */@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

        :root {
            --primary-blue: #196ee6;
            --blue-glow: rgba(25, 110, 230, 0.15);
            --text-dim: rgba(255, 255, 255, 0.6);
            --card-bg: rgba(255, 255, 255, 0.03);
        }

        .perf-v6-wrapper {
            background-color: #000;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(25, 110, 230, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(25, 110, 230, 0.05) 0%, transparent 40%);
            padding: 50px 20px;
            font-family: 'Inter', sans-serif;
            color: #fff;
            text-align: center;
        }

        .perf-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* --- Editorial Headline --- */
        .perf-headline {
           font-family: "Raleway", sans-serif;
            font-size: clamp(36px, 6vw, 64px);
            font-weight: 700;
            margin-bottom: 60px;
            letter-spacing: -2px;
            background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* --- Enhanced Curved Indicator --- */
        .indicator-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 100px;
        }

        .curved-path {
            width: 45px;
            height: 45px;
            border-left: 2px solid var(--primary-blue);
            border-bottom: 2px solid var(--primary-blue);
            border-bottom-left-radius: 100%;
            margin-bottom: 15px;
            position: relative;
            transform: rotate(-10deg);
            filter: drop-shadow(0 0 8px var(--primary-blue));
        }

        .curved-path::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -5px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 10px solid var(--primary-blue);
            transform: rotate(-45deg);
        }

        .perf-tagline {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: var(--primary-blue);
        }

        /* --- Gradient Metric Grid --- */
        .perf-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

        .perf-card {
            background: var(--card-bg);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 32px;
            padding: 60px 30px;
            transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(12px);
        }

        /* Animated Radial Hover Effect */
        .perf-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(800px circle at var(--x) var(--y), rgba(25, 110, 230, 0.15), transparent 40%);
            opacity: 0;
            transition: opacity 0.5s;
        }

        .perf-card:hover {
            transform: translateY(-15px);
            border-color: rgba(25, 110, 230, 0.4);
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5);
        }

        .perf-card:hover::before {
            opacity: 1;
        }

        /* Metric Typography */
        .metric-icon {
            margin-bottom: 35px;
            width: 50px;
            height: 50px;
            background: var(--primary-blue);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 10px 20px var(--blue-glow);
        }

        .perf-val {
            font-size: 38px;
            font-weight: 800;
            margin-bottom: 10px;
            letter-spacing: -2px;
            background: linear-gradient(90deg, #fff, var(--primary-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .perf-lbl {
            font-size: 15px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
            color: #fff;
        }

        .perf-txt {
            font-size: 14px;
            color: var(--text-dim);
            line-height: 1.6;
            z-index: 2;
            position: relative;
        }

        @media (max-width: 1024px) {
            .perf-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 600px) {
            .perf-grid { grid-template-columns: 1fr; }
            .perf-headline { font-size: 42px; }
        }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ee13508 */.section_design{
   background: black;
    /* border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px; */
    backdrop-filter: blur(20px);  
    
}

.section_design::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0%; /* Moved glow toward the left */
    width: 60%;
    height: 80%;
    background: #196ee6;
    filter: blur(120px);
    opacity: 0.15;
    transform: translateY(-50%);
    z-index: -1;
}/* End custom CSS */