.design-your-uniform-wrapper {
    position: relative;
	font-family: Anuphan;
}

.design-your-uniform-toggle,
.design-your-uniform-dropdown a{
	font-weight: 600;
	font-size: 15px;
	line-height: 19.5px;
	border-radius: 7px;
	padding: 7px 28px 8px;
	border: solid 2px var(--fs-color-primary);
	color: var(--fs-color-primary);
    z-index: 10;
	text-transform: uppercase;
}

.design-your-uniform-wrapper.active .design-your-uniform-toggle,
.design-your-uniform-wrapper .design-your-uniform-toggle:hover,
.design-your-uniform-dropdown a{
	background: var(--fs-color-primary);
	color: #17191B !important;
}

.design-your-uniform-dropdown {
    position: absolute;
    top: calc(100% + 28px);
    left: 50%;
	width: 400px;
	transform: translateX(-50%);
    background: #17191BF0;
    backdrop-filter: blur(55px);
    padding: 20px 40px 40px;
    z-index: 10;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.design-your-uniform-wrapper:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 5;
}

.design-your-uniform-wrapper.active:before {
    opacity: 1;
    visibility: visible;
}

.design-your-uniform-dropdown h3{
	margin-top: 17px;
	margin-bottom: 0;
	font-weight: 500;
	font-size: 15px;
	line-height: 19.5px;
	color: #FFF;
	text-transform: uppercase;
}

.design-your-uniform-dropdown h4{
	font-weight: 700;
	font-size: 15px;
	line-height: 19.5px;
	margin-bottom: 23px;
	color: var(--fs-color-primary);
	text-transform: uppercase;
}

.design-your-uniform-dropdown a{
	width: fit-content;
}