.index-banner {
    /*margin-top: 10px;*/
    margin-bottom: 0;
    background-color: var(--bg-light);
}

.carousel-dark .carousel-control-next-icon, .carousel-dark .carousel-control-prev-icon {
    background-color: black;
    filter: invert(1) grayscale(100);
}
.carousel-control-next,
.carousel-control-prev {
    width: 10%;
    opacity: .3;
}

@media screen and (max-width: 767.98px) {
    .carousel-control-next-icon, 
    .carousel-control-prev-icon {
        width: 4rem;
        height: 4rem;
    }
    .carousel-control-next,
    .carousel-control-prev {
        width: 10%;
    }
}

@media screen and (min-width: 768px) {
    .index-banner .carousel-inner {
        aspect-ratio: 3 / 1;
    }
}
@media screen and (max-width: 767.98px) {
    .index-banner .carousel-inner {
        aspect-ratio: 1 / 1;
    }
}
@media screen and (max-width: 767.98px) {
    .index-banner .container {
        padding: 0;
    }
    .index-banner .carousel {
        /*padding: 0;*/
    }
}


/*  #brandsCarousel  */
.index-brands {
    height: 175px;
    background-color: var(--bg-light);
}
@media (max-width: 767px) {
    .index-brands {
        height: 140px;
    }
}

#brandsCarousel .carousel-inner {
    height: 150px;
}
@media (max-width: 767px) {
    #brandsCarousel .carousel-inner {
        height: 110px;
    }
}

#brandsCarousel .carousel-inner .card-img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    width: auto;
    /*padding: 30px 50px;*/
}
@media (max-width: 767px) {
    #brandsCarousel .carousel-inner .card-img {
        height: 100px;
    }
}

#brandsCarousel .carousel-inner .card-img a {
    display: block;
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    max-height: 60px;
    max-width: 80%;
    overflow: hidden;
    
    position: relative;
    height: 100%;
    width: 100%;
}
#brandsCarousel .carousel-inner .card-img img {
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    #brandsCarousel .carousel-inner .carousel-item > div {
        /*display: none;*/
    }
    #brandsCarousel .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

#brandsCarousel .carousel-inner .carousel-item.active,
#brandsCarousel .carousel-inner .carousel-item-next,
#brandsCarousel .carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    #brandsCarousel .carousel-inner .carousel-item-end.active,
    #brandsCarousel .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }
    #brandsCarousel .carousel-inner .carousel-item-start.active,
    #brandsCarousel .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

#brandsCarousel .carousel-inner .carousel-item-end,
#brandsCarousel .carousel-inner .carousel-item-start {
    transform: translateX(0);
}

#brandsCarousel .card {
    border-left-width: 1px;
    border-right-width: 0;
    border-radius: 0;
    box-sizing: content-box;
}
#brandsCarousel div:last-child > .card {
    border-right-width: 1px;
}

@media screen and (max-width: 767.98px) {
    .index-brands .container {
        padding: 0;
    }
    .index-brands .carousel {
        padding: 0;
    }
    .index-brands .row {
        margin-left: 0;
        margin-right: 0;
    }
    #brandsCarousel div > .card {
        /*border-top-width: 0;*/
    }
    #brandsCarousel div:first-child > .card {
        border-left-width: 0;
    }
    #brandsCarousel div:last-child > .card {
        border-right-width: 0;
    }
}

#brandsCarousel .carousel-item img {
  height: 100%; /* Make image fill the item height */
  object-fit: cover; /* Scale the image to cover the area, cropping if necessary */
  object-position: center; /* Center the image within the area */
  overflow: hidden; /* Hide parts of the image that overflow */
}


/* Category */
.index-category {
    background-color: var(--bg-light);
    padding: 60px 40px;
}
@media screen and (max-width: 767.98px) {
    .index-category {
        padding: 0;
    }
}
.index-category a {
    text-decoration: none;
}
.index-category .category-item {
    margin-bottom: 25px;
}

.index-category .card-img {
    /*width: 80%;*/
    overflow: hidden;
    z-index: 0;
    border-radius: 2rem;
    aspect-ratio: 1 / 1;
    /*padding: 10px;*/
    background-color: var(--bg-image);
}
.index-category .card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.index-category .card-title {
    margin-top: 3px;
    margin-bottom: 0;
    font-size: calc(var(--font-heading-scale) * 18px);
    font-weight: 600;
}

.index-category .card-new {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: ;
    
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    
    border-radius: 2rem;
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    
    height: 100%;
    margin-bottom: 27px;
}



.index-category .card-new:hover {
    background-color: var(--color-default-10);
}
@media (min-width: 768px) {
    .index-category .card-new:hover {
        /*box-shadow: 2px 5px 8px 2px var(--color-default-90);*/
        box-shadow: 2px 5px 8px 2px rgba(0,0,0,.1);
    }
}