.new-roadmap{text-align:center;height:90vh;width:100%;> h1 {padding-top: 30px; font-family: swera_demoregular; width: 100%; font-size: var(--f9); font-weight: 700; line-height: 61.68px; text-align: center; text-underline-position: from-font; text-decoration-skip-ink: none; @media (max-width:992px){padding-top: 20px;}}}.roadmap_wrapper{padding:80px 80px 0;width:100vw;max-width:100%;overflow-x:auto;overflow-y:hidden;display:flex;height:500px;@media (max-width:992px){padding-top:20px}}.roadmap_wrapper::-webkit-scrollbar{display:none}.quater{min-width:1000px;width:1100px;height:400px;display:flex;.qheading {width: 20%; h3 {font-family: mulish; font-size: var(--f12); font-weight: 900; line-height: 90.8px; letter-spacing: .11em; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; -webkit-text-stroke: 2px #00d4ec; color: transparent;} .line-wrapper {margin: 60px -10px; display: flex; align-items: center; transform-origin: left; .ellipse {display: flex; justify-content: center; align-items: center; border-radius: 50%; height: 54px; width: 54px; background: #1d1e1f; .inner {border-radius: 50%; background: #152329; height: 24px; width: 24px;}} .line {height: 5px; background: #152329; width: calc(100% - 54px);}}} .data {width: 80%; h6 {margin-left: 26px; font-family: Mulish; font-size: var(--f7); font-weight: 600; line-height: 37.65px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; margin-bottom: 0;} .content {margin-left: 26px; margin-top: 8px; margin-bottom: 5px; p{max-width: 390px; font-family: Mulish; font-size: 18px; font-weight: 300; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; padding-left: 14px; position: relative;} p::before {content: "\2022"; position: absolute; left: 0; color: #00d4ec;} span {color: #00d4ec;}} .key-wrapper {transform-origin: left; display: flex; align-items: center; margin: 40px 0; .key-ellipse {height: 15px; width: 15px; border-radius: 50%; background: #152329;} .key-line {height: 5px; background: #152329; width: calc(100% - 15px);}}}}.quater.quater1{.qheading {.line-wrapper {margin-right: -24px; transform: rotate(24deg); .ellipse {background: #264246; .inner {background-color: #00d4ec;}} .line {background: #00d4ec;}}} h3 {-webkit-text-stroke: 0px; color: #00d4ec;} .data {height: 100%; display: flex; flex-direction: column; justify-content: flex-end; .key-wrapper {transform: rotate(-7deg);}}}.quater.quater2{.qheading {.line-wrapper {transform: rotate(-8deg);}} .data {.key-wrapper {transform: rotate(2.5deg);}}}.quater.quater3{align-items:flex-end;.qheading {margin-bottom: 30px; .line-wrapper {margin-right: 0px; transform: rotate(-6deg);}} .data {margin-bottom: 60px; .key-wrapper {transform: rotate(1deg);}}}.quater.quater4{.qheading {.line-wrapper {transform: rotate(-1deg);}} .data {.key-wrapper {margin-right: -6px; transform: rotate(3deg);}}}.quater.quater5{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(8.5deg);}} .data {.key-wrapper {margin-right: -6px; transform: rotate(-5.5deg);}}}.quater.quater6{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-15deg);}} .data {.key-wrapper {margin-right: -6px; transform: rotate(6.5deg);}}}.quater.quater7{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(9deg); margin-right: -10px;}} .data {.key-wrapper {transform: rotate(-5deg);}}}.quater.quater8{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-7.8deg); margin-right: -10px;}} .data {.key-wrapper {transform: rotate(4.7deg);}}}.quater.quater9{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(15deg); margin-right: -10px;}} .data {.key-wrapper {transform: rotate(-7deg);}}}.quater.quater10{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-8deg); margin-right: -5px;}} .data {.key-wrapper {transform: rotate(4.9deg);}}}.quater.quater11{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(9deg); margin-right: -5px;}} .data {.key-wrapper {transform: rotate(-5.5deg);}}}.quater.quater12{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-15.5deg); margin-right: -7px;}} .data {.key-wrapper {transform: rotate(7deg);}}}.quater.quater13{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(15.5deg); margin-right: -10px;}} .data {.key-wrapper {margin-right: -10px; transform: rotate(-7deg);}}}.quater.quater14{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-1deg); margin-right: -5px;}} .data {.key-wrapper {transform: rotate(3deg);}}}.quater.quater15{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(1.8deg); margin-right: -10px;}} .data {.key-wrapper {transform: rotate(-2deg);}}}.quater.quater16{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(25.5deg); margin-right: -25px;}} .data {.key-wrapper {transform: rotate(-5deg);}}}.quater.quater17{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(-12deg); margin-right: -6px;}} .data {.key-wrapper {transform: rotate(1deg);}}}.quater.quater18{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(6deg); margin-right: -15px;}} .data {.key-wrapper {transform: rotate(1deg);}}}.quater.quater19{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(-5.5deg); margin-right: -5px;}} .data {.key-wrapper {transform: rotate(-1deg);}}}.quater.quater20{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(13deg); margin-right: -5px;}} .data {.key-wrapper {transform: rotate(-.5deg);}}}.quater.quater21{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(2deg); margin-right: -16px;}} .data {.key-wrapper {transform: rotate(-3.2deg);}}}.quater.quater22{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(13deg); margin-right: -12px;}} .data {.key-wrapper {transform: rotate(-1.5deg);}}}.quater.quater23{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(-30deg); margin-right: -32px;}} .data {.key-wrapper {transform: rotate(7deg);}}}.quater.quater24{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(26deg); margin-right: -25px;}} .data {.key-wrapper {transform: rotate(-5deg);}}}.quater.quater25{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(-12deg); margin-right: -2px;}} .data {.key-wrapper {transform: rotate(1deg);}}}.quater.quater26{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-8deg); margin-right: -8px;}} .data {.key-wrapper {transform: rotate(4.5deg);}}}.quater.quater27{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(8.5deg); margin-right: -10px;}} .data {.key-wrapper {transform: rotate(-4.5deg); margin-right: -10px;}}}.quater.quater28{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(13deg); margin-right: -12px;}} .data {.key-wrapper {transform: rotate(-.5deg); margin-right: -10px;}}}.quater.quater29{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(0deg); margin-right: -10px;}} .data {.key-wrapper {margin: 0;}} .ellips2 {display: flex; justify-content: center; align-items: center; border-radius: 50%; height: 54px; width: 54px; background:#1d1e1f ; .inner {border-radius: 50%; background: #152329; height: 24px; width: 24px;}}}@media screen and (max-width:1800px){.quater{& .data{& .content{p{font-size: 14px;}}}}}@media screen and (max-width:1800px){.roadmap_wrapper{padding-top:15px}.quater.quater1{.qheading {.line-wrapper {margin-right: -24px; transform: rotate(25deg); .ellipse {background: #264246; .inner {background-color: #00d4ec;}} .line {background: #00d4ec;}}} h3 {-webkit-text-stroke: 0px; color: #00d4ec;} .data {height: 100%; display: flex; flex-direction: column; justify-content: flex-end; .key-wrapper {transform: rotate(-7.5deg);}}}.quater.quater2{.qheading {.line-wrapper {transform: rotate(-11deg);}} .data {.key-wrapper {transform: rotate(3.5deg);}}}.quater.quater3{align-items:flex-end;.qheading {margin-bottom: 30px; .line-wrapper {margin-right: 0px; transform: rotate(-2deg);}} .data {margin-bottom: 60px; .key-wrapper {transform: rotate(-.4deg);}}}.quater.quater4{.qheading {.line-wrapper {transform: rotate(-5.5deg);}} .data {.key-wrapper {margin-right: -6px; transform: rotate(4.2deg);}}}.quater.quater5{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(11.5deg);}} .data {.key-wrapper {margin-right: -6px; transform: rotate(-6deg);}}}.quater.quater6{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-16.5deg);}} .data {.key-wrapper {margin-right: -6px; transform: rotate(7.5deg);}}}.quater.quater7{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(11.5deg); margin-right: -10px;}} .data {.key-wrapper {transform: rotate(-6deg);}}}.quater.quater8{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-11.2deg); margin-right: -10px;}} .data {.key-wrapper {transform: rotate(6deg);}}}.quater.quater9{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(16.5deg); margin-right: -10px;}} .data {.key-wrapper {transform: rotate(-7.5deg);}}}.quater.quater10{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-11deg); margin-right: -5px;}} .data {.key-wrapper {transform: rotate(5.9deg);}}}.quater.quater11{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(12deg); margin-right: -5px;}} .data {.key-wrapper {transform: rotate(-6deg);}}}.quater.quater12{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-16.5deg); margin-right: -7px;}} .data {.key-wrapper {transform: rotate(7.5deg);}}}.quater.quater13{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(16.5deg); margin-right: -10px;}} .data {.key-wrapper {margin-right: -10px; transform: rotate(-7deg);}}}.quater.quater14{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-5.5deg); margin-right: -5px;}} .data {.key-wrapper {transform: rotate(4.2deg);}}}.quater.quater15{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(5.8deg); margin-right: -10px;}} .data {.key-wrapper {transform: rotate(-4deg);}}}.quater.quater16{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(0deg); margin-right: -13px;}} .data {.key-wrapper {transform: rotate(2.5deg);}}}.quater.quater17{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(6deg); margin-right: -6px;}} .data {.key-wrapper {transform: rotate(-4.2deg);}}}.quater.quater18{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(0deg); margin-right: -15px;}} .data {.key-wrapper {transform: rotate(2.5deg);}}}.quater.quater19{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(6.5deg); margin-right: -5px;}} .data {.key-wrapper {transform: rotate(-4.2deg);}}}.quater.quater20{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(0deg); margin-right: -5px;}} .data {.key-wrapper {transform: rotate(3deg);}}}.quater.quater21{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(11deg); margin-right: -16px;}} .data {.key-wrapper {transform: rotate(-5.5deg);}}}.quater.quater22{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(0deg); margin-right: -12px;}} .data {.key-wrapper {transform: rotate(2.5deg);}}}.quater.quater23{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(-10deg); margin-right: -15px;}} .data {.key-wrapper {transform: rotate(0deg);}}}.quater.quater24{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(0deg); margin-right: -11px;}} .data {.key-wrapper {transform: rotate(2.5deg);}}}.quater.quater25{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(1deg); margin-right: -2px;}} .data {.key-wrapper {transform: rotate(-3deg);}}}.quater.quater26{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(-10.5deg); margin-right: -8px;}} .data {.key-wrapper {transform: rotate(6deg);}}}.quater.quater27{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(16.5deg); margin-right: -10px;}} .data {.key-wrapper {transform: rotate(-7deg); margin-right: -10px;}}}.quater.quater28{align-items:flex-start;.qheading {.line-wrapper {transform: rotate(0deg); margin-right: -12px;}} .data {.key-wrapper {transform: rotate(3deg); margin-right: -10px;}}}.quater.quater29{align-items:flex-end;.qheading {.line-wrapper {transform: rotate(11.5deg); margin-right: -10px;}} .data {.key-wrapper {margin: 0;}}}}@media screen and (max-width: 992px){.quater{& .qheading{h3{line-height: 40px;} .line-wrapper {margin: 30px 0;}}.data {.key-wrapper {margin: 20px 0;}}}.quater{& .data{& .content{p {font-size: 16px;}}}}.quater.quater1{.qheading {.line-wrapper {margin-right: -80px; transform: rotate(43deg);}} .data {.key-wrapper {margin-right: -22px; transform: rotate(-13.5deg);}}}.quater.quater2{.qheading {.line-wrapper {margin-right: -5px; transform: rotate(6.5deg)}} .data {.key-wrapper {margin-right: -20px; transform: rotate(9deg);}}}.quater.quater3{.qheading {.line-wrapper {transform: rotate(-20.5deg); margin-right: -26px;}} .data {.key-wrapper {transform: rotate(-6deg); margin-right: -5px;}}}.quater.quater4{.qheading {.line-wrapper {margin-right: -10px; transform: rotate(13deg);}} .data {.key-wrapper {margin-right: -14px; transform: rotate(10deg);}}}.quater.quater5{.qheading {.line-wrapper {margin-right: -10px; transform: rotate(-6.5deg);}} .data {.key-wrapper {margin-right: -22px; transform: rotate(-11.5deg);}}}.quater.quater6{.qheading {.line-wrapper {margin-right: -10px; transform: rotate(-0deg);}} .data {.key-wrapper {margin-right: -25px; transform: rotate(13deg);}}}.quater.quater7{.qheading {.line-wrapper {margin-right: -10px; transform: rotate(-6.5deg);}} .data {.key-wrapper {margin-right: -23px; transform: rotate(-12deg);}}}.quater.quater8{.qheading {.line-wrapper {margin-right: -6px; transform: rotate(7deg);}} .data {.key-wrapper {margin-right: -22px; transform: rotate(12deg);}}}.quater.quater9{.qheading {.line-wrapper {margin-right: -10px; transform: rotate(0deg);}} .data {.key-wrapper {margin-right: -23px; transform: rotate(-13.5deg);}}}.quater.quater10{.qheading {.line-wrapper {margin-right: -10px; transform: rotate(7deg);}} .data {.key-wrapper {margin-right: -23px; transform: rotate(11.5deg);}}}.quater.quater11{.qheading {.line-wrapper {margin-right: -10px; transform: rotate(-6.5deg);}} .data {.key-wrapper {margin-right: -23px; transform: rotate(-12deg);}}}.quater.quater12{.qheading {.line-wrapper {margin-right: -10px; transform: rotate(0deg);}} .data {.key-wrapper {margin-right: -23px; transform: rotate(13.5deg);}}}.quater.quater13{.qheading {.line-wrapper {margin-right: -10px; transform: rotate(0deg);}} .data {.key-wrapper {margin-right: -30px; transform: rotate(-13.5deg);}}}.quater.quater14{.qheading {.line-wrapper {margin-right: -10px; transform: rotate(13deg);}} .data {.key-wrapper {margin-right: -23px; transform: rotate(10deg);}}}.quater.quater15{.qheading .line-wrapper {margin-right: -8px; transform: rotate(-12.5deg);} .data .key-wrapper {margin-right: -20px; transform: rotate(-9.5deg);}}.quater.quater16{.qheading .line-wrapper {margin-right: -40px; transform: rotate(30deg);} .data .key-wrapper {margin-right: -25px; transform: rotate(4.5deg);}}.quater.quater17{.qheading .line-wrapper {margin-right: -30px; transform: rotate(-25deg);} .data .key-wrapper {margin-right: -22px; transform: rotate(-7deg);}}.quater.quater18{.qheading .line-wrapper {margin-right: -26px; transform: rotate(19deg);} .data .key-wrapper {margin-right: -26px; transform: rotate(8deg);}}.quater.quater19{.qheading .line-wrapper {margin-right: -15px; transform: rotate(-19deg);} .data .key-wrapper {margin-right: -20px; transform: rotate(-8.5deg);}}.quater.quater20{.qheading .line-wrapper {margin-right: -28px; transform: rotate(19deg);} .data .key-wrapper {margin-right: -24px; transform: rotate(8.5deg);}}.quater.quater21{.qheading .line-wrapper {margin-right: -10px; transform: rotate(-6deg);} .data .key-wrapper {margin-right: -28px; transform: rotate(-11.5deg);}}.quater.quater22{.qheading .line-wrapper {margin-right: -18px; transform: rotate(19deg);} .data .key-wrapper {margin-right: -22px; transform: rotate(7.5deg);}}.quater.quater23{.qheading .line-wrapper {margin-right: -60px; transform: rotate(-39deg);} .data .key-wrapper {margin-right: -18px; transform: rotate(-1.5deg);}}.quater.quater24{.qheading .line-wrapper {margin-right: -27px; transform: rotate(19deg);} .data .key-wrapper {margin-right: -30px; transform: rotate(8deg);}}.quater.quater25{.qheading .line-wrapper {margin-right: -15px; transform: rotate(-19deg);} .data .key-wrapper {margin-right: -22px; transform: rotate(-8.5deg);}}.quater.quater26{.qheading .line-wrapper {margin-right: -10px; transform: rotate(7deg);} .data .key-wrapper {margin-right: -26px; transform: rotate(11.5deg);}}.quater.quater27{.qheading .line-wrapper {margin-right: -8px; transform: rotate(0deg);} .data .key-wrapper {margin-right: -20px; transform: rotate(-13deg);}}.quater.quater28{.qheading .line-wrapper {margin-right: -18px; transform: rotate(19deg);} .data .key-wrapper {margin-right: -28px; transform: rotate(8deg);}}.quater.quater29{.qheading {.line-wrapper {margin-right: -6px; transform: rotate(-12.5deg);}} .data {.key-wrapper {transform: rotate(0deg);}}}}@media (max-width:576px){.new-roadmap{height:100%;.roadmap_wrapper {position: relative; gap: 200px; padding: 50px 15px; height: 100%; overflow-y: visible; flex-direction: column; margin-bottom: 300px; .mobileline{left: 13%; z-index: -1; position: absolute; width: 4px; height: 98%; background: #152329; .color-mobileline{transition: .3s ease-in-out; background: #00d4ec; width: 4px;}} .quater{min-width: 100px; width: 100%; height: fit-content; display: flex ; align-items: flex-start; .qheading{width: fit-content; h3{font-size: calc(var(--f11) + 6px); line-height: 38px; margin: 0; background: #000; padding: 15px 0;} .line-wrapper{display: none;}} .data{h6{font-size: calc(var(--f7) + 5px); margin-bottom: 0;} .content p{font-size:16px;}} .key-wrapper{display: none;}}}}}@media (min-width:577px){.mobileline{display:none}}[class^=color]{height:100%;width:0%;background:#00d4ec;transition:width .3s ease-in-out}