* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*>>>>>>>> global css start <<<<<<<*/
:root {
    --color-sky-blue: #204b59;
    /* Sky Blue */
    --color-light-blue: #f0f8f8;
    /* Light Blue */
    --color-black: #000000;
    /* Black */
    --color-dark-gray: #3A3A3A;
    /* Dark Gray */
    --color-cream: #fcf9f3;
    /* Cream */
    --color-teal: #07484A;
    /* Teal */
    --muted-sage-green: #70908B;
    --color-bright-yellow: #fffefa;
    /* Bright Yellow */
    --color-white: #ffffff;
    --medium-grey: #898989;
    --heading-font: "Roboto", sans-serif;
    --paragraph-font: "Open Sans", sans-serif;
}

.object-fit-cover {
    object-fit: cover;
}

.bg-gray {
    background-color: var(--color-dark-gray);
}

.bg-skyblue {
    background-color: var(--color-light-blue);
}

.bg-teal {
    background-color: var(--color-teal);
}

.bg-cream {
    background-color: var(--color-cream);
}

.bg-white {
    background-color: var(--color-white);
}

.text-teal {
    color: var(--color-teal);
}

.heading-font {
    font-family: var(--heading-font);
}

.paragraph-font {
    font-family: var(--paragraph-font);
}

.fs-15 {
    font-size: 13px !important;
}

@media (min-width:768px) {
    .fs-15 {
        font-size: 15px !important;
    }
}

.fs-14 {
    font-size: 12px !important;
}

@media (min-width:768px) {
    .fs-14 {
        font-size: 14px !important;
    }
}
/*----- category-menu-tab style start --------*/
.category-menu-tab ul.nav {
  overflow-x: scroll;
  padding-bottom: 8px;
}

.category-menu-tab ul.nav::-webkit-scrollbar {
  height: 3px;
  border: 8px;
}

/* Track */
.category-menu-tab ul.nav::-webkit-scrollbar-track {
  background: var(--primary-light);
}

/* Handle */
.category-menu-tab ul.nav::-webkit-scrollbar-thumb {
  background: var(--primary-dark);
}

/* Handle on hover */
.category-menu-tab ul.nav::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}
.category-menu-tab ul.nav .nav-item{
  width: 100%;
}
.category-menu-tab ul.nav .nav-item .nav-link {
  background: none;
  color: var(--primary-dark);
  padding: 0;
  width: 150px;
  text-align: center;
  font-family: var(--Poppins);
  font-size: 16px!important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width:992px) {
  .category-menu-tab ul.nav .nav-item .nav-link{
    width: 100px;
    font-size: 14px!important;
  }
}

.category-menu-tab ul.nav .nav-item .nav-link.active {
  font-weight: bold;
  border-radius: 0;
}

/* .category-menu-tab .tab-content {
  border-bottom: 1px solid var(--primary-dark);
} */

.category-menu-tab .tab-content .tab-pane {
  overflow-x: scroll;
  padding: 8px 0;
}

.category-menu-tab .tab-content .tab-pane::-webkit-scrollbar {
  height: 6px;
  border: 8px;
}

/* Track */
.category-menu-tab .tab-content .tab-pane::-webkit-scrollbar-track {
  background: var(--primary-light);
}

/* Handle */
.category-menu-tab .tab-content .tab-pane::-webkit-scrollbar-thumb {
  background: var(--primary-dark);
}

/* Handle on hover */
.category-menu-tab .tab-content .tab-pane::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

.category-menu-tab .tab-content .tab-pane a.item img {
  width: 92px;
  height: 84px;
  aspect-ratio: 1;
  object-fit: contain;
}
@media (max-width:992px) {
    .category-menu-tab .tab-content .tab-pane a.item img {
        width: 54px;
        height: 54px;
    }
}
.category-menu-tab .tab-content .tab-pane a.item p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: bold;
  font-family: var(--Poppins);
}
/*----- category-menu-tab style end ---------*/

/*------ home page banner swiper slide ------*/
/* Banner Section Style */
/*------- banner style start --------*/
.slidebanner .swiper-slide {
    min-height: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slidebanner .swiper-slide .slide-content {
    width: 100%;
}

@media (min-width:768px) {
    .slidebanner .swiper-slide .slide-content {
        width: 70%;
    }
}

.slidebanner .swiper-slide .slide-content span {
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    line-height: normal;
}

/* Base styles for the slide content */
.slide-content {
    opacity: 1;
    transition: opacity 2s ease;
}

/* Fade animations */


.slidebanner .swiper-pagination-bullet {
    width: 24px !important;
    border-radius: 10px !important;
    height: 5px !important;
    background: var(--white) !important;
    opacity: 1 !important;
}

.slidebanner .swiper-pagination-bullet-active {
    background: var(--yellow) !important;
}

/*------- banner style end -------*/

/*------- popular-products style sec --------*/
.popular-products{
    /* background-image: url('../image/product/Image-container.svg');
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain; */
}
.popular-products .popular-product-swiper .item{
    background-color: var(--muted-sage-green);
}
.popular-products .popular-product-swiper .item h5{
    font-size: 16px;
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: normal;
    font-style: normal;
    margin: 0;
    color: var(--color-teal);
}
.popular-products .popular-product-swiper .item p{
    color: var(--color-teal);
}
.popular-products .popular-product-swiper .item span{
    font-size: 14px;
    font-family: var(--heading-font);
    font-weight: bold;
    line-height: normal;
    font-style: normal;
    margin: 0;
    color: var(--color-teal);
}
/*------- popular products style end --------*/


/*>>>>>>>> swiper style end <<<<<<<<<<<*/