header nav {
        background-color: transparent;
      }


      .cards {
        perspective: 1000px;
      }

      .card {
        border-radius: 10px;
        position: relative;
        transform-style: preserve-3d;
        will-change: transform;
        transition: transform 0.5s;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
      }

      .card:hover {
        transform: translateZ(20px) rotateX(12deg) rotateY(12deg);
      }

      @keyframes spin-slow {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      .circle-spin {
        animation: spin-slow 12s linear infinite;
      }

      .circle-spin-slow {
        animation: spin-slow 16s linear infinite;
      }

      .circle-spin-fast {
        animation: spin-slow 8s linear infinite;
      }



      .challenge-btn {
        border-radius: 9999px;
        padding: 0.5rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.4s ease;
        background-color: transparent;
      }

      .challenge-btn:hover {
        color: #111a26;
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
      }

      .challenge-btn i {
        transition: transform 0.3s ease;
      }

      #news-slider {
        transition: transform 0.7s ease-in-out;
      }

      input,
      select {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
      }




      /* Scrollbar design for sidebar */
      .scrollbar-thin {
        scrollbar-width: thin;
        scrollbar-color: #6787b7 #3c506a;
      }

      .scrollbar-thumb-accent-dark {
        background-color: #6787b7;
      }

      .scrollbar-track-secondary-bg {
        background-color: #3c506a;

      }

      .hide-scrollbar::-webkit-scrollbar {
        display: none;
      }

      .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      .carousel-card {
        min-width: 80%;
        height: 400px !important;
        margin-right: 1rem;
        background-color: #1f1f2a;
        /* dark-card */
        color: #ffffff;
        /* white text */
        border-radius: 1.5rem;
        /* rounded-3xl */
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        position: relative;
        transition: all 0.5s ease-in-out;
        filter: blur(2px) scale(0.9);
        opacity: 0.6;
        position: relative !important;
        border: 1px solid #1d8ed0;
        box-shadow: 0 4px 10px rgba(60, 80, 106, 0.5) !important;
      }

      .carousel-card div {
        position: absolute !important;
        bottom: 0 !important;
      }

      .carousel-card div p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        /* Sirf 3 line dikhayega */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }


      @media (min-width: 768px) {
        .carousel-card {
          min-width: 40%;
        }
      }

      @media (min-width: 1024px) {
        .carousel-card {
          min-width: 30%;
        }
      }

      .carousel-card.active {
        margin-top: 12px;
        transition: all ease 0.5s !important;
        filter: blur(0) scale(1);
        opacity: 1;
        background-color: #222933;
        /* secondary-bg highlight */
      }

      .card-img {
        width: 100%;
        height: 140px !important;
        /* h-60 */
        object-fit: cover;
        transition: transform 0.5s;
      }

      .carousel-card:hover .card-img {
        transform: scale(1.05);
      }

      .badge {
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: white !important;
        /* text-accent blue */
        background-color: #38B6FC;
      }

      .card-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-top: 0.5rem;
        color: #ffffff;
        /* white */
      }

      .card-text {
        margin-top: 0.75rem;
        font-size: 0.9rem;
        color: #c1c1c1;
        /* muted gray text */
      }

      .btn-link {
        display: inline-block;
        margin-top: 1.25rem;
        padding: 0.5rem 1.25rem;
        font-size: 0.9rem;
        border-radius: 0.5rem;
        color: #ffffff;
        /* white text */
        transition: background-color 0.3s;
        background-color: #1d8ed0;
      }

      .btn-link:hover {
        background-color: #1d8ed0;
        /* darker blue hover */
      }

      .loader {
        border-top-color: #facc15;
        /* yellow accent */
      }

      body.loading #content {
        display: none;
      }


      /* Ensure smooth scrolling and snap behavior */
      #appleCarousel {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        /* Improves scrolling on mobile */
      }

      /* Hide scrollbar consistently across browsers */
      .hide-scrollbar::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Edge */
      }

      .hide-scrollbar {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
      }

      /* Active card styling for better UX */
      .carousel-card.active {
        transform: scale(1.05);
        /* Slightly enlarge active card */
        transition: transform 0.3s ease;
      }

      .circle-spin {
        animation: spin 4s linear infinite;
      }

      .circle-spin-slow {
        animation: spin 6s linear infinite;
      }

      .circle-spin-fast {
        animation: spin 3s linear infinite;
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }


      @keyframes bounce-slow {

        0%,
        100% {
          transform: translateY(0) scale(1);
        }

        50% {
          transform: translateY(-15px) scale(1.05);
        }
      }

      .animate-bounce-slow {
        animation: bounce-slow 2s infinite ease-in-out;
      }

      @keyframes fadeIn {
        0% {
          opacity: 0;
          transform: translateY(10px);
        }

        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .animate-fadeIn {
        animation: fadeIn 1.2s ease-in-out forwards;
      }


      @font-face {
        font-family: "Gotham Book";
        src: url("/fonts/Gotham Book/Gotham Book.otf") format("opentype");
        font-weight: 400;
        font-style: normal;
      }

      .overlay-text {
        font-family: 'Gotham Book', sans-serif !important;
        font-weight: 600;
        word-spacing: 2px;
      }

      .text-secondary-bg {
        color: white !important;
      }