body{
    font-family: "Noto Sans HK", sans-serif !important;
  }
  a{
    text-decoration:none;
  }
  .bg-theme-danger {
    background-color: #be1212 !important;
}
.text-theme-danger{
    color:#be1212 !important;
}
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-17 { font-size: 17px; }
.fs-18 { font-size: 18px; }
.fs-19 { font-size: 19px; }
.fs-20 { font-size: 20px; }
.fs-21 { font-size: 21px; }
.fs-22 { font-size: 22px; }
.fs-23 { font-size: 23px; }
.fs-24 { font-size: 24px; }
.fs-25 { font-size: 25px; }
.fs-26 { font-size: 26px; }
.fs-27 { font-size: 27px; }
.fs-28 { font-size: 28px; }
.fs-29 { font-size: 29px; }
.fs-30 { font-size: 30px; }
.fs-31 { font-size: 31px; }
.fs-32 { font-size: 32px; }
.py-top-12{
  padding-top:12px;
  padding-bottom:12px;
}
.bg-nav{
  background-image: url('assets/img/banner/bg-nav.jpg');
    background-repeat: no-repeat;
    background-position: top center;
}
.bg-deals{
  background-image: url('assets/img/banner/deals-bg.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.w-new-search{
    border: 0;
    border-radius: 0;
    height: 43px !important;
}
.w-new-search-btn{
  border: 0 !important;
    border-radius: 0 !important;
    background-color: #be1212 !important;
    height: 43px !important;
    width: 43px !important;
    color:#fff;
}
.w-new-search-btn:hover{
  color:#fff !important;
}

@media (max-width: 999.98px) {
  .bg-nav{
    height: 80px;
}
 }

 .cat-circle{
    background: #F8F8F8;
    border-radius: 50% 50% 50% 50%;
    width: 150px;
    margin: auto;
    height: 150px;
    object-fit: cover;
 }
 .custom-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.custom-scroll::-webkit-scrollbar {
  display: none; /* Safari & Chrome */
}
@media (max-width: 768px) {
  .ptb-100{
  padding-top:60px !important;
  padding-bottom:60px !important;
}
  .custom-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .custom-scroll::-webkit-scrollbar {
    display: none;
  }
  .cat-circle{
    background: #F8F8F8;
    border-radius: 50% 50% 50% 50%;
    width: 120px;
    margin: auto;
    height: 120px;
    object-fit: cover;
 }
}
.inline-count {
  font-size: 12px;
  vertical-align: top;
  margin-left: 4px; /* spacing from text */
  color: #000; /* or any text color you want */
}

@keyframes shake-horizontal {
  0% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* Only triggers on hover of the entire <a> */
.shake-hover:hover .cat-circle {
  animation: shake-horizontal 1.2s ease-out;
}
.shake-hover:hover .cat-card-top {
  animation: shake-horizontal 1.2s ease-out;
}
.shake-hover h2:hover {
  color: var(--bs-danger);
}
.fw-300{
  font-weight:300;
}

.about-image {
  position: relative;
  min-height: 450px;
  background: url('assets/img/banner/about-bg.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.about-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Darken top edge */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 30%),
    /* Darken left side */
    linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0) 60%),
    /* Vignette for all edges */
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0.95) 100%);
  transition: opacity 0.6s ease;
}



.about-image:hover::before {
  opacity: 0.92; /* slightly less dark on hover */
}

/* Ensure child elements are on top */
.about-image > * {
  position: relative;
  z-index: 2;
}


/* Small image with same corner dark effect */
.inner-image {
    width: 250px;
    height: 183px;
    background-image: url('assets/img/banner/about-bg-uper.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: absolute;
    bottom: 0px;
    right: 41px;
    overflow: hidden;
}

/* Apply same corner darkness to small image */
.inner-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0) 100%
  );
  transition: opacity 0.6s ease;
  z-index: 1;
  border-radius: 8px;
}

.inner-image:hover::before {
  opacity: 0.4;
}

.inner-image > * {
  position: relative;
  z-index: 2;
}
.ptb-100{
  padding-top:100px;
  padding-bottom:100px;
}
.about-btn {
  background: linear-gradient(90deg, #be1212 0%, #ff4e4e 100%);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  border: none;
  padding: 16px 24px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

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

.about-btn:hover {
  background: linear-gradient(135deg, #c82333, #f26565); /* lighter & vibrant hover effect */
}

.about-btn:hover i {
  transform: translateX(6px);
}

.secondary-color{
  color:#00E7E6;
}
.bg-secondary-3{
  background-color:#1B1B1B;
}

.section-title {
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        .product-card {
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 10px;
        }



        .progress-bar-wrapper {
            margin-top: 20px;
        }

        .product-price {
            font-size: 28px;
            margin-top: 10px;
        }

        .progress-track {
            height: 25px;
        }

        .special_gradient_btn {
            background: linear-gradient(90deg, #be1212 0%, #ff4e4e 100%);
            color: #fff;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .special_gradient_btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
            text-decoration: none;
            color: #f8fcff;
        }

        .progress-bar-red {
            background: linear-gradient(to right, #be1212, #ff4e4e);
        }

        .progress {
            background-color: transparent;
            margin-top: 10px;
            height: 10px;
            border-radius: 20px;
        }

        .progress-bar-filled {
            background: linear-gradient(to right, #be1212, #ff4e4e);
            height: 100%;
            border-radius: 20px;
            width: 0;
        }

        .progress-skill-bar {
            margin-bottom: 20px;
        }


.nav-pills .nav-link {
            border-radius: 0;
            font-weight: medium;
            padding: 8px 16px;
            color: #000;
            background-color: #fff;
        }

        .nav-pills .nav-link.active {
            color: #fff !important;
            background-color: #dc3545;
        }
        /* Style for the custom left and right arrows */
        /* Style for the custom left and right arrows */

        .product-card {
            margin: 5px;
            /* Adds margin to all sides */
        }


.card-secondary{
   background-color:#1B1B1B;
    padding: 20px 20px 20px 20px;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-radius: 5px 5px 5px 5px;
}
.card-secondary-2{
  background-color:transparent;
    padding: 20px 20px 20px 20px;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-radius: 5px 5px 5px 5px;
}
.color-light-success{
  color:#28FFBF;
}
.bg-light-success{
    background-color:#28FFBF !important;
}
.border-left-light-success{
  border-left:#28FFBF solid 2px;
}
.icon-box-dark{
  color: #28FFBF;
    background-color: #1B1B1B;
    width: 80px;
    height:80px;
}
    .icon-box{
    color: #000;
    background-color: #28FFBF;
    width: 80px;
    height:80px;
    }
    @keyframes bounce {
    0%   { transform: translateY(0); }
    20%  { transform: translateY(-6px); }
    40%  { transform: translateY(0); }
    60%  { transform: translateY(-4px); }
    80%  { transform: translateY(0); }
    100% { transform: translateY(-2px); }
    }

    .icon-box {
    transition: transform 0.3s ease;
    }

    .icon-box:hover {
    animation: bounce 1.26s ease-out;
    }
    .icon-box-dark:hover {
    animation: bounce 1.26s ease-out;
    }



/* Hide navigation buttons initially */
.pro-slider {
    position: absolute;
    top: 30%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Prevents interference with clicks */
    transition: opacity 0.3s ease-in-out;
    background: #818181ab !important;
    color: #fff;
    border-radius: 50%;
}

/* Style for left & right buttons */
.pro-slider .owl-prev,
.pro-slider .owl-next {
    border: none;
    background: #6C757D  !important;
    color: #fff;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    pointer-events: auto; /* Enable button clicks */
}


/* Adjust positioning */
.pro-slider .owl-prev {
    position: absolute;
    left: -25px; /* Moves outside the carousel */
}

.pro-slider .owl-next {
    position: absolute;
    right: -25px; /* Moves outside the carousel */
}
@media (max-width: 991.98px) {
    /* Adjust positioning */
.pro-slider .owl-prev {
    position: absolute;
    left: -15px; /* Moves outside the carousel */
}

.pro-slider .owl-next {
    position: absolute;
    right: -15px; /* Moves outside the carousel */
}
 }
 .box-shadow-pro-2{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
 }

 .owl-theme .owl-nav {
    margin-top: 40px;
}
.heading-line {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem; /* space between text and line */
}

.heading-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px; /* thickness of line */
  width: 50%;  /* half width */
  background-color: #DC3545; /* change color as needed */
}
 /* Smooth up-and-down movement animation */
 @keyframes moveUpDown {
            0% {
                transform: translateY(0); /* Initial position */
            }
            50% {
                transform: translateY(-10px); /* Move up */
            }
            100% {
                transform: translateY(0); /* Return to initial position */
            }
        }

        .faq-img {
            animation: moveUpDown 2s ease-in-out infinite; /* Apply animation */
        }

        .faq-img-container {
    background-image: url('assets/img/banner/Red-Line-2.png'); /* Add your background image here */
    background-size: contain; /* Makes sure the image fits within the container */
    background-position: center;
    background-repeat: no-repeat;

}
.hover-light:hover {
    background-color:#ececec !important; /* Bootstrap's light color */
    cursor: pointer;
}
.icon-2{
        width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    }

    .bg-gradeint-theme{
        background: linear-gradient(90deg, #be1212 0%, #ff4e4e 100%);
    }
    .social-icons .icon-3 {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .social-icons .icon-3 i {
        transition: color 0.3s ease;
    }

    .social-icons .icon-3:hover {
        background-color: #fff !important;
        transform: translateY(-6px);
    }

    .icon-3:hover i {
        color: #be1212 !important;
    }
    .footer-links li a {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: currentColor; /* Uses the current text color */
    transition: width 0.3s ease;
}

.footer-links li:hover a::after {
    width: 100%;
}

/* top trendy bar css */
  /* CSS */
.trending-bar {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  font-size: 14px;
  color:#fff;
}



.trending-news-wrapper {
  overflow: hidden;
  flex: 1;
  position: relative;
}

.trending-news {
  display: inline-flex;
  white-space: nowrap;
  animation: scroll-left 50s linear infinite;
  gap: 4rem;
  padding-left: 100%;
}

.trending-news:hover {
  animation-play-state: paused;
}

.trending-news span {
  display: inline-block;
}

/* Animation */
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.bg-annoucment{
    background-color:#A0D8F1;
}
.trending-label {
    background: #a0e2ff;
    color: #000;
  padding: 0.3rem 1rem;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.announce-icon {
  font-size: 1.2rem;
  transform: rotate(320deg);
  animation: floatIcon 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}


@keyframes floatIcon {
  0%   { transform: rotate(318deg) translateY(0); }
  50%  { transform: rotate(320deg) translateY(-4px); }
  100% { transform: rotate(319deg) translateY(0); }
}
.bg-light-3{
    background-color:#f3f4f6;
}

 .pro-box-ninja{
                    border-radius: 1rem;
                }
.pro-box-shadow{
    box-shadow: 0 2px 4px #0000000d;
}
.pro-box-shadow:hover{
    box-shadow: 0 8px 16px #0000001f !important;
}
.deal-badge {
    background: linear-gradient(90deg, #be1212 0%, #ff4e4e 100%);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 0.25rem 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    z-index: 3;
    margin-right: 20px;
    margin-top: 20px;
}
.bg-fs{
    font-size: .75rem;
}