section.slider_section {
	margin-top: 1.8rem;
	margin-bottom: 1.8rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
	section.slider_section {
        margin-top: 0.6rem;
        margin-bottom: 0.6rem;
}
    }
section.slider_section .container {

        padding-top: 1.4rem;
        padding-bottom: 1.4rem;
        border-radius: 0.48rem;
	}
@media screen and (max-width: 768px) {
	section.slider_section .container {
            padding-top: 0.6rem;
            padding-bottom: 0.6rem;
            border-radius: 0;
	}
        }
section.slider_section.color-yellow .container {
            background-color: var(--yellow);
            color: var(--brown);
        }
:is(section.slider_section.color-yellow .container) .centered-slider-bullet {
               background-color: var(--brown);
               border: 1px solid var(--brown);
            }
:is(section.slider_section.color-yellow .container) .centered-slider-slide__inner {
                background-color: #FFF7DC;
            }
:is(section.slider_section.color-yellow .container) .slide-media {
                background-color: var(--brown);
                color: #FFF7DC;
            }
:is(section.slider_section.color-yellow .container) .centered-slider-button {
                background-color: var(--brown);
                border: 1px solid var(--brown);
            }
:is(:is(:is(section.slider_section.color-yellow .container) .centered-slider-button) svg) path {
                        fill: var(--yellow) !important;
                    }
@media (hover: hover) and (pointer: fine) {
                    :is(:is(section.slider_section.color-yellow .container) .centered-slider-button):hover {
                        background-color: transparent !important;
                    }
                            :is(:is(:is(section.slider_section.color-yellow .container) .centered-slider-button):hover svg) path {
                                fill: var(--brown) !important;
                            }
                }
section.slider_section.color-light-yellow .container {
            background-color: #FFF7DC;
            color: var(--brown);
        }
:is(section.slider_section.color-light-yellow .container) .centered-slider-slide__inner {
                background-color: var(--yellow);
            }
:is(section.slider_section.color-light-yellow .container) .slide-media {
                background-color: var(--brown);
                color: #FFF7DC;
            }
:is(section.slider_section.color-light-yellow .container) .centered-slider-bullet {
				background-color: var(--brown);
				border: 1px solid var(--brown);
			 }
:is(section.slider_section.color-light-yellow .container) .centered-slider-button {
				 background-color: var(--brown);
				 border: 1px solid var(--brown);
			 }
:is(:is(:is(section.slider_section.color-light-yellow .container) .centered-slider-button) svg) path {
						 fill: var(--yellow) !important;
					 }
@media (hover: hover) and (pointer: fine) {
					 :is(:is(section.slider_section.color-light-yellow .container) .centered-slider-button):hover {
						 background-color: transparent !important;
					 }
							 :is(:is(:is(section.slider_section.color-light-yellow .container) .centered-slider-button):hover svg) path {
								 fill: var(--brown) !important;
							 }
				 }
section.slider_section.color-blue .container {
            background-color: var(--blue);
            color: var(--light-blue);
        }
:is(section.slider_section.color-blue .container) .slide-media {
                background-color: var(--light-blue);
                color: var(--blue);
            }
:is(section.slider_section.color-blue .container) .centered-slider-slide__inner {
                background-color: var(--white);
				color: var(--blue);
            }
:is(section.slider_section.color-blue .container) .centered-slider-bullet {
				background-color: var(--light-blue);
				border: 1px solid var(--light-blue);
			 }
:is(section.slider_section.color-blue .container) .centered-slider-button {
				background-color: var(--light-blue);
				border: 1px solid var(--light-blue);
			}
:is(:is(:is(section.slider_section.color-blue .container) .centered-slider-button) svg) path {
						fill: var(--blue) !important;
					}
@media (hover: hover) and (pointer: fine) {
					:is(:is(section.slider_section.color-blue .container) .centered-slider-button):hover {
						background-color: transparent !important;
					}
							:is(:is(:is(section.slider_section.color-blue .container) .centered-slider-button):hover svg) path {
								fill: var(--light-blue) !important;
							}
				}
section.slider_section .heading-wrap {
		margin-bottom: 0.85rem;

        text-align: center;
	}
@media screen and (max-width: 768px) {
	section.slider_section .heading-wrap {
            margin-bottom: 0.4rem;
	}
        }
:is(section.slider_section .heading-wrap) .title {
			margin-top: 0.24rem;
		}
:is(section.slider_section .heading-wrap) .description {
			margin-top: 0.4rem;
			max-width: 4.54rem;
            margin-left: auto;
            margin-right: auto;
		}
section.slider_section .centered-slider-row {
		width: 100%;
		margin-top: 0.4rem;
		margin-bottom: 0.24rem;
		display: flex;
		position: relative;
		overflow: clip;
	}
section.slider_section .centered-slider-list {
		display: flex;
		align-items: center;
		width: 100%;
	}
section.slider_section .centered-slider-slide {
		flex: none;
		padding: 0.24rem;
        height: 100%;
		transition: opacity 0.25s cubic-bezier(0.77, 0, 0.175, 1);
		position: relative;
	}
section.slider_section .centered-slider-slide__inner {
		position: relative;
		display: flex;
		width: 4.06rem;
		padding: 0.24rem;
        border-radius: 0.4rem;
		flex-direction: column;
		gap: 0.24rem;
		height: 100%;
	}
/* .centered-slider-slide::after {
		--size: 0.16rem;
		--width: 0.01rem;
		--gap: 0.02rem;
		--color: #ff4c24;
		content: "";
		position: absolute;
		inset: calc(var(--gap) * -1);
		z-index: 1;
		opacity: 0;
		padding: calc(var(--gap) + var(--width));
		outline: var(--width) solid var(--color);
		outline-offset: calc(var(--gap) / -1);
		mask: conic-gradient(at var(--size) var(--size), #0000 75%, #000 0) 0 0 / calc(100% - var(--size)) calc(100% - var(--size)),
			linear-gradient(#000 0 0) content-box;
		transition: all 0.4s cubic-bezier(0.65, 0.05, 0, 1);
	} */
section.slider_section .centered-slider-slide.active::after {
		outline-offset: calc(-1 * var(--width));
		opacity: 1;
	}
section.slider_section .slide-media {
		width: 0.72rem;
		height: 0.72rem;
		border-radius: 100em;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
.image:is(section.slider_section .slide-media) img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
.icon:is(section.slider_section .slide-media) svg {
			width: 0.24rem;
			height: auto;
		}
section.slider_section .slide-label {
		font-size: 0.24rem;
		line-height: 1;
		margin-top: 0.16rem;
	}
section.slider_section .slide-title {
		text-transform: uppercase;
	}
/* legacy classes kept for backward compatibility */
section.slider_section .slide-demo__details {
		display: flex;
		gap: 0.18rem;
		align-items: center;
	}
section.slider_section .slide-demo__avatar {
		border-radius: 100em;
		width: 0.6rem;
		height: 0.6rem;
		object-fit: cover;
	}
section.slider_section .slide-demo__eyebrow {
		text-transform: uppercase;
		font-size: 0.14rem;
		line-height: 1.2;
	}
section.slider_section .centered-slider-content {
		display: flex;
		justify-content: center;
	}
section.slider_section .centered-slider-bullet__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.08rem;
		padding: 0;
		margin: 0;
		list-style: none;
	}
section.slider_section .centered-slider-bullet {
		/* background-color: transparent; */
        display: flex;
        align-items: center;
        justify-content: center;
		border: none;
		border-radius: 100em;
		width: 0.44rem;
		height: 0.44rem;
		padding: 0;
		position: relative;
		cursor: pointer;
        transition: background-color 0.3s ease-in-out;
	}
@media (hover: hover) and (pointer: fine) {
                .icon:is(section.slider_section .centered-slider-bullet):hover {
                    background-color: transparent !important;
                }
                    .icon:is(section.slider_section .centered-slider-bullet):hover path {
                        fill: var(--brown) !important;
                    }
            }
.icon.active:is(section.slider_section .centered-slider-bullet) {
                background-color: transparent !important;
            }
.icon.active:is(section.slider_section .centered-slider-bullet) path {
                    fill: var(--brown) !important;
                }
.icon:is(section.slider_section .centered-slider-bullet) svg {
                width: .16rem;
                height: auto;
            }
:is(.icon:is(section.slider_section .centered-slider-bullet) svg) path {
                    transition: fill 0.3s ease-in-out;
                }
.image:is(section.slider_section .centered-slider-bullet) {
			/* border: 1px solid var(--light-blue); */
			border: none;

			/* @media (hover: hover) and (pointer: fine) {
                &:hover {
                    background-color: transparent !important;
                   
                }
            } */
		}
.image.active:is(section.slider_section .centered-slider-bullet) {
                background-color: var(--yellow) !important;
            }
:is(section.slider_section .centered-slider-bullet) img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 100em;
		}
section.slider_section .centered-slider-bullet::after {
		content: "";
		position: absolute;
		inset: 0.02rem;
		border-radius: 100em;
		z-index: -1;
		border: 0.01rem solid #ff4c24;
		transition: all 0.5s cubic-bezier(0.65, 0.05, 0, 1);
	}
section.slider_section .centered-slider-bullet:hover::after,section.slider_section .centered-slider-bullet.active::after,section.slider_section .centered-slider-bullet:focus-visible::after {
		inset: -0.05rem;
	}
section.slider_section .centered-slider-buttons {
		display: flex;
		gap: 0.16rem;
	}
section.slider_section .centered-slider-button {
		border-radius: 9rem;
		width: 0.44rem;
		height: 0.44rem;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		transition: border-color 0.2s, background-color 0.2s;
		cursor: pointer;
	}
:is(section.slider_section .centered-slider-button) svg {
			width: 0.11rem;
			height: auto;
		}
section.slider_section .centered-slider-button:hover {
		background-color: #efeeec33;
		border-color: #efeeec40;
	}
section.slider_section .centered-slider-button.is--prev {
		transform: rotate(-180deg);
	}
section.slider_section .slider-button-arrow {
		width: 0.3rem;
	}
@media screen and (max-width: 768px) and (orientation: portrait) {
		section.slider_section .centered-slider-slide {
			padding: 0;
            width: 100%;
		}

		section.slider_section .centered-slider-slide__inner {
			width: 100%;
		}
	}