.product-rate {

    height: 14px;

    background: url('assets/imgs/theme/icons/starts-disable.svg') repeat-x;

    position: relative;

    width: 80px; /* Adjust to match star count */

}



.product-rating {

    height: 14px;

    background: url('assets/imgs/theme/icons/stars-active.svg') repeat-x;

    position: absolute;

    top: 0;

    left: 0;

}



    .product-img-action-wrap {

    position: relative;

}



.badge-top-left {

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 3;

}



.badge-top-left .badge {

    font-size: 12px;

    padding: 5px 12px;

    border-radius: 12px;

    font-weight: 600;

    color: #fff;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

}



.product-img .hover-img {

    position: absolute;

    top: 0;

    left: 0;

    opacity: 0;

    transition: all 0.3s ease-in-out;

}



.product-img:hover .hover-img {

    opacity: 1;

}



.product-img:hover .default-img {

    opacity: 0;

}

.product-cart-wrap {

    display: flex;

    flex-direction: column;

    height: 100%;

    padding: 15px;

    background-color: #fff;

    border-radius: 8px;

    border: 1px solid #eee;

    transition: 0.3s;

}



.product-content-wrap {

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



    

    .scroll-category {

    max-height: 300px;

    overflow-y: auto;

    scrollbar-width: none; /* Firefox */

    -ms-overflow-style: none; /* Internet Explorer 10+ */

}



.scroll-category::-webkit-scrollbar {

    display: none; /* Chrome, Safari, Opera */

}

.product-img {

    width: 100%;

    height: 200px; /* Adjust height as needed */

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f9f9f9;

}



.product-img img {

    width: auto;

    height: 100%;

    object-fit: contain; /* Keeps full image visible, doesn't crop */

}

  .category-list {

    list-style: none;

    padding: 0;

}



.category-list li {

    margin-bottom: 10px;

    border: 1px solid #e3e3e3;

    border-radius: 12px;

    background: #fff;

    transition: all 0.3s ease-in-out;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

}



.category-list li:hover {

    background-color: #f1fdf7;

    transform: translateY(-2px);

    box-shadow: 0 4px 10px rgba(0,0,0,0.07);

}



.category-list a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 15px;

    color: #333;

    text-decoration: none;

    font-weight: 500;

}



.category-list .icon-label {

    display: flex;

    align-items: center;

    gap: 10px;

}



.category-list i {

    color: #00b894;

    font-size: 18px;

    width: 24px;

    text-align: center;

}



.category-list .badge {

    background: #c3f8dc;

    color: #0a6847;

    font-size: 0.9rem;

    padding: 4px 10px;

    border-radius: 20px;

    font-weight: 600;

}



.home-slider {

    width: 100%;

    overflow: hidden;

}



.single-hero-slider {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9; /* Maintains consistent height */

    display: flex;

    align-items: center;

    justify-content: center;

}



.single-hero-slider img {

    width: 100%;

    height: 100%;

    object-fit: contain; /* ✅ Shows full image */

    display: block;

    z-index: 1;

}



/* Content on top of image */

.slider-content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: #fff;

    z-index: 2;

    text-align: center;

    padding: 10px 15px;

    max-width: 90%;

    background: transparent !important;

    border-radius: 8px;

}



.slider-content h1 {

    font-size: 32px;

    margin-bottom: 8px;

    line-height: 1.3;

}



.slider-content p {

    font-size: 16px;

    margin: 0;

}

.slick-dots {

   position: absolute;

  bottom: 20px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 5;

  margin: 0;

  padding: 0;

}



.slick-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

}



.slick-prev {

    left: 10px;

}

.slick-next {

    right: 10px;

}

.product-img-action-wrap {

    position: relative;

}



.badge-top-left {

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 3;

}



.badge-top-left .badge {

    font-size: 12px;

    padding: 4px 10px;

    border-radius: 12px;

    font-weight: 500;

    color: #fff;

    box-shadow: 0 2px 6px rgba(0,0,0,0.15);

}



/* MOBILE */

@media (max-width: 768px) {

    .single-hero-slider {

        aspect-ratio: 3 / 4; /* Taller for mobile */

    }



    .slider-content {

        padding: 12px;

       width: 450px;

       height: 125px;

        background: transparent !important;

    }



    .slider-content h1 {

        font-size: 14px !important; /* <-- force it */

        line-height: 1.3;

        margin-bottom: 6px;

    }



    .slider-content p {

        font-size: 10px !important; /* <-- force it */

        margin: 0;

    }

    .slick-dots {

        bottom: 12px !important; /* override inline styles if needed */

    }



    .slick-arrow {

        top: 45% !important;

        padding: 6px;

        font-size: 16px;

    }

}



    .product-rate {

    white-space: nowrap; /* Prevent line break */

    display: inline-block;

    font-size: 0; /* remove whitespace between inline elements */

}



.product-rate i {

    font-size: 15px;              /* uniform size */

    width: 16px;                  /* forces fixed width */

    height: 16px;

    line-height: 16px;            /* center vertically */

    text-align: center;

    display: inline-block;

    vertical-align: middle;

    margin-right: 1px;            /* less spacing between stars */

    position: relative;

    top: 1px;  

}



.category-box {

    width: 300px;      /* fixed width */

    height: 220px;     /* fixed height */

    overflow: hidden;  /* prevent overflow */

    margin: 0 auto;    /* center the box */

}



.category-box img {

    width: 100%;

    height: 100%;

    object-fit: contain;  /* fit inside without crop */

    background: #f9f9f9;  /* optional background for empty space */

    padding: 5px;         /* optional padding */

}

.marquee-wrapper {

    overflow: hidden;

    white-space: nowrap;

    position: relative;

    background: #fff;

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    padding: 10px 0;

}



.marquee-content {

    display: inline-flex;

    align-items: center;

    gap: 50px;

    animation: scrollMarquee 40s linear infinite;

}



.marquee-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    color: #333;

    text-decoration: none;

}



.marquee-item img {

    width: 80px;

    height: 80px;

    object-fit: cover;

    border-radius: 10px;

    margin-bottom: 5px;

    transition: transform 0.3s ease;

}



.marquee-item:hover img {

    transform: scale(1.1);

}



.marquee-item span {

    font-size: 14px;

    font-weight: 500;

}



@keyframes scrollMarquee {

    from { transform: translateX(0); }

    to { transform: translateX(-100%); }

}



/* 🖐 Pause on hover (desktop) */

.marquee-wrapper:hover .marquee-content {

    animation-play-state: paused;

}



/* 📱 Faster and touch-friendly for mobile */

@media (max-width: 768px) {

    .marquee-content {

        animation-duration: 25s;

    }

}



.company-inline img {

    vertical-align: middle;

}



.company-info {

    display: inline-block;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    max-width: 95%;

}







.company-marquee-wrapper {

    overflow: hidden;

    white-space: nowrap;

    width: 100%;

    padding: 10px 0;

}



.company-marquee {

    display: flex;

    flex-wrap: nowrap;

    animation: scrollMarquee 35s linear infinite;

}



.marquee-card {

    width: 200px;

    min-width: 200px;

    background: #fff;

    border-radius: 8px;

    padding: 10px;

    margin-right: 12px;

    text-align: center;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}



.marquee-card img {

    width: 100%;

    height: 120px;

    object-fit: cover;

    border-radius: 6px;

}

.marquee-card:hover {

    transform: scale(1.05);

    transition: .2s;

}







    .homepage-intro {

    padding: 60px 0;

    background:#f8f9fa;

    text-align:center;

}

.homepage-intro h1 {

    font-size: 2.2rem;

    line-height: 1.3;

    font-weight: 700;

}

.homepage-intro p {

    font-size: 1.1rem;

    margin-bottom: 15px;

}



/* Mobile */

@media (max-width: 576px) {

    .homepage-intro h1 {

        font-size: 1.6rem;

    }

    .homepage-intro p {

        font-size: 1rem;

    }

}

/* ✅ Marquee Container */

.marquee-wrapper {

    overflow: hidden;

    position: relative;

    width: 100%;

    border-radius: 12px;

    padding: 10px 0;

    background: #FFFFFF;       /* white background */

    border: 2px solid #24a050; /* green-border */

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

}



/* ✅ Marquee Scrolling Animation */

.marquee-content {

    display: flex;

    gap: 25px;

    animation: marquee 60s linear infinite;

}



.paused {

    animation-play-state: paused !important;

}

                

.company-inline {

    display: flex;

    align-items: center;

    background: #27ae60; /* brand green background */

    color: #FFFFFF;       /* white text for contrast */

    border-radius: 10px;

    padding: 5px 12px;

    transition: all 0.3s ease;

}

.company-inline:hover {

    background: #1f8d4b; /* darker on hover */

}





/* ✅ Company Item */

.company-item {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    background: white;

    border-radius: 12px;

    padding: 8px 12px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

    text-decoration: none;

    color: #333;

    transition: all 0.3s ease;

    border: 1px solid #e0e0e0;

}



.company-item:hover {

    background: #eef5ff;

    transform: translateY(-2px);

    box-shadow: 0 4px 10px rgba(50, 100, 200, 0.15);

}



/* ✅ Company Image */

.company-img {

    width: 45px;

    height: 45px;

    object-fit: contain;

    border-radius: 8px;

    background: #f9f9f9;

    margin-right: 10px;

    border: 1px solid #ddd;

}



/* ✅ Company Text */

.company-text {

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.text-muted {

    color: #666 !important;

}



@keyframes scrollMarquee {

    0% { transform: translateX(100%); }

    100% { transform: translateX(-100%); }

}