html,

    body {

      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 80vh;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* object-fit: contain; */
    }
  
    section {
      padding-bottom: 50px;
    }

    .nav-link {
      font-size: 1.2rem;
    }

    .fas {
      font-size: 22px;
    }

    body {
      background-color: #0B1215;

    }

    .heading {
      margin-bottom: 30px;
    }

    .heading h3 {
      font-size: 2rem;
      color: #ececec;
      font-optical-sizing: auto;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .heading h6 {
      font-size: 1rem;
      opacity: .8;
      color: #fff;
    }

    .navbar {
      padding: 10px;
    }

    .navbar {
      position: sticky;
      top: 0;
      z-index: 1000;
      /* Ensure it stays on top of other content */
    }

    .c {
      background: #ffffff00;
    }

    .top-ratting {
      background-color: rgba(0, 0, 0, 0.607);
      height: 70px;
      border-radius: 10px;
    }
    
    .heading {
      font-size: 2rem;
      font-family: "Proza Libre", sans-serif !important;
    }
     .heading {
      text-transform: capitalize;
      background: -webkit-linear-gradient(#eee, #f74f06);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
     .scrollable-container {

        padding: 15px;
      }

      .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
        justify-items: center;
      }

      .product-card {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-color: #0B1215;
        max-width: 300px;
        /* Set a maximum width for the card */
        width: 100%;
        border-bottom: 1px solid #fff;
      }

      .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }

      .product-card img {
        width: 100%;
        height: auto;
        border-bottom: 1px solid #ddd;
        transition: transform 0.3s ease;
      }

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

      .stock-out-msg {
        position: absolute;
        top: 10px;
        left: 10px;
        background-color: #f74f06;
        color: white;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: bold;
        z-index: 10;
        border-radius: 3px;
      }

      .product-details {
        text-align: center;
        margin-top: 15px;
      }

      .product-name {
        font-size: 18px;
        font-weight: bold;
        color: #d2d2d2;
        text-transform: capitalize;
        margin-bottom: 10px;
      }

      .price {
        font-size: 16px;
        color: #f74f06;
        font-weight: bold;
      }



      /* Ensure links have no underline */
      a {
        text-decoration: none;
        color: inherit;
      }

      .product-name {
        font-size: 22px;
        line-height: .5;
      }

      .price {
        font-size: 16px;
        line-height: 1.2;
      }

      /* Media query for mobile */
      @media (max-width: 768px) {
        .product-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .product-name {
          font-size: 14px;
        }

        .price {
          font-size: 12px;
        }

        .stock-out-msg {
          font-size: 8px;
        }

        .heading {
          font-size: 1.4rem;
        }
      }
         .category-cardx {
        position: relative;
        width: 100%;
        height: 450px;
        /* background-color: #fff; */
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
      }

      .category-cardx:hover {
        transform: scale(1.05);
      }

      .category-cardx img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-bottom: 1px solid #ddd;
        opacity: 1;
      }

      .category-card-contentx {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;

      }

      .category-cardx h2 {
        margin: 0;
        font-size: 2rem;
        font-weight: bold;
        color: #ffffffc6;
      }

      .category-cardx p {
        font-size: 1em;
        color: #666;
        margin-top: 10px;
      }

      .t {
        font-optical-sizing: auto;
        font-weight: weight;
        font-style: normal;

      }

      .st {
        -webkit-mask-image: linear-gradient(to bottom, black, transparent);
        mask-image: linear-gradient(to bottom, black, transparent);

      }