body {
      background-color: #0d0d0d;
      color: white;
      font-family: 'Segoe UI', sans-serif;
    }
      .navbar {
      backdrop-filter: blur(10px);
      background-color: rgba(0, 0, 0, 0.95);
    }
    .navbar-nav .nav-link {
      color: white;
      font-weight: 500;
      padding: 0.75rem 1rem;
      transition: color 0.3s ease;
    }
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link:hover {
      color: #00e676;
    }
    
    .btn-custom {
      background: linear-gradient(to right, #00e676, #00c853);
      border: none;
      color: #000;
      font-weight: 500;
    }
    .btn-custom:hover {
      background: linear-gradient(to right, #00c853, #00e676);
    }
    .card {
      background-color: #1c1c1c;
      border: none;
      border-radius: 16px;
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6);
      overflow: hidden;
      transition: transform 0.3s ease;
    }
    @media (max-width: 767.98px) {
      .scrolling-cards {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
      }
      .scrolling-cards .card {
        flex: 0 0 100%;
        scroll-snap-align: start;
      }
    }
    @media (min-width: 768px) {
      .scrolling-cards {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
      }
      .scrolling-cards .card {
        flex: 1 1 calc(33.333% - 1rem);
      }
    }
    .card:hover {
      transform: translateY(-5px);
    }
    .card img {
      width: 100%;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
    }
    .card-body {
      padding: 25px;
    }
    .card-title {
      font-weight: 600;
      font-size: 1.25rem;
      margin-bottom: 12px;
      color: white !important;
    }
    .card-body p {
      color: #ccc;
      font-size: 15px;
      margin-bottom: 10px;
    }
    .price {
      font-weight: bold;
      font-size: 16px;
      color: #fff;
    }
    .badge-tag {
      display: inline-block;
      background-color: #111;
      padding: 6px 14px;
      border-radius: 12px;
      color: white;
      font-size: 13px;
      font-weight: 500;
      margin: 10px 0;
    }
      .scrolling-cards::-webkit-scrollbar {
      display: none;
    }
    .nav-tabs {
      border: none;
      justify-content: center;
      margin-bottom: -1px;
      display: flex;
    }
    .text-muted{
        color: white !important;
    }
    .nav-tabs .nav-item {
      flex: 1;
    }
    .nav-tabs .nav-link {
      color: white;
      background-color: #1f1f1f;
      border: none;
      border-radius: 10px 10px 0 0;
      transition: all 0.3s ease;
      width: 100%;
    }
    .nav-tabs .nav-link.active {
      background-color: #00c853;
      color: #000;
      font-weight: bold;
    }
    .tab-content {
      background-color: #1e1e1e;
      border-radius: 0 0 10px 10px;
      padding: 40px 30px;
      transition: opacity 0.3s ease-in-out;
    }
    .accordion-item,
    .accordion-button,
    .accordion-body {
      background-color: #111 !important;
      color: white !important;
      border: none !important;
    }
    .accordion-button:not(.collapsed) {
      background-color: #1c1c1c !important;
    }
    .section {
      margin-top: 50px;
    }
    .footer-icons {
      display: flex;
      justify-content: center;
      gap: 60px;
      margin-top: 30px;
      flex-wrap: wrap;
    }
    .footer-icons .icon-text span {
      font-size: 14px;
    }
    .welcome-title {
      font-size: 2.4rem;
      font-weight: bold;
    }
    .welcome-subtitle {
      font-size: 1.1rem;
      color: #aaa;
    }

        @media (min-width: 768px) {
      .scrolling-cards {
        flex-wrap: wrap;
        overflow-x: hidden;
      }
    }
    .offcanvas-start {
      background-color: #000 !important;
      color: white;
      width: 50vw !important;
      transition: transform 0.3s ease-in-out;
    }
    .offcanvas .nav-link {
      color: white;
    }
    @keyframes flipIn {
  0% { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0); opacity: 1; }
}

.product-item {
  animation: flipIn 0.6s ease;
}