.steps-main{position: relative;z-index: 9 !important;}
.steps-section .e-con-inner {max-width: var(--content-width);margin: 0 auto;}
.steps-section .step-part {display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; padding: 30px 0 80px;}
.steps-section .slider-images {width:50%;}
.steps-section .slide-item {text-align:center;}
.steps-section .slide-item img {margin: 0 auto; max-width: 512px; max-height: 350px;}
.steps-section .slick-arrow {font-size: 0; height: 50px; width: 50px; border: 1px solid var(--color-secondary); top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); display: flex; align-items: center; justify-content: center; z-index: 1; background-color: transparent;}
.steps-section .slick-arrow:hover, .steps-section .slick-arrow:focus {background-color:transparent;}
.steps-section .slick-arrow::after {content:""; position:absolute; z-index:0; top:0; bottom:0; height:102%; width:100%; background:var(--color-secondary); transform:scaleX(0); transform-origin:right; transition:transform .6s .1s cubic-bezier(0.645, 0.045, 0.355, 1); left:0; right:0;}
.steps-section .slick-arrow::before {content:""; height:26px; background-position:center; background-size:contain; background-image:url(/wp-content/uploads/2024/09/prev-arrow.svg); transition-delay:0.3s; z-index:99; background-repeat:no-repeat; position:absolute; left:0; right:0; text-align:center; width:100%;}
.steps-section .slick-arrow:hover::after {transform:scaleX(1); transform-origin:left; transition:transform .6s cubic-bezier(0.645, 0.045, 0.355, 1); transition-delay:0.2s;}
.steps-section .slick-arrow.slick-next::before {transform:rotate(180deg);}
.steps-section .slick-arrow:hover::before {background-image:url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="14.121" height="25.415" viewBox="0 0 14.121 25.415"%3E%3Cpath d="M2894.041-17005.59l12, 12, 12-12" transform="translate(-16992.176 -2893.334) rotate(90)" fill="none" stroke="%23fff" stroke-width="2"/%3E%3C/svg%3E');}
.steps-banner {background: var(--color-FFFFFF); padding-left: 20px; padding-right: 20px;}
.listing-panel {background-color: var(--color-FFFFFF); padding-left: 20px; padding-right: 20px;position: relative;}
.steps-section {padding-top: var(--headerHeight); padding-bottom:var(--s100);background-color: var(--color-F1EEE9);}
.listing-panel ul {list-style:none; display:flex; margin: 0; align-items: center;padding: 0;}
.listing-panel ul li {min-width:200px; background-color:var(--color-FFFFFF);}
.action-button {background: var(--color-FFFFFF);border: none;padding-right: 10px;}
.listing-panel ul li button {padding: 10px 36px; border: 1px solid var(--color-F1EEE9); color: rgb(51 51 51 / 60%); background-color: var(--color-FFFFFF); text-transform: uppercase; font-size: var(--f18); z-index: 1; position: relative; cursor: pointer; transition: color .6s cubic-bezier(0.645,0.045,0.355,1); transition-delay: 0.2s; font-weight: 500; width: 100%; min-height: 100%;}
.listing-panel ul li button:after {content:""; position:absolute;top:0; bottom:0; height:102%; width:100%; background:var(--color-F1EEE9); transform:scaleX(0); transform-origin:right; transition:transform .6s .1s cubic-bezier(0.645,0.045,0.355,1); left:0; right:0; z-index:-1;}
.listing-panel ul li button:hover:after {transform:scaleX(1); transform-origin:left; transition:transform .6s cubic-bezier(0.645,0.045,0.355,1); transition-delay:0.2s;}
.listing-panel ul li button:hover, .listing-panel ul li button:focus {background-color:transparent; color:var(--color-000000);}
.listing-panel ul li button.active {background-color:var(--color-F1EEE9); color:var(--color-000000);}
.listing-panel ul li.action-button button {margin: 5px; font-size: var(--f14); padding: 6.5px 36px; background-color: rgba(17, 17, 17, 0.5); color: var(--color-FFFFFF); border: 1px solid rgb(136 136 136);}
.listing-panel ul li.action-button button:hover {background-color: rgba(17, 17, 17, 0.5);}
.data-content {padding:var(--s60) 20px; padding-bottom:0;}
.data-content .counting, .data-content .heading-product {margin-bottom:var(--s30);}
.heading-product h6{margin: 0; color: var(--color-primary) !important; font-weight: normal !important;}
.heading-product .select-color{ font-weight: 500 !important}
.option-container {display:flex;gap:20px;align-items: flex-start;flex-wrap: wrap; overflow: auto; padding: 6px;}
.step-wrapper > .option-container{margin-bottom:var(--s45);}
.option-box {display:block; border:2px solid #e5e5e5; width:calc((25% * var(--imgcount) ) - 40px); flex: 0 0 calc((25% * var(--imgcount) ) - 40px); padding:10px; cursor:pointer; transition:border-color 0.3s ease; text-align:center; max-width:calc((25% * var(--imgcount) ) - 40px);}
.option-box input[type="radio"], .option-box input[type="checkbox"] {display:none;}
.option-box .image-box img {width:100%; height:auto; display:block; margin-bottom:10px; height: 200px; object-fit: cover;}
.option-box:hover .example-image-link {
	opacity: 1;
}
.option-box .example-image-link {
    display: flex;
    height: 150px;
    width: 60%;
    background: #000;
    z-index: 99;
    position: absolute;
    right: 10px;
    top: 10px;
    background: linear-gradient(219deg, #000000 0%, #ffffff00 50%);
    border-radius: 0% 0% 0% 0%;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px;
	opacity: 0;
	transition: all 0.2s;
	pointer-events: none;
}
.option-box .example-image-link + .example-image-link {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.option-box .example-image-link svg{
	width: 50px;
    height: 40px;
	pointer-events: all;
}
.option-box .example-image-link svg g{ fill: #fff;}
/* .option-box label{ position: relative; } */
.option-info {display:flex;justify-content:space-between;align-items: flex-start;font-size:18px;text-align: left; position: relative; color: var(--color-primary);}
.option-info .option-check{display: flex;align-items: flex-start;}
.option-info .radio-label {display:inline-block;width:19px;height:19px;border-radius:50%;border:2px solid #333;margin-right:10px;vertical-align:middle;flex: 0 0 19px;top: 3px;position: relative; display: flex; align-items: center; justify-content: center;}
.option-info .checkbox-label::before {content:''; display:inline-block; width:19px; height:19px; border:2px solid #333; margin-right:10px; vertical-align:middle;}
.custom-checkbox .checkbox-label:checked ~ .option-info .checkbox-label::before {background-color:#333; border-color:#333;}
.custom-radio:checked ~ .option-info .radio-label::after {content:''; display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; background-color:var(--color-secondary); 
	/* position:absolute; left:calc(50% - 6px); top:calc(50% - 6px);  margin-right:10px;*/
}
.custom-checkbox:checked ~ .option-info .checkbox-label::before{background-color: var(--color-secondary);}
.custom-checkbox:checked ~ .option-info .checkbox-label::after {
	content: '';
    display: block;
    width: 5px;
    height: 10px;
    border: solid var(--color-FFFFFF);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    left: 8px;
    top: 9px;
}
.option-box:hover {background-color:var(--color-FFFFFF); border-color: var(--color-000000);}
.option-box{position: relative;}
.image-box {
    z-index: 1;
    position: relative;
	display: flex;
    margin-left: -5px;
    margin-right: -5px;
}
.image-box > div{    padding: 0 5px;     width: calc(100%);}
.option-box input[type="radio"] ~ .check-bg, .option-box input[type="checkbox"] ~ .check-bg{ position: absolute; width: 100%; height: 100%; background-color: transparent; top: 0; left: 0; pointer-events: none;}
.option-box input[type="radio"]:checked ~ .check-bg, .option-box input[type="checkbox"]:checked ~ .check-bg,
.option-box input[type="radio"]:checked, .option-box input[type="checkbox"]:checked {background-color:var(--color-FFFFFF);}
.checkbox-label {position:relative;}
.option-box input[type="radio"] .option-info .radio-label {position:relative;}
.price {font-weight:normal; margin-left:10px; font-weight: bold;}
.logo-part {width:14%;}
.pricing {width:17%;}
.steps-section .pricing h2 {margin: 0;font-family: var(--source-sans-pro);}
.pricing span {font-size: var(--f20);}
.navigation-step {display:flex; gap: 20px; flex-wrap: wrap;}
.navigation-step button{cursor:pointer;background-color:transparent !important;font-family:"sonar-sans",Sans-serif;font-size:14px;font-weight:500;line-height:1.5em;letter-spacing:2px;border-style:solid;border-width:1px 1px 1px 1px;border-color:var(--color-primary) !important;border-radius:0px 0px 0px 0px;padding:12px 24px;text-transform:uppercase;min-width:100px;position:relative;color:var(--color-primary);transition:color .6s .1s cubic-bezier(0.645,0.045,0.355,1);overflow:hidden;}
.navigation-step button span{position:relative;z-index:9;display: flex;align-items: center;}
.navigation-step button span svg{margin-left: 20px; }
.navigation-step button span svg path{transition: all 0.2s; transition-delay: 0.4s;}
.navigation-step button::after{content:"";position:absolute;z-index:0;top:0;bottom:0;height:102%;width:100%;background:var(--color-primary);transform:scaleX(0);transform-origin:right;transition:transform .6s .1s cubic-bezier(0.645,0.045,0.355,1);left:0;right:0;}
.navigation-step button.prev-button span{flex-direction: row-reverse;}
.navigation-step button.prev-button svg{     margin-right: 20px;
    margin-left: 0;
	transform: rotate(180deg);} 
.navigation-step button:focus,
.navigation-step button:hover{
	background-color: transparent;
	color: var(--color-FFFFFF) !important;
}
.navigation-step button:focus span svg path,
.navigation-step button:hover span svg path{stroke:var(--color-FFFFFF)}
.navigation-step button:focus::after,
.navigation-step button:hover::after {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform .6s cubic-bezier(0.645,0.045,0.355,1);
    transition-delay: 0.2s;
}

.color-box {width:100px; height:100px; position:relative; flex:0 0 100px; cursor: pointer;}
.color-box input[type="radio"] {opacity: 0;}
.color-box .color-span {display: block; position:absolute; width:calc(100% + 9px); height:calc(100% + 9px); left:-5px; top:-5px; border:1px solid var(--color-primary); opacity:0; transition:all 0.2s; pointer-events:none;}
.color-box:hover .color-span, .color-box.is-active .color-span {opacity:1;}
.option-container input[type="radio"]:checked + .color-span {
   opacity: 1;
}
.flexible-panel {position: relative;}
.img-box .image-box img {max-width: 280px;}
.step-wrapper:not(.stepActive){display: none;}

.step-wrapper-0{margin-top:27px;}
.color-box .color-span::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:38px;height:26px;background-image:url("/wp-content/uploads/2024/11/check-mark.svg");opacity:0;transition:0.3s;transform:scale(0);}
.color-box input[type="radio"]:checked + .color-span::before{transform:scale(1);opacity:1;}
.color-box [data-name="White"] + .color-span::before{background-image:url("/wp-content/uploads/2024/11/check-mark-black.svg");}



.heading-product {
    display: flex;
    align-items: center;
}
.step-tooltip {
    display: flex;
    align-items: center;
    margin-left: 10px;
    position: relative;
}
span.t-icon {
    display: flex;
	cursor: pointer;
}
span.t-icon:hover ~ .t-details {
    opacity: 1;
}

.t-details {
    position: absolute;
    width: 450px;
    top: -3px;
    left: calc(100% + 10px);
    padding: 5px 10px;
    background: var(--color-primary);
    color: var(--color-FFFFFF);
    opacity: 0;
    transition: opacity 0.3s;
    text-wrap: revert-layer;
    z-index: 9;
}

/* 10-06-25 */
/* .step-wrapper.step-wrapper-7 .option-container{flex-wrap:wrap;} */
.option-container .childrens{width:100%;}
.option-container .childrens > .children-iner-wrap:not(:last-child){margin-bottom:var(--s45);}
@media (max-width:1500px) and (min-width:1025px){
	.steps-section .pricing h2{font-size:3.5vw;}
}

@media (max-width:1440px){
	.pricing {width:auto;}
	.steps-section .step-part {padding:var(--s45) 0 var(--s150);gap:20px;}
	.option-box {
		width: calc((33.33% * var(--imgcount) ) - 40px);
		max-width: calc((33.33% * var(--imgcount) ) - 40px);
	}
	.listing-panel ul li {align-self:stretch;}
	.listing-panel ul li.action-button {align-self:center;}
	
}
@media (max-width: 1200px) {
	.logo-part {width:20%;}
	.steps-section .slider-images {width:60%;}
	.steps-section .slide-item img {max-width:100%; max-height:300px;}
	.steps-section .slick-prev {left:0;}
	.steps-section .slick-next {right:0;}
	.listing-panel ul li {min-width:auto;}
	.listing-panel ul li.action-button button {min-width:auto;}
}
@media (max-width:1024px) {
	.steps-section .step-part {flex-flow: column;}
	.pricing, .logo-part {width:100%; text-align:center;}
	.option-box {
		width: calc((50% * var(--imgcount) ) - 40px);
		max-width: calc((50% * var(--imgcount) ) - 40px);
		flex: 0 0 calc((50% * var(--imgcount) ) - 40px);
	}
	.steps-section .slider-images {width: 100%;}
	.logo-part img {
    max-height: 100px;
}
}
@media (max-width: 991px) {
	.lisitng-filter {overflow-x:auto;}
	.listing-panel ul li {min-width:200px;}
	.listing-panel ul li button {padding:10px 15px;}
}
@media (max-width:767px) {
	.steps-section {padding-top:70px;}
	.steps-section .e-con-inner{max-width: 100%;}
	.steps-section .slide-item img {max-width:320px; max-height:initial;}
	.steps-section .slick-arrow {top:auto; transform:none; bottom:-70px; margin:0 auto; left:0; right:0;}
	.steps-section .slick-prev {left:-60px;}
	.steps-section .slick-next {right:-60px;}
	.listing-panel{padding-left:0;padding-right:0;}
	.flexible-panel {width: 100%;}
    .listing-panel ul li {    flex: 1 0 auto;}
    .listing-panel ul li button { letter-spacing: 1px;}
    .steps-section .slider-images {padding-bottom: 70px;}
	.color-box {
		width: 70px;
		height: 70px;
		flex: 0 0 70px;
	}
	.option-container:has(.color-box) {
    justify-content: center;
}
}
@media (max-width: 575px) {
	.steps-section .slide-item img {max-width: 100%; max-height: initial;}
	.logo-part img {max-width: 80px;}	
	.option-box {
		width: calc((100% * 1 ) - 40px);
		max-width: calc((100% * 1 ) - 40px);
		flex: 0 0 calc((100% * 1 ) - 40px);
	}
	.heading-product {
    justify-content: center;
}
.image-box {
    flex-direction: column;
    margin-inline: 0;
    align-items: center;
}
.navigation-step {
    justify-content: center;
}
	.option-container {
    justify-content: center;
}
}