.bg-hero {
      background-image: url('../picture/techBg.png');
      background-size: cover;
      min-height: 100vh;
      width: 100%;
      background-position: center center;
    }

    .background-image {
      background-image: url('../picture/Clip-path-group.png');
      background-size: cover;
      height: 100vh;
      width: 100%;
      background-position: center center;
    }


    /* .inter-text {
      font-family: "Inter", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
    } */

    .primary-color {
      background-color: #F16529;
    }

    .second-color {
      background-color: #041021;
    }

    .text-color {
      color: #F16529;
    }

    .secondtext-color {

      color: white;
    }

    .color {
      background-color: white;
      color: #1A1A1A;
    }

    header {
      transition: all 0.3s ease;
    }



    .letter {
      display: inline-block;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeUp .4s forwards;
    }

    #animated-text {
      width: 100%;
      text-align: center;
      line-height: 1.4;
    }

    @keyframes fadeUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #helpBtn::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -75%;
      width: 50%;
      height: 200%;
      background: rgba(255, 255, 255, 0.45);
      transform: rotate(25deg);
      transition: 0.6s;
      animation: shineMove 2.8s infinite;
    }

    @keyframes shineMove {
      0% {
        left: -80%;
      }

      100% {
        left: 140%;
      }
    }




    /* Button hidden initially */
    .learn-btn {
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
    }

    /* Desktop hover */
    .service-card:hover .learn-btn {
      opacity: 1;
      pointer-events: auto;
    }

    /* Mobile active state */
    .service-card.active .learn-btn {
      opacity: 1;
      pointer-events: auto;
    }

    /* Button design FIX */
    .learn-more-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: white;
      color: black;
      padding: 8px 16px;
      border-radius: 9999px;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* Arrow style */
    .learn-more-btn .arrow {
      width: 28px;
      height: 28px;
      background: #F16529;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }






    .button {
      position: relative;
      display: inline-block;
      padding: 12px 30px;
      font-size: 16px;
      background: transparent;
      cursor: pointer;
      overflow: hidden;
      transition: color 0.3s ease;
    }


    .button--hyperion::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #cac8c8;
      transform: scaleX(0);
      transform-origin: 100% 50%;
      transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
      z-index: 0;
    }

    /* Text stays on top */
    .button--hyperion span {
      position: relative;
      z-index: 1;
      display: inline-block;
      transition: color 0.3s ease;
    }

    /* Hover animation */
    .button--hyperion:hover::before {
      transform: scaleX(1);
    }

    .button--hyperion:hover span {
      color: #ec0101;
    }






    .logo-track {
      width: max-content;
      animation: sponsorSlide 25s linear infinite;
    }

    .logo-track:hover {
      animation-play-state: paused;
    }

    @keyframes sponsorSlide {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .logo-item {
      min-width: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .sponsor-logo {
      width: 120px;
      height: 60px;
      object-fit: contain;
      cursor: pointer;
      transition: all .4s ease;

      filter: brightness(0) invert(1);
      opacity: .9;
    }

    /* CLICK ACTIVE */
    .sponsor-logo.active {
      filter: none;
      opacity: 1;
      transform: scale(1.08);
    }

    /* hover */
    @media (hover: hover) and (pointer: fine) {
      .sponsor-logo:hover {
        transform: scale(1.05);
        filter: none;
        opacity: 1;
      }
    }


    /* floating image in global section */

    .floating-client {
      animation: floatClient 4s ease-in-out infinite;
    }

    .delay-1 {
      animation-delay: .5s;
    }

    .delay-2 {
      animation-delay: 1s;
    }

    .delay-3 {
      animation-delay: 1.5s;
    }

    .delay-4 {
      animation-delay: 2s;
    }

    .delay-5 {
      animation-delay: 2.5s;
    }

    @keyframes floatClient {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-12px);
      }

      100% {
        transform: translateY(0px);
      }
    }






   



    /* Mobile behavior */
    @media (max-width: 1023px) {
      .learn-btn {
        opacity: 0;
        pointer-events: none;
      }
    }


    /* sponsor section   responsive */

    /* Tablet */
    @media(max-width:1024px) {

      .logo-item {
        min-width: 110px;
      }

      .sponsor-logo {
        width: 95px;
        height: 50px;
      }

      .logo-track {
        animation-duration: 20s;
      }
    }

    /* Mobile */
    @media(max-width:640px) {

      .logo-item {
        min-width: 90px;
      }

      .sponsor-logo {
        width: 75px;
        height: 40px;
      }

      .logo-track {
        animation-duration: 15s;
      }
    }

    /* Mobile optimize  global section image*/
    @media(max-width:768px) {
      .floating-client {
        animation-duration: 3s;
      }
    }