body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
  
  /* Loader start */
    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff; /* background color while loading */
      z-index: 9999;
    }

    /* Canvas should resize responsively */
    #loader {
      width: 150px;
      height: 150px;
    }

    @media (max-width: 600px) {
      #loader {
        width: 120px;
        height: 120px;
      }
    }
    /* Loader fade out */
    .fade-out {
      animation: fadeOut 1s ease-in-out forwards;
    }

    @keyframes fadeOut {
      0% { opacity: 1; }
      100% { opacity: 0; visibility: hidden; }
    }

    

    @keyframes fadeSlideIn {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ===== Top Bar ===== */
    .top-bar {
      position:fixed; top:0; left:0; width:100%;
      height: var(--topbar-h);
      background: linear-gradient(90deg, #0096FF, #40E0D0);
      color:#fff;
      display:flex; align-items:center; justify-content:center;
      padding: 0 12px;
      z-index:1100;
      font-size:14px;
    }

    .top-bar span {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .social-icons {
      display: flex;
      gap: 17px;
      margin-left: 15px;
    }

    .social-icons a {
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      transition: opacity 0.3s;
    }

    .social-icons a:hover {
      opacity: 0.6;
      
    }

    /* ===== Apply Button ===== */
    .apply-btn {
      margin-left: auto;
      background: #fff;
      color: #0096FF;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.3s, color 0.3s;
      font-weight: bold;
      white-space: nowrap;
    }

    .apply-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  transform: skewX(-25deg);
  animation: shine 2.5s infinite;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

    .apply-btn i {
      color: #0096FF;
    }

    .apply-btn:hover {
      background: #f1f1f1;
    }

    /* ===== Desktop View (Default) ===== */
    .scroll-content {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: nowrap;
    }

    /* ===== Mobile Styling ===== */
    @media (max-width: 1082px) {
      .top-bar {
        justify-content: flex-start;
        padding-right: 100px; /* leave space for Apply button */
      }

      .scroll-content {
        display: flex;
        align-items: center;
        gap: 20px;
        white-space: nowrap;
        animation: marquee 22s linear infinite;
        
      }

      .scroll-content:hover {
        animation-play-state: paused;
        cursor: pointer;

      }

      @keyframes marquee {
        from { transform: translateX(20%); }
        to { transform: translateX(-100%); }
      }

      .apply-btn {
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
        border-radius: 10px 0px 0px 10px;
        padding: 10px 14px;
        
      }

      .apply-btn::before {
  content: "";
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.2) 0%
  );
  transform: skewX(-25deg);
  animation: shine 2.5s infinite;
}


      
    }