@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --clr-primary: 137 18 18;		/*#891212*/
    --clr-danger:255 138 138;          /* #ff8a8a */
    --clr-warning:255 211 90;        /* #ffd35a */
    --clr-info:114 232 255;           /* #72e8ff */
    --clr-success:118 245 134;       /* #76f586 */
	
  --clr-light: 244 243 242;		/*#f4f3f2*/
  --clr-dark: 0 0 0;			/*#000000*/
  --clr-white: 255 255 255;			/*#ffffff*/
	
  --padding: max(30px, 15px);
	
}

body {
	font-family: "Work Sans", sans-serif;
	font-weight: 400;
	color: rgb(var(--clr-dark));
	font-size: 14px;
	line-height: 20px;
}

*{
	box-sizing: border-box;
}
a{
    position: relative; 
    text-decoration: none; 
    color: rgb(var(--clr-dark));
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}
a:hover{ text-decoration: none; color: rgb(var(--clr-primary));}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{margin-bottom: 1.5rem;}
h1, .h1 {font-size: clamp(36px, 4vw, 48px);}
h2, .h2 {font-size: clamp(30px, 4vw, 36px);}
h3, .h3 {font-size: clamp(24px, 4vw, 30px);}
h4, .h4 {font-size: clamp(20px, 4vw, 24px);}
h5, .h5 {font-size: clamp(18px, 4vw, 20px);}
h6, .h6 {font-size: 14px; font-weight: 600;}

p {margin: 0 0 20px;}
.fw-light{font-weight: 200;}
.fw-bold, strong{font-weight: 600;}
.vcenter { display:flex; flex-flow: wrap; align-items: center;}
.equal-height{display:flex; flex-flow: wrap;}


/*---Additional css start----*/

header{position: sticky; top: 0; z-index: 9; background: rgb(var(--clr-white)); border-bottom: 1px solid rgb(var(--clr-dark) / 10%);}

#cart-total{max-width: 3ch; height: 20px; overflow: hidden; position: absolute; word-wrap: break-word; white-space: normal;left: 4px; bottom: 8px; font-size: 11px;}
.empty-cart{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.empty-cart img{max-width: 50px;}


#cart .offcanvas{
    display: flex;
    flex-direction: column;
	z-index: 1001;
	position: fixed;
    top: 0;
	width: 450px;
    min-width: 400px;
    max-width: 90%;
    height: 100vh;
    overflow-y: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #fff!important;
	padding: 0 20px;
    font-size: inherit;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

#cart.open .offcanvas {
    display: flex;
 transform: translateX(0);
}
#cart.close-canvas .offcanvas {
 transform: translateX(100%);
}
/*
.offcanvas{
    box-shadow: 0 0 0 100vmax rgb(var(--clr-dark) / 40%);
    clip-path: inset(0 -100vmax);
      transition: all 0.5s ease;
}
*/
.offcanvas-header, .offcanvas-footer {
	flex: 0 0 auto;
}
.offcanvas-header{
	padding: 10px 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.offcanvas-footer{
	border-top: 1px solid rgb(var(--clr-dark)/10%);
	padding-top: 15px;
}
.offcanvas-footer .table td{
	border: 0;
	padding: 5px 0;
}

.offcanvas-body{
	flex: 1 1 auto;
	overflow-y: auto;
}
.offcanvas-body td{vertical-align: middle; padding-top:15px!important; padding-bottom:15px!important;}
.offcanvas-body p{margin-bottom: 5px;}
.offcanvas-body h6{margin-top: 0; margin-bottom: 5px;}
.offcanvas-body::-webkit-scrollbar { 
	display: none; 
}
.offcanvas-footer .btn, .offcanvas-footer button{min-width: 100%;}

nav#top{background: rgb(var(--clr-light)); padding-block: 6px; font-size: 14px; margin-bottom: 15px;}
nav#top>div{display: flex; align-items: center; justify-content: space-around;}
nav#top #top-links{margin-left: auto;}
nav#top #top-links>ul{ margin-bottom: 0; line-height: 13px;}
nav#top #top-links>ul>li{ padding-inline:10px;}
nav#top #top-links>ul>li+li{ border-left: 1px solid rgb(var(--clr-dark));}

#logo{text-align: center;}
#logo img{max-width: 160px; display: inline}

#searchbox{position: absolute; left: 0px; right: 0px; background: white; z-index: 1;}
#searchbox>#search{ max-width: 500px; width: 100%; margin: 30px auto; padding-inline: 15px;}
#searchbox>#search>.form-control{padding-left: 0; border: 0; box-shadow: none; border-bottom: 1px solid rgb(var(--clr-dark));background: none;}
.video-row {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* spacing between videos */
}


.herobanner-shorts {
    overflow: hidden;
  aspect-ratio: 9/16;
  width: calc(100% / 3);
  /*
position: relative;
  margin-bottom: var(--padding);
  width: 33%;
  overflow: hidden;
  aspect-ratio: 9/16;
  */
}
.herobanner-shorts>video{width: 100%;  object-fit: cover;}
.herobanner-shorts>iframe{width: 300%; height: 100%; margin-left: -100%; pointer-events: none;}
.herobanner-shorts>.hero-caption{text-transform: uppercase; max-width: 550px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: absolute; z-index: 5; inset: 0 0 0 auto;}
/*.herobanner-shorts>iframe{width: 33.33%;
  height: 105%;
  margin-left: -5px;
  pointer-events: none;
}
*/
.herobanner{position: relative; margin-bottom:var(--padding); width: 100%; overflow: hidden; aspect-ratio: 16 / 9;}
.herobanner>video{width: 100%;  object-fit: cover;}
.herobanner>iframe{width: 300%; height: 100%; margin-left: -100%; pointer-events: none;}
.herobanner>.hero-caption{text-transform: uppercase; max-width: 550px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: absolute; z-index: 5; inset: 0 0 0 auto;}



section, .section{margin-bottom:var(--padding);}
section>div:not(.row):first-child, .section>div:not(.row):first-child{padding-block:var(--padding);}

.bg1{background: url("../image/cloth-bg.jpg") center center; background-size: cover;}

.img-boxes{display: flex; gap:var(--padding)}
.img-boxes>*{flex: 1;}
.img-overlay{ display: grid; place-items: start; padding-block: 0 !important;}
.img-overlay>* { grid-row: 1 / -1; grid-column: 1 / -1;}
.img-overlay>img {max-height: 520px; height: 100%; width: 100%; object-fit: cover;}
.img-overlay .img-overlay-caption{color: rgb(var(--clr-dark)); padding:var(--padding);}
.img-overlay .img-overlay-caption>*:first-child{margin-top: 0;}
.img-overlay .img-overlay-caption>.btn{height: auto; padding-block: 6px;}

.stone-box{font-size: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 15px;}
.stone-box a{display: block; text-align: center; text-transform: uppercase;}
.stone-box a img{max-height: 70px; max-width: 100%; padding: 15px; border-radius: 10px; display: block; margin-inline:auto; margin-bottom: 5px;}
.stone-box a:hover img{background:rgb(var(--clr-light));}

.social{display: flex; gap:5px; font-size: 18px;}
.social a{display: flex; place-content: center; place-items: center; width: 30px; padding: 5px; aspect-ratio: 1; border-radius: 50%;}
.social a:hover{background:rgb(var(--clr-dark)); color: rgb(var(--clr-white));}
.social a:after{display: none;}

#content{min-height: 350px;}
#content>a::after, footer a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: rgb(var(--clr-primary));
  transform: scaleX(0);
transform-origin: left;
  transition: transform 0.5s ease;
}
#content>a:hover::after, footer a:hover::after {
  transform: scaleX(1);
}

.breadcrumb{display: none;}

/*---Navbar menu start----*/

.top-navbar{
	display: grid;
    grid-template-columns: 1fr auto;
	align-items: center;
}
.top-navbar span#category{display: none!important;}

#menu.navbar{margin-bottom: 0;text-transform: uppercase; font-weight: 500; border: 0;}
#menu.navbar .nav>li>a:focus, #menu.navbar .nav>li>a:hover{background: transparent; color: rgb(var(--clr-primary))}
#menu.navbar .nav .open>a, #menu.navbar .nav .open>a:focus, #menu.navbar .nav .open>a:hover { background-color: transparent; color: rgb(var(--clr-primary)); }
#menu.navbar .nav>li:last-child{display: none;}
#menu.navbar .dropdown-menu{border-radius: 0; border: 0; font-size: 13px;}
#menu.navbar .dropdown-menu>.dropdown-inner>ul>li{border-bottom: 1px solid rgb(var(--clr-light))}
#menu.navbar .dropdown-menu>.dropdown-inner>ul>li>a{display: block; padding: 8px 15px;}
#menu.navbar .dropdown-menu>.dropdown-inner>ul>li>a:hover{color: rgb(var(--clr-primary));}
#menu.navbar .dropdown-menu>.see-all{display: block; font-size: 12px; padding: 8px 15px; text-transform: none;}

.navbar-toggle{
    font-size: 24px!important;
    margin-top: 2px;
    padding-block: 5px !important;
    position: absolute;
    left: 0;
}

.top-navbar .btn-group>.btn{border: 0; box-shadow: none; font-size: 24px; padding-block: 0; display: grid; place-items: center;}
.top-navbar .btn-group>.btn:hover, .top-navbar .btn-group>.btn:active{background: transparent; color:rgb(var(--clr-dark)); box-shadow: none; }

/*---bootstrap Input start----*/

.btn, .form-control{border-radius: 0; font-size: 14px; padding-block: 12px; height: 44px;}
.btn{outline: none;    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;}
.btn.btn-lg{font-size: 14px; padding-block: 12px; height: 44px;}
.btn.btn-sm{font-size: 12px; padding-block: 5px; height: auto; line-height: 20px;}
.btn.btn-xs{font-size: 12px; padding-block: 0; height: auto; line-height: 20px;}

.btn-dark{background-color:rgb(var(--clr-dark)); border-color:rgb(var(--clr-dark)); color: rgb(var(--clr-white));}
.btn-dark:hover, .btn-dark:focus-visible, .btn-dark:focus,.btn-dark.active.focus, .btn-dark.active:focus, .btn-dark.focus, .btn-dark.active, .btn-dark:active, .btn-dark:active.focus, .btn-dark:active:focus, .btn-dark:focus {outline: none!important; background-color:rgb(var(--clr-primary)); border-color:rgb(var(--clr-primary)); color: rgb(var(--clr-white));}

.btn-default{background-color:transparent; border-color:rgb(var(--clr-dark)); color:rgb(var(--clr-dark));}
.btn-default:hover, .btn-default:focus-visible, .btn-default:focus,.btn-default.active.focus, .btn-default.active:focus, .btn-default.focus, .btn-default.active, .btn-default:active, .btn-default:active.focus, .btn-default:active:focus, .btn-default:focus{outline: none!important; background-color:rgb(var(--clr-dark)); border-color:rgb(var(--clr-dark)); color: rgb(var(--clr-white));}

.btn-primary{background-color:rgb(var(--clr-primary)); border-color:rgb(var(--clr-primary)); color:#fff;}
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:focus,.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.focus, .btn-primary.active, .btn-primary:active, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:focus{outline: none!important; background-color:rgb(var(--clr-dark)); border-color:rgb(var(--clr-dark));}

.btn-link{color: inherit; padding-inline: 3px; text-transform: none; font-weight: 500; box-shadow: inset 0 -1px 0 rgb(var(--clr-dark));}
.btn-link:hover{text-decoration: none; color: rgb(var(--clr-white)); box-shadow: inset 0 -50px 0 rgb(var(--clr-dark));}

.text-white .btn-link{box-shadow: inset 0 -1px 0 rgb(var(--clr-white));}
.text-white .btn-link:hover{color: rgb(var(--clr-dark)); box-shadow: inset 0 -50px 0 rgb(var(--clr-white));}

.btn-group-gutter .btn+.btn{margin-left: 10px;}

.input-group-lg>.form-control, .input-group-lg>.input-group-addon, .input-group-lg>.input-group-btn>.btn{height: 44px; font-size: 14px; border-radius: 0;}

label {
    font-size: 12px;
    font-weight: 400;
}

.form-control{
    border-color: rgb(var(--clr-light));
    background-color:rgb(var(--clr-light));
    box-shadow:none;
}
.form-control:focus, .form-control:focus-visible{box-shadow: none; outline: none;}


/*------Checkbox and rdio style start ------*/
.checkbox label, .radio label{padding-left: 30px;}
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio]{margin-left: -30px;}
input[type=checkbox] {
  position: relative;
	border: 0.15em solid rgb(var(--clr-dark));
	background: none;
	cursor: pointer;
	line-height: 0;
	margin: 0 .6em 0 0;
	outline: 0;
	padding: 0 !important;
	vertical-align: text-top;
	height: 20px;
	width: 20px;
	-webkit-appearance: none;
  opacity: .5;
}

input[type=checkbox]:hover {
  opacity: 1;
}

input[type=checkbox]:checked {
  background-color: rgb(var(--clr-dark));
  opacity: 1;
}
input[type=checkbox]:focus {
  outline: none;
}
input[type=checkbox]:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 4px;
  height: 10px;
  border: solid rgb(var(--clr-white));
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}

input[type=radio] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  -moz-appearance: none;
       appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  font: inherit;
  color: rgb(var(--clr-white));
    width: 16px;
    height: 16px;
  border: 0.15em solid rgb(var(--clr-dark));
  border-radius: 50%;
position: relative;
    top: -1px;
}

input[type=radio]::before {
  content: "";
	position: absolute;
	inset: 2px;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em rgb(var(--clr-dark));
  /* Windows High Contrast Mode */
  background-color: rgb(var(--clr-dark));
}

input[type=radio]:checked::before {
  transform: scale(1);
}

input[type=radio]:focus {
  outline: none;
  outline-offset: 0;
}

.checkbox-inline.disabled {opacity: .3}



.text-white {
    color: rgb(var(--clr-white))!important;
}
.text-danger {
    color: rgb(var(--clr-danger))!important;
}

/*------Custom animation start ------*/

@keyframes slideDown {
  0% {
    transform: translateY(2rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(2rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(2rem);
    -webkit-opacity: 0;
  }
}
.slideDown {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}


/*------Alert style start ------*/

.alert {
    position: fixed;
    top: 165px;
    right: 10px;
    z-index: 1;
    max-width: 500px;
    line-height: 20px;
    font-size: 13px;
    padding-block: 6px;
    border-radius: 0;
    webkit-animation-name: slideDown;
    animation-name: slideDown;
    animation-duration: 0.2s;
    -webkit-animation-duration: 0.2s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

.alert-dismissable .close, .alert-dismissible .close {
    position: absolute;
    right: 10px;
    top: 6px;
}
.alert a{color: rgb(var(--clr-dark)); position: relative; display: inline-block;}

.alert a::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: rgb(var(--clr-dark));
  transform: scaleX(0);
transform-origin: left;
  transition: transform 0.5s ease;
}
.alert a:hover::after{
  transform: scaleX(1);
}



.alert-success {
    background-color: rgb(var(--clr-success));
    border-color: rgb(var(--clr-success));
}
.alert-info {
    background-color: rgb(var(--clr-info));
    border-color: rgb(var(--clr-info));
}
.alert-warning {
    background-color: rgb(var(--clr-warning));
    border-color: rgb(var(--clr-warning));
}
.alert-danger {
    background-color: rgb(var(--clr-danger));
    border-color: rgb(var(--clr-danger));
    color: rgb(var(--clr-dark));
}


/*------Panel card start------*/
.panel-group .panel+.panel {
    margin-top: -1px;
}
.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
    border: 0;
	padding-top: 0;
	padding-inline: 0;
}
.panel-group .panel{border: 0;box-shadow: none;}

.panel-default>.panel-heading {
        background-color: transparent;
    border-top: 1px solid rgb(var(--clr-dark)/20%);
	padding: 0;
	    border-radius: 0;
}

.panel-title {
    text-transform: uppercase;
    padding: 20px 0;
    font-size: 14px;
        font-weight: 600;
}
.panel-title i{display: none;}
.panel-title>a{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
	    text-decoration: none;
}
.panel-title:before {
	content: '\f105';
    font-family: 'Line Awesome Free'!important;
    font-weight: 700;
    position: absolute;
    font-size: 18px;
    line-height: 22px;
    right: 0;
    top: calc(50% - 10px);
	-webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}
.collapsed .panel-title:before{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.panel-heading {
    position: relative;
    cursor: pointer;
}

/*
.panel-body, .panel-heading {
    padding-right: 0;
    padding-left: 0;
}
*/
.panel{
	border-radius: 0;
	box-shadow: none;
	position: relative;
	isolation: isolate;
}
.panel-default {
    border-color: #dddddd;
}
.panel-body p+p:last-of-type {
	margin-bottom: 0;
}
.panel:hover:before, 
.panel:hover:after{
	transform: scale(1);
}

/*------Panel card end------*/


/*------Panel card start------*/
.pagination>li:first-child>a, .pagination>li:first-child>span, .pagination>li:last-child>a, .pagination>li:last-child>span{border-radius: 0;}
.pagination>li>a, .pagination>li>span{ color: inherit;}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{ background: rgb(var(--clr-primary));border-color:rgb(var(--clr-primary));}
/*------Panel card end------*/


/*---swiper start----*/

.swiper-viewport{
    border: 0!important;
    box-shadow: none!important;
    border-radius: 0!important;
    margin-bottom: 40px !important;
}
.swiper-button-next, .swiper-button-prev{
    width: 44px!important; height: 44px!important;
}
/*
.swiper-viewport:hover .swiper-button-next, .swiper-viewport:hover .swiper-button-prev{
    opacity: 1!important;
}
.swiper-button-disabled{opacity: .3!important;}
*/
.swiper-pagination{display: none;}
.swiper-button-prev:before, .swiper-button-next:before{
    font-family: 'Line Awesome Free'!important;
    font-weight: 700;
    height: 100% !important;
    width: 100% !important;
    display: grid;
    place-content: center;
    background: rgb(var(--clr-primary));
    color: rgb(var(--clr-white)) !important;
    border-radius: 50%;
    font-size: 16px !important;
    text-shadow: none; 
}
.swiper-button-prev:before{
    content: '\f104'!important;
}
.swiper-button-next:before{
    content: '\f105'!important;
}

.panel{ border: 0; border-radius: 0;box-shadow: none;}
.panel-body { padding: 25px;}


/*---product thumb start----*/

.product-thumb>.image{background:rgb(var(--clr-light)); aspect-ratio: 1; display: grid; place-content: center;}
.product-thumb>.image img{mix-blend-mode: multiply;}
.product-thumb .caption h5{
        height: 40px;
    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.home-category-slider{text-align: center;}
.home-category-slider span{font-size: 18px; text-transform: uppercase; margin-top: 15px; display: inline-block; font-weight: 500}




/*------Inner page global css start------*/

#information-contact.container, #information-information.container, #checkout-cart.container{max-width: 1200px;}
#account-register, #account-login, #account-forgotten, #information-contact, #information-information, #checkout-cart{padding-block:var(--padding); }

#product-category .input-group>.form-control, #product-category .input-group>label.input-group-addon, #product-search .input-group>.form-control, #product-search .input-group>label.input-group-addon{background: transparent; text-transform: uppercase; font-weight: 500;padding-inline: 0; border-color: transparent;}


#checkout-cart { box-shadow: 0 0 0 100vmax rgb(var(--clr-light)); clip-path: inset(0 -100vmax); background:rgb(var(--clr-light));}
#checkout-cart .panel-title{text-transform: none;}
#checkout-cart p{margin-bottom: 5px;}
#checkout-cart .table>tbody>tr>td, #checkout-cart .table>tbody>tr>th, #checkout-cart .table>tfoot>tr>td, #checkout-cart .table>tfoot>tr>th, #checkout-cart .table>thead>tr>td, #checkout-cart .table>thead>tr>th{border-bottom: 0;}
.order-total tr td{ border-top: none !important; border-bottom: none !important; }
.order-total tr td .fw-bold, .order-total tr td strong, .order-total tr td b { font-weight: normal; }
.order-total tr:last-child td{ border-top: 1px solid #e5e5e5 !important; font-size: 16px; font-weight: 600;}



#product-product h2, #information-contact h1, #checkout-cart h1, #checkout-checkout h1, #container h1, #account-edit h1, #account-transaction h1, #common-success h1, #error-not-found h1, #product-search h1, #account-account h1, #account-order h1, #account-download h2, #account-password h1, #account-forgotten h1, #account-address h2, #account-wishlist h2, #account-reward h1, #account-return h1, #account-recurring h1, #account-affiliate h1, #account-newsletter h1, #product-manufacturer h1, #account-return h1, #product-category h2, #product-manufacturer h1, #account-order h1, #account-password h1, #account-address h1, #account-wishlist h1, #account-download h1, #account-reward h1, #account-recurring h1, #account-affiliate h1, #account-newsletter h1{ font-size:14px; text-transform: uppercase; font-weight: 500;}

#account-login h2, #account-register h2, #account-forgotten h2, #product-product h1, #information-contact h1, #information-information h1{font-size:24px; margin-top: 0;}

#information-contact .media{max-width: 450px;}



/*------Product details page start------*/
#product-product .product-gallery{display: flex; flex-direction: column; gap:3px; margin-left: -30px;}
#product-product .product-gallery a{background: rgb(var(--clr-light));}
#product-product .product-gallery a img{mix-blend-mode: multiply; width: 100%;}
#product-product .product-desc{padding: 5vw; position: sticky; top: 50px;}
#product-product .form-control{height: 44px;}

#product-product #product .form-group>div{display: flex; flex-flow: wrap; gap:10px;}
#product-product #product .form-group>div>div{ margin: 0;}
#product-product #product input[type="radio"], #product-product #product input[type="checkbox"] {
    width: 100%;
    height: 100%;
    border: 0;
    margin-top: 0;
    margin-inline:0;
    right: 0;
    top: 0;
    border-radius:0;
    background-color: rgb(var(--clr-light));
    z-index: -1;
}
#product-product #product input[type="radio"]:checked, #product-product #product input[type="checkbox"]:checked {
    box-shadow: inset 0 0 0 1px rgb(var(--clr-dark));
}
#product-product #product .form-group>div>div label{ 
    text-align: center;
    font-size: 12px;
    line-height: normal;
    padding: 5px;
}
#product-product #product input[type="radio"]:before{display: none;}
#product-product #product label {
    font-size: inherit;
}
#product-product #product label img{
    border: 0;
    max-width: 35px;
    display: block;
    margin-inline: auto;
    mix-blend-mode: multiply;
}

.rating span { width: 1.5em;}

/*------Checkout page start------*/

#checkout-checkout .panel-default>.panel-heading{border: 0;}
#checkout-checkout .panel-title{text-transform: none;}


/*------Login, forgot and register page start------*/

.custom-layout {
	background: rgb(var(--clr-white));
	margin-left: 0;
	margin-right: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.custom-layout .custom-col-right{
	padding: var(--padding);
	box-shadow: 0 0 20px rgb(0 0 0 / 15%);	
}
.custom-col-right .form-title{margin-top: 0; font-size: 24px;}
/*.layout-col-2 .custom-col-left{display: flex!important;}*/
.custom-col-left{padding: 0; display: none!important;}
.custom-layout > [class*='col-'] { display: flex; flex-direction: column;}


/*---Fancybox light theme start----*/

.fancybox__toolbar{text-shadow: none;}
.fancybox__container{
    --fancybox-bg: rgb(var(--clr-white));
    --fancybox-hover-color:rgb(var(--clr-white));
    --fancybox-color: rgb(var(--clr-dark));
}
.f-button{background: transparent;}
.f-button:hover:not([disabled]){background: rgb(var(--clr-primary));}
.f-button svg{filter:none;}

/*---footer start----*/

footer{border-top: 1px solid rgb(var(--clr-dark) / 10%);}
footer .container{padding-block: var(--padding);}
footer li{margin-bottom: 8px;}
footer .f-logo{max-width: 50px;}
footer .contact-box div, footer .contact-box a{display: inline-flex; gap:10px; margin-bottom: 10px; align-items: baseline;}
footer .colyright{border-top: 1px solid rgb(var(--clr-dark)/10%); text-align: center; padding-block:var(--padding)}
footer hr{border-top: 1px solid rgb(var(--clr-dark)/10%); margin-block:0;}


/*---Blog design start----*/
.bm .bm-category-info, .bm .bm-author-info{padding-bottom: 0!important;}
.bm-category-info .description{display: none;}
.bm .h1, .bm h1 { font-size: 24px!important; font-weight: 600!important; color: #000!important;}

.bm .post-thumb .image{border: 1px solid rgb(var(--clr-dark)/10%);}
.bm .post-thumb .post-thumb-heading .title{font-size: 18px!important; font-weight: 600!important;}
.bm .post-thumb .post-thumb-heading .title a {color: rgb(var(--clr-dark))!important;}
.bm .post-thumb .post-thumb-heading .title a:hover {color: rgb(var(--clr-primary))}

.post-thumb-body .date-published{color: rgb(var(--clr-dark)/50%)}
.post-thumb-body .tag{margin-top: 5px;}
.post-thumb-body .tag a, .bm-post-content .tag a{color: rgb(var(--clr-primary))}
.bm .bm-post-info .title-divider{display: none!important;}
.bm .bm-post-info .title{margin-bottom: 20px!important;}
.bm .bm-post-info .title-information .details{color: rgb(var(--clr-dark)/50%)!important; font-size: 14px!important;}
.bm .bm-post-info .title-information .details a{color: rgb(var(--clr-primary))!important}

.bm .bm-post-content .tag { padding: 8px!important; background: rgb(var(--clr-light));}

/*---Steps start----*/
.steps{
    display: flex;
   margin-block: 20px;
    padding-right: 20px;
    /* Set "my-sec-counter" to 0 */
    counter-reset: my-sec-counter;
}

.steps-inner{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 60px;
    padding-right: 15px;
    border: 1px solid #ccc;
    color: #666;
    font-size: 13px;
    line-height: normal;
    flex: 1;
    background: #fafafa;
    height: 70px;
}
.steps-inner>a{color:rgb(var(--clr-dark)/50%)}
.steps-inner>a:hover{color:rgb(var(--clr-primary))}
.steps-inner>a>span {
    text-transform: uppercase;
    display: block;
    font-size: 18px;
    color: #000;
}
.steps-inner .steps-left{    
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 3;
    text-align: right;
}
.steps-inner .steps-left p{margin-bottom: 5px; font-size: 16px; display: block; color:rgb(var(--clr-primary));padding-right: 5px;}
.steps-inner .steps-left p span{text-decoration: line-through; color:rgb(var(--clr-dark)/50%)}
.steps-inner .steps-left >* a{color:rgb(var(--clr-dark)/50%); text-decoration: underline; padding-inline: 5px; line-height: 9px; display: inline-block; height: 12px; font-size: 12px;}
.steps-inner .steps-left >* a+a{border-left: 1px solid rgb(var(--clr-dark)/50%); margin-left: -5px;}
.steps-inner .steps-left >* a:hover{color:rgb(var(--clr-dark));}
.steps-inner .steps-left img{
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 50px;
    background: #fff;
}
.steps-inner.active{
  border: 1px solid #8a1211;
  box-shadow:0 0 10px rgb(0 0 0 / 20%);
  background: #f5dad9;
    transform: scale(1, 1.05);
    transform-origin: 0;
    z-index: 2;
}
.steps-inner:after {
    content: '';
        position: absolute;
    top: 0;
    right: -19px;
    height: 37px;
    aspect-ratio: 1;
    background: #fafafa;
    transform: rotate(45deg) skew(20deg, 20deg);
    transform-origin: 3px 100%;
    z-index: 2;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.steps-inner.active:after {
    border-color: #8a1211;
    background: #f5dad9;
}
.steps-inner::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: counter(my-sec-counter);
      position: absolute;
    font-size: 42px;
    color: #000;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
}

/*---Steps end----*/



.link-back{
    margin-bottom: 10px;
    display: block;
}

.card-option {
    /*
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 10px;
    padding-block: 20px;
    */
display: flex;
  flex-direction: column;
  gap:20px;
}
.card-option .checkbox-option{
    display: flex;
    flex-flow: wrap;
    gap: 10px;
}

/*---Popup/Modal design start----*/

.modal-content{
    border-radius: 0;
    border: 0;
    background-image: url(../image/popup-bg.jpg);
    background-size: cover;
    background-position: center;
}
.modal-content:before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f0e0d3;
    mix-blend-mode: hard-light;
}
.modal-header{
        border: 0;
    padding-top: 30px;
    margin-bottom: -40px;
    padding-inline: 50px;
    position: relative;
}
.modal-body {
    padding: 50px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modal-body .btn-group{display: flex; gap:10px;}
.modal-body .btn-group>*{margin-top: 0!important;}
.modal .close{
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    background: rgb(var(--clr-dark));
    color: rgb(var(--clr-white));
    text-shadow: none;
    opacity: 1;
    padding: 8px 10px;
}
.modal .close:hover{background:rgb(var(--clr-primary))}

/*---Popup/Modal design end----*/


.list-icon{list-style: none; margin:30px 0; padding: 0;}
.list-icon li{
    margin-bottom: 10px;     
    position: relative;
    padding-left: 30px;
}
.list-icon li img{
        max-width: 16px;
    position: absolute;
    left: 0;
    top:2px;
}
.list-icon li div{
    margin-top:5px;
    display: flex;
    gap:5px;
     color:rgb(var(--clr-dark)/50%);
}
.list-icon li div span:last-of-type{color:rgb(var(--clr-dark))}
.list-icon li div span.strike{text-decoration: line-through;}
.list-icon li div a{color:rgb(var(--clr-dark)/50%)}
.list-icon li div a:hover{color:rgb(var(--clr-primary))}

/*---Product range slider start----*/
.filter-box{
    padding-block:30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 0 30px;
}


@media screen and (min-width: 768px) and (max-width: 990px) {
    .filter-box{
        padding-block:30px;
        display: block;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 0 30px;
    }
}

@media screen and (max-width: 768px) {

#column-left{
    display:block !important;
}

    .filter-box{
        padding-block:30px;
        display: block;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 0 30px;
    }
}

.irs--round.irs-with-grid {
    height: 45px!important;
}
.irs--round .irs-bar, .irs--round .irs-line {
    top: 10px!important;
}
.irs--round .irs-handle {
    top: 0!important;
}
.irs--round .irs-bar:after{height: 40px!important;}
.irs--round .irs-grid-text{color: #000!important;}
.irs--round .irs-grid-text.colorin{color: #c0c0c0!important;}
.irs-from, .irs-to, .irs-min, .irs-max {
    display: none!important;
    visibility: hidden!important;
}
.irs--round .irs-handle {
    border-width: 1px!important;
    border-color: #797979 !important;
}
.irs--round .irs-handle.state_hover, .irs--round .irs-handle:hover, .irs--round .irs-handle:focus {
    cursor: grab;
    background-color: #FFFFFF!important;
    box-shadow: 0 0 0 6px hsl(0deg 0% 0% / 10%);
}
.irs-grid-pol{
    top: -10px!important;
    width: 2px!important;
    background: #FFFFFF!important;
    z-index: 1;;
}

.checkbox-option{
        display: flex;
    gap: 10px;
}
.option_shape label span {
    display: block;
}
/*---Product range slider end----*/

@media (min-width: 1200px) {
	.container, .container-fluid{max-width: 1400px; width: 100%;}
}
@media (min-width: 768px) {
    header{top: -88px;}
.dropdown .dropdown-menu{
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: .3s ease all;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
	margin: 0;
}
.dropdown .dropdown-menu li{color: inherit!important;}
.dropdown:hover .dropdown-menu {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
    transition: .3s ease all;
}
}
@media (max-width: 767.88px) {
    header{padding-bottom: 15px;}
    #logo {text-align: left; margin-left: 35px; margin-top: 5px; float: left;}
    .top-navbar, .top-navbar .navbar{ position: initial; margin-left: auto;}
    #menu .navbar-collapse{ position: absolute; top: 100%; left: 0; right: 0; background: rgba(var(--clr-light));}
    #menu .navbar-collapse .nav>li {border-top: 1px solid rgb(var(--clr-dark)/10%);}
    #menu .navbar-nav{margin: 0;}
    footer li{display: inline-block; margin-right: 10px;}
}