:root {
            --white: #fff;
            --black: #000;
            --greencolor: #6ECEB2;
            --lightgreen: #BFED33;
            --yellow: #FFF063;
            --blue: #50CFFF;
            --purple: #B5B1FF;
            --video-content-height: 0px;
          }

          /* font-family */
          @font-face {
            font-family: 'Invention';
            src: url('../font/Invention-Regular.woff2') format('woff2'),
              url('../font/Invention-Regular.woff') format('woff');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
          }

          @font-face {
            font-family: 'Invention';
            src: url('../font/Invention-Bold.woff2') format('woff2'),
              url('Invention-Bold.woff') format('woff');
            font-weight: bold;
            font-style: normal;
            font-display: swap;
          }

          @font-face {
            font-family: 'Invention';
            src: url('../font/Invention-Light.woff2') format('woff2'),
              url('..font/Invention-Light.woff') format('woff');
            font-weight: 300;
            font-style: normal;
            font-display: swap;
          }

          body {
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
            font-family: 'Invention';
          }

          .hover-state>div,
          .step-response-screen .cus-heighlited>div {
            transform: scale(1);
            transition: transform 0.7s ease;
          }

          .hover-state>div:hover,
          .step-response-screen .cus-heighlited>div:hover {
            transform: scale(1.1);
            opacity: 1;
          }

          .go-to-step.transfor-box,
          .cus-center-box>div {
            animation: moveUp 1s ease-in-out forwards;
            /* cubic-bezier(0.165, 0.84, 0.44, 1) forwards; */
          }

          @keyframes moveUp {
            0% {
              transform: translateY(0px) scale(0.6);
            }

            60% {
              transform: translateY(-4px) scale(1.02);
            }

            100% {
              transform: translateY(0) scale(1);
            }
          }
        .hover-state>div>div  {
            animation: moveing 1s  ease-in-out forwards;
        }
        @keyframes moveing {
          0% {
            transform: translate3d(0, 0, 0) scale(.9);
          }
          60% {
            transform: translate3d(0, -4px, 0) scale(1.02);
          }
          100% {
            transform: translate3d(0, 0, 0) scale(1);
          }
        }

          /* Scrollbar Width */
          ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
          }

          /* Scrollbar Track */
          ::-webkit-scrollbar-track {
            background: rgb(1 11 10);
            border-radius: 10px;
          }

          /* Scrollbar Thumb (Handle) */
          ::-webkit-scrollbar-thumb {
            background: rgb(11 53 51);
            border-radius: 10px;
          }

          body {
            background-color: #011514 !important;
          }

          body:has(#modal:not(.hidden)) {
            overflow: hidden !important;
          }

          .tab-bar-step:hover svg path {
            fill: var(--white);
          }

          .cus-progress-main:has(.cus-plan.active) .progress-line #progressFill,
          .mob-progress-bar:has(button.cus-plan.active) #progress-bar {
            background: var(--greencolor);
          }

          .cus-progress-main:has(.cus-source.active) .progress-line #progressFill,
          .mob-progress-bar:has(button.cus-source.active) #progress-bar {
            background: linear-gradient(90deg, #6ECEB2 7%, #BFED33 27%, #FBF16F 51%);
          }

          .cus-progress-main:has(.cus-make.active) .progress-line #progressFill,
          .mob-progress-bar:has(button.cus-make.active) #progress-bar {
            background: linear-gradient(90deg, #6ECEB2 11%, #BFED33 28%, #FBF16F 46%, #50CFFF 64%);
          }
          .cus-progress-main:has(.cus-release.active) .progress-line #progressFill,
          .mob-progress-bar:has(button.cus-release.active) #progress-bar {
            background: linear-gradient(90deg, #6ECEB2 8.32%, #BFED33 21.01%, #FBF16F 34.25%, #50CFFF 47.12%, #50CFFF 65.75%, #B5B1FF 81.21%);
          }
          .cus-progress-main:has(.cus-delivery.active) .progress-line #progressFill,
          .mob-progress-bar:has(button.cus-delivery.active) #progress-bar {
            background: linear-gradient(90deg, #6ECEB2 7.07%, #BFED33 18.47%, #FBF16F 29.72%, #50CFFF 41.12%, #50CFFF 58.64%, #B5B1FF 70.11%, rgba(181, 177, 255, 0.988235) 81.8%, #6D69F8 93.01%);
          }
          .cus-delivery:has(.progress-step.active) .tab-bar-step,
          .cus-delivery.active {
            color: #6D69F8;
          }
          .cus-delivery:has(.progress-step.active) .tab-bar-step svg path,
          .mob-progress-bar .cus-delivery.active svg path {
            fill: #6D69F8;
          }
          .box-group:has(.hover-state) .go-to-step:not(.hover-state) {
            opacity: 0.4;
          }
          .all-category .go-to-step {
              opacity: 1;
              transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
          }
          .all-category .go-to-step:hover {
              transform: scale(1.1);
          }
          .all-category:has(.go-to-step:hover) .go-to-step:not(:hover) {
            opacity: 0.4;
            transform: scale(0.9);
          }
          .cus-release:has(.progress-step.active) .tab-bar-step,
          .cus-release.active {
            color: var(--purple);
          }
          .cus-release:has(.progress-step.active) .tab-bar-step svg path,
          .mob-progress-bar .cus-release.active svg path {
            fill: var(--purple);
          }
          .cus-plan:has(.progress-step.active) .tab-bar-step,
          .mob-progress-bar .cus-plan.active {
            color: var(--greencolor);
          }
          .cus-plan:has(.progress-step.active) .tab-bar-step svg path,
          .mob-progress-bar .cus-plan.active svg path {
            fill: var(--greencolor);
          }
          .cus-make:has(.progress-step.active) .tab-bar-step,
          .cus-make.active {
            color: var(--blue);
          }

          .cus-make:has(.progress-step.active) .tab-bar-step svg path,
          .mob-progress-bar .cus-make.active svg path {
            fill: var(--blue);
          }

          .cus-source:has(.progress-step.active) .tab-bar-step,
          .cus-source.active {
            color: var(--yellow);
          }

          .cus-source:has(.progress-step.active) .tab-bar-step svg path,
          .mob-progress-bar .cus-source.active svg path {
            fill: var(--yellow);
          }

          .dev-com:has(.progress-step.active) .tab-bar-step svg path,
          .mob-progress-bar .dev-com.active svg path {
            fill: var(--lightgreen);
          }

          .dev-com:has(.progress-step.active) .tab-bar-step,
          .dev-com.active {
            color: var(--lightgreen);
          }

          .nav-dot.active {
            background: var(--greencolor);
            border: 1px solid var(--greencolor);
          }
          .maximise-border::before {
            content: "";
            position: absolute;
            bottom: 52%;
            right: 97%;
            border-bottom: 2.35px solid var(--greencolor);
            border-left: 2.35px solid var(--greencolor);
            border-radius: 0 0 0 5px;
            opacity: 0;
            height: 0;
            width: 0;
            animation: drawMaximiseBorder 1.8s ease forwards;
        }
          @keyframes drawMaximiseBorder {
            0% {
                opacity: 0;
                width: 0;
                height: 0;
            }
            40% {
                opacity: 1;
                width: 14%; 
                height: 0; 
            }
            100% {
                opacity: 1;
                width: 14%;
                height: 137px; 
            }
        }
          .border-wrap::before {
            content: "";
            background-image: linear-gradient(#6ECEB2 0%, #38685A 100%), linear-gradient(#6ECEB2 0%, #38685A 100%);
            height: 100px;
            position: absolute;
            left: 50%;
            top: 100%;
            width: 2.35px;
            opacity: 0;
            animation: drawVertical 1.8s ease-out forwards;
          }
          @keyframes drawVertical {
              0% {
                  height: 0;
                  opacity: 0;
              }
              20% {
                  opacity: 1;
              }
              100% {
                  height: 100px;
                  opacity: 1;
              }
          }
          .border-top::before {
            content: "";
            background: var(--greencolor);
            position: absolute;
            top: -130px;
            left: 50%;
            opacity: 0;
            height: 0;
            animation: drawBorderTop 1.8s ease forwards;
          }
          @keyframes drawBorderTop {
              0% {
                  opacity: 0;
                  height: 0;
              }
              20% {
                  opacity: 1;
                  height: 0;
              }
              100% {
                  opacity: 1;
                  height: 139px;
              }
          }
          .production-border::before {
            content: "";
            height: 0px;
            position: absolute;
            right: 50%;
            width: 0px;
            top: 90%;
            border-bottom: 2.35px solid var(--greencolor);
            border-right: 2.35px solid var(--greencolor);
            border-radius: 5px;
            opacity: 0;
            animation: drawProdBorder 1.8s ease forwards;
          }
          @keyframes drawProdBorder {
              0% {
                  opacity: 0;
                  height: 0;
                  width: 0;
              }

              30% {
                  opacity: 1;
                  height: 40px; /* vertical first */
                  width: 0;
              }

              100% {
                  opacity: 1;
                  height: 40px;
                  width: 400px; /* horizontal after */
              }
          }
          .top-border::before {
            content: "";
            position: absolute;
            right: 50%;
            bottom: 98%;
            border-top: 2.35px solid var(--greencolor);
            border-right: 2.35px solid var(--greencolor);
            border-radius: 5px;
            opacity: 0;
            height: 0;
            width: 0;
            animation: drawTopBorder 1.8s ease forwards;
          }
          @keyframes drawTopBorder {
            0% {
                opacity: 0;
                height: 0;
                width: 0;
            }
            30% {
                opacity: 1;
                height: 32px; /* vertical first */
                width: 0;
            }
            100% {
                opacity: 1;
                height: 32px;
                width: 100%; /* horizontal after */
            }
        }


          .border-left::before {
            content: "";
            background: var(--greencolor);
            height: 2px;
            position: absolute;
            left: -236px;
            top: 50%;
            width: 220px;
          }

          .right-border::before {
            content: "";
            height: 70px;
            position: absolute;
            width: 100%;
            top: 95%;
            border-bottom: 2.35px solid var(--greencolor);
            border-left: 2.35px solid var(--greencolor);
            border-radius: 5px;
            left: 58%;
            opacity: 0;
            animation: drawBorder 1.8s  ease forwards;
          }
          @keyframes drawBorder {
              0% {
                  opacity: 0;
                  height: 0;
                  width: 0;
              }

              30% {
                  opacity: 1;
                  height: 70px;
                  width: 0;
              }

              100% {
                  opacity: 1;
                  height: 70px;
                  width: 100%;
              }
          }
          .border-state::before {
            content: "";
            height: 2px;
            position: absolute;
            left: 100%;
            top: 50%;
            width: 250px;
            background-image: linear-gradient(#6ECEB2 0%, #38685A 100%), linear-gradient(#6ECEB2 0%, #38685A 100%);
            opacity: 0;
            animation: drawHorizontal 1.8s ease-out forwards;
          }
          @keyframes drawHorizontal {
              0% {
                  width: 0;
                  opacity: 0;
              }
              20% {
                  opacity: 1;
              }
              100% {
                  width: 250px;
                  opacity: 1;
              }
          }
          .border-ensure.cus-borderblue:before {
            left: 50%;
            top: -40px;
          }

          .border-ensure::before {
            content: "";
            position: absolute;
            left: 69%;
            bottom: 85%;
            border-top: 2.35px solid var(--greencolor);
            border-left: 2.35px solid var(--greencolor);
            border-radius: 5px;
            opacity: 0;
            height: 0;
            width: 0;
            animation: drawBorderEnsure 1.8s ease forwards;
          }
          @keyframes drawBorderEnsure {
              0% {
                  opacity: 0;
                  height: 0;
                  width: 0;
              }
              30% {
                  opacity: 1;
                  height: 66px; /* vertical first */
                  width: 0;
              }
              100% {
                  opacity: 1;
                  height: 66px;
                  width: 210px; /* horizontal after */
              }
          }

          .cus-blue::before {
            border-color: #6D69F8;
          }

          .cus-purpleborder::before {
            border-color: #B5B1FF;
          }

          .top-border.bgyellow::before {
            border-color: #FBF16F;
            background-color: transparent;
          }

          .cus-borderblue::before {
            background: transparent;
            border-color: #50CFFF;
          }

          .borderyellow::before {
            border-color: #FBF16F;
          }

          .border-parrot::before {
            border-color: var(--lightgreen);
          }

          .parrot-bg::before {
            background: linear-gradient(180deg, #374311 0%, #BFED33 100%);
          }

          .bgyellow::before {
            background-color: #fbf16f;
          }

          .border-left.borderyellow::before {
            background: var(--lightgreen);
          }

          .purpleborder::before {
            background: linear-gradient(180deg, #B5B1FF 0%, #514CB4 100%);
          }

          .borderblue::before {
            background: linear-gradient(180deg, #286A91 0%, #44B5F7 100%);
          }
          .modal {
            background:
              linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.7) 100%),
              rgba(0, 92, 85, 0.5);
          }
          .bg-custom-gradient {
            background-color: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.25) 100%);
          }
          .hover-purple-bg:hover {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 28, 26, 0.10) 53.52%, rgba(181, 177, 255, 0.20) 107.03%), rgba(0, 20, 18, 0.60);
          }
          .hover-green-gradient:hover {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) -7.02%, rgba(0, 28, 26, 0.63) 71.35%, rgba(191, 237, 51, 0.90) 154.25%), rgba(0, 20, 18, 0.60);
          }

          .hover-yellow-bg:hover {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 28, 26, 0.10) 53.52%, rgba(251, 241, 111, 0.20) 107.03%), rgba(0, 20, 18, 0.60);
          }

          .hover-blue-bg:hover {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 28, 26, 0.10) 53.52%, rgba(80, 207, 255, 0.20) 107.03%), rgba(0, 20, 18, 0.60);
          }

          .step-second:has(.hover-green-gradient:hover) .back-to-first {
            transform: scale(0.9);
          }

          /* Progress Bar Styles - Exact match to design */
          .progress-container {
            position: fixed;
            bottom: 0;
            left: 16px;
            right: 16px;
            z-index: 30;
            padding: 20px 0 70px 0;
            /* transform: translateY(100%); */
            transition: transform 0.5s ease-in-out;
          }

          /* .full-screen-enabled .video-player {
            margin-bottom: 150px;
          } */
          .full-screen-enabled #progressBar {
            display: none;
          }
          .full-screen-enabled .zooming {
            zoom: 100%;
            height: 100svh;
            transform: none;
            scale: none;
          }
          .full-screen-enabled #progressContent {
            padding: 0;
            max-width: 100%;
            min-height: unset;
            height: 100%;
            position: static;
          }
          body.modal-open #progressBar {
            z-index: 0;
          }
          #progressBar{
            -webkit-backdrop-filter: blur(15px); 
            backdrop-filter: blur(15px); 
             will-change: backdrop-filter;
          }
          .zooming {
            position: relative;
            zoom: inherit;
            transform: inherit;
            max-width: 1920px;
            min-height: 900px;
            max-height: 100svh;
            height: 100dvh;
          }
          .progress-container.active {
            transform: translateY(0);
          }
          /* Progress line with exact gradient from design */
          .progress-line {
            margin: 0 20px;
            position: relative;
            overflow: hidden;
          }

          /* Animated progress fill */
          .progress-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            border-radius: inherit;
            transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
            background: linear-gradient(90deg, #6ECEB2 21%, #BFED33 63.08%);
          }

          /* Plus icon styling - exact match */
          .progress-step .step-icon {
            position: relative;
            transition: all 0.3s ease;
          }

          /* .progress-step:hover .step-icon {
            transform: scale(1.1);
          } */

          /* .progress-step.active .step-icon {
            animation: pulse 2s infinite;
          } */

          /* @keyframes pulse {

            0%,
            100% {
              transform: scale(1);
            }

            50% {
              transform: scale(1.05);
            }
          } */

          svg.close-btn {
            display: none;
          }

          .progress-step.active svg.close-btn {
            display: block;
            width: auto;
            height: auto;
          }

          .progress-step.active svg.open-btn {
            display: none;
          }

          .tab-bar-step:hover {
            color: var(--white);
          }

          .step-icon:hover svg:not(.close-btn) path:first-child {
            stroke: var(--white);
          }

          .step-icon:hover svg:not(.close-btn) path:last-child {
            fill: var(--white);
          }

          .progress-step-wrapper:not(.active):has(.progress-step:hover) .tab-bar-step {
            color: var(--white);
          }

          .progress-step-wrapper:not(.active):has(.progress-step:hover) .tab-bar-step svg path {
            fill: var(--white);
          }

          .progress-step-wrapper:is(.active, .completed) .step-icon svg:not(.close-btn) path:first-child {
            stroke: black;
          }

          .progress-step-wrapper:is(.active, .completed) .step-icon svg:not(.close-btn) path:last-child {
            fill: black;
          }

          /* .cus-make.active .step-icon :is(svg, path),
          .cus-make.completed .step-icon :is(svg, path),
          .cus-release.active .step-icon :is(svg, path),
          .cus-release.completed .step-icon :is(svg, path),
          .cus-source.active .step-icon :is(svg, path),
          .cus-source.completed .step-icon :is(svg, path),
          .cus-delivery.active .step-icon :is(svg, path),
          .cus-delivery.completed .step-icon :is(svg, path),
          .cus-plan.active .step-icon :is(svg, path),
          .cus-plan.completed .step-icon :is(svg, path) {
            stroke: black;
          } */

          .progress-step-wrapper:not(.active):has(.tab-bar-step:hover) .progress-step:first-child svg path:first-child {
            stroke: var(--white);
          }

          .progress-step-wrapper:not(.active):has(.tab-bar-step:hover) .progress-step:first-child svg path:last-child {
            fill: var(--white);
          }

          /* .step-icon svg {
            position: absolute;
            transform: translateY(-50%);
          } */
          .additional-plus:hover {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1.1);
          }

          .additional-plus.active {
            opacity: 1;
            animation: pulse 2s infinite;
          }

          .additional-plus svg {
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
          }

          .cus-bg-hover:hover {
            background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.00) 0%,
                rgba(0, 28, 26, 0.56) 63.59%,
                rgba(110, 206, 178, 0.80) 127.17%),
              rgba(0, 20, 18, 0.60);
          }

          /* Progress labels */
          .progress-label {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            color: #888;
            white-space: nowrap;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
          }

          .progress-step.active .progress-label {
            color: #00ff88;
          }

          .progress-step.completed .progress-label {
            color: #00a9cc;
          }

          /* Arrow buttons */
          .progress-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }

          .progress-arrow:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-50%) scale(1.05);
          }

          .progress-arrow.disabled {
            opacity: 0.3;
            cursor: not-allowed;
          }

          .progress-arrow.disabled:hover {
            background: rgba(0, 0, 0, 0.7);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%);
          }

          #prevArrow {
            left: 6px;
          }

          #nextArrow {
            right: 6px;
          }

          .progress-container.disabled {
            pointer-events: none;
            display: none;
          }

          .progress-container.disabled .progress-arrow {
            background-color: rgba(146, 148, 150, 0.15);
          }

          .progress-container.disabled .progress-arrow .cus-bg-disabled {
            background-color: #929496;
          }

          .progress-container.disabled .progress-arrow .cus-b-disabled {
            border-color: #929496;
          }

          .rotate-on-hover svg {
            transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
          }

          .step-second .go-to-step {
            opacity: 1;
            transition: opacity 0.1s ease-in-out, transform 0.8s ease-in-out;
          }

          .step-second .cus-center-box .go-to-step {
            opacity: 1 !important;
          }

          .step-second .go-to-step {
            background: linear-gradient(177deg, rgb(3 22 20) 0%, rgb(1 14 11) 100%);
          }

          .step-second:has(.go-to-step) .go-to-step:not(.cus-heighlited) {
            opacity: .4;
            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
          }

          .rs-scr-card>div .w-full {
            background: linear-gradient(177deg, rgb(3 22 20) 0%, rgb(1 14 11) 100%);
          }

          .rotate-on-hover:hover svg {
            transform: rotate(-160deg) scale(1.2);
          }

          .full-screen-enabled .cus-video-full {
            max-width: 100%;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
          }

          .full-screen-enabled .full-video-content {
            display: none;
          }

          .full-screen-enabled .customVideo,
          .full-screen-enabled .video-wrapper {
            height: 100%;
            width: 100%
          }

          .full-screen-enabled .customVideo+div {
            position: fixed;
          }

          .full-screen-enabled .zooming {
            width: 100%;
            max-width: 100%;
          }

          #progressContent {
            height: calc(100vh - 170px);
            position: relative;
            overflow: auto;
            top: 0px;
            /* min-height: 750px; */
            min-height: 910px;
          }

          .production-border.borderyellow::before {
            top: auto;
            bottom: -72px;
          }

          .top-border.borderyellow::before {
            top: -68px;
          }

          .top-border.borderyellow::before,
          .production-border.borderyellow::before {
            height: 52px;
          }

          .step-plan {
            height: 100svh;
          }

          .border-left.borderblue::before {
            left: -230px;
          }

          .scroll-height-card .step-content-video-middle:not(.hidden) {
            min-height: unset !important;
            max-height: unset !important;
          }
        .full-screen-enabled .mobl-video-wrap {
          padding-top: 0;
        }
        .full-screen-enabled .video-content {
            position: absolute;
            z-index: 9;
            top: 40px;
            padding: 0 16px;
        }
          .full-screen-enabled #mob-home-screen {
            padding: 0;
          }

          .full-screen-enabled .mob-progress-bar {
            display: none;
          }

          .cus-outer-border {
            border: solid 2px transparent;
            background-image: linear-gradient(#B5B1FF 0%, #514CB4 100%), linear-gradient(#B5B1FF 0%, #514CB4 100%);
            background-origin: border-box;
            background-clip: content-box, border-box;
          }

          .cus-outer-blue {
            border: solid 2px transparent;
            background-image: linear-gradient(#44b5f7 0%, #286A91 100%), linear-gradient(#44b5f7 0%, #286A91 100%);
            background-origin: border-box;
            background-clip: content-box, border-box;
          }

          .cus-outer-skyblue {
            border: solid 2px transparent;
            background-image: linear-gradient(#6ECEB2 0%, #38685A 100%), linear-gradient(#6ECEB2 0%, #38685A 100%);
            background-origin: border-box;
            background-clip: content-box, border-box;
          }

          .cus-outer-yellow {
            border: solid 2px transparent;
            background-image: linear-gradient(#FFF063 0%, #99903B 100%), linear-gradient(#FFF063 0%, #99903B 100%);
            background-origin: border-box;
            background-clip: content-box, border-box;
          }

          .cus-outer-parrot {
            border: solid 2px transparent;
            background-image: linear-gradient(#BFED33 0%, #6D871D 100%), linear-gradient(#BFED33 0%, #6D871D 100%);
            background-origin: border-box;
            background-clip: content-box, border-box;
          }

          .cus-borderblue.bottom-right-gr-border-radius::before {
            background: linear-gradient(4deg, #286A91, #44B5F7);
          }

          .maximise-border.cus-borderblue.bottom-right-gr-border-radius::before {
            padding: 0px 0px 2px 2px;
          }

          .cus-borderblue.top-border.bottom-right-gr-border-radius::before,
          .top-border.cus-purpleborder.bottom-right-gr-border-radius::before {
            padding: 2px 2px 0px 0px;
          }

          .top-border.bgyellow.bottom-right-gr-border-radius::before {
            padding: 2px 2px 0px 0px;
            background: linear-gradient(4deg, #FFF063, #99903B);
          }

          .bottom-right-gr-border-radius::before {
            padding: 0px 2px 2px 0px;
            background: linear-gradient(4deg, #B5B1FF, #514CB4);
            mask:
              linear-gradient(#fff 0 0) content-box,
              linear-gradient(#fff 0 0);
            -webkit-mask:
              linear-gradient(#fff 0 0) content-box,
              linear-gradient(#fff 0 0);
            mask-composite: exclude;
            -webkit-mask-composite: destination-out;
            z-index: -1;
            border: none;
          }
          .play-section-video svg path {
            shape-rendering: geometricPrecision;
          }
          /*Media--Start-Here*/
          @media (min-width:1620px) {
            .progress-step .step-icon svg {
              width: 20px;
              height: 20px;
            }

            .progress-container {
              padding: 20px 0 80px 0;
            }

            .progress-line {
              margin: 0 60px;
            }

            #prevArrow {
              left: 25px;
            }

            #nextArrow {
              right: 25px;
            }
          }

          @media (min-width:1024px) {
            .full-screen-enabled .back-video {
              display: block;
            }
          }

          @media (max-width:1771px) {
            body {
              background-position: center center;
            }

            /* .maximise-border::before {
              width: 18%;
            } */

            .production-border.borderyellow::before {
              bottom: -64px;
            }

            .top-border.borderyellow::before {
              top: -63px;
            }
          }

          @media (max-width :1619px) {
            .progress-line {
              margin: 0 4vw;
            }
          }

          @media (max-width:1535px) {
            #progressContent {
              min-height: 800px;
            }

            .right-border::before {
              height: 43px;
              top: 80%;
              left: 60%;
            }

            .border-ensure::before {
              height: 38px;
              bottom: 70%;
            }

            .progress-container {
              padding: 20px 0 50px 0;
            }
          }

          @media (max-width:1279px) {
            .progress-line {
              margin: 0 3.8vw;
            }

            .production-border.borderyellow::before {
              bottom: -60px;
            }

            .border-ensure.cus-borderblue:before {
              top: -34px;
            }

            .top-border.borderyellow::before {
              top: -60px;
            }

            .right-border::before {
              top:60%;
              left: 65%;
            }

            .border-left::before {
              left: -230px;
            }

            /* .maximise-border::before {
              width: 15%;
              left: -25px;
              top: -87px;
            } */
            .border-ensure::before {
              bottom: 55%;
            }
          }

          @media (max-width:1199px) {
            .progress-line {
              margin: 0 3.5vw;
            }
            .tab-bar-step svg {
                width: 14px;
                height: auto;
            }
            .progress-step.active svg.close-btn {
              max-width: 22px;
            }
          }
          @media (max-width:1170px){
              .progress-line {
                  margin: 0 3.3vw;
              }
          }
          @media (max-width:1023px) {
            .mob-progress-bar {
                transition: all 0.4s ease; 
            }
            body {
                height: auto !important;
                overflow: visible !important;
            }
            body:has(section#homeScreen:not(.first-scroll-screen)) .mob-progress-bar{
                display: flex !important;
            }
            body:has(.scroll-ended) #mob-home-screen{
               display: flex !important;
               /* position: static !important;
               height: auto !important; */
            }
            section#homeScreen:not(.first-scroll-screen),
            .full-screen-enabled section#homeScreen{
                /* /* position: static; */
                display: none; 
            }
            #homeScreen {
                transition: all 0.4s ease;
                justify-content: center;
                flex-direction: column;
                border-radius: 10px;
                align-items: center;
                position: sticky;
                /* position: fixed; */
                display: flex;
                height: 100vh;
                width: 100%;
                background: #042a28;
                z-index: -1;
                top: 0; 
                transform: none !important;
            }
            /* #homeScreen.hero.scroll-ended {
              display: none;
              position: relative;
              height: auto;
          } */
          /* .hero .cus-wraper-screen {
              position: absolute;
          } */
         .full-screen-enabled .mob-sub-step>section,
           .full-screen-enabled .mobile-main-step>section {
              padding: 0;
          }
          .full-screen-enabled .mob-sub-step > section>div div:not(.mobl-video-wrap):not(.mobl-video-wrap *),
         .full-screen-enabled .mobile-main-step > section>div div:not(.mobl-video-wrap):not(.mobl-video-wrap *){
              display: none ;
          }
           body.full-screen-enabled:has(section#homeScreen) .mob-progress-bar {
                display: none !important;
            }
          body:has(.hero) #mob-home-screen {
                position: initial;
                height: auto;
                top: unset;
                transition: all 0.7s ease;
          }
          header.sticky {
              background: #000;
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;  
              z-index: 50;
              box-shadow: 0 2px 10px rgba(0,0,0,0.1);
          }
          header {
              transition: transform 0.3s ease, box-shadow 0.3s ease;
          }
            html body.no-scroll {
                overflow: hidden !important;
            }
            .video-content h2 {
                padding-bottom: 30px;
            }
            .video-play-ended button.pause-group-button {
                display: none !important;
            }
            .video-paused .cus-pouse-navigater,
            .video-playing .cus-pouse-navigater {
                display: flex;
            }
            .mobl-video-wrap:not(.video-play-ended) .replay-video-button ,
            .mobl-video-wrap:not(.video-play-ended) .text-center{
                display: none;
            }
            .mobl-video-wrap:not(.video-play-ended)  button.pause-group-button{
              display: flex;
            }
            .full-screen-enabled .video-play-ended .video-wrapper button.go-back-steps+div {
              bottom: 0;
              background: rgba(0, 0, 0, 0.5);
            }
            .full-screen-enabled button.go-back-steps {
              top: 5px;
              right: 5px;
            }
            body:not(.full-screen-enabled) header {
              display: block !important;
            }
            .full-screen-enabled:has(.video-playing) .video-content {
              display: none;
            }
            .video-playing button.go-back-steps,
            .video-playing .video-player {
              display: none;
            }

            .mobile-main-step {
              width: 100%;
            }

            .video-play-ended button.go-back-steps+div {
              transition: all 0.3s ease;
              bottom: 0;
              --tw-gradient-from: rgb(0 0 0 / 0%) var(--tw-gradient-from-position);
              --tw-gradient-stops: rgb(0 0 0 / 92%), var(--tw-gradient-to);
            }

            .cus-pouse-navigater ,
            .mob-pop-video.video-playing .cus-pouse-navigater{
              display: none;
               transition: transform 0.7s ease;
            }

            .mobl-video-wrap.video-play-ended .cus-pouse-navigater {
              display: flex;
            }

            .progress-step.tab-bar-step svg {
              height: 28px;
              width: auto;
            }

            .full-screen-enabled .video-content p {
              font-size: 14px;
            }

            .cus-wraper-screen {
              display: block !important;
              padding-top: 100px;
            }

            body::before {
              content: "";
              position: fixed;
              inset: 0;
              pointer-events: none;
              transition: background 0.3s ease, backdrop-filter 0.3s ease;
              z-index: 9;
            }

            body:has(#menuPanel:not(.hidden))::before {
              background: rgba(0, 0, 0, 0.4);
              backdrop-filter: blur(2px);
            }

            body:has(#menuPanel:not(.hidden)) {
              overflow: hidden;
            }

            body:has(#menuPanel:not(.hidden)) .mob-progress-bar {
              filter: blur(1px);
            }
            html body:has(#modal:not(.hidden)) .mob-progress-bar{
              display: none !important;
            }
            .customVideo {
              height: calc(100vh - var(--video-content-height) - 245px);
              width: 100%;
              object-fit: cover;
            }
             body.full-screen-enabled section#homeScreen{
              display: none !important;
            }
            body:not(.mob-home-active) .mob-progress-bar,
            html body:has(#homeScreen:not(.hidden)) .mob-progress-bar {
                display: none !important;
            }
            /* .full-screen-enabled .mob-sub-step>section>div, 
            .full-screen-enabled .mobile-main-step>section>div {
                width: 100%;
                max-width: 100%;
            } */
            .mob-source-card, .mob-dev-com-card, .go-to-default-step, 
            .mob-make-card, .mob-test-relase-card, .mob-plan-card, .mob-delivary-card{
              max-width: 400px;
              margin: 0 auto;
              width: 100%;
            }
          }
          @media (max-height: 780px) {
            #progressContent {
              top: -20px;
            }
          }