/* @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap"); */

  /* @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100;200;300;400;600;700;800;900&display=swap'); */



  /* @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Geologica:wght@100;200;300;400;600;700;800;900&display=swap'); */



@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');



:root {

	--h1size: 50px;

	--h2size: 40px;

	--h3size: 24px;

	--h4size: 20px;

	--h5size: 18px;

	--h6size: 16px;

	--bodysize: 16px;

	--h1height: 58px;

	--h2height: 48px;

	--h3height: 32px;

	--h4height: 28px;

	--h5height: 26px;

	--h6height: 26px;

	--bodyheight: 26px;

	--pfamily: 'Geologica', sans-serif;

	--nfamily: "Nunito", sans-serif;



	--red: #ff3838;

	--gray: #777777;

	--text: #555555;

	--blue: #1494a9;

	--white: #ffffff;

	--chalk: #f0f0f0;

	--green: #ba3e60;

	--purple: #b12fad;

	--orange: #e86121;

	--yellow: #ffab10;

	--body: #f5f6f7;

	--border: #e8e8e8;

	--heading: #39404a;

	--primary:#ba3e60;

	--secondary:#ffbe2c;

	--sub-heading: #565765;

	--green-chalk: #ddffd5;

	--green-dark: #ba3e60;

	--gray-chalk: #cccccc;

	--intro-bg: #f8fffa;

	--facebook: #3b5998;

	--linkedin: #0e76a8;

	--twitter: #00acee;

	--primary-bshadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);

	--primary-tshadow: 2px 3px 8px rgba(0, 0, 0, 0.1)

}

* {

	margin: 0px;

	padding: 0px;

	outline: 0px

}

img {

	vertical-align: middle

}

a {

	text-decoration: none;

	display: inline-block

}

a:hover {

	text-decoration: none

}

ul,

ol {

	padding: 0px;

	list-style: none

}

h1,

h2,

h3,

h4,

h5,

h6,

p,

ol,

ul,

li,

span,

label {

	margin-bottom: 0px

}

html,

body {

	scroll-behavior: smooth

}

body {

	color: var(--text);

	/*background: var(--body);*/

	font-size: var(--bodysize);

	font-family: var(--nfamily);

	line-height: var(--bodyheight);

	overflow-x: hidden

}

h1,

h2,

h3,

h4,

h5,

h6 {

	font-weight: 500;

	color: var(--heading)

}

h1 {

	font-size: var(--h1size);

	line-height: var(--h1height)

}

h2 {

	font-size: var(--h2size);

	line-height: var(--h2height);

	letter-spacing: -0.3px;

	text-transform: capitalize

}

h3 {

	font-size: var(--h3size);

	line-height: var(--h3height)

}

h4 {

	font-size: var(--h4size);

	line-height: var(--h4height)

}

h5 {

	font-size: var(--h5size);

	line-height: var(--h5height)

}

h6 {

	font-size: var(--h6size);

	line-height: var(--h6height)

}

input::placeholder,

textarea::placeholder {

	font-size: 14px;

	color: var(--gray);

	text-transform: capitalize

}

input,

button {

	border: none;

	outline: none;

	background: none

}

button:focus {

	outline: none

}

.facebook:hover {

	color: var(--white);

	background: var(--facebook)

}

.twitter:hover {

	color: var(--white);

	background: var(--twitter)

}

.linkedin:hover {

	color: var(--white);

	background: var(--linkedin)

}

@media (max-width: 575px) {

	.col {

		padding: 0px 4px

	}

}

.section {

	margin-bottom: 115px

}

.inner-section {

	margin-bottom: 45px

}

.section-heading {

	text-align: center;

	/*margin-bottom: 40px*/

}

.section-btn-50 {

	text-align: center;

	margin-top: 50px

}

.section-btn-25 {

	text-align: center;

	margin-top: 25px

}

@media (max-width: 767px) {

	.section {

		margin-bottom: 55px

	}

	.inner-section {

		/* margin-bottom: 60px */

	}

	.section-heading {

		margin-bottom: 30px

	}

	.section-heading h2 {

		font-size: 28px;

		line-height: 36px

	}

}

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

	.section {

		margin-bottom: 75px

	}

	.inner-section {

		margin-bottom: 80px

	}

}

.alert {

	border: none;

	margin: 0px;

	padding: 0px 15px;

	border-radius: 0px

}

.alert-info {

	text-align: center;

	margin-bottom: 30px;

	padding: 20px 20px;

	border-radius: 3px;

	background: var(--white);

	border-top: 3px solid var(--primary);

	box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08)

}

.alert-info p {

	font-weight: 500;

	color: var(--primary);

	text-shadow: var(--primary-shadow)

}

.alert-info p a {

	margin-left: 5px;

	text-decoration: underline

}

.breadcrumb {

	align-items: center;

	justify-content: center;

	background: none;

	margin: 0px

}

.breadcrumb .active {

	color: var(--gray-chalk)

}

.breadcrumb-item {

	font-size: 14px;

	padding: 0px !important;

	text-transform: capitalize

}

.breadcrumb-item a {

	color: var(--chalk)

}

.breadcrumb-item a:hover {

	color: var(--primary);

	text-decoration: underline

}

.breadcrumb-item+.breadcrumb-item::before {

	color: var(--white);

	padding: 0px 8px

}

.backdrop {

	position: fixed;

	top: 0px;

	left: 0px;

	z-index: 4;

	width: 1000%;

	height: 100%;

	background: rgba(0, 0, 0, 0.5);

	display: none

}

.banner {

    opacity: 0;

    visibility: hidden;

    transition: opacity 1s ease;

    -webkit-transition: opacity 1s ease;

}

.banner.slick-initialized {

    visibility: visible;

    opacity: 1;    

}

.suggest-slider {

    opacity: 0;

    visibility: hidden;

    transition: opacity 1s ease;

    -webkit-transition: opacity 1s ease;

}

.suggest-slider.slick-initialized {

    visibility: visible;

    opacity: 1;    

}

.slick-initialized .slick-slide {

    display: block;

    /* height: 400px; */

}

.btn {

	border: none;

	font-size: 15px;

	font-weight: 500;

	text-transform: uppercase;

	padding: 14px 32px;

	border-radius: 6px;

	border: 2px solid var(--primary)

}

.btn:focus {

	box-shadow: none !important

}

.btn i {

	margin-right: 5px

}

.btn-inline {

	color: var(--white);

	background: var(--primary)

}

.btn-inline:hover {

	color: var(--primary);

	background: var(--white)

}

.btn-outline {

	color: var(--primary);

	background: var(--white)

}

.btn-outline:hover {

	color: var(--white);

	background: var(--primary)

}

.menu-badge {

	font-size: 10px;

	padding: 0px 5px;

	margin-left: 5px;

	line-height: 18px;

	border-radius: 3px;

	letter-spacing: 0.3px;

	display: inline-block;

	text-transform: uppercase;

	color: var(--white);

	background: var(--red);

	text-shadow: var(--primary-tshadow)

}

.dropdown-arrow {

	position: relative;

	padding-right: 18px !important

}

.dropdown-arrow:hover::before {

	color: var(--primary)

}

.dropdown-arrow::before {

	position: absolute;

	content: "\ea99";

	top: 50%;

	right: 0px;

	font-size: 15px;

	line-height: 15px;

	color: var(--text);

	font-family: IcoFont;

	transform: translateY(-50%);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.dropdown-link {

	position: relative;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.dropdown-link:hover {

	color: var(--primary);

	background: var(--chalk)

}

.dropdown-link:hover::before {

	color: var(--primary)

}

.dropdown-link::before {

	position: absolute;

	top: 50%;

	right: 18px;

	content: "\f054";

	font-size: 10px;

	font-weight: 900;

	font-family: "Font Awesome 5 Free";

	transform: translateY(-50%);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.dropdown-link.active {

	color: var(--primary)

}

.dropdown-link.active::before {

	color: var(--primary);

	transform: translateY(-50%) rotate(90deg)

}

.dropdown-list {

	display: none;

	padding: 0px 20px;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.dropdown-list li a {

	width: 100%;

	font-size: 15px;

	line-height: 18px;

	border-radius: 8px;

	padding: 10px 15px 10px 35px;

	color: var(--text);

	background: var(--white);

	position: relative;

	white-space: nowrap;

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.dropdown-list li a:hover {

	color: var(--primary);

	background: var(--chalk)

}

.dropdown-list li a::before {

	position: absolute;

	top: 50%;

	left: 15px;

	content: "\f068";

	font-size: 10px;

	font-weight: 900;

	font-family: "Font Awesome 5 Free";

	transform: translateY(-50%)

}

.dropdown:hover .dropdown-position-list {

	visibility: visible;

	opacity: 1;

	top: 70px

}

.dropdown-position-list {

	position: absolute;

	top: 100px;

	left: 0px;

	z-index: 2;

	width: 200px;

	height: auto;

	visibility: hidden;

	opacity: 0;

	padding: 10px;

	border-radius: 8px;

	background: var(--white);

	border: 1px solid var(--border);

	box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.dropdown-position-list::before {

	position: absolute;

	content: "";

	z-index: -1;

	top: -7px;

	left: 12px;

	width: 12px;

	height: 12px;

	border-radius: 3px;

	transform: rotate(45deg);

	background: var(--white);

	border-top: 1px solid var(--border);

	border-left: 1px solid var(--border)

}

.dropdown-position-list li a {

	width: 100%;

	font-size: 15px;

	line-height: 18px;

	border-radius: 8px;

	padding: 8px 15px;

	color: var(--text);

	background: var(--white);

	white-space: nowrap;

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.dropdown-position-list li a:hover {

	color: var(--primary);

	background: var(--chalk)

}

.dropdown-megamenu {

	position: static

}

.dropdown-megamenu:hover .megamenu {

	visibility: visible;

	opacity: 1;

	top: 204px

}

.megamenu {

	position: absolute;

	top: 230px;

	left: 50%;

	z-index: 2;

	width: 1180px;

	border-radius: 8px;

	padding: 30px 30px 0px;

	background: var(--white);

	border: 1px solid var(--border);

	box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);

	transform: translateX(-50%);

	visibility: hidden;

	opacity: 0;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.megamenu-wrap {

	margin-bottom: 30px

}

.megamenu-title {

	padding-bottom: 18px;

	margin-bottom: 20px;

	position: relative;

	text-transform: capitalize;

	border-bottom: 1px solid var(--border)

}

.megamenu-title::before {

	position: absolute;

	content: "";

	bottom: -2px;

	left: 0px;

	width: 50px;

	height: 2px;

	background: var(--primary)

}

.megamenu-list {

	border-left: 1px solid var(--border)

}

.megamenu-list li a {

	width: 100%;

	border-radius: 5px;

	padding: 5px 0px 5px 25px;

	color: var(--text);

	white-space: nowrap;

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.megamenu-list li a:hover {

	color: var(--primary);

	background: var(--chalk)

}

.megamenu-promo a img {

	width: 100%;

	border-radius: 3px

}

@media (max-width: 1199px) {

	.megamenu {

		width: 100%

	}

}

.form-title {

	text-align: center;

	margin-bottom: 20px

}

.form-title h3 {

	text-transform: capitalize

}

.form-group {

	margin-bottom: 25px

}

.form-group small {

	color: var(--gray);

	letter-spacing: 0.3px;

	padding: 0px 0px 0px 20px

}

.form-group textarea {

	height: 150px;

	padding: 12px 20px

}

.form-label {

	font-weight: 500;

	margin: 0px 0px 7px 3px;

	white-space: nowrap;

	text-transform: capitalize

}

.form-control {

	width: 100%;

	height: 45px;

	border-radius: 6px;

	padding: 0px 20px 2px;

	color: var(--text);

	background: var(--chalk);

	border: 1px solid var(--border)

}

.form-control:focus-within {

	background: var(--chalk);

	border-color: var(--primary);

	box-shadow: none;

	outline: 0

}

.form-control[type=file]::-webkit-file-upload-button,

.form-control[type=file]::file-selector-button {

	border: none;

	background: none;

	height: 45px;

	line-height: 45px;

	padding: 5px 15px 0px;

	color: var(--gray)

}

.form-control[type=file]::-webkit-file-upload-button:hover,

.form-control[type=file]::file-selector-button:hover {

	background-color: transparent

}

.form-control[type=file]::-webkit-file-upload-button:focus,

.form-control[type=file]::file-selector-button:focus {

	border: none;

	outline: none

}

.form-select {

	height: 45px;

	font-size: 15px;

	padding: 0px 16px;

	letter-spacing: 0.3px;

	background-size: 12px 10px;

	text-transform: capitalize;

	color: var(--text);

	cursor: pointer

}

.form-select:focus-within {

	box-shadow: none;

	border-color: var(--primary)

}

.form-btn {

	width: 100%;

	height: 45px;

	font-size: 14px;

	font-weight: 400;

	line-height: 45px;

	border-radius: 6px;

	letter-spacing: 0.5px;

	text-align: center;

	text-transform: uppercase;

	color: var(--white);

	background: var(--primary)

}

.form-input-group {

	position: relative

}

.form-input-group:focus-within i {

	color: var(--primary)

}

.form-input-group input {

	padding: 0px 20px 2px 45px

}

.form-input-group textarea {

	padding: 12px 20px 12px 45px

}

.form-input-group i {

	position: absolute;

	top: 0px;

	left: 0px;

	width: 45px;

	height: 45px;

	font-size: 18px;

	line-height: 45px;

	border-radius: 50%;

	text-align: center

}

.form-btn-group {

	width: 100%;

	height: 45px;

	font-size: 14px;

	font-weight: 500;

	line-height: 45px;

	border-radius: 6px;

	letter-spacing: 0.5px;

	text-align: center;

	text-transform: uppercase;

	color: var(--white);

	background: var(--primary)

}

.form-btn-group i {

	font-size: 15px;

	margin-right: 5px;

	display: inline-block

}

.nav-tabs {

	border: none;

	padding: 25px 25px;

	border-radius: 8px;

	margin-bottom: 25px;

	align-items: center;

	justify-content: center;

	/* background: var(--white) */

}

/* .nav-tabs li {

	padding: 0px 30px;

	border-right: 1px solid var(--border)

} */

/* .nav-tabs li:last-child {

	border: none

} */

.tab-link {

	font-size: 15px;

	font-weight: 500;

	text-transform: uppercase;

	color: var(--heading);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.tab-link:hover {

	color: var(--primary)

}

.tab-link i {

	font-size: 18px;

	margin-right: 3px

}

.tab-link.active {

	color: var(--primary)

}

.tab-pane {

	display: none;

	padding: 0px

}

.tab-pane.active {

	display: block

}

@media (max-width: 575px) {

	.nav-tabs {

		flex-wrap: nowrap;

		flex-direction: column

	}

	.nav-tabs li {

		padding: 5px;

		border: none

	}

}

@media (min-width: 576px) and (max-width: 767px) {

	.nav-tabs {

		padding: 25px 10px

	}

	.nav-tabs li {

		padding: 0px 20px

	}

}

.pagination {

	align-items: center;

	justify-content: center

}

.pagination a{

    border: 1px solid #dee2e6;

    padding: 6px 12px;

    border-radius: 6px;

    color: #000;

    /*margin-right: 10px*/

}

.page-item {

	    margin-left: 7px;

    margin-right: 7px;

}

.page-item:first-child .page-item,

.page-item:last-child .page-item {

	border-radius: 50%

}

.page-item:last-child .page-link{

    border-top-right-radius: 50% !important;

    border-bottom-right-radius: 50% !important;

}

.page-item.active {

    width: 40px;

	height: 40px;

	line-height: 40px;

	text-align: center;

	border-radius: 50%;

	font-weight: 400;

	border: none;

	padding: 0px;

	color: var(--white);

	background: var(--primary)

}

.page-item {

    width: 40px;

	height: 40px;

	line-height: 40px;

	text-align: center;

	border-radius: 50%;

	font-weight: 400;

	border: none;

	padding: 0px;

	color: var(--text);

	background: var(--white)

}

.page-item a{

    position: relative;

    display: block;

    text-decoration: none;

    background-color: #fff;

    color: #000;

    padding:0;

    border-radius: 50%;

    border: 1px solid #dee2e6;

    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}

.page-item:hover a {

	color: var(--white);

	background: var(--primary)

}

.page-item:focus {

	box-shadow: none

}





.price-range-slider {

    padding: 15px 0;

  }

  .price-range-slider .range-value {

    /* margin: 20px 0; */

  }

  .price-range-slider .range-value input {

    width: 100%;

    background: none;

    color: #000;

    font-size: 16px;

    font-weight: initial;

    box-shadow: none;

    border: none;

    margin: 0px 0 20px 0;

  }

  .price-range-slider .range-bar {

    border: none;

    background: #e8e8e8;

    height: 5px;

    width: 96%;

    margin-left: 8px;

  }

  .price-range-slider .range-bar .ui-slider-range {

    background: #ba3e60;

  }

  .price-range-slider .range-bar .ui-slider-handle {

    border: none;

    border-radius: 25px;

    background: #ba3e60;

    border: 2px solid #ba3e60;

    height: 17px;

    width: 17px;

    top: -0.52em;

    cursor: pointer;

  }

  .price-range-slider .range-bar .ui-slider-handle + span {

    background: #ba3e60;

  }



  

@media (max-width: 991px) {

	.page-item {

		width: 35px;

		height: 35px;

		line-height: 35px

	}

}

@media (max-width: 767px) {

	.page-item {

		margin: 0px 3px

	}

}

.star-rating {

	direction: rtl;

	text-align: center;

	margin: 25px 0px

}

.star-rating input {

	display: none

}

.star-rating input:checked ~ label::after {

	opacity: 1

}

.star-rating label {

	display: inline-block;

	position: relative;

	cursor: pointer;

	margin: 0px 8px

}

.star-rating label:hover::after {

	opacity: 1

}

.star-rating label:hover:hover ~ label::after {

	opacity: 1

}

.star-rating label::before {

	content: "\ec7c";

	font-family: 'Icofont';

	font-weight: 900;

	font-size: 35px;

	display: block;

	color: #bbbbbb

}

.star-rating label::after {

	content: "\ec7c";

	font-family: 'Icofont';

	font-weight: 900;

	font-size: 35px;

	position: absolute;

	display: block;

	top: 0px;

	left: 0px;

	color: var(--yellow);

	opacity: 0

}

.slider-arrow:hover .dandik,

.slider-arrow:hover .bamdik {

	visibility: visible;

	opacity: 1

}

.dandik,

.bamdik {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	font-size: 20px;

	width: 45px;

	height: 45px;

	line-height: 45px;

	text-align: center;

	border-radius: 50%;

	color: var(--primary);

	background: var(--white);

	text-shadow: var(--primary-tshadow);

	box-shadow: var(--primary-bshadow);

	visibility: hidden;

	opacity: 0;

	cursor: pointer;

	z-index: 1;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.dandik:hover,

.bamdik:hover {

	color: var(--white);

	background: var(--primary)

}

.dandik {

	right: -10px

}

.bamdik {

	left: -10px

}

.slider-dots ul {

	position: absolute;

	bottom: 20px;

	left: 50%;

	transform: translateX(-50%)

}

.slider-dots ul li {

	width: 9px;

	height: 9px;

	margin: 0px 5px;

	border-radius: 30px;

	cursor: pointer;

	display: inline-block;

	background: var(--primary);

	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.slider-dots ul li button {

	display: none

}

.slider-dots ul li.slick-active {

	width: 25px;

	background: var(--primary);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

@media (max-width: 575px) {

	.slider-dots ul {

		bottom: 10px

	}

	.slider-dots ul li {

		margin: 0px 6px

	}

}

@media (min-width: 576px) and (max-width: 767px) {

	.slider-dots ul {

		bottom: 20px

	}

	.slider-dots ul li {

		margin: 0px 6px

	}

}

.product-add {

	width: 100%;

	font-size: 14px;

	padding: 6px 0px;

	border-radius: 6px;

        margin-bottom: 15px;

	text-align: center;

	text-transform: capitalize;

	color: var(--heading);

	background: var(--border);

	text-shadow: var(-primary-tshadow);

	border:1px solid var(--border);

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.product-add i {

	font-size: 14px;

	margin-right: 5px

}



.product-buynow {

	width: 100%;

	font-size: 14px;

	padding: 6px 0px;

	border-radius: 6px;

        margin-bottom: 15px;

	text-align: center;

	text-transform: capitalize;

	color: var(--white);

	background: var(--primary);

	text-shadow: var(-primary-tshadow);

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.product-buynow i {

	font-size: 14px;

	margin-right: 5px

}

.product-card .product-buynow:hover{

    background:var(--border);

    /*border:1px solid var(--primary);*/

    color:var(--black);

}

.product-action {

	display: flex;

	align-items: center;

	/* justify-content: center; */

	/* display: none */

}

.product-action .chkqty{

    width: 65px;

    height: 28px;

    top: 2px;

    position: relative;

}

.checkoutcustom .product-action button i {

    width: 25px;

    height: 25px;

    font-size: 9px;

    line-height: 25px;

    border-radius: 6px;

    text-align: center;

    display: inline-block;

    color: #fff;

    background: #ba3e60;

    text-shadow: var(--primary-tshadow);

    transition: all linear .3s;

    -webkit-transition: all linear .3s;

    -moz-transition: all linear .3s;

    -ms-transition: all linear .3s;

    -o-transition: all linear .3s;

}

.product-action button i {

    width: 30px;

    height: 35px;

    font-size: 12px;

    line-height: 35px;

    border-radius: 6px;

	text-align: center;

	display: inline-block;

	color: var(--text);

	background: var(--chalk);

	text-shadow: var(--primary-tshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.product-action button i:hover {

	color: var(--white);

	background: var(--primary)

}

.product-action input {

	width: 15%;

	/* width: 30%; */

	font-size: 15px;

	margin: 0px 5px;

	padding: 6px 0px;

	border-radius: 6px;

	text-align: center;

	color: var(--white);

	background: var(--primary);

	text-shadow: var(--primary-tshadow)

}

.table-list {

	width: 100%

}

thead tr {

	background: var(--primary)

}

thead tr th {

	font-size: 17px;

	font-weight: 500;

	white-space: nowrap;

	text-align: center;

	text-transform: capitalize;

	padding: 12px 20px;

	color: var(--white);

	border-right: 1px solid var(--border)

}

thead tr th:first-child {

	border-radius: 6px 0px 0px 6px

}

thead tr th:last-child {

	border-right: none;

	border-radius: 0px 6px 6px 0px

}

tbody tr {

	border-bottom: 1px solid var(--border)

}

tbody tr td {

	padding: 12px 20px;

	text-align: center;

	border-right: 1px solid var(--border)

}

tbody tr td:last-child {

	border-right: none

}

.table-name {

	white-space: nowrap;

	text-transform: capitalize

}

.table-image img {

	/* width: auto;

	height: 100px */

    height: 45px !important;

}

.table-price h6 {

	white-space: nowrap

}

.table-price h6 small {

	font-size: 13px;

	margin-left: 3px;

	color: var(--gray);

	font-family: sans-serif

}

.table-image h6 {

	/* white-space: nowrap */

    font-size: 14px;

}

.table-image h6 small {

	font-size: 10px;

	margin-left: 3px;

	color: var(--gray);

	font-family: sans-serif

}

.table-desc p {

	width: 150px;

	font-size: 15px;

	text-align: left

}

.table-desc p a {

	text-transform: capitalize

}

.table-desc p a:hover {

	text-decoration: underline

}

.table-vendor a {

	font-weight: 500;

	color: var(--heading);

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.table-vendor a:hover {

	color: var(--primary)

}

.table-status h6 {

	text-transform: capitalize

}

.table-status .stock-in {

	color: var(--purple)

}

.table-status .stock-out {

	color: var(--orange)

}

.table-shop {

	width: 180px

}

.table-shop .product-add {

	color: var(--white);

	background: var(--primary)

}

.table-shop .action-plus i,

.table-shop .action-minus i {

	background: var(--white)

}

.table-action a i {

	width: 30px;

    height: 30px;

    font-size: 14px;

    line-height: 30px;

    text-align: center;

    display: inline-block;

    border-radius: 5px;

    margin: 3px;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.table-action .view i {

	color: var(--green);

	background: var(--white)

}

.table-action .view i:hover {

	color: var(--white);

	background: var(--green)

}

.table-action .wish i {

	color: var(--green);

	background: var(--white)

}

.table-action .wish.active i {

	color: var(--white);

	background: var(--green)

}

.table-action .trash i {

	color: var(--red);

	background: var(--white)

}

.table-action .trash i:hover {

	color: var(--white);

	background: var(--red)

}

@media (max-width: 1199px) {

	.table-scroll {

		overflow-x: scroll

	}

}

.modal-dialog {

	max-width: max-content

}

.modal-content {

	border: none;

	background: none;

	border-radius: 0px

}

.modal-close {

	position: absolute;

	top: -15px;

	right: -15px;

	z-index: 1;

	width: 35px;

	height: 35px;

	font-size: 18px;

	line-height: 35px;

	border-radius: 50%;

	text-align: center;

	display: inline-block;

	background: var(--white);

	box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.modal-close:hover {

	color: var(--white);

	background: var(--primary)

}

.modal-form {

	width: 400px;

	padding: 30px;

	border-radius: 8px;

	background: var(--white)

}

@media (max-width: 400px) {

	.modal-form,

	.modal-dialog {

		width: 100%;

		max-width: inherit

	}

}

@media (max-width: 1100px) {

	.modal-dialog {

		margin: 80px auto 50px

	}

	.modal-close {

		right: 50%;

		top: -45px;

		transform: translateX(50%)

	}

}

.order-track {

	margin-bottom: 25px

}

.order-track-list {

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 25px 25px;

	border-radius: 8px;

	background: var(--chalk)

}

.order-track-item {

	display: flex;

	align-items: center;

	justify-content: center;

	flex-direction: column;

	position: relative;

	text-align: center;

	width: 100%;

	z-index: 1

}

.order-track-item::before {

	position: absolute;

	content: "";

	top: 20px;

	left: 0px;

	width: 100%;

	height: 5px;

	z-index: -1;

	background: var(--white)

}

.order-track-item:first-child::before {

	border-radius: 50px 0px 0px 50px

}

.order-track-item:last-child::before {

	border-radius: 0px 50px 50px 0px

}

.order-track-item i {

	width: 45px;

	height: 45px;

	font-size: 20px;

	line-height: 42px;

	border-radius: 50%;

	margin-bottom: 10px;

	text-align: center;

	display: inline-block;

	color: var(--primary);

	background: var(--white);

	border: 2px dotted var(--primary)

}

.order-track-item span {

	font-weight: 500;

	line-height: 20px;

	white-space: nowrap;

	color: var(--heading);

	text-transform: capitalize

}

.order-track-item.active::before {

	background: var(--primary)

}

.order-track-item.active i {

	color: var(--white);

	background: var(--primary)

}

.order-track-item.active span {

	color: var(--primary)

}

@media (max-width: 575px) {

	.order-track {

		overflow-x: scroll

	}

	.order-track-list {

		width: 575px

	}

}

@media (min-width: 576px) and (max-width: 767px) {

	.order-track-item span {

		white-space: inherit

	}

}

.nav-pills .nav-link {

	font-weight: 400;

	list-style: decimal

}

.nav-pills .nav-link.active {

	color: var(--primary);

	background: transparent

}

@media (max-width: 991px) {

	.nav {

		margin-bottom: 30px

	}

}

.countdown {

	display: flex;

	align-items: center;

	justify-content: center

}

.countdown-time {

	padding: 0px 30px;

	position: relative;

	color: var(--heading);

	display: flex;

	align-items: center;

	justify-content: center;

	flex-direction: column

}

.countdown-time::before {

	position: absolute;

	content: ":";

	top: 28%;

	right: -3px;

	font-size: 25px;

	transform: translateY(-50%);

	color: var(--heading)

}

.countdown-time:last-child::before {

	display: none

}

.countdown-time span {

	display: block;

	font-size: 40px;

	font-weight: 700;

	line-height: 40px;

	color: var(--primary)

}

.countdown-time small {

	font-size: 18px;

	font-weight: 500;

	text-transform: capitalize

}

@media (max-width: 575px) {

	.countdown-time {

		padding: 0px 12px

	}

	.countdown-time:first-child {

		padding-left: 0px

	}

	.countdown-time:last-child {

		padding-right: 0px

	}

	.countdown-time span {

		font-size: 35px

	}

	.countdown-time small {

		font-size: 16px

	}

}

.suggest-card {

	position: relative

}

.suggest-card::before {

	position: absolute;

	content: "";

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	border-radius: 8px;

	background: rgba(0, 0, 0, 0.4);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.suggest-card:hover::before {

	background: rgba(17, 151, 68, 0.9)

}

.suggest-card img {

	width: 100%;

	border-radius: 8px

}

.suggest-card h5 {

	position: absolute;

	top: 50%;

	left: 50%;

	width: 100%;

	text-align: center;

	transform: translate(-50%, -50%);

	color: var(--white);

	font-weight: 400;

	text-transform: capitalize;

	text-shadow: var(--primary-tshadow)

}

.suggest-card h5 span {

	display: block;

	font-size: 15px;

	font-weight: 300

}

@media (max-width: 400px) {

	.suggest-card h5 {

		font-size: 16px;

		line-height: 24px

	}

	.suggest-card h5 span {

		font: 14px

	}

}

.product-card {

	width: 100%;

	overflow: hidden;

	position: relative;

	margin-bottom: 25px;

	/* padding: 15px 18px; */

	padding: 0 !important;

	border-radius: 8px;

	background: var(--white);

	border: 1px solid var(--border);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.product-card:hover {

	border-color: var(--primary);

	box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1)

}

.product-card:hover .product-widget {

	opacity: 1;

	bottom: 15px

}

/*.product-card:hover .product-add {*/

/*	color: var(--white);*/

/*	background: var(--primary)*/

/*}*/

.product-media {

	position: relative

}

.product-label {

	display: flex;

	flex-direction: column;

	position: absolute;

	    top: 10px;

    left: 10px;

}

.label-text {

	font-size: 14px;

	padding: 5px 8px;

	line-height: 13px;

	border-radius: 3px;

	margin-bottom: 5px;

	color: var(--white);

	text-align: center;

	text-transform: capitalize

}

.label-text.off {

	background: var(--red)

}

.label-text.new {

	background: var(--green)

}

.label-text.sale {

	background: var(--orange)

}

.label-text.feat {

	background: var(--purple)

}

.label-text.rate {

	background: var(--yellow)

}

.label-text.order {

	background: var(--blue)

}

/* .product-wish {

	position: absolute;

	top: 10px;

    right: 10px;

	font-size: 18px;

	color: var(--gray-chalk)

} */

.product-wish.active {

	color: var(--primary)

}

/* .product-image img {

	width: 100%;

    height:300px;



} */

.product-widget {

	display: flex;

	align-items: center;

	justify-content: center;

	position: absolute;

	bottom: 0px;

	left: 0px;

	width: 100%;

	opacity: 0;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.product-widget a {

	width: 40px;

	height: 40px;

	font-size: 15px;

	margin: 0px 6px;

	line-height: 40px;

	text-align: center;

	border-radius: 8px;

	color: var(--white);

	background: var(--primary);

	text-shadow: var(-primary-tshadow);

	box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12)

}

.product-content {

	padding-top: 12px;

	text-align: center;

	border-top: 1px solid var(--border);

        margin: 0 10px;

}

.product-rating {

	display: flex;

	align-items: center;

	justify-content: center;

	margin-bottom: 3px

}

.product-rating i,

.product-rating a {

	font-size: 14px;

	margin: 0px 2px;

	color: var(--gray)

}

.product-rating a {

	white-space: nowrap;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.product-rating a:hover {

	color: var(--primary);

	text-decoration: underline

}

.product-rating .active {

	color: var(--yellow)

}

.product-name {

	margin-bottom: 3px;

	text-transform: capitalize

}

.product-name a {

	color: var(--sub-heading);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.product-name a:hover {

	color: var(--primary)

}

.product-price {

	display: flex;

	align-items: center;

	justify-content: center;

	align-items: baseline;

	margin-bottom: 13px

}

.product-price del {

	color: var(--red);

	margin-right: 8px

}

.product-price span {

	color: var(--primary);

	white-space: nowrap

}

.product-price span small {

	font-weight: 400

}

.product-disable {

	position: relative

}

.product-disable:hover {

	border-color: var(--border);

	box-shadow: none

}

.product-disable:hover .product-add {

	color: var(--heading);

	background: var(--border)

}

.product-disable .product-widget {

	visibility: hidden

}

.product-disable::before {

	position: absolute;

	content: "Out of Stock";

	top: 40%;

	left: 50%;

	z-index: 2;

	width: 100%;

	font-size: 15px;

	font-weight: 400;

	padding: 15px 0px;

	text-align: center;

	text-transform: uppercase;

	text-shadow: var(--primary-tshadow);

	transform: translate(-50%, -50%);

	color: var(--white);

	background: rgba(224, 152, 22, 0.9)

}

.product-disable::after {

	position: absolute;

	content: "";

	top: 0px;

	left: 0px;

	z-index: 1;

	width: 100%;

	height: 100%;

	border-radius: 8px;

	background: rgba(255, 255, 255, 0.6)

}

@media (max-width: 575px) {

	.product-card {

		padding: 8px;

		margin-bottom: 8px

	}

	.product-name {

		font-size: 15px;

		line-height: 22px

	}

	.product-image img{
		    width: 100%;
    height: 275px;
    /* height: 345px; */
    object-fit: cover;

	}

}

.feature-card {

	width: 100%;

	overflow: hidden;

	position: relative;

	margin-bottom: 25px;

	padding: 18px 18px;

	border-radius: 8px;

	background: var(--white);

	border: 1px solid var(--border);

	display: flex;

	align-items: flex-start;

	justify-content: flex-start;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.feature-card:hover {

	border-color: var(--primary);

	box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1)

}

.feature-card:hover .feature-widget {

	opacity: 1;

	bottom: 15px

}

.feature-card:hover .feature-add {

	color: var(--white);

	background: var(--primary)

}

.feature-media {

	position: relative

}

.feature-label {

	display: flex;

	flex-direction: column;

	position: absolute;

	top: 0px;

	left: 0px

}

.label-text {

	font-size: 14px;

	padding: 5px 8px;

	line-height: 13px;

	border-radius: 3px;

	margin-bottom: 5px;

	color: var(--white);

	text-align: center;

	text-transform: capitalize

}

.label-text.off {

	background: var(--red)

}

.label-text.new {

	background: var(--green)

}

.label-text.sale {

	background: var(--orange)

}

.label-text.feat {

	background: var(--purple)

}

.label-text.rate {

	background: var(--yellow)

}

.label-text.order {

	background: var(--blue)

}

.feature-wish {

	position: absolute;

	top: 0px;

	right: 0px;

	font-size: 18px;

	color: var(--gray-chalk)

}

.feature-wish.active {

	color: var(--primary)

}

.feature-image img {

	width: 220px

}

.feature-widget {

	display: flex;

	align-items: center;

	justify-content: center;

	position: absolute;

	bottom: 0px;

	left: 0px;

	width: 100%;

	opacity: 0;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.feature-widget a {

	width: 40px;

	height: 40px;

	font-size: 15px;

	margin: 0px 6px;

	line-height: 40px;

	text-align: center;

	border-radius: 8px;

	color: var(--white);

	background: var(--primary);

	text-shadow: var(-primary-tshadow);

	box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12)

}

.feature-content {

	width: 100%;

	padding-left: 25px;

	margin-left: 25px;

	border-left: 1px solid var(--border)

}

.feature-rating {

	display: flex;

	align-items: center;

	justify-content: flex-start;

	margin-bottom: 3px

}

.feature-rating i,

.feature-rating a {

	font-size: 14px;

	margin: 0px 2px;

	color: var(--gray)

}

.feature-rating a {

	white-space: nowrap;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.feature-rating a:hover {

	color: var(--primary);

	text-decoration: underline

}

.feature-rating .active {

	color: var(--yellow)

}

.feature-name {

	margin-bottom: 3px;

	text-transform: capitalize

}

.feature-name a {

	color: var(--sub-heading);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.feature-name a:hover {

	color: var(--primary)

}

.feature-price {

	display: flex;

	align-items: center;

	justify-content: flex-start;

	align-items: baseline;

	margin-bottom: 10px

}

.feature-price del {

	color: var(--red);

	margin-right: 8px

}

.feature-price span {

	color: var(--primary);

	white-space: nowrap

}

.feature-price span small {

	font-weight: 400

}

.feature-desc {

	font-size: 15px;

	line-height: 25px;

	margin-bottom: 15px

}

@media (max-width: 575px) {

	.feature-card {

		padding: 8px;

		margin-bottom: 15px

	}

	.feature-image img {

		width: 100%

	}

	.feature-name {

		font-size: 15px;

		line-height: 22px

	}

}

@media (max-width: 450px) {

	.feature-card {

		align-items: center

	}

	.feature-content {

		padding-left: 12px;

		margin-left: 12px

	}

	.feature-desc {

		display: none

	}

}

@media (min-width: 992px) and (max-width: 1199px) {

	.feature-image img {

		width: 190px

	}

}

.product-standard {

	width: 100%;

	overflow: hidden;

	position: relative;

	margin-bottom: 25px;

	padding: 15px 15px;

	border-radius: 8px;

	background: var(--white);

	border: 1px solid var(--border);

	display: flex;

	align-items: center;

	justify-content: flex-start;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.product-standard:hover {

	border-color: var(--primary);

	box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1)

}

.product-standard:hover .standard-widget {

	opacity: 1;

	bottom: 15px

}

.product-standard:hover .standard-add {

	color: var(--white);

	background: var(--primary)

}

.standard-media {

	position: relative

}

.standard-label-group {

	position: absolute;

	top: 15px;

	left: 15px;

	z-index: 1

}

.standard-label {

	font-size: 14px;

	padding: 5px 8px;

	line-height: 13px;

	border-radius: 3px;

	text-transform: capitalize;

	color: var(--white)

}

.standard-label.off {

	background: var(--red)

}

.standard-label.new {

	background: var(--green)

}

.standard-label.sale {

	background: var(--orange)

}

.standard-label.feat {

	background: var(--purple)

}

.standard-label.rate {

	background: var(--yellow)

}

.standard-image img {

	width: 220px

}

.standard-widget {

	display: flex;

	align-items: center;

	justify-content: center;

	position: absolute;

	bottom: 0px;

	left: 0px;

	width: 100%;

	opacity: 0;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.standard-widget a {

	width: 40px;

	height: 40px;

	font-size: 15px;

	margin: 0px 6px;

	line-height: 40px;

	text-align: center;

	border-radius: 8px;

	color: var(--white);

	background: var(--primary);

	text-shadow: var(-primary-tshadow);

	box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12)

}

.standard-content {

	width: 100%;

	margin-left: 30px;

	padding-left: 30px;

	border-left: 1px solid var(--border)

}

.standard-name {

	margin-bottom: 5px;

	text-transform: capitalize

}

.standard-name a {

	color: var(--sub-heading);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.standard-name a:hover {

	color: var(--primary)

}

.standard-price {

	display: flex;

	align-items: center;

	justify-content: flex-start;

	align-items: baseline;

	margin-bottom: 5px

}

.standard-price del {

	color: var(--red);

	margin-right: 12px

}

.standard-price span {

	color: var(--primary);

	white-space: nowrap

}

.standard-price span small {

	font-weight: 400

}

.standard-rating {

	display: flex;

	align-items: center;

	justify-content: flex-start;

	margin-bottom: 10px

}

.standard-rating i,

.standard-rating a {

	font-size: 14px;

	margin-right: 3px;

	color: var(--gray)

}

.standard-rating a {

	white-space: nowrap;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.standard-rating a:hover {

	color: var(--primary);

	text-decoration: underline

}

.standard-rating .active {

	color: var(--yellow)

}

.standard-desc {

	margin-bottom: 20px

}

.standard-action-group {

	display: grid;

	grid-gap: 15px;

	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))

}

.standard-action-group .product-add,

.standard-action-group .action-input {

	padding: 10px 0px;

	letter-spacing: 0.5px;

	text-transform: uppercase;

	color: var(--white);

	background: var(--primary)

}

.standard-action-group .product-add {

	font-size: 14px;

	font-weight: 500

}

.standard-wish {

	padding: 10px 0px;

	border-radius: 8px;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.standard-wish i {

	font-size: 16px;

	margin-right: 6px

}

.standard-wish span {

	font-size: 14px;

	font-weight: 500;

	letter-spacing: 0.5px;

	text-transform: uppercase

}

.standard-wish {

	color: var(--primary);

	background: var(--border)

}

.standard-wish.active {

	color: var(--white);

	background: var(--primary)

}

.standard-action {

	display: flex;

	align-items: center;

	justify-content: center;

	display: none

}

.standard-action button i,

.standard-action a i {

	width: 35px;

	height: 35px;

	font-size: 15px;

	line-height: 35px;

	border-radius: 5px;

	text-align: center;

	display: inline-block;

	color: var(--text);

	background: var(--border);

	text-shadow: var(--primary-tshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.standard-action button i:hover,

.standard-action a i:hover {

	color: var(--white);

	background: var(--primary)

}

.standard-action input {

	width: 100%;

	height: 45px;

	margin: 0px 8px;

	font-size: 15px;

	line-height: 14px;

	border-radius: 5px;

	letter-spacing: 0.3px;

	text-align: center;

	color: var(--white);

	background: var(--primary);

	text-shadow: var(--primary-tshadow)

}

@media (max-width: 575px) {

	.product-standard {

		padding: 10px 10px

	}

	.standard-image img {

		width: 130px

	}

	.standard-content {

		margin-left: 10px;

		padding-left: 10px

	}

	.standard-name {

		font-size: 16px;

		margin-bottom: 3px

	}

	.standard-price {

		font-size: 15px;

		margin-bottom: 3px

	}

	.standard-rating {

		margin-bottom: 6px

	}

	.standard-desc {

		display: none

	}

	.standard-action-group {

		grid-gap: 10px;

		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))

	}

	.product-add,

	.standard-wish {

		padding: 8px 0px

	}

	.product-add i,

	.standard-wish i {

		display: none

	}

	.standard-action input {

		height: 38px

	}

}

@media (min-width: 576px) and (max-width: 767px) {

	.standard-image img {

		width: 150px

	}

	.standard-content {

		margin-left: 10px;

		padding-left: 10px

	}

	.standard-name {

		font-size: 18px

	}

	.standard-price {

		font-size: 16px

	}

	.standard-desc {

		display: none

	}

	.standard-action-group {

		grid-gap: 10px;

		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))

	}

	.product-add,

	.standard-wish {

		padding: 8px 0px

	}

	.product-add i,

	.standard-wish i {

		display: none

	}

	.standard-action input {

		height: 38px

	}

}

.category-wrap:hover .category-overlay {

	transform: scale(1)

}

.category-media {

	position: relative;

	margin-bottom: 15px

}

.category-media img {

	width: 100%;

	height: auto;

	border-radius: 8px

}

.category-overlay {

	position: absolute;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	border-radius: 8px;

	text-align: center;

	background: rgba(0, 0, 0, 0.4);

	transform: scale(0);

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.category-overlay a i {

	width: 50px;

	height: 50px;

	line-height: 50px;

	border-radius: 50%;

	text-align: center;

	color: var(--white);

	background: var(--primary);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.category-overlay a i:hover {

	color: var(--primary);

	background: var(--white)

}

.category-meta {

	padding: 0px 10px

}

.category-meta h4 {

	text-transform: capitalize;

	margin-bottom: 3px

}

@media (max-width: 575px) {

	.category-wrap {

		width: 150px

	}

}

@media (max-width: 1199px) {

	.category-meta {

		padding: 0px 5px

	}

	.category-meta h4 {

		font-size: 17px;

		margin-bottom: 0px

	}

	.category-meta p {

		font-size: 15px

	}

}

.brand-wrap {

	text-align: center;

	padding-top: 15px

}

.brand-wrap:hover .brand-media::before {

	border-color: var(--primary);

	animation-play-state: running

}

.brand-wrap:hover .brand-overlay {

	transform: scale(1)

}

.brand-media {

	display: inline-block;

	position: relative;

	margin-bottom: 15px;

	z-index: 1

}

/*.brand-media::before {*/

/*	position: absolute;*/

/*	content: "";*/

/*	top: 50%;*/

/*	left: 50%;*/

/*	z-index: -1;*/

/*	width: 175px;*/

/*	height: 175px;*/

/*	border-radius: 50%;*/

/*	background: var(--white);*/

/*	border: 2px dashed var(--border);*/

/*	transform: translate(-50%, -50%);*/

/*	animation: rotate360 1.2s linear infinite;*/

/*	animation-play-state: paused*/

/*}*/

.brand-media img {

	width: 150px;

	height: 150px;

	border-radius: 50%

}

@keyframes rotate360 {

	to {

		transform: translate(-50%, -50%) rotate(360deg)

	}

}

.brand-overlay {

	position: absolute;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	border-radius: 50%;

	text-align: center;

	background: rgba(0, 0, 0, 0.4);

	transform: scale(0);

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.brand-overlay a i {

	width: 50px;

	height: 50px;

	line-height: 50px;

	border-radius: 50%;

	text-align: center;

	color: var(--white);

	background: var(--primary);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.brand-overlay a i:hover {

	color: var(--primary);

	background: var(--white)

}

.brand-meta h4 {

	text-transform: capitalize;

	margin-bottom: 3px

}

@media (max-width: 575px) {

	.brand-wrap {

		width: 200px

	}

}

.choose-card {

	display: flex

}

.choose-card:hover i {

	color: var(--white);

	background: var(--primary)

}

.choose-icon i {

	width: 75px;

	height: 75px;

	font-size: 40px;

	line-height: 75px;

	border-radius: 50%;

	margin-right: 30px;

	text-align: center;

	display: inline-block;

	color: var(--primary);

	background: var(--white);

	text-shadow: var(--primary-tshadow);

	box-shadow: var(--primary-bshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.choose-text h4 {

	margin-bottom: 10px;

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-card {

	margin-bottom: 30px

}

.blog-card:hover .blog-img img {

	transform: scale(1.05)

}

.blog-media {

	position: relative

}

.blog-calender {

	position: absolute;

	top: 20px;

	right: 20px;

	display: flex;

	align-items: center;

	justify-content: center;

	flex-direction: column;

	width: 55px;

	height: 55px;

	border-radius: 6px;

	color: var(--white);

	background: rgba(0, 0, 0, 0.6)

}

.blog-calender span {

	line-height: 20px

}

.blog-date {

	font-size: 20px;

	font-weight: 500

}

.blog-month {

	font-size: 14px;

	letter-spacing: 0.3px;

	text-transform: uppercase

}

.blog-img {

	overflow: hidden;

	border-radius: 8px

}

.blog-img img {

	width: 100%;

	border-radius: 8px;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-content {

	padding: 15px 15px 0px

}

.blog-meta {

	display: flex;

	align-items: center;

	justify-content: flex-start;

	flex-wrap: wrap;

	margin-bottom: 15px

}

.blog-meta li {

	display: flex;

	align-items: center;

	margin-right: 30px

}

.blog-meta li:last-child {

	margin: 0px

}

.blog-meta li i {

	color: var(--primary);

	margin-right: 8px;

	font-size: 14px

}

.blog-meta li a,

.blog-meta li span {

	font-size: 15px;

	font-weight: 400;

	white-space: nowrap;

	text-transform: uppercase

}

.blog-meta li a {

	color: var(--text);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-meta li a:hover {

	color: var(--primary)

}

.blog-title {

	font-size: 22px;

	line-height: 30px;

	margin-bottom: 15px

}

.blog-title a {

	color: var(--heading);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-title a:hover {

	color: var(--primary)

}

.blog-desc {

	font-size: 17px;

	line-height: 28px;

	color: var(--gray);

	margin-bottom: 25px

}

.blog-btn {

	font-size: 15px;

	font-weight: 500;

	color: var(--primary);

	text-transform: uppercase;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-btn i {

	font-size: 17px;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-btn:hover {

	color: var(--primary);

	text-decoration: underline

}

.blog-btn:hover i {

	margin-left: 5px

}

@media (max-width: 575px) {

	.blog-meta li {

		margin-right: 25px

	}

	.blog-content {

		padding: 15px 8px 0px

	}

}

@media (min-width: 992px) and (max-width: 1199px) {

	.blog-content {

		padding: 15px 12px 0px

	}

}

.offer-card {

	margin-bottom: 30px

}

.offer-card a {

	width: 100%

}

.offer-card a img {

	width: 100%;

	border-radius: 8px

}

.offer-div {

	display: flex;

	align-items: center;

	justify-content: center;

	justify-content: space-between;

	padding: 10px 15px;

	margin: 0px 15px;

	border-radius: 0px 0px 8px 8px;

	background: var(--white)

}

.offer-div h5 {

	font-size: 15px;

	font-weight: 400;

	text-transform: uppercase

}

.offer-div button,

.offer-div span {

	font-size: 15px;

	font-weight: 500;

	color: var(--primary);

	text-transform: capitalize

}

@media (min-width: 351px) and (max-width: 575px) {

	.offer-card {

		width: 320px;

		margin: 0px auto 30px

	}

}

.account-card {

	margin-bottom: 30px;

	border-radius: 8px;

	padding: 0px 30px 30px;

	background: var(--white)

}



.account-title {

	padding: 18px 0px;

	margin-bottom: 25px;

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	justify-content: space-between;

	border-bottom: 1px solid var(--border)

}

.account-title::before {

	position: absolute;

	content: "";

	bottom: -2px;

	left: 0px;

	width: 50px;

	height: 2px;

	background: var(--primary)

}

.account-title h4 {

	text-transform: capitalize

}

.account-title button,

.account-title a {

	border: none;

	font-size: 15px;

	font-weight: 500;

	border-radius: 6px;

	letter-spacing: 0.3px;

	padding: 5px 15px;

	white-space: nowrap;

	text-transform: capitalize;

	color: var(--primary);

	background: var(--green-chalk);

	text-shadow: var(--primary-tshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.account-title button:hover,

.account-title a:hover {

	color: var(--white);

	background: var(--primary)

}



.account-title #walletb{

    z-index: -1;

    position: absolute;

}



.account-title .btn_apply_wallet{

	width: 100px;

    height: 38px;

    font-size: 14px;

    line-height: 38px;

    border-radius: 8px;

    display: block;

    text-align: center;

    text-transform: uppercase;

    color: var(--white);

    background: var(--primary);

    /* position: relative; */

}

@media (max-width: 575px) {

	.account-card {

		padding: 0px 15px 15px

	}

}

.profile-card {

	padding: 25px;

	border-radius: 8px;

	margin-bottom: 25px;

	background: var(--chalk);

	border: 1px solid var(--border);

	position: relative;

	cursor: pointer

}

.profile-card:hover ul {

	visibility: visible;

	opacity: 1

}

.profile-card h6 {

	color: var(--text);

	margin-bottom: 8px;

	text-transform: capitalize

}

.profile-card p {

	text-transform: capitalize

}

.profile-card ul {

	display: flex;

	align-items: center;

	justify-content: center;

	flex-direction: column;

	position: absolute;

	top: 50%;

	right: 15px;

	opacity: 0;

	visibility: hidden;

	transform: translateY(-50%);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.profile-card ul li {

	margin: 5px 0px

}

.profile-card ul li button {

	width: 30px;

	height: 32px;

	line-height: 32px;

	border-radius: 6px;

	text-align: center;

	display: inline-block;

	background: var(--white);

	text-shadow: var(--primary-tshadow);

	box-shadow: var(--primary-bshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.profile-card ul .edit {

	color: var(--green)

}

.profile-card ul .edit:hover {

	color: var(--white);

	background: var(--green)

}

.profile-card ul .trash {

	color: var(--red)

}

.profile-card ul .trash:hover {

	color: var(--white);

	background: var(--red)

}

.profile-card.active {

	background: var(--green-chalk);

	border-color: var(--primary)

}

.payment-card {

	padding: 25px;

	border-radius: 6px;

	margin-bottom: 25px;

	background: var(--chalk);

	border: 1px solid var(--border);

	position: relative;

	cursor: pointer

}

.payment-card:hover button {

	visibility: visible;

	opacity: 1

}

.payment-card img {

	margin-bottom: 18px

}

.payment-card h4 {

	font-size: 12px;

	line-height: 20px;

	margin-bottom: 5px;

	text-transform: capitalize

}

.payment-card p {

	color: var(--heading);

	margin-bottom: 5px

}

.payment-card p span {

	font-size: 20px;

	margin-right: 15px;

	letter-spacing: 2px

}

.payment-card p sup {

	font-size: 13px;

	font-weight: 500;

	letter-spacing: 2px

}

.payment-card h5 {

	font-size: 14px;

	line-height: 22px;

	text-transform: capitalize

}

.payment-card button {

	position: absolute;

	top: 15px;

	right: 15px;

	opacity: 0;

	visibility: hidden;

	width: 30px;

	height: 32px;

	line-height: 32px;

	border-radius: 6px;

	text-align: center;

	display: inline-block;

	background: var(--white);

	text-shadow: var(--primary-tshadow);

	box-shadow: var(--primary-bshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.payment-card .trash {

	color: var(--red)

}

.payment-card .trash:hover {

	color: var(--white);

	background: var(--red)

}

.payment-card.active {

	background: var(--green-chalk);

	border-color: var(--primary)

}

@media (max-width: 575px) {

	.payment-card p span {

		margin-right: 8px

	}

}

.contact-card {

	text-align: center;

	border-radius: 8px;

	margin: 0px 2.5px 30px;

	padding: 60px 15px 55px;

	background: var(--white);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.contact-card:hover {

	background: var(--primary)

}

.contact-card:hover i {

	color: var(--primary);

	background: var(--white)

}

.contact-card:hover h4,

.contact-card:hover p,

.contact-card:hover a {

	color: var(--white)

}

.contact-card i {

	width: 50px;

	height: 50px;

	font-size: 22px;

	line-height: 50px;

	border-radius: 50%;

	margin-bottom: 15px;

	text-align: center;

	display: inline-block;

	color: var(--white);

	background: var(--primary);

	text-shadow: var(--primary-tshadow);

	box-shadow: var(--primary-bshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.contact-card h4 {

	margin-bottom: 18px;

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.contact-card p {

	width: 250px;

	font-size: 18px;

	line-height: 30px;

	margin: 0 auto;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.contact-card p a {

	font-size: 18px;

	line-height: 30px;

	display: block;

	color: var(--text);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.contact-card.active {

	background: var(--primary)

}

.contact-card.active i {

	color: var(--primary);

	background: var(--white)

}

.contact-card.active h4,

.contact-card.active p,

.contact-card.active a {

	color: var(--white)

}

.branch-card {

	margin: 0px 2.5px 30px;

	position: relative

}

.branch-card:hover::before {

	background: rgba(17, 151, 68, 0.85)

}

.branch-card:hover .branch-overlay {

	top: 50%

}

.branch-card:hover .branch-overlay p {

	opacity: 1

}

.branch-card::before {

	position: absolute;

	content: "";

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	border-radius: 8px;

	background: rgba(0, 0, 0, 0.45);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.branch-card img {

	width: 100%;

	border-radius: 8px

}

.branch-overlay {

	position: absolute;

	top: 60%;

	left: 0px;

	width: 100%;

	padding: 0px 15px;

	text-align: center;

	transform: translateY(-50%);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.branch-overlay h3 {

	color: var(--white);

	letter-spacing: 0.3px;

	margin-bottom: 8px;

	text-transform: capitalize;

	text-shadow: var(--primary-tshadow)

}

.branch-overlay p {

	width: 200px;

	margin: 0 auto;

	letter-spacing: 0.3px;

	color: var(--white);

	opacity: 0;

	text-transform: capitalize;

	text-shadow: var(--primary-tshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.team-media {

	overflow: hidden;

	position: relative;

	border-radius: 8px

}

.team-media:hover img {

	transform: scale(1.05)

}

.team-media:hover .team-overlay {

	top: 0px;

	opacity: 1

}

.team-media:hover .team-overlay a {

	padding-top: 0px

}

.team-media img {

	width: 100%;

	border-radius: 8px;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.team-overlay {

	position: absolute;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	border-radius: 8px;

	opacity: 0;

	background: rgba(0, 0, 0, 0.3);

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.team-overlay a {

	width: 36px;

	height: 36px;

	font-size: 15px;

	line-height: 36px;

	margin: 0px 5px;

	padding-top: 30px;

	text-align: center;

	border-radius: 50%;

	color: var(--text);

	background: var(--white);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.team-meta {

	text-align: center

}

.team-meta h5 {

	text-transform: capitalize

}

.team-meta h5 a {

	color: var(--heading);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.team-meta h5 a:hover {

	color: var(--primary)

}

.team-meta p {

	font-size: 15px;

	text-transform: capitalize

}

@media (max-width: 575px) {

	.team-card {

		width: 290px;

		margin: 0px auto 50px

	}

}

.header-top {

	padding: 8px 0px;

        --h1size: 50px;

        --h2size: 40px;

        --h3size: 24px;

        --h4size: 20px;

        --h5size: 18px;

        --h6size: 16px;

        --bodysize: 16px;

        --h1height: 58px;

        --h2height: 48px;

        --h3height: 32px;

        --h4height: 28px;

        --h5height: 26px;

        --h6height: 26px;

        --bodyheight: 26px;

        --pfamily: 'Geologica', sans-serif;

        --nfamily: "Nunito", sans-serif;

        --red: #ff3838;

        --gray: #777777;

        --text: #555555;

        --blue: #1494a9;

        --white: #ffffff;

        --chalk: #f5f5f5;

        --green: #11b76b;

        --purple: #b12fad;

        --orange: #e86121;

        --yellow: #ffab10;

        --body: #f5f6f7;

        --border: #e8e8e8;

        --heading: #39404a;

        --primary:#ba3e60;

        --sub-heading: #565765;

        --green-chalk: #ddffd5;

        --green-dark: #072f17;

        --gray-chalk: #cccccc;

        --intro-bg: #f8fffa;

        --facebook: #3b5998;

        --linkedin: #0e76a8;

        --twitter: #00acee;

        --primary-bshadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);

        --primary-tshadow: 2px 3px 8px rgba(0, 0, 0, 0.1)

    }

    * {

        margin: 0px;

        padding: 0px;

        outline: 0px

    }

    img {

        vertical-align: middle

    }

    a {

        text-decoration: none;

        display: inline-block

    }

    a:hover {

        text-decoration: none

    }

    ul,

    ol {

        padding: 0px;

        list-style: none

    }

    h1,

    h2,

    h3,

    h4,

    h5,

    h6,

    p,

    ol,

    ul,

    li,

    span,

    label {

        margin-bottom: 0px

    }

    html,

    body {

        scroll-behavior: smooth

    }

    body {

        color: var(--text);

        /*background: var(--body);*/

        background-color: #fff5e4;

        font-size: var(--bodysize);

        font-family: var(--nfamily);

        line-height: var(--bodyheight);

        overflow-x: hidden

    }

    h1,

    h2,

    h3,

    h4,

    h5,

    h6 {

        font-weight: 500;

        color: var(--heading)

    }

    h1 {

        font-size: var(--h1size);

        line-height: var(--h1height)

    }

    h2 {

        font-size: var(--h2size);

        line-height: var(--h2height);

        letter-spacing: -0.3px;

        text-transform: capitalize

    }

    h3 {

        font-size: var(--h3size);

        line-height: var(--h3height)

    }

    h4 {

        font-size: var(--h4size);

        line-height: var(--h4height)

    }

    h5 {

        font-size: var(--h5size);

        line-height: var(--h5height)

    }

    h6 {

        font-size: var(--h6size);

        line-height: var(--h6height)

    }

    input::placeholder,

    textarea::placeholder {

        font-size: 14px;

        color: var(--gray);

        text-transform: capitalize

    }

    input,

    button {

        border: none;

        outline: none;

        background: none

    }

    button:focus {

        outline: none

    }

    .facebook:hover {

        color: var(--white);

        background: var(--facebook)

    }

    .twitter:hover {

        color: var(--white);

        background: var(--twitter)

    }

    .linkedin:hover {

        color: var(--white);

        background: var(--linkedin)

    }

    @media (max-width: 575px) {

        .col {

            padding: 0px 4px

        }

    }

    .section {

        margin-bottom: 80px;

    }

    .inner-section {

        padding-bottom: 60px

    }

    .section-heading {

        text-align: center;

        /*margin-bottom: 50px;*/

        margin-top: 50px;

    }

    .section-btn-50 {

        text-align: center;

        margin-top: 50px

    }

    .section-btn-25 {

        text-align: center;

        margin-top: 25px

    }

    @media (max-width: 767px) {

        .section {

            margin-bottom: 15px

        }

        .inner-section {

            /* margin-bottom: 60px */

        }

        .section-heading {

            margin-bottom: 7px;

            margin-top: 10px;

        }

        .section-heading h2 {

            font-size: 28px;

            line-height: 36px

        }

        .mainspan {

            color: #ba3e60;

            font-weight: 400;

            font-size: unset !important;

        }

    }

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

        .section {

            margin-bottom: 75px

        }

        .inner-section {

            margin-bottom: 80px

        }

    }

    .alert {

        border: none;

        margin: 0px;

        padding: 0px 15px;

        border-radius: 0px

    }

    .alert-info {

        text-align: center;

        margin-bottom: 30px;

        padding: 20px 20px;

        border-radius: 3px;

        background: var(--white);

        border-top: 3px solid var(--primary);

        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08)

    }

    .alert-info p {

        font-weight: 500;

        color: var(--primary);

        text-shadow: var(--primary-shadow)

    }

    .alert-info p a {

        margin-left: 5px;

        text-decoration: underline

    }

    .breadcrumb {

        align-items: center;

        justify-content: center;

        background: none;

        margin: 0px

    }

    .breadcrumb .active {

        color: var(--gray-chalk)

    }

    .breadcrumb-item {

        font-size: 15px;

        padding: 0px !important;

        text-transform: capitalize

    }

    .breadcrumb-item a {

        color: var(--secondary)

    }

    .breadcrumb-item a:hover {

        color: var(--white);

        text-decoration: underline

    }

    .breadcrumb-item+.breadcrumb-item::before {

        color: var(--white);

        padding: 0px 8px

    }

    .backdrop {

        position: fixed;

        top: 0px;

        left: 0px;

        z-index: 4;

        width: 1000%;

        height: 100%;

        background: rgba(0, 0, 0, 0.5);

        display: none

    }

    .btn {

        border: none;

        font-size: 15px;

        font-weight: 500;

        text-transform: uppercase;

        padding: 14px 32px;

        border-radius: 6px;

        border: 2px solid var(--primary)

    }

    .btn:focus {

        box-shadow: none !important

    }

    .btn i {

        margin-right: 5px

    }

    .btn-inline {

        color: var(--white);

        background: var(--primary)

    }

    .btn-inline:hover {

        color: var(--primary);

        background: var(--white)

    }

    .btn-outline {

        color: var(--primary);

        background: var(--white)

    }

    .btn-outline:hover {

        color: var(--white);

        background: var(--primary)

    }

    .menu-badge {

        font-size: 10px;

        padding: 0px 5px;

        margin-left: 5px;

        line-height: 18px;

        border-radius: 3px;

        letter-spacing: 0.3px;

        display: inline-block;

        text-transform: uppercase;

        color: var(--white);

        background: var(--red);

        text-shadow: var(--primary-tshadow)

    }

    .dropdown-arrow {

        position: relative;

        padding-right: 18px !important

    }

    .dropdown-arrow:hover::before {

        color: var(--primary)

    }

    .dropdown-arrow::before {

        position: absolute;

        content: "\ea99";

        top: 50%;

        right: 0px;

        font-size: 15px;

        line-height: 15px;

        color: var(--text);

        font-family: IcoFont;

        transform: translateY(-50%);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .dropdown-link {

        position: relative;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .dropdown-link:hover {

        color: var(--primary);

        background: var(--chalk)

    }

    .dropdown-link:hover::before {

        color: var(--primary)

    }

    .dropdown-link::before {

        position: absolute;

        top: 50%;

        right: 18px;

        content: "\f054";

        font-size: 10px;

        font-weight: 900;

        font-family: "Font Awesome 5 Free";

        transform: translateY(-50%);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .dropdown-link.active {

        color: var(--primary)

    }

    .dropdown-link.active::before {

        color: var(--primary);

        transform: translateY(-50%) rotate(90deg)

    }

    .dropdown-list {

        display: none;

        padding: 0px 20px;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .dropdown-list li a {

        width: 100%;

        font-size: 15px;

        line-height: 18px;

        border-radius: 8px;

        padding: 10px 15px 10px 35px;

        color: var(--text);

        background: var(--white);

        position: relative;

        white-space: nowrap;

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .dropdown-list li a:hover {

        color: var(--primary);

        background: var(--chalk)

    }

    .dropdown-list li a::before {

        position: absolute;

        top: 50%;

        left: 15px;

        content: "\f068";

        font-size: 10px;

        font-weight: 900;

        font-family: "Font Awesome 5 Free";

        transform: translateY(-50%)

    }

    .dropdown:hover .dropdown-position-list {

        visibility: visible;

        opacity: 1;

        top: 70px

    }

    .dropdown-position-list {

        position: absolute;

        top: 100px;

        left: 0px;

        z-index: 2;

        width: 200px;

        height: auto;

        visibility: hidden;

        opacity: 0;

        padding: 10px;

        border-radius: 8px;

        background: var(--white);

        border: 1px solid var(--border);

        box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .dropdown-position-list::before {

        position: absolute;

        content: "";

        z-index: -1;

        top: -7px;

        left: 12px;

        width: 12px;

        height: 12px;

        border-radius: 3px;

        transform: rotate(45deg);

        background: var(--white);

        border-top: 1px solid var(--border);

        border-left: 1px solid var(--border)

    }

    .dropdown-position-list li a {

        width: 100%;

        font-size: 15px;

        line-height: 18px;

        border-radius: 8px;

        padding: 8px 15px;

        color: var(--text);

        background: var(--white);

        white-space: nowrap;

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .dropdown-position-list li a:hover {

        color: var(--primary);

        background: var(--chalk)

    }

    .dropdown-megamenu {

        position: static

    }

    .dropdown-megamenu:hover .megamenu {

        visibility: visible;

        opacity: 1;

        top: 204px

    }

    .megamenu {

        position: absolute;

        top: 230px;

        left: 50%;

        z-index: 2;

        width: 1180px;

        border-radius: 8px;

        padding: 30px 30px 0px;

        background: var(--white);

        border: 1px solid var(--border);

        box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);

        transform: translateX(-50%);

        visibility: hidden;

        opacity: 0;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .megamenu-wrap {

        margin-bottom: 30px

    }

    .megamenu-title {

        padding-bottom: 18px;

        margin-bottom: 20px;

        position: relative;

        text-transform: capitalize;

        border-bottom: 1px solid var(--border)

    }

    .megamenu-title::before {

        position: absolute;

        content: "";

        bottom: -2px;

        left: 0px;

        width: 50px;

        height: 2px;

        background: var(--primary)

    }

    .megamenu-list {

        border-left: 1px solid var(--border)

    }

    .megamenu-list li a {

        width: 100%;

        border-radius: 5px;

        padding: 5px 0px 5px 25px;

        color: var(--text);

        white-space: nowrap;

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .megamenu-list li a:hover {

        color: var(--primary);

        background: var(--chalk)

    }

    .megamenu-promo a img {

        width: 100%;

        border-radius: 3px

    }

    @media (max-width: 1199px) {

        .megamenu {

            width: 100%

        }

    }

    .form-title {

        text-align: center;

        margin-bottom: 20px

    }

    .form-title h3 {

        text-transform: capitalize

    }

    .form-group {

        margin-bottom: 25px

    }

    .form-group small {

        color: var(--gray);

        letter-spacing: 0.3px;

        padding: 0px 0px 0px 20px

    }

    .form-group textarea {

        height: 150px;

        padding: 12px 20px

    }

    .form-label {

        font-weight: 500;

        margin: 0px 0px 7px 3px;

        white-space: nowrap;

        text-transform: capitalize

    }

    .form-control {

        width: 100%;

        height: 45px;

        border-radius: 6px;

        padding: 0px 20px 2px;

        color: var(--text);

        background: var(--chalk);

        border: 1px solid var(--border)

    }

    .form-control:focus-within {

        background: var(--chalk);

        border-color: var(--primary);

        box-shadow: none;

        outline: 0

    }

    .form-control[type=file]::-webkit-file-upload-button,

    .form-control[type=file]::file-selector-button {

        border: none;

        background: none;

        height: 45px;

        line-height: 45px;

        padding: 5px 15px 0px;

        color: var(--gray)

    }

    .form-control[type=file]::-webkit-file-upload-button:hover,

    .form-control[type=file]::file-selector-button:hover {

        background-color: transparent

    }

    .form-control[type=file]::-webkit-file-upload-button:focus,

    .form-control[type=file]::file-selector-button:focus {

        border: none;

        outline: none

    }

    .form-select {

        height: 45px;

        font-size: 15px;

        padding: 0px 16px;

        letter-spacing: 0.3px;

        background-size: 12px 10px;

        text-transform: capitalize;

        color: var(--text);

        cursor: pointer

    }

    .form-select:focus-within {

        box-shadow: none;

        border-color: var(--primary)

    }

    .form-btn {

        width: 100%;

        height: 45px;

        font-size: 14px;

        font-weight: 400;

        line-height: 45px;

        border-radius: 6px;

        letter-spacing: 0.5px;

        text-align: center;

        text-transform: uppercase;

        color: var(--white);

        background: var(--primary)

    }

    .form-input-group {

        position: relative

    }

    .form-input-group:focus-within i {

        color: var(--primary)

    }

    .form-input-group input {

        padding: 0px 20px 2px 45px

    }

    .form-input-group textarea {

        padding: 12px 20px 12px 45px

    }

    .form-input-group i {

        position: absolute;

        top: 0px;

        left: 0px;

        width: 45px;

        height: 45px;

        font-size: 18px;

        line-height: 45px;

        border-radius: 50%;

        text-align: center

    }

    .form-btn-group {

        width: 100%;

        height: 45px;

        font-size: 14px;

        font-weight: 500;

        line-height: 45px;

        border-radius: 6px;

        letter-spacing: 0.5px;

        text-align: center;

        text-transform: uppercase;

        color: var(--white);

        background: var(--primary)

    }

    .form-btn-group i {

        font-size: 15px;

        margin-right: 5px;

        display: inline-block

    }

    .nav-tabs {

        border: none;

        padding: 15px 25px;

        border-radius: 8px;

        margin-bottom: 0px;

        align-items: center;

        justify-content: center;

        /* background: var(--white) */

    }

    /* .nav-tabs li {

        padding: 10px 30px;

        border: 1px solid #c1c1c1;

        margin-right: 10px;

        border-radius: 6px;

    } */

    /* .nav-tabs li:last-child {

        border: none

    } */

    .tab-link {

        font-size: 15px;

        font-weight: 500;

        text-transform: uppercase;

        color: var(--heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .tab-link:hover {

        color: var(--primary)

    }

    .tab-link i {

        font-size: 18px;

        margin-right: 3px

    }

    .tab-link.active {

        color: var(--primary)

    }

    .tab-pane {

        display: none;

        padding: 0px

    }

    .tab-pane.active {

        display: block

    }

    @media (max-width: 575px) {

        .nav-tabs {

            flex-wrap: nowrap;

            flex-direction: column

        }

        .nav-tabs li {

            padding: 5px;

            border: none

        }

    }

    @media (min-width: 576px) and (max-width: 767px) {

        .nav-tabs {

            padding: 25px 10px

        }

        .nav-tabs li {

            padding: 0px 20px

        }

    }

    .pagination {

        align-items: center;

        justify-content: center

    }

    .page-item {

        margin-left: 10px

    }

    .page-item:first-child .page-item,

    .page-item:last-child .page-item {

        border-radius: 50%

    }

    .page-item .active {

        color: var(--white);

        background: var(--secondary)

    }

    .page-item {

        width: 40px;

        height: 40px;

        line-height: 40px;

        text-align: center;

        border-radius: 50%;

        font-weight: 400;

        border: none;

        padding: 0px;

        color: var(--text);

        background: var(--white)

    }

    .page-item:hover {

        color: var(--white);

        background: var(--primary)

    }

    .page-item:focus {

        box-shadow: none

    }

    @media (max-width: 991px) {

        .page-item {

            width: 35px;

            height: 35px;

            line-height: 35px

        }

    }

    @media (max-width: 767px) {

        .page-item {

            margin: 0px 3px

        }

    }

    .star-rating {

        direction: rtl;

        text-align: center;

        margin: 25px 0px

    }

    .star-rating input {

        display: none

    }

    .star-rating input:checked ~ label::after {

        opacity: 1

    }

    .star-rating label {

        display: inline-block;

        position: relative;

        cursor: pointer;

        margin: 0px 8px

    }

    .star-rating label:hover::after {

        opacity: 1

    }

    .star-rating label:hover:hover ~ label::after {

        opacity: 1

    }

    .star-rating label::before {

        content: "\ec7c";

        font-family: 'Icofont';

        font-weight: 900;

        font-size: 35px;

        display: block;

        color: #bbbbbb

    }

    .star-rating label::after {

        content: "\ec7c";

        font-family: 'Icofont';

        font-weight: 900;

        font-size: 35px;

        position: absolute;

        display: block;

        top: 0px;

        left: 0px;

        color: var(--yellow);

        opacity: 0

    }

    .slider-arrow:hover .dandik,

    .slider-arrow:hover .bamdik {

        visibility: visible;

        opacity: 1

    }

    .dandik,

    .bamdik {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        font-size: 20px;

        width: 45px;

        height: 45px;

        line-height: 45px;

        text-align: center;

        border-radius: 50%;

        color: var(--primary);

        background: var(--white);

        text-shadow: var(--primary-tshadow);

        box-shadow: var(--primary-bshadow);

        visibility: hidden;

        opacity: 0;

        cursor: pointer;

        z-index: 1;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .dandik:hover,

    .bamdik:hover {

        color: var(--white);

        background: var(--primary)

    }

    .dandik {

        right: -10px

    }

    .bamdik {

        left: -10px

    }

    .slider-dots ul {

        position: absolute;

        bottom: 20px;

        left: 50%;

        transform: translateX(-50%)

    }

    .slider-dots ul li {

        width: 9px;

        height: 9px;

        margin: 0px 5px;

        border-radius: 30px;

        cursor: pointer;

        display: inline-block;

        background: var(--primary);

        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .slider-dots ul li button {

        display: none

    }

    .slider-dots ul li.slick-active {

        width: 25px;

        background: var(--primary);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    @media (max-width: 575px) {

        .slider-dots ul {

            bottom: 10px

        }

        .slider-dots ul li {

            margin: 0px 6px

        }

    }

    @media (min-width: 576px) and (max-width: 767px) {

        .slider-dots ul {

            bottom: 20px

        }

        .slider-dots ul li {

            margin: 0px 6px

        }

    }

    /* .product-add {

        width: 100%;

        font-size: 15px;

        padding: 6px 0px;

        border-radius: 6px;

        text-align: center;

        text-transform: capitalize;

        color: var(--heading);

        background: var(--border);

        text-shadow: var(-primary-tshadow);

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .product-add i {

        font-size: 14px;

        margin-right: 5px

    } */



    .product-action a i {

        width: 30px;

		    height: 30px;

		    font-size: 14px;

		    line-height: 30px;

		    border-radius: 6px;

		    text-align: center;

		    display: inline-block;

		    color: var(--text);

		    background: #d8d8d8;

        text-shadow: var(--primary-tshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .product-action a i:hover {

        color: var(--white);

        background: var(--primary)

    }

    .product-action input {

        /* width: 25%; */

        width: 15%;

	    font-size: 15px;

	    margin: 0px 5px;

	    padding: 2px 0px;

        border-radius: 6px;

        text-align: center;

        color: var(--white);

        background: var(--primary);

        text-shadow: var(--primary-tshadow)

    }

    .table-list {

        width: 100%

    }

    thead tr {

        background: var(--primary)

    }

    thead tr th {

        font-size: 17px;

        font-weight: 500;

        white-space: nowrap;

        text-align: center;

        text-transform: capitalize;

        padding: 6px 10px;

        color: var(--white);

        border-right: 1px solid var(--border)

    }

    thead tr th:first-child {

        border-radius: 6px 0px 0px 6px

    }

    thead tr th:last-child {

        border-right: none;

        border-radius: 0px 6px 6px 0px

    }

    tbody tr {

        border-bottom: 1px solid var(--border)

    }

    tbody tr td {

        padding: 6px 10px;

        text-align: center;

        border-right: 1px solid var(--border)

    }

    tbody tr td:last-child {

        border-right: none

    }

    .table-name {

        white-space: nowrap;

        text-transform: capitalize

    }

    .table-image img {

        width: auto;

        height: 100px

    }

    .table-price h6 {

        white-space: nowrap;

        font-size: 14px;

    }

    .table-price h6 small {

        font-size: 13px;

        margin-left: 3px;

        color: var(--gray);

        font-family: sans-serif

    }

    .table-desc p {

        width: 150px;

        font-size: 15px;

        text-align: left

    }

    .table-desc p a {

        text-transform: capitalize

    }

    .table-desc p a:hover {

        text-decoration: underline

    }

    .table-vendor a {

        font-weight: 500;

        color: var(--heading);

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .table-vendor a:hover {

        color: var(--primary)

    }

    .table-status h6 {

        text-transform: capitalize

    }

    .table-status .stock-in {

        color: var(--purple)

    }

    .table-status .stock-out {

        color: var(--orange)

    }

    .table-shop {

        width: 180px

    }

    .table-shop .product-add {

        color: var(--white);

        background: var(--primary)

    }

    .table-shop .action-plus i,

    .table-shop .action-minus i {

        background: #ba3e60;

        color: #fff;

    }

    .table-action a i {

        width: 30px;

        height: 30px;

        font-size: 14px;

        line-height: 30px;

        text-align: center;

        display: inline-block;

        border-radius: 5px;

        margin: 3px;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .close_coupon{

        padding: 0px 5px;

        font-size: 15px;

        background: #ff3939;

        color: #fff;

        border: none;

        padding-left: 5px;

        margin-right: 5px;

        border-radius: 12px;

    }

    .table-action .view i {

        color: var(--green);

        background: var(--white)

    }

    .table-action .view i:hover {

        color: var(--white);

        background: var(--green)

    }

    .table-action .wish i {

        color: var(--green);

        background: var(--white)

    }

    .table-action .wish.active i {

        color: var(--white);

        background: var(--green)

    }

    .table-action .trash i {

        color: var(--red);

        background: var(--white)

    }

    .table-action .trash i:hover {

        color: var(--white);

        background: var(--red)

    }

    @media (max-width: 1199px) {

        .table-scroll {

            overflow-x: scroll

        }

    }

    .modal-dialog {

        max-width: max-content

    }

    .modal-content {

        border: none;

        background: none;

        border-radius: 0px

    }

    .modal-close {

        position: absolute;

        top: -15px;

        right: -15px;

        z-index: 1;

        width: 35px;

        height: 35px;

        font-size: 18px;

        line-height: 35px;

        border-radius: 50%;

        text-align: center;

        display: inline-block;

        background: var(--white);

        box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .modal-close:hover {

        color: var(--white);

        background: var(--primary)

    }

    .modal-form {

        width: 800px;

        padding: 30px;

        border-radius: 8px;

        background: var(--white)

    }

    @media (max-width: 400px) {

        .modal-form,

        .modal-dialog {

            width: 100%;

            max-width: inherit

        }

    }

    @media (max-width: 1100px) {

        .modal-dialog {

            margin: 80px auto 50px

        }

        .modal-close {

            right: 50%;

            top: -45px;

            transform: translateX(50%)

        }

    }

    .order-track {

        margin-bottom: 25px

    }

    .order-track-list {

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 25px 25px;

        border-radius: 8px;

        background: var(--chalk)

    }

    .order-track-item {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        position: relative;

        text-align: center;

        width: 100%;

        z-index: 1

    }

    .order-track-item::before {

        position: absolute;

        content: "";

        top: 20px;

        left: 0px;

        width: 100%;

        height: 5px;

        z-index: -1;

        background: var(--white)

    }

    .order-track-item:first-child::before {

        border-radius: 50px 0px 0px 50px

    }

    .order-track-item:last-child::before {

        border-radius: 0px 50px 50px 0px

    }

    .order-track-item i {

        width: 45px;

        height: 45px;

        font-size: 20px;

        line-height: 42px;

        border-radius: 50%;

        margin-bottom: 10px;

        text-align: center;

        display: inline-block;

        color: var(--primary);

        background: var(--white);

        border: 2px dotted var(--primary)

    }

    .order-track-item span {

        font-weight: 500;

        line-height: 20px;

        white-space: nowrap;

        color: var(--heading);

        text-transform: capitalize

    }

    .order-track-item.active::before {

        background: var(--primary)

    }

    .order-track-item.active i {

        color: var(--white);

        background: var(--primary)

    }

    .order-track-item.active span {

        color: var(--primary)

    }

    @media (max-width: 575px) {

        .order-track {

            overflow-x: scroll

        }

        .order-track-list {

            width: 575px

        }

    }

    @media (min-width: 576px) and (max-width: 767px) {

        .order-track-item span {

            white-space: inherit

        }

    }

    .nav-pills .nav-link {

        font-weight: 400;

        list-style: decimal

    }

    .nav-pills .nav-link.active {

        color: var(--primary);

        background: transparent

    }

    @media (max-width: 991px) {

        .nav {

            margin-bottom: 30px

        }

    }

    .countdown {

        display: flex;

        align-items: center;

        justify-content: center

    }

    .countdown-time {

        padding: 0px 30px;

        position: relative;

        color: var(--heading);

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column

    }

    .countdown-time::before {

        position: absolute;

        content: ":";

        top: 28%;

        right: -3px;

        font-size: 25px;

        transform: translateY(-50%);

        color: var(--heading)

    }

    .countdown-time:last-child::before {

        display: none

    }

    .countdown-time span {

        display: block;

        font-size: 40px;

        font-weight: 700;

        line-height: 40px;

        color: var(--primary)

    }

    .countdown-time small {

        font-size: 18px;

        font-weight: 500;

        text-transform: capitalize

    }

    @media (max-width: 575px) {

        .countdown-time {

            padding: 0px 12px

        }

        .countdown-time:first-child {

            padding-left: 0px

        }

        .countdown-time:last-child {

            padding-right: 0px

        }

        .countdown-time span {

            font-size: 35px

        }

        .countdown-time small {

            font-size: 16px

        }

    }

    .suggest-card {

        position: relative

    }

    .suggest-card::before {

        position: absolute;

        content: "";

        top: 0px;

        left: 0px;

        width: 100%;

        height: 100%;

        border-radius: 8px;

        background: rgba(0, 0, 0, 0.4);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .suggest-card:hover::before {

        background: rgba(17, 151, 68, 0.9)

    }

    .suggest-card img {

        width: 100%;

        border-radius: 8px

    }

    .suggest-card h5 {

        position: absolute;

        top: 50%;

        left: 50%;

        width: 100%;

        text-align: center;

        transform: translate(-50%, -50%);

        color: var(--white);

        font-weight: 400;

        text-transform: capitalize;

        text-shadow: var(--primary-tshadow)

    }

    .suggest-card h5 span {

        display: block;

        font-size: 15px;

        font-weight: 300

    }

    @media (max-width: 400px) {

        .suggest-card h5 {

            font-size: 16px;

            line-height: 24px

        }

        .suggest-card h5 span {

            font: 14px

        }

    }

    .product-card {

        width: 100%;

        overflow: hidden;

        position: relative;

        margin-bottom: 25px;

        padding: 15px 18px;

        border-radius: 8px;

        background: var(--white);

        border: 1px solid var(--border);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .product-card:hover {

        border-color: var(--primary);

        box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1)

    }

    .product-card:hover .product-widget {

        opacity: 1;

        bottom: 15px

    }

    .product-card .product-add:hover {

        color: var(--white);

        background: var(--primary)

    }

    .product-media {

        position: relative

    }

    

    .label-text {

        font-size: 14px;

        padding: 5px 8px;

        line-height: 13px;

        border-radius: 3px;

        margin-bottom: 5px;

        color: var(--white);

        text-align: center;

        text-transform: capitalize

    }

    .label-text.off {

        background: var(--red)

    }

    .label-text.new {

        background: var(--green)

    }

    .label-text.sale {

        background: var(--orange)

    }

    .label-text.feat {

        background: var(--purple)

    }

    .label-text.rate {

        background: var(--yellow)

    }

    .label-text.order {

        background: var(--blue)

    }

    .product-wish {

        position: absolute;

        top: 10px;

        right: 10px;

        font-size: 18px;

        color: var(--gray-chalk)

    }

    .product-wish.active {

        color: var(--primary)

    }

    

    .product-image img {

        width: 100%;

        height: 370px;
        /*height: 345px;*/

        object-fit: cover;

    }

    .product-widget {

        display: flex;

        align-items: center;

        justify-content: center;

        position: absolute;

        bottom: 0px;

        left: 0px;

        width: 100%;

        opacity: 0;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .product-widget a {

        width: 40px;

        height: 40px;

        font-size: 15px;

        margin: 0px 6px;

        line-height: 40px;

        text-align: center;

        border-radius: 8px;

        color: var(--white);

        background: var(--primary);

        text-shadow: var(-primary-tshadow);

        box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12)

    }

    .product-content {

        padding-top: 12px;

        text-align: center;

        border-top: 1px solid var(--border)

    }

    .product-rating {

        display: flex;

        align-items: center;

        justify-content: center;

        margin-bottom: 3px

    }

    .product-rating i,

    .product-rating a {

        font-size: 14px;

        margin: 0px 2px;

        color: var(--gray)

    }

    .product-rating a {

        white-space: nowrap;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .product-rating a:hover {

        color: var(--primary);

        text-decoration: underline

    }

    .product-rating .active {

        color: var(--yellow)

    }

    .product-name {

        margin-bottom: 3px;

        text-transform: capitalize

    }

    .product-name a {

        color: var(--sub-heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .product-name a:hover {

        color: var(--primary)

    }

    .product-price {

        display: flex;

        align-items: center;

        justify-content: center;

        align-items: baseline;

        margin-bottom: 13px

    }

    .product-price del {

        color: var(--red);

        margin-right: 8px

    }

    .product-price span {

        color: var(--primary);

        white-space: nowrap

    }

    .product-price span small {

        font-weight: 400

    }

    .product-disable {

        position: relative

    }

    .product-disable:hover {

        border-color: var(--border);

        box-shadow: none

    }

    .product-disable:hover .product-add {

        color: var(--heading);

        background: var(--border)

    }

    .product-disable .product-widget {

        visibility: hidden

    }

    .product-disable::before {

        position: absolute;

        content: "Out of Stock";

        top: 40%;

        left: 50%;

        z-index: 2;

        width: 100%;

        font-size: 15px;

        font-weight: 400;

        padding: 15px 0px;

        text-align: center;

        text-transform: uppercase;

        text-shadow: var(--primary-tshadow);

        transform: translate(-50%, -50%);

        color: var(--white);

        background: rgba(224, 152, 22, 0.9)

    }

    .product-disable::after {

        position: absolute;

        content: "";

        top: 0px;

        left: 0px;

        z-index: 1;

        width: 100%;

        height: 100%;

        border-radius: 8px;

        background: rgba(255, 255, 255, 0.6)

    }

    .border_bot{

        border-bottom: 2px dotted #c1c1c1;

    }

    @media (max-width: 575px) {

        .product-card {

            padding: 8px;

            margin-bottom: 17px

        }

        .product-name {

            font-size: 11px;

            line-height: 22px

        }

		.product-image img{
		    width: 100%;
    		height: 275px;
    		/* height: 345px; */
    		object-fit: cover;

	}

	.product-price{
		font-size: 12px;
	}

    }

    .feature-card {

        width: 100%;

        overflow: hidden;

        position: relative;

        margin-bottom: 25px;

        padding: 18px 18px;

        border-radius: 8px;

        background: var(--white);

        border: 1px solid var(--border);

        display: flex;

        align-items: flex-start;

        justify-content: flex-start;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .feature-card:hover {

        border-color: var(--primary);

        box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1)

    }

    .feature-card:hover .feature-widget {

        opacity: 1;

        bottom: 15px

    }

    .feature-card:hover .feature-add {

        color: var(--white);

        background: var(--primary)

    }

    .feature-media {

        position: relative

    }

    .feature-label {

        display: flex;

        flex-direction: column;

        position: absolute;

        top: 0px;

        left: 0px

    }

    .label-text {

        font-size: 14px;

        padding: 5px 8px;

        line-height: 13px;

        border-radius: 3px;

        margin-bottom: 5px;

        color: var(--white);

        text-align: center;

        text-transform: capitalize

    }

    .label-text.off {

        background: var(--red)

    }

    .label-text.new {

        background: var(--green)

    }

    .label-text.sale {

        background: var(--orange)

    }

    .label-text.feat {

        background: var(--purple)

    }

    .label-text.rate {

        background: var(--yellow)

    }

    .label-text.order {

        background: var(--blue)

    }

    .feature-wish {

        position: absolute;

        top: 0px;

        right: 0px;

        font-size: 18px;

        color: var(--gray-chalk)

    }

    .feature-wish.active {

        color: var(--primary)

    }

    .feature-image img {

        width: 220px

    }

    .feature-widget {

        display: flex;

        align-items: center;

        justify-content: center;

        position: absolute;

        bottom: 0px;

        left: 0px;

        width: 100%;

        opacity: 0;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .feature-widget a {

        width: 40px;

        height: 40px;

        font-size: 15px;

        margin: 0px 6px;

        line-height: 40px;

        text-align: center;

        border-radius: 8px;

        color: var(--white);

        background: var(--primary);

        text-shadow: var(-primary-tshadow);

        box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12)

    }

    .feature-content {

        width: 100%;

        padding-left: 25px;

        margin-left: 25px;

        border-left: 1px solid var(--border)

    }

    .feature-rating {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        margin-bottom: 3px

    }

    .feature-rating i,

    .feature-rating a {

        font-size: 14px;

        margin: 0px 2px;

        color: var(--gray)

    }

    .feature-rating a {

        white-space: nowrap;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .feature-rating a:hover {

        color: var(--primary);

        text-decoration: underline

    }

    .feature-rating .active {

        color: var(--yellow)

    }

    .feature-name {

        margin-bottom: 3px;

        text-transform: capitalize

    }

    .feature-name a {

        color: var(--sub-heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .feature-name a:hover {

        color: var(--primary)

    }

    .feature-price {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        align-items: baseline;

        margin-bottom: 10px

    }

    .feature-price del {

        color: var(--red);

        margin-right: 8px

    }

    .feature-price span {

        color: var(--primary);

        white-space: nowrap

    }

    .feature-price span small {

        font-weight: 400

    }

    .feature-desc {

        font-size: 15px;

        line-height: 25px;

        margin-bottom: 15px

    }

    @media (max-width: 575px) {

        .feature-card {

            padding: 8px;

            margin-bottom: 15px

        }

        .feature-image img {

            width: 100%

        }

        .feature-name {

            font-size: 15px;

            line-height: 22px

        }

    }

    @media (max-width: 450px) {

        .feature-card {

            align-items: center

        }

        .feature-content {

            padding-left: 12px;

            margin-left: 12px

        }

        .feature-desc {

            display: none

        }

    }

    @media (min-width: 992px) and (max-width: 1199px) {

        .feature-image img {

            width: 190px

        }

    }

    .product-standard {

        width: 100%;

        overflow: hidden;

        position: relative;

        margin-bottom: 25px;

        padding: 15px 15px;

        border-radius: 8px;

        background: var(--white);

        border: 1px solid var(--border);

        display: flex;

        align-items: center;

        justify-content: flex-start;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .product-standard:hover {

        border-color: var(--primary);

        box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1)

    }

    .product-standard:hover .standard-widget {

        opacity: 1;

        bottom: 15px

    }

    .product-standard:hover .standard-add {

        color: var(--white);

        background: var(--primary)

    }

    .standard-media {

        position: relative

    }

    .standard-label-group {

        position: absolute;

        top: 15px;

        left: 15px;

        z-index: 1

    }

    .standard-label {

        font-size: 14px;

        padding: 5px 8px;

        line-height: 13px;

        border-radius: 3px;

        text-transform: capitalize;

        color: var(--white)

    }

    .standard-label.off {

        background: var(--red)

    }

    .standard-label.new {

        background: var(--green)

    }

    .standard-label.sale {

        background: var(--orange)

    }

    .standard-label.feat {

        background: var(--purple)

    }

    .standard-label.rate {

        background: var(--yellow)

    }

    .standard-image img {

        width: 220px

    }

    .standard-widget {

        display: flex;

        align-items: center;

        justify-content: center;

        position: absolute;

        bottom: 0px;

        left: 0px;

        width: 100%;

        opacity: 0;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .standard-widget a {

        width: 40px;

        height: 40px;

        font-size: 15px;

        margin: 0px 6px;

        line-height: 40px;

        text-align: center;

        border-radius: 8px;

        color: var(--white);

        background: var(--primary);

        text-shadow: var(-primary-tshadow);

        box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12)

    }

    .standard-content {

        width: 100%;

        margin-left: 30px;

        padding-left: 30px;

        border-left: 1px solid var(--border)

    }

    .standard-name {

        margin-bottom: 5px;

        text-transform: capitalize

    }

    .standard-name a {

        color: var(--sub-heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .standard-name a:hover {

        color: var(--primary)

    }

    .standard-price {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        align-items: baseline;

        margin-bottom: 5px

    }

    .standard-price del {

        color: var(--red);

        margin-right: 12px

    }

    .standard-price span {

        color: var(--primary);

        white-space: nowrap

    }

    .standard-price span small {

        font-weight: 400

    }

    .standard-rating {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        margin-bottom: 10px

    }

    .standard-rating i,

    .standard-rating a {

        font-size: 14px;

        margin-right: 3px;

        color: var(--gray)

    }

    .standard-rating a {

        white-space: nowrap;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .standard-rating a:hover {

        color: var(--primary);

        text-decoration: underline

    }

    .standard-rating .active {

        color: var(--yellow)

    }

    .standard-desc {

        margin-bottom: 20px

    }

    .standard-action-group {

        display: grid;

        grid-gap: 15px;

        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))

    }

    .standard-action-group .product-add,

    .standard-action-group .action-input {

        padding: 10px 0px;

        letter-spacing: 0.5px;

        text-transform: uppercase;

        color: var(--white);

        background: var(--primary)

    }

    .standard-action-group .product-add {

        font-size: 14px;

        font-weight: 500

    }

    .standard-wish {

        padding: 10px 0px;

        border-radius: 8px;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .standard-wish i {

        font-size: 16px;

        margin-right: 6px

    }

    .standard-wish span {

        font-size: 14px;

        font-weight: 500;

        letter-spacing: 0.5px;

        text-transform: uppercase

    }

    .standard-wish {

        color: var(--primary);

        background: var(--border)

    }

    .standard-wish.active {

        color: var(--white);

        background: var(--primary)

    }

    .standard-action {

        display: flex;

        align-items: center;

        justify-content: center;

        display: none

    }

    .standard-action button i,

    .standard-action a i {

        width: 35px;

        height: 35px;

        font-size: 15px;

        line-height: 35px;

        border-radius: 5px;

        text-align: center;

        display: inline-block;

        color: var(--text);

        background: var(--border);

        text-shadow: var(--primary-tshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .standard-action button i:hover,

    .standard-action a i:hover {

        color: var(--white);

        background: var(--primary)

    }

    .standard-action input {

        width: 100%;

        height: 45px;

        margin: 0px 8px;

        font-size: 15px;

        line-height: 14px;

        border-radius: 5px;

        letter-spacing: 0.3px;

        text-align: center;

        color: var(--white);

        background: var(--primary);

        text-shadow: var(--primary-tshadow)

    }

    @media (max-width: 575px) {

        .product-standard {

            padding: 10px 10px

        }

        .standard-image img {

            width: 130px

        }

        .standard-content {

            margin-left: 10px;

            padding-left: 10px

        }

        .standard-name {

            font-size: 16px;

            margin-bottom: 3px

        }

        .standard-price {

            font-size: 15px;

            margin-bottom: 3px

        }

        .standard-rating {

            margin-bottom: 6px

        }

        .standard-desc {

            display: none

        }

        .standard-action-group {

            grid-gap: 10px;

            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))

        }

        .product-add,

        .standard-wish {

            padding: 8px 0px

        }

        .product-add i,

        .standard-wish i {

            display: none

        }

        .standard-action input {

            height: 38px

        }

    }

    @media (min-width: 576px) and (max-width: 767px) {

        .standard-image img {

            width: 150px

        }

        .standard-content {

            margin-left: 10px;

            padding-left: 10px

        }

        .standard-name {

            font-size: 18px

        }

        .standard-price {

            font-size: 16px

        }

        .standard-desc {

            display: none

        }

        .standard-action-group {

            grid-gap: 10px;

            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))

        }

        .product-add,

        .standard-wish {

            padding: 8px 0px

        }

        .product-add i,

        .standard-wish i {

            display: none

        }

        .standard-action input {

            height: 38px

        }

    }

    .category-wrap:hover .category-overlay {

        transform: scale(1)

    }

    .category-media {

        position: relative;

        margin-bottom: 15px

    }

    .category-media img {

        width: 100%;

        height: auto;

        border-radius: 8px

    }

    .category-overlay {

        position: absolute;

        top: 0px;

        left: 0px;

        width: 100%;

        height: 100%;

        border-radius: 8px;

        text-align: center;

        background: rgba(0, 0, 0, 0.4);

        transform: scale(0);

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .category-overlay a i {

        width: 50px;

        height: 50px;

        line-height: 50px;

        border-radius: 50%;

        text-align: center;

        color: var(--white);

        background: var(--primary);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .category-overlay a i:hover {

        color: var(--primary);

        background: var(--white)

    }

    .category-meta {

        padding: 0px 10px

    }

    .category-meta h4 {

        text-transform: capitalize;

        margin-bottom: 3px

    }

    @media (max-width: 575px) {

        .category-wrap {

            width: 150px

        }

    }

    @media (max-width: 1199px) {

        .category-meta {

            padding: 0px 5px

        }

        .category-meta h4 {

            font-size: 17px;

            margin-bottom: 0px

        }

        .category-meta p {

            font-size: 15px

        }

    }

    .brand-wrap {

        text-align: center;

        padding-top: 15px

    }

    .brand-wrap:hover .brand-media::before {

        border-color: var(--primary);

        animation-play-state: running

    }

    .brand-wrap:hover .brand-overlay {

        transform: scale(1)

    }

    .brand-media {

        display: inline-block;

        position: relative;

        margin-bottom: 15px;

        z-index: 1

    }

    /*.brand-media::before {*/

    /*    position: absolute;*/

    /*    content: "";*/

    /*    top: 50%;*/

    /*    left: 50%;*/

    /*    z-index: -1;*/

    /*    width: 175px;*/

    /*    height: 175px;*/

    /*    border-radius: 50%;*/

    /*    background: var(--white);*/

    /*    border: 2px dashed var(--border);*/

    /*    transform: translate(-50%, -50%);*/

    /*    animation: rotate360 1.2s linear infinite;*/

    /*    animation-play-state: paused*/

    /*}*/

    .brand-media img {

        width: 150px;

        height: 150px;

        border-radius: 50%

    }

    @keyframes rotate360 {

        to {

            transform: translate(-50%, -50%) rotate(360deg)

        }

    }

    .brand-overlay {

        position: absolute;

        top: 0px;

        left: 0px;

        width: 100%;

        height: 100%;

        border-radius: 50%;

        text-align: center;

        background: rgba(0, 0, 0, 0.4);

        transform: scale(0);

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .brand-overlay a i {

        width: 50px;

        height: 50px;

        line-height: 50px;

        border-radius: 50%;

        text-align: center;

        color: var(--white);

        background: var(--primary);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .brand-overlay a i:hover {

        color: var(--primary);

        background: var(--white)

    }

    .brand-meta h4 {

        text-transform: capitalize;

        margin-bottom: 3px

    }

    @media (max-width: 575px) {

        .brand-wrap {

            width: 200px

        }

    }

    .choose-card {

        display: flex

    }

    .choose-card:hover i {

        color: var(--white);

        background: var(--primary)

    }

    .choose-icon i {

        width: 75px;

        height: 75px;

        font-size: 40px;

        line-height: 75px;

        border-radius: 50%;

        margin-right: 30px;

        text-align: center;

        display: inline-block;

        color: var(--primary);

        background: var(--white);

        text-shadow: var(--primary-tshadow);

        box-shadow: var(--primary-bshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .choose-text h4 {

        margin-bottom: 10px;

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-card {

        margin-bottom: 30px

    }

    .blog-card:hover .blog-img img {

        transform: scale(1.05)

    }

    .blog-media {

        position: relative

    }

    .blog-calender {

        position: absolute;

        top: 20px;

        right: 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        width: 55px;

        height: 55px;

        border-radius: 6px;

        color: var(--white);

        background: rgba(0, 0, 0, 0.6)

    }

    .blog-calender span {

        line-height: 20px

    }

    .blog-date {

        font-size: 20px;

        font-weight: 500

    }

    .blog-month {

        font-size: 14px;

        letter-spacing: 0.3px;

        text-transform: uppercase

    }

    .blog-img {

        overflow: hidden;

        border-radius: 8px

    }

    .blog-img img {

        width: 100%;

        border-radius: 8px;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-content {

        padding: 15px 15px 0px

    }

    .blog-meta {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        flex-wrap: wrap;

        margin-bottom: 15px

    }

    .blog-meta li {

        display: flex;

        align-items: center;

        margin-right: 30px

    }

    .blog-meta li:last-child {

        margin: 0px

    }

    .blog-meta li i {

        color: var(--primary);

        margin-right: 8px;

        font-size: 14px

    }

    .blog-meta li a,

    .blog-meta li span {

        font-size: 15px;

        font-weight: 400;

        white-space: nowrap;

        text-transform: uppercase

    }

    .blog-meta li a {

        color: var(--text);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-meta li a:hover {

        color: var(--primary)

    }

    .blog-title {

        font-size: 22px;

        line-height: 30px;

        margin-bottom: 15px

    }

    .blog-title a {

        color: var(--heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-title a:hover {

        color: var(--primary)

    }

    .blog-desc {

        font-size: 17px;

        line-height: 28px;

        color: var(--gray);

        margin-bottom: 25px

    }

    .blog-btn {

        font-size: 15px;

        font-weight: 500;

        color: var(--primary);

        text-transform: uppercase;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-btn i {

        font-size: 17px;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-btn:hover {

        color: var(--primary);

        text-decoration: underline

    }

    .blog-btn:hover i {

        margin-left: 5px

    }

    @media (max-width: 575px) {

        .blog-meta li {

            margin-right: 25px

        }

        .blog-content {

            padding: 15px 8px 0px

        }

    }

    @media (min-width: 992px) and (max-width: 1199px) {

        .blog-content {

            padding: 15px 12px 0px

        }

    }

    .offer-card {

        margin-bottom: 30px

    }

    .offer-card a {

        width: 100%

    }

    .offer-card a img {

        width: 100%;

        border-radius: 8px

    }

    .offer-div {

        display: flex;

        align-items: center;

        justify-content: center;

        justify-content: space-between;

        padding: 10px 15px;

        margin: 0px 15px;

        border-radius: 0px 0px 8px 8px;

        background: var(--white)

    }

    .offer-div h5 {

        font-size: 15px;

        font-weight: 400;

        text-transform: uppercase

    }

    .offer-div button,

    .offer-div span {

        font-size: 15px;

        font-weight: 500;

        color: var(--primary);

        text-transform: capitalize

    }

    @media (min-width: 351px) and (max-width: 575px) {

        .offer-card {

            width: 320px;

            margin: 0px auto 30px

        }

    }

    .account-card {

        margin-bottom: 30px;

        border-radius: 8px;

        padding: 0px 30px 0px;

        background: var(--white)

    }

    .account-title {

        padding: 18px 0px;

        margin-bottom: 25px;

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center;

        justify-content: space-between;

        border-bottom: 1px solid var(--border)

    }

    .account-title::before {

        position: absolute;

        content: "";

        bottom: -2px;

        left: 0px;

        width: 50px;

        height: 2px;

        background: var(--primary)

    }

    .account-title h4 {

        text-transform: capitalize

    }

    .account-title button,

    .account-title a {

        border: none;

        font-size: 15px;

        font-weight: 500;

        border-radius: 6px;

        letter-spacing: 0.3px;

        padding: 5px 15px;

        white-space: nowrap;

        text-transform: capitalize;

        color: #fff;

        background: #ba3e60;

        text-shadow: var(--primary-tshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .account-title button:hover,

    .account-title a:hover {

        color: var(--white);

        background: var(--primary)

    }

    @media (max-width: 575px) {

        .account-card {

            padding: 0px 15px 15px

        }

    }

    .profile-card {

        padding: 10px;

        border-radius: 8px;

        margin-bottom: 25px;

        background: var(--chalk);

        border: 1px solid var(--border);

        position: relative;

        cursor: pointer

    }

    .profile-card:hover ul {

        visibility: visible;

        opacity: 1

    }

    .profile-card h5 {

        color: var(--text);

        margin-bottom: 0;

        text-transform: capitalize;

        font-size: 14px;

    }

    .profile-card p {

        text-transform: capitalize;

        font-size: 12px;

    }

    .profile-card p span{

    	font-weight: 500;

    }

    .profile-card ul {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        position: absolute;

        top: 50%;

        right: 15px;

        opacity: 0;

        visibility: hidden;

        transform: translateY(-50%);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .profile-card ul li {

        margin: 3px 0px

    }

    .profile-card ul li button {

        width: 25px;

        height: 25px;

        font-size: 12px;

        line-height: 27px;

        border-radius: 6px;

        text-align: center;

        display: inline-block;

        background: var(--white);

        text-shadow: var(--primary-tshadow);

        box-shadow: var(--primary-bshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .profile-card ul .edit {

        color: var(--green)

    }

    .profile-card ul .edit:hover {

        color: var(--white);

        background: var(--green)

    }

    .profile-card ul .trash {

        color: var(--red)

    }

    .profile-card ul .trash:hover {

        color: var(--white);

        background: var(--red)

    }

    .profile-card.active {

        background: var(--green-chalk);

        border-color: var(--primary)

    }



    .checkaddress{

        position: relative;

    }

    .checkaddress label{

        display: block !important;

        /* position: relative; */

    }

    .checkaddress input[type="radio"]{

        position: absolute;

        top: 12px;

        opacity: 0;

    }

    .checkaddress input[type="radio"]:checked+label{

        background: #ba3e6052;

        

        border: 1px solid var(--border);

    }

    

    .checkaddress label{

         background: var(--chalk); 

         border: 1px solid var(--border);

    }



    .chkaddress {

        padding: 10px;

        border-radius: 8px;

        margin-bottom: 25px;

        /* background: var(--chalk);

        border: 1px solid var(--border); */

        position: relative;

        cursor: pointer

    }

    .chkaddress:hover ul {

        visibility: visible;

        opacity: 1

    }

    .chkaddress h5 {

        color: var(--text);

        margin-bottom: 0;

        text-transform: capitalize;

        font-size: 14px;

    }

    .chkaddress p {

        text-transform: capitalize;

        font-size: 12px;

    }

    .chkaddress p span{

    	font-weight: 500;

    }

    .chkaddress ul {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        position: absolute;

        top: 50%;

        right: 15px;

        opacity: 0;

        visibility: hidden;

        transform: translateY(-50%);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .chkaddress ul li {

        margin: 3px 0px

    }

    .chkaddress ul li button {

        width: 25px;

        height: 25px;

        font-size: 12px;

        line-height: 27px;

        border-radius: 6px;

        text-align: center;

        display: inline-block;

        background: var(--white);

        text-shadow: var(--primary-tshadow);

        box-shadow: var(--primary-bshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .chkaddress ul .edit {

        color: var(--green)

    }

    .chkaddress ul .edit:hover {

        color: var(--white);

        background: var(--green)

    }

    .chkaddress ul .trash {

        color: var(--red)

    }

    .chkaddress ul .trash:hover {

        color: var(--white);

        background: var(--red)

    }

    .chkaddress.active {

        background: var(--green-chalk);

        border-color: var(--primary)

    }



    .payment-card {

        padding: 25px;

        border-radius: 6px;

        margin-bottom: 25px;

        background: var(--chalk);

        border: 1px solid var(--border);

        position: relative;

        cursor: pointer

    }

    .payment-card:hover button {

        visibility: visible;

        opacity: 1

    }

    .payment-card img {

        margin-bottom: 18px

    }

    .payment-card h4 {

        font-size: 12px;

        line-height: 20px;

        margin-bottom: 5px;

        text-transform: capitalize

    }

    .payment-card p {

        color: var(--heading);

        margin-bottom: 5px

    }

    .payment-card p span {

        font-size: 20px;

        margin-right: 15px;

        letter-spacing: 2px

    }

    .payment-card p sup {

        font-size: 13px;

        font-weight: 500;

        letter-spacing: 2px

    }

    .payment-card h5 {

        font-size: 14px;

        line-height: 22px;

        text-transform: capitalize

    }

    .payment-card button {

        position: absolute;

        top: 15px;

        right: 15px;

        opacity: 0;

        visibility: hidden;

        width: 30px;

        height: 32px;

        line-height: 32px;

        border-radius: 6px;

        text-align: center;

        display: inline-block;

        background: var(--white);

        text-shadow: var(--primary-tshadow);

        box-shadow: var(--primary-bshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .payment-card .trash {

        color: var(--red)

    }

    .payment-card .trash:hover {

        color: var(--white);

        background: var(--red)

    }

    .payment-card.active {

        background: var(--green-chalk);

        border-color: var(--primary)

    }

    @media (max-width: 575px) {

        .payment-card p span {

            margin-right: 8px

        }

    }

    .contact-card {

        text-align: center;

        border-radius: 8px;

        margin: 0px 2.5px 30px;

        padding: 60px 15px 55px;

        background: var(--white);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .contact-card:hover {

        background: var(--primary)

    }

    .contact-card:hover i {

        color: var(--primary);

        background: var(--white)

    }

    .contact-card:hover h4,

    .contact-card:hover p,

    .contact-card:hover a {

        color: var(--white)

    }

    .contact-card i {

        width: 50px;

        height: 50px;

        font-size: 22px;

        line-height: 50px;

        border-radius: 50%;

        margin-bottom: 15px;

        text-align: center;

        display: inline-block;

        color: var(--white);

        background: var(--primary);

        text-shadow: var(--primary-tshadow);

        box-shadow: var(--primary-bshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .contact-card h4 {

        margin-bottom: 18px;

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .contact-card p {

        width: 250px;

        font-size: 18px;

        line-height: 30px;

        margin: 0 auto;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .contact-card p a {

        font-size: 18px;

        line-height: 30px;

        display: block;

        color: var(--text);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .contact-card.active {

        background: var(--primary)

    }

    .contact-card.active i {

        color: var(--primary);

        background: var(--white)

    }

    .contact-card.active h4,

    .contact-card.active p,

    .contact-card.active a {

        color: var(--white)

    }

    .branch-card {

        margin: 0px 2.5px 30px;

        position: relative

    }

    .branch-card:hover::before {

        background: rgba(17, 151, 68, 0.85)

    }

    .branch-card:hover .branch-overlay {

        top: 50%

    }

    .branch-card:hover .branch-overlay p {

        opacity: 1

    }

    .branch-card::before {

        position: absolute;

        content: "";

        top: 0px;

        left: 0px;

        width: 100%;

        height: 100%;

        border-radius: 8px;

        background: rgba(0, 0, 0, 0.45);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .branch-card img {

        width: 100%;

        border-radius: 8px

    }

    .branch-overlay {

        position: absolute;

        top: 60%;

        left: 0px;

        width: 100%;

        padding: 0px 15px;

        text-align: center;

        transform: translateY(-50%);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .branch-overlay h3 {

        color: var(--white);

        letter-spacing: 0.3px;

        margin-bottom: 8px;

        text-transform: capitalize;

        text-shadow: var(--primary-tshadow)

    }

    .branch-overlay p {

        width: 200px;

        margin: 0 auto;

        letter-spacing: 0.3px;

        color: var(--white);

        opacity: 0;

        text-transform: capitalize;

        text-shadow: var(--primary-tshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .team-media {

        overflow: hidden;

        position: relative;

        border-radius: 8px

    }

    .team-media:hover img {

        transform: scale(1.05)

    }

    .team-media:hover .team-overlay {

        top: 0px;

        opacity: 1

    }

    .team-media:hover .team-overlay a {

        padding-top: 0px

    }

    .team-media img {

        width: 100%;

        border-radius: 8px;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .team-overlay {

        position: absolute;

        top: 0px;

        left: 0px;

        width: 100%;

        height: 100%;

        border-radius: 8px;

        opacity: 0;

        background: rgba(0, 0, 0, 0.3);

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .team-overlay a {

        width: 36px;

        height: 36px;

        font-size: 15px;

        line-height: 36px;

        margin: 0px 5px;

        padding-top: 30px;

        text-align: center;

        border-radius: 50%;

        color: var(--text);

        background: var(--white);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .team-meta {

        text-align: center

    }

    .team-meta h5 {

        text-transform: capitalize

    }

    .team-meta h5 a {

        color: var(--heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .team-meta h5 a:hover {

        color: var(--primary)

    }

    .team-meta p {

        font-size: 15px;

        text-transform: capitalize

    }

    @media (max-width: 575px) {

        .team-card {

            width: 290px;

            margin: 0px auto 50px

        }

    }

    .header-top {

        padding: 8px 0px;

        background: #ba3e60;

    }

    .header-top-welcome p {

        font-size: 14px;

        color: var(--white);

        letter-spacing: 0.3px

    }

    .header-top-select {

        margin-top: 3px;

        display: flex;

        align-items: center;

        justify-content: center

    }

    .header-select {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        border-right: 1px solid var(--green)

    }

    .header-select:last-child {

        border: none

    }

    .header-select i {

        font-size: 16px;

        margin-right: 8px;

        color: var(--white)

    }

    .header-select .nice-select {

        line-height: 20px

    }

    .header-select .nice-select::after {

        border-right-color: var(--white);

        border-bottom-color: var(--white)

    }

    .header-select .nice-select .current {

        color: var(--white)

    }

    .header-top-list {

        display: flex;

        

        justify-content: flex-end;

       margin-left: 3rem;

    }

    .header-top-list li {

        margin-left: 35px

    }

    .header-top-list li a {

        font-size: 14px;

        color: var(--white);

        letter-spacing: 0.3px;

        white-space: nowrap;

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .header-top-list li a:hover {

        color: var(--green-chalk)

    }

    @media (max-width: 767px) {

        /* .header-top-welcome, */

        .header-top-list {

            display: none

        }

        .header-top-select {

            width: 270px;

            margin: 0px auto

        }

		.header-top-welcome{
			text-align: center;
    /* margin-bottom: 10px; */
    flex: 0 0 100%;   /* force full width column */
    max-width: 100%;

		}

    }

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

        .header-top-welcome {

            text-align: center;

            margin-bottom: 10px

        }

    }

    .header-part {

        background: var(--white);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .header-part.active {

        position: sticky;

        top: 0px;

        left: 0px;

        width: 100%;

        z-index: 3;

        background: var(--white);

        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .header-part.active .header-widget:hover i {

        background: var(--primary)

    }

    .header-part.active .header-widget sup {

        border-color: var(--white)

    }

    .header-part.active .header-form {

        background: var(--white);

        border-color: var(--primary)

    }

    .header-content {

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 20px 0px

        

    }

    .header-logo {

        margin-right: 50px

    }

    .header-logo img {

        /* width: 100px; */

        height: 100px

    }

    .header-widget-group {

        display: flex;

        align-items: center;

        justify-content: center

    }

    .header-widget-group .header-widget {

        margin-left: 20px

    }

    .header-widget-group .header-widget:first-child {

        margin-left: 0px

    }

    .header-widget {

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center

    }

    .header-widget:hover i {

        color: var(--white);

        background: var(--primary);

        text-shadow: var(--primary-tshadow)

    }

    .header-widget:hover span {

        color: var(--primary)

    }

    .header-widget img {

        width: 40px;

        height: 40px;

        border-radius: 50%

    }

    .header-widget i {

        width: 40px;

        height: 40px;

        font-size: 15px;

        line-height: 40px;

        text-align: center;

        display: inline-block;

        border-radius: 50%;

        color: var(--text);

        background: var(--chalk);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .header-widget span {

        font-size: 15px;

        font-weight: 400;

        margin-left: 8px;

        letter-spacing: 0.3px;

        white-space: nowrap;

        text-align: left;

        text-transform: capitalize;

        color: var(--heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .header-widget span small {

        font-size: 16px;

        font-weight: 600;

        line-height: 20px;

        font-family: sans-serif;

        display: block

    }

    .header-widget sup {

        position: absolute;

        top: -12px;

        left: 20px;

        width: 24px;

        height: 24px;

        font-size: 12px;

        line-height: 20px;

        border-radius: 50%;

        text-align: center;

        color: var(--white);

        background: var(--primary);

        border: 2px solid var(--white);

        text-shadow: var(--primary-tshadow)

    }

    .header-cart span {

        font-size: 12px;

        margin-left: 15px;

        line-height: 20px;

        text-transform: uppercase

    }

    .header-form {

        width: 100%;

        margin: 0px 50px;

        border-radius: 8px;

        background: var(--chalk);

        border: 2px solid var(--chalk);

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .header-form:focus-within {

        background: var(--white);

        border-color: var(--primary)

    }

    .header-form input {

        width: 100%;

        height: 45px;

        font-size: 15px;

        padding-left: 15px

    }

    .header-form button i {

        width: 45px;

        height: 45px;

        font-size: 15px;

        line-height: 45px;

        text-align: center;

        border-radius: 8px;

        color: var(--text);

        display: inline-block;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .header-form button i:hover {

        color: var(--primary)

    }

    .header-media-group {

        display: none;

        align-items: center;

        justify-content: space-between

    }

    .header-media-group a img {

        width: auto;

        height: 45px

    }

    .header-user img,

    .header-src img {

        width: 40px;

        height: 40px;

        border-radius: 50%

    }

    .header-user i,

    .header-src i {

        width: 40px;

        height: 40px;

        font-size: 15px;

        line-height: 40px;

        text-align: center;

        display: inline-block;

        border-radius: 50%;

        color: var(--text);

        background: var(--chalk);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .header-user i:hover,

    .header-src i:hover {

        color: var(--white);

        background: var(--primary)

    }

    @media (max-width: 991px) {

        .header-content {

            padding: 10px 0px;

            flex-direction: column

        }

        .header-media-group {

            width: 100%;

            display: flex

        }

        .header-widget-group,

        .header-widget,

        .header-logo {

            display: none

        }

        .header-form {

            display: none;

            margin: 10px 0px 0px

        }

        .header-form.active {

            display: flex

        }

    }

    @media (min-width: 992px) and (max-width: 1199px) {

        .header-widget span {

            display: none

        }

    }

    .navbar-part {

        background: var(--white)

    }

    .navbar-content {

        

        display: flex;

        align-items: center;

        justify-content: space-between

    }

    .navbar-list {

        display: flex;

        align-items: center;

        justify-content: flex-start

    }

    .navbar-item {

        margin-right: 30px

    }

    .navbar-item:last-child {

        margin-right: 0px

    }

    .navbar-link {

        padding: 12px 0px;

        font-weight: 500;

        color: var(--text);

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .navbar-link:hover {

        color: var(--primary)

    }

    .navbar-focus-list {

        display: flex;

        align-items: center;

        justify-content: flex-end

    }

    .navbar-focus-list li {

        margin-left: 30px

    }

    .navbar-focus-list li:first-child {

        margin-left: 0px

    }

    .navbar-focus-list li a {

        font-weight: 500;

        color: var(--text);

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .navbar-focus-list li a:hover {

        color: var(--primary)

    }

    .navbar-focus-list li a i {

        font-size: 18px;

        margin-right: 5px

    }

    .navbar-info-group {

        display: flex;

        align-items: center;

        justify-content: center

    }

    .navbar-info {

        margin-right: 30px;

        display: flex;

        align-items: center;

        justify-content: flex-start

    }

    .navbar-info:last-child {

        margin-right: 0px

    }

    .navbar-info i {

        font-size: 30px;

        margin-right: 15px;

        color: var(--primary)

    }

    .navbar-info p small {

        font-size: 14px;

        line-height: 16px;

        display: block;

        text-align: left;

        text-transform: capitalize

    }

    .navbar-info p span {

        font-size: 15px;

        font-weight: 500

    }

    @media (max-width: 991px) {

        .navbar-part {

            display: none

        }

    }

    @media (min-width: 992px) and (max-width: 1199px) {

        .navbar-list li {

            margin-right: 18px

        }

        .navbar-link {

            font-size: 15px

        }

        .navbar-info {

            margin-right: 15px

        }

        .navbar-info p span {

            font-size: 14px

        }

        .navbar-info i {

            margin-right: 10px

        }

    }

    .nav-sidebar {

        position: fixed;

        top: 0px;

        left: -320px;

        width: 280px;

        height: 100vh;

        padding: 0px;

        z-index: 5;

        background: var(--white);

        box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .nav-sidebar.active {

        left: 0px

    }

    .nav-header {

        padding: 15px 0px;

        position: relative;

        text-align: center;

        border-bottom: 1px solid var(--border)

    }

    .nav-header a img {

        width: auto;

        height: 40px

    }

    .nav-close {

        position: absolute;

        top: 50%;

        right: -18px;

        transform: translateY(-50%)

    }

    .nav-close i {

        width: 35px;

        height: 35px;

        font-size: 18px;

        line-height: 35px;

        border-radius: 50%;

        text-align: center;

        display: inline-block;

        color: var(--text);

        background: var(--white);

        text-shadow: var(--primary-tshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .nav-close i:hover {

        color: var(--white);

        background: var(--primary)

    }

    .nav-content {

        padding: 0px 18px;

        overflow-y: scroll;

        max-height: calc(100vh - 100px)

    }

    .nav-btn {

        width: 100%;

        padding: 50px 0px;

        margin-bottom: 20px;

        text-align: center;

        background: var(--chalk)

    }

    .nav-btn .btn {

        font-size: 14px;

        padding: 12px 28px;

        letter-spacing: 0.3px

    }

    .nav-btn .btn i {

        font-size: 14px

    }

    .nav-profile {

        width: 100%;

        text-align: center;

        padding: 18px 0px 0px

    }

    .nav-user {

        margin-bottom: 10px;

        border-radius: 50%;

        border: 2px solid var(--primary)

    }

    .nav-user img {

        width: 85px;

        height: 85px;

        border-radius: 50%;

        border: 2px solid var(--white)

    }

    .nav-name {

        margin-bottom: 18px;

        text-transform: capitalize

    }

    .nav-name a {

        color: var(--heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .nav-name a:hover {

        color: var(--primary)

    }

    .nav-select-group {

        display: flex;

        align-items: center;

        justify-content: center;

        padding-bottom: 18px;

        border-bottom: 1px solid var(--border)

    }

    .nav-select {

        display: flex;

        align-items: center;

        justify-content: center;

        margin-right: 18px;

        padding-right: 18px;

        line-height: 20px;

        border-right: 1px solid var(--gray-chalk)

    }

    .nav-select:last-child {

        padding: 0px;

        margin: 0px;

        border: none

    }

    .nav-select i {

        margin-right: 5px

    }

    .nav-list {

        width: 100%

    }

    .nav-list li {

        width: 100%

    }

    .nav-link {

        width: 100%;

        font-weight: 500;

        padding: 12px 15px;

        border-radius: 8px;

        color: var(--text);

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .nav-link:hover {

        color: var(--primary);

        background: var(--chalk)

    }

    .nav-link::before {

        right: 15px

    }

    .nav-link i {

        font-size: 20px;

        margin-right: 12px

    }

    .nav-link.active {

        color: var(--primary);

        background: var(--green-chalk)

    }

    .nav-info-group {

        padding: 20px 0px;

        margin-top: 15px;

        margin-bottom: 25px;

        border-top: 1px solid var(--border);

        border-bottom: 1px solid var(--border)

    }

    .nav-info {

        margin-bottom: 20px;

        display: flex;

        align-items: center;

        justify-content: flex-start

    }

    .nav-info:last-child {

        margin-bottom: 0px

    }

    .nav-info i {

        font-size: 30px;

        margin-right: 15px;

        color: #bb4263;

    }

    .nav-info p small {

        font-size: 14px;

        line-height: 18px;

        display: block;

        text-align: left;

        text-transform: capitalize

    }

    .nav-info p span {

        font-size: 16px;

        font-weight: 500

    }

    .nav-footer {

        text-align: center

    }

    .nav-footer p {

        font-size: 14px;

        color: var(--gray)

    }

    .nav-footer p a {

        color: var(--primary)

    }

    .cart-sidebar {

        position: fixed;

        top: 0px;

        right: -450px;

        width: 400px;

        height: 100vh;

        z-index: 5;

        background: var(--white);

        box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .cart-sidebar.active {

        right: 0px

    }

    .cart-header {

        padding: 18px 25px;

        text-align: center;

        position: relative;

        border-bottom: 1px solid var(--border)

    }

    .cart-total {

        display: flex;

        align-items: center;

        justify-content: center

    }

    .cart-total i {

        font-size: 20px;

        margin-right: 8px;

        color: var(--primary)

    }

    .cart-total span {

        font-weight: 500;

        color: var(--primary);

        text-transform: capitalize

    }

    .cart-close {

        position: absolute;

        top: 50%;

        left: -18px;

        transform: translateY(-50%)

    }

    .cart-close i {

        width: 35px;

        height: 35px;

        font-size: 18px;

        line-height: 35px;

        border-radius: 50%;

        text-align: center;

        display: inline-block;

        color: var(--text);

        background: var(--white);

        text-shadow: var(--primary-tshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .cart-close i:hover {

        color: var(--white);

        background: var(--primary)

    }

    .cart-list {

        height: 100%;

        padding: 0px 15px;

        max-height: calc(100vh - 210px);

        overflow-y: scroll

    }

    .cart-item {

        padding: 15px 0px;

        display: flex;

        align-items: center;

        justify-content: center;

        align-items: flex-start;

        border-bottom: 1px solid var(--border)

    }

    .cart-item:hover .cart-media button {

        transform: scale(1)

    }

    .cart-item:last-child {

        border-bottom: none

    }

    .cart-media {

        position: relative;

        margin-right: 25px

    }

    .cart-media a img {

        width: 100px;

        border-radius: 8px

    }

    .cart-media button {

        position: absolute;

        top: 0px;

        left: 0px;

        width: 100%;

        height: 100%;

        border-radius: 8px;

        background: rgba(0, 0, 0, 0.2);

        transform: scale(0);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .cart-media button i {

        width: 32px;

        height: 32px;

        font-size: 18px;

        line-height: 32px;

        text-align: center;

        border-radius: 5px;

        display: inline-block;

        color: var(--red);

        background: rgba(255, 255, 255, 0.9);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .cart-media button i:hover {

        color: var(--white);

        background: var(--red)

    }

    .cart-info-group {

        width: 100%

    }

    .cart-info {

        margin-bottom: 13px

    }

    .cart-info h6 {

        font-weight: 400;

        text-transform: capitalize

    }

    .cart-info h6 a {

        color: var(--heading)

    }

    .cart-info p {

        font-size: 14px

    }

    .cart-action-group {

        display: flex;

        align-items: center;

        justify-content: center;

        justify-content: space-between

    }

    .cart-action-group .product-action {

        display: flex

    }

    .cart-action-group .product-action button i {

        width: 30px;

        height: 30px;

        font-size: 12px;

        line-height: 30px;

        border-radius: 5px

    }

    .cart-action-group .product-action input {

        width: 45px;

        height: 30px;

        font-size: 14px;

        border-radius: 5px;

        color: var(--primary);

        background: var(--chalk)

    }

    .cart-action-group h6 {

        font-weight: 500;

        color: var(--primary)

    }

    .cart-footer {

        padding: 20px 15px 0px;

        text-align: center;

        box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08)

    }

    .coupon-btn {

        font-weight: 500;

        margin-bottom: 20px;

        color: var(--primary);

        text-shadow: var(--primary-tshadow)

    }

    .coupon-btn:hover {

        text-decoration: underline

    }

    .coupon-form {

        padding: 3px;

        border-radius: 8px;

        margin-bottom: 18px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 1px solid var(--border);

        box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s;

        /* display: block */

        /* display: none */

    }

    .coupon-form:focus-within {

        border-color: var(--primary)

    }

    .coupon-form input {

        width: 100%;

        height: 38px;

        padding: 0px 15px

    }

    .coupon-form button span {

        width: 100px;

        height: 38px;

        font-size: 14px;

        line-height: 38px;

        border-radius: 8px;

        display: block;

        text-align: center;

        text-transform: uppercase;

        color: var(--white);

        background: var(--primary)

    }

    .cart-checkout-btn {

        padding: 10px 0px;

        border-radius: 8px;

        background: var(--primary);

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .cart-checkout-btn:hover {

        background: var(--heading)

    }

    .checkout-label {

        width: 100%;

        height: 30px;

        font-size: 15px;

        line-height: 30px;

        letter-spacing: 0.3px;

        text-align: center;

        text-transform: capitalize;

        color: var(--white)

    }

    .checkout-price {

        padding: 0px 25px;

        letter-spacing: 0.3px;

        color: var(--white);

        border-left: 1px solid var(--border)

    }

    @media (max-width: 450px) {

        .cart-sidebar {

            right: 0px;

            width: 100%;

            height: 100vh;

            transform: scale(0);

            margin: 80px 0px 0px;

            border-radius: 15px 15px 0px 0px;

            transition: all linear .3s;

            -webkit-transition: all linear .3s;

            -moz-transition: all linear .3s;

            -ms-transition: all linear .3s;

            -o-transition: all linear .3s

        }

        .cart-sidebar.active {

            transform: scale(1);

            transform-origin: top

        }

        .cart-close {

            left: 50%;

            top: -45px;

            bottom: inherit;

            transform: translateX(-50%);

            border-radius: 50px 50px 0px 0px;

            box-shadow: 0px -8px 10px 0px rgba(0, 0, 0, 0.15)

        }

        .cart-list {

            max-height: calc(100vh - 290px)

        }

        .cart-media a img {

            width: 80px

        }

    }

    .category-sidebar {

        position: fixed;

        top: 0px;

        left: -320px;

        width: 280px;

        height: 100vh;

        z-index: 5;

        background: var(--white);

        box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .category-sidebar.active {

        left: 0px

    }

    .category-header {

        padding: 15px 18px;

        position: relative;

        border-bottom: 1px solid var(--border);

        display: flex;

        align-items: center;

        justify-content: flex-start

    }

    .category-title {

        color: var(--primary);

        text-transform: capitalize;

        display: flex;

        align-items: center;

        justify-content: flex-start

    }

    .category-title i {

        margin-right: 8px

    }

    .category-close {

        position: absolute;

        top: 50%;

        right: -18px;

        transform: translateY(-50%)

    }

    .category-close i {

        width: 35px;

        height: 35px;

        font-size: 18px;

        line-height: 35px;

        border-radius: 50%;

        text-align: center;

        display: inline-block;

        color: var(--text);

        background: var(--white);

        text-shadow: var(--primary-tshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .category-close i:hover {

        color: var(--white);

        background: var(--primary)

    }

    .category-list {

        width: 100%;

        padding: 0px 15px;

        overflow-y: scroll;

        height: calc(100vh - 130px)

    }

    .category-item {

        width: 100%;

        border-bottom: 1px solid var(--border)

    }

    .category-link {

        font-size: 16px;

        font-weight: 400;

        padding: 12px 15px;

        color: var(--text);

        text-transform: capitalize;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .category-link i {

        font-size: 25px;

        margin-right: 15px;

        display: inline-block

    }

    .category-footer {

        text-align: center;

        margin-top: 20px

    }

    .category-footer p {

        font-size: 14px;

        color: var(--gray)

    }

    .category-footer p a {

        color: var(--primary)

    }

    .mobile-menu {

        position: fixed;

        bottom: 0px;

        left: 0px;

        width: 100%;

        z-index: 3;

        background: var(--white);

        border-radius: 10px 10px 0px 0px;

        box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1);

        display: flex;

        align-items: center;

        justify-content: center;

        justify-content: space-between;

        display: none

    }

    .mobile-menu a,

    .mobile-menu button {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        width: 80px;

        padding: 13px 0px;

        border-radius: 8px;

        position: relative

    }

    .mobile-menu a:hover,

    .mobile-menu button:hover {

        background: var(--chalk)

    }

    .mobile-menu a:hover i,

    .mobile-menu button:hover i {

        color: var(--primary)

    }

    .mobile-menu a:hover span,

    .mobile-menu button:hover span {

        color: var(--primary)

    }

    .mobile-menu a i,

    .mobile-menu button i {

        font-size: 15px;

        margin-bottom: 5px;

        color: var(--text);

        text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1)

    }

    .mobile-menu a span,

    .mobile-menu button span {

        font-size: 10px;

        line-height: 12px;

        color: var(--text);

        text-transform: uppercase

    }

    .mobile-menu a sup,

    .mobile-menu button sup {

        position: absolute;

        top: -5px;

        left: 75%;

        width: 24px;

        height: 24px;

        font-size: 12px;

        line-height: 20px;

        border-radius: 50%;

        text-align: center;

        transform: translateX(-50%);

        color: var(--white);

        background: var(--primary);

        border: 2px solid var(--green-chalk);

        text-shadow: var(--primary-tshadow)

    }

    .mobile-menu a .fas fa-shopping-basket,

    .mobile-menu button .fas fa-shopping-basket {

        font-size: 18px

    }

    @media (max-width: 991px) {

        .mobile-menu {

            display: flex

        }

    }

    .product-view {

        max-width: 1000px;

        border-radius: 8px;

        background: var(--white)

    }

    .view-gallery {

        margin: 30px;

        position: relative

    }

    .view-label-group {

        position: absolute;

        top: 0px;

        left: 0px;

        z-index: 1;

        display: flex;

        flex-direction: column

    }

    .view-label {

        font-size: 15px;

        padding: 6px 10px;

        margin-bottom: 6px;

        line-height: 13px;

        border-radius: 3px;

        text-align: center;

        text-transform: capitalize;

        color: var(--white)

    }

    .view-label:last-child {

        margin-bottom: 0px

    }

    .view-label.off {

        background: var(--red)

    }

    .view-label.new {

        background: var(--green)

    }

    .view-label.sale {

        background: var(--orange)

    }

    .view-label.feat {

        background: var(--purple)

    }

    .view-label.rate {

        background: var(--yellow)

    }

    .view-details {

        margin: 30px

    }

    .view-name {

        font-size: 26px;

        line-height: 34px;

        margin-bottom: 5px;

        text-transform: capitalize

    }

    .view-name a {

        color: var(--heading)

    }

    .view-name a:hover {

        color: var(--primary)

    }

    .view-meta {

        margin-bottom: 12px;

        display: flex;

        align-items: center;

        justify-content: flex-start

    }

    .view-meta p {

        font-size: 13px;

        margin-right: 20px;

        text-transform: uppercase;

        color: var(--placeholder)

    }

    .view-meta span,

    .view-meta a {

        margin-left: 5px;

        color: var(--placeholder)

    }

    .view-meta a:hover {

        text-decoration: underline;

        color: var(--primary)

    }

    .view-rating {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        margin-bottom: 15px

    }

    .view-rating i,

    .view-rating a {

        font-size: 15px;

        margin-right: 3px;

        color: var(--gray)

    }

    .view-rating a {

        margin-left: 8px;

        white-space: nowrap;

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .view-rating a:hover {

        color: var(--primary);

        text-decoration: underline

    }

    .view-rating .active {

        color: var(--yellow)

    }

    .view-price {

        margin-bottom: 20px

    }

    .view-price del {

        color: var(--red);

        margin-right: 25px

    }

    .view-price span {

        color: var(--primary)

    }

    .view-price span small {

        font-size: 14px;

        font-weight: 400;

        text-transform: capitalize

    }

    .view-desc {

        margin-bottom: 25px

    }

    .view-list-group {

        display: flex;

        align-items: center;

        justify-content: center;

        justify-content: flex-start;

        margin-bottom: 25px

    }

    .view-list-group:last-child {

        margin-bottom: 0px

    }

    .view-list-title {

        font-weight: 500;

        margin-right: 15px;

        color: var(--heading);

        text-transform: capitalize

    }

    .view-tag-list {

        display: flex;

        align-items: center;

        justify-content: center

    }

    .view-tag-list li {

        margin-right: 8px

    }

    .view-tag-list li a {

        font-size: 14px;

        line-height: 12px;

        padding: 8px 10px;

        border-radius: 5px;

        letter-spacing: 0.3px;

        text-transform: capitalize;

        color: var(--text);

        background: var(--chalk);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .view-tag-list li a:hover {

        color: var(--white);

        background: var(--primary)

    }

    .view-share-list {

        display: flex;

        align-items: center;

        justify-content: center

    }

    .view-share-list li {

        margin-right: 8px

    }

    .view-share-list li a {

        width: 35px;

        height: 35px;

        font-size: 16px;

        line-height: 35px;

        border-radius: 50%;

        text-align: center;

        color: var(--text);

        background: var(--chalk);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .view-share-list li a:hover {

        color: var(--white);

        background: var(--primary)

    }

    .view-add-group {

        margin: 45px 0px 15px

    }

    .view-add-group .product-add,

    .view-add-group .action-input {

        height: 46px;

        line-height: 46px;

        letter-spacing: 0.3px;

        text-transform: uppercase;

        color: var(--white);

        background: var(--primary)

    }

    .view-action-group {

        display: grid;

        grid-gap: 15px;

        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

        position: relative

    }

    .view-action-group a {

        padding: 10px 0px;

        border-radius: 8px;

        color: var(--text);

        background: var(--border);

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .view-action-group a i {

        font-size: 16px;

        margin-right: 8px

    }

    .view-action-group a span {

        font-size: 14px;

        font-weight: 500;

        letter-spacing: 0.5px;

        text-transform: uppercase

    }

    .view-wish:hover {

        color: var(--white);

        background: var(--primary)

    }

    .preview-slider {

        margin-bottom: 20px

    }

    .preview-slider li img {

        width: 100%;

        border-radius: 8px

    }

    .thumb-slider li {

        margin: 0px 10px;

        cursor: pointer

    }

    .thumb-slider li img {

        width: 100%;

        border-radius: 8px;

        border: 1px solid var(--border)

    }

    .thumb-slider .slick-center img {

        border: 1px solid var(--primary)

    }

    @media (max-width: 500px) {

        .view-gallery,

        .view-details {

            margin: 25px

        }

        .view-list-group {

            align-items: flex-start;

            flex-direction: column

        }

        .view-list-title {

            margin: 0px 0px 10px

        }

    }

    @media (max-width: 767px) {

        .product-view {

            max-width: 480px

        }

    }

    .countdown-part {

        padding: 80px 0px;

        background: linear-gradient(to left, #c3ffda, #a1f3c0)

    }

    .countdown-content {

        text-align: center

    }

    .countdown-content h3 {

        font-size: 40px;

        font-weight: 700;

        line-height: 48px;

        text-transform: uppercase;

        margin-bottom: 12px

    }

    .countdown-content p {

        margin-bottom: 38px

    }

    .countdown-clock {

        margin-bottom: 45px

    }

    .countdown-img {

        position: relative

    }

    .countdown-img img {

        width: 100%

    }

    .countdown-off {

        width: 120px;

        height: 120px;

        border-radius: 50%;

        padding: 35px 30px 30px;

        background: var(--red);

        position: absolute;

        top: 0px;

        left: 0px

    }

    .countdown-off span {

        display: block;

        text-transform: uppercase;

        font-size: 30px;

        font-weight: 500;

        letter-spacing: 0.5px;

        color: var(--white)

    }

    @media (max-width: 767px) {

        .countdown-part {

            padding: 60px 0px

        }

        .countdown-img {

            margin-top: 30px

        }

    }

    .news-part {

        padding: 70px 0px;

        background: url(../../images/newsletter.jpg);

        background-repeat: no-repeat;

        background-position: center;

        background-size: cover;

        position: relative;

        z-index: 1

    }

    .news-part::before {

        position: absolute;

        content: "";

        top: 0px;

        left: 0px;

        width: 100%;

        height: 100%;

        background: linear-gradient(to right, rgba(6, 23, 56, 0.8), rgba(17, 151, 68, 0.8));

        z-index: -1

    }

    .news-text h2 {

        font-size: 35px;

        color: var(--white);

        margin-bottom: 5px

    }

    .news-text p {

        font-size: 18px;

        font-weight: 300;

        color: var(--white)

    }

    .news-form {

        width: 100%;

        padding: 6px;

        border-radius: 8px;

        background: var(--white);

        display: flex;

        align-items: center;

        justify-content: center

    }

    .news-form input {

        width: 100%;

        height: 50px;

        padding: 0px 20px;

        line-height: 50px

    }

    .news-form button span {

        width: 180px;

        font-size: 14px;

        font-weight: 500;

        padding: 12px 0px;

        border-radius: 8px;

        text-align: center;

        display: inline-block;

        text-transform: uppercase;

        color: var(--white);

        background: var(--primary)

    }

    .news-form button span i {

        margin-right: 5px

    }

    @media (max-width: 575px) {

        .news-form {

            flex-direction: column

        }

    }

    @media (max-width: 767px) {

        .news-text {

            margin-bottom: 30px

        }

    }

    @media (max-width: 991px) {

        .news-part {

            padding: 50px 30px 60px

        }

        .news-part .container-fluid {

            padding: 0px

        }

    }

    .intro-part {

        padding: 80px 0px;

        background: var(--intro-bg)

    }

    .intro-wrap {

        display: flex;

        align-items: flex-start;

        justify-content: flex-start

    }

    .intro-wrap:hover .intro-icon i {

        color: var(--white);

        background: var(--primary)

    }

    .intro-icon {

        margin-right: 20px

    }

    .intro-icon i {

        width: 50px;

        height: 50px;

        font-size: 18px;

        line-height: 43px;

        border-radius: 50%;

        text-align: center;

        display: inline-block;

        color: var(--primary);

        background: var(--white);

        border: 3px double var(--primary);

        box-shadow: var(--primary-bshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .intro-content h5 {

        font-size: 17px;

        margin-bottom: 8px;

        text-transform: capitalize

    }

    .intro-content p {

        font-size: 15px;

        line-height: 22px

    }

    @media (max-width: 767px) {

        .intro-part {

            padding: 60px 0px 30px

        }

        .intro-wrap {

            margin-bottom: 30px

        }

        .footer-logo img {

            /* width: 100px !important; */

            text-align: center;

            margin: 0 !important;

            display: block;

        }

    }

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

        .intro-part {

            padding: 80px 0px 50px

        }

        .intro-wrap {

            margin-bottom: 30px

        }



        

    }

    .footer-part {

        padding-top: 95px

    }

    .footer-widget {

        display: grid;

        grid-template-columns: 100%

    }

    .footer-logo {

        margin-bottom: 25px

    }

    .footer-logo img {

        width: 120px;

        text-align: center;

        margin: 0 auto 0px 0px;

        display: block;

    }

    .footer-desc {

        margin-bottom: 30px

    }

    .footer-social li {

        display: inline-block;

        margin-right: 7px;
        margin-top: 15px;

    }

    .footer-social li:last-child {

        margin-right: 0px

    }

    .footer-social li a {

        width: 40px;

        height: 40px;

        font-size: 16px;

        line-height: 40px;

        border-radius: 50%;

        text-align: center;

        color: var(--primary);

        background: var(--white);

        text-shadow: var(--primary-tshadow);

        box-shadow: var(--primary-bshadow);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .footer-social li a:hover {

        color: var(--white);

        background: var(--primary)

    }

    .footer-title {

        margin-bottom: 25px;

        letter-spacing: -0.3px;

        text-transform: capitalize

    }

    .footer-widget.contact {

        /* margin-left: 30px */

    }

    .footer-contact li {

        display: flex;

        align-items: center;

        margin-bottom: 18px

    }

    .footer-contact li:last-child {

        margin-bottom: 0px

    }

    .footer-contact li i {

        font-size: 30px;

        margin-right: 15px;

        color: var(--primary)

    }

    .footer-contact li p span {

        display: block;

        

    }

    .footer-contact li p {

        

        font-size: 14px;

    }

    .footer-links ul li {

        margin-bottom: 15px

    }

    .footer-links ul li:last-child {

        margin-bottom: 0px

    }

    .footer-links ul li a {

        color: var(--text);

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .footer-links ul li a:hover {

        color: var(--primary);

        text-decoration: underline

    }

    .footer-app {

        display: grid;

        grid-gap: 10px;

        grid-template-columns: 1fr 1fr

    }

    .footer-app a img {

        width: 100%

    }

    .footer-bottom {

        margin-top: 75px;

        padding: 30px 50px;

        border-radius: 8px 8px 0px 0px;

        background: var(--primary);

        border-top: 1px solid var(--border);

        display: flex;

        align-items: center;

        justify-content: space-between

    }

    .footer-copytext {

        font-size: 15px;

        color: var(--white)

    }

    .footer-copytext a {

        color: var(--green-chalk)

    }

    .footer-copytext a:hover {

        text-decoration: underline

    }

    .footer-card a {

        margin-left: 10px

    }

    .footer-card a img {

        width: 50px;

        border-radius: 3px

    }

    @media (max-width: 768px) {

        .footer-part .container-fluid {

            padding: 0px 25px

        }

        .footer-widget.contact {

            margin-left: 0px

        }

    }

    @media (max-width: 1199px) {

        .footer-part {

            padding-top: 50px

        }

        .footer-widget {

            margin-bottom: 40px

        }

        .footer-bottom {

            margin-top: 10px

        }

    }

    @media (max-width: 767px) {

        .footer-bottom {

            padding: 25px 15px 75px;

            flex-direction: column;

            text-align: center

        }

        .footer-copytext {

            margin-bottom: 10px

        }

        .footer-card a {

            margin: 0px 3px

        }

    }

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

        .footer-bottom {

            padding: 25px 30px 75px

        }

    }

    .blog-widget {

        margin-bottom: 30px;

        margin-left: 5px;

        border-radius: 8px;

        padding: 18px 25px 25px;

        background: var(--white)

    }

    .blog-widget:last-child {

        margin-bottom: 0px

    }

    .blog-widget-title {

        padding-bottom: 16px;

        margin-bottom: 20px;

        position: relative;

        text-transform: capitalize;

        border-bottom: 1px solid var(--border)

    }

    .blog-widget-title::before {

        position: absolute;

        content: "";

        bottom: -2px;

        left: 0px;

        width: 50px;

        height: 2px;

        background: var(--primary)

    }

    .blog-widget-form {

        position: relative

    }

    .blog-widget-form input {

        width: 100%;

        height: 45px;

        padding: 0px 15px 0px 60px;

        border-radius: 8px;

        background: var(--chalk);

        border: 1px solid var(--border);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-widget-form input:focus-within {

        border-color: var(--primary)

    }

    .blog-widget-form button {

        position: absolute;

        top: 0px;

        left: 0px;

        width: 45px;

        height: 45px;

        line-height: 45px;

        text-align: center;

        color: var(--white);

        background: var(--primary);

        border-radius: 8px 0px 0px 8px

    }

    .blog-widget-feed li {

        display: flex;

        margin-bottom: 25px;

        padding-bottom: 25px;

        border-bottom: 1px solid var(--border)

    }

    .blog-widget-feed li:last-child {

        margin: 0px;

        padding: 0px;

        border: none

    }

    .blog-widget-media img {

        width: 100px;

        border-radius: 8px;

        margin-right: 20px;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-widget-text {

        font-size: 17px;

        line-height: 24px

    }

    .blog-widget-text a {

        color: var(--heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-widget-text a:hover {

        color: var(--primary)

    }

    .blog-widget-text span {

        display: block;

        margin-top: 8px;

        font-size: 13px;

        font-weight: 400;

        text-transform: uppercase

    }

    .blog-widget-category li {

        margin-bottom: 15px;

        padding-bottom: 15px;

        border-bottom: 1px solid var(--border)

    }

    .blog-widget-category li:last-child {

        margin: 0px;

        padding: 0px;

        border: none

    }

    .blog-widget-category li:hover a {

        color: var(--primary)

    }

    .blog-widget-category li:hover a span {

        background: var(--primary)

    }

    .blog-widget-category li a {

        width: 100%;

        font-size: 17px;

        color: var(--text);

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-widget-category li a span {

        font-size: 14px;

        float: right;

        width: 30px;

        height: 30px;

        line-height: 32px;

        text-align: center;

        border-radius: 50%;

        color: var(--white);

        background: var(--heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-widget-tag li {

        display: inline-block;

        margin: 0px 8px 12px 0px

    }

    .blog-widget-tag li a {

        font-size: 14px;

        padding: 5px 12px;

        border-radius: 3px;

        color: var(--text);

        background: var(--chalk);

        text-transform: capitalize;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-widget-tag li a:hover {

        color: var(--white);

        background: var(--primary)

    }

    .blog-widget-social li {

        display: inline-block;

        margin-right: 10px

    }

    .blog-widget-social li a {

        width: 45px;

        height: 45px;

        font-size: 18px;

        line-height: 45px;

        text-align: center;

        border-radius: 3px;

        color: var(--white);

        background: var(--heading);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .blog-widget-social li a:hover {

        background: var(--primary)

    }

    @media (max-width: 575px) {

        .blog-widget-social li {

            margin-right: 5px

        }

        .blog-widget-social li a {

            width: 40px;

            height: 40px;

            font-size: 16px;

            line-height: 40px

        }

    }

    @media (min-width: 992px) and (max-width: 1199px) {

        .blog-widget-media img {

            width: 95px

        }

        .blog-widget-social li {

            margin-right: 5px

        }

        .blog-widget-social li a {

            width: 40px;

            height: 40px;

            font-size: 16px;

            line-height: 40px

        }

    }

    @media (max-width: 991px) {

        .blog-widget {

            margin-left: 0px

        }

    }

    .shop-filter {

        padding: 20px 30px;

        border-radius: 8px;

        margin-bottom: 25px;

        background: var(--white);

        border: 1px solid var(--border);

        display: flex;

        align-items: center;

        justify-content: space-between

    }

    .shop-filter .nice-select {

        border-radius: 6px;

        background: var(--chalk);

        padding: 8px 35px 8px 20px;

        border: 1px solid var(--border)

    }

    .shop-filter .nice-select::after {

        right: 20px

    }

    .shop-filter .nice-select .current {

        font-size: 15px

    }

    .shop-filter .nice-select .list {

        top: 45px;

        align-items: flex-start;

        flex-direction: column

    }

    .shop-filter ul {

        display: flex;

        align-items: center;

        justify-content: center

    }

    .shop-filter ul li {

        margin: 0px 5px

    }

    .shop-filter ul li a {

        width: 40px;

        height: 40px;

        font-size: 16px;

        line-height: 40px;

        border-radius: 50%;

        text-align: center;

        color: var(--text);

        background: var(--chalk)

    }

    .shop-filter ul li .active {

        color: var(--white);

        background: var(--primary)

    }

    .shop-filter p {

        font-size: 15px;

        text-transform: capitalize

    }

    @media (max-width: 767px) {

        .shop-filter {

            flex-direction: column

        }

        .shop-filter .nice-select {

            margin-bottom: 15px

        }

        .shop-filter ul {

            margin-bottom: 15px

        }

    }

    .shop-widget-promo {

        margin-bottom: 25px;

        border-radius: 8px;

        text-align: center;

        overflow: hidden

    }

    .shop-widget-promo img {

        width: 100%;

        border-radius: 8px;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .shop-widget-promo img:hover {

        transform: scale(1.05)

    }

    .shop-widget {

        padding: 20px 20px;

        border-radius: 8px;

        margin-bottom: 25px;

        background: var(--white);

        border: 1px solid var(--border)

    }

    .shop-widget:last-child {

        margin-bottom: 0px

    }

    .shop-widget-title {

        padding-bottom: 12px;

        text-transform: uppercase;

        border-bottom: 1px solid var(--border)

    }

    .shop-widget-btn {

        width: 100%;

        font-size: 15px;

        padding: 8px 0px;

        border-radius: 8px;

        color: var(--heading);

        background: var(--border);

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .shop-widget-btn:hover {

        color: var(--white);

        background: var(--primary)

    }

    .shop-widget-btn i {

        margin-right: 8px;

        margin-top: -1px

    }

    .shop-widget-btn span {

        text-transform: capitalize

    }

    .shop-widget-group {

        display: grid;

        grid-gap: 10px;

        grid-template-columns: repeat(2, 1fr);

        grid-template-rows: auto;

        margin: 15px 0px

    }

    .shop-widget-group input {

        width: 100%;

        height: 45px;

        border-radius: 5px;

        background: var(--chalk);

        text-align: center

    }

    .shop-widget-list {

        margin: 18px 0px 20px

    }

    .shop-widget-list li {

        margin-bottom: 12px;

        color: var(--gray);

        display: block;

        align-items: center;

        justify-content: space-between;

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .shop-widget-list li:hover {

        color: var(--primary)

    }

    .shop-widget-list li:last-child {

        margin-bottom: 0px

    }

    .shop-widget-list li{

        border-bottom: 1px solid #e3e3e3;

        padding-bottom: 4px;

    

    }

    .shop-widget-list li .catmenu{

        color: #000;

        padding: 0 2px;

        font-size: 17px;

        display: block;

        width: 100%;

    }

    .shop-widget-list li .catmenu i{

        float: right;

    }

    .shop-widget-content {

        display: flex;

        align-items: center;

        justify-content: flex-start

    }

    .shop-widget-content input {

        width: 15px;

        height: 15px;

        margin-right: 12px;

        cursor: pointer

    }

    .shop-widget-content label {

        cursor: pointer;

        display: flex;

        align-items: center;

        justify-content: center;

        text-transform: capitalize

    }

    .shop-widget-content label i {

        font-size: 15px;

        margin-left: 8px;

        color: var(--gray)

    }

    .shop-widget-content label i:first-child {

        margin-left: 0px

    }

    .shop-widget-content label i.active {

        color: var(--yellow)

    }

    .shop-widget-number {

        font-size: 15px

    }

    .shop-widget-search {

        width: 100%;

        height: 40px;

        padding: 0px 15px;

        border-radius: 5px;

        background: var(--chalk);

        border: 1px solid var(--border);

        transition: all linear .3s;

        -webkit-transition: all linear .3s;

        -moz-transition: all linear .3s;

        -ms-transition: all linear .3s;

        -o-transition: all linear .3s

    }

    .shop-widget-search:focus-within {

        border-color: var(--primary)

    }

    /* .shop-widget-scroll {

        height: 279px;

        overflow-y: scroll;

        padding-right: 10px

    } */

    .single-banner {

        /* background: url(../../images/single-banner.jpg); */

        background-repeat: no-repeat;

        background-position: center;

        background-size: cover;

        padding: 100px 0px;

        text-align: center;

        position: relative;

        z-index: 1

    }

    .single-banner::before {

        /* position: absolute;

        content: "";

        top: 0px;

        left: 0px;

        width: 100%;

        height: 100%;

        background: linear-gradient(to left, rgba(6, 23, 56, 0.6), rgba(17, 151, 68, 0.6));

        z-index: -1 */

    }

    .single-banner h2 {

        font-size: 38px;

        margin-bottom: 15px;

        color: var(--white);

        text-transform: uppercase

    }

    .single-banner .pagetitle {

        font-size: 38px;

        margin-bottom: 15px;

        color: var(--white);

        text-transform: uppercase

    }

    @media (max-width: 767px) {

        .single-banner {

            padding: 60px 0px

        }

        .single-banner h2 {

            font-size: 32px;

            margin-bottom: 12px

        }

        .single-banner .pagetitle {

            font-size: 32px;

            margin-bottom: 12px

        }

    }

    .top-filter {

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin-bottom: 25px

    }

    .filter-short {

        width: 225px;

        display: flex;

        align-items: center;

        justify-content: center

    }

    .filter-show {

        width: 125px;

        display: flex;

        align-items: center;

        justify-content: center

    }

    .filter-label {

        font-size: 14px;

        font-weight: 500;

        margin-right: 8px;

        white-space: nowrap;

        text-transform: uppercase

    }

    .filter-select {

        height: 40px;

        background-color: transparent

    }

    .filter-select:focus-within {

        border-color: #ced4da

    }

    .filter-action {

        display: flex;

        align-items: center;

        justify-content: flex-end

    }

    .filter-action a i {

        width: 40px;

        height: 40px;

        font-size: 16px;

        line-height: 40px;

        border-radius: 50%;

        text-align: center;

        color: var(--text);

        background: transparent

    }

    .filter-action a i:hover {

        color: var(--primary)

    }

    .filter-action .active i {

        color: var(--white);

        background: var(--primary)

    }

    .filter-action .active i:hover {

        color: var(--white)

    }

    @media (max-width: 575px) {

        .filter-label,

        .filter-action {

            display: none

        }

        .filter-show {

            width: 80px

        }

        .filter-short {

            width: 130px

        }

    }

    .bottom-paginate {

        padding-top: 25px;

        border-top: 1px solid var(--border);

        display: flex;

        align-items: center;

        justify-content: space-between

    }

    .page-info {

        font-weight: 400;

        color: var(--text)

    }

    @media (max-width: 575px) {

        .bottom-paginate {

            margin-bottom: 30px;

            flex-direction: column

        }

        .page-info {

            margin-bottom: 15px

        }

    }

    @media (min-width: 576px) and (max-width: 991px) {

        .bottom-paginate {

            margin-bottom: 30px

        }

    }

}

.header-top-welcome p {

	font-size: 14px;

	color: var(--white);

	letter-spacing: 0.3px

}

.header-top-select {

	margin-top: 3px;

	display: flex;

	align-items: center;

	justify-content: center

}

.header-select {

	width: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	border-right: 1px solid var(--green)

}

.header-select:last-child {

	border: none

}

.header-select i {

	font-size: 16px;

	margin-right: 8px;

	color: var(--white)

}

.header-select .nice-select {

	line-height: 20px

}

.header-select .nice-select::after {

	border-right-color: var(--white);

	border-bottom-color: var(--white)

}

.header-select .nice-select .current {

	color: var(--white)

}

.header-top-list {

	display: flex;

	align-items: center;

	justify-content: flex-end

}

.header-top-list li {

	margin-left: 35px

}

.header-top-list li a {

	font-size: 14px;

	color: var(--white);

	letter-spacing: 0.3px;

	white-space: nowrap;

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.header-top-list li a:hover {

	color: var(--green-chalk)

}

@media (max-width: 767px) {

	/* .header-top-welcome, */

	.header-top-list {

		display: none

	}

	.header-top-select {

		width: 270px;

		margin: 0px auto

	}

}

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

	.header-top-welcome {

		text-align: center;

		margin-bottom: 10px

	}

}

.header-part {

    border-bottom: 1px solid var(--border);

	background: var(--white);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.header-part.active {

	position: sticky;

	top: 0px;

	left: 0px;

	width: 100%;

	z-index: 3;

	background: var(--white);

	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.header-part.active .header-widget:hover i {

	background: var(--secondary)

}

.header-part.active .header-widget sup {

	border-color: var(--white)

}

.header-part.active .header-form {

	background: var(--white);

	border-color: var(--primary)

}

.header-content {

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 5px 0px;

    justify-content: space-between;

}

.header-logo {

	margin-right: 50px

}

.header-logo img {

	/* width: 100px; */

	height: 80px

}

.header-widget-group {

	display: flex;

	align-items: center;

	justify-content: center

}

.header-location{

    display: flex;

	align-items: center;

	justify-content: center

}

.header-location i{

    margin-right: 10px;

    font-size: 17px;

}

.header-location-part{

    margin-left: 30px;

    /* margin-right: 50px; */

}

.header-widget-group .header-widget {

	margin-left: 20px

}

.header-widget-group .header-widget:first-child {

	margin-left: 0px

}

.header-widget {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center

}

.header-widget:hover i {

	color: var(--white);

	background: var(--secondary);

	text-shadow: var(--primary-tshadow)

}

.header-widget:hover span {

    color: var(--white);

    background-color: #ffbe2c;

}

.header-widget img {

	width: 40px;

	height: 40px;

	border-radius: 50%

}

.header-widget i {

	width: 40px;

	height: 40px;

	font-size: 15px;

	line-height: 40px;

	text-align: center;

	display: inline-block;

	border-radius: 50%;

	color: var(--primary);

	background: var(--chalk);

	transition: all linear .1s;

	-webkit-transition: all linear .1s;

	-moz-transition: all linear .1s;

	-ms-transition: all linear .1s;

	-o-transition: all linear .1s

}

.header-widget span {

    font-size: 15px;

    font-weight: 400;

    padding: 4px 15px;

    background-color: #ba3e60;

    border-radius: 39px;

	margin-left: 8px;

	letter-spacing: 0.3px;

	white-space: nowrap;

	text-align: left;

	text-transform: capitalize;

	color: #ffffff;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.header-widget span small {

	font-size: 16px;

	font-weight: 600;

	line-height: 20px;

	font-family: sans-serif;

	display: block

}

.header-widget sup {

	position: absolute;

	top: -12px;

	left: 20px;

	width: 24px;

	height: 24px;

	font-size: 12px;

	line-height: 20px;

	border-radius: 50%;

	text-align: center;

	color: var(--white);

	background: var(--primary);

	border: 2px solid var(--white);

	text-shadow: var(--primary-tshadow)

}

.header-cart span {

	font-size: 12px;

	margin-left: 15px;

	line-height: 20px;

	text-transform: uppercase

}

.header-form {

	width: 100%;

	margin: 0px 100px;

	    border-radius: 30px;

	background: var(--chalk);

	border: 2px solid #198754;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.header-form:focus-within {

	background: var(--white);

	border-color: var(--primary)

}

.header-form input {

	width: 100%;

	height: 45px;

	font-size: 15px;

	padding-left: 15px

}

.header-form button i {

	width: 45px;

	height: 45px;

	font-size: 15px;

	line-height: 45px;

	text-align: center;

	border-radius: 8px;

	color: var(--text);

	display: inline-block;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.header-form button i:hover {

	color: var(--primary)

}

.header-media-group {

	display: none;

	align-items: center;

	justify-content: space-between

}

.header-media-group a img {

	width: auto;

	height: 45px

}

.header-user img,

.header-src img {

	width: 40px;

	height: 40px;

	border-radius: 50%

}

.header-user i,

.header-src i {

	width: 40px;

	height: 40px;

	font-size: 15px;

	line-height: 40px;

	text-align: center;

	display: inline-block;

	border-radius: 50%;

	color: var(--text);

	background: var(--chalk);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.header-user i:hover,

.header-src i:hover {

	color: var(--white);

	background: var(--primary)

}

.wallet .details-content{

    background: #f9f9f9;

    border: 1px solid #dadada;

    padding: 20px;

    border-radius: 6px;

}

@media (max-width: 991px) {

	.header-content {

		padding: 10px 0px;

		flex-direction: column

	}

	.header-media-group {

		width: 100%;

		display: flex

	}

	.header-widget-group,

	.header-widget,

	.header-logo {

		display: none

	}

	.header-form {

		display: none;

		margin: 10px 0px 0px

	}

	.header-form.active {

		display: flex

	}

}

@media (min-width: 992px) and (max-width: 1199px) {

	.header-widget span {

		display: none

	}

}

.navbar-part {

	background: var(--white)

}

.navbar-content {

	

	display: table;

	margin: 0 auto;

	align-items: center;

	justify-content: space-between

}

.navbar-list {

	display: flex;

	align-items: center;

	justify-content: flex-start

}

.navbar-item {

	margin-right: 30px

}

.navbar-item:last-child {

	margin-right: 0px

}

.navbar-link {

	padding: 12px 0px;

	font-weight: 500;

	color: var(--text);

	text-transform: capitalize;

	transition: all linear .1s;

	-webkit-transition: all linear .1s;

	-moz-transition: all linear .1s;

	-ms-transition: all linear .1s;

	-o-transition: all linear .1s

}

.navbar-link:hover {

	color: var(--secondary)

}

.navbar-focus-list {

	display: flex;

	align-items: center;

	justify-content: flex-end

}

.navbar-focus-list li {

	margin-left: 30px

}

.navbar-focus-list li:first-child {

	margin-left: 0px

}

.navbar-focus-list li a {

	font-weight: 500;

	color: var(--text);

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.navbar-focus-list li a:hover {

	color: var(--primary)

}

.navbar-focus-list li a i {

	font-size: 18px;

	margin-right: 5px

}

.navbar-info-group {

	display: flex;

	align-items: center;

	justify-content: center

}

.navbar-info {

	margin-right: 30px;

	display: flex;

	align-items: center;

	justify-content: flex-start

}

.navbar-info:last-child {

	margin-right: 0px

}

.navbar-info i {

	font-size: 30px;

	margin-right: 15px;

	color: var(--primary)

}

.navbar-info p small {

	font-size: 14px;

	line-height: 16px;

	display: block;

	text-align: left;

	text-transform: capitalize

}

.navbar-info p span {

	font-size: 15px;

	font-weight: 500

}

@media (max-width: 991px) {

	.navbar-part {

		display: none

	}

}

@media (min-width: 992px) and (max-width: 1199px) {

	.navbar-list li {

		margin-right: 18px

	}

	.navbar-link {

		font-size: 15px

	}

	.navbar-info {

		margin-right: 15px

	}

	.navbar-info p span {

		font-size: 14px

	}

	.navbar-info i {

		margin-right: 10px

	}

}

.nav-sidebar {

	position: fixed;

	top: 0px;

	left: -320px;

	width: 280px;

	height: 100vh;

	padding: 0px;

	z-index: 5;

	background: var(--white);

	box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.nav-sidebar.active {

	left: 0px

}

.nav-header {

	padding: 15px 0px;

	position: relative;

	text-align: center;

	border-bottom: 1px solid var(--border)

}

.nav-header a img {

	width: auto;

	height: 40px

}

.nav-close {

	position: absolute;

	top: 50%;

	right: 0px;

	transform: translateY(-50%)

}

.nav-close i {

	width: 35px;

	height: 35px;

	font-size: 18px;

	line-height: 35px;

	border-radius: 50%;

	text-align: center;

	display: inline-block;

	color: var(--text);

	background: var(--white);

	text-shadow: var(--primary-tshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.nav-close i:hover {

	color: var(--white);

	background: var(--primary)

}

.nav-content {

	padding: 0px 18px;

	overflow-y: scroll;

	max-height: calc(100vh - 100px)

}

.nav-btn {

	width: 100%;

	padding: 50px 0px;

	margin-bottom: 20px;

	text-align: center;

	background: var(--chalk)

}

.nav-btn .btn {

	font-size: 14px;

	padding: 12px 28px;

	letter-spacing: 0.3px

}

.nav-btn .btn i {

	font-size: 14px

}

.nav-profile {

	width: 100%;

	text-align: center;

	padding: 18px 0px 0px

}

.nav-user {

	margin-bottom: 10px;

	border-radius: 50%;

	border: 2px solid var(--primary)

}

.nav-user img {

	width: 85px;

	height: 85px;

	border-radius: 50%;

	border: 2px solid var(--white)

}

.nav-name {

	margin-bottom: 18px;

	text-transform: capitalize

}

.nav-name a {

	color: var(--heading);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.nav-name a:hover {

	color: var(--primary)

}

.nav-select-group {

	display: flex;

	align-items: center;

	justify-content: center;

	padding-bottom: 18px;

	border-bottom: 1px solid var(--border)

}

.nav-select {

	display: flex;

	align-items: center;

	justify-content: center;

	margin-right: 18px;

	padding-right: 18px;

	line-height: 20px;

	border-right: 1px solid var(--gray-chalk)

}

.nav-select:last-child {

	padding: 0px;

	margin: 0px;

	border: none

}

.nav-select i {

	margin-right: 5px

}

.nav-list {

	width: 100%

}

.nav-list li {

	width: 100%

}

.nav-link {

	width: 100%;

	font-weight: 500;

	padding: 12px 15px;

	border-radius: 8px;

	color: var(--text);

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.nav-link:hover {

	color: var(--primary);

	background: var(--chalk)

}

.nav-link::before {

	right: 15px

}

.nav-link i {

	font-size: 20px;

	margin-right: 12px;

    color: var(--primary);

}

.nav-link.active {

	color: var(--primary);

	background: var(--green-chalk)

}

.nav-info-group {

	padding: 20px 0px;

	margin-top: 15px;

	margin-bottom: 25px;

	border-top: 1px solid var(--border);

	border-bottom: 1px solid var(--border)

}

.nav-info {

	margin-bottom: 20px;

	display: flex;

	align-items: center;

	justify-content: flex-start

}

.nav-info:last-child {

	margin-bottom: 0px

}

.nav-info i {

	font-size: 22px;

	margin-right: 15px;

	color: var(--secondary)

}

.nav-info p small {

	font-size: 14px;

	line-height: 18px;

	display: block;

	text-align: left;

	text-transform: capitalize

}

.nav-info p span {

	font-size: 16px;

	font-weight: 500

}

.nav-footer {

	text-align: center

}

.nav-footer p {

	font-size: 14px;

	color: var(--gray)

}

.nav-footer p a {

	color: var(--primary)

}

.cart-sidebar {

	position: fixed;

	top: 0px;

	right: -450px;

	width: 400px;

	height: 100vh;

	z-index: 5;

	background: var(--white);

	box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.cart-sidebar.active {

	right: 0px

}

.cart-header {

	padding: 18px 25px;

	text-align: center;

	position: relative;

	border-bottom: 1px solid var(--border)

}

.cart-total {

	display: flex;

	align-items: center;

	justify-content: center

}

.cart-total i {

	font-size: 20px;

	margin-right: 8px;

	color: var(--primary)

}

.cart-total span {

	font-weight: 500;

	color: var(--primary);

	text-transform: capitalize

}

.cart-close {

	position: absolute;

	top: 50%;

	left: -18px;

	transform: translateY(-50%)

}

.cart-close i {

	width: 35px;

	height: 35px;

	font-size: 18px;

	line-height: 35px;

	border-radius: 50%;

	text-align: center;

	display: inline-block;

	color: var(--text);

	background: var(--white);

	text-shadow: var(--primary-tshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.cart-close i:hover {

	color: var(--white);

	background: var(--primary)

}

.cart-list {

	height: 100%;

	padding: 0px 15px;

	max-height: calc(100vh - 210px);

	overflow-y: scroll

}

.cart-item {

	padding: 15px 0px;

	display: flex;

	align-items: center;

	justify-content: center;

	align-items: flex-start;

	border-bottom: 1px solid var(--border)

}

.text-right{

	text-align: right;

}

.cart-item:hover .cart-media button {

	transform: scale(1)

}

.cart-item:last-child {

	border-bottom: none

}

.cart-media {

	position: relative;

	margin-right: 25px

}

.cart-media a img {

	width: 100px;

	border-radius: 8px

}

.cart-media button {

	position: absolute;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	border-radius: 8px;

	background: rgba(0, 0, 0, 0.2);

	transform: scale(0);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.cart-media button i {

	width: 32px;

	height: 32px;

	font-size: 18px;

	line-height: 32px;

	text-align: center;

	border-radius: 5px;

	display: inline-block;

	color: var(--red);

	background: rgba(255, 255, 255, 0.9);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.cart-media button i:hover {

	color: var(--white);

	background: var(--red)

}

.cart-info-group {

	width: 100%

}

.cart-info {

	margin-bottom: 13px

}

.cart-info h6 {

	font-weight: 400;

	text-transform: capitalize

}

.cart-info h6 a {

	color: var(--heading)

}

.cart-info p {

	font-size: 14px

}

.cart-action-group {

	display: flex;

	align-items: center;

	justify-content: center;

	justify-content: space-between

}

.cart-action-group .product-action {

	display: flex

}

.cart-action-group .product-action button i {

	width: 30px;

	height: 30px;

	font-size: 12px;

	line-height: 30px;

	border-radius: 5px

}

.cart-action-group .product-action input {

	width: 45px;

	height: 30px;

	font-size: 14px;

	border-radius: 5px;

	color: var(--primary);

	background: var(--chalk)

}

.cart-action-group h6 {

	font-weight: 500;

	color: var(--primary)

}

.cart-footer {

	padding: 20px 15px 0px;

	text-align: center;

	box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08)

}

.coupon-btn {

	font-weight: 500;

	margin-bottom: 20px;

	color: var(--primary);

	text-shadow: var(--primary-tshadow)

}

.coupon-btn:hover {

	text-decoration: underline

}

.coupon-form {

	padding: 3px;

	border-radius: 8px;

	margin-bottom: 18px;

	display: flex;

	align-items: center;

	justify-content: center;

	border: 1px solid var(--border);

	box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s;

	/* display: none */

}

.coupon-form:focus-within {

	border-color: var(--primary)

}

.coupon-form input {

	width: 100%;

	height: 38px;

	padding: 0px 15px

}

.coupon-form button span {

	width: 100px;

	height: 38px;

	font-size: 14px;

	line-height: 38px;

	border-radius: 8px;

	display: block;

	text-align: center;

	text-transform: uppercase;

	color: var(--white);

	background: var(--primary)

}

.cart-checkout-btn {

	padding: 10px 0px;

	border-radius: 8px;

	background: var(--primary);

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.cart-checkout-btn:hover {

	background: var(--heading)

}

.checkout-label {

	width: 100%;

	height: 30px;

	font-size: 15px;

	line-height: 30px;

	letter-spacing: 0.3px;

	text-align: center;

	text-transform: capitalize;

	color: var(--white)

}

.checkout-price {

	padding: 0px 25px;

	letter-spacing: 0.3px;

	color: var(--white);

	border-left: 1px solid var(--border)

}

@media (max-width: 450px) {

	.cart-sidebar {

		right: 0px;

		width: 100%;

		height: 100vh;

		transform: scale(0);

		margin: 80px 0px 0px;

		border-radius: 15px 15px 0px 0px;

		transition: all linear .3s;

		-webkit-transition: all linear .3s;

		-moz-transition: all linear .3s;

		-ms-transition: all linear .3s;

		-o-transition: all linear .3s

	}

	.cart-sidebar.active {

		transform: scale(1);

		transform-origin: top

	}

	.cart-close {

		left: 50%;

		top: -45px;

		bottom: inherit;

		transform: translateX(-50%);

		border-radius: 50px 50px 0px 0px;

		box-shadow: 0px -8px 10px 0px rgba(0, 0, 0, 0.15)

	}

	.cart-list {

		max-height: calc(100vh - 290px)

	}

	.cart-media a img {

		width: 80px

	}

}

.category-sidebar {

	position: fixed;

	top: 0px;

	left: -320px;

	width: 280px;

	height: 100vh;

	z-index: 5;

	background: var(--white);

	box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.category-sidebar.active {

	left: 0px

}

.category-header {

	padding: 15px 18px;

	position: relative;

	border-bottom: 1px solid var(--border);

	display: flex;

	align-items: center;

	justify-content: flex-start

}

.category-title {

	color: var(--primary);

	text-transform: capitalize;

	display: flex;

	align-items: center;

	justify-content: flex-start

}

.category-title i {

	margin-right: 8px

}

.category-close {

	position: absolute;

	top: 50%;

	right: 2px;

	transform: translateY(-50%)

}

.category-close i {

	width: 35px;

	height: 35px;

	font-size: 18px;

	line-height: 35px;

	border-radius: 50%;

	text-align: center;

	display: inline-block;

	color: var(--text);

	background: var(--white);

	text-shadow: var(--primary-tshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.category-close i:hover {

	color: var(--white);

	background: var(--primary)

}

.category-list {

	width: 100%;

	padding: 0px 15px;

	overflow-y: scroll;

	height: calc(100vh - 130px)

}

.category-item {

	width: 100%;

	border-bottom: 1px solid var(--border)

}

.category-link {

	font-size: 16px;

	font-weight: 400;

	padding: 12px 15px;

	color: var(--text);

	text-transform: capitalize;

	display: flex;

	align-items: center;

	justify-content: flex-start;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.category-link i {

	font-size: 25px;

	margin-right: 15px;

	display: inline-block;

    color: var(--secondary);

}

.category-footer {

	text-align: center;

	margin-top: 20px

}

.category-footer p {

	font-size: 14px;

	color: var(--gray)

}

.category-footer p a {

	color: var(--primary)

}

.mobile-menu {

	position: fixed;

	bottom: 0px;

	left: 0px;

	width: 100%;

	z-index: 3;

	background: var(--white);

	border-radius: 10px 10px 0px 0px;

	box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1);

	display: flex;

	align-items: center;

	justify-content: center;

	justify-content: space-between;

	display: none

}

.mobile-menu a,

.mobile-menu button {

	display: flex;

	align-items: center;

	justify-content: center;

	flex-direction: column;

	width: 80px;

	padding: 8px 0px;

	border-radius: 8px;

	position: relative

}

.mobile-menu a:hover,

.mobile-menu button:hover {

	background: var(--chalk)

}

.mobile-menu a:hover i,

.mobile-menu button:hover i {

	color: var(--primary)

}

.mobile-menu a:hover span,

.mobile-menu button:hover span {

	color: var(--primary)

}

.mobile-menu a i,

.mobile-menu button i {

	font-size: 22px;

	margin-bottom: 5px;

	color: var(--primary);

	text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1)

}

.mobile-menu a span,

.mobile-menu button span {

	font-size: 10px;

	line-height: 12px;

	color: var(--primary);

	text-transform: uppercase

}

.mobile-menu a sup,

.mobile-menu button sup {

	position: absolute;

	top: -5px;

	left: 75%;

	width: 24px;

	height: 24px;

	font-size: 12px;

	line-height: 20px;

	border-radius: 50%;

	text-align: center;

	transform: translateX(-50%);

	color: var(--white);

	background: var(--secondary);

	border: 2px solid var(--green-chalk);

	text-shadow: var(--primary-tshadow)

}

.mobile-menu a .fas fa-shopping-basket,

.mobile-menu button .fas fa-shopping-basket {

	font-size: 18px

}

@media (max-width: 991px) {

	.mobile-menu {

		display: flex

	}

}

.product-view {

	max-width: 1000px;

	border-radius: 8px;

	background: var(--white)

}

.view-gallery {

	margin: 30px;

	position: relative

}

.view-label-group {

	position: absolute;

	top: 0px;

	left: 0px;

	z-index: 1;

	display: flex;

	flex-direction: column

}

.view-label {

	font-size: 15px;

	padding: 6px 10px;

	margin-bottom: 6px;

	line-height: 13px;

	border-radius: 3px;

	text-align: center;

	text-transform: capitalize;

	color: var(--white)

}

.view-label:last-child {

	margin-bottom: 0px

}

.view-label.off {

	background: var(--red)

}

.view-label.new {

	background: var(--green)

}

.view-label.sale {

	background: var(--orange)

}

.view-label.feat {

	background: var(--purple)

}

.view-label.rate {

	background: var(--yellow)

}

.view-details {

	margin: 30px

}

.view-name {

	font-size: 26px;

	line-height: 34px;

	margin-bottom: 5px;

	text-transform: capitalize

}

.view-name a {

	color: var(--heading)

}

.view-name a:hover {

	color: var(--primary)

}

.view-meta {

	margin-bottom: 12px;

	display: flex;

	align-items: center;

	justify-content: flex-start

}

.view-meta p {

	font-size: 13px;

	margin-right: 20px;

	text-transform: uppercase;

	color: var(--placeholder)

}

.view-meta span,

.view-meta a {

	margin-left: 5px;

	color: var(--placeholder)

}

.view-meta a:hover {

	text-decoration: underline;

	color: var(--primary)

}

.view-rating {

	display: flex;

	align-items: center;

	justify-content: flex-start;

	margin-bottom: 15px

}

.view-rating i,

.view-rating a {

	font-size: 15px;

	margin-right: 3px;

	color: var(--gray)

}

.view-rating a {

	margin-left: 8px;

	white-space: nowrap;

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.view-rating a:hover {

	color: var(--primary);

	text-decoration: underline

}

.view-rating .active {

	color: var(--yellow)

}

.view-price {

	margin-bottom: 20px

}

.view-price del {

	color: var(--red);

	margin-right: 25px

}

.view-price span {

	color: var(--primary)

}

.view-price span small {

	font-size: 14px;

	font-weight: 400;

	text-transform: capitalize

}

.view-desc {

	margin-bottom: 25px

}

.view-list-group {

	display: flex;

	align-items: center;

	justify-content: center;

	justify-content: flex-start;

	margin-bottom: 25px

}

.view-list-group:last-child {

	margin-bottom: 0px

}

.view-list-title {

	font-weight: 500;

	margin-right: 15px;

	color: var(--heading);

	text-transform: capitalize

}

.view-tag-list {

	display: flex;

	align-items: center;

	justify-content: center

}

.view-tag-list li {

	margin-right: 8px

}

.view-tag-list li a {

	font-size: 14px;

	line-height: 12px;

	padding: 8px 10px;

	border-radius: 5px;

	letter-spacing: 0.3px;

	text-transform: capitalize;

	color: var(--text);

	background: var(--chalk);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.view-tag-list li a:hover {

	color: var(--white);

	background: var(--primary)

}

.view-share-list {

	display: flex;

	align-items: center;

	justify-content: center

}

.view-share-list li {

	margin-right: 8px

}

.view-share-list li a {

	width: 35px;

	height: 35px;

	font-size: 16px;

	line-height: 35px;

	border-radius: 50%;

	text-align: center;

	color: var(--text);

	background: var(--chalk);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.view-share-list li a:hover {

	color: var(--white);

	background: var(--primary)

}

.view-add-group {

	margin: 45px 0px 15px

}

.view-add-group .product-add,

.view-add-group .action-input {

	height: 32px;

	line-height: 46px;

	letter-spacing: 0.3px;

	text-transform: uppercase;

	color: var(--white);

	background: var(--primary)

}

.view-add-group .product-add,

.view-add-group .product-add {

	height: 40px;

	line-height: 46px;

	letter-spacing: 0.3px;

	text-transform: uppercase;

	color: var(--white);

	background: var(--primary)

}

.view-action-group {

	display: grid;

	grid-gap: 15px;

	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

	position: relative

}

.view-action-group a {

	padding: 10px 0px;

	border-radius: 8px;

	color: var(--text);

	background: var(--border);

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.view-action-group a i {

	font-size: 16px;

	margin-right: 8px

}

.view-action-group a span {

	font-size: 14px;

	font-weight: 500;

	letter-spacing: 0.5px;

	text-transform: uppercase

}

.view-wish:hover {

	color: var(--white);

	background: var(--primary)

}

.preview-slider {

	margin-bottom: 20px

}

.preview-slider li img {

	width: 100%;

	border-radius: 8px

}

.thumb-slider li {

	margin: 0px 10px;

	cursor: pointer

}

.thumb-slider li img {

	width: 100%;

	border-radius: 8px;

	border: 1px solid var(--border)

}

.thumb-slider .slick-center img {

	border: 1px solid var(--primary)

}

@media (max-width: 500px) {

	.view-gallery,

	.view-details {

		margin: 25px

	}

	.view-list-group {

		align-items: flex-start;

		flex-direction: column

	}

	.view-list-title {

		margin: 0px 0px 10px

	}

}

@media (max-width: 767px) {

	.product-view {

		max-width: 480px

	}

}

.countdown-part {

	padding: 80px 0px;

	background: linear-gradient(to left, #c3ffda, #a1f3c0)

}

.countdown-content {

	text-align: center

}

.countdown-content h3 {

	font-size: 40px;

	font-weight: 700;

	line-height: 48px;

	text-transform: uppercase;

	margin-bottom: 12px

}

.countdown-content p {

	margin-bottom: 38px

}

.countdown-clock {

	margin-bottom: 45px

}

.countdown-img {

	position: relative

}

.countdown-img img {

	width: 100%

}

.countdown-off {

	width: 120px;

	height: 120px;

	border-radius: 50%;

	padding: 35px 30px 30px;

	background: var(--red);

	position: absolute;

	top: 0px;

	left: 0px

}

.countdown-off span {

	display: block;

	text-transform: uppercase;

	font-size: 30px;

	font-weight: 500;

	letter-spacing: 0.5px;

	color: var(--white)

}

@media (max-width: 767px) {

	.countdown-part {

		padding: 60px 0px

	}

	.countdown-img {

		margin-top: 30px

	}

}

.news-part {

	padding: 70px 0px;

	background: url(../../images/newsletter.jpg);

	background-repeat: no-repeat;

	background-position: center;

	background-size: cover;

	position: relative;

	z-index: 1

}

.news-part::before {

	position: absolute;

	content: "";

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	background: linear-gradient(to right, rgba(6, 23, 56, 0.8), rgba(17, 151, 68, 0.8));

	z-index: -1

}

.news-text h2 {

	font-size: 35px;

	color: var(--white);

	margin-bottom: 5px

}

.news-text p {

	font-size: 18px;

	font-weight: 300;

	color: var(--white)

}

.news-form {

	width: 100%;

	padding: 6px;

	border-radius: 8px;

	background: var(--white);

	display: flex;

	align-items: center;

	justify-content: center

}

.news-form input {

	width: 100%;

	height: 50px;

	padding: 0px 20px;

	line-height: 50px

}

.news-form button span {

	width: 180px;

	font-size: 14px;

	font-weight: 500;

	padding: 12px 0px;

	border-radius: 8px;

	text-align: center;

	display: inline-block;

	text-transform: uppercase;

	color: var(--white);

	background: var(--secondary)

}

.news-form button span i {

	margin-right: 5px

}

@media (max-width: 575px) {

	.news-form {

		flex-direction: column

	}

}

@media (max-width: 767px) {

	.news-text {

		margin-bottom: 30px

	}

}

@media (max-width: 991px) {

	.news-part {

		padding: 50px 30px 60px

	}

	.news-part .container-fluid {

		padding: 0px

	}

}

.intro-part {

	padding: 80px 0px;

	background: var(--intro-bg)

}

.intro-wrap {

	display: flex;

	align-items: flex-start;

	justify-content: flex-start

}

.intro-wrap:hover .intro-icon i {

	color: var(--white);

	background: var(--primary)

}

.intro-icon {

	margin-right: 20px

}

.intro-icon i {

	width: 50px;

	height: 50px;

	font-size: 18px;

	line-height: 43px;

	border-radius: 50%;

	text-align: center;

	display: inline-block;

	color: var(--primary);

	background: var(--white);

	border: 3px double var(--primary);

	box-shadow: var(--primary-bshadow);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.intro-content h5 {

	font-size: 17px;

	margin-bottom: 8px;

	text-transform: capitalize

}

.intro-content p {

	font-size: 15px;

	line-height: 22px

}

@media (max-width: 767px) {

	.intro-part {

		padding: 60px 0px 30px

	}

	.intro-wrap {

		margin-bottom: 30px

	}

}

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

	.intro-part {

		padding: 80px 0px 50px

	}

	.intro-wrap {

		margin-bottom: 30px

	}

}

.footer-part {

	padding-top: 52px;

	background-color: #f6f6f6;

    border-top: solid 1px #ba3e601f;

}

.footer-widget {

	display: grid;

	grid-template-columns: 100%

}

.footer-logo {

	margin-bottom: 25px

}

.footer-logo img {

	/* width: 140px */

}

.footer-desc {

	    margin-bottom: 30px;

    font-size: 14px;

    margin-top: 5px;

    padding: 0 30px;

}

.footer-social li {

	display: inline-block;

	margin-right: 7px;

	/* margin-top:30px; */

}

.footer-social li:last-child {

	margin-right: 0px

}

.footer-social li a {

       width: 35px;

    height: 35px;

    font-size: 15px;

    line-height: 15px;

    border-radius: 50%;

    text-align: center;

    color: var(--primary);

    background: var(--white);

    text-shadow: var(--primary-tshadow);

    box-shadow: var(--primary-bshadow);

    transition: all linear .3s;

    -webkit-transition: all linear .3s;

    -moz-transition: all linear .3s;

    -ms-transition: all linear .3s;

    -o-transition: all linear .3s;

    padding: 10px;

}

.footer-social li a:hover {

	color: var(--white);

	background: var(--primary)

}

.footer-title {

	color: #a9a9a9;

    margin-bottom: 20px;

    letter-spacing: -0.3px;

    text-transform: capitalize;

    font-weight: 600;

    font-size: 16px;

}



.footer-title:hover {

    color:var(--primary)

}



.footer-widget.contact {

	/* margin-left: 60px */

}

.footer-contact li {

	display: flex;

	align-items: center;

	margin-bottom: 18px

}

.footer-contact li:last-child {

	margin-bottom: 0px

}

.footer-contact li i {

	font-size: 21px;

	margin-right: 5px;

	color: var(--primary)

}

.footer-contact li p span {

	display: block

}

/*.footer-links {*/

/*	display: grid;*/

/*	grid-gap: 50px;*/

/*	grid-template-columns: 1fr 1fr*/

/*}*/

.footer-links ul li {

	margin-bottom: 5px

}

.footer-links ul li:last-child {

	margin-bottom: 0px

}

.footer-links ul li a {

	color: var(--text);

    font-size: 14px;

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.footer-links ul li a:hover {

	color: var(--primary);

	text-decoration: underline

}

.footer-app {

	display: grid;

	grid-gap: 10px;

	grid-template-columns: 1fr 1fr

}

.footer-app a img {

	width: 80%

}

.footer-bottom {

    margin-top: 0px;

    padding: 10px 20px;

    border-radius: 0;

        background: #f6f6f6;

    border-top: 1px solid #ba3e601f;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.footer-copytext {

	font-size: 15px;

	color: var(--black)

}

.footer-copytext a {

	color: var(--green-chalk)

}

.footer-copytext a:hover {

	text-decoration: underline

}

.footer-card a {

	margin-left: 10px

}

.footer-card a img {

	width: 50px;

	border-radius: 3px

}



.couponcard{

    background: #f9f9f9;

    border: 1px solid #dadada;

    padding: 20px;

    border-radius: 6px;

    text-align: center;

    margin: 0 20px;

    margin-bottom: 25px;

}



.couponcard .coupontitle{

    font-size: 20px;

    font-weight: 600;

}

.couponcard .copontxt{

    font-size: 14px;

}



.couponcard .couponcode{

    font-size: 17px;

    border: 3px dotted #ba3e60;

    color: #000;

    border-radius: 5px;

    padding: 5px 10px;

    margin: 7px 0;

    margin-bottom: 10px;

}



.couponcard .expriry{

    font-size: 14px;

    font-weight: 600;

}

.couponcard .clickcopied{

    background: #ba3e60;

    margin-top: 10px;

    color: #fff;

    border-radius: 6px;

    padding: 4px;

    cursor: pointer;

}



@media (max-width: 768px) {

	.footer-part .container-fluid {

		padding: 0px 25px

	}

	.footer-widget.contact {

		margin-left: 15px

	}

}

@media (max-width: 1199px) {

	.footer-part {

		padding-top: 50px

	}

	.footer-widget {

		margin-bottom: 40px

	}

	.footer-bottom {

		margin-top: 10px

	}

}

@media (max-width: 767px) {

	.footer-bottom {

		padding: 25px 15px 75px;

		flex-direction: column;

		text-align: center

	}

	.footer-copytext {

		margin-bottom: 10px

	}

	.footer-card a {

		margin: 0px 3px

	}

}

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

	.footer-bottom {

		padding: 25px 30px 75px

	}

}

.blog-widget {

	margin-bottom: 30px;

	margin-left: 5px;

	border-radius: 8px;

	padding: 18px 25px 25px;

	background: var(--white)

}

.blog-widget:last-child {

	margin-bottom: 0px

}

.blog-widget-title {

	padding-bottom: 16px;

	margin-bottom: 20px;

	position: relative;

	text-transform: capitalize;

	border-bottom: 1px solid var(--border)

}

.blog-widget-title::before {

	position: absolute;

	content: "";

	bottom: -2px;

	left: 0px;

	width: 50px;

	height: 2px;

	background: var(--primary)

}

.blog-widget-form {

	position: relative

}

.blog-widget-form input {

	width: 100%;

	height: 45px;

	padding: 0px 15px 0px 60px;

	border-radius: 8px;

	background: var(--chalk);

	border: 1px solid var(--border);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-widget-form input:focus-within {

	border-color: var(--primary)

}

.blog-widget-form button {

	position: absolute;

	top: 0px;

	left: 0px;

	width: 45px;

	height: 45px;

	line-height: 45px;

	text-align: center;

	color: var(--white);

	background: var(--primary);

	border-radius: 8px 0px 0px 8px

}

.blog-widget-feed li {

	display: flex;

	margin-bottom: 25px;

	padding-bottom: 25px;

	border-bottom: 1px solid var(--border)

}

.blog-widget-feed li:last-child {

	margin: 0px;

	padding: 0px;

	border: none

}

.blog-widget-media img {

	width: 100px;

	border-radius: 8px;

	margin-right: 20px;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-widget-text {

	font-size: 17px;

	line-height: 24px

}

.blog-widget-text a {

	color: var(--heading);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-widget-text a:hover {

	color: var(--primary)

}

.blog-widget-text span {

	display: block;

	margin-top: 8px;

	font-size: 13px;

	font-weight: 400;

	text-transform: uppercase

}

.blog-widget-category li {

	margin-bottom: 15px;

	padding-bottom: 15px;

	border-bottom: 1px solid var(--border)

}

.blog-widget-category li:last-child {

	margin: 0px;

	padding: 0px;

	border: none

}

.blog-widget-category li:hover a {

	color: var(--primary)

}

.blog-widget-category li:hover a span {

	background: var(--primary)

}

.blog-widget-category li a {

	width: 100%;

	font-size: 17px;

	color: var(--text);

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-widget-category li a span {

	font-size: 14px;

	float: right;

	width: 30px;

	height: 30px;

	line-height: 32px;

	text-align: center;

	border-radius: 50%;

	color: var(--white);

	background: var(--heading);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-widget-tag li {

	display: inline-block;

	margin: 0px 8px 12px 0px

}

.blog-widget-tag li a {

	font-size: 14px;

	padding: 5px 12px;

	border-radius: 3px;

	color: var(--text);

	background: var(--chalk);

	text-transform: capitalize;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-widget-tag li a:hover {

	color: var(--white);

	background: var(--primary)

}

.blog-widget-social li {

	display: inline-block;

	margin-right: 10px

}

.blog-widget-social li a {

	width: 45px;

	height: 45px;

	font-size: 18px;

	line-height: 45px;

	text-align: center;

	border-radius: 3px;

	color: var(--white);

	background: var(--heading);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.blog-widget-social li a:hover {

	background: var(--primary)

}

@media (max-width: 575px) {

	.blog-widget-social li {

		margin-right: 5px

	}

	.blog-widget-social li a {

		width: 40px;

		height: 40px;

		font-size: 16px;

		line-height: 40px

	}

}

@media (min-width: 992px) and (max-width: 1199px) {

	.blog-widget-media img {

		width: 95px

	}

	.blog-widget-social li {

		margin-right: 5px

	}

	.blog-widget-social li a {

		width: 40px;

		height: 40px;

		font-size: 16px;

		line-height: 40px

	}

}

@media (max-width: 991px) {

	.blog-widget {

		margin-left: 0px

	}

}

.shop-filter {

	padding: 20px 30px;

	border-radius: 8px;

	margin-bottom: 25px;

	background: var(--white);

	border: 1px solid var(--border);

	display: flex;

	align-items: center;

	justify-content: space-between

}

.shop-filter .nice-select {

	border-radius: 6px;

	background: var(--chalk);

	padding: 8px 35px 8px 20px;

	border: 1px solid var(--border)

}

.shop-filter .nice-select::after {

	right: 20px

}

.shop-filter .nice-select .current {

	font-size: 15px

}

.shop-filter .nice-select .list {

	top: 45px;

	align-items: flex-start;

	flex-direction: column

}

.shop-filter ul {

	display: flex;

	align-items: center;

	justify-content: center

}

.shop-filter ul li {

	margin: 0px 5px

}

.shop-filter ul li a {

	width: 40px;

	height: 40px;

	font-size: 16px;

	line-height: 40px;

	border-radius: 50%;

	text-align: center;

	color: var(--text);

	background: var(--chalk)

}

.shop-filter ul li .active {

	color: var(--white);

	background: var(--primary)

}

.shop-filter p {

	font-size: 15px;

	text-transform: capitalize

}

@media (max-width: 767px) {

	.shop-filter {

		flex-direction: column

	}

	.shop-filter .nice-select {

		margin-bottom: 15px

	}

	.shop-filter ul {

		margin-bottom: 15px

	}

}

.shop-widget-promo {

	margin-bottom: 25px;

	border-radius: 8px;

	text-align: center;

	overflow: hidden

}

.shop-widget-promo img {

	width: 100%;

	border-radius: 8px;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.shop-widget-promo img:hover {

	transform: scale(1.05)

}

.shop-widget {

	padding: 20px 20px;

	border-radius: 8px;

	margin-bottom: 25px;

	background: var(--white);

	border: 1px solid var(--border)

}

.shop-widget:last-child {

	margin-bottom: 0px

}

.shop-widget-title {

	padding-bottom: 12px;

	text-transform: uppercase;

	border-bottom: 1px solid var(--border)

}

.shop-widget-btn {

	width: 100%;

	font-size: 15px;

	padding: 8px 0px;

	border-radius: 8px;

	color: var(--heading);

	background: var(--border);

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.shop-widget-btn:hover {

	color: var(--white);

	background: var(--primary)

}

.shop-widget-btn i {

	margin-right: 8px;

	margin-top: -1px

}

.shop-widget-btn span {

	text-transform: capitalize

}

.shop-widget-group {

	display: grid;

	grid-gap: 10px;

	grid-template-columns: repeat(2, 1fr);

	grid-template-rows: auto;

	margin: 15px 0px

}

.shop-widget-group input {

	width: 100%;

	height: 45px;

	border-radius: 5px;

	background: var(--chalk);

	text-align: center

}

.shop-widget-list {

	margin: 18px 0px 20px

}

.shop-widget-list li {

	margin-bottom: 12px;

	color: var(--gray);

	display: block;

	align-items: center;

	justify-content: space-between;

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.shop-widget-list li a:hover {

	color: var(--primary);

}

.shop-widget-list li:last-child {

	margin-bottom: 0px

}

.shop-widget-content {

	display: flex;

	align-items: center;

	justify-content: flex-start

}

.shop-widget-content input {

	width: 15px;

	height: 15px;

	margin-right: 12px;

	cursor: pointer

}

.shop-widget-content label {

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	text-transform: capitalize

}

.shop-widget-content label i {

	font-size: 15px;

	margin-left: 8px;

	color: var(--gray)

}

.shop-widget-content label i:first-child {

	margin-left: 0px

}

.shop-widget-content label i.active {

	color: var(--yellow)

}

.shop-widget-number {

	font-size: 15px

}

.shop-widget-search {

	width: 100%;

	height: 40px;

	padding: 0px 15px;

	border-radius: 5px;

	background: var(--chalk);

	border: 1px solid var(--border);

	transition: all linear .3s;

	-webkit-transition: all linear .3s;

	-moz-transition: all linear .3s;

	-ms-transition: all linear .3s;

	-o-transition: all linear .3s

}

.shop-widget-search:focus-within {

	border-color: var(--primary)

}

/* .shop-widget-scroll {

	height: 279px;

	overflow-y: scroll;

	padding-right: 10px

} */

.single-banner {

	background: url(../../images/breadcrumb1.webp);

	background-repeat: no-repeat;

	background-position: bottom;

	background-size: cover;

	padding: 100px 0px;

	text-align: center;

	position: relative;

	z-index: 1

}

.single-banner::before {

	position: absolute;

	content: "";

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	    background: #ba3e6026;

	    /* background: linear-gradient(to left, rgb(186 62 96), rgb(186 62 96 / 35%)); */

	z-index: -1

}

.single-banner h2 {

	font-size: 25px;

	margin-bottom: 5px;

	color: var(--white);

	text-transform: uppercase

}

.single-banner .pagetitle {

	font-size: 25px;

	margin-bottom: 5px;

	color: var(--white);

	text-transform: uppercase

}

@media (max-width: 767px) {

	.single-banner {

		padding: 18px 0px

	}

	.single-banner h2 {

		font-size: 24px;

		/* margin-bottom: 12px */

	}

	.single-banner .pagetitle {

		font-size: 32px;

		margin-bottom: 12px

	}

}

.top-filter {

	display: flex;

	align-items: center;

	justify-content: space-between;

	margin-bottom: 25px

}

.filter-short {

	width: 225px;

	display: flex;

	align-items: center;

	justify-content: center

}

.filter-show {

	width: 125px;

	display: flex;

	align-items: center;

	justify-content: center

}

.filter-label {

	font-size: 14px;

	font-weight: 500;

	margin-right: 8px;

	white-space: nowrap;

	text-transform: uppercase

}

.filter-select {

	height: 40px;

	background-color: transparent

}

.filter-select:focus-within {

	border-color: #ced4da

}

.filter-action {

	display: flex;

	align-items: center;

	justify-content: flex-end

}

.filter-action a i {

	width: 40px;

	height: 40px;

	font-size: 16px;

	line-height: 40px;

	border-radius: 50%;

	text-align: center;

	color: var(--text);

	background: transparent

}

.filter-action a i:hover {

	color: var(--primary)

}

.filter-action .active i {

	color: var(--white);

	background: var(--primary)

}

.filter-action .active i:hover {

	color: var(--white)

}

@media (max-width: 575px) {

	.filter-label,

	.filter-action {

		display: none

	}

	.filter-show {

		width: 80px

	}

	.filter-short {

		width: 130px

	}

}

.bottom-paginate {

	padding-top: 25px;

	border-top: 1px solid var(--border);

	display: flex;

	align-items: center;

	justify-content: space-between

}

.page-info {

	font-weight: 400;

	color: var(--text)

}

@media (max-width: 575px) {

	.bottom-paginate {

		margin-bottom: 30px;

		flex-direction: column

	}

	.page-info {

		margin-bottom: 15px

	}

}

@media (min-width: 576px) and (max-width: 991px) {

	.bottom-paginate {

		margin-bottom: 30px

	}

}



.abc{

    margin-left: 5rem;



}





.alert{

  background: #ffdb9b;

  padding: 15px 40px;

  min-width: 420px;

      position: fixed;

    z-index: 111111;

  right: 0;

  top: 60px;

  border-radius: 4px;

  border-left: 8px solid #ffa502;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

}

.alert.showAlert{

  opacity: 1;

  pointer-events: auto;

}

.alert.show{

  animation: show_slide 1s ease forwards;

}

@keyframes show_slide {

  0%{

    transform: translateX(100%);

  }

  40%{

    transform: translateX(-10%);

  }

  80%{

    transform: translateX(0%);

  }

  100%{

    transform: translateX(-10px);

  }

}

.alert.hide{

  animation: hide_slide 1s ease forwards;

}

@keyframes hide_slide {

  0%{

    transform: translateX(-10px);

  }

  40%{

    transform: translateX(0%);

  }

  80%{

    transform: translateX(-10%);

  }

  100%{

    transform: translateX(100%);

  }

}

.alert .fa-exclamation-circle{

  position: absolute;

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

  color: #ce8500;

  font-size: 30px;

}

.alert .fa-check-circle{

  position: absolute;

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

  color: #ce8500;

  font-size: 30px;

}

.alert .msg{

  padding: 0 20px;

  font-size: 18px;

  color: #ce8500;

}

.alert .close-btn{

  position: absolute;

  right: 0px;

  top: 50%;

  transform: translateY(-50%);

  background: #ffd080;

  padding: 20px 18px;

  cursor: pointer;

}

.alert .close-btn:hover{

  background: #ffc766;

}

.alert .close-btn .fas{

  color: #ce8500;

  font-size: 22px;

  line-height: 40px;

}





.wishlist{

	text-align: center;

}

.wishlist span i{

	font-size: 70px;

    color: #ba3e60;

}

.wishlist .title{

	font-size: 20px;

}

.promocode{

	text-align: center;

	margin-top: 20px;

}

.promo_code_apply{

	text-align: center;

	margin: 0 auto;

	display: inline-flex;

}

.promocode .promo_code_apply label{

	    border: 1px solid #ba3e60;

    padding: 3px 25px;

    border-right: none;

    font-size: 17px;

    float: left;

    border-radius: 6px 0px 0px 6px;

}



.promocode .promo_code_apply button{

	background: #ba3e60;

	color: #fff;

	font-size: 17px;

	float: left;

    padding: 4px 10px;

    border-radius: 0px 6px 6px 0px;

}

.variant{

	margin-bottom: 20px;

}

.variant ul li{

	display: inline-block;

}

.variant ul li input{

	position: absolute;

	    margin: 0 5px;

}

.variant ul li label{

	background: #0a5d29;

    color: #fff;

    padding: 1px 15px;

    position: relative;

    /* width: 80px; */

    text-align: center;

    border-radius: 5px;

    margin: 0 10px 0 0;

    cursor: pointer;

}

.variant ul li input[type="radio"]:checked+label{

	background: var(--secondary);

    color: #fff;

}



.alert2{

  background: #ffdb9b;

  padding: 15px 40px;

  min-width: 420px;

      position: fixed;

    z-index: 111111;

  right: 0;

  top: 60px;

  border-radius: 4px;

  border-left: 8px solid #ffa502;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

}

.alert2.showAlert{

  opacity: 1;

  pointer-events: auto;

}

.alert2.show{

  animation: show_slide 1s ease forwards;

}

@keyframes show_slide {

  0%{

    transform: translateX(100%);

  }

  40%{

    transform: translateX(-10%);

  }

  80%{

    transform: translateX(0%);

  }

  100%{

    transform: translateX(-10px);

  }

}

.alert2.hide{

  animation: hide_slide 1s ease forwards;

}

@keyframes hide_slide {

  0%{

    transform: translateX(-10px);

  }

  40%{

    transform: translateX(0%);

  }

  80%{

    transform: translateX(-10%);

  }

  100%{

    transform: translateX(100%);

  }

}

.alert2 .fa-exclamation-circle{

  position: absolute;

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

  color: #ce8500;

  font-size: 30px;

}

.alert2 .fa-check-circle{

  position: absolute;

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

  color: #ce8500;

  font-size: 30px;

}

.alert2 .msg{

  padding: 0 20px;

  font-size: 18px;

  color: #ce8500;

}

.alert2 .close-btn{

  position: absolute;

  right: 0px;

  top: 50%;

  transform: translateY(-50%);

  background: #ffd080;

  padding: 20px 18px;

  cursor: pointer;

}

.alert2 .close-btn:hover{

  background: #ffc766;

}

.alert2 .close-btn .fas{

  color: #ce8500;

  font-size: 22px;

  line-height: 40px;

}



/* alert3 cart */

.alert3{

  background: #ffdb9b;

  padding: 15px 40px;

  min-width: 420px;

      position: fixed;

    z-index: 111111;

  right: 0;

  top: 60px;

  border-radius: 4px;

  border-left: 8px solid #ffa502;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

}

.alert3.showAlert{

  opacity: 1;

  pointer-events: auto;

}

.alert3.show{

  animation: show_slide 1s ease forwards;

}

@keyframes show_slide {

  0%{

    transform: translateX(100%);

  }

  40%{

    transform: translateX(-10%);

  }

  80%{

    transform: translateX(0%);

  }

  100%{

    transform: translateX(-10px);

  }

}

.alert3.hide{

  animation: hide_slide 1s ease forwards;

}

@keyframes hide_slide {

  0%{

    transform: translateX(-10px);

  }

  40%{

    transform: translateX(0%);

  }

  80%{

    transform: translateX(-10%);

  }

  100%{

    transform: translateX(100%);

  }

}

.alert3 .fa-exclamation-circle{

  position: absolute;

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

  color: #ce8500;

  font-size: 30px;

}

.alert3 .fa-check-circle{

  position: absolute;

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

  color: #ce8500;

  font-size: 30px;

}

.alert3 .msg{

  padding: 0 20px;

  font-size: 18px;

  color: #ce8500;

}

.alert3 .close-btn{

  position: absolute;

  right: 0px;

  top: 50%;

  transform: translateY(-50%);

  background: #ffd080;

  padding: 20px 18px;

  cursor: pointer;

}

.alert3 .close-btn:hover{

  background: #ffc766;

}

.alert3 .close-btn .fas{

  color: #ce8500;

  font-size: 22px;

  line-height: 40px;

}

.slick-slide img{

    display: block;

    width: 100%;

}

.footer-widget .footer-social {

    margin-top: 20px;

}

.footer-widget .footer-contact p{

    font-size: 13px;    

}

.footer-widget .footer-contact p a{

    color: #a9a9a9;

}

.footer-widget .footer-contact p i{

    color: #ba3e60;

    margin-right: 8px;

    font-size: 16px;

}







.myaccount-tab-menu {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

    border: solid 1px #c1c1c1;

}

.myaccount-tab-menu a:hover, .myaccount-tab-menu a.active {

    background-color: #ba3e60;

    border-color: #fff;

    color: #fff;

}

.myaccount-tab-menu a {

    border: 1px solid #E8E8E8;

    border-bottom: none;

    color: #212121;

    font-weight: 500;

    font-size: 15px;

    display: block;

    padding: 10px 15px;

    text-transform: uppercase;

}

.myaccount-content {

    border: 1px solid #ba3e60;

    padding: 30px;

    border-radius: 10px;

}

.myaccount-content form .single-input-item input {

    width: 100%;

    padding: 12px 10px;

    border: 1px solid #E8E8E8;

}

.feature-name .cart-delete{

    font-size: 1.4rem;

    background-color: lightgray;

    padding: 10px;

    border-radius: 15px;

}

.single-input-item.mb-3 input{

    border: solid 1px gray;

    border-radius: 5px;

    padding: 7px;

    width: 100%;

    outline: none;

    background: none;

}

.single-input-item.mb-3 input:hover{

    border: solid 1px #ba3e60;

    box-shadow: 1px 1px 10px 0.5px #888888;

    border-radius: 5px;

    /* padding: 7px; */

    width: 100%;

    outline: none;

    background: none;

}

.wallet table {

  border-collapse: collapse;

  border-spacing: 0;

  width: 100%;

  border: 1px solid #ddd;

}

.wallet table tr th{

    background-color: #ba3e60;

    color: white;

}

.wallet th, td {

  text-align: left;

  padding: 8px;

  text-align: center;

}





div:where(.swal2-container) button:where(.swal2-styled) {

    margin: 0.3125em !important;

    padding-top: 5px !important;

    padding-right: 15px !important;

    padding-bottom: 5px !important;

    padding-left: 15px !important;

    transition: box-shadow .1s !important;

    box-shadow: 0 0 0 3px rgba(0,0,0,0) !important;

    font-weight: 500 !important;

}



div:where(.swal2-container) div:where(.swal2-popup){

    /* display:none !important; */

    position:relative !important;

    box-sizing:border-box !important;

    grid-template-columns:minmax(0, 100%) !important;

    width:30em !important;

    max-width:100% !important;

    padding:0 0 1.25em !important;

    border:none !important;

    border-radius:5px !important;

    background:#fff !important;

    color:#545454 !important;

    font-family:inherit !important;

    font-size:13px !important;

}





.wallet tr:nth-child(even){background-color: #f2f2f2}







.mainspan{

    color: #ba3e60;

    font-weight: 400;

    font-size: 35px;

}



.editspan{

    font-family: 'DM Serif Display', serif;

    color: #ffbe2c;

    /* font-style: italic; */

    /* padding: 1px 15px 3px 7px; */

    /* border-radius: 32px; */

    /* background-color: #ffbe2c; */

    /* font-style: italic; */

    font-weight: 500;

    /* font-size: 40px; */

}



.refernearn .referdis h1{

    font-size: 24px;

}



.refernearn .referdis p{

    font-size: 16px;

}

.referbox{

    margin-top: 25px;

    margin-bottom: 80px;

    margin-left: 12%;

    margin-right: 12%;

    background: #fff0f0;

    padding: 30px 20px;

    border-radius: 12px;

    

}

.referbox input[type="text"]{

    width: 75%;

    float: left;

    border: 1px solid #cacaca;

    

    border-radius: 8px;

}



.referbox .btn-refer{

    margin-left: 10px;

    background: #ba3e60;

    color: #fff;

    padding: 10px;

    border-radius: 7px;

}



.referbox .referdivider{

    text-align: center;

    display: block;

}



.referbox .socialmediashare{

    text-align: center;

    margin-top: 20px;

}



.referbox .socialmediashare .btnshare{

    background: #ba3e60;

    color: #fff;

    /* padding: 12px 15px; */

    border-radius: 50%;

    font-size: 24px;

    height: 50px;

    width: 50px;

    line-height: 51px;

}

.referbox .socialmediashare .btnshare:hover{

    background-color: #ffbe2c;

}

.btn-viewmore{

    border: 1px solid #ba3e60;

    color: #000;

    padding: 6px 20px;

    border-radius: 7px;

}

.btn-viewmore:hover{

    background-color: #ba3e60;

    color: #fff;

}



.marquee-container {

    /* overflow: hidden;

    white-space: nowrap;

    color: #fff;

    font-size: 12px; */

	overflow: hidden;   /* instead of visible */
  width: 100%;        /* full width on mobile */
  position: relative;
  color: #fff;
  font-size: 12px;

  }



  .marquee {

    /* display: inline-block;

    padding-left: 100%; /* start off screen 

    animation: marquee 12s linear infinite; */

	 display: inline-block;
  padding-left: 100%;
  animation: marquee 12s linear infinite;
  white-space: nowrap;
  }



  @keyframes marquee {

    from { transform: translateX(0); }

    to { transform: translateX(-100%); }

  }



  .whatsapp-top {

        position: fixed;

    right: 3%;

    bottom: 71px;

    width: 40px;

    height: 40px;

    font-size: 12px;

    line-height: 40px;

    text-align: center;

    cursor: pointer;

    z-index: 100;

    border-radius: 50%;

    margin: 0 auto;

    -webkit-transition: .3s;

    transition: .3s;

}

@media (max-width: 580px) {



    .whatsapp-top {

        position: fixed;

        right: 10%;

        bottom: 100px;

    }



    .filterform{

        display: none;

    }

}

#suggestion-box {

      position: absolute;

      background: #fff;

      width: 15.5%;

      /* border: 1px solid #ccc; */

      border-top: none;

      z-index: 1000;

      max-height: 200px;

      overflow-y: auto;

      display: none;

    }

    #suggestion-box li {

      padding: 8px 12px;

      cursor: pointer;

    }

    #suggestion-box li:hover {

      background-color: #f2f2f2;

    }

    .variant p{

        margin-bottom:10px;

    }

    .variant p .size_chart{

        float:right;

        font-size:14px;

        text-decoration:underline !important;

        border:none;

        background:none;

    }

    .sizechartmodal .modal-content{

        background:#fff !important;

    }



	/* footer block */

    .cus_title{
		font-size: 13px;
		font-weight: 800;
	}

	.care_datail , .number , .link{
		font-size: 14px !important;
		color:#7a7a7a !important;
		font-weight: 600 !important;
	}

	.category{
		display: flex;
		justify-content: center;
	}

 .subcat-list {
        display: none;
        margin-top: 5px;
        padding-left: 15px;
    }
    .subcat-list li{
        border-bottom:1px solid #efefef !important;
    }
    .subcat-list li:last-child {
        border: none !important;
    }
    
    .subcat-list li a {
        display: block;
        color: #707070;
        margin: 0;
        margin-top: 10px;
    }