/*	CURRENT MAX WIDTH IS JUST FOR DEMO PURPOSES */
.tag-scrollers {
    width: 100%;
    overflow: hidden;
}
/*	POSSIBLY UPDATE COLORS IN THE GRADIENT
		TO MATCH THE PROJECTS DESIGN SYSTEM
*/
.tag-scroller {
    display: grid;
    gap: 1.5rem;
    mask: linear-gradient(90deg, #0000, var(--background) 15%, var(--background) 85%, #0000);
}
.tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    /*	IF THE GAP IS CHANGED, DON'T FORGET TO CHANGE 
			THE TRANSFORM VALUE IN THE SCROLL ANIMATION
			AT THE END OF THE STYLING
	*/
    gap: 1.5rem;
}

/*	IF THE USERS PREFERS REDUCED MOTION
		PRESENT THEM WITH A HOROZONTAL LIST
		OF ALL ELEMENTS AND GIVE THEM THE
		OPTION TO MANUALLY SCROLL BY SWIPING
*/
@media (prefers-reduced-motion) {
.tag-list {
    flex-flow: row nowrap;
    overflow: auto;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}
.tag-list::-webkit-scrollbar-track {
background: transparent;
}
.tag-list::-webkit-scrollbar-thumb {
background: transparent;
}
.tag-list::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
}
/*	BASIC STYLING OF THE LIST ITEMS
		FOR DEMO PURPOSES. MOST PROPERTIES
		SHOULD BE KEPT AS IS BUT PROBABLY
		UPDATE THE VALUE FOR font-family
		AND border
*/
.tag-list li {
    font-size: 1.125rem;
    line-height: 1;
    padding: 0.625rem;
    border: #fff7e6 1px solid;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/*	THE DURATION IS SET FROM A CUSTOM PROPERTY
		CALCULATED IN THE SCRIPT AS IT'S ONLY NEEDED
		IF THE ANIMATION SHOULD RUN, WHICH IS ALSO
		CHECKED BY THE SCRIPT

		THE DIRECTION IS SET TO normal AS DEFULT
		AND THEN SET TO reverse	FOR EVERY OTHER SCROLLER
*/
.tag-scroller.scrolling .tag-list {
    width: max-content;
    flex-wrap: nowrap;
    animation: horizontal-scroll var(--duration) var(--direction, normal) linear infinite;
}
.tag-scroller.scrolling .tag-list:nth-child(even) {
--direction: reverse;
}
/* PAUSING THE ANIMATION ON HOVER */
.tag-scroller:hover .tag-list {
    animation-play-state: paused;
}
@keyframes horizontal-scroll {
to {
                /*	0.75rem FOR HALF THE GAP
				OF THE .tag-scroller
		*/
                transform: translateX(calc(-50% - .75rem));
}
}
/* ======================================
   Target only this carousel by ID
====================================== */
#agnisCarousel {
    position: relative;
    overflow: hidden;/* prevent white flash */
}
/* Remove fade styles — classic slide will work */
#agnisCarousel.carousel-fade .carousel-item {
    position: relative;
    /* no absolute positioning */
    opacity: 1 !important;
    /* all slides fully visible during transition */
    transition: transform 0.6s ease, left 0.6s ease !important;
    /* smooth slide */
    z-index: 1;
}
/* No need for .carousel-item.active changes; slide is handled by Bootstrap */

        /* ================= Nav Buttons ================= */
#agnisCarousel .carousel-control-prev, #agnisCarousel .carousel-control-next {
    width: 3rem !important;
    height: 3rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    padding: 0 !important;
}
#agnisCarousel .carousel-control-prev-icon, #agnisCarousel .carousel-control-next-icon {
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: block !important;
}
/* ================= Dots / Indicators ================= */
#agnisCarousel .carousel-indicators {
    bottom: 10px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
}
#agnisCarousel .carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    transition: background-color 0.3s !important;
}
#agnisCarousel .carousel-indicators button.active {
    background-color: #fff !important;
}
/* ================= Images ================= */
#agnisCarousel .carousel-item img {
    width: 100%;
    height: auto;
    display: block;
}
/* Only change for smooth slide speed */
#agnisCarousel .carousel-item {
    transition: transform 1.2s ease-in-out;/* slower slide */
}
/* Container for 3D flip */
#agnisCarousel .slide-inner {
    perspective: 1200px;/* gives depth */
}
/* Images */
#agnisCarousel .slide-inner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
    transform-style: preserve-3d;
    transition: transform 0.8s ease-in-out;
}
/* Active slide: front facing */
#agnisCarousel .carousel-item-next .slide-inner img, #agnisCarousel .carousel-item-prev .slide-inner img {
    transform: rotateY(90deg);/* rotated during transition */
}
#agnisCarousel .carousel-item.active .slide-inner img {
    transform: rotateY(0deg);
}
.productparallax .row.justify-content-center {
    display: flex;
    flex-wrap: wrap;
}
.productparallax .row.justify-content-center > div {
    width: 20%;
}

@media (max-width: 1199px) {
.productparallax .row.justify-content-center > div {
    width: 33.33%;
}
}

@media (max-width: 991px) {
.productparallax .row.justify-content-center > div {
    width: 50%;
}
}

@media (max-width: 576px) {
.productparallax .row.justify-content-center > div {
    width: 100%;
}
}