:root {
      --primary: #393185;
      --primary-hover: #2d2668;
      --text-light: rgba(255, 255, 255, 0.8);
      --spacing-lg: 6rem;
      --spacing-md: 4rem;
      --spacing-sm: 2rem;
      --border-radius: 20px;
      --transition: all 0.3s ease;
  }

  /* link font */

  @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 300;
      src: url(../font/s/poppins/v23/pxiByp8kv8JHgFVrLDz8Z1xlEA.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 400;
      src: url(../font/s/poppins/v23/pxiEyp8kv8JHgFVrJJfedw.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 500;
      src: url(../font/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1xlEA.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 600;
      src: url(../font/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z1xlEA.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 700;
      src: url(../font/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z1xlEA.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 800;
      src: url(../font/s/poppins/v23/pxiByp8kv8JHgFVrLDD4Z1xlEA.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      font-stretch: normal;
      src: url(../font/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 600;
      font-stretch: normal;
      src: url(../font/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4gaVc.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      font-stretch: normal;
      src: url(../font/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: url(../font/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aX8.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 500;
      src: url(../font/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Hw5aX8.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 600;
      src: url(../font/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu173w5aX8.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 700;
      src: url(../font/s/montserrat/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w5aX8.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-stretch: normal;
      src: url(../font/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiA8.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 500;
      font-stretch: normal;
      src: url(../font/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bVmUiA8.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-stretch: normal;
      src: url(../font/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmUiA8.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Nunito';
      font-style: normal;
      font-weight: 400;
      src: url(../font/s/nunito/v31/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3ig.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Nunito';
      font-style: normal;
      font-weight: 600;
      src: url(../font/s/nunito/v31/XRXI3I6Li01BKofiOc5wtlZ2di8HDGUmdTQ3ig.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Nunito';
      font-style: normal;
      font-weight: 700;
      src: url(../font/s/nunito/v31/XRXI3I6Li01BKofiOc5wtlZ2di8HDFwmdTQ3ig.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 300;
      src: url(../font/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfMZg.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url(../font/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 500;
      src: url(../font/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 600;
      src: url(../font/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 700;
      src: url(../font/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 800;
      src: url(../font/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZg.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 400;
      src: url(../font/s/manrope/v19/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FO_F.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 500;
      src: url(../font/s/manrope/v19/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk7PFO_F.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Manrope';
      font-style: normal;
      font-weight: 700;
      src: url(../font/s/manrope/v19/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4aE-_F.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Cairo';
      font-style: normal;
      font-weight: 200;
      font-display: swap;
      src: url(../font/s/cairo/v30/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hGA-W1Q.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Cairo';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url(../font/s/cairo/v30/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hL4-W1Q.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Cairo';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(../font/s/cairo/v30/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hOA-W1Q.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Cairo';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url(../font/s/cairo/v30/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hD45W1Q.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Cairo';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(../font/s/cairo/v30/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hAc5W1Q.ttf) format('truetype');
  }

  @font-face {
      font-family: 'Cairo';
      font-style: normal;
      font-weight: 900;
      font-display: swap;
      src: url(../font/s/cairo/v30/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hEk5W1Q.ttf) format('truetype');
  }





  /* Global Section Styles */
  section {
      padding: var(--spacing-lg) 0;
      position: relative;
      overflow: hidden;
  }

  .section-title {
      margin-bottom: var(--spacing-md);
  }

  /* Card Styles */
  .component-card,
  .feature-card,
  .benefit-card {
      background: #fff;
      border-radius: var(--border-radius);
      padding: var(--spacing-sm);
      transition: var(--transition);
      height: 100%;
      box-shadow: 0 10px 30px rgba(57, 49, 133, 0.1);
      border: 1px solid rgba(57, 49, 133, 0.1);
  }

  .component-card:hover,
  .feature-card:hover,
  .benefit-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(57, 49, 133, 0.15);
      border-color: var(--primary);
  }

  /* Icon Styling */
  .component-icon,
  .benefit-icon {
      width: 70px;
      height: 70px;
      background: var(--primary);
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      transition: var(--transition);
  }

  .component-icon svg,
  .benefit-icon svg {
      width: 35px;
      height: 35px;
      color: #fff;
  }

  /* Typography */
  h2.bo {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      line-height: 1.2;
  }

  p {
      font-size: 1.1rem;
      line-height: 1.8;
      color: #666;
  }

  /* Badge Styles */
  .fn {
      display: inline-block;
      padding: 0.75rem 2rem;
      background: rgba(57, 49, 133, 0.1);
      border-radius: 30px;
      color: var(--primary);
      font-weight: 600;
      margin-bottom: 1rem;
      letter-spacing: 0.5px;
  }

  /* Link Styles */
  .component-link {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      color: var(--primary);
      font-weight: 600;
      text-decoration: none;
      transition: var(--transition);
      margin-top: 1.5rem;
  }

  .component-link:hover {
      gap: 1.25rem;
      color: var(--primary-hover);
  }

  /* Grid and Layout */
  .grid {
      gap: 2rem;
  }

  section[style*="background: linear-gradient"] {
      position: relative;
  }

  section[style*="background: linear-gradient"]::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("/website/img/pattern.svg");
      opacity: 0.05;
      z-index: 1;
  }

  section[style*="background: linear-gradient"]>* {
      z-index: 2;
  }

  .w-100 {
      width: 100%;
  }

  .bnt-hv:hover {
      background: #393185;
      color: #fff;
      transition: 0.9s
  }

  /* Animation */
  .wow {
      animation-duration: 1s;
  }

  .fadeInUp {
      animation-name: fadeInUp;
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translate3d(0, 40px, 0);
      }

      to {
          opacity: 1;
          transform: translate3d(0, 0, 0);
      }
  }

  /* Responsive Adjustments */
  @media (max-width: 768px) {
      h2.bo {
          font-size: 2.25rem;
      }

      section {
          padding: var(--spacing-md) 0;
      }

      .grid {
          gap: 1.5rem;
      }
  }

  /* Bounce Arrow Styling */
  .bounce-arrow {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      color: #393185;
      font-size: 32px;
      cursor: pointer;
      z-index: 10;
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      animation: bounce 2s infinite;
  }

  .bounce-arrow:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateX(-50%) translateY(-5px);
  }

  @keyframes bounce {

      0%,
      20%,
      50%,
      80%,
      100% {
          transform: translateY(0) translateX(-50%);
      }

      40% {
          transform: translateY(-20px) translateX(-50%);
      }

      60% {
          transform: translateY(-10px) translateX(-50%);
      }
  }

  /* Additional Animation Classes */
  .animated {
      animation-duration: 2s;
      animation-fill-mode: both;
  }

  .infinite {
      animation-iteration-count: infinite;
  }

  .distribution-list {
      margin-top: 2rem;
  }

  .distribution-list .qb {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      padding: 0.5rem;
      transition: all 0.3s ease;
  }

  /* Our Companies Section */
  #companies {
      padding: 4rem 0;
      background: linear-gradient(180deg, #393185 0%, #2d2668 100%);
      color: white;
  }

  .companies-header {
      text-align: center;
      margin-bottom: 3rem;
      padding: 0 1rem;
  }

  .companies-header h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: white;
  }

  .companies-subtitle {
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 2rem;
  }

  .section-divider {
      width: 60px;
      height: 4px;
      background: rgba(255, 255, 255, 0.2);
      margin: 0 auto;
  }

  /* HRA ePay Section */
  .hra-epay {
      margin: 2em;
      padding: 2rem 0;
  }

  .epay-header {
      text-align: center;
      margin-bottom: 2rem;
  }

  .epay-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: center;
      padding: 0 1rem;
  }

  .epay-content {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
  }

  .location-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: rgba(57, 49, 133, 0.1);
      border-radius: 20px;
      color: var(--primary);
  }

  .epay-visual {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .epay-card {
      width: 100%;
      max-width: 400px;
      aspect-ratio: 16/9;
      background: rgba(62, 125, 255, 0.1);
      border-radius: 12px;
      padding: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .epay-logo {
      width: 100%;
      height: auto;
      max-height: 200px;
      object-fit: contain;
  }

  .social-links {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
  }

  .social-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: rgba(57, 49, 133, 0.1);
      border-radius: 20px;
      color: var(--primary);
      text-decoration: none;
      transition: all 0.3s ease;
  }

  .social-link:hover {
      background: var(--primary);
      color: white;
  }

  /* Responsive Adjustments for ePay Section */
  @media (max-width: 768px) {
      .epay-grid {
          grid-template-columns: 1fr;
          text-align: center;
      }

      .location-badge,
      .social-links {
          justify-content: center;
      }

      .companies-header h1 {
          font-size: 2rem;
      }

      .companies-subtitle {
          font-size: 1rem;
      }

      .epay-card {
          max-width: 100%;
      }

      .primary-btn {
          margin: 1rem auto !important;
      }
  }

  /* Why HRA Coin Section */
  #features {
      padding: 6rem 0;
      background: linear-gradient(180deg, rgba(57, 49, 133, 0.05) 0%, rgba(57, 49, 133, 0) 100%);
  }

  #features .wow {
      animation-duration: 1s;
  }

  #features .section-title {
      text-align: center;
      margin-bottom: 4rem;
  }

  #features .fn {
      display: inline-block;
      padding: 0.5rem 1.5rem;
      background: rgba(57, 49, 133, 0.1);
      border-radius: 30px;
      color: var(--primary);
      font-weight: 500;
      margin-bottom: 1rem;
  }

  #features .bo {
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
      background: linear-gradient(45deg, #2d2668, #393185);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  #features .feature-card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 2rem;
      transition: all 0.3s ease;
      height: 100%;
      border: 1px solid rgba(57, 49, 133, 0.1);
  }

  #features .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(57, 49, 133, 0.1);
      border-color: var(--primary);
  }

  #features .feature-card h3 {
      color: var(--primary);
      font-size: 1.5rem;
      margin-bottom: 1rem;
  }

  #features .feature-card p {
      color: #666;
      line-height: 1.6;
  }

  /* Our Solutions Section */
  #components {
      padding: 6rem 0;
      background: linear-gradient(180deg, #393185 0%, #2d2668 100%);
  }

  #components .section-title {
      text-align: center;
      margin-bottom: 4rem;
  }

  #components .fn {
      display: inline-block;
      padding: 0.5rem 1.5rem;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 30px;
      color: white;
      font-weight: 500;
      margin-bottom: 1rem;
  }

  #components .bo {
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
      color: white;
  }

  #components .component-card {
      background: white;
      border-radius: 20px;
      padding: 2rem;
      transition: all 0.3s ease;
      height: 100%;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      margin: 0.5rem;
  }

  #components .component-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(62, 125, 255, 0.1);
  }

  #components .component-icon {
      width: 60px;
      height: 60px;
      background: var(--primary);
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
  }

  #components .component-icon svg {
      width: 30px;
      height: 30px;
      color: white;
  }

  #components .component-content {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
  }

  #components .component-content h3 {
      color: var(--primary);
      font-size: 1.5rem;
      margin-bottom: 1rem;
  }

  #components .component-content p {
      color: #666;
      line-height: 1.6;
      margin-bottom: 1.5rem;
  }

  #components .component-link {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--primary);
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
  }

  #components .component-link:hover {
      gap: 1rem;
  }

  @media (max-width: 768px) {

      #features .bo,
      #components .bo {
          font-size: 2rem;
      }

      #features .feature-card,
      #components .component-card {
          margin-bottom: 2rem;
      }

      #features,
      #components {
          padding: 4rem 0;
      }

      .component-grid {
          grid-template-columns: 1fr;
          gap: 2rem;
      }
  }

  /* Why Choose HRA Section */
  #why-choose {
      padding: 6rem 0;
      background: linear-gradient(180deg, rgba(62, 125, 255, 0.02) 0%, rgba(62, 125, 255, 0.08) 100%);
      position: relative;
      overflow: hidden;
  }

  #why-choose::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("/website/img/pattern.svg");
      background-repeat: repeat;
      opacity: 0.05;
      z-index: 0;
  }

  #why-choose .section-content {
      position: relative;
      z-index: 1;
  }

  #why-choose .fn {
      display: inline-block;
      padding: 0.5rem 1.5rem;
      background: rgba(62, 125, 255, 0.1);
      border-radius: 30px;
      color: var(--primary);
      font-weight: 500;
      margin-bottom: 1rem;
  }

  #why-choose .bo {
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
      background: linear-gradient(45deg, #2d2668, #393185);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  #why-choose .benefits-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      margin-top: 3rem;
  }

  #why-choose .benefit-card {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 20px;
      padding: 2rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(62, 125, 255, 0.1);
  }

  #why-choose .benefit-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), #2d2668);
      transform: scaleX(0);
      transition: transform 0.3s ease;
      transform-origin: left;
  }

  #why-choose .benefit-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(62, 125, 255, 0.1);
  }

  #why-choose .benefit-card:hover::before {
      transform: scaleX(1);
  }

  #why-choose .benefit-icon {
      width: 60px;
      height: 60px;
      background: var(--primary);
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      transition: all 0.3s ease;
  }

  #why-choose .benefit-card:hover .benefit-icon {
      transform: scale(1.1) rotate(5deg);
  }

  #why-choose .benefit-icon svg {
      width: 30px;
      height: 30px;
      color: #fff;
  }

  .link-adress {
      color: -webkit-link !important;
      text-decoration: underline !important;
      font-weight: 500 !important;
  }

  #why-choose .benefit-title {
      font-size: 1.25rem;
      color: #2d2668;
      margin-bottom: 1rem;
      font-weight: 600;
  }

  #why-choose .benefit-description {
      color: #666;
      line-height: 1.6;
      font-size: 0.95rem;
  }

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

  @media (max-width: 768px) {
      #why-choose {
          padding: 4rem 0;
      }

      #why-choose .bo {
          font-size: 2rem;
      }

      #why-choose .benefits-grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
      }

      #why-choose .benefit-card {
          padding: 1.5rem;
      }
  }

  /* Underline Button Style */
  .text-decoration-underline {
      background-color: #393185;
      color: #fff !important;
      padding: 8px 16px;
      border-radius: 20px;
      text-decoration: none !important;
      transition: all 0.3s ease;
      display: inline-block;
      margin-left: 10px;
  }

  .text-decoration-underline:hover {
      background-color: #2d2668;
      transform: translateY(-2px);
  }

  /* Gradient Button Style */
  .oe.of.zg.wg {
      display: inline-flex;
      align-items: center;
      padding: 1rem 2rem;
      background: linear-gradient(90deg, #376DF9, #393185);
      color: #fff;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      margin-top: 3rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      animation: fadeIn 1s ease-out 0.6s;
      opacity: 0;
      animation-fill-mode: forwards;
  }

  .pa.li.pi.ui.yi.vl.bo {
      font-size: 3.5rem;
      font-weight: 700;
      background: linear-gradient(90deg, #376DF9, #393185);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 2rem;
      line-height: 1.2;
  }

  .bottom:after {
      content: '';
      position: absolute;
      width: 60%;
      height: 3px;
      background: linear-gradient(90deg, #376DF9 0%, #2d2668 100%);
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 2px;
  }

  .roadmap-section {
      padding: 4rem 0;
      background: #f8f8f8;
      color: #333;
  }

  .roadmap-section .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
  }

  .roadmap-header,
  .roadmap-footer {
      text-align: center;
      margin-bottom: 2rem;
  }

  .roadmap-header .badge {
      display: inline-block;
      padding: 0.5rem 1rem;
      background: #393185;
      color: #fff;
      border-radius: 30px;
      font-weight: 600;
      margin-bottom: 1rem;
  }

  .roadmap-header h2 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: #393185;
  }

  .roadmap-header .intro {
      font-size: 1.2rem;
      font-weight: bold;
  }

  .roadmap-header .description {
      font-size: 1rem;
      margin-top: 0.5rem;
  }

  .timeline {
      position: relative;
      padding: 2rem 0;
      max-width: 900px;
      margin: 0 auto;
  }

  .timeline::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #ddd;
      transform: translateX(-50%);
  }

  .timeline-item {
      position: relative;
      width: 50%;
      padding: 1.5rem 2rem;
      box-sizing: border-box;
  }

  /* Alternate timeline items */
  .timeline-item:nth-child(odd) {
      left: 0;
      text-align: right;
  }

  .timeline-item:nth-child(even) {
      left: 50%;
      text-align: left;
  }

  .timeline-item::before {
      content: '';
      position: absolute;
      top: 1.5rem;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #393185;
      border: 4px solid #fff;
      box-shadow: 0 0 0 2px #393185;
  }

  .timeline-item:nth-child(odd)::before {
      right: -10px;
  }

  .timeline-item:nth-child(even)::before {
      left: -10px;
  }

  .timeline-content h3 {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
      color: #393185;
  }

  .timeline-content ul {
      list-style: none;
      padding: 0;
      font-size: 0.95rem;
      line-height: 1.6;
  }

  .timeline-content li {
      margin-bottom: 0.5rem;
  }

  .roadmap-footer h3 {
      font-size: 2rem;
      color: #393185;
      margin-bottom: 1rem;
  }

  .roadmap-footer p {
      font-size: 1rem;
      line-height: 1.6;
  }

  @media (max-width: 768px) {
      .timeline {
          padding: 1rem 0;
      }

      .timeline::before {
          left: 8px;
      }

      .timeline-item {
          width: 100%;
          padding-left: 2.5rem;
          margin-bottom: 2rem;
          text-align: left !important;
          left: 0 !important;
      }

      .timeline-item::before {
          left: 0;
      }
  }