.steps-container {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	color: var(--BODY_TXT_COLOR);
}

.steps-container .step {
	flex: 1;
	text-align: center;
	padding: 0 20px;
}

.steps-container .step .circle {
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--SECONDARY_COLOR);
	color: var(--SECONDARY_TXT_COLOR);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-family: var(--SECONDARY_FONT_FAMILY);
	letter-spacing: var(--SECONDARY_FONT_LETTER_SPACING);
	font-size: var(--SUBHEADER_FONT_SIZE);
	font-weight: var(--REG_FONT_WEIGHT);
	margin: 0 auto 15px;
	z-index: 1;
}

.steps-container .step h2 {
	font-family: var(--SECONDARY_FONT_FAMILY);
	letter-spacing: var(--SECONDARY_FONT_LETTER_SPACING);
	font-size: var(--BODY_SMALL_TXT_FONT_SIZE);
	font-weight: var(--REG_FONT_WEIGHT);
	color: var(--BODY_TXT_COLOR);
	margin-bottom: 10px;
}

.steps-container .step p {
	font-size: var(--SUBBODY_TXT_FONT_SIZE);
	font-weight: var(--REG_FONT_WEIGHT);
	color: var(--TXT_COLOR_4)
}

.steps-container .line {
	width: 35%;
	height: 2px;
	background: var(--SECONDARY_COLOR);
	position: absolute;
	top: 25px;
	z-index: 0;
}

.steps-container .line.-first {
	left: 16%; /* Start after the first circle */
}

.steps-container .line.-second {
	right: 16%; /* End before the last circle */
}

.vip-5 {
	width: 80%;
    margin: auto;
	padding-top: 30px;
	color: var(--BODY_TXT_COLOR);   
}

.vip-5 .vip-header- {
    text-align: center;
	font-family: var(--SECONDARY_FONT_FAMILY);
	letter-spacing: var(--SECONDARY_FONT_LETTER_SPACING);
	font-size: var(--SECTION_HEADER_FONT_SIZE);
	font-weight: var(--REG_FONT_WEIGHT);
	color: var(--BODY_TXT_COLOR);
}

.vip-container .tablist- {
    display: flex;
    background: var(--TAB_BG);
    color: var(--TAB_TXT_COLOR);
    border: var(--TAB_BORDER);
    box-shadow: var(--TAB_BOX_SHADOW);
    border-radius: 10px;
    font-size: var(--BODY_SMALL_TXT_FONT_SIZE);
    font-weight: var(--REG_FONT_WEIGHT);
}

.vip-container .tablist- li {
    width: -webkit-fill-available;
    text-align: center;
    padding: 14px;
    color: inherit;
    cursor: pointer;
}

.vip-container .tablist- li.active {
	background: var(--TAB_HOVER_BG);
    color: var(--TAB_HOVER_COLOR);
    border-radius: 10px;
}

/* Current Member Group  */
.vip-5 .member-container {
    display: grid;
    grid-template-columns: 20% 80%;
    align-items: center;
    min-height: 220px;
    padding: 30px;
    margin: 30px 0;
	border-radius: 10px;
    background: var(--CARD_1_BG);
    color: var(--CARD_1_TXT_COLOR);
}

.vip-5 .member-container .member-group-icon {
	width: 70%;
	margin: auto;
}

.vip-5 .member-container .-right {
	margin: 0 26px;
}

.vip-5 .member-container .dstg-info-memberGroup {
	padding-bottom: 26px;
	font-size: var(--SUBHEADER_FONT_SIZE);
    font-weight: var(--REG_FONT_WEIGHT);
    color: inherit;
}

.vip-5 .member-container .progress-box {
    min-height: 100px;
    align-content: center;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: var(--BODY_SMALL_TXT_FONT_SIZE);
    font-weight: var(--REG_FONT_WEIGHT);
	background: var(--CARD_2_BG);
	color: var(--CARD_2_TXT_COLOR);
}

.vip-5 .member-container .member-progress-text {
	display: flex;
    justify-content: space-between;
    user-select: none;
    color: inherit;
}

.vip-5 .member-container .member-progress-container {
	position: relative;
	margin: 12px 0;
	width: 100%;
    border-radius: 9px;
    height: 8px;
    background: var(--VIP_CURRENT_BAR_BG);
}

.vip-5 .member-container .member-progress-container .member-progress-bar  {
	height: 8px;
    width: 8px;
    margin: 0 4px;
    background: var(--CARD_2_TXT_COLOR);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px var(--CARD_2_TXT_COLOR);
    filter: blur(1px);
    transition: left 0.3s ease;
    left: 0;
}

/* Upcoming & Achievement Section */
.vip-5 .achievement-container {
    padding-top: 20px;
}

.vip-5 .upcoming-section, 
.vip-5 .achievement-section {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px 40px;
    padding-bottom: 40px;
}

.vip-5 .sub-header- {
	margin: 16px auto;
    text-align: center;
	font-family: var(--SECONDARY_FONT_FAMILY);
	letter-spacing: var(--SECONDARY_FONT_LETTER_SPACING);
	font-size: var(--SUBHEADER_FONT_SIZE);
	font-weight: var(--MED_FONT_WEIGHT);
}

.vip-5 .upcoming-section .upcoming-member-container {
	position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    padding: 24px 28px;
    margin-top: 10px;
    margin: auto;
    color: var(--TXT_COLOR_1);
}

.vip-5 .achievement-section .achieve-member-container {
	position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    padding: 24px 28px;
    margin-top: 10px;
    margin: auto;
    display: flex;
    flex-direction: column;
    color: var(--TXT_COLOR_1);
}

.vip-5 .upcoming-section .upcoming-member-container .dstg-info-memberGroup, 
.vip-5 .achievement-section .achieve-member-container .dstg-info-memberGroup {
    padding-bottom: 12px;
	font-size: var(--BODY_TXT_FONT_SIZE);
    font-weight: var(--REG_FONT_WEIGHT);
    color: inherit;
}

.vip-5 .upcoming-section .upcoming-member-container .member-progress-text {
	margin-top: 8px;
	text-align: left;
    user-select: none;
    font-size: var(--BODY_SMALL_TXT_FONT_SIZE);
    color: inherit;
}

.vip-5 .achievement-section .achieve-member-container .member-progress-text {
	margin-top: 8px;
	text-align: left;
    user-select: none;
    flex-grow: 2;
    font-size: var(--BODY_SMALL_TXT_FONT_SIZE);
    font-weight: var(--LIGHT_FONT_WEIGHT);
    color: inherit;
}

.vip-5 .upcoming-section .upcoming-member-container .currentPoint {
	padding-right: 5px;
}

.vip-5 .achievement-section .achieve-member-container .currentPoint {
	padding-right: 5px;
	font-size: var(--SECTION_HEADER_FONT_SIZE);
	font-weight: var(--MED_FONT_WEIGHT);
	color: var(--VIP_ACHIEVE_TXT_COLOR);
}

.vip-5 .upcoming-section .upcoming-member-container .member-progress-container, 
.vip-5 .achievement-section .achieve-member-container .member-progress-container {
	width: 100%;
    height: 6px;
	margin-top: 18px;
    border-radius: 4px;
    background: var(--TXT_COLOR_1);
    overflow: hidden;
}

.vip-5 .achievement-section .achieve-member-container .member-group-icon-achieve {
	position: absolute;
    width: 45px;
    top: -12px;
    right: -12px;
}

.vip-5 .upcoming-section .upcoming-member-container .member-group-icon-top {
    width: 80px;
    padding-top: 12px;
    padding-bottom: 6px;
}

.vip-5 .achievement-section .achieve-member-container .member-progress-container .member-progress-bar {
	height: 100%;
    width: 100%;
    transition: width 0.4s ease;
}

.vip-5 .upcoming-section .upcoming-member-container.firstRank, 
.vip-5 .achievement-section .achieve-member-container.firstRank {
	background: var(--VIP_CONTAINER_FIRST_BG);
	box-shadow: 0px 0px 4px 0px #00000040;
}

.vip-5 .upcoming-section .upcoming-member-container.secondRank, 
.vip-5 .achievement-section .achieve-member-container.secondRank {
	background: var(--VIP_CONTAINER_SECOND_BG);
}

.vip-5 .upcoming-section .upcoming-member-container.thirdRank, 
.vip-5 .achievement-section .achieve-member-container.thirdRank {
	background: var(--VIP_CONTAINER_THIRD_BG);
}

.vip-5 .upcoming-section .upcoming-member-container.fourthRank, 
.vip-5 .achievement-section .achieve-member-container.fourthRank {
	background: var(--VIP_CONTAINER_FOURTH_BG);
}

.vip-5 .upcoming-section .upcoming-member-container.topRank, 
.vip-5 .achievement-section .achieve-member-container.topRank {
	background: var(--VIP_CONTAINER_TOP_BG);
}

.vip-5 .achievement-section .achieve-member-container.firstRank .member-progress-container .member-progress-bar {
    background: var(--VIP_STATUS_BAR_FIRST_BG);
}

.vip-5 .achievement-section .achieve-member-container.secondRank .member-progress-container .member-progress-bar {
    background: var(--VIP_STATUS_BAR_SECOND_BG);
}

.vip-5 .achievement-section .achieve-member-container.thirdRank .member-progress-container .member-progress-bar {
    background: var(--VIP_STATUS_BAR_THIRD_BG);
}

.vip-5 .achievement-section .achieve-member-container.fourthRank .member-progress-container .member-progress-bar {
    background: var(--VIP_STATUS_BAR_FOURTH_BG);
}

.vip-5 .achievement-section .achieve-member-container.topRank .member-progress-container .member-progress-bar {
    background: var(--VIP_STATUS_BAR_TOP_BG);
}