/* roadmap */
:root {
    --background-dark: #2d3548;
    --text-light: rgba(255, 255, 255, 0.6);
    --text-lighter: rgba(255, 255, 255, 0.9);
    --accent-color: #F67B50;
    --spacing-s: 16px;
    --spacing-m: 24px;
    --spacing-l: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    --width-container: 1200px;
  }
  
  .timeline {
    position: relative;
    max-width: var(--width-container);
    margin: 0 auto;
    padding: var(--spacing-xxl) 0;
  }
  
  .timeline::after {
    content: '';
    position: absolute;
    width: 8px;
  background: linear-gradient(190deg, #F67B50 0%, #0f4667 100%) !important;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    height: 0;
    transition: height 1.5s ease-out, opacity 1.5s ease-out;
  }
  
  .timeline-container {
    position: relative;
    width: 50%;
    padding: var(--spacing-l) var(--spacing-xl);
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    
  }
  
  .timeline-container.left {
    left: 0;
  }
  
  .timeline-container.right {
    left: 50%;
  }
  
  .timeline-container::before {
    content: "";
    position: absolute;
    top: 30px;
    width: 24px;
    height: 24px;
    background: var(--text-lighter);
    border: 4px solid var(--accent-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    z-index: 99999;
  }
  
  .content {
    padding: 48px;
    background-color: var(--text-lighter);
    position: relative;
    border-radius: var(--spacing-l);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-align: left;
    color: var(--background-dark);
    font-size: 1.25rem;
    box-shadow: inset 0px -5px 0px 0px rgba(0, 0, 0, 0.1);
  }
  
  .content:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
  }
  
     .icon {
            font-size: 32px;
            margin-right: var(--spacing-s);
  
            color: #F67B50; /* Fallback color */
        }
  
  
  
  
  a.content-link {
    text-decoration: none;
    color: inherit;
    display: block;
  }
  
  @media screen and (max-width: 600px) {
    .timeline::after {
      left: 31px;
    }
  
    .timeline-container {
      width: 100%;
      padding-left: 80px;
      padding-right: 40px;
      margin-bottom: var(--spacing-l);
    }
  
    .timeline-container.left::before, .timeline-container.right::before {
      left: 31px;
    }
  
    .timeline-container.right {
      left: 0%;
    }
  
    .timeline-container.left, .timeline-container.right {
      left: 0;
    }
  }
  
  .show {
    opacity: 1;
    transform: translateY(0);
  }
  
  .timeline.show-line::after {
    height: 100%;
    opacity: 1;
  }
  
  .timeline.hide-line::after {
    height: 0;
    opacity: 0;
  }
  
  
  
  .section66 {
    padding-top: 100px;
    padding-bottom: 0px;
    background-color: #ffffff;
  }
  
  
  
  .coolBeans {
    display: inline-block;
    border-radius: 3rem;
    background: linear-gradient(45deg, #8100dc, #6600af );
    font-size: 2.5rem;
    font-weight: 100;
    overflow: hidden;
    padding: 1rem 2.5rem;
    position: relative;
    text-decoration: none;
    transition: 0.2s transform ease-in-out;
    will-change: transform;
    z-index: 0;
    border: 5px solid #f39a35;
  }
  
  .coolBeans .content1 {
    display: flex;
    align-items: center;
    color: #fff;
  }
  
  .coolBeans img {
    width: 30px;
    margin-right: 10px;
  }
  
  .coolBeans::after {
    background: linear-gradient(45deg, #9500FF, #CD00FF);
    border-radius: 3rem;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-100%, 0) rotate(10deg);
    transform-origin: top left;
    transition: 0.2s transform ease-out;
    will-change: transform;
    z-index: -1;
  }
  
  .coolBeans:hover::after {
    transform: translate(0, 0);
  }
  
  .coolBeans:hover {
    color: #ffffff;
    transform: scale(1.05);
    will-change: transform;
    text-decoration: none;
  }
  
  .coolBeans1 {
    border:none;
    border-radius: 3rem;
    color: #fff;
    background: linear-gradient(90deg, #3a3a5c 0%, #28286c 100%);
  
    font-size: 1.8rem;
    font-weight: 100;
    overflow: hidden;
    padding: 0.2rem 5.8rem;
    /* width: 270px; */
    position: relative;
    text-decoration: none;
    transition: 0.2s transform ease-in-out;
    will-change: transform;
    z-index: 0;
    border: 5px solid #f39a35;
  }
  
  .coolBeans1::after {
    background: linear-gradient(90deg, #5A5A75 0%, #4545bd 100%);
    border-radius: 3rem;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-100%, 0) rotate(10deg);
    transform-origin: top left;
    transition: 0.2s transform ease-out;
    will-change: transform;
    z-index: -1;
    border: none !important;
  }
  
  .coolBeans1:hover::after {
    transform: translate(0, 0);
  }
  
  .coolBeans1:hover {
    color: #ffffff;
    transform: scale(1.05);
    will-change: transform;
    text-decoration: none;
  }
  
  
  
  .main-timeline a{
    text-decoration: none;
    color: #FBF28D;
    list-style: none;
  
  }
  .main-timeline a:hover{
   
    color: #FBF28D;
    
  }
  
  
  .main-timeline{ font-family: 'Barlow', sans-serif; }
  .main-timeline:after{
      content: '';
      display: block;
      clear: both;
  }
  .main-timeline .timeline{
      width: 50%;
      padding: 12px;
      margin: 0 5px 0 0;
      float: left;
      position: relative;
      z-index: 1;
  }
  .main-timeline .timeline-content{
      background: #00087A;
      min-height: 165px;
      padding: 20px 20px 60px 170px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
      display: block;
      position: relative;
  }
  .main-timeline .timeline-content:hover{ text-decoration: none; }
  .main-timeline .timeline-content:before,
  .main-timeline .timeline-content:after{
      content: "";
      background: #FBF28D;
      width: 80px;
      height: 60%;
      position: absolute;
      top: -10px;
      left: -10px;
      z-index: -1;
      animation: rd-anim 8s ease infinite;
  }
  
  @keyframes rd-anim{
    0%,100%{
      height: 30%;
    }
    50%{
      height: 95%;
    }
  }
  
  .main-timeline .timeline-content:after{
      top: auto;
      left: auto;
      bottom: -10px;
      right: -10px;
  }
  .main-timeline .timeline-year{
      color: #fff;
      background: #f24709;
  
  
      /* box-shadow: 1px 1px 32px 10px rgba(0,0,255,1) inset;
      -webkit-box-shadow: 1px 1px 32px 10px rgba(0,0,255,1) inset;
      -moz-box-shadow: 1px 1px 32px 10px rgba(0,0,255,1) inset; */
  
  
  background-image: url('/images/rd1.png');
  background-position: center;
  background-size: cover;
      font-size: 24px;
      font-weight: 800;
      text-align: center;
      line-height: 165px;
      width: 115px;
      box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.2);
      position: absolute;
      left: 20px;
      top: -12px;
      bottom: -12px;
  
      font-family: vin;
  }
  .main-timeline .timeline-year:before{
      content: "";
      background: linear-gradient(to top right, #6C433F 49%, transparent 50%);
      width: 12px;
      height: 12px;
      position: absolute;
      top: 0;
      right: -12px;
  }
  .main-timeline .timeline-icon{
      color: #f24709;
      font-size: 35px;
      line-height: 40px;
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 120px;
  }
  .main-timeline .title{
      color: #ffffff;
      font-size: 20px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 0 0 3px 0;
      font-family: ring;
  }
  .main-timeline .description{
      color: #555;
      font-size: 14px;
      letter-spacing: 1px;
      margin: 0;
  }
  .main-timeline .timeline:nth-child(even){
      float: right;
      margin: 0 0 0 5px;
  }
  .main-timeline .timeline:nth-child(even) .timeline-content{ padding: 20px 140px 60px 20px; }
  .main-timeline .timeline:nth-child(even) .timeline-content:before{
      left: auto;
      right: -10px;
  }
  .main-timeline .timeline:nth-child(even) .timeline-content:after{
      right: auto;
      left: -10px;
  }
  .main-timeline .timeline:nth-child(even) .timeline-year{
      box-shadow: -10px 5px 10px rgba(0, 0, 0, 0.3);
      left: auto;
      right: 20px;
  }
  .main-timeline .timeline:nth-child(even) .timeline-year:before{
      transform: rotateY(180deg);
      right: auto;
      left: -12px;
  }
  .main-timeline .timeline:nth-child(even) .timeline-icon{
      left: auto;
      right: 25%;
  }
  .main-timeline .timeline:nth-child(4n+2) .timeline-content:before,
  .main-timeline .timeline:nth-child(4n+2) .timeline-content:after
  {
      background: #FBF28D;
  }
  
  .main-timeline .timeline:nth-child(4n+2) .timeline-year{
    background-image: url('/images/rd1.png');
    background-position: center;
    background-size: cover;
  }
  
  .main-timeline .timeline:nth-child(4n+2) .timeline-icon,
  .main-timeline .timeline:nth-child(4n+2) .title{
      color: #ffffff;
  }
  .main-timeline .timeline:nth-child(4n+2) .timeline-year:before{
      background: linear-gradient(to top right, #af5807 49%, transparent 50%);
  }
  .main-timeline .timeline:nth-child(4n+3) .timeline-content:before,
  .main-timeline .timeline:nth-child(4n+3) .timeline-content:after
  {
    background: #FBF28D;
  
  }
  .main-timeline .timeline:nth-child(4n+3) .timeline-year{
    background-image: url('/images/rd1.png');
    background-position: center;
    background-size: cover;
  
  }
  
  .main-timeline .timeline:nth-child(4n+3) .timeline-icon,
  .main-timeline .timeline:nth-child(4n+3) .title{
      color: #ffffff;
  }
  .main-timeline .timeline:nth-child(4n+3) .timeline-year:before{
      background: linear-gradient(to top right, #041b2b 49%, transparent 50%);
  }
  .main-timeline .timeline:nth-child(4n+4) .timeline-content:before,
  .main-timeline .timeline:nth-child(4n+4) .timeline-content:after
  {
    background: #FBF28D;
  }
  
  .main-timeline .timeline:nth-child(4n+4) .timeline-year{
    background-image: url('/images/rd1.png');
    background-position: center;
    background-size: cover;
  }
  
  .main-timeline .timeline:nth-child(4n+4) .timeline-icon,
  .main-timeline .timeline:nth-child(4n+4) .title{
      color: #ffffff;
  }
  .main-timeline .timeline:nth-child(4n+4) .timeline-year:before{
      background: linear-gradient(to top right, #345614 49%, transparent 50%);
  }
  @media screen and (max-width:767px){
      .main-timeline .timeline,
      .main-timeline .timeline:nth-child(even){
          width: 100%;
          margin: 0 0 20px 0;
      }
      .content {
        padding: 22px 12px !important;
      
      }
  }
  @media screen and (max-width:479px){
      .main-timeline .timeline .timeline-content,
      .main-timeline .timeline:nth-child(even) .timeline-content{
          padding: 60px 20px;
      }
      .main-timeline .timeline .timeline-year,
      .main-timeline .timeline:nth-child(even) .timeline-year{
          height: 55px;
          line-height: 55px;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
          right: 10px;
          left: auto;
      }
      .main-timeline .timeline:nth-child(even) .timeline-year{
          top: -10px;
          bottom: auto;
          left: 10px;
      }
  }
  
  
  .rot-anim {
  
  
    animation: rot-anim 8s linear infinite;
  }
  
  @keyframes rot-anim {
    0% {
      transform: rotateZ(0deg);
      
    }
    100% {
      transform: rotateZ(360deg);
      
    }
  }
  
  
  
  .scribble{
    position: absolute;
    top: 30%;
    left: 1%;
    width: 250px !important;
    height: auto;
  }
  .scribble2{
    position: absolute;
    top: 40%;
    right: 4%;
    width: 250px !important;
    height: auto;
  }
  .scribble3{
    position: absolute;
    top:2%;
    left: 10%;
    width: 350px !important;
    height: auto;
  }
  .scribble4{
    position: absolute;
    top: 20%;
    right: 10%;
    width: 150px !important;
    height: auto;
  }
  .scribble5{
    position: absolute;
    top:40%;
    left: 10%;
    width: 150px !important;
    height: auto;
  }
  .scribble6{
    position: absolute;
    top: 59%;
    right: 10%;
    width: 150px !important;
    height: auto;
  }
  
  .scribble7{
    position: absolute;
    top:78%;
    left: 10%;
    width: 150px !important;
    height: auto;
  }
  
  .oper-move{
    animation: oper-move 3s ease infinite;
  }
  
  @keyframes oper-move{
    0%,100%{
      transform: translateY(0px);
    }
    50%{
      transform: translateY(20px);
  
    }
  
  }


  /* claim */
  .section110{
    height: 100vh;
    padding-top: 250px;
  }
  .claimbtn:hover {
    background-color: #FD9F13;
    transform: scale(1.1);
    color: white !important;
    text-shadow: 2px 2px 4px black;
  }
  
  .claimbtn {
    width: 380px;
    border-radius: 45px !important;
    background-color: #f8b045 !important;
    height: 50px;
    margin-top: 30px;
    margin-bottom: 10px;
    box-shadow: 3px 3px 6px black;
    transition: transform .3s ease-in-out !important;
  }

  @media only screen and (max-width: 480px) {

    .claimbtn {
        width: 350px;
        height: 60px;
      }
  }

  #claimTokens {
    display: none;
  }

  .btn1 {
    background-color: #FD9F13 !important;
    width: 190px;
    height: 55px;
    border: none !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 20px !important;
    vertical-align: middle;
    color: #000000 !important;
  }
  
  .btn1:hover {
    background-color: #e88c02 !important;
    color: #fff !important;
    text-shadow: 2px 2px 4px black;
  }