@font-face {
    font-family: 'BigNoodleTitling'; 
    src: url('../font/big_noodle_titling.ttf') format('truetype');
}
@font-face {
    font-family: '5STAR League'; 
    src: url('../font/5STAR League.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OutfitBlack'; 
    src: url('../font/OutfitBlack.ttf') format('truetype');
}

@font-face {
    font-family: 'ABeeZee-Regular'; 
    src: url('../font/ABeeZee-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'ABeeZee-Italic'; 
    src: url('../font/ABeeZee-Italic.ttf') format('truetype');
}
@font-face {
    font-family: 'big_noodle_titling'; 
    src: url('../font/big_noodle_titling.ttf') format('truetype');
}
@font-face {
    font-family: 'big_noodle_titling_oblique'; 
    src: url('../font/big_noodle_titling_oblique.ttf') format('truetype');
}
@font-face {
    font-family: 'OutfitBlack'; 
    src: url('../font/OutfitBlack.ttf') format('truetype');
}
@font-face {
    font-family: 'OutfitBold'; 
    src: url('../font/OutfitBold.ttf') format('truetype');
}
@font-face {
    font-family: 'OutfitExtraBold'; 
    src: url('../font/OutfitExtraBold.ttf') format('truetype');
}
@font-face {
    font-family: OutfitExtraLight; 
    src: url('../font/OutfitExtraLight.ttf') format('truetype');
}

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');


body{
  font-family: "Chakra Petch", sans-serif;
  background: #000515;
}
p {
    color: #FFF;
    
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
img {
    width: 100%;
}

li {
    color: #FFF;
    font-family: Outfit;
    font-size: 17.231px;
    font-style: normal;
    font-weight: 400;
    line-height: 98%;
    letter-spacing: 0.345px;
}
h1{
font-family: '5STAR League', sans-serif !important;
}
h2,h3,h4,h5,h6,p, tr, th, td, .accordion-body {
font-family: "Chakra Petch", sans-serif !important;
}
.btn {
    color: #11091C;
    text-align: center;
    font-family: BigNoodleTitling;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: capitalize;
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22227%22%20height%3D%2259%22%20viewBox%3D%220%200%20227%2059%22%20fill%3D%22none%22%3E%3Cg%20filter%3D%22url%28%23filter0_d_2_39041%29%22%3E%3Cmask%20id%3D%22path-1-inside-1_2_39041%22%20fill%3D%22white%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%2020.3704L32%2050V50.0633H195V50H213C218.523%2050%20223%2045.5228%20223%2040V29.6296L195%200H32H14C8.47715%200%204%204.47716%204%2010V20.3704Z%22/%3E%3C/mask%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%2020.3704L32%2050V50.0633H195V50H213C218.523%2050%20223%2045.5228%20223%2040V29.6296L195%200H32H14C8.47715%200%204%204.47716%204%2010V20.3704Z%22%20fill%3D%22url%28%23paint0_linear_2_39041%29%22/%3E%3Cpath%20d%3D%22M32%2050H33V49.6023L32.7268%2049.3132L32%2050ZM4%2020.3704H3V20.7681L3.27319%2021.0572L4%2020.3704ZM32%2050.0633H31V51.0633H32V50.0633ZM195%2050.0633V51.0633H196V50.0633H195ZM195%2050V49H194V50H195ZM223%2029.6296H224V29.2319L223.727%2028.9428L223%2029.6296ZM195%200L195.727%20-0.686837L195.431%20-1H195V0ZM32.7268%2049.3132L4.72681%2019.6835L3.27319%2021.0572L31.2732%2050.6868L32.7268%2049.3132ZM31%2050V50.0633H33V50H31ZM32%2051.0633H195V49.0633H32V51.0633ZM196%2050.0633V50H194V50.0633H196ZM195%2051H213V49H195V51ZM213%2051C219.075%2051%20224%2046.0751%20224%2040H222C222%2044.9706%20217.971%2049%20213%2049V51ZM224%2040V29.6296H222V40H224ZM223.727%2028.9428L195.727%20-0.686837L194.273%200.686837L222.273%2030.3165L223.727%2028.9428ZM195%20-1H32V1H195V-1ZM14%201H32V-1H14V1ZM5%2010C5%205.02944%209.02944%201%2014%201V-1C7.92487%20-1%203%203.92487%203%2010H5ZM5%2020.3704V10H3V20.3704H5Z%22%20fill%3D%22black%22%20mask%3D%22url%28%23path-1-inside-1_2_39041%29%22/%3E%3C/g%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_d_2_39041%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22227%22%20height%3D%2258.0635%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22/%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22/%3E%3CfeOffset%20dy%3D%224%22/%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22/%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22/%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200%22/%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_2_39041%22/%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_2_39041%22%20result%3D%22shape%22/%3E%3C/filter%3E%3ClinearGradient%20id%3D%22paint0_linear_2_39041%22%20x1%3D%22-17.4779%22%20y1%3D%2243.2244%22%20x2%3D%22-4.49749%22%20y2%3D%22-35.5927%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23F6CE69%22/%3E%3Cstop%20offset%3D%220.2034%22%20stop-color%3D%22%23D99A26%22/%3E%3Cstop%20offset%3D%220.2532%22%20stop-color%3D%22%23C68B23%22/%3E%3Cstop%20offset%3D%220.3191%22%20stop-color%3D%22%23B57C20%22/%3E%3Cstop%20offset%3D%220.3898%22%20stop-color%3D%22%23AA741F%22/%3E%3Cstop%20offset%3D%220.473%22%20stop-color%3D%22%23A7711E%22/%3E%3Cstop%20offset%3D%220.5235%22%20stop-color%3D%22%23B0781F%22/%3E%3Cstop%20offset%3D%220.6042%22%20stop-color%3D%22%23C78B23%22/%3E%3Cstop%20offset%3D%220.6544%22%20stop-color%3D%22%23D99A26%22/%3E%3Cstop%20offset%3D%220.6768%22%20stop-color%3D%22%23DEA732%22/%3E%3Cstop%20offset%3D%220.7565%22%20stop-color%3D%22%23F0D258%22/%3E%3Cstop%20offset%3D%220.8187%22%20stop-color%3D%22%23FBED6F%22/%3E%3Cstop%20offset%3D%220.8554%22%20stop-color%3D%22%23FFF778%22/%3E%3Cstop%20offset%3D%220.8804%22%20stop-color%3D%22%23FDF274%22/%3E%3Cstop%20offset%3D%220.9111%22%20stop-color%3D%22%23F8E368%22/%3E%3Cstop%20offset%3D%220.9447%22%20stop-color%3D%22%23EFCA53%22/%3E%3Cstop%20offset%3D%220.9801%22%20stop-color%3D%22%23E3A837%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23DB9125%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E') no-repeat center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 219px;
    height: 58px;
    flex-shrink: 0;
    background-color: transparent;
    border: unset;
}
.btn:hover {
    color: #fff;
    background-color: transparent !important;
    border-color: unset !important;
}
.logo-icon {
    margin-bottom: 80px;
}
.we-bg p {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
.home-section .btn {
    width: 288.6px;
/*    height: 78px;*/
    color: #111;
text-align: center;
font-family: BigNoodleTitling;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 32px */
}
.home-section svg {
    position: relative;
    right: -14px;
    width: 40px;
    height: 40px;
}
.home-box {
    background: linear-gradient(180deg, rgba(0, 5, 21, 0.00) -11.15%, rgba(0, 5, 21, 0.48) 18.47%, #000515 77.97%);
    text-align: center;
    padding: 250px 0px 250px 0px;
}
.slider-section {
    background-image: url('../images/bg/sliderbg.png');
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
}
.slider-section .container{
    width: 75%;
}
.home-section {
    background-image: url('../images/bg/homebg.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -92px;
}
.home-section h4 {
    color: #FFF;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.boter-footer-top {
    border-top: 1px solid #DB9125;
    position: relative;
    top: -65px;
}
.home-section h1{
text-align: center;
font-size: 102px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 102px */
background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.slick-slide {
 
    width: 350px !important;
}
/*.slider.slick-initialized.slick-slider {
    width: 1085px;
    margin: auto;
    overflow: hidden;
    top: -80px;
}*/
.navbar-nav {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%);
    backdrop-filter: blur(20.833332061767578px);
}
a.nav-link.active, .navbar-nav a.nav-link {
    color: #FFF !important;
    font-family: BigNoodleTitling;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.72px;
    text-transform: uppercase;
}
.navbar-nav a.nav-link.active:before {
    content: "";
    background: linear-gradient(101deg, #F6CE69 7.22%, #D99A26 24.63%, #C68B23 28.89%, #B57C20 34.53%, #AA741F 40.57%, #A7711E 47.69%, #B0781F 52.01%, #C78B23 58.92%, #D99A26 63.22%, #DEA732 65.13%, #F0D258 71.95%, #FBED6F 77.27%, #FFF778 80.41%, #FDF274 82.55%, #F8E368 85.18%, #EFCA53 88.05%, #E3A837 91.08%, #DB9125 92.79%);
    display: block;
    height: 2px;
    position: relative;
    top: -16px;
}
.navbar-nav li.nav-item {
    padding: 8px 20px;
}
.home-section img {
    width: 300px;
    margin: auto;
    margin-top: -50px;
}
.slider-home {
    background-size: cover;
    background-repeat: no-repeat;
}

.slick-next:before {
    content: '' !important;
    display: block;
    width: 70px;
    height: 70px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2285%22 height=%2285%22 viewBox=%220 0 85 85%22 fill=%22none%22%3E%3Ccircle cx=%2242.5%22 cy=%2242.5%22 r=%2242%22 transform=%22matrix(-1 0 0 1 85 0)%22 fill=%22%230E121F%22 stroke=%22url(%23paint0_linear_1_19985)%22 stroke-dasharray=%222 2%22/%3E%3Cpath d=%22M51.7071 41.2929C52.0976 41.6834 52.0976 42.3166 51.7071 42.7071L45.3431 49.0711C44.9526 49.4616 44.3195 49.4616 43.9289 49.0711C43.5384 48.6805 43.5384 48.0474 43.9289 47.6569L49.5858 42L43.9289 36.3431C43.5384 35.9526 43.5384 35.3195 43.9289 34.9289C44.3195 34.5384 44.9526 34.5384 45.3431 34.9289L51.7071 41.2929ZM35 41L51 41L51 43L35 43L35 41Z%22 fill=%22white%22/%3E%3Cdefs%3E%3ClinearGradient id=%22paint0_linear_1_19985%22 x1=%2242.5%22 y1=%220%22 x2=%2242.5%22 y2=%2285%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22%23FFF778%22/%3E%3Cstop offset=%221%22 stop-color=%22%23E3A837%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
}
.slick-prev:before {
  
    content: '' !important;
    display: block;
    width: 70px;
    height: 70px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2285%22 height=%2285%22 viewBox=%220 0 85 85%22 fill=%22none%22%3E%3Ccircle cx=%2242.5%22 cy=%2242.5%22 r=%2242%22 fill=%22%230E121F%22 stroke=%22url(%23paint0_linear_1_19988)%22 stroke-dasharray=%222%202%22/%3E%3Cpath d=%22M33.2929%2041.2929C32.9024%2041.6834%2032.9024%2042.3166%2033.2929%2042.7071L39.6569%2049.0711C40.0474%2049.4616%2040.6805%2049.4616%2041.0711%2049.0711C41.4616%2048.6805%2041.4616%2048.0474%2041.0711%2047.6569L35.4142%2042L41.0711%2036.3431C41.4616%2035.9526%2041.4616%2035.3195%2041.0711%2034.9289C40.6805%2034.5384%2040.0474%2034.5384%2039.6569%2034.9289L33.2929%2041.2929ZM50%2041L34%2041L34%2043L50%2043L50%2041Z%22 fill=%22white%22/%3E%3Cdefs%3E%3ClinearGradient id=%22paint0_linear_1_19988%22 x1=%2242.5%22 y1=%220%22 x2=%2242.5%22 y2=%2285%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22%23FFF778%22/%3E%3Cstop offset=%221%22 stop-color=%22%23E3A837%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
    background-size: contain;
}
.slick-prev {
    left: -150px !important;
}
.slick-next {
    right: -100px !important;
}
.horizontal-timeline .items {
  border-top: 3px solid #e9ecef;
}

.horizontal-timeline .items .items-list {
  display: block;
  position: relative;
  text-align: center;
  padding-top: 70px;
  margin-right: 0;
}

.horizontal-timeline .items .items-list:before {
  content: "";
  position: absolute;
  height: 36px;
  border-right: 2px dashed #dee2e6;
  top: 0;
}
button.btn-news-sub.btn-theme {
    border-radius: 15px;
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    display: flex;
    padding: 35px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.horizontal-timeline .items .items-list .event-date {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  width: 75px;
  margin: 0 auto;
  font-size: 0.9rem;
  padding-top: 8px;
}
.roadmap-section{
      background-image: url('../images/bg/pic.png');
       background-size: cover;
    background-repeat: no-repeat;
    background-color: #000;
}
.mock-section img {
    width: 100%;
}
.str-img {
    border-radius: 24.685px;
    border: 1.234px solid #FFF778;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.10) 0.12%, rgba(255, 255, 255, 0.05) 103.14%);
    backdrop-filter: blur(22.11130714416504px);
    text-align: center;
    display: flex;
    padding: 24px 15.6px;
    align-items: center;
    justify-content: center;
    width: 348px;
    height: 148.982px;
    flex-shrink: 0;
    margin: 15px 15px;
}
.slider-box h3 {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: "Chakra Petch", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    min-height: 83px;
}
.slider-box p {
    color: #FFF;
    text-align: center;
    font-family: "Chakra Petch", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}
.slider-box a {
    color: #DB9125;
    text-align: center;
    font-family: BigNoodleTitling;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.8px;
    text-transform: capitalize;
    text-decoration: unset;
}
.str-img img {
    width: 193.6px;
    height: 72px;
    text-align: center;
    align-items: center;
}
.str-box {
    margin: 50px 0px;
}

.display-step-xl-4, .display-step-xl-2{
    display: block;
}

.display-step-md-4, .display-step-md-2{
    display: none;
}



.tokenomics-section p {
    color: #FFF;
    font-family: "Chakra Petch", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    /*width: 504px;*/
}
.tokenomics-section h3 {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Chakra Petch", sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.airdrop-box {
    border-radius: 70px;
    border: 1px solid #FFF778;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.10) 0.12%, rgba(255, 255, 255, 0.05) 103.14%);
    backdrop-filter: blur(17.915000915527344px);
    padding: 50px 50px;
   
    height: 300px;
   
    margin-bottom: 50px;
}
.airdrop-box h3 {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Chakra Petch", sans-serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px;
    margin-top: 12px;
}
.slider-home img {
    width: 100px;
    display: inline !important;
    border-radius: 120.81px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.10) 0.12%, rgba(255, 255, 255, 0.05) 103.14%);
    stroke-width: 0.58px;
    stroke: #FFF778;
    padding: 11px 12px;
    backdrop-filter: blur(10.384760856628418px);
    margin-bottom: 8px;
}
.slider-box.icon1 img {
    padding: 27px 12px;
}
.slider-home {
    background-repeat: no-repeat;
    text-align: center;
    padding: 35px 35px;
    background-size: cover;
    height: 453px !important;   
    border-radius: 20px;
    margin: auto !important;
    background-blend-mode: luminosity;
    background-color: #15171A;
}
.slick-slide.slick-current.slick-active.slick-center .slider-home {
    mix-blend-mode: hard-light;
    border: 1px solid #FFF778;
    background-color: #15171a00;
    border-radius: 30px;
}
.slider1{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), url('../images/slider/slider1.png');
}
.slider2{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), url('../images/slider/slider2.png');
}
.slider3{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), url('../images/slider/slider3.png');
}
.slider4{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), url('../images/slider/slider4.png');
}
.we-section h2 {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: "Chakra Petch", sans-serif;
    font-size: 65px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.27px;
    text-transform: uppercase;
}

.we-img {
    position: relative;
    padding: 53px 20px;
}

.we-img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 53px 20px;
    background-image: url(../images/bg/unionbg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
   
    z-index: -1;
}

/*.we-img {
    background-image: url('../images/bg/unionbg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 53px 20px;
}*/
.we-le {
    margin-top: 30px;
    margin-left: 10px;
}
.we-bg-left img {
    text-align: center;
    margin: auto;
    mix-blend-mode: lighten;
}
.we-bg {
    margin-top: 50px;
    margin-left: 81px;
    margin-right: 50px;
}

.pre-box {
    background-image: url('../images/bg/presalebg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    text-align: center;
    padding: 50px 0px;
    padding-top: 300px;
}

.leaderboard-box{
    text-align: center;
    padding: 50px 0px;
    padding-top: 80px;
}

.live-bg {
background-image: url('../images/bg/presalebg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    text-align: center;
}
.pre-box .progress-bar {
   
    border-radius: 100px;
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
}

.pre-box .progress {
    width: 60%;
    margin: auto;
    margin-top: 60px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.10);
}
.pre-box p, .leaderboard-box p, .timeline-container p  {
    color: #FFF;
text-align: center;
   font-family: "Chakra Petch", sans-serif;
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 45px */
}

.pre-section h3, .leaderboard-box h3, .timeline-container h3 {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: "Chakra Petch", sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.pre-section h4 {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Chakra Petch", sans-serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px;
    margin-bottom: 22px;
}
.exa-box p {
    color: #FFF;
   
    font-family: "Chakra Petch", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
     margin-bottom: 22px;
}
.exa-box button.btn {
    margin-top: 30px;
    width: 288.6px;
    height: 78px;
    color: #111;
    text-align: center;
    font-family: BigNoodleTitling;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}

.mock-section {
    padding: 100px 0px;
}
.airdrop-box span {
    border-radius: 10px;
    border: 1px solid #FFF778;
    background: rgba(0, 0, 0, 0.56);
    backdrop-filter: blur(17.915000915527344px);
    padding: 10px 20px;
    color: #FFF;
    text-align: center;
    font-family: "Chakra Petch", sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    text-transform: uppercase;
}

a.navbar-brand {
    width: 17%;
    display: flex;
}
.str-txt {
    align-items: center;
    display: flex;
}
.strate-section h2 {
    font-family: "Chakra Petch", sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-newsletter h2 {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: left;
    font-family: "Chakra Petch", sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.home-newsletter p {
    color: #FFF;
    text-align: left;
    font-family: "Chakra Petch", sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;

}
.home-newsletter {
    padding-bottom: 250px;
}

.home-newsletter .form-control {
    border-radius: 15px !important;
    border: 1px solid #E3A837;
    background-color: transparent;
    color: #fff;
}
.home-newsletter input::placeholder{
    color: #A7711E;
    font-family: 'Lato';
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
}
.home-newsletter .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin: auto;
    margin-top: 50px;
}


.card {
    background-color: #333; /* Card background */
    color: white; /* Text color */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Shadow effect */
    transition: transform 0.3s ease; /* Animation */
    text-align: center; /* Center text */
}

.card:hover {
    transform: scale(1.05); /* Scale effect on hover */
}

.badge {
    width: 80px; /* Set badge size */
    margin-bottom: 15px; /* Spacing below the image */
}

.user-name {
    font-size: 1.5em; /* User name size */
    margin: 0; /* Remove default margin */
    font-weight: bold; /* Bold text */
}

.prize {
    font-size: 1.2em; /* Prize text size */
    margin: 10px 0 0; /* Top margin */
    animation: fadeIn 0.5s; /* Fade-in effect */
}

/* Animation keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.timeline-container {
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}

.title {
    font-size: 32px;
    color: #ffd700; /* Gold color */
    margin-bottom: 50px;
}

.timeline {
    margin-top:20px;
    position: relative;
    padding: 0;
}

.timeline-item {
    display: flex;
    margin-bottom: 50px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 50%;
    border: 2px solid #5C5C5C;
    red: 0;
    height: 128%;
    top: 50%;
}


.timeline-item-end::before{
    
    height: 0% !important;
   
}

.timeline-dot {
    position: absolute;
    width: 35px;
    top: 39%;
    left:-15px;
    background-color: transparent;
}

.timeline-dot img {
    width: 100%;
    height: auto;
}

.green-dot {
    background-color: transparent;
}

/*.dashed-line {
    width: 40px;
    height: 2px;
    border: 1px dashed #fff;
    margin-right: 20px;
}*/

.timeline-content {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    width: 100%;
}

.timeline-content h2 {
    font-size: 18px;
    color: #ffd700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.timeline-content ul {
    list-style: none;
    padding-left: 0;
    text-align: left;
}

.timeline-content ul li {
    font-size: 14px;
    margin-bottom: 5px;
    color: #fff;
}

.timeline-content ul li::before {
    content: '•';
    color: #ffd700;
    margin-right: 10px;
}




.footer-two {
    background: rgba(72, 77, 67, 0.20);
    backdrop-filter: blur(16.154254913330078px);
    padding: 50px;
}
form.footer-form {
    display: grid;
    margin-top: 50px;
    width: 250px;
}
select#language-location {
    color: #fff;
    border: 0px;
    font-family: 'Outfit', sans-serif;
    background: #000912;
    border-bottom: 2px solid #fff;
    padding: 15px 0px;
    margin-bottom: 110px;
}
.footer-form  label {
    color: #FFF;
    font-family: 'Outfit', sans-serif;
    font-size: 19.385px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.border-left {
    border-left: 1px solid #fff;
    padding-left: 40px;
}
footer {
    padding-top: 50px;
}
footer p {
    opacity: 0.5;
    width: 490px;
}
ul.footer-cont {
    margin-top: 35px;
}
.footer-two ul {
    list-style: none;
}
.footer-two svg {
    margin-right: 10px;
}
.footer-two li {
    
    line-height: 40px;
    font-family: "Chakra Petch", sans-serif;
    
}

/*--------- new code ---------------*/

.legend {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 20px;
    }
    .legend-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    .arrow {
        width: 0; 
        height: 0; 
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid; /* Arrow size */
        margin-right: 8px;
    }
    .liquidity { border-bottom-color: #3D5AF1; }
    .development { border-bottom-color: #D5006D; }
    .marketing { border-bottom-color: #FF6D00; }
    .team { border-bottom-color: #FFCA28; }
    .exchange { border-bottom-color: #FF5722; }
    .percentage {
        margin-left: 10px;
        font-size: 14px; 
    }


     #myDonutChart:before{
        width: 40%;
      
    background-color: #111827; /* Nearly black background */
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    }
    .shadow{
    position: relative;
    width: 100%;
    left: -140px;
    top: -590px;
    margin-bottom: -590px;
    z-index: -1;
}

.canvas-chart-box{
    position: relative;
    top: 110px;
    left: 70px;

}


/*--------- end new code ---------------*/

@media (min-width: 1140px) {
  .horizontal-timeline .items .items-list {
    display: inline-block;
    width: 24%;
    padding-top: 45px;
  }

  .horizontal-timeline .items .items-list .event-date {
    top: -40px;
  }
}








.slider-nav .slick-slide { cursor: pointer; }


    .timelineSlider {

        margin-bottom: 75px;

        &:before, &:after {
            content: "";
            z-index: 2;
            display: block;
            position: absolute;
            top: 0;
            width: 450px;
            height: 100%;
          }
        
      


     

        .timelineSliderArrowLeft, .timelineSliderArrowRight {
                position: absolute;
                z-index: 3;
                color: #917412;
                margin: auto;
                top: 0;
                bottom: 0;
            }

            .timelineSliderArrowLeft{
                left: 22%;
            }

            .timelineSliderArrowRight {
                right: 23%;
            }

        .slick-track {
            display: flex;
            align-items: center;
        }
    }

    .timelineSliderNav {

        &:before {
            content: '';

            position: absolute;
            top: 50%;
            left: 0;
            background: #917412;
            height: 1px;
            width: 100%;
            transform: translateY(-50%);
        }

        .slick-list {
            display: flex;
            padding-top: 25px;

            .is-active {
                span {
                    content: '';
                background-image: url(../images/icon/green.png) !important;
                background-size: contain;
                background-repeat: no-repeat;
                display: block;
                height: 120px;
                width: 120px;
                border-radius: 30px;
                position: absolute;
                top: -42px;

                    i {
                        color: #917412;
                        margin-top: 8px;
                    }
                }
                color: #917412;
            }
       
            .slick-slide {
                text-align: center;
                display: flex;
                justify-content: center;
            }
        }
    }

    #timelineSliderNavTopDates {
            display: flex;
            margin-left: 10%;
            position: relative;
            top: 20px;

            span {
                margin-right: 25%;
                position: relative;
                padding-top: 5px;

                &:before {
                    content: '';
                    display: block;
                    height: 20px;
                    width: 1px;
                    position: absolute;
                    bottom: -15px;
                    background: black;
                    left: 18px;
                }
            }
        }

    #timelineSliderNavBottomDates {
            display: flex;
            margin-left: 25%;
            position: relative;
            top: -50px;

            span {
                margin-right: 32%;
                position: relative;
                padding-top: 5px;

                &:before {
                    content: '';
                    display: block;
                    height: 20px;
                    width: 1px;
                    position: absolute;
                    top: -15px;
                    background: black;
                    left: 18px;
                }
            }
        }

 .timelineSliderNav {

           &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        height: 3px;
        border-radius: 60px;
        background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
        width: 100%;
        transform: translateY(-50%);
    }

        .slick-list {
            display: flex;
            padding-top: 25px;

           

 span{
             content: '';
                background-image: url(../images/icon/blue.png);
                background-size: contain;
                background-repeat: no-repeat;
                display: block;
                height: 120px;
                width: 120px;
                border-radius: 30px;
                position: absolute;
                top: -42px;
        }



}
}
}










.countdown {
    width: 720px;
    margin: 0 auto;
    text-align: center;
}
.countdown .bloc-time {
  float: left;
  margin-right: 45px;
  text-align: center;
}
.countdown .bloc-time:last-child {
  margin-right: 0;
}
.countdown .count-title {
  display: block;
  margin-bottom: 15px;
  font-family: "Chakra Petch", sans-serif;
 color: #FFF;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
}
.countdown .figure {
  position: relative;
  float: left;
  height: 60px;
  width: 50px;
  margin-right: 5px;
  background-color: #4C4C4C;
  border-radius: 8px;
  -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
  -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
}
.countdown .figure:last-child {
  margin-right: 0;
}
.countdown .figure > span {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    font: normal 2.94em/57px "Lato";
    font-weight: 700;
    color: #de4848;
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Chakra Petch", sans-serif;
}
.countdown .figure .top:after, .countdown .figure .bottom-back:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.countdown .figure .top {
  z-index: 3;
  background-color: #4C4C4C;
  transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
  -moz-transform: perspective(200px);
  -ms-transform: perspective(200px);
  -webkit-transform: perspective(200px);
  transform: perspective(200px);
}
.countdown .figure .bottom {
  z-index: 1;
}
.countdown .figure .bottom:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.02);
}
.countdown .figure .bottom-back {
  z-index: 2;
  top: 0;
  height: 50%;
  overflow: hidden;
  background-color: #f7f7f7;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}
.countdown .figure .bottom-back span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.countdown .figure .top, .countdown .figure .top-back {
  height: 50%;
  overflow: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.countdown .figure .top-back {
  z-index: 4;
  bottom: 0;
  background-color: #4C4C4C;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -moz-transform: perspective(200px) rotateX(180deg);
  -ms-transform: perspective(200px) rotateX(180deg);
  -webkit-transform: perspective(200px) rotateX(180deg);
  transform: perspective(200px) rotateX(180deg);
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.countdown .figure .top-back span {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  margin: auto;
}

.stage1 {
    border-radius: 20px;
    border: 1px solid #FFF778;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.10) 0.12%, rgba(255, 255, 255, 0.05) 103.14%);
    backdrop-filter: blur(17.915000915527344px);
    display: flex;
    padding: 15px 50px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.purchese-box button.btn {
    width: 288.6px;
    height: 78px;
    color: #111;
    text-align: center;
    font-family: BigNoodleTitling;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.stage1 h2 {
    color: #FFF;
    text-align: center;
   font-family: "Chakra Petch", sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.stage1 span {
    color: #FFF;
    text-align: right;
     font-family: "Chakra Petch", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.792px;
}
.stage1:after {
    content: '' !important;
    display: block;
    width: 9px;
    height: 70px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%229%22 height=%2271%22 viewBox=%220 0 9 71%22 fill=%22none%22%3E%3Cpath opacity=%220.5%22 d=%22M0.743652 2L8.91362 0V71L0.743652 69V2Z%22 fill=%22url(%23paint0_linear_1_19857)%22/%3E%3Cdefs%3E%3ClinearGradient id=%22paint0_linear_1_19857%22 x1=%220.814959%22 y1=%2228.8755%22 x2=%228.84338%22 y2=%2229.0711%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22%23DB9125%22/%3E%3Cstop offset=%220.0199%22 stop-color=%22%23E3A837%22/%3E%3Cstop offset=%220.0553%22 stop-color=%22%23EFCA53%22/%3E%3Cstop offset=%220.0889%22 stop-color=%22%23F8E368%22/%3E%3Cstop offset=%220.1196%22 stop-color=%22%23FDF274%22/%3E%3Cstop offset=%220.1446%22 stop-color=%22%23FFF778%22/%3E%3Cstop offset=%220.1813%22 stop-color=%22%23FBED6F%22/%3E%3Cstop offset=%220.2435%22 stop-color=%22%23F0D258%22/%3E%3Cstop offset=%220.3232%22 stop-color=%22%23DEA732%22/%3E%3Cstop offset=%220.3456%22 stop-color=%22%23D99A26%22/%3E%3Cstop offset=%220.3958%22 stop-color=%22%23C78B23%22/%3E%3Cstop offset=%220.4765%22 stop-color=%22%23B0781F%22/%3E%3Cstop offset=%220.527%22 stop-color=%22%23A7711E%22/%3E%3Cstop offset=%220.6102%22 stop-color=%22%23AA741F%22/%3E%3Cstop offset=%220.6809%22 stop-color=%22%23B57C20%22/%3E%3Cstop offset=%220.7468%22 stop-color=%22%23C68B23%22/%3E%3Cstop offset=%220.7966%22 stop-color=%22%23D99A26%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F6CE69%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
}

.stage1.active:after {
    content: '' !important;
    display: block;
    width: 50px;
    height: 70px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2244%22 height=%2269%22 viewBox=%220 0 44 69%22 fill=%22none%22%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M8.91362 4.09736C8.91362 1.50316 6.48231 -0.404758 3.96251 0.212085L3.79254 0.253694C2.00261 0.691867 0.743652 2.29619 0.743652 4.13897V64.8611C0.743652 66.7039 2.00261 68.3083 3.79254 68.7464L3.96251 68.788C6.48231 69.4049 8.91362 67.497 8.91362 64.9028V44.4444C8.91362 40.901 13.1804 39.1073 15.7122 41.5864L24.4247 50.1176C25.9797 51.6403 28.4668 51.6403 30.0218 50.1176L42.6144 37.787C44.2164 36.2184 44.2164 33.6396 42.6144 32.071L30.0218 19.7404C28.4668 18.2177 25.9797 18.2177 24.4247 19.7404L15.7122 28.2717C13.1804 30.7507 8.91362 28.9571 8.91362 25.4137V4.09736Z%22 fill=%22url(%23paint0_linear_1_19918)%22/%3E%3Cdefs%3E%3ClinearGradient id=%22paint0_linear_1_19918%22 x1=%220.99561%22 y1=%2227.8707%22 x2=%2229.172%22 y2=%2230.2935%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22%23DB9125%22/%3E%3Cstop offset=%220.0199%22 stop-color=%22%23E3A837%22/%3E%3Cstop offset=%220.0553%22 stop-color=%22%23EFCA53%22/%3E%3Cstop offset=%220.0889%22 stop-color=%22%23F8E368%22/%3E%3Cstop offset=%220.1196%22 stop-color=%22%23FDF274%22/%3E%3Cstop offset=%220.1446%22 stop-color=%22%23FFF778%22/%3E%3Cstop offset=%220.1813%22 stop-color=%22%23FBED6F%22/%3E%3Cstop offset=%220.2435%22 stop-color=%22%23F0D258%22/%3E%3Cstop offset=%220.3232%22 stop-color=%22%23DEA732%22/%3E%3Cstop offset=%220.3456%22 stop-color=%22%23D99A26%22/%3E%3Cstop offset=%220.3958%22 stop-color=%22%23C78B23%22/%3E%3Cstop offset=%220.4765%22 stop-color=%22%23B0781F%22/%3E%3Cstop offset=%220.527%22 stop-color=%22%23A7711E%22/%3E%3Cstop offset=%220.6102%22 stop-color=%22%23AA741F%22/%3E%3Cstop offset=%220.6809%22 stop-color=%22%23B57C20%22/%3E%3Cstop offset=%220.7468%22 stop-color=%22%23C68B23%22/%3E%3Cstop offset=%220.7966%22 stop-color=%22%23D99A26%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F6CE69%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -42px;
}


 .live-txt {
    border-radius: 10px;
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 25px;
    position: relative;
    height: 140px;
}
.live-txt h5 {
    color: #000;
    text-align: center;
         font-family: "Chakra Petch", sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
}
.live-txt p {
    align-items: center;
    color: #DB9125;
    text-align: center;
     font-family: "Chakra Petch", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: capitalize;
    border-radius: 10px;
    background: #000;
    display: inline;
    padding: 7px 10px;
}
.live-box {
    border-radius: 20px;
    border: 1px solid #FFF778;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.10) 0.12%, rgba(255, 255, 255, 0.05) 103.14%);
    backdrop-filter: blur(17.915000915527344px);
    padding: 50px 20px;
    margin-left: 30px;
}
.purchese-txt {
    display: flex;
    justify-content: space-between;
   
}

.purchese-txt p {
    color: #FFF;
    font-family: "Chakra Petch", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
.purchese-box button.btn {
    margin-top: 25px;
}
.purchese-box {
    padding-top: 50px !important;
    padding: 0px 55px;
    text-align: left;
}


.airdrop-box p {
    color: #FFF;
    font-family: "Chakra Petch", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.airdrop-section {
    background-image: url('../images/bg/Group.png');
    background-repeat: no-repeat;
    background-size: contain;
    
    position: relative;
}
.airdrop-boxs{
    width: 1130px;
    padding-top: 200px;
    margin: auto;
}
.step-2 {
    position: relative;
    top: 50px;
}
.bg-str {
    background-image: url('../images/bg/Group.png');
    background-repeat: no-repeat;
    background-size: contain;
}.form-control:focus {
   
    box-shadow: unset;
}
.top-divder {
    position: relative;
    top: -350px;
}
.btn-center {
    text-align: center;
}
section.airdrop-section button.btn {
    margin-top: 30px;
    width: 288.6px;
    height: 78px;
    color: #111;
    text-align: center;
    font-family: BigNoodleTitling;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
footer img {
    width: 250px;
}

/*.bg-st {
 background-image: url('../images/bg/pic.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: color-dodge;
}*/

.road-section .slick-prev, .road-section .slick-next {
    top: 850px !important;
    z-index: 9999;
    text-align: center;
    margin: auto;
}.road-section .slick-prev, .road-section .slick-next {
    
    
    z-index: 9999;
    text-align: center;
    margin: auto;
}
.road-section .slick-prev  {
    left: 0px !important;
    right: 105px !important;
}

.road-section .slick-next {
    left: 150px !important;
    right: 0px !important;
}
.mock-section {
    margin: 100px 0px;
    text-align: center;
   
}
.we-section .btn {
    width: 288.6px;
    height: 77px;
    color: #111;
    text-align: center;
    font-family: BigNoodleTitling;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    margin-top: 13px;
}
.live-txt span {
    text-align: left;
}
.purchese-box button.btn {
    width: 288.6px;
    height: 78px;
    color: #111;
    text-align: center;
    font-family: BigNoodleTitling;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.timelineSlider .title-txt {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Chakra Petch";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.timelineSlider li {
    color: #FFF;
    font-family: "Chakra Petch";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.619px;
}

.road-box {
    border-radius: 20px;
    border: 1px solid #FFF778;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.10) 0.12%, rgba(255, 255, 255, 0.05) 103.14%);
    backdrop-filter: blur(17.915000915527344px);
    padding: 90px 50px;
}

.road-box ul{
    list-style: unset !important;
}

.road-box ul{
    padding: 5px 0px;
}



.timelines-content {
    border-radius: 20px;
    border: 1px solid #FFF778;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.10) 0.12%, rgba(255, 255, 255, 0.05) 103.14%);
    backdrop-filter: blur(17.915000915527344px);
    padding: 18px 40px;
    height: max-content;
   
}


.timelines-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/roadmap/background_image.png);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    z-index: -1;
}

.timelines-content h5 {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Chakra Petch";
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.timeline-item img.dashed-line {
    width: 60px;
}

.timelines-content ul{
  
    padding-left: 20px;
}

.timelines-content ul li {
    color: #FFF;
    font-family: "Chakra Petch";
    font-size: 16px;
    list-style: disc;
    font-style: normal;
    font-weight: 400;
    padding-top: 10px;
}


.timelineSlider .slick-slide {
    width: 400px !important;
    margin-right: 60px;
}
.pink-home img {
    width: 100px;
    position: absolute;
    left: 0px;
    
}
.madel-home img {
    width: 51px !important;
    left: 30px;
    position: absolute;
}
.blue-home img {
    width: 100px;
    bottom: -46px;
    position: relative;
    left: -332px;
}
.green-home img {
    position: absolute;
    right: 0px;
    width: 100px;
    bottom: -155px;
}
.pink-what img {
    width: 100px;
    left: 0px;
    position: absolute;
}
.green-what img {
    width: 90px;
    position: relative;
    bottom: -60px;
    text-align: center;
    left: -61px;
}
.green-icon-what img {
    width: 100px;
    position: absolute;
    right: 0px;
}
.countdown {
    margin: auto;
    text-align: center;
    display: ruby;
    margin-bottom: 20px;
}
.thumb-icon img {
    width: 150px;
    position: absolute;
    left: 0px;
}
.stake-img-icon img {
    position: absolute;
    width: 100px;
    right: 0px;
}

.live-bg {
    background-image: url('../images/bg/live-bg.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.input-group input {
    padding: 35px 20px !important;
}
span.input-group-btn {
    position: absolute;
    right: 5px;
    top: 5px;
}
.blue-news img {
    width: 100px;
    position: absolute;
    left: 0px;
    top: 172px;
}
section.divder {
    position: relative;
}


.logo-center {
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative;
    top: -455px;
}
.logo-bg {
    background-image: url('../images/bg/logobg.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 99;
    margin: auto;
    text-align: center;
    display: flex;
    justify-content: center;
}
.logo-center img {
    width: 180px;
    position: absolute;
    z-index: 99;
    top: 7px;
    left: 15px;
}


.slider.slick-initialized.slick-slider {
       width: unset !important;!i;!;
    margin: auto;
    top: -80px;
}



@media only screen and (max-width: 600px) {
 .slider.slick-initialized.slick-slider {
/*    width: 100%;*/
    margin: auto;
    top: -80px;
}

.we-bg-left img{
    position: relative;
    top: 71px;
}

.navbar-brand{
    width: 200px !important;
}
/*#businessTimeline{
    display: none;
}*/


.pink-home img {
    width: 50px;
   
}

.timelineSlider {
    &:after {
width: 0px !important;
}
}
.madel-home img {
    width: 40px !important;

}

.airdrop-boxs {
    width: 100%;
    margin: auto;
    padding-top: 20px;
}
.col-6 {
    flex: 0 0 auto;
    width: 100%;
}
.exa-box {
 
    margin-top: 50px !important;
    width: 100%;
    margin: auto;
}
.home-section .logo-icon img {
    width: 30%;
    margin: auto;
    margin-top: -15px;
}
.home-section h1 {
  
font-size: 45px;
font-style: normal;
font-weight: 400;
line-height: 100%;
  
}
.home-section h4 {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 1.26px;
}
.home-box {
   
    padding: 135px 0px 207px 0px;
}
.home-section {
    
    margin-top: -134px;
    height: 392px;
    background-position: center;
    margin-bottom: 208px;
}
.purchese-box {
  
    padding: 0px 0px;
    
}
/*section.road-section {
    display: none;
}*/
.mock-section {
    padding: 0px 0px;
}
.mock-section {
    margin: 40px 0px;
   
}
.pre-section h3, .leaderboard-box h3, .timeline-container h3  {   
    font-size: 45px;   
}

 .timeline-container p  {   
        font-size: 24px;
        padding: 0px 20px;
}

.pre-section p, .leaderboard-box p {   
        font-size: 16px;
        padding: 0px 20px;
}
.live-txt span h5{
    font-size: 16px !important;
}

.pre-section h4 {
    font-size: 22px;
    font-weight: 700;
    line-height: 25px;
}
.stage1 {
    padding: 15px 8px;
}
.stage1.active:after {
    width: 30px;
    height: 40px;
    right: -25px;
}

 .we-section .btn {
    width: 100%;
    height: 65px;
    font-size: 22px;
    font-weight: 400;
    line-height: 100%;
    margin-top: 15px;
    padding-top: 15px;
}

.logo-icon {
    margin-bottom: 20px;
}

.thumb-icon img{
    width: 67px;
}
.we-bg p {
    color: #FFF;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding-left: 40px;
        padding-right: 41px;
        margin-top: 200px;
        text-align: center;
}
.home-section h4 {
    
    margin-top: 33px;
}
.we-section svg, .home-section svg {
    position: relative;
    right: -7px;
    width: 30px;
    height: 30px;
}
.stage1:after {
    width: 9px;
    height: 40px;
    right: -4px;
}
.countdown {
    
    display: inline-block;
    
}
.slick-prev, .slick-next {
    display: none !important;
    
}
.exa-box p {
   
    line-break: anywhere;
}
.stage1{
    display: none;
}

.stake-img-icon img{
    width: 40px;
}
.countdown{
    font-size: 10px;
}

.countdown .count-title{
    font-size: 19px;
}

.stage1 h2 {
   
    font-size: 16px;
 
}

.stage1 span{
    font-size: 16px;
}

.purchese-box button.btn {
    width: 208.6px;
    height: 54px;
    font-size: 18px;
   
}

.tokenomics-section{
    text-align: center;
}

.tokenomics-section{
    text-align: center;
}

.tokenomics-section h3 {
    font-size: 36px;
    
}
.tokenomics-section p {
    font-size: 17px;
    line-height: 150%;
  
    width: 100%;
}
.strate-section h2 {
    
    font-size: 36px;
}
.col-7.bg-str {
    width: 100% !important;
}
.col-6.str-img {
    width: 46%;
}
.str-img {
    padding:5px;
    width: 348px;
    height: 50px;
    flex-shrink: 0;
    margin: 15px 5px;
}

.str-txt{
    display: unset !important;
}

.green-icon-what img{
    display: none;
}

.canvas-chart-box{
    top: 60px;
    margin-bottom: -110px;
}
.str-img img {
    width: 79.6px;
    height: 32px;
    text-align: center;
    align-items: center;
}
.col-5 {
    flex: 0 0 auto;
    width: 100%;
}
footer p {
    margin-bottom: 30px;
    width: 100%;
}
.green-home img {
    position: absolute;
    right: 0px;
    width: 50px;
    bottom: 0;
    top: 237px;
}
.home-newsletter {
    padding-bottom: 100px;
}
.home-newsletter .input-group {
    width: 100%;
    margin-top: 50px;
}
.blue-news img {
    left: 0px;
    top: 20px;
}
.home-newsletter .input-group {
    width: 100%;
    margin: auto;
    margin-top: 50px;
}
.home-newsletter h2 {
    font-size: 36px;
}
.pre-box {
   
    padding-top: 0px;
}
.green-what img {
    width: 50px;
    position: relative;
    bottom: -15px;
    text-align: center;
    left: 0px;
}
.logo-center img {
    width: 100px;
    position: absolute;
    z-index: 99;
    top: 14px;
    left: 15px;
}
.logo-bg {
  
    width: 130px;
    height: 130px;
    position: absolute;
    z-index: 99;
    top: 56px;
    margin: auto;
    text-align: center;
    display: flex;
    justify-content: center;
}
.airdrop-box {
        padding: 35px 20px;
        margin-bottom: 50px;
        margin: 40px;
}

.display-step-xl-4, .display-step-xl-2{
    display: none;
}

.display-step-md-4, .display-step-md-2{
    display: block;
}

.airdrop-box h3{
font-size: 28px;
padding: 5px 0px ;
line-height: unset;
}


.airdrop-box p {
    font-size: 16px;
    padding-bottom: 20px;
}
.airdrop-box span {
            padding: 5px 16px;
        border-radius: 25px;
        font-size: 22px;
        backdrop-filter: unset;
  
    
}
.logo-center {

    top: -815px;
}
.live-box {
    
    margin-left: 0px;
}
.pre-box .progress {
    width: 80%;
}

/*.slider-home {
    background-repeat: no-repeat;
    text-align: center;
    padding: 35px 35px;
    background-size: cover;
    height: 380px !important;
    margin: auto !important;
    background-blend-mode: luminosity;
    background-color: #15171A;
}
*/

.airdrop-section {
    text-align: center;
}
.we-img::before {
    background-image: url(../images/bg/unionbgr.png);
    
    width: 100%;
    margin: auto;
}

.slider-section .container{
    width: 100%;
}
.we-bg {
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
}
.stage1 {
    
    width: 90%;
}
.slider-home {
    background-repeat: no-repeat;
    text-align: center;
    padding: 35px 35px;
    background-size: cover;
    height: 390px !important;
    margin: auto !important;
    background-blend-mode: luminosity;
    background-color: #15171A;
}
.we-section h2 {
   
    font-size: 35px;
    
}

span.input-group-btn {
    position: relative;
    right: 0px;
    top: 0px;
}
button.btn-news-sub.btn-theme {
    border-radius: 10px;
    padding: 6px 6px;
    gap: 10px;
    margin-left: 5px;
}
.pink-what img {

    bottom: 0px;
}
.btn-news-sub.btn-theme svg {
    width: 30px;
    height: 30px;
}
.input-group input {
    padding: 10px 10px !important;
}

/*.slick-slide {
    width: 218px !important;
}*/



.home-newsletter input::placeholder{
    font-size: 17px;
    
}
.we-img::before {
   
    transform: rotate(180deg);
    z-index: -1;
}

/*section.road-section {
    display: none;
}*/
form.footer-form {
    width: 100%;
}
section#presale {
    padding: 80px 10px;
}
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 62px;
    left: 0px;
    right: 0px;
    z-index: 9999;
}
button.navbar-toggler {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%) !important;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;

}
.slick-slide {
    width: 308px !important;
}

.canvas-chart-box div{
    width: auto !important;
    top:80px;
}
.canvas-chart-box {
    left: 0px;
}

.btn-center{
    padding: 60px 0px;

}
.shadow{
     left: 0px; 
    top: -660px;
}
.pie-chart{
    width: auto;
}

.strate-section{
    text-align: center;
}

}



.table>:not(caption)>*>*{
  border:unset !important;
  background-color: unset !important;

 }
  tr th{
    text-transform: uppercase;
   
  }
  /* Apply spacing between table rows */
  tr {
    background: linear-gradient(102deg, #DB9125 7.82%, #E3A837 9.44%, #EFCA53 12.31%, #F8E368 15.04%, #FDF274 17.53%, #FFF778 19.56%, #FBED6F 22.54%, #F0D258 27.58%, #DEA732 34.05%, #D99A26 35.87%, #C78B23 39.94%, #B0781F 46.49%, #A7711E 50.59%, #AA741F 57.34%, #B57C20 63.08%, #C68B23 68.43%, #D99A26 72.47%, #F6CE69 88.98%);
    justify-content: space-between;
    color: black !important;
    padding: 16px !important;
    margin:10px 0px !important; /* Add margin at the bottom of each row */
    display: flex !important;
    border-radius:10px !important; 
    border:0px !important;/* Change row display to block to allow margin to take effect */
  }
   th{
    text-center: text-left !important;
    font-weight: 900 !important;
  }

  tbody tr{
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.10) 0.12%, rgba(255, 255, 255, 0.05) 103.14%) !important;
  }

  tbody td{
        color: #fff !important;
  }

   ::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #efd177; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

@keyframes highlight {
    0% {
        background-color: yellow;
    }
    100% {
        background-color: transparent;
    }
}

.highlight-row {
    animation: highlight 2s ease-in-out;
}

.navbar-brand img{
    width: 14%;
}
 span.header-logo{
    color: #FFF;
    text-align: center;
    font-family: "Chakra Petch", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    padding: 0px 10px;
}

 .blink-row {
    position: relative; /* Set position relative to allow absolute positioning of pseudo-elements */
    animation: blink-animation 1s steps(5, start) infinite, glow 1s steps(5, start) infinite; /* Blinking effect */
}

/* Keyframes for blinking effect */
@keyframes blink-animation {
    0%, 100% {
        visibility: visible; /* Show */
        border: 2px solid lime !important; /* Visible border */
    }
    50% {
        visibility: hidden; /* Hide in the middle of the blink */
        border: 2px solid transparent !important; /* Invisible border */
    }
}

/* Glow animation keyframes */
@keyframes glow {
    0% {
        background-position: 0% 50%; /* Start position */
    }
    100% {
        background-position: 100% 50%; /* End position */
    }
}