.light_gradinet{ background: linear-gradient(90deg, #E8F0FE 0%, #FCE3E8 100%)}
.sidebar_container{ background: #F9FBFF; border-radius: 20px 20px 0 0}
.sidebar_head{ background: linear-gradient(85.14deg, #34578D 18.45%, #F53A45 89.62%); border-radius: 19px 19px 0 0;  height: 57px; display: flex; align-items: center; padding: 0 1.5rem; font-size: 18px; font-weight: 700; color: #fff}

.b2c_sec {padding: 0rem 1.5rem;}

.sidebar_title{ font-size: 16px; color: #E11F26; font-family: "Montserrat"; font-weight: 700; }
.sidebar_list{ list-style: none; padding-left: 0; margin-top: 1rem; display: flex; flex-direction: column;  row-gap:1rem;  }
.sidebar_list li a{ display: flex; align-items: center; column-gap: 1rem; font-size: 14px; transition: ease-in-out .3s}
.sidebar_list li a .icon_container{ width: 20px; height: 20px;   }
.sidebar_list li a .icon_container img{ opacity: .8; transition: ease-in-out .3s}
.sidebar_list li a:hover .icon_container img, .sidebar_list li.active a .icon_container img{ opacity: 1}
.sidebar_list li a:hover, .sidebar_list li.active a{ font-weight: 700}
.sidebar_head {margin-bottom: 2rem}

.filter_col{ display: flex; column-gap: 10px; align-items: center}
.filter_col select{    ; border-radius: 35px; appearance:none; padding-left: 15px; width: 117px; height: 39px; background: url('https://www.stellarinfo.com/help/images/dropDownOsSwitch.png')  #F4F4F4 no-repeat; outline: none; 
	background-position: 85% center; font-size: 14px; font-weight: 700; color: #506D9C; border: none}
.body_container{padding-top: 1rem}
.body_container .product_title{ font-size: 24px; font-weight: 700}


.product_logo_container{ width: 90px; height: 90px; display: flex; box-sizing: border-box;; padding: 1rem; border: solid 1px #AFAFAF; border-radius: 10px}
.product_wrapper_bg{ background: linear-gradient(85.14deg, #34578D00 18.45%, #F53A4500 89.62%); padding: 1px; border-radius: 15px;transition: ease-in-out .3s}
.product_logo_container{margin-top: .5rem}
.product_details h4{ font-size: 18px; color: #333; font-weight: 700}
.product_details p{ font-size: 14px;}
.product_variants_opt{ list-style: none; padding-left: 0; display: flex; column-gap: 15px; align-items: center; padding-top: 1rem; margin-bottom: 0}
.product_variants_opt li a{ border: solid 1px #18161770; border-radius: 30px; padding: 5px 20px; display: inline-flex; column-gap: 5px;  align-items: center;  transition: ease-in-out .3s; font-size: 13px;}
.product_wrapper_container{ padding:2rem 1rem; background:#FAFAFA; border-radius: 14px; transition: ease-in-out .3s}
.product_wrapper_bg:hover{ background: linear-gradient(85.14deg, #34578D 18.45%, #F53A45 89.62%);box-shadow: 7px 9px 17.4px rgba(0, 0, 0, 0.07);}
.product_variants_opt li a:hover{background: linear-gradient(85.14deg, #34578D 18.45%, #F53A45 89.62%); color:#ffffff; border-color: #ffffff; }
.product_variants_opt li a img{  transition: ease-in-out .3s}
.product_variants_opt li a:hover img{ filter: brightness(0) invert(1);  transform: translateX(3px);}
.product_wrapper_bg:hover .product_wrapper_container{ background: #ffffff}


@media screen and (max-width:1024px){
	.product_variants_opt li a{padding: 5px 10px}
	.product_variants_opt{ flex-wrap: wrap}
	.product_wrapper_container   .row{ align-items: flex-start}
	.product_logo_container{max-height: 90px; height: auto}
	.product_variants_opt{gap:10px} 
	.product_variants_opt li a{ font-size: 12px}
	 
}

@media screen and (max-width:991px){
	.product_logo_container img{ min-width: 34px}
	
}

@media screen and (max-width:572px){
.sidebar_title{font-size: 14px}
.sidebar_mobile_toggle {display: flex; justify-content: space-between}
.sidebar_body {display: none;margin-top: 5px;}
.sidebar_body.active {display: block;}
.sidebar_container hr {display: none;}
.arrow {transition: transform 0.3s ease;}
.arrow.rotate {transform: rotate(180deg);}	
	
.sidebar{ display: flex; justify-content: space-between; align-items: flex-start; column-gap: 15px; border-bottom: solid 1px #d1d1d1}
	.top_filter_nav{ border: none!important}
	.sidebar_head{ width: 100%; border-radius: 55px}
	.top_filter_nav, .sidebar_container { width: 50%}
	.filter_col select, .filter_col { width: 100%}
	
	.filter_col select , .sidebar_head{ height: 50px}
	.arrow{ filter: brightness(0) invert(1)}
	.sidebar_head{font-size: 14px}
	.product_logo_container{height: 90px!important}
	.product_details{ text-align: center; margin-top: 2rem}
	.product_variants_opt{justify-content: center}
	.body_container .product_title{ font-size: 18px}
	.sidebar_body {min-width: 300px; background: #F9FBFF }
	 
	
}

